Magento – Display Dynamic SKU on configurable product view Magento using Image Swatch

configurable-productmagento-1.9sku

I've used the code from the answer in this thread:

https://stackoverflow.com/questions/13444995/display-dynamic-sku-on-configurable-product-view-magento

It works great when I'm using the drop down to select the simple product on the configurable product page. The issue is I'm using the image swatch feature to select the simple product instead of the dropdown.

Does anyone know of a way to accomplish this using the image swatch? I've noticed that with the dropdown it displays way more information in the DOM than it does with the image swatch.

I'm using 1.9

Best Answer

You can follow below code for swatches:

app/design/frontend/rwd/my_theme/template/configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml

    <?php
$_product    = $this->getProduct();
$_attribute = $this->getAttributeObj();
$_jsonConfig = $this->getJsonConfig();
$_config = json_decode($_jsonConfig);

$_swatchInnerWidth = $this->getSwatchInnerWidth();
$_swatchInnerHeight = $this->getSwatchInnerHeight();
$_swatchOuterWidth = $this->getSwatchOuterWidth();
$_swatchOuterHeight = $this->getSwatchOuterHeight();

$_attr = $_attribute->getProductAttribute();
$_attrCode = $_attr->getAttributeCode();
$_id = $_attribute->getAttributeId();

$_swatchArray = $_config->attributes->$_id;
?>
<dt class="swatch-attr abc">
    <label id="<?php echo $_attrCode ?>_label" class="required">
        <?php echo $_attribute->getLabel() ?>:<em>*</em>
    </label>
</dt>
<dd class="clearfix swatch-attr bc <?php if ($_attribute->decoratedIsLast) echo ' last'; ?>">
    <div class="input-box">
        <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select no-display swatch-select">
            <option><?php echo $this->__('Choose an Option...') ?></option>
        </select>
        <ul id="configurable_swatch_<?php echo $_attrCode ?>" class="configurable-swatch-list clearfix">
            <?php foreach ($_swatchArray->options as $_option): ?>
                <?php
                $_optionCode = Mage::helper('configurableswatches')->getHyphenatedString($_option->label);
                $_swatchUrl = Mage::helper('configurableswatches/productimg')->getSwatchUrl($_product, $_option->label, $_swatchInnerWidth, $_swatchInnerHeight, $_swatchType);
                $_hasImage = !empty($_swatchUrl);
                $_liClass = '';
                $_aClass = 'swatch-link swatch-link-' . $_attribute->getAttributeId();
                if ($_hasImage) {
                    $_liClass .= $_swatchType == 'media' ? ' is-media' : '';
                    $_aClass .= ' has-image';
                } elseif (strlen($_option->label) > 3) {
                    $_liClass .= ' wide-swatch';
                }
                ?>
                <li class="option-<?php echo $_optionCode; ?><?php echo $_liClass; ?>" id="option<?php echo $_option->id; ?>">
                    <a onclick="return changeSku(<?php echo $_attribute->getAttributeId() ?>, this, <?php echo $_option->id; ?>);" href="javascript:void(0)" name="<?php echo $_optionCode; ?>" id="swatch<?php echo $_option->id; ?>" class="<?php echo $_aClass ?>" title="<?php echo $_option->label; ?>"
                       style="height: <?php echo $_swatchOuterHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchOuterWidth ?>px;">
                <span class="swatch-label" style="height: <?php echo $_swatchInnerHeight ?>px; <?php if (!$_hasImage): ?>min-<?php endif; ?>width: <?php echo $_swatchInnerWidth ?>px; line-height: <?php echo $_swatchInnerHeight ?>px;">
                <?php if ($_hasImage): ?>
                    <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />
                <?php else: ?>
                    <?php echo $_option->label; ?>
                <?php endif; ?>
                 </span>
                        <span class="x">X</span>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
</dd>

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

<?php
$conf = Mage::getModel('catalog/product_type_configurable')->setProduct($_product);
$col = $conf->getUsedProductCollection()->addAttributeToSelect('*')->addFilterByRequiredOptions();
$productMap = array();
$atLable = array();
$unitLabel = '';
foreach($col as $simpleProduct){
    $productMap[$simpleProduct->getId()] = $simpleProduct->getSku();
} ?>
<script type="text/javascript">
function changeSku(confAttributeId, sel, pid) {
    var productMap = <?php echo Mage::helper('core')->jsonEncode($productMap);?>;
    var selectedAttributeId = pid;
    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>
Related Topic