Magento : On the category page how do I display a product for all the colour options in a configurable

Question

I have a configurable product with two configurable attributes size and colour, I would like to display on the category page one product for each colour in the configurable. These colours need to be displayed when available in different sizes.

When the customer opens the page they should see all the colours that all the products are available in, then if they filter by size they should see all the colours of all the products that are in that size.

There are two issues with this problem. 1. Displaying the appropriate products and colours and 2. Setting the Layered Navigation so that it displays all the correct options.

I have tried just displaying simple products for each colour and linking them to their parent configurable but then the Layered Navigation is all wrong. I have also tried making a configurable product visible in the backend so that it is added to the product collection and used in the filters then just hiding it on the category page, this kind of works but the Layered Navigation counts all the simple products as well. Another problem is that if I try and use simple products and pick one of each colour then these also have a specific size so that if a user changes sizes in the filter these won't be shown.

Does anyone know a way to do this?

Do you want to display all the colors available for each of your configurable products on the category page ? If so you could just use the mecanism of the product page which displays the configurable attributes, at the difference that you just need to display the first one without any javascript cascading selection (this could work only if "color" is the first attribute to be displayed on your product page). If this is what you want to do , i can guide you ... — Jscti
'color' is the first attribute of my configurable products, if I'm reading you right I should be able to take the code that generates the product attributes dropdown on the product page and then use that to display on the category page? I have had a look at wrapper.phtml that generates the configurable options but I'm not sure how to modify this to suit — Anthony Lavin

Jscti Jscti · Accepted Answer · 2012-10-18T12:56:42

In your list.phtml (or any new template you'd like to create) (edit: or better : in a Block) try this :

$colors = array();
if ($_product->isConfigurable()) {
    $allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
    foreach ($allProducts as $subproduct) {
        if ($subproduct->isSaleable()) {
            $colors[$subproduct->getColor()] = $subproduct->getAttributeText('Color');
        }
    }
}

and iterate over $colors to construct your custom HTML list of colors

Magento : On the category page how do I display a product for all the colour options in a configurable

1 Answers