Hello, Magento devs,
For product-level customization in Magento 2, the product ID acts as a unique identifier for the products. We showed you the complete method to get the current product ID in Magento 2 earlier.
But what if you want to get simple product ID from configurable product in Magento 2?
In Magento 2, a configurable product may contain multiple child products with different configurations. Recently, I was working on a custom development, where I wanted to get simple product IDs from configurable products in Magento 2.
In this post, you’ll learn to get the child product ID of a configurable product by swatch options using jQuery in Magento 2.
jQuery to Get Child Product ID of Configurable Product in Magento 2
You can use jQuery to get a simple product ID from configuration products in Magento 2. It is the same method used by the default Magento 2 to get the page ID of the child product for configurable products.
Here’s the jQuery:
$( ".product-options-wrapper .swatch-opt" ).click(function() {
selProId = ($('[data-role=swatch-options]').data('mage-SwatchRenderer').getProduct());
console.log(selProId);
});
You can use this jQuery anywhere to get the simple product ID from configurable products.
It is the same method used by the default Magento 2 to get the page ID of the child product for configurable products. Once the customer selects the required options, the product ID of the simple product is returned.
Easy, isn’t it?
Help others find this solution by sharing this post on social media.
Thank You!
