Im on magento and I need to display the product swatches and the add to cart button to the configurable products in the product list (catalog_category_layered).

After doing some research I got this code:

<form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product);?>" method="post" id="product_addtocart_form">
    if ($_product->getData('type_id') == "configurable")
    //get the configurable data from the product
    $config = $_product->getTypeInstance(true);
    //loop through the attributes
    foreach($config->getConfigurableAttributesAsArray($_product) as $attributes)
    <div id="product-options-wrapper" class="select_number">
        <label class="required last"><em>*</em><?php echo $attributes["frontend_label"]; ?></label>
        <select class="required-entry" name="super_attribute[<?php echo $attributes['attribute_id'] ?>]" id="attribute<?php echo $attributes['attribute_id'] ?>">
            <option value=""><?php echo $attributes["store_label"]; ?></option>
            foreach($attributes["values"] as $values)
            echo "<option value=".$values["value_index"].">".$values["label"]."</option>";
    <div style="display: none;" id="advice-required-entry-attribute<?php echo $attributes['attribute_id'] ?>" class="validation-advice">This is a required field.</div>
    if(!$_product->isGrouped()): ?>
    <label for="qty"><?php echo $this->__('Quantity') ?>:</label>
    <input type="number" name="qty" id="qty" maxlength="3" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>" style="display:none"/>
    <?php endif; ?>
    <?php if($_product->isSaleable()): ?>
    <button type="button" class="button btn-cart" id="add-product-<?php echo $_product ?>" title="<?php echo $this->__('Add to Cart') ?>" onclick="productAddToCartForm.submit(this)" value="Add To cart" /><?php echo $this->__('Add to Cart') ?></button>
    <?php else: ?>
    <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
    <?php endif; ?>

But it has no size swatches, but a select. And the select displays all the available sizes instead of displaying only the available ones.

I'm searching for the best way to implement this feature to the product list.

I developed an ajaxcart module for the product view, so I can adapt it to the product list, but somehow I got stuck displaying the product swatches.

Edit: the attribute size is configured to display in product list: admin size attribute config I know it depends on the theme, I have a customized theme extended from rwd but I tried with the rwd/default theme and still can't display the product swatches.

I also checked that catalog.xml has in catalog_category_default and catalog_category_layered the required blocks:

<block type="core/text_list" name="product_list.name.after" as="name.after" />
<block type="core/text_list" name="product_list.after" as="after" />

An in the template of product list, the required code is in each product:

    // Provides extra blocks on which to hang some features for products in the list
    // Features providing UI elements targeting this block will display directly below the product name
    if ($this->getChild('name.after')) {
        $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
        foreach ($_nameAfterChildren as $_nameAfterChildName) {
            $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
            echo $_nameAfterChild->toHtml();

And in the end of the product list template:

    // Provides a block where additional page components may be attached, primarily good for in-page JavaScript
    if ($this->getChild('after')) {
        $_afterChildren = $this->getChild('after')->getSortedChildren();
        foreach ($_afterChildren as $_afterChildName) {
            $_afterChild = $this->getChild('after')->getChild($_afterChildName);
            //set product collection on after blocks
            echo $_afterChild->toHtml();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.