Magento – How to convert Magento 2 Sort By Dropdown to Horizontal List

magento-2.1php-7sorting

I was trying to Convert Magento 2 Drop down to Horizontal list.

Code Path:

/app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/list/toolbar/sorter.phtml

Actual Code:

<div class="toolbar-sorter sorter">
    <label class="sorter-label" for="sorter">
<?= /* @escapeNotVerified */ __('Sort By') ?></label>
<select id="sorter" data-role="sorter" class="sorter-options">
        <?php foreach ($block->getAvailableOrders() as $_key => $_order): ?>
            <option value="<? /* @escapeNotVerified */ $_key ?>"
                <?php if ($block->isOrderCurrent($_key)): ?>
                    selected="selected"
                <?php endif; ?>
                >
                <?php $block->escapeHtml(__($_order)) ?>
            </option>
        <?php endforeach; ?>
    </select> 

What I tried :

<div id="sorter" data-role="sorter" class="sorter-options">
        <?php foreach ($block->getAvailableOrders() as $_key => $_order): ?>
           <a href="<?= /* @escapeNotVerified */ $_key?>"
                <?php if ($block->isOrderCurrent($_key)): ?>
                class="active"<?php endif; ?>  
                >
                <?= $block->escapeHtml(__($_order)) ?>
         </a>   
        <?php endforeach; ?>
    </div>

Did some research on this and found this LINK

But Couldn’t able to find the Solution. Please help me on this.

Actual Display

Actual Display

Expected Result : On Click Products should sort according to the selection

Expected

Sorter.phtml File

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Product list toolbar
 *
 * @var $block \Magento\Catalog\Block\Product\ProductList\Toolbar
 */
use Magento\Catalog\Model\Product\ProductList\Toolbar;
?>
<div class="toolbar-sorter sorter">
    <label class="sorter-label" for="sorter"><?= /* @escapeNotVerified */ __('Sort By') ?></label>
     <div id="sorter" data-role="sorter" class="sorter-options">
        <?php foreach ($block->getAvailableOrders() as $_key => $_order): ?>
        <a href="<?php echo $block->getPagerUrl("product_list_order=".$_key) ?>"
            <?php if ($block->isOrderCurrent($_key)): ?>
                class="selected"
            <?php endif; ?>
            >
            <?php echo $block->escapeHtml(__($_order)) ?>
        </a>
    <?php endforeach; ?>

    </div>
    <?php if ($block->getCurrentDirection() == 'desc'): ?>
        <a title="<?= /* @escapeNotVerified */ __('Set Ascending Direction') ?>" href="#" class="action sorter-action sort-desc" data-role="direction-switcher" data-value="asc">
            <span><?= /* @escapeNotVerified */ __('Set Ascending Direction') ?></span>
        </a>
    <?php else: ?>
        <a title="<?= /* @escapeNotVerified */ __('Set Descending Direction') ?>" href="#" class="action sorter-action sort-asc" data-role="direction-switcher" data-value="desc">
            <span><?= /* @escapeNotVerified */ __('Set Descending Direction') ?></span>
        </a>
    <?php endif; ?>
</div>

Best Answer

Open your theme /Magento_Catalog/templates/product/list/toolbar/sorter.phtml file and replace your select block with this code below, you may need to copy the magento template file to your theme :

<?php foreach ($block->getAvailableOrders() as $_key => $_order): ?>
        <a href="<?php echo $block->getPagerUrl("product_list_order=".$_key) ?>"
            <?php if ($block->isOrderCurrent($_key)): ?>
                class="selected"
            <?php endif; ?>
            >
            <?php echo $block->escapeHtml(__($_order)) ?>
        </a>
    <?php endforeach; ?>
Related Topic