Magento 2 Create custom product sorting on catalog pages

Demo extension available here https://github.com/ajourquin/module-custom-product-sorting

Default product sorting list

Magento has 4 default sorting options: Name, Price, Position and Relevance.

Sorting are product attributes, except for “position” in catalog pages and “relevance” in search pages

You can add new product attributes to the sorting list by selecting the attribute you want to sort by in admin and set field “Used for Sorting in Product Listing” to “Yes” under “Storefront properties” tab.

Position corresponds to order set by products in category under “Products in Category” section. Can be set manually or via visual merchandising (Magento Commerce only).

Relevance corresponds to score of product for a search.

Default sorting by category

The default product sorting for all categories is set under
Stores > Configuration > Catalog > Catalog > Storefront > Product Listing Sort by

You can choose a different default product sorting by category.
Set “Default Product Listing Sort By” to the sorting you want as default under “Display Settings” in an edit category page in admin

Add custom sorting

1- Add the custom value in frontend sorting list

\Magento\Catalog\Model\Config::getAttributeUsedForSortByArray is responsible to populate the product sorting dropdown

public function getAttributeUsedForSortByArray()
{
    $options = ['position' => __('Position')];
    foreach ($this->getAttributesUsedForSortBy() as $attribute) {
       /* @var $attribute \Magento\Eav\Model\Entity\Attribute\AbstractAttribute */
        $options[$attribute->getAttributeCode()] = $attribute->getStoreLabel();
    }

    return $options;
}

So to add your custom value just create an after plugin afterGetAttributeUsedForSortByArray

/**
 * @param MagentoConfig $subject
 * @param array $result
 * @return array
 */
public function afterGetAttributeUsedForSortByArray(MagentoConfig $subject, array $result): array
{
    $result['custom_value'] = __('Custom value');

    return $result;
}

2- Add the custom value in config sorting list

\Magento\Catalog\Model\Config\Source\ListSort::toOptionsArray is responsible to populate the product sorting dropdown.
Stores > Configuration > Catalog > Catalog > Storefront > Product Listing Sort by

public function toOptionArray()
{
    $options = [];
    $options[] = ['label' => __('Position'), 'value' => 'position'];
    foreach ($this->_getCatalogConfig()->getAttributesUsedForSortBy() as $attribute) {
        $options[] = ['label' => __($attribute['frontend_label']), 'value' => $attribute['attribute_code']];
    }
    return $options;
}

Create an after plugin afterToOptionArray to add the custom value

/**
 * @param MagentoListSort $subject
 * @param array $result
 * @return array
 */
public function afterToOptionArray(MagentoListSort $subject, array $result): array
{
    \array_push($result, ['label' => __('Custom Value'), 'value' => 'custom_value']);

    return $result;
}

Now you are able to select the Custom Value sorting by default for all categories

3- Add the custom value in category edit page

\Magento\Catalog\Model\Category\Attribute\Source\Sortby::getAllOptions is responsible to populate the dropdown for “Default Product Listing Sort By” field

public function getAllOptions()
{
    if ($this->_options === null) {
        $this->_options = [['label' => __('Position'), 'value' => 'position']];
        foreach ($this->_getCatalogConfig()->getAttributesUsedForSortBy() as $attribute) {
            $this->_options[] = [
                'label' => __($attribute['frontend_label']),
                'value' => $attribute['attribute_code'],
            ];
        }
    }
    return $this->_options;
}

Create an after plugin afterGetAllOptions to add the custom value

/**
 * @param MagentoSortby $subject
 * @param array $result
 * @return array
 */
public function afterGetAllOptions(MagentoSortby $subject, array $result): array
{
    \array_push($result, ['label' => __('Custom Value'), 'value' => 'custom_value']);

    return $result;
}

Now you are able to select the Custom Value sorting by default for a specific category

4- Sort products

There are different places where you can sort products collection using plugins.

You can use a before plugin on \Magento\Catalog\Model\Layer::prepareProductCollection in frontend area

/**
 * @param MagentoLayer $subject
 * @param ProductCollection $collection
 * @return void
 */
public function beforePrepareProductCollection(MagentoLayer $subject,  ProductCollection $collection): void
{
    /** @var \Magento\Catalog\Block\Product\ProductList\Toolbar $toolbar */
    $toolbar = $this->toolbar;

    switch ($toolbar->getCurrentOrder()) {
        case 'custom_value':
            // implement your custom order logic here
            // as a basic example we will order products by price desc and by name asc
            $collection->setOrder('price', 'desc');
            $collection->setOrder('name', SortOrder::SORT_ASC);

            break;
    }
}

That’s it!

7 Comments

Add yours

Michael
February 25, 2020 at 2:59 AM


Really appreciate this, worked a treat! Thanks 🙏

- Michael
  February 25, 2020 at 3:02 AM
  
  
  Ps. I chose to implement the actual sorting logic in the Toolbar, e.g.
  
  “`
  namespace ….\Catalog\Block;
  
  class Toolbar
  {
  public function aroundSetCollection(
  \Magento\Catalog\Block\Product\ProductList\Toolbar $subject,
  \Closure $proceed,
  $collection
  ) {
  $currentOrder = $subject->getCurrentOrder();
  $result = $proceed($collection);
  
  if ($currentOrder) {
  if ($currentOrder == ‘price_desc’) {
  $subject->getCollection()->setOrder(‘price’, ‘desc’);
  } elseif ($currentOrder == ‘price_asc’) {
  $subject->getCollection()->setOrder(‘price’, ‘asc’);
  } elseif ($currentOrder == ‘newest’) {
  $subject->getCollection()->setOrder(‘created_at’, ‘desc’);
  } elseif ($currentOrder == ‘name_asc’) {
  $subject->getCollection()->setOrder(‘name’, ‘asc’);
  } elseif ($currentOrder == ‘name_desc’) {
  $subject->getCollection()->setOrder(‘name’, ‘desc’);
  }
  }
  
  return $result;
  }
  “`
  
  - Aurélien Jourquin
    March 2, 2020 at 11:10 AM
    
    
    You should use an after plugin instead an around plugin as a best practice. You can get function parameters with after plugins since version 2.2
    
Dipps1211
July 7, 2020 at 8:57 AM


Really Admirable…! it helps me a lot … Thank you so much 🙂

WCS
November 1, 2020 at 1:52 AM


Your solution is perfectly fine working with MySql option but not working with Elasticsearch. Any ideas? I tried to implement this on magento 2.4 with no luck.

- Aurélien Jourquin
  November 1, 2020 at 8:25 PM
  
  
  I haven’t had a chance to look for 2.4 yet and ES 🙁
  
- Aurélien Jourquin
  November 5, 2020 at 9:33 PM
  
  
  I’ve checked this point and the fact is the ‘custom_value’ sort is added with the others one (price and name in our case) to the request sent to ES.
  The idea is just to remove the non real sort before the request is sent.
  
  You can create a plugin of Magento\Elasticsearch\Model\ResourceModel\Fulltext\Collection\SearchCriteriaResolver:
  public function afterResolve(MagentoSearchCriteriaResolver $subject, SearchCriteria $result): SearchCriteria { $sortOrders = $result->getSortOrders(); unset($sortOrders['custom_value']); $result->setSortOrders($sortOrders); return $result; }

Aurelien Jourquin

Just another Magento Blog

Create custom product sorting on catalog pages

Default product sorting list

Default sorting by category

Add custom sorting

Aurélien Jourquin

7 Comments

Add yours

Leave a Reply Cancel reply