In Magento2, referring to the products’ form attributes and their options, get ‘render dynamically,’ means that as an admin you can add as many attributes and as many options to that product attribute as you want. This is handled by using the strategy of data and meta-data. Now the problem is if you create a custom attribute with 100 options then it will be hard for the user to select any particular one if it’s not sorted alphabetically. In this blog, we will explain how can you sort product attributes options alphabetically to make it user-friendly.

 


We are assuming that you already have an idea to create a custom module in Magento2.  In Case you don’t, then no worries you can follow the below-mentioned steps-

  • Click here to understand the basic Magento2 flow.
  • Click here to understand the code structure of Magento2 and
  • Click here to know how to create a basic hello world module in Magento2.

Here we are going to use a plugin for extending the functionality of meta-data. But if you have no idea how to create a plugin you may check it on Magento2 dev-docs to get a brief idea about Magento2 plugins.

We assume that you already have a basic idea about Magento2 coding.

 

Write the below code in your Vendor\Module\etc\adminhtml\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\Ui\DataProvider\Product\Form\Modifier\Eav">

 <plugin name="after_ui_eav_product_form_modifier"

   type="Vendor\Module\Plugin\Ui\DataProvider\Product\Form\Modifier\Eav"

   sortOrder="1" disabled="false"/>

</type>

</config>  

 

Now create a plugin file with the namespace  

 

Vendor\Module\Plugin\Ui\DataProvider\Product\Form\Modifier\Eav, and add the below code.

 

<?php 

namespace Vendor\Module\Plugin\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Eav;

/**

 * Class Eav 

 */

class Eav

{    

   

   const ATTRIBUTE_TO_SORT = ['xyz_attr1' ,'xyz_attr2'];

    /**

     * Initial meta setup

     *

     * @param Eav $subject

     * @param array $result 

     * @return array 

     */

    public function afterSetupAttributeMeta(Eav $subject,  $result){ 

        if (isset($result['arguments']['data']['config']['code'])) {

            $code = $result['arguments']['data']['config']['code'];

            if (in_array($code, self::ATTRIBUTE_TO_SORT)){                

                if (isset($result['arguments']['data']['config']['options'])) {

                    $options = &$result['arguments']['data']['config']['options'];

                    usort($options, function($a, $b) {

                        return $a['label'] > $b['label'];

                    }); 

                } 

            }

        } 

        return $result;

    }

}

 

In this, we are using “usort” for the multi-select attribute options, so this code will sort only the multidimensional array, it will sort the array options by labels.

Tags:
ecommerce magento magento 2 magento 2 extension