2

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

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

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!

  • 1
    thank u so much you saved my time – divya sekar Jan 4 at 6:34
  • Welcome! Happy Coding! – Sukumar Gorai Jan 4 at 6:37
  • can you please help me, how to get a selected option id (or) attribute id in product detail page – divya sekar Jan 7 at 7:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.