Magento get selected simple product id of configurable product on Product details page


Using my this solution you can get simple product Id of configurable product on product details page.

Here is simple function how to achieve that with no code modification.
Just one Javascript file and layout update.



How are we going to pre-select configurable attributes? The selection of the attributes is controlled by the spConfig Javascript object. If you supply it with propertydefaultValues then the script will automatically select respective items in the option drop-down lists.

Paste the following code in app/design/frontend/default/[your theme]/template/catalog/product/view/type/options/configurable.phtml in side the script

spConfig.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)
}

}

Now add onchange event to your dropdown in same page :

onchange="spConfig.getIdOfSelectedProduct()"

your dropdown's html looks like this...


<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select" onchange="spConfig.getIdOfSelectedProduct()">
        <option><?php echo $this->__('Choose an Option...') ?></option>
 </select>

Now you will get simple product id of your selected configurable product in alert box. So now you can get any details of your simple product using this product id.

Update: Click here if you want to download my module for getting all product details of selected simple product.


34 comments: Click to see all comments

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

    ReplyDelete
  2. Thanks Deelk...
    Can you please explain me in details what you want exactly?

    ReplyDelete
  3. Hi thanks for reply.. i want to send currentSimpleProductId from javascript to view.phtml page or related_tabbed.phtml page without refresh. can you pls guide me?

    ReplyDelete
  4. Hi Deelk..
    You can use ajax here to pass the currentSimpleProductId...

    ReplyDelete
  5. How do I get the selectionId?
    Best wishes, stebu

    ReplyDelete
  6. Follow the above instruction and you will get the selected simple product id in product view page in alert box.

    ReplyDelete
  7. How can i get also the product image url of the selected product option? Please help...

    ReplyDelete
  8. For that you have to use ajax here something like this.

    jQuery.ajax({
    type: "POST",
    url: "getUrl('catalog/product/getproducturl') ?>",
    data:"id="+currentSimpleProductId,
    success: function(msg)
    {
    alert(msg);
    }

    });


    public function getproducturlAction()
    {
    $id = $_REQUEST['id'];

    $full_product = Mage::getModel('catalog/product')->load($id);
    $product_image_url = $full_product->getImageUrl();
    echo $product_image_url;
    }

    ReplyDelete
  9. Hi... ur code helps me alot.. but i want to display selected simple product in the tab (i follow the above but i dint get) plz explain me more...


    Thanks in advance

    ReplyDelete
    Replies
    1. So, you want to display all the information of selected product in Tab?

      Delete
  10. Hello Hardik
    Your code helps me a lot but i just want a little more help from your side I just want to use ajax instead of alert box to get the simple products attribute's option_id and on the basis of which i have to display the select box for quantity on the products page

    ReplyDelete
    Replies
    1. replace this code with alert box.

      jQuery.ajax({
      type: "POST",
      url: "getUrl('catalog/product/getproducturl') ?>",
      data:"id="+currentSimpleProductId,
      success: function(msg)
      {
      alert(msg);
      }

      });

      /*Creat this in any controller file*/
      public function getproducturlAction()
      {

      $id = $_REQUEST['id'];
      /*$id is your selected product id. do what ever you want to do here.*/

      }

      Delete
    2. Hello Hardik
      In the above code you have mentiond the url parameter but i think its not correct as you told to create a function in any controller file which fatches the image So Please Let me know more were to create the function and how to set the url in the ajax call to that function
      Thanks

      Delete
    3. I have created this function in core ProductController.php file.
      "app\code\core\Mage\Catalog\controllers"
      Its my advice that do not make any change in your core file. create one module and make change in your own module controller.

      Delete
    4. I am just new to magento nd m trying to change the image of product on color selection so please let me know how to specify the path to the function which is placed in the PdoductController

      Delete
    5. Try this post may be its what you are looking for.

      http://inchoo.net/ecommerce/magento/create-a-color-switcher-in-magento/

      Delete
  11. Hi,

    I have two custom attributes in view.phtml.
    How can i update them basis in single product selection?

    Can anyone help me with this??

    Regards,

    Pedro

    ReplyDelete
    Replies
    1. There is only one solution for that.
      use ajax in your view.phtml and change your attributes as per selected simple product.

      Delete
    2. Hi, thank you for your reply, but i can't achieve this.
      For exemple, the code i have in view.phtml to retrive the atribute is getAttributeText('embalagem_config'); ?>

      How looks like the ajax code??

      Thank you,

      pedro

      Delete
    3. You can't achieved it directly in view.phtml.
      you have to create one action in any controller file as i described above.

      its looks like this.

      /*Creat this in any controller file*/
      public function getproducturlAction()
      {

      $productId = $_REQUEST['id'];
      /*$productId is your selected product id. do what ever you want to do here.*/
      Mage::getResourceModel('catalog/product')->getAttributeRawValue($productId, 'attribute_code', $storeId);

      }

      try this. not tested but sure about this.
      Thanks.

      Delete
    4. Thank you,

      I'm palaying with this and see what happens.

      Regards,

      Pedro

      Delete
  12. Superb.. Thank you so much....

    ReplyDelete
  13. Instead of an alert and ID how can I display the SKU on the product page once all the attributes have been selected. Thanks for the help.

    ReplyDelete
    Replies
    1. You can do this using ajax. You need to pass selected simple product ID which you are getting in alert box to any of your create function, and in that function you can get the SKU of product from product ID.

      Delete
  14. hi hardik i m using ur code, it works but when i am replacing alert box with ur ajax code after adding ur module its not working.

    i replaced----alert("Selected product is: "+currentSimpleProductId) ---- this with-----jQuery.ajax({
    type: "POST",
    url: "getBaseUrl()?>productdetails/index/optiondetails/",
    data:"id="+obj,
    success: function(msg)
    {
    alert(msg);
    //var data = JSON.parse(msg);
    //alert(data.id);
    }
    });
    please heip ?

    ReplyDelete
    Replies
    1. There is a problem in variable passing, please change following line...

      data:"id="+obj,

      to

      data:"id="+currentSimpleProductId,

      Thanks,

      Delete
  15. Hi Hardik,

    i have a configurable product with a sku of TEST (price default to £3) and then simple products linked below as TEST-Red, TEST-Blue

    Test-Red has a price set of £5, TEST-Blue = £7,

    So if a customer selects Blue i have to say in the magento that the blue is +£4 and the Red is +£2.00

    Will the above coding automatically show the customers on front end that the red is £5, and Blue £7 without me having to manually ADD the +£ values?

    thanks

    ReplyDelete
  16. Hello,
    Thank you for your script.
    I have two drop downs and i'm getting the wrong id after selecting from the second one.
    Can you help me?
    Thanks.

    ReplyDelete
  17. hello dear ,
    i have get the price of simple product from configure on selected option value of configure , but when i go to add to cart its display configure product.
    i want to add simple product which used by selected option how can i do that?

    thanks

    ReplyDelete

 

Copyright @ 2014 HK Magento Blog.