Magento 2.2 - Products sort by URL issue

Question

I am facing category page url issue when try to sort products by Price (low to high) or (high to low). I'm using below code to add Price options (high to low).

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

                <option value="<?= /* @escapeNotVerified */ $_key.'&product_list_dir=desc'; ?>"<?php if($block->isOrderCurrent('price') && $block->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>
                <?php echo $block->escapeHtml(__("Price - High to Low")) ?>
                </option>

                    <?php else:?>
                    <option value="<?= /* @escapeNotVerified */ $_key ?>"
                <?php if ($block->isOrderCurrent($_key)): ?>
                    selected="selected"
                <?php endif; ?>
                >
                <?= $block->escapeHtml(__($_order)) ?>
            </option>
        <?php endif; ?>

How to fix this issue.Need help... Category page URL

 https://example.com/boys.html?product_list_order=price%26product_list_dir%3Ddesc

Answer 1

I had a similar requirement where I need to add some custom options.
You can try following code and modify it according to your need.

app/code/Anshu/PriceSort/registration.php

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Anshu_PriceSort',
    __DIR__
);

app/code/Anshu/PriceSort/etc/module.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Anshu_PriceSort">
        <sequence>
            <module name="Magento_Catalog" />
        </sequence>
    </module>
</config>

app/code/Anshu/PriceSort/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\ProductList\Toolbar">
        <plugin name="anshu_pricesort_block_product_productlist_toolbar" type="Anshu\PriceSort\Plugin\Catalog\Block\Toolbar" />
    </type>
    <type name="Magento\Catalog\Model\Config">
        <plugin name="anshu_pricesort_model_config" type="Anshu\PriceSort\Plugin\Catalog\Model\Config" />
    </type>
</config>

app/code/Anshu/PriceSort/Plugin/Catalog/Model/Config.php

<?php

namespace Anshu\PriceSort\Plugin\Catalog\Model;

use Magento\Catalog\Model\Config as CatalogConfig;

class Config
{
    public function afterGetAttributeUsedForSortByArray(CatalogConfig $subject, $result)
    {
        $result['low_to_high'] = __('Price - Low To High');
        $result['high_to_low'] = __('Price - High To Low');
        return $result;
    }
}

app/code/Anshu/PriceSort/Plugin/Catalog/Block/Toolbar.php

<?php

namespace Anshu\PriceSort\Plugin\Catalog\Block;

use Magento\Catalog\Block\Product\ProductList\Toolbar as ProductListToolbar;

class Toolbar
{
    public function afterSetCollection(ProductListToolbar $subject, $result, $collection)
    {
        switch ($subject->getCurrentOrder()) {
            case 'low_to_high':
                return $result->getCollection()->setOrder('price', 'asc');
            case 'high_to_low':
                return $result->getCollection()->setOrder('price', 'desc');
            default:
                return $result;
        }
    }
}

Here Anshu is the namespace or vendor name and PriceSort is module name.