Magento 2.1 Product Sorting Alter name and price with asc and desc option

Question

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

Answer 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.

Answer 2

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.

Answer 3

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