Magento 2: Extract Currently Selected Product ID or SKU on Product Page

Question

Assuming a system is using the default luma or blank themes, is it possible to programmatically extract the currently selected product ID or SKU from the product listing page.

In other words, I have a page state like this

Small Green Shirt Selected

Is there a way via javascript to examine what product SKU is currently selected? If not, is there a way to extract which attributes are currently selected and back solve from there?

So far I've been able to pull out the configurable product ID, as well as the values of the selected attributes via

jQuery('#product_addtocart_form').serializeArray()

I think Magento 1 had a javascript object that would let you use the above information to pull out a simple product ID. Maybe Magento 2 has the same?

Answer 1

It's not a super straightforward process, but I believe I found what you're looking for, all of this happens in the chrome console, so excuse the not-so-cookie-cutter solution.

I started out with: var jQ = require('jquery'); jQ('div.swatch-attribute').each(function() { console.log(this); });, which resulted in:

[<div class=​"swatch-attribute color" attribute-code=​"color" attribute-id=​"93" option-selected=​"56">​...​</div>​, <div class=​"swatch-attribute size" attribute-code=​"size" attribute-id=​"142" option-selected=​"168">​...​</div>​

then I checked the event listeners on one of these elements, two relevant ones were linked to div.swatch-opt. I also checked the js file that had these handlers, swatch-renderer.js, which has a method called mageSwatchRenderer and in that method a lot of the happiness takes place.

So.. jQ('div.swatch-opt').data('mageSwatchRenderer') and from there it's a short throw to finally getting jQ('div.swatch-opt').data('mageSwatchRenderer').options.jsonConfig which has all the relevant information. Specifically (jQ('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index has a list of the product Ids with the options.

jQ('div.swatch-attribute').each(function() { console.log( jQ(this).attr('option-selected') ) }); will grab the currently set options, match that against the jsonConfig.index and you're set.

• LucScu: great, but i can't find mageSwatchRenderer method and in swatch-renderer.js
• LucScu: could someone explain what means data('mageSwatchRenderer')? and where is the mageSwatchRenderer function?
• Alana Storm: Belated thanks Rian, that was the data I was looking for. @lucas -- see the sample program at magento-quickies.alanstorm.com/post/154439786675/…

Answer 2

Using Rian's answer above, that's how I got the Product Id showing in the Front-End when you choose a product colour and size.

1. Overwrite the file in your theme

   app/design/frontend/VENDOR/PACKAGE/Magento_Swatches/web/js/swatch-renderer.js

2. At the very end of the method _OnClick (prob line 687), add the content below

   $('.stock-code').text('').prepend(" ");
   var selectedAttributes = [];
   $('div.swatch-attribute').each(function() {
   selectedAttributes[$(this).attr('attribute-id')] = $(this).attr('option-selected');
   });
   $.each($widget.options.jsonConfig.index, function( productId, combination ) {
   var counter = 0;
   $.each(combination, function( attributeTypeId, optionId) {
    if(selectedAttributes[attributeTypeId] == optionId) {
    counter = counter + 1;
    }
   })
   if(counter == 2) {
    $('.stock-code').text('Product Id: ' + productId);
   }
   });
   

PS: $('.stock-code') is just a div on the Product View Page to show the product id.

I hope it helps.