How to get simple product from magento 2 configurable product options. – In this magento blog article i will going to tell you some easiest way to get the simple product from configurable product options. Usually we want to show some special details on the specific product in our product details page. For Simple product we can directly show the content according to product Id.
But when it comes to configurable products, There might be different information to show based on the options it have. So situation like this it’s better to get the simple product id from the options customer choose. With the simple product id we can show what ever the information related to the selected simple product. This is one of the common & repeating task for magento developers in their projects.
We can add below code to addtocart.phtml ( design/frontend/<Your_Vendor_name>/ < Your_Theme_Name>/Magento_catalog/templates/product/view/addtocart.phtml) to get the simple product ID.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> require(["jquery"], function(jQuery) { jQuery(".product-options-wrapper select[id^='attribute']").last().on('change', function() { setTimeout(function (){ simpleProductId=jQuery("input[name=selected_configurable_option]").val(); }, 500); }); }); </script> |
This will return the Simple product id based on the customer selected options of the configurable product. With this simple product id you can get what ever the details for the specific product and show in the product details page. To do this you need to pass the product_id to one of your controller and get the result using AJAX like below. You can use the same Code line above and add the AJAX part on this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> require(["jquery"], function(jQuery) { jQuery(".product-options-wrapper select[id^='attribute']").last().on('change', function() { setTimeout(function (){ simpleId=jQuery("input[name=selected_configurable_option]").val(); jQuery.ajax({ url: "<?php echo $this->getUrl('giftcertificates/pdp/pdp') ?>", method: 'POST', data: {id:simpleId}, success: function (response) { document.getElementById("deliver_text").textContent = response; } }); }, 500); }); }); </script> |
deliver_text is the id of the content <div> where i want to update the content according to simple product. AJAX section is pretty common. Which pass argument ( id ) to controller ( url ) and the response is the return from the controller.
We show how to get simple product from magento 2 configurable product options. And update the content section based on the simple product.
Hope you may interest in reading about create order attribute programatically. To visit some trending magento 2 GraphQl example visit the GraphQl section.
Must share your thoughts with this article and keep sharing with your team mates 🙂 .
Aw, this was a very nice post. Spending some time and actual effort to create
a really good article… but what can I say… I hesitate a lot and don’t
seem to get nearly anything done.
Thanks for reading. What you tried and what you couldn’t achieve?
Have you ever considered about including a little bit more than just your articles?
I mean, what you say is fundamental and all. Nevertheless
think about if you added some great graphics or video clips to give your posts
more, “pop”! Your content is excellent but with images and videos, this website could certainly be one
of the very best in its niche. Very good blog!
Thank you very much for your idea, Will try in future 🙂