Im on magento 1.9.2.4 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">
<?php
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>
<?php
foreach($attributes["values"] as $values)
{
echo "<option value=".$values["value_index"].">".$values["label"]."</option>";
}
?>
</select>
</div>
<div style="display: none;" id="advice-required-entry-attribute<?php echo $attributes['attribute_id'] ?>" class="validation-advice">This is a required field.</div>
<?php
}
}
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; ?>
</form>
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:
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:
<?php
// 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);
$_nameAfterChild->setProduct($_product);
echo $_nameAfterChild->toHtml();
}
}
?>
And in the end of the product list template:
<?php
// 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
$_afterChild->setProductCollection($_productCollection);
echo $_afterChild->toHtml();
}
}
?>