Magento 2 Configurable Product – Get Selected Simple Product ID

magento-2.1magento2

We have a configurable product on the front-end with two drop-downs (size and color)

How can I get the final simple product id once the user has made their selections

We have done this in Magento 1 but don't know how to do this in Magento 2.
Any suggestion will be appreciated.

Best Answer

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');

Related Solutions

Magento – Get Custom Option Values of a product magento 2

Try this:

$_product = $block->getProduct();
foreach ($_product->getOptions() as $o) {
    if ($o->getTitle() != 'Color') { // or another title of option
        continue;
    }
    foreach ($o->getValues() as $value) {
        print_r($value->getData());
    }
}

You should search for your option by the title because the option ID is unknown.

Magento – Magento2 Event Observer Redirect Simple Product to Configurable Product

Here is my solution. It will redirect to the simple product's first parent. It will also select the configuration options for the simple product on the configuration page.

<?php
namespace {DEVELOPER}\{MODULENAME}\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;

class Predispatch implements ObserverInterface
{

    protected $_redirect;
    protected $_productTypeConfigurable;
    protected $_productRepository;
    protected $_storeManager;

    public function __construct(
        \Magento\Framework\App\Response\Http $redirect,
        \Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable $productTypeConfigurable,
        \Magento\Catalog\Model\ProductRepository $productRepository,
        \Magento\Store\Model\StoreManagerInterface $storeManager
    )
    {
        $this->_redirect = $redirect;
        $this->_productTypeConfigurable = $productTypeConfigurable;
        $this->_productRepository = $productRepository;
        $this->_storeManager = $storeManager;
    }

    public function execute(Observer $observer)
    {
        /** @var \Magento\Framework\App\RequestInterface $request */
        $request = $observer->getEvent()
            ->getRequest();
        $simpleProductId = $request->getParam('id');
        if (!$simpleProductId) {
            return;
        }
        $simpleProduct = $this->_productRepository->getById($simpleProductId, false, $this->_storeManager->getStore()->getId());
        if (!$simpleProduct || $simpleProduct->getTypeId() != \Magento\Catalog\Model\Product\Type::TYPE_SIMPLE) {
            return;
        }

        $configProductId = $this->_productTypeConfigurable->getParentIdsByChild($simpleProductId);
        if (isset($configProductId[0])) {
            $configProduct = $this->_productRepository->getById($configProductId[0], false, $this->_storeManager->getStore()->getId());
            $configType = $configProduct->getTypeInstance();
            $attributes = $configType->getConfigurableAttributesAsArray($configProduct);
            $options = [];
            foreach ($attributes as $attribute) {
                $id = $attribute['attribute_id'];
                $value = $simpleProduct->getData($attribute['attribute_code']);
                $options[$id] = $value;
            }
            $options = http_build_query($options);
            $hash = $options ? '#' . $options : '';
            $configProductUrl = $configProduct->getUrlModel()
                ->getUrl($configProduct) . $hash;
            $this->_redirect->setRedirect($configProductUrl, 301);
        }
    }
}

Things I am still going to add:

system setting to enable or disable the redirect
Logic to detect simple product's visibility setting. Only redirect if the simple product is set up not to be visible.

Best Answer

Related Solutions

Magento – Get Custom Option Values of a product magento 2

Magento – Magento2 Event Observer Redirect Simple Product to Configurable Product

Related Topic