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

By: Goran Sambolic, Published: Feb 01, 2012
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)
     }
}
Published in:
Leave a comment

You made it all the way down here so you must have enjoyed this post! You may also like:

How to improve usability for Magento 2 add to cart process Filip Svetlicic
Filip Svetlicic, | 2

How to improve usability for Magento 2 add to cart process

Sorry, we can’t ship there Sasa Brankovic
Sasa Brankovic, | 12

Sorry, we can’t ship there

How to make configurable options autoselected on Product view page Tomas Novoselic
, | 30

How to make configurable options autoselected on Product view page

24 comments

  4. 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?

    Reply

  6. 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 🙂

    Reply

    1. Put the following code to your \default\template\catalog\product\view\type\options\configurable.phtml

      Product.Config.prototype.getIdOfSelectedProduct = function(val)
{
		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(currentSimpleProductId);

		}

}

      and add the change event to select option onchange=”spConfig.getIdOfSelectedProduct()”

    1. 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.

  11. 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.

    Reply

  12. 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?

    Reply

  15. Hi,
    I’m not getting how to use this script. and in which file i have to put this script.
    needs help.

    Thanks

    Reply

  16. Awesome ! Thanks !

    @Dude Guy : You can put it after that :

    var spConfig = new Product.Config(<?php echo $json = $this->getJsonConfig() ?>);
    Reply

  19. 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 )

    Reply

  20. @syscoel

    I did it like this

    <script type="text/javascript">
var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
spConfig.getIdOfSelectedProduct = function() {
.............

    Then call with

    spConfig.getIdOfSelectedProduct();

    Thanks for the very useful snippet!!

    Reply

  21. 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:

    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
        Event.observe($('attribute123'),'change',Product.Config.prototype.getIdOfSelectedProduct() );
</script>

    Keep on the great work you do posting this helpful code snippets!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.