How to template your EasyShop

Category:   Blog | Author:   nlstart

What exactly is a template?

In general in e107 everything but the design is templated e.g. downloads area, links, login search etc. have templates in the e107_themes/templates folder. However some plugins e.g. forum, chat, content manager have templates of their own which are all standardized so if you change themes they display the same.
You can copy any of the templates to your theme folder and modify them to change the look of your site. e107 looks in the theme folder and if it sees a template it uses that instead of the core one so you can make your site as individual as you like without any of your work getting overwritten by future updates.

The templates generally consist of tables to control the layout of a page - take for example Lamb theme which has a news_template.php file which simply splits the news into 2 columns - you can copy that into most themes to get the same effect.
So in short, a template means that you can influence the order of presented information, or style it the way you want.

Preparation

As a preparation, it is good spend a little time to select a good ASCII editor. There are a lot of open source editors available. In this example I used Notepad++.
The editor will make sure that your template file does not contain a BOM or Byte Order Mark. Otherwise your template will not be visible when viewing in Unicode UTF-8 mode and may result in a blank screen. If you see characters like  , they need to be deleted. For instance, Notepad creates a BOM by default when saving as UTF-8, try removing the  with an ASCII php editor.

Some sources where to get your copy of a proper ASCII editor:
*For Windows users: Notepad++
*For Windows users: PSPad
*For Windows users: BabelPad
*For Windows users: LightPHPedit
*For Windows users: Notepad2
*For Apple users: Xcode

Let's template!

For EasyShop for example, the default header or footer for the shop is defined in $ES_STORE_CONTAINER and creates two columns with address details on the left and the shop welcome message on the right. If you would like to swap them around, add a background image etc. that's now all possible from your custom made template. Here is a demonstration on how it is done.

First off all, let's copy the e107_plugin/easyshop/templates/easyshop_template.php to our theme folder (in this example I use default theme e107v4a):
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews1.png

If there is a template available in the theme folder, the EasyShop plugin will use it. If there is no easyshop_template.php found in your theme folder, the default template e107_plugins/easyshop/templates/easyshop_template.php will be used.

When doing nothing, after setting up a very simple shop my shop with two categories will look like this:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews2.png

Let's suppose we want to switch the shop address and the shop welcome text. In a proper editor you can change the $ES_STORE_CONTAINER as follows:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews3.png

As you can see I have changed the welcome message to the left table column and the address to the right column. After saving it and viewing the shop again it will look like this:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews4.png

Suppose furthermore I want to simplify the address block. I want to get rid of the second street name, the state, the country and the e-mail address. I change my layout to:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews5.png

Also, I must add a proper line feed for the address, add a space character between the zip code and the city and remove the additional break before the city (see the little green indicators for the lines I changed):
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews6.png

For instance, in The Netherlands the zip code will be written before the name of the city (and that's exactly what I've been demonstrating in this example).
Applying the above; my shop will now look as I want to:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews7.png

to top it off, I will change the background a bit by changing the the wrapping div:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews8.png

The background of the shop header will now have changed to orange:
Image: http://e107.webstartinternet.com/images/newspost_images/easyshopnews9.png

Of course you could easily change the background color attribute with a background image instead.
In a similar way but even more rewarding is to change the look of your (main) categories or products!

Happy templating!
nlstart

 printer friendly create pdf of this news item