Using Javascript to Get the Magento Configurable Product Child ID

It’s not every day that you need to know what a configurable product’s resultant child product ID is on the front end. But, if that’s you and you’re looking for a simple solution that doesn’t override core Magento javascript, you came to the right place.

Fortunately for us, the javascript object spConfig has everything we need to determine the child product ID based on what options have been selected on the product detail page. Below you’ll find the code. Let’s walk through it.

function getSimpleProductId() {
    var productCandidates = [];
    jQuery.each(spConfig.settings, function (selectIndex, select) {
        var attributeId = select.id.replace('attribute', '');
        var selectedValue = select.options[select.selectedIndex].value;

        jQuery.each(spConfig.config.attributes[attributeId].options, function(optionIndex, option) {
            if (option.id == selectedValue) {
                var optionProducts = option.products;

                if (productCandidates.length == 0) {
                    productCandidates = optionProducts;
                } else {
                    var productIntersection = [];
                    jQuery.each(optionProducts, function (productIndex, productId) {
                        if (productCandidates.indexOf(productId) > -1) {
                            productIntersection.push(productId);
                        }
                    });
                    productCandidates = productIntersection;
                }
            }
        });
    });
    return (productCandidates.length == 1) ? productCandidates[0] : null;
}

The spConfig.settings property contains an array of the configurable option select boxes. We’ll loop through these to determine the attributeId and selectedValue for each select box.

Now that we know the attributeId and selectedValue of the selected option, we can use the spConfig.config.attributes property to obtain an array of child product ID candidates and store them to the optionProducts variable.

On the first iteration of the loop, the productCandidates array is empty and can be set to optionProducts. If this were the only select box on the page, productCandidates should now contain only one value: the child product ID we’re looking for. If there are numerous select boxes on the page, each loop will set productCandidates to the array intersection of productCandidates and optionProducts.

After looping through all of the select boxes there should only be one value in the productCandidates array. However, we want to avoid assumptions if at all possible, so the final line ensures that we only return a product ID if it’s the only product ID in the array.

Lastly, we need a way to trigger the function. This can be done quite easily by adding a change event listener to the configurable option select boxes. Each time the user selects an option or changes their selections, the getSimpleProductId function will return the resultant child product ID if all options have been selected and false otherwise.

jQuery(document).ready(function() {
    jQuery(".product-options select[id^='attribute']").on('change', function() {
        // Your code here
        // alert(getSimpleProductId());
    });
});