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>
  • Can you show in display, exactly what do you want ? – zed Blackbeard Mar 10 '18 at 5:30
  • @zedBlackbeard Thanks for the response. Please check the Question Updated the Expected result. – Raghav Mar 10 '18 at 8:00
  • What is output of your code ? you should also change id and class of div – Naveed Asim Mar 12 '18 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 Mar 12 '18 at 5:26
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; ?>
  • 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 Mar 12 '18 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 – Naveed Asim Mar 12 '18 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 Mar 12 '18 at 7:23
  • cod you share your complete code block / file – Naveed Asim Mar 12 '18 at 7:27
  • Updated the Question Please check it. – Raghav Mar 12 '18 at 7:31
0

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>   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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