Magento 2 Get selected simple product id in configurable product

Question

We have a configurable product on the front-end with two drop-downs (size and color)

How can I get the final simple product id once the user has made their selections

We have done this in Magento 1 but don't know how to do this in Magento 2. Any suggestion will be appreciated.

Answer 1

Got solution. I am writing answer of my question. Hope it will help others.

requirejs(['jquery','underscore'], function(jQuery,_){
    jQuery(window).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('attribute-id');
            var option_selected = jQuery(v).attr('option-selected');
            //console.log(attribute_id, 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);
    }
});

For Magento 2.4.0 version, change the below code from

var attribute_id    = jQuery(v).attr('attribute-id');
var option_selected = jQuery(v).attr('option-selected');

to

var attribute_id = jQuery(v).attr('data-attribute-id');
var option_selected = jQuery(v).attr('data-option-selected');

Answer 2

I write js code for get simple product id after selection. You can add following js Code in bottom of this file. app/design/frontend/[your_theme_package]/[your_theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

<script type="text/javascript">
require(["jquery"], function(jQuery) {
  jQuery(".product-options-wrapper select[id^='attribute']").last().on('change', function() {
      setTimeout(function (){
        simpleId=jQuery("input[name=selected_configurable_option]").val();
        alert(simpleId);
      }, 500); 
  }); }); </script>

Then clear cache, it works for me. See this screenshot:

Answer 3

You can easily get child product ID from a jQuery widget instance, like this:

$('[data-role="swatch-options"]').data('mageSwatchRenderer').getProduct();

Just make sure to check if widget is initialized for an object, etc.

Answer 4

Here I update the answer for Magento 2.4.4 change from this mageSwatchRenderer to mage-SwatchRenderer

also update whole code check below

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

 requirejs(['jquery','underscore'], function(jQuery,_){
        jQuery(window).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('attribute-id');
                var option_selected = jQuery(v).attr('option-selected');
                //console.log(attribute_id, option_selected);
                if(!attribute_id || !option_selected){ return;}
                selected_options[attribute_id] = option_selected;
            });
    
            var product_id_index = jQuery('[data-role=swatch-options]').data('mage-SwatchRenderer').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);
        }
    });

Answer 5

With the help of @Siddharth Nandava, I found that using $('[data-role=swatch-options]').data('mage-SwatchRenderer').getProduct(); , we can get ID of selected Swatch variation, we can also check it in console.

$( ".product-options-wrapper .swatch-opt" ).click(function() {
    selProId = ($('[data-role=swatch-options]').data('mage-SwatchRenderer').getProduct());
    console.log(selProId);
});

Note: To check in console, Don't forget add $=jQuery; on beginning of code or hit once in console when open console, or replace every $ with jQuery.

Answer 6

I did this to get the simple product Id.

created require-config.js app/code/Vendor/Test/view/frontend/requirejs-config.js

var config = { 
config: { 
mixins: {
 'Magento_Swatches/js/swatch-renderer': {
 'Vendor_Test/js/swatch-renderer-mixin': true 
    } 
  }
 } 
};

app/code/Vendor/Test/view/frontend/web/js/swatch-renderer-mixin.js

define(['jquery','configurableVariationQty'],function($,configurableVariationQty) 

{

    'use strict';

    return function (SwatchRenderer) {

        $.widget('mage.SwatchRenderer', SwatchRenderer, {
          
            _RenderControls: function () {
                this._super();

            },
            /** @inheritdoc */
            _OnClick: function ($this, widget) {
                console.log('variants are clicking....!!!!');
                console.log("ID clicked : " +widget.getProductId());

            }
        });
        return $.mage.SwatchRenderer; // Return flow of original action.
    };
});

Answer 7

Here I update the answer for Magento 2.4.5 change from this mageSwatchRenderer to mage-SwatchRenderer and for the attribute id

from

var attribute_id    = jQuery(v).attr('attribute-id');
var option_selected = jQuery(v).attr('option-selected');

to

var attribute_id    = jQuery(v).attr('data-attribute-id');
var option_selected = jQuery(v).attr('data-option-selected');

Here is whole code for your reference

requirejs(['jquery','underscore'], function(jQuery,_){
    jQuery(window).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');
            //console.log(attribute_id, option_selected);
            if(!attribute_id || !option_selected){ return;}
            selected_options[attribute_id] = option_selected;
        });

        var product_id_index = jQuery('[data-role=swatch-options]').data('mage-SwatchRenderer').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);
    }
});

Answer 8

For making it work in 2.4.2, from @vish's answer just change:

var attribute_id    = jQuery(v).attr('attribute-id');
var option_selected = jQuery(v).attr('option-selected');

to

let attribute_id    = jQuery(v).data('attribute-id');
let option_selected = jQuery(v).attr('data-option-selected');

as in the file swatch-renderer.js you can find the following snippet:

    /**
     * Get selected product list
     *
     * @returns {Array}
     * @private
     */
    _CalcProducts: function ($skipAttributeId) {
        var $widget = this,
            selectedOptions = '.' + $widget.options.classes.attributeClass + '[data-option-selected]',
            products = [];

        // Generate intersection of products
        $widget.element.find(selectedOptions).each(function () {
            var id = $(this).data('attribute-id'),
                option = $(this).attr('data-option-selected');

So by doing the change in line with vendor code, works like a charm!!

Answer 9

requirejs(['jquery', 'underscore'], function(jQuery, _) {
jQuery(window).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');
        //console.log(attribute_id, 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 = [];
    //console.log(product_id_index);
    jQuery.each(product_id_index, function(product_id, attributes) {
        //console.log(product_id);
        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);


}
});