4

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>
4
  • Can you show in display, exactly what do you want ? Commented Mar 10, 2018 at 5:30
  • @zedBlackbeard Thanks for the response. Please check the Question Updated the Expected result.
    – Raghav
    Commented Mar 10, 2018 at 8:00
  • What is output of your code ? you should also change id and class of div Commented Mar 12, 2018 at 5:11
  • Hi @Naveed. I was getting list of sorting options but it was linked to page which was not existed. Like Below URLs http:www.example.com/categoryname/price http:www.example.com/categoryname/name http:www.example.com/categoryname/position
    – Raghav
    Commented Mar 12, 2018 at 5:26

3 Answers 3

3

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; ?>
7
  • Hi, Thanks for the reply. But I was getting empty query string parameter but on hover on the link it was showing with parameter. Please look at the below URL. http:www.example.com/categoryname?product_list_order=
    – Raghav
    Commented Mar 12, 2018 at 6:57
  • which version of magento are you using ? i have tested this in 2.2.0 and it is working fine for me. $_key should be printing attribute name/code, try to echo $_key and check if you get any value Commented Mar 12, 2018 at 7:10
  • I was using Magento 2.2.1. When I look in Console for I was getting this XHR finished loading: POST "http://localhost:8888/mage2/fashion/women/tops-blouses.html?product_list_order=".
    – Raghav
    Commented Mar 12, 2018 at 7:23
  • cod you share your complete code block / file Commented Mar 12, 2018 at 7:27
  • Updated the Question Please check it.
    – Raghav
    Commented Mar 12, 2018 at 7:31
1

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>   
0

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
            );
        }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.