Magento - How to Display Multiple Configurable Products on Category Page - Dropdown Values Not Displaying

Question

I'm trying to add multiple configurable products onto a category list page in Magento 1.7.2. I am using the Organic Internet SCP extension along with EM Gala Colorswatches which is making this a bit trickier than normal. I have followed the tutorials from these sites....they are pretty much the same idea...

http://inchoo.net/ecommerce/magento/display-multiple-configurable-products-with-options-on-one-page-in-magento/

http://www.catgento.com/adding-configurable-product-options-to-category-list-in-magento/

The dropdowns and color swatches display fine on the product page, however on the category page the dropdowns, labels, and price display but the product values are not displaying when the dropdown is selected. I have included all of the same .js files from the product page where it is working. The only difference I can see is in the console I am getting the following errors from prototype.js

TypeError: document.getElementById(...) is null
element.attachEvent("ondataavailable", responder);
prototype.js (line 5644)

TypeError: element.attachEvent is not a function    
element.attachEvent("ondataavailable", responder);
prototype.js (line 5644)

TypeError: element.attachEvent is not a function
element.attachEvent("on" + actualEventName, responder);

TypeError: element.dispatchEvent is not a function  
element.dispatchEvent(event);

The third error appears only when I have the configurable product block uncommented on the page. The function it is referring to is in prototype.js and is as follows

function observe(element, eventName, handler) {
element = $(element);
var responder = _createResponder(element, eventName, handler);
if (!responder) return element;
if (eventName.include(':')) {
if (element.addEventListener)
element.addEventListener("dataavailable", responder, false);
else {
element.attachEvent("ondataavailable", responder);
element.attachEvent("onlosecapture", responder);
}
} else {
var actualEventName = _getDOMEventName(eventName);
if (element.addEventListener)
element.addEventListener(actualEventName, responder, false);
else
element.attachEvent("on" + actualEventName, responder);
}
return element;
}

when I view the source I can see that the JSON object is there and the data is available but for some reason it's not getting added to the select boxes as options like on the product page.... Any help would be appreciated.

Here is the code from app/design/frontend/default/mytheme/catalog/product/list.phtml

    <?php if ($_product->getData('type_id') == "configurable"){  
                 Mage::unregister('product');
                    Mage::register('product', $_product);
                    $block = $this->getLayout()->createBlock(
                        'OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_View_Type_Configurable',
                        'options_configurable',
                        array('template' => 'catalog/product/view/type/options/configurable.phtml')
                        );
                    echo $block->toHtml(); 

                   $priceBlock = $this->getLayout()->createBlock(
                        'OrganicInternet_SimpleConfigurableProducts_Catalog_Block_Product_Price',
                        $_product->getFinalPrice(),
                        array('template' => 'catalog/product/price.phtml')
                        );
                    echo $priceBlock->toHtml(); 
    }   
 ?>

Here is the code that this block calls at /app/design/frontend/default/mytheme/template/catalog/product/view/type/options/configurable.phtml

<?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;?>

Thanks in advance, let me know if you need any more info...

Memfis Memfis · Accepted Answer · 2014-07-01T05:06:16

I think this may happend because magento uses different scripts on these pages:

configurable.js should be included at product view page
configurableList.js should be included at catalog view page

Both scripts have several methods that are named same. So if you include both scripts at catalog view page, or include configurable.js only at catalog view page, you will get nothing in your select dropdowns, because methods named same, while logic is different.

Magento - How to Display Multiple Configurable Products on Category Page - Dropdown Values Not Displaying

1 Answers