How to create custom filter

[viniaraujo493a]

I have a doubt, in my filters I need that, when clicking on a color, for example BLUE, it opens the variations of BLUE below (Navy Blue, Dark Blue..) I thought about making 2 attributes, one as master color, and another as a secondary color, however, I can't figure out how to display this. So that when you click on the color, it displays the secondary colors below. How can I do this? Is there a search engine that can help me, or something similar?

[theMageComp]

Hello @viniaraujo493a 

1. Master Color Attribute:

   • Create a master color attribute (e.g., master_color).

2. Secondary Color Attribute:

   • Create a secondary color attribute (e.g., secondary_color).

Step 2: Create Configurable Products

1. Configure Configurable Products:
   • Create configurable products for each master color.
   • Associate simple products with variations (e.g., Navy Blue, Dark Blue) to the configurable products.

Step 3: Modify Product Templates

1. Override Attribute PHTML Files:

   • In your custom theme, override the template files responsible for rendering product attributes.
   • For example, you might need to override Magento_ConfigurableProduct/templates/product/attribute/option-renderer/list.phtml.

2. Add JavaScript Logic:

   • Add JavaScript logic to capture the selection of the master color and dynamically update the options for the secondary color.

// Sample JavaScript (replace with actual implementation)
require([
    'jquery',
    'underscore',
    'Magento_Swatches/js/swatch-renderer'
], function ($, _, swatchRenderer) {
    // Listen for changes in the master color dropdown
    $('.swatch-attribute.master_color').on('click', '.swatch-option', function () {
        var selectedMasterColor = $(this).attr('option-id');

        // Use AJAX to fetch and update the secondary color swatches
        // Example: You might have an endpoint that returns secondary colors based on the master color
        $.ajax({
            url: '/getSecondaryColors/' + selectedMasterColor,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // Update the secondary color swatches
                swatchRenderer.clear();
                swatchRenderer.updateBaseImage(data);
                swatchRenderer.updateSelect(data);
            },
            error: function () {
                console.error('Failed to fetch secondary colors.');
            }
        });
    });
});

1. Create a Controller/Endpoint:

   • Implement a controller or endpoint that fetches secondary color options based on the selected master color.

2. Return JSON Response:

   • Ensure that the server-side logic returns a JSON response containing the necessary information for updating the secondary color options.