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.
Please support us, Like us on Facebook.
Subscribe to:
Post Comments (Atom)
great post....
ReplyDeleteHi really its great.. very useful to us. but i want assign simple product id to view.phtml instead of this alert box while onchange.
ReplyDeleteif i use location.href its reload. i want to assign without reload the page. can u help me?
Thanks Deelk...
ReplyDeleteCan you please explain me in details what you want exactly?
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?
ReplyDeleteHi Deelk..
ReplyDeleteYou can use ajax here to pass the currentSimpleProductId...
Thank you!
ReplyDeleteHow do I get the selectionId?
ReplyDeleteBest wishes, stebu
Follow the above instruction and you will get the selected simple product id in product view page in alert box.
ReplyDeleteHow can i get also the product image url of the selected product option? Please help...
ReplyDeleteFor that you have to use ajax here something like this.
ReplyDeletejQuery.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;
}
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...
ReplyDeleteThanks in advance
So, you want to display all the information of selected product in Tab?
DeleteHello Hardik
ReplyDeleteYour 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
replace this code with alert box.
DeletejQuery.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.*/
}
Hello Hardik
DeleteIn 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
I have created this function in core ProductController.php file.
Delete"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.
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
DeleteTry this post may be its what you are looking for.
Deletehttp://inchoo.net/ecommerce/magento/create-a-color-switcher-in-magento/
Hi,
ReplyDeleteI 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
There is only one solution for that.
Deleteuse ajax in your view.phtml and change your attributes as per selected simple product.
Hi, thank you for your reply, but i can't achieve this.
DeleteFor 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
You can't achieved it directly in view.phtml.
Deleteyou 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.
Thank you,
DeleteI'm palaying with this and see what happens.
Regards,
Pedro
Superb.. Thank you so much....
ReplyDeleteInstead 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.
ReplyDeleteYou 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.
DeleteGreat Post :)
ReplyDeleteThanks Amitav,
Deletehi 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.
ReplyDeletei 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 ?
There is a problem in variable passing, please change following line...
Deletedata:"id="+obj,
to
data:"id="+currentSimpleProductId,
Thanks,
Hi Hardik,
ReplyDeletei 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
Hello,
ReplyDeleteThank 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.
hello dear ,
ReplyDeletei 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
Good job
ReplyDeletethanks.... 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...
ReplyDeletehow can i done with magento 2...???
ReplyDeletehi Hardik,
ReplyDeleteI have followed above your mentioned instruction(in my selected theme only)but i could not get even alert message.
I need to check your code.
DeleteCan you please share your site url here?
Thanks,
Hi Hardik,
ReplyDeleteI 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.
Hello Stuti,
DeleteI 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,
Hello hardik,
ReplyDeleteYour code is working fine.
But I need Simple product price too with Id. Can you please help me.
Thanks
You can follow this post.
Deletehttp://hkpatel201.blogspot.in/2014/03/get-simple-product-details-of.html
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
ReplyDeleteThank you.
Hello,
DeleteYou 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.
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
DeleteWhat is wrong?
Thx.
Hello I need to check code for this directory.
Deleteproductdetails/index/optiondetails/
Also can you please share your product page link?
Thanks
http://layoutech.com.br/pecas-graficas/yep
DeleteI 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.
I can not see any option on your link here
Deletehttp://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,
Hi could you help with my problem, i want also to redirect the simple product URL when they select in the configurable option thanks
DeleteHello , 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
ReplyDeleteHi Marco.
DeleteHardik 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.
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
ReplyDeleteHello Hardik,
ReplyDeleteI 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?
Hello Hardik,
ReplyDeleteI 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?
really a great post, but can you please explain what if we want alert on swatch click not with dropdown.
ReplyDeleteHello Hardik,
ReplyDeleteI 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?
Hello,
ReplyDeleteVery 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.
Hello,
DeleteYou want to display remaining QTY of simple product?
No, i want to display remaining qty of CONFIGURABLE product.
ReplyDeleteConfigurable product's qty on configurable product view page.
ReplyDeletehi hardik,
ReplyDeleteI 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,