Dynamically updating the sku on the product page of a configurable product based on selected options

Question

I've successfully got the attributes to update dynamically for the SKU on the product page based on the simple product selected (through help found on the web).

I'm now trying to apply this logic to selected custom options for both configurable and simple products.

I've found this code here: Update product sku with customs options skus on product pages and cart

I've tried to apply it in an install version 1.9.2.2 and cannot make it retrieve the option SKU text in certain situations (if the select is not a drop down, but instead a radio choice or checkbox).

The current code in use at the end of the file:

app/design/frontend/{template}/default/template/catalog/product/view/options.phtml

</script>
<!-- begin custom code -->
<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">
    $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>");
    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
            });

            $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>" + (sku_suffix) + "TestText");
            console.log(sku_suffix);            
        });
    });
</script>
<!-- end custom code -->
<!--<dl>
<?php foreach($_options as $_option): ?>
    <?php echo $this->getOptionHtml($_option) ?>
<?php endforeach; ?>
</dl>-->
<?php endif; ?>

I'm calling the SKU suffix into the product page using this, the page is

app/design/frontend/{template}/default/template/catalog/product/view.phtml

<div class="sku-suffix-container" id="sku-suffix-container"></div>

I can confirm that the observe function is working correctly on the checkbox and radio options as onchange the TestText is appearing on the page. I've also tried using or and || to retrieve data if the type is radio without luck.

$_option->getType() == 'radio' 

But could not get it to work, have also tried:

Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO

Have kind of hit a wall at this point, can someone please advise how to also apply this code to radio and checkboxes in addition to the select drop_down above?

---

EDIT:

I'm now using this code to retrieve all option SKU values into the array, the drop_down is updating the SKU still after adding this:

if ($_option->getType() == 'drop_down' || $_option->getType() == 'checkbox' || $_option->getType() == 'radio')

I've confirmed that the values are in the array by using:

<pre><?php print_r($options_to_sku); ?></pre>

The remaining challenge is how to observe/check that the radio or checkbox is actually checked to then append the SKU value.

Answer 1

Success, after some trial and error, the following code will work for drop_down, radio and checkboxes and load the options SKU.

EDIT: Going forward the only thing this is missing is that the sku values are not reloaded when clicking the edit item link from the main cart page. The script will fire on the first change made in the options by the user but I haven't figured out how to fire it on page load so the sku with options shows.

If someone can advise how this would be done with an example it would be much appreciated.

    </script>


    <!-- begin custom code -->
    <dl>
    <?php $options_to_sku = array();?>

    <?php foreach($_options as $_option): ?>
    <?php echo $this->getOptionHtml($_option) ?>
    <?php
    if ($_option->getType() == 'drop_down' || $_option->getType() == 'checkbox' || $_option->getType() == 'radio')
    {
    $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">
    $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>");
    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 || $(opt).checked==false) // no value selected
    return;
    var build_opt_id = $(opt).readAttribute('id').replace('select_','').replace('options_','');

    var opt_id = build_opt_id.replace(/\_.*/,'');

    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
    });
    $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>" + (sku_suffix) + "TestText");

    console.log(sku_suffix);

    });

    });

    </script>
    <!-- end custom code -->

    <!--<dl>
    <?php foreach($_options as $_option): ?>
    <?php echo $this->getOptionHtml($_option) ?>
    <?php endforeach; ?>
    </dl>-->
    <?php endif; ?>