I’m on chapter 3 of my book, and you’ve stumble upon my notes! So far, I have made a custom theme, brought in bootstrap js and css, create the main theme templates, and created blocks and cms-blocks. Now I’m on chapter three, its time to get a groovy looking front page:
as it will look by the end of chapter 3
As you can see, there’s a slider row, and we’ll have some more cms blocks for the carousel, banners, and home page proper.
Slider
First up, lets create the slider row. In the admin panel, goto CMS > Static Blocks, and add a block called Home Block Full width, labelled home-fullwidth:
<div class="row">
<div class="col-md-8">
{{block type="cms/block" block_id="slider-home" template="cms/content.phtml"}}
</div>
<div class="col-md-4">
{{block type="cms/block" block_id="home-right-banner" template="cms/content.phtml"}}
</div>
</div>
Using the {{ blahblah }} puts the CMS blocks in place. Now we add the slider-home cms block:
<div data-ride="carousel" class="carousel slide" id="slider-home">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#slider-home"></li>
<li data-slide-to="1" data-target="#slider-home" class="active"></li>
<li data-slide-to="2" data-target="#slider-home" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="{{skin_url='images/slide1.png'}}" alt="Slide 1 Alt Text">
</div>
<div class="item active">
<img src="{{skin_url='images/slide1.png'}}" alt="Slide 2 Alt Text">
</div>
<div class="item">
<img src="{{skin_url='images/slide1.png'}}" alt="Slide 3 Alt Text">
</div>
</div>
<a data-slide="prev" href="#slider-home" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" href="#slider-home" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The {{skin_url}} stuff is like the XML config. It looks in the public folder for that theme for images, css, and javascript.
The 3 banners next to the slider go in cms block home-right-banner :
In the Admin panel, click through to CMS Pages, you’ll see home page is already there. Click on it, and in the content tab, stick some placeholder text (I like Zombie Ipsum!) and in the design tab switch layout to 2 columns with left bar.
Earlier in my previous post we made CMS block home-fullwidth (a bootstrap row with two columns). However, if we added that CMS block to our Home Page, it would come out wrong, as it’ll appear in the right hand column of the layout. To sort that, we add a thing called a reference block. We add another bit of config to /app/design/frontend/bookstore/default/layout/local.xml, in the section <reference name=”root”> :
<!-- define the reference block slider -->
<block type="core/text_list" name="slider" as="slider" translate="label">
<label>Slider Block</label>
</block>
Now if you open your template files (in app/design/frontend/bookstore/default/ template/page), you would see we already added the following:
<section id="after-header">
<div class="container">
<?= $this->getChildHtml('slider') ?>
</div>
</section>
So all we need to do to is update the layout XML and tell the slider block which cms blocks to load in:
<reference name="slider">
<block type="cms/block" name="home-fullwidth" as="home-fullwidth">
<action method="setBlockId">
<block_id>home-fullwidth</block_id>
</action>
</block>
</reference>
Bob is now your uncle. If you refresh, you’ll see our slider and right panel 🙂
Again, it looks better styled:
/* Carousel */
#after-header {
background-color: #efefef;
}
#slider-home {
text-align:center;
padding:40px 0;
}
#slider-home .carousel-control.right,#slider-home .carousel-control.
left {
background:none;
}
#slider-home .carousel-indicators {
bottom:20px;
left:0;
margin:0;
text-align:left;
}
/* Carousel Bullets */
.carousel-indicators li {
border:0;
background-color:#333;
}
.carousel-indicators li:hover {
background:#41b7d8;
}
#slider-home .carousel-indicators .active {
background:#f37541;
border-color:#f37541;
}
/* 3 Banners */
#banner-home {
}
#banner-home div {
color:#FFF;
height:85px;
margin:25px 0;
padding:15px;
background: #ddd;
}
#banner-home h3 {
font-size:20px;
margin:0;
padding:0;
}
/* Text Banners Background Colors */
#banner-home div.bg-orange {
background:#f89223;
}
#banner-home div.bg-cyan {
background:#41b7d8;
}
#banner-home div.bg-darkgrey {
background:#333;
}
Main content Row
You’ll notice in the main content left bar that it’s displaying some placeholder text with a 555 nphone number. This is a default template coming from the base theme. Again we need to put some remove tags in our xml file. To find these when you are working away, look in the base/default/layout xml files to find the name of the blocks you want: In our <reference name=”left”> section:
<reference name="left">
<remove name="left.newsletter"/>
<remove name="left.permanent.callout"/>
<remove name="tags_popular"/>
</reference>
Ok we need our vertical Nav menu on the left. Create a new block again in the left reference:
<block type="catalog/navigation" before="-" name="leftNav" as="leftNav" template="catalog/navigation/leftnav.phtml"/>
Create the catalog/navigation/leftnav.phtml in your template folder.
<div class="block block-leftnav">
<div class="block-title">
<strong><?= $this->__('Browse Category'); ?></strong>
</div>
<div class="block-content">
<ul>
<?php foreach ($this->getStoreCategories() as $_category) {
if($_category->name!=""){
echo $this->drawItem($_category);
}
} ?>
</ul>
</div>
</div>
Again, adding CSS:
/* Left Menu */
.block-leftnav {
margin-top: 35px;
}
.block-leftnav .block-title {
font-size: 16px;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 10px;
}
.block-leftnav .block-content {
}
.block-leftnav .block-content ul {
padding: 0;
list-style-position: inside;
}
.block-leftnav .block-content ul li {
}
.block-leftnav .block-content ul li.active {
background: #333;
color: #fff;
padding-left: 10px;
}
.block-leftnav .block-content ul li.active a {
color: #FA9221;
}
.block-leftnav .block-content ul li a {
font-size: 13px;
color: #333
}
.block-leftnav .block-content ul li a:hover {
color: #FA9221;
}
.block-leftnav .block-content > ul > li.level0 {
border-bottom: 1px solid #E1E1E1;
padding: 10px;
}
.block-leftnav .block-content > ul > li.level0:last-child {
border-bottom: 0;
}
.block-leftnav .block-content > ul > li.level0:hover {
background-color: #efefef
}
.block-leftnav .block-content > ul > li.level0 > a {
font-weight: bold;
}
.block-leftnav .block-content ul ul {
padding-left: 15px;
}
.block-leftnav .block-content ul ul ul a {
color: #999
}
Main content
Our main content has placeholder text so far. We want some text at the top, a block of products from a particular category, and a block of text information for each product. Create default/template/catalog/product/list-home.phtml
<?php
$collection = $this->getLoadedProductCollection();
$helper = $this->helper('catalog/output');
if (!$collection->count()){ ?>
<p class="note-msg"><?= $this->__('There are no products matching the selection.') ?></p>
<?php } else { ?>
<div class="category-products">
<?php
$count = $collection->count() ;
$columns = $this->getColumnCount();
$i = 0;
foreach ($collection as $_product) {
if ($i++ % $columns == 0) { ?>
<ul class="products-grid row">
<?php } ?>
<li class="item<?php if (($i - 1) % $columns == 0) { ?>first<?php } elseif ($i % $columns == 0) { ?> last<?php } ?> col-md-4">
<a href="<?= $_product->getProductUrl() ?>"
title="<?= $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
class="product-image">
<img src="<?= $this->helper('catalog/image')->init($_product, 'small_image')->resize(250, 310); ?>"
alt="<?= $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
class="img-responsive img-thumbnail"/>
</a>
<h3 class="panel-title product-name">
<a href="<?= $_product->getProductUrl() ?>"
title="<?= $this->stripTags($_product->getName(), null, true); ?>">
<?= $helper->productAttribute($_product, $_product->getName(), 'name') ?>
</a>
</h3>
<div class="pull-left"> <?= $this->getPriceHtml($_product, true) ?> </div>
<div class="pull-right">
<?php if ($_product->isSaleable()) { ?>
<button type="button" title="<?= $this->__('Add to Cart') ?>"
class="btn btn-warning btn-cart"
onclick="setLocation('<?= $this->getAddToCartUrl($_product) ?>')">
<?= $this->__('Add to Cart') ?>
</button>
<?php } else { ?>
<p class="btn btn-alert availability out-of-stock"><span><?= $this->__('Out of stock'); ?></span></p>
<?php } ?>
</div>
</li>
<?php if ($i == 6) {break;}
if ($i % $columns == 0 || $i == $count){?> </ul> <?php } ?>
<?php } ?>
</div>
<?php }
Ok, if you havent played around in the admin panel and created some categories and products, now is the time to do it! Catalog > Manage Categories, & Catalog > Manage Products. Create Books as a subcategory of the default category. Add some subcategories, Fiction, Reference etc!
Add a few products too. Remember to set the categories it will appear in, and set the stock levels to more than zero! Click around, you’ll find it! Anyway, click the book category, and make a note of the ID number. (mine said ‘Books (ID: 3)’). We want to bung the products list block into our CMS home content. Add this to it:
{{block type="catalog/product_list" category_id="3" template="catalog/product/list-home.phtml"}}
And of course, style it:
/* 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;
}
Job done, our home page is complete!
Other Pages
Category
Apply these techniques and you’ll be able to customise any other blocks in your theme. Take the products grid for example. Turn on the developer config for template path hints. Now go to the home page. Click on the books category. You will see the main products grid looks crap, but you can see that it comes from frontend/base/default/template/catalog/product/list.phtml . Create that file in your theme. Now if you nose into the base themes catalog.xml, you’ll see various blocks defined etc. The products category page has two handles, <catalog_category_default translate=”label”> and <catalog_category_layered translate=”label”>. Layered refers to layered navigation. To use layered navigation, we need to set the Category setting Is Anchor to Yes. You can find that in the Category Display Settings.
To set the default category view to a one column layout, add this in your XML :
<catalog_category_default>
<reference name="root">
<action method="setTemplate">
<template>page/1column.phtml</template>
</action>
</reference>
</catalog_category_default>
And we’ll set a 2 column layout for the ‘layered’ categories:
<catalog_category_layered>
<reference name="root">
<action method="setTemplate">
<template>page/2columns-right.phtml</template>
</action>
</reference>
</catalog_category_layered>
Now the thing with this is, the 2 columns right template doesnt have a leftnav section, but we have a right section. So we add the following to the catalog_category_layered XML:
<catalog_category_layered>
<reference name="root">
<action method="setTemplate">
<template>page/2columns-right.phtml</template>
</action>
</reference>
<reference name="right">
<block type="catalog/layer_view" name="catalog.leftnav" after="currency" template="catalog/layer/view.phtml" before="-"/>
</reference>
</catalog_category_layered>
Copy the code from the base layouts, and tweak with your bootstrap classes etc, and style, you dont need me to tell you how dto do that part!
Product
Again looking at the template paths, you’ll find it in app/design/frontend/base/default/template/catalog/product/view.phtml and the layout handle is <catalog_product_view>. I’m setting it to a one column layout:
<catalog_product_view>
<reference name="root">
<action method="setTemplate">
<template>page/1column.phtml</template></action>
</reference>
</catalog_product_view>
The rest
Cart page.
app/design/frontend/
base/default/template/
checkout/cart.phtml
Login Area.
app/design/frontend/
base/default/template/
customer/form/login.
phtml
<customer_account_login>
The user account registration page
app/design/frontend/
base/default/template/
customer/form/register.
phtml
<customer_account_create>
By now you should have the idea! Get tweaking!
