While buying a pair of shoes, you have to select several options before making a purchase like a shoe size, color or some other options too. It’s not a typical shoppable thing where you just add the product to cart and make payment because of its configurable product. Over time, these configurable products are becoming popular because it allows customers to select the variant they love to buy.
Magento allows the store owner to create and sell such type of products using backend options. But creating such configurable product required setting up several options such as size, color, model, make, etc. Because Magento treats this configurable product as a set of simple products. Each variation of the product has its own SKU and inventory system.
On the frontend, whenever a user picks a convenient option from the configurable product, product options and price will be changed accordingly but not product SKU in default Magento store environment. To get the child product SKU from the configurable product, here is another blog to switch product SKU according to the selection of child products in Magento 2.
To do the same, first we need to create “di.xml” file in following path using below code.
app\code\Vendor\Extension\etc\di.xml
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable">
<plugin name="Vendor_Extension_Plugin_ConfigurableProduct_Block_Product_View_Type_Configurable" sortOrder="10" type="Vendor\Extension\Plugin\ConfigurableProduct\Block\Product\View\Type\Configurable"/>
</type>
<type name="Magento\Swatches\Block\Product\Renderer\Configurable">
<plugin name="Vendor_Extension_ConfigurableSkuSwitch_Plugin_Magento_Swatches_Block_Product_Renderer_Configurable" sortOrder="10" type="Vendor\Extension\Plugin\Swatches\Block\Product\Renderer\Configurable"/>
</type>
</config>
Now, we have to create “Configurable.php” file at following path using below code.
app\code\Vendor\Extension\Plugin\ConfigurableProduct\Block\Product\View\Type\Configurable.php
<?php
namespace Vendor\Extension\Plugin\ConfigurableProduct\Block\Product\View\Type;
class Configurable
{
public function afterGetJsonConfig(
\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject, $result
) {
$jsonResult = json_decode($result, true);
$jsonResult['skus'] = [];
foreach ($subject->getAllowProducts() as $simpleProduct) {
$jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
}
$result = json_encode($jsonResult);
return $result;
}
}
Now, we have to create Configurable.php file at following path using below code.
app\code\Vendor\Extension\Plugin\Swatches\Block\Product\Renderer\Configurable.php
<?php
namespace Vendor\Extension\Plugin\Swatches\Block\Product\Renderer;
class Configurable
{
public function afterGetJsonConfig(
\Magento\Swatches\Block\Product\Renderer\Configurable $subject, $result
) {
$jsonResult = json_decode($result, true);
$jsonResult['skus'] = [];
foreach ($subject->getAllowProducts() as $simpleProduct) {
$jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
}
$result = json_encode($jsonResult);
return $result;
}
}
In this code, we have defined “skuswitch.js” and “swatch-skuswitch.js” which we are required and we create in later step.
var config = {
config: {
mixins: {
'Magento_ConfigurableProduct/js/configurable': {
'Vendor_Extension/js/model/skuswitch': true
},
'Magento_Swatches/js/swatch-renderer': {
'Vendor_Extension/js/model/swatch-skuswitch': true
}
}
}
};
In this last step, we have to “skuswitch.js” using below code at this path.
app\code\Vendor\Extension\view\frontend\web\js\model\skuswitch.js
define([
'jquery',
'mage/utils/wrapper'
], function ($, wrapper) {
'use strict';
return function(targetModule){
var reloadPrice = targetModule.prototype._reloadPrice;
var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
var result = original();
var simpleSku = this.options.spConfig.skus[this.simpleProduct];
if(simpleSku != '') {
$('div.product-info-main .sku .value').html(simpleSku);
}
return result;
});
targetModule.prototype._reloadPrice = reloadPriceWrapper;
return targetModule;
};
});
Now, we need to create remaining “swatch-skuswitch.js” file at below location.
app\code\Vendor\Extension\view\frontend\web\js\model\swatch-skuswitch.js
define([
'jquery',
'mage/utils/wrapper'
], function ($, wrapper) {
'use strict';
return function(targetModule){
var updatePrice = targetModule.prototype._UpdatePrice;
targetModule.prototype.configurableSku = $('div.product-info-main .sku .value').html();
var updatePriceWrapper = wrapper.wrap(updatePrice, function(original){
var allSelected = true;
for(var i = 0; i<this.options.jsonConfig.attributes.length;i++){
if (!$('div.product-info-main .product-options-wrapper .swatch-attribute.' + this.options.jsonConfig.attributes[i].code).attr('option-selected')){
allSelected = false;
}
}
var simpleSku = this.configurableSku;
if (allSelected){
var products = this._CalcProducts();
simpleSku = this.options.jsonConfig.skus[products.slice().shift()];
}
$('div.product-info-main .sku .value').html(simpleSku);
return original();
});
targetModule.prototype._UpdatePrice = updatePriceWrapper;
return targetModule;
};
});
And that’s it! Now product SKU will be changed dynamically based on the customer selection. Also, You can use this code according to your need for changing Product SKU.
If you need any help regarding this code, simply leave a comment below and don’t forget to smash that stars if you found this blog helpful.
Happy Coding!