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>

I’m sure you had a reason for going the direction you did, but it sure seems like you are trying to reinvent the wheel and working against Magento’s built-in data structures. — fantasticrice
@fantasticrice I haven't actually implemented that code displayed, I am using as reference. I'm looking for a solution to show a dynamic sku for simple products. — NotJay
My point is that is exactly the purpose of Configurable product type. To choose a specific SKU based on options. So you are trying to re-solve a problem that has been solved. — fantasticrice
This is for display purposes on the product page, not the cart page. I want the sku to be shown as the selections are being made (dynamically). I already have the Magento generated sku on the cart/checkout; that's easy. I wanted to know how to show it on the product page itself. — NotJay

berg37 berg37 · Accepted Answer · 2016-02-08T23:44:58

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.

Magento Simple Product Page - Dynamically Update SKU with Custom Options

1 Answers