Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

Magento 2, Magento Development, Customization, Extension Development and Integration, Optimization, SEO and Responsive Design

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.

configurable product


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.


Please support us, Like us on Facebook.

  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
  18. thanks.... again another example what a ficking system agento is....... i couldnt understand why it is such a big problem to set the productid of the configuration article directly in the select box value...

    ReplyDelete
  19. how can i done with magento 2...???

    ReplyDelete
  20. hi Hardik,

    I have followed above your mentioned instruction(in my selected theme only)but i could not get even alert message.

    ReplyDelete
    Replies
    1. I need to check your code.
      Can you please share your site url here?

      Thanks,

      Delete
  21. Hi Hardik,

    I went through all your Q&As for this blog. I must admit it, I am impressed with your knowledge. I also have below concern---

    I have view.phtml which calls for configurable product. I have made one configurable product which has attribute as "quilt size".

    URL for that product is http://savepie.com/quilt/test-name.html

    I did below things:

    1. I added onchange event alongwith ajax code in configurable.php:

    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",
    data:"id="+currentSimpleProductId,
    success: function(msg)
    {
    alert(msg);
    }
    });

    }

    }

    2. I already app/code/local/Mage/Catalog. I made etc/config.xml with below details:





    1.0.0





    standard

    Mage_Catalog
    catalog






    3. I made controllers/IndexController.php with below:

    class Mage_Catalog_IndexController extends Mage_Core_Controller_Front_Action
    {
    public function getproducurlAction() {
    echo 'test index';
    $productId = $_REQUEST['id'];

    Mage::getResourceModel('catalog/product')->getAttributeRawValue($productId, 'attribute_code', $storeId);
    }
    }

    4. When I change quilt size from dropdown, no alert is seen neither quantity changes in dropdown!!!

    Please advise.

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hello Stuti,

      I just checked your link. It seems your are passing wrong url in ajax call.

      http://savepie.com/quilt/getUrl('catalog/product/getproducturl')%20?%3E

      This is the url you are using in your ajax call. And it is wrong.

      Thanks,

      Delete
  22. Hello hardik,

    Your code is working fine.

    But I need Simple product price too with Id. Can you please help me.

    Thanks

    ReplyDelete
    Replies
    1. You can follow this post.

      http://hkpatel201.blogspot.in/2014/03/get-simple-product-details-of.html

      Delete
  23. Hello , I want to select an option on the configurable product , the page redirects to the simple associated product. How can I do this? Example : http://www.qdstores.co.uk/products/homeware/soft-furnishings/blankets-throws/120x150-pom-pom-throw-grey.html

    Thank you.

    ReplyDelete
    Replies
    1. Hello,
      You can use this extension.

      And using that extension you can get selected id of simple product. Than get the link of simple product and redirect to that page.

      Delete
    2. I sent the files to the folders and added the code, but is not redirecting to choose an option on the configurable product . My code: http://layoutech.com.br/configurable.txt

      What is wrong?
      Thx.

      Delete
    3. Hello I need to check code for this directory.
      productdetails/index/optiondetails/

      Also can you please share your product page link?

      Thanks

      Delete
    4. http://layoutech.com.br/pecas-graficas/yep

      I replaced the alert message "alert("Selected product is: "+currentSimpleProductId)" with supplied code here http://hkpatel201.blogspot.com.br/2014/03/get-simple-product-details-of.html and added jquery at the top of the page file
      configurable.phtml (< scr ipt src="https://code.jquery.com/jquery-1.12.0.min.js">) but now my drop down boxes are empty.

      I am using Magento 1.9.1.1.

      I reached up your files to the folder public_html/layoutech.com.br/app/local/HK/Productdetails and public_html/layoutech.com.br/etc/modules.

      There is something wrong?
      Help me :(! Thx.

      Delete
    5. I can not see any option on your link here
      http://layoutech.com.br/pecas-graficas/yep

      Please add me on skype at hardikpatel201 so we can communicate quickly or email me via contact page of this blog.

      Thanks,

      Delete
    6. Hi could you help with my problem, i want also to redirect the simple product URL when they select in the configurable option thanks

      Delete
  24. Hello , I want to select an option on the configurable product , the page redirects to the simple associated product. How can I do this? Example : http://diybuilders.com.au/classic-travertine-bullnose-pavers.html , i want when option already selected it will redirect to simple product URL

    ReplyDelete
    Replies
    1. Hi Marco.
      Hardik helped me :) and i can help you now...

      What is your email?
      I can send you the instructions and details of how to implement the code.

      Delete
  25. I suggest an extension- Configurable Product Table Ordering that would bring a better display for configurable product with associated simple products, check it out at: https://goo.gl/kOkhLY

    ReplyDelete
  26. Hello Hardik,

    I tried your above code but it's giving me below error.

    Error : ReferenceError: spConfig is not defined

    I have added var spConfig = getJsonConfig() ?>; as a solution.

    But it's not working for me in Magento 2.1.2

    Can you please help me for resolve this issue?

    ReplyDelete
  27. Hello Hardik,

    I tried your above code but it's giving me below error.

    Error : ReferenceError: spConfig is not defined

    I have added var spConfig = getJsonConfig() ?>; as a solution.

    But it's not working for me in Magento 2.1.2

    Can you please help me for resolve this issue?

    ReplyDelete
  28. really a great post, but can you please explain what if we want alert on swatch click not with dropdown.

    ReplyDelete
  29. Hello Hardik,

    I have put your given code in my file but in console i'm getting this error

    "Uncaught ReferenceError: spConfig is not defined
    at HTMLSelectElement.onchange"

    can you please tell me why it is not working?

    ReplyDelete
  30. Hello,
    Very Useful post.
    I just need small change in your code that is, i want to display Remains qty on product view page on configurable view page. Help me if you have any solution.

    ReplyDelete
    Replies
    1. Hello,

      You want to display remaining QTY of simple product?

      Delete
  31. No, i want to display remaining qty of CONFIGURABLE product.

    ReplyDelete
  32. Configurable product's qty on configurable product view page.

    ReplyDelete
  33. hi hardik,
    I want same functionality as like this https://www.qdstores.co.uk/products/120x150-pom-pom-throw-pink.html i have integrated your code and changed product name and description but on page refresh it again displays information of configurable product can you please help me
    thanks,

    ReplyDelete

 

Copyright @ 2017 HKBlog.