Magento – How to get simple product id of configurable product on Product details page

magento2product-view

In product details page when user choose like color and size it returns simple product id of that

Best Answer

I have select box at attribute of configurable product. This is what i have done to get simple product id. Put following code in your configurable product phtml file.

 require(["jquery"], function(jQuery) {
      jQuery(".product-options-wrapper select[id^='attribute']").last().on('change', function() {
          setTimeout(function (){
            simpleId=jQuery("input[name=selected_configurable_option]").val();
            alert(simpleId);
          }, 500); 
      });
}); // Required

If you have configurable swatch than it will required minor change in above code.Hope it will help someone.

Thank you

Related Solutions

Magento 2 Configurable Product – Get Selected Simple Product ID

Got solution. I am writing answer of my question. Hope it will help others.



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 = [];
        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)){
                found_ids.push(product_id);
            } 
        });
        console.log(found_ids);
    }
});

For Magento 2.4.0 version, change the below code from

var attribute_id    = jQuery(v).attr('attribute-id');
var option_selected = jQuery(v).attr('option-selected');

var attribute_id = jQuery(v).attr('data-attribute-id');
var option_selected = jQuery(v).attr('data-option-selected');

Magento – Magento 2 get Simple product url from configurable

Create a custom module which has helper class and it has a method which gives a Configurable product URl.

Helper class

<?php

namespace StackExchange\Magento\Helper;

use Magento\Catalog\Model\Product\Visibility;
class Product  extends \Magento\Framework\App\Helper\AbstractHelper
{

    /**
     * @var \Magento\ConfigurableProduct\Model\Product\Type\Configurable
     */
    private $configurable;

    /**
     * @var \Magento\Catalog\Api\ProductRepositoryInterface
     */
    private $productRepository;

    public function __construct(
        \Magento\Framework\App\Helper\Context $context,
        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
        \Magento\ConfigurableProduct\Model\Product\Type\Configurable $configurable    
    ) {
        parent::__construct($context);
        $this->productRepository = $productRepository;
        $this->configurable = $configurable;
    }
   public function getConfigurableProductUrl($product)
   {

      if($product->getVisibility() != Visibility::VISIBILITY_NOT_VISIBLE){
          return false;
      }

      $configProductIds =  $this->configurable->getParentIdsByChild($product->getId());

      if(is_array($configProductIds) && empty($configProductIds)){
          return '#';
      }

      if(is_array($configProductIds) && !empty($configProductIds)){
          $configProductId = $configProductIds[0];
      }
      if(is_int($configProductIds)){
          $configProductId = $configProductIds;
      }

      try{
           $configurablProduct =$this->productRepository
                   ->getById($configProductId, false, $product->getStoreId());
      } catch (\Magento\Framework\Exception\NoSuchEntityException $ex) {
          return false;
      }

     return $configurablProduct->getUrlModel()->getUrl($configurablProduct);
   }
}

Call this helper to your phtml files using

$configHelper = $this->helper('StackExchange\Magento\Helper\Product');

PHTML code looks like:

<?php
$configHelper = $this->helper('StackExchange\Magento\Helper\Product');
?>
<?php if ($_products = $block->getProducts()): ?>
    <?php foreach ($_products as $_product): ?>
        <p><?= __('Hello!') ?></p>
        <?php $isConigProduct = $configHelper->getConfigurableProductUrl($product); ?>
        <p>
            <?php if($isConigProduct): ?>
            <?= __(
                'You have subscribed for product: <strong class="product name"><a href="%1">%2</a></strong>',
                $isConigProduct,
                $block->escapeHtml($_product->getName())
            )
            ?>            
            <?php else: ?>
            <?= __(
                'You have subscribed for product: <strong class="product name"><a href="%1">%2</a></strong>',
                $_product->getProductUrl(),
                $block->escapeHtml($_product->getName())
            )
            ?>
            <?php  endif; ?>
        </p>
        <p>
            <a href="<?= $block->getUserUnsubscribeUrl() ?>">
                <?= __('Click here to stop alerts for this product.') ?>
            </a>
        </p>
    <?php endforeach ?>
<?php endif ?>

Code is not tested given base on Idea.