1

enter image description here

How to Change the Configurable products name dynamically when i click configurable swatches, currently price change when click swatches .I need to change name too. please suggest better way! Thank You,

5

1 Answer 1

0

In Magento 2.4, you can change the product name dynamically by clicking on the configurable product swatch using JavaScript and jQuery.

Here are the steps to do it:

  • First, create a JavaScript file in your Magento theme, for example, configurable-swatch.js.

  • In the configurable-swatch.js file, add the following code to listen to the swatch click event:

    require(['jquery'], function($) {

     $(document).on('click', '.swatch-option', function() {
    
         var selectedOptions = $('.swatch-option.selected');
         var productName = $('.product-info-main .product-name').text();
         var selectedAttributes = [];
    
         selectedOptions.each(function() {
             var attributeId = $(this).closest('.swatch-attribute').attr('attribute-id');
             var optionId = $(this).attr('option-id');
             var attributeCode = $(this).closest('.swatch-attribute').attr('attribute-code');
             selectedAttributes[attributeCode] = optionId;
         });
    
         var newProductName = productName.replace(/\[[^\]]+\]/g, '').trim();
         for (var attributeCode in selectedAttributes) {
             var attributeValue = selectedAttributes[attributeCode];
             newProductName += ' [' + attributeValue + ']';
         }
    
         $('.product-info-main .product-name').text(newProductName);
     });
    

    });

Add the following link to your Magento theme's Catalog_product_view.xml layout file to include the configurable-swatch.js file:

<referenceContainer name="after.body.start">
    <block class="Magento\Framework\View\Element\Text" name="configurable-swatch.js">
        <arguments>
            <argument name="text" xsi:type="string">
                <![CDATA[
                    <script type="text/javascript" src="js/configurable-swatch.js"></script>
                ]]>
            </argument>
        </arguments>
    </block>
</referenceContainer>

Using these steps, the product name will change dynamically when you click on the configurable product swatch in Magento 2.4.

Please note that this code may need to be modified based on your specific theme and requirements.

3
  • Do your module also work for custom attributes like Manufacturer or SKU? Or is it just the name? How to extend this for other attributes? :)
    – ecommerce
    Mar 21, 2023 at 8:07
  • For sku and other filed you need to do customisation on Magento_Swatches/js/swatch-renderer.js file. let me know if you need demo code Mar 21, 2023 at 12:32
  • Actually i guess mixins are just not loading at the moment. I'll create a new question for this topic. :)
    – ecommerce
    Mar 21, 2023 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.