1

I want to get the product id on selecting the text-swatch option. for that, I have used the code given below. I am getting the error of "Cannot read properties of undefined (reading 'options')".

Path of Phtml File:- /app/code/Vendor/Module/view/frontend/templates/product/view/type/custom.phtml

<script type="text/javascript">
requirejs(['jquery','underscore'], function(jQuery,_){
jQuery(window).on('load',function(){
    jQuery( ".product-options-wrapper div" ).click(function() {
        selpro();
    });
});
function selpro () {
    var selected_options = {};
    jQuery('div.swatch-attribute').each(function(k,v){
                var attribute_id    = jQuery(v).attr('data-attribute-id');
                var option_selected = jQuery(v).attr('data-option-selected');
                if(!attribute_id || !option_selected){ return;}
                selected_options[attribute_id] = option_selected;
            });

    var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;
    var found_ids = [];

            jQuery.each(product_id_index, function(product_id,attributes){
                var productIsSelected = function(attributes, selected_options){
                    return _.isEqual(attributes, selected_options);
                }
                if(productIsSelected(attributes, selected_options)){
                    found_ids.push(product_id);
                }
            });
    
    // console.log(found_ids);

    if (found_ids.length) {
        var selected_product_id = found_ids[0];
        jQuery('.myli').css('display','none');
        jQuery('#div'+selected_product_id).toggle();
    }
}
});
</script>
Improve this question

1 Answer 1

Reset to default
0

To get the product ID on selecting the text-swatch option in Magento 2.4.5, you can follow these steps:

  1. Create a custom JS file in your module or theme. For example, you can create the file custom.js in the path app/code/[Vendor]/[Module]/view/frontend/web/js/custom.js.

  2. In your custom.js file, you can add the following code to listen for changes on the text-swatch option:

> require(['jquery','Magento_Swatches/js/swatch-renderer'], 
>       function ($, swatchRenderer) {
>         'use strict';
>     
>         $(document).on('change', '.swatch-text', function() {
>             var productId = swatchRenderer.getProduct();
>             console.log(productId);
>         });
>     });

  1. In this code, the swatch-text class is used to target the text-swatch option. You can change this class to target a different option type if needed.

  2. When the text-swatch option is changed, the swatchRenderer.getProduct() function is called to get the currently selected product ID. You can then log this ID to the console or perform other actions as needed.

  3. Finally, you can include your custom.js file in your Magento theme or module by adding the following code to the default_head_blocks.xml file:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="[Vendor]_[Module]::js/custom.js"/>
    </head>
</page>

Replace [Vendor] and [Module] with your module or theme name. This code will load your custom.js file on the frontend.

Improve this answer
3
  • Thank you for help me
    – Sutariya Parth
    Mar 1, 2023 at 11:54
  • But in console given this error :- i.imgur.com/5vFDuFJ.png
    – Sutariya Parth
    Mar 1, 2023 at 11:55
  • I understand that you are asking me to replicate an error related to the "swatchRenderer" in a JavaScript file. Unfortunately, as I am not able to access your PC directly, I can only provide a solution based on the information you have provided. To replicate the error, I need more information about the specific error message or behavior that you are experiencing. However, if you require further assistance, you may need to create an instance of a server and set up all the necessary components. Once this is done, you can share the instance with me so that I can investigate the error on your end.
    – Dotsquares
    Mar 1, 2023 at 12:22

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.