2

How can I dynamically update the sku of a product on the product page when users select its custom options? Also, how could it then be passed into the cart page?

Example: A product with sku XXX has two custom options Y and Z, which have the options of Y1, Y2 and Z1, Z2. If a user selects Y1 and Z2, I'd like to change the sku on the page to XXX-Y1-Z2 and pass that sku to the cart.

Thanks.

5

If you add a custom options to a product you can add, for example for dropdown options, a product sku suffix as shown below.

enter image description here

On choosing an option when adding the product to cart and retrieving the SKU in the cart var_dump($_item->getSku()); you can see the products SKU has been changed

enter image description here

Now for dynamically updating the SKU on the product page. For this we will need to retrieve the option values SKU's which can be done in the file app/design/frontend/[package]/[template]/template/catalog/product/view/options.phtml for example. In this case around line 190 after the javascript we add/replace some code as shown below. This will give you a javascript array which you can use when a custom option is selected to map the option ID to the SKU suffix and changing the displayed product SKU on the product page.

<dl>
    <?php $options_to_sku = array();?>

    <?php foreach($_options as $_option): ?>
        <?php echo $this->getOptionHtml($_option) ?>
<?php
if ($_option->getType() == 'drop_down')
{
    $options_to_sku["{$_option->getId()}"] = array();
    foreach ($_option->getValues() as $k => $v) 
    {
        $options_to_sku["{$_option->getId()}"]["{$v->getData('option_type_id')}"] = $v->getData('sku');
    }
}
?>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var options_to_sku = <?php echo json_encode($options_to_sku);?>;

        $$('.product-custom-option').each(function(elm) {
            $(elm).observe('change', function() {
                var sku_suffix = '';
                $$('.product-custom-option').each(function(opt) {
                    if ($(opt).value.length==0) // no value selected
                        return;

                    var opt_id = $(opt).readAttribute('id').replace('select_','');

                    if (!!!options_to_sku[opt_id]) // no option values array found
                        return;

                    if (!!!options_to_sku[opt_id][$(opt).value]) // no sku found matching value id
                        return;

                    sku_suffix += '-' + options_to_sku[opt_id][$(opt).value]; // add to suffix
                });

                /**
                 * add here the code that adds the suffix to your SKU
                 */
                console.log(sku_suffix);
            });
        });
    </script>
  • Thanks Sander. This is close, but the array only includes the id and the sku of the last option for each custom option. So, it looks like: var options_to_sku = {"id1":"LastOptionSku1","id2":"LastOptionSku2"}; Also, I couldn't get js to use the array to ammend the sku. So, I used jQuery to update the options. See: jsFiddle. But, this requires the id of the <select> element, which I couldn't get dynamically. And, it appends the option's value to the product sku instead of the option's sku. (oh, and it's jQuery, because I couldn't js or prototype to work). – Dustin Dec 9 '13 at 22:34
  • I've updated my answer to be a multidimensional array. So now it should create an array with options for each dropdown. Adding the ID or any other HTML to the select takes a lot of rewriting. After work (in 8 hours) ill put this in a test shop and debug it for you reporting back with a full answer :) – Sander Mangel Dec 10 '13 at 8:14
  • @Dustin updated my code with PHP changes and working javascript (prototype). I've tested it on a clean Mage 1.8 install – Sander Mangel Dec 10 '13 at 17:38
  • you are brilliant. That works perfectly. Thanks for all the help. In case you or future readers want my code to add the suffix, I put a container in the html, <div id="sku-container"></div>. At the top of the js, I added: $("sku-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>"); and in your js, I added $("sku-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>" + (sku_suffix)); Thanks again. – Dustin Dec 10 '13 at 22:08
  • @SanderMangel I have been trying to get this to work for a while now and would like some help please. My Magento version is 1.9.1 and I have pasted the code to my options.phtml page here: pastebin.com/QcsVyqct Any help is appreciated! Thank you in advance. – NotJay Jul 23 '15 at 13:49
1

Product page

Add the sku to the product page, add a few lines of JS, listen on change on the <select> and change the sku.

Cart

Implement an observer, listen to checkout_cart_product_add_after take the product, check for the custom options and change the sku of the quote_item. The quote_item is saved afterwards, so no need to save it inside the controller.

$quoteItem->setSku();

Done.

  • Can you point me toward references or examples. I'm not sure I understand how this would update anything on the product page. – Dustin Dec 6 '13 at 23:42
  • Damn. Didn't read the part with the product page. This wouldn't :D I would add a few lines of JS to achieve this. Sorry for missing – Fabian Blechschmidt Dec 7 '13 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.