3

File path:

app/design/frontend/<vendor_name>/<theme_name>/Magento_Catalog/templates/product/list/toolbar/sorter.phtml

I want to alter Sorting options as

Name to Alphabets ASC, Alphabets DESC

Price to Price highest First , Price Lowest First

I have tried below solution :

<option value="<?php echo 'name&product_list_dir=asc'; ?>"<?php if($this->isOrderCurrent('name') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>
    <?php echo $block->escapeHtml(__("Alphabetical A-Z")) ?>
</option>

<option value="<?php echo 'name&product_list_dir=desc'; ?>"<?php if($this->isOrderCurrent('name') && $this->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>
    <?php echo $block->escapeHtml(__("Alphabetical Z-A")) ?>
</option>

Issue: When ajax is being called URL created like this -

?product_list_order=price%26product_list_dir%3Ddesc` instead of `?product_list_order=price&product_list_dir=desc
2
  • any solution for this?
    – Joey
    Oct 23, 2017 at 6:46
  • BTW, you cant change that url encoding. but you may able to use jquery/javascript url decoding function and make a redirect. I haven't tried it though.
    – Joey
    Oct 23, 2017 at 10:30

3 Answers 3

1

Here's My solution which works for me

Path(for theme) : /../app/design/frontend//Magento_Catalog/templates/product/list/toolbar/sorter.phtml

<?php
/**
 * Copyright © 2016 Magento. 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"><?php /* @escapeNotVerified */ echo __('Sort By') ?></label>
    <select id="sorter" data-role="sorter" class="sorter-options">
        <option value="<?php /* @escapeNotVerified */ echo 'short_by'; ?>"
            <?php if ($block->isOrderCurrent('short_by')): ?>
                selected="selected"
            <?php endif; ?>
            >
            <?php echo $block->escapeHtml(__("Sorting")) ?>
        </option>
        <?php foreach ($block->getAvailableOrders() as $_key => $_order): ?>
                <?php if($_key == "name"):?>
                    <option value="<?php echo 'name&product_list_dir=asc'; ?>"<?php if($this->isOrderCurrent('name') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>
                        <?php echo $block->escapeHtml(__("Al­pha­be­tisch A-Z")) ?>
                    </option>

                    <option value="<?php echo 'name&product_list_dir=desc'; ?>"<?php if($this->isOrderCurrent('name') && $this->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>
                    <?php echo $block->escapeHtml(__("Alphabetisch Z-A")) ?>
                    </option>

                    <?php elseif($_key == "price"):?>
                            <option value="<?php /* @escapeNotVerified */ echo $_key.'&product_list_dir=asc'; ?>"<?php if($this->isOrderCurrent('price') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>
                            <?php echo $block->escapeHtml(__("Price highest First")) ?>
                            </option>

                            <option value="<?php /* @escapeNotVerified */ echo $_key.'&product_list_dir=desc'; ?>"<?php if($this->isOrderCurrent('price') && $this->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>
                            <?php echo $block->escapeHtml(__("Price Lowest First")) ?>
                            </option>
                    <?php elseif($_key == "position"):?>
                    <?php else:?>
                        <option value="<?php /* @escapeNotVerified */ echo $_key; ?>"
                            <?php if ($block->isOrderCurrent($_key)): ?>
                                selected="selected"
                            <?php endif; ?>
                            >
                            <?php echo $block->escapeHtml(__($_order)) ?>
                        </option>
                    <?php endif; ?>
        <?php endforeach; ?>
    </select>
</div>

Try it if you have any doubt ask me. Thank you.

2
  • seems like you hardcoded each url into php, without checking current url. did you test this with some other options? like with some filters(usually in layered navigation)? if this works then, your answer is very good. Anyway did you find any solution for that url encoding problem?
    – Joey
    Oct 24, 2017 at 5:35
  • Yes, I have tested it and it's working on my live project. @Joey And no I have not find the solution for URL encode yet. Oct 24, 2017 at 5:49
1

Slightly more custom approach if you only need very specific options. Modify the sorter.phtml file (app/design/frontend//Magento_Catalog/templates/product/list/toolbar/sorter.phtml)

<div class="toolbar-sorter sorter sortby-dropdown">
    <button class="custom-sortby-button button action"
            data-mage-init='{
            "toggleAdvanced": {
                "baseToggleClass": "expanded",
                "selectorsToggleClass": "expanded",
                "toggleContainers": "[data-link-column=\"sortby\"]"
            }}'>
        <span><?= /* @escapeNotVerified */ __('Sort By') ?></span>
    </button>
    <div class="sortby-dropdown-pane" id="sortBy" data-link-column="sortby">
        <ul class="sorter-menu">
            <li>
                <a href="<?= $block->getUrl('*/*', array('_current'=> true, '_use_rewrite' => true, '_query' => array('product_list_order' => 'price', 'product_list_dir' => 'asc'))) ?>"<?php if($block->isOrderCurrent('price') and $block->getCurrentDirection() === 'asc'): ?> class="active"<?php endif; ?>>
                    <?= __('Price - Low to High') ?>
                </a>
            </li>
            <li>
                <a href="<?= $block->getUrl('*/*', array('_current'=> true, '_use_rewrite' => true, '_query' => array('product_list_order' => 'price', 'product_list_dir' => 'desc'))) ?>"<?php if($block->isOrderCurrent('price') and $block->getCurrentDirection() === 'desc'): ?> class="active"<?php endif; ?>>
                    <?= __('Price - High to Low') ?>
                </a>
            </li>
            <li>
                <a href="<?= $block->getUrl('*/*', array('_current'=> true, '_use_rewrite' => true, '_query' => array('product_list_order' => 'name', 'product_list_dir' => 'asc'))) ?>"<?php if($block->isOrderCurrent('name') and $block->getCurrentDirection() === 'asc'): ?> class="active"<?php endif; ?>>
                    <?= __('A - Z') ?>
                </a>
            </li>
            <li>
                <a href="<?= $block->getUrl('*/*', array('_current'=> true, '_use_rewrite' => true, '_query' => array('product_list_order' => 'name', 'product_list_dir' => 'desc'))) ?>"<?php if($block->isOrderCurrent('name') and $block->getCurrentDirection() === 'desc'): ?> class="active"<?php endif; ?>>
                    <?= __('Z - A') ?>
                </a>
            </li>
        </ul>
    </div>
</div>

You will then just need to apply some custom CSS.

0

I've found a solution for the sort in price ascending/descending. To do that, I've used jQuery to redirect to url.

First you need to edit sorter.phtml in <vendor_name>/<theme_name>/Magento_Catalog/templates/product/list/toolbar/

Replace select option with your own. this is mine,

<select id="listpage-sorter">
<?php foreach ($block->getAvailableOrders() as $_key => $_order): ?>
<?php if(strtolower($_order) == 'position' ): ?>

<option <?php if ($block->isOrderCurrent($_key)): ?>
selected="selected"
<?php endif; ?>>Most Popular</option>

<?php elseif(strtolower($_order) == 'price'): ?>
<option <?php if ($block->isOrderCurrent($_key) && $block->getCurrentDirection()=="desc"): ?>
selected="selected"
<?php endif; ?>>Price High to Low</option>

<option <?php if ($block->isOrderCurrent($_key) && $block->getCurrentDirection()=="asc" ||$block->getCurrentDirection()==""): ?>
selected="selected"
<?php endif; ?>>Price Low to High</option>

<?php endif; ?>
<?php endforeach; ?>
</select>

Then you can add custom js code to redirect for onChange.

$('#listpage-sorter').on('change', function() {
var sel=this.value;
var url= window.location.href;
if(sel=="Price High to Low")
{
  if(url.indexOf('?')==-1)
{
 window.location.href = url + "?
product_list_order=price&product_list_dir=desc";
}

like that you can redirect on every possible scenario. I didn't put my complete js code. let me know if you want it.

Hope this helps somebody

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.