1

I need to change name, price, SKU and more when options are clicked.
So I need the product ID of the selected option in the product view page.
I have a Custom phtml file to write my own alteration in the product view page.
How to get productId in this file on clicking the options?

1

You can get the associated Simple Product ID and Quantity using below code.

Add the below code Javascript and PHP at the beginning of this file

app/design/frontend/Theme_Namespace/Theme_Name/Magento_Catalog/ templates/product/view/Your_phtmlfile

<script type="text/javascript">
requirejs(['jquery','underscore'], function(jQuery,_){
jQuery(window).load(function(){
    jQuery( ".product-options-wrapper div" ).click(function() {
        selpro();
    });
});
function selpro () {
    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');
        //console.log(attribute_id, 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 = [];
    //console.log(product_id_index);
    jQuery.each(product_id_index, function(product_id,attributes){
        //console.log(product_id);
        var productIsSelected = function(attributes, selected_options){
            return _.isEqual(attributes, selected_options);
        }
        if(productIsSelected(attributes, selected_options)){
            found_ids.push(product_id);
        } 
    });

    //console.log(found_ids);

    if (found_ids.length) {
        var selected_product_id = found_ids[0];
        jQuery('.myli').css('display','none');
        jQuery('#div'+selected_product_id).toggle();
    }
}
});
</script> 

And PHP code.

<?php 
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');//get current product
    $productTypeInstance = $product->getTypeInstance();
    if ($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
        $usedProducts = $productTypeInstance->getUsedProducts($product);
?>
        <ul>
            <?php foreach ($usedProducts  as $child) { ?>
                <li class="myli" id="div<?php echo $child->getId()?>" style="display:none;list-style:none">
                    <?php 
                    $productStockObj = $objectManager->get('Magento\CatalogInventory\Api\StockRegistryInterface')->getStockItem($child->getId());
                    echo "We have ".round($productStockObj->getData('qty'))." items in stock!";
                    ?>
                </li>
            <?php } ?>
        </ul> 
<?php 
    } else {
        $productStockObj = $objectManager->get('Magento\CatalogInventory\Api\StockRegistryInterface')->getStockItem($product->getId());
        echo "We have ".round($productStockObj->getData('qty'))." items in stock!";
    }
?>

I hope it helps!

  • Thanks a lot. You saved my day – Ramesh KR Mar 13 at 13:11
  • You are welcome. happy to help :) – Chirag Patel Mar 13 at 13:11

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.