3

As I asked in the question I want to get the SKU of a simple product selected by the option in configurable product details page.

How can I capture the SKU?

Tried in this way, but not possible to capture the selected options SKU

$product_id =  $block->getProduct()->getId();//Configurable product ID

$configProduct = $objectManager->create('Magento\Catalog\Model\Product')->load($product_id);

$_children = $configProduct->getTypeInstance()->getUsedProducts($configProduct);

foreach ($_children as $child){
    echo "Here are your child Product Ids ".$child->getID()."-:-".$child->getSku()."</br>";
}
echo "count: ".count($_children);

enter image description here

7
  • What is the error you are getting? Aug 31, 2018 at 7:38
  • @SukumarGorai i am not getting any error, i cannot capture the selected option sku.
    – Mujahidh
    Aug 31, 2018 at 8:43
  • Where did you write this code? I think you want the selected option's sku when customer select any options right? Aug 31, 2018 at 9:00
  • @SukumarGorai, yes exactly. i wrote this on product details page related phtml file
    – Mujahidh
    Aug 31, 2018 at 9:02
  • You need to manage it through ajax call when option is selected. Are you using swatch or dropdown? Aug 31, 2018 at 9:10

2 Answers 2

2

This the script you need to add on your phtml file:

<script type="text/javascript">
    require(['jquery','underscore'], function(jQuery,_){
        jQuery(window).load(function(){
            jQuery( ".product-options-wrapper div" ).click(function() {
                selectedProduct();
            });
        });

        function selectedProduct() {
            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');
                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)){
                    console.log(product_id);
                    jQuery.ajax({
                        url: "<?php echo $block->getUrl('getsku'); ?>",
                        type: "POST",
                        data: {id:product_id},
                        showLoader: false,
                        cache: false,
                        success: function(response){
                            console.log(response);
                        }
                    });
                } 
            });
        }
    });
</script>

Create a module with name Vendor_Module.

Also you need to create a routes.xml for frontend like below:

app/code/Vendor/Module/etc/frontend/routes.xml

and add the following code to it.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route frontName="getsku" id="getsku">
            <module name="Vendor_Module"/>
        </route>
    </router>
</config>

Now create one controller to below path:

app/code/Vendor/Module/Controller/Index/Index.php

with below content:

<?php
namespace Vendor\Module\Controller\Index;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

class Index extends Action
{
    protected $_productRepository;

    public function __construct(
        Context $context,
        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
    )
    {
        $this->_productRepository = $productRepository;
        parent::__construct($context);
    }

    public function execute()
    {
        $id = $this->getRequest()->getParam('id');
        echo $this->_productRepository->getById($id)->getSku();        
    }

}

You will get the sku in your ajax response. You can now do whatever you want with the sku.

Hope this helps!

4
  • 1
    thank u so much you saved my time Jan 4, 2020 at 6:34
  • Welcome! Happy Coding! Jan 4, 2020 at 6:37
  • can you please help me, how to get a selected option id (or) attribute id in product detail page Jan 7, 2020 at 7:53
  • I am getting error: "Uncaught TypeError: Cannot read property 'options' of undefined ". on line "var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;" Apr 26, 2021 at 10:43
0

Out of the box, when choosing options, the images and the price will change. **But not SKU.**More information about which elements on the page change when options are selected can be found here: Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getJsonConfig().

In order to get the SKU of the selected product on frontend, you can create a Plugin (Interceptor) for Magento\ConfigurableProduct\Block\Product\View\Type\Configurable::getJsonConfig() where you need to add missing SKU for each simple product.

Switching SKU when selecting an option can be implemented in vendor/magento/module-swatches/view/base/web/js/swatch-renderer.js and vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js depending on the type of attribute (Visual Swatch, Text Swatch, Dropdown).


I made free VCT Change SKU Dynamically module that solve this problem.

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.