Magento Simple Product Page - Dynamically Update SKU with Custom Options

Question

My product page has several custom options (dropdowns) which are appended to the sku for the cart. However, I would like to display the updated sku on the product page as the options are selected.

I found a similar post about configurable items , however, it will not work for my case because I am using simple products with options , not configurable products .

How might I display and update the sku for a simple product on the product page?

Configurable Product Code for Dynamic Sku:

<?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(<?php echo $_attribute->getAttributeId() ?>, 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;?>

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

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

$productMap = array();
foreach($col as $simpleProduct){
    $productMap[$simpleProduct->getId()] = $simpleProduct->getSku();
}
?>

<script type="text/javascript">

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

function changeSku(confAttributeId, sel) {
    var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>;
    var selectedAttributeId = sel.options[sel.selectedIndex].value;
    if (selectedAttributeId) {
        var options = spConfig.config.attributes[confAttributeId].options;
        var productId = options.find(function (option) {return option.id == selectedAttributeId}).products[0]
        $("sku-container").update("<strong>Product Id: </strong>" + productMap[productId]);
    } else {
        $("sku-container").update("<strong>Product Id: </strong> Select an option to display Product Id");
    }
}
</script>

Answer 1

Your best bet is to create a custom module. If you're not familiar with creating a module with Magento, check out this resource: https://www.smashingmagazine.com/2012/03/basics-creating-magento-module/

You could also look into existing Magento extensions to handle this for you: https://www.magentocommerce.com/magento-connect/

Another idea is to use JavaScript to do this. It sounds like this actually might be a good fit for you because you're looking to update the frontend only (right??). You can create a javascript function and add onchange actions on the different aspects of the product page. Inside your JavaScript, you can store an array or map of product arrays such as sku, price, weight, etc... anything that you might want to dynamically update on the product page.