Configurable products are a very useful Magento functionality, however, the frontend is not always as extensive as we’d like. In this tutorial I’ll show you how to easily change the frontend content depending on the simple product currently selected via swatches.

We’ll use JavaScript developed by Goran Sambolic, published on http://inchoo.net/magento/getting-selected-simple-product-id-in-configurable-product-on-client-side/, which is responsible for returning the ID of a selected product.

So to start with, let’s copy the file skin/frontend/rwd/default/js/configurableswatches/swatches-product.js to our theme and add the above-mentioned script to it.

//skin/frontend/rwd/magently/js/configurableswatches/swatches-product.js
...
Product.Config.prototype.getIdOfSelectedProduct = function(val)
{
    var existingProducts = new Object();
    for(var i=this.settings.length-1;i>=0;i--) {
       // loop through the available swatches
        var selected = this.settings[i].options[this.settings[i].selectedIndex]; // getting the selected swatch
        if(selected.config) {
            for(var iproducts=0;iproducts<selected.config.products.length;iproducts++) {  // getting the products associated with a given swatch
                var usedAsKey = selected.config.products[iproducts]+"";
                if(existingProducts[usedAsKey]==undefined) {
                    existingProducts[usedAsKey]=1;
                }
                else {
                    existingProducts[usedAsKey]=existingProducts[usedAsKey]+1;
                }
            }
        }
    }

    for(var keyValue in existingProducts) {  // loop through the possible products
        for(var keyValueInner in existingProducts) {
            if(Number(existingProducts[keyValueInner])<Number(existingProducts[keyValue])) {
                delete existingProducts[keyValueInner];
            }
        }
    }
    var sizeOfExistingProducts=0;
    var currentSimpleProductId = "";
    for(var keyValue in existingProducts) {
        currentSimpleProductId = keyValue;
        sizeOfExistingProducts=sizeOfExistingProducts+1
    } // checking the size of the array with the products and remembering the last product’s ID
    if(sizeOfExistingProducts==1) {
      changePageContents(currentSimpleProductId);  // changing the content when there is only one product (unambiguous match)
    }

}

Additionally, let’s add the following line at the end of the “onOptionClick” method:

spConfig.getIdOfSelectedProduct();

Thus, selecting a product by a user will launch the getIdOfSelectedProduct method, which then calls our changePageContents function that takes the product ID as a parameter. We’re not going to focus on it now, so let’s move to layouts and templates. Since we’re changing the content using JavaScript, we’ll have to dynamically generate variables representing the new content. Therefore, instead of a standard .js file, we’ll use a template.

//app/design/frontend/rwd/magently/layout/local.xml
<PRODUCT_TYPE_configurable>
    ...
    <reference name="product.info">
        <block type="catalog/product_view" name="associated.info" template="catalog/product/view/associated_info.phtml"/>
    </reference>
</PRODUCT_TYPE_configurable>

We’re using catalog/product_view type, because we’ll need the getProduct method for the template:

//app/design/frontend/rwd/magently/template/catalog/product/view/associated_info.phtml
<?php

$_product = $this->getProduct();
$childrenIds = Mage::getModel('catalog/product_type_configurable')->getChildrenIds($_product->getId());

$children = Mage::getModel('catalog/product')->getCollection()
                ->addAttributeToFilter('entity_id', array('in' => $childrenIds));

In our simple example, let’s assume that we want to notify customers of the quantity of available products.

//app/design/frontend/rwd/magently/catalog/product/view/associated_info.phtml
<?php 
...

foreach($children as $_child) {
    $_stock = (int)Mage::getModel('cataloginventory/stock_item')->loadByProduct($_child)->getQty();
    $childrenStock[$_child->getId()] = $_stock;
}

Once this loop is completed in the $childrenStock array, the information about the stock will be assigned to the keys which are product IDs. Do you remember what parameter should our JavaScript function changePageContents take?

Now we have to configure our data in such a way that they can be used by JavaScript, and display a default message.

//app/design/frontend/rwd/magently/catalog/product/view/associated_info.phtml
<?php
...
?>
<script type="text/javascript">
    var childrenStockInfo = {
        <?php
            foreach ($childrenStock as $id => $_stock) {
                echo $id.':"'.$_stock.'",';
            }
        ?>
    }
</script>

<p class="detailed-stock"><?php echo $this->__('Select options for detailed stock info') ?></p>

Our template is ready, so let’s copy app/design/frontend/rwd/default/template/catalog/product/view.phtml to our theme and display the recently added block in any chosen place.

//app/design/frontend/rwd/magently/template/catalog/product/view.phtml
...
<?php echo $this->getChildHtml('associated.info') ?>
...

Once the data are correctly formatted on the page, let’s return to the swatches-product.js file and write a function responsible for changing the content on the page.

//skin/frontend/rwd/magently/js/configurableswatches/swatches-product.js
...
changePageContents = function(productId) {
    jQuery('.detailed-stock').text(childrenStockInfo[productId]+' products available!');
}

And that’s it! Now, whenever a customer selects a product from swatches, the information about the quantity of the product in stock will be displayed.

stock