Multi-Column Responsive All-Brands CMS Page

Here’s a simple method to create a separate CMS page that lists all brands and/or manufacturers (uses the manufacturer attribute).

Instead of using the advanced search page (which uses the attribute code instead of name) that doesn’t have a dynamic page title, this method uses the regular search page which displays the manufacturer name in the url and title.

If you want the columns to be responsive, include the responsive CSS section and add additional sections (or delete) as needed. It’s totally optional.

Create a new template:

app/design/frontend/default/YOURTHEME/template/catalog/product/brand.phtml

<?php
/**
* Separate CMS Page listing all Brand and Manufacturers
* CMS content: {{block type="catalog/product" template="catalog/product/brand.phtml"}}
*
*/
?>
<div>

<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}

/* Optional - Used for responsive display (adjust px and cols as needed) */
@media (max-width: 600px) {
.newspaper {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
</style>

<div class="newspaper">
<?php
$product = Mage::getModel('catalog/product');
$attributes = Mage::getResourceModel('eav/entity_attribute_collection')
->setEntityTypeFilter($product->getResource()->getTypeId())
->addFieldToFilter('attribute_code', 'manufacturer');
$attribute = $attributes->getFirstItem()->setEntity($product->getResource());
$manufacturers = $attribute->getSource()->getAllOptions(false);
?>
<ul id="manufacturer_list">
<?php foreach ($manufacturers as $manufacturer): ?>
<?php $query = str_replace(' ', '+', trim($manufacturer['label'])); $query = str_replace('&amp;','%26', $query); ?>
<?php $base_url = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>
<li><?php echo "<a href=\"" . $base_url . "catalogsearch/result/?q=" . $query . "\">" . $manufacturer['label'] . "</a>"; ?></li>
<?php endforeach; ?>
</ul>
</div>
</div>

Note the in-line style – this is the key to automatic multi-column newspaper-like styling. Change the numbers if you’d like a different amount of columns.

Upload the new template and create a new CMS page – in the content, simply place the following –

{{block type=”catalog/product” template=”catalog/product/brand.phtml”}}

Once saved, your page should resemble something like this ..

Note: The manufacturer attribute needs to be ‘searchable’ – also, where this uses the regular search, it will also search through the other searchable attributes looking for this keyword combination.

If you’d prefer to use the ‘advanced search’ method, simply change the link to advanced search and the manufacturer label to the code instead.