Getting selected simple product id in configurable product on client side.

If you need to get id of selected simple product in configurable product on client side you can do it in many different ways.
Here is simple function how to achieve that with no code modification, new templates or even modules.
Just one Javascript file and layout update.
Product.Config.prototype.getIdOfSelectedProduct = function()
{
var existingProducts = new Object();
for(var i=this.settings.length-1;i>=0;i--)
{
var selected = this.settings[i].options[this.settings[i].selectedIndex];
if(selected.config)
{
for(var iproducts=0;iproducts<selected.config.products.length;iproducts++)
{
var usedAsKey = selected.config.products[iproducts]+"";
if(existingProducts[usedAsKey]==undefined)
{
existingProducts[usedAsKey]=1;
}
else
{
existingProducts[usedAsKey]=existingProducts[usedAsKey]+1;
}
}
}
}
for (var keyValue in existingProducts)
{
for ( var keyValueInner in existingProducts)
{
if(Number(existingProducts[keyValueInner])<Number(existingProducts[keyValue]))
{
delete existingProducts[keyValueInner];
}
}
}
var sizeOfExistingProducts=0;
var currentSimpleProductId = "";
for ( var keyValue in existingProducts)
{
currentSimpleProductId = keyValue;
sizeOfExistingProducts=sizeOfExistingProducts+1
}
if(sizeOfExistingProducts==1)
{
alert("Selected product is: "+currentSimpleProductId)
}
}
24 comments
this code are not working for my magento 1.9.2.2
Has anyone got this working with swatched in 1.9.3.3.
Nice. It works!
Hi,
the code works amazingly, but what if I want to show simple details on view.phtml instead of the alert box in configurable.phtml? How can I achieve that?
Hello,
I need simple product price with Id. Can anyone please help me.
Thanks
Hello, This code not work for me because I using magento 1.9.1 and my product have 2 custom option to select in configurable product. Can any one help me to get simple product from selected option of that above two. I have configurable product like ‘shoes’ in it customer will select 2 option of for color and another for size.
Thanks in advance 🙂
Put the following code to your \default\template\catalog\product\view\type\options\configurable.phtml
and add the change event to select option onchange=”spConfig.getIdOfSelectedProduct()”
hi, i don’t know, it not working on my site,
i use magento 1.9.2.2,
i doing follow your tutorial, and tutorial on site http://hkpatel201.blogspot.in/2012/09/getting-selected-simple-product-id-in.html#.UGQi0mcfvCM
however, it not working.
please, help me.
hi, it worked on my site,
i must delete code : foreach ($_renderers as $_rendererName):
$_renderer = $this->getChild(‘attr_renderers’)->getChild($_rendererName);
if (method_exists($_renderer, ‘shouldRender’) && $_renderer->shouldRender($_attribute, $_jsonConfig)):
$_renderer->setProduct($_product);
$_renderer->setAttributeObj($_attribute);
echo $_renderer->toHtml();
$_rendered = true;
break;
endif;
endforeach;
how do it to working if i don’t delete code above.
Help Me
We would love to. But how? 🙂
thanks , it worked on magento 1.9.1.0 🙂
Thnx, very helpful
to get this working with Magento 1.9 using color swatches make the changes as indicated to configurable.phtml, including adding the onChange event to the select tag, but then you will also want to open up skin/frontend/default/[your theme]/js/configurableswatches/swatches-product.js and find the function called: (about line 56)
Product.Config.prototype.handleSelectChange
and this right before the closing bracket:
this.getIdOfSelectedProduct(element);
Thanks Goran Sambolic for the snippet.
Hi really its great.. very useful to us. but i want assign simple product id to view.phtml instead of this alert box while onchange.
if i use location.href its reload. i want to assign without reload the page. can u help me?
Thanks Goran,
This article saved me a few hours of my life.
Marius.
Simply past the code in app/design/frontend/default/[your theme]/template/catalog/product/view/type/options/configurable.phtml in side the script.
then add spConfig.getIdOfSelectedProduct()
to your dropdown onchage event.
for more details
http://hkpatel201.blogspot.in/2012/09/getting-selected-simple-product-id-in.html#.UGQi0mcfvCM
Hi,
I’m not getting how to use this script. and in which file i have to put this script.
needs help.
Thanks
Awesome ! Thanks !
@Dude Guy : You can put it after that :
It would be way more helpful if you would include where this javascript should go..
Where i nee to write this java script? help)
How can we get all the simple products combination with extra price on listing page for a configure product?
For example ,
There are two configurable attribute size and color,
I need all below simple product combinations
Thank you
Ramesh
1) product id : size: S ( -1 ) Color: Blue ( +2)
2) product id : size M ( +1) Color: Red ( +2 )
3) product id : size: S ( -2 ) Color White ( +0 )
4) product id : size M ( +1) Color: White ( +0 )
@syscoel
I did it like this
Then call with
spConfig.getIdOfSelectedProduct();
Thanks for the very useful snippet!!
I am trying to update stock depending on the configurable product selected.
I need to capture the associated simple product which I am trying to do with your script.
However I don’t know how to fire your script when the last droplist has been choosen. kind of onChange=”function();”
I am trying with codes like this but with no success:
Keep on the great work you do posting this helpful code snippets!