Design considerations and assumptions
When designing a new theme, it is important to keep in mind what elements are available to you as a designer from the Web Store system. Also, many settings are provided to the end user which may affect your theme display. To prevent making erroneous assumptions, this document will outline features that can be changed so you can plan accordingly.
If you have not already, you should view the options under Admin Panel under Store Settings > Display Options. These options are available to all customers and will affect your theme. Among the options are:
You cannot assume that your custom landing page (such as site/index.php) will be used by 100% of the customers. The customer can change the site to use the product grid, or any of their custom pages as the default home page. Of course a great presentation page is possible, just as long as you aren't incorporating a feature that assumes all customers will see it or will enter the site through it.
The customer can change how many products are displayed on the grid. These settings are used to create <div> tags for each row and also in the view file itself such as in /search/grid.php (used for any output that uses the grid, not just search -- it's a bit of a Web Store quirk).
In Brooklyn's version of this file, note we have code such as...
echo CHtml::tag('div',array(
'class'=>'product_cell span'.(12/$this->gridProductsPerRow)),…which uses the "12 wide" columns of Twitter's Bootstrap (version 2) and calculates how many columns are to be used for each product cell. (This is also the reason that the dropdown in Admin Panel offers the user the choice of 1,2,3,4 or 6 wide. 5 is deliberately skipped since 5 doesn't divide into 12 evenly).
The user can also set the number of products per page which affects the <div> tags that are created (to make sure rows are closed properly). In the future, the shopper may have control to dynamically adjust this but we don't have a way to pass this value quite yet.
Customers can enable displaying the original and sale price with the original price slashed (via <strike>). The regular and slashed price use the CSS classes product_cell_price and product_cell_price_slash respectively. Make sure you test with some slashed product turned on since this may make the price fields longer than you expect.
Slashed Prices are not available in Cloud.
As a designer, you can place the Menu in many locations, such as on the left in a multi-column setup or as a products dropdown like it appears in the Brooklyn default template.
Yii uses CMenu for this and there is a built-in function to get the Category Tree. In its simplest form, you can output a menu of categories as:
$this->widget('zii.widgets.CMenu',array(
'id'=>'menu',
'items'=>$this->MenuTree
));The customer can also activate displaying Families (aka Brands) at the top or bottom of the menu, or even blending the options into the regular category tree.
For the products detail page (/views/products/index.php) the customer can enable a Qty entry blank, allowing the shopper to enter a qty amount freeform. When this is turned off, the Add To Cart simply adds a quantity of 1 to the cart. When enabled, the Add To Cart (as well as Add To Wish List) will read the value of this field. Make sure your design handles this when enabled.
For the products detail page (/views/products/index.php) the customer can enable showing the Product Code, as well as the Family (Brand), and Sharing Tools by turning on/off options in Admin Panel. Check the page /views/products/index.php and you can see where tests for these keys are made.
Admin Panel contains a feature to designate a specific tag as a Featured Product tag. Products that match this tag will normally display on the product grid (when set as home page) in lieu of the normal product query.
If you wish to pull featured products for your own purposes, such as on a custom site/index.php page or other purpose, you can use the following code snippet
$objProducts = Product::model()->findAllByAttributes(
array('featured'=>'1','web'=>'1','master_model'=>0)
);This allows you to loop through the featured products (perhaps exiting after the first few since there may be many), and you can grab an image for any since they are objects from the system already.
foreach ($objProducts as $objProduct)
{
$arrImages = $objProduct->Images;
if (isset($arrImages[0]))
echo CHtml::image(Yii::app()->baseUrl."/images/".$objProduct->Images[0]['image_large'],
$objProduct->Images[0]['image_alt']);
else echo CHtml::image(Yii::app()->baseUrl."/images/".$objProduct->Images['image_large'],
$objProduct->Images['image_alt']);
}Customers have the ability to upload their own header image. Our current documentation has a max size of 750x100 but this may be smaller for many customers (or slightly larger in some cases).
The header image is normally used for the company name/logo and is part of the wraparound. The display code in the default version is in /site/_header.php and looks like:
<div id="headerimage">
<?php echo CHtml::link(CHtml::image($this->pageHeaderImage),$this->createUrl("site/index")); ?>
</div>