As you can see from the next screenshot, in the main content, we want to display the following points:
- Some text information right at the top
- A block with some products of a specific category
- A block with text information after each product
First, we are going to develop the main block, which contains the products grid. Afterwards, we are going to insert the remaining text blocks.
1. Adding a block with some products of a specific category
To display some products of a specific category in a CMS page, we need to perform the following steps:
- Create the custom products list file called list-home.phtml in app/design/ frontend/bookstore/default/template/catalog/product containing the following code snippet:
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper(‘catalog/output’);
?>
<?php if(!$_productCollection->count()): ?>
<p class=”note-msg”><?php echo $this-> (‘There are no
products matching the selection.’) ?></p>
<?php else: ?>
<div class=”category-products”>
<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount();
?>
<?php $i=0; foreach ($_productCollection as $_product):
?>
<?php if ($i++%$_columnCount==0): ?>
<ul class=”products-grid row”>
<?php endif ?>
<li class=”item<?php if(($i-1)%$_columnCount==0): ?>
first<?php elseif($i%$_columnCount==0): ?> last<?php
endif; ?> col-md-4″> <a href=”<?php echo $_product-
>getProductUrl() ?>” title=”<?php echo $this-
>stripTags($this->getImageLabel($_product, ‘small_image’), null, true)
?>” class=”product- image”><img src=”<?php echo $this-
>helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(250,310);
?>” alt=”<?php echo
$this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” class=”img- responsive img-thumbnail” /></a>
<h3 class=”panel-title product-name”><a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo $this->stripTags($_product->getName(), null, true) ?>”><?php echo $_helper-
>productAttribute($_product,
$_product->getName(), ‘name’) ?></a></h3>
<div class=”pull-left”> <?php echo $this-
>getPriceHtml($_product, true) ?> </div>
<div class=”pull-right”>
<?php if($_product->isSaleable()): ?>
<button type=”button” title=”<?php echo $this-
> (‘Add to Cart’) ?>” class=”btn btn-warning
btn-cart” onclick=”setLocation(‘<?php echo $this-
>getAddToCartUrl($_product) ?>’)”><?php echo
$this-> (‘Add to Cart’) ?></button>
<?php else: ?>
<p class=”btn btn-alert availability out-of- stock”><span><?php echo $this-> (‘Out of stock’)
?></span></p>
<?php endif; ?>
</div>
</li>
<?php if ($i==6) break; ?>
<?php if ($i%$_columnCount==0 || $i==$_collectionSize):
?>
</ul>
<?php endif ?>
<?php endforeach ?>
</div>
<?php endif; ?>
This code is a simplified version of the default file list.phtml used for the products list and grid. I have created this custom file to show you how to use Bootstrap classes to set up the products section correctly. Later, we can use this structure for the category page too.
As you can see from the preceding code, we used the CSS class col-md-4 for the product item so as to be sure it will be correctly displayed with a float:left property in all desktop views and be responsive for small devices.
- Find the category In order to display the products of a specific category, we need to know the category ID; to find the identifier, open the Manage Categories section in the admin account and click on the category that you want to show as featured for your home page. The following screenshot shows exactly where you can grab the category ID:
As you can see from the preceding screenshot, next to the category name on the area to the right, there is the category ID that we are looking for. In this case, Ebook ID: 35.
- Insert the products list block into the CMS home content. Now that you have the template file and the category ID, insert the code into the CMS home page within the following code:
{{block type=”catalog/product_list” category_id=”35″
template=”catalog/product/list-home.phtml”}}
To insert the text above and after the block as shown in the design layout, add the following code to complete the home page:
<div class=”col-md-12″>
<h2>Best e-books of the month <small>and much more…</small>
</h2>
<p class=”lead”>Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Duis mollis,
est non commodo luctus.</p></div>
{{block type=”catalog/product_list” category_id=”35″ template=”catalog/product/list-home.phtml”
column_count=”3″ products_count=”3″}}
<div class=”well”>
<h3>Lorem ipsum dolor sit amet!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. <a href=”#”>Learn More »</a>
</p>
</div>
Remember to change category_id=”35″ with your category ID.
- Customize the
Now, add some CSS code to customize the page style. You don’t need a lot of customization because Bootstrap creates nearly everything for you.
All you need for the moment is the following CSS code that will be useful to customize the products grid page too:
/* Product List */
.products-grid {
list-style-type:none;
margin:0;
padding:0;
}
.products-grid li.item {
margin-bottom: 30px;
}
.products-grid .product-name {
font-size:14px;
min-height:30px;
margin:0;
}
.products-grid .panel-footer {
overflow:hidden;
}
.product-name a {
color:#333;
}
.price-box p {
margin:0;
}
.products-grid .product-image {
margin-bottom:10px;
display:block;
}
Done! The home page is complete.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.