Add new options into sorter

Question

In magento 2 project, it provides 3 options by default.

1. Position
2. Product Name
3. Price

I need to change these options to sort as,

1. Most Popular
2. Price high to low
3. Price low to high

I can add from backend some other sorting options like color and product attributes as sorting options. But I need to add above options.

Can anyone help me with that please?

How do I add new values in sorter? can it be done in backend or have to do by code?

Update

Sorter is the dropdown that has the option visible-> Position

Answer 1

Step 1: Create plugins in

app/code/Vendor/Module/etc/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="custom_custom_block_toolbar" type="Vendor\Module\Plugin\Catalog\Block\Toolbar" />
    </type>

    <type name="Magento\Catalog\Model\Config">
        <plugin name="custom_catalog_model_config" type="Vendor\Module\Plugin\Catalog\Model\Config" />
    </type>

</config>

Step 2: Create Config.php in

app/code/Vendor/Module/Plugin/Catalog/Model/Config.php

<?php

namespace Vendor\Module\Plugin\Catalog\Model;

class Config
{
    public function afterGetAttributeUsedForSortByArray(
    \Magento\Catalog\Model\Config $catalogConfig,
    $options
    ) {

        $options['popular'] = __('Most Popular');
        $options['low_to_high'] = __('Price - Low To High');
        $options['high_to_low'] = __('Price - High To Low');
        return $options;

    }

}

Step 3: Create Toolbar.php in

app/code/Vendor/Module/Plugin/Catalog/Block/Toolbar.php

<?php
namespace Vendor\Module\Plugin\Catalog\Block;

class Toolbar
{

    /**
    * Plugin
    *
    * @param \Magento\Catalog\Block\Product\ProductList\Toolbar $subject
    * @param \Closure $proceed
    * @param \Magento\Framework\Data\Collection $collection
    * @return \Magento\Catalog\Block\Product\ProductList\Toolbar
    */
    public function aroundSetCollection(
    \Magento\Catalog\Block\Product\ProductList\Toolbar $subject,
    \Closure $proceed,
    $collection
    ) {
    $currentOrder = $subject->getCurrentOrder();
    $result = $proceed($collection);

    if ($currentOrder) {
        if ($currentOrder == 'popular') {
            $collection->getSelect()->joinLeft( 
            'sales_order_item', 
            'e.entity_id = sales_order_item.product_id', 
            array('qty_ordered'=>'SUM(sales_order_item.qty_ordered)')) 
            ->group('e.entity_id') 
            ->order('qty_ordered '.$this->getCurrentDirectionReverse());
        } elseif ($currentOrder == 'high_to_low') {
            $subject->getCollection()->setOrder('price', 'desc');
        } elseif ($currentOrder == 'low_to_high') {
            $subject->getCollection()->setOrder('price', 'asc');
        }
    }

    return $result;
    }


    public function getCurrentDirectionReverse() {
        if ($this->getCurrentDirection() == 'asc') {
            return 'desc';
        } elseif ($this->getCurrentDirection() == 'desc') {
            return 'asc';
        } else {
            return $this->getCurrentDirection();
        }
    }


}