Magento: Dynamic SKU display on Configurable Products

A client of mine requested that on a configurable product when a visitor chooses an option (i.e. a simple product) that I display that simple products SKU automatically on the configurable product page.

First thing I did was look at the Simple Configurable Product module by Matt Dean to see if that was an option I could toggle on. Unfortunately that was not an option. I have a feeling that is not an option because some configurable products may require multiple options to be selected in order to present the correct SKU and the code for that could be potentially daunting. Fortunate for me, my client only has one dropdown per configurable product.

To get things going on this little project I opened up app/design/frontend/base/default/template/catalog/product/view/type/options/configurable.phtml and used that page for writing my code. You may want to choose a different directory that is related you your site’s theme.

On about line 38 I changed it from this:

<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]"
id="attribute<?php echo $_attribute->getAttributeId() ?>">

to this:

<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]"
id="attribute<?php echo $_attribute->getAttributeId() ?>"
onchange="return changeSku(this);">

At the very bottom of the configurable.phtml page I wrote the following mix of PHP and Prototype code to solve the Dynamic SKU Display:

<?php
$_product    = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <dl>
    <?php foreach($_attributes as $_attribute): ?>
        <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
        <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
            <div class="input-box">
                <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select" onchange="return changeSku(this);">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>
              </div>
        </dd>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
        var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    </script>
     
<?php endif;?>


<?php
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions();

echo '<script type="text/javascript">';

echo '
document.observe("dom:loaded", function() {
  $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id");
});
';
echo ' function changeSku(sel){';     	

$itemId = array();           
foreach($col as $simple_product){
$itemId[] = array($simple_product->getSelectLabel() => $simple_product->getSku());
} 

//echo "<pre>";
//print_r($itemId);
//echo "</pre>";

foreach($itemId as $val){
 foreach($val as $k => $v){
echo "\n".'if(sel.options[sel.selectedIndex].value == "'.$k.'"){'."\n";
echo '$("sku-container").update("<strong>Product Id: </strong>'.$v.'");'. "\n";
echo '}';
	}
}
 
echo "\n".'if(sel.options[sel.selectedIndex].value == ""){'."\n";
echo '$("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id");'. "\n";
echo '}'; 
 
echo "}";
echo "\n</script>";
?>

Please note that my client requested that the SKU not be shown for the configurable product itself so you will need to comment out and/or remove those areas of the code shown above that do not display the SKU for the configurable product.

If you have a questions or comments please reply to this post and I would be happy to discuss it with you.