As you can see from the next screenshot, in the main content, we want to display the following points:
First, we are going to develop the main block, which contains the products grid. Afterwards, we are going to insert the remaining text blocks.
To display some products of a specific category in a CMS page, we need to perform the following steps:
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 noproducts 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<?phpendif; ?> 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="<?phpecho $_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>0 <?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.
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.
{{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 laoreetrutrum 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>
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; }
3.133.114.221