How to convert Magento 2 Sort By Dropdown to Horizontal List

Question

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

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

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>

Answer 1

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; ?>

Answer 2

the problem is you give the data-role="sorter" to div and missing the data-value attribute.

Use this code :

<a data-role="sorter" data-value="<?= /* @escapeNotVerified */ $_key?>" 
   <?php if ($block->isOrderCurrent($_key)): ?> 
     class="active"
   <?php endif; ?> 
   >
   <?= $block->escapeHtml(__($_order)) ?>
</a>   

Answer 3

Override: module-catalog/templates/product/list/toolbar/sorter.phtml

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

Override : module-catalog/view/frontend/web/js/product/list/toolbar.js

_processLink: function (event) {
            event.preventDefault();
            this.changeUrl(
                event.data.paramName,
                $(event.target).attr('id'),
                event.data.default
            );
        }