Displaying configurable products with options on one page can be problem because Javascript in Magento is setup to work only with one configurable product.
You can write your own Javascript or U can reuse Magento code.
To accomplish that we need to modify product Javascript (js/varien/product.js) and configurable (catalog\product\view\type\options\configurable.phtml) select element template.
In configurable.phtml call our new JS class (we will create that class later in article) and add product id to configurable select element class.
<?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_<?php echo $_product->getId()?> "> <option><?php echo $this->__('Choose an Option...') ?></option> </select> </div> </dd> <?php endforeach; ?> </dl> <script type="text/javascript"> var spConfig_<?php echo $_product->getId()?> = new Inchoo_Product.Config(<?php echo $this->getJsonConfig() ?>); </script><?php endif;?>Then create Javascript file and Javascript class.
Copy javascript code from js/varien/product.js for configurable product (use own namespace to avoid JS collision with Magento).
if(typeof Inchoo_Product =='undefined') { var Inchoo_Product = {};}/**************************** CONFIGURABLE PRODUCT **************************/Inchoo_Product.Config = Class.create();Inchoo_Product.Config.prototype = {Because we change selector name we have to modify our JS code to work with new selector.
var settingsClassToSelect = '.super-attribute-select_'+this.config.productId;this.settings = $(settingsClassToSelect);Magento code is stripping “attribute” string from class of configurable select element but we also have to strip product id (we added product id to class name in configurable.phtml).
// fill statethis.settings.each(function(element){ var attributeId = element.id.replace(/[a-z]*/, ''); attributeId = attributeId.replace(/_.*/, ''); ........fillSelect: function(element){var attributeId = element.id.replace(/[a-z]*/, '');attributeId = attributeId.replace(/_.*/, '');Now we can have multiple configurable products with options on same page.
