Magento 2.1 – Product Sorting by Name and Price with Ascending and Descending Options

magento-2.1sortsorting

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

Best Answer

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.

Related Topic