11 min read

Creating A File System

Let us start building a new template for Zen Cart by creating a new folder under includes/templates/. Let us name it Packt (or whatever you like). But remember to use underscore instead of spaces in a long name. Avoid using Book Shop. Instead, use book_shop or BookShop.

  • images’ folder —will contain all the images needed for the template.
  • css’ folder — will contain all the CSS files for the template. It’s better to copy all the files from the includes/templates/template_default/css directory to this css folder.
  • common’ folder — will contain the common files for the template. You may copy the files from the includes/templates/template_default/common folder, and edit those to suit your needs.
  • sideboxes’folder — will contain module-specific sideboxes. Here, you can add new sideboxes, which you are going to use.
  • templates folder — contains page-specific templates. Whenever you want to change a page’s layout, copy the template for that page to this directory and modify it as required.

Information regarding a template is located in the template_info.php file. You need to create a new template_info.php file for the new template. Copy the file called includes/templates/template_default/template_info.php into the new template folder, and then open the template_info.php file in your favorite text editor.

Change the text between each set of single quotes to suit your new template.

 <?php
 $template_name = 'Packt Publishing';
 $template_version = 'Version 1.0';
 $template_author = 'Suhreed Sarkar';
 $template_description = 'This template is designed for Packt Publishing';
 $template_screenshot = '';
 ?>

Remember to keep the single quotes. Your template name does not need to be identical to your folder name, and you can use spaces to make it read well, but it is best to keep them similar. Leave the space between the quotes for the template screenshot field empty for now, as you don’t have one yet.

When you’ve finished, your new file structure should appear as follows:

Zen Cart: E-commerce Application Development

Open your Admin panel and navigate to Tools | Template Selection. Click the Edit button, then choose Packt Publishing from the drop-down menu and click the Update button. Now, navigate to Tools | Layout boxes controller, and click the Reset button at the bottom of the page.

Your new template is now enabled and ready to be customized.

Using Overrides

When building a new template for Zen Cart, you can use its powerful overriding feature. Overriding means using some template as the base and extending it by adding different properties through separate templates. For example, you may want to make some modifications to the default template—template_default. You could modify the files in the template_default directory to do this. But due to its overriding character, you can add the changes in the new template, say packt, which will apply the changes to the shop.

In fact, you can override any file in the path includes/templates/ template_default. Files in this directory generally determine the layout and the HTML formatting of your web pages. By default, Zen Cart has two standard templates: template_default and classic, both of which are located in the includes/templates/ folder.

Out of these two standard templates, only template_default contains a full set of files. Every other template contains only the files that differ from template_default. If your template does not contain a particular file, Zen Cart will pull that file from template_default.

Graphics

You need to add your templates graphics to the appropriate folders. The header image, logo, background image, background image for sidebox headings, and so on should be placed in the images directory under your template directory. If you want to change the buttons and icons, create the graphic files in the GIF, JPG or PNG format and put them in the /includes/templates/template_name/buttons/language_name folder. Then, update the button_names.php file to define the button image file name, and the ALT texts for those images.

Sideboxes

You do not need to copy existing sideboxes from the template_default directory, as these will automatically be displayed. If you are planning to develop a new sidebox, put the template for that sidebox in the sideboxes folder under your template directory.

A sidebox consists of three files, which are located in the includes directory:

  • modules/sideboxes/template_name/name_of_sidebox.php’
  • languages/english/extra_definitions/template_name/ name_of_sidebox_defines.php ‘
  • templates/template_name/sideboxes/tpl_name_of_sidebox.php ‘

You need to replace template_name and name_of_sidebox with you template name and the sidebox name respectively. For example, let us build a sidebox named my_sidebox. Then, my_sidebox.php file will read like this:

 <?php
 $show_my_sidebox = true;
 if ($show_my_sidebox == true){
 require($template->get_template_dir('tpl_my_sidebox.php', 
 DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_my_sidebox.php');
 $title = BOX_HEADING_MY_SIDEBOX;
 $left_corner = false;
 $right_corner = false;
 $right_arrow = false;
 require($template->get_template_dir($column_box_default,
 DIR_WS_TEMPLATE, $current_page_base,'common') . 
 '/' . $column_box_default);
 }
 ?>

This page actually defines what is to be shown in that sidebox. Note that this page also includes the corresponding template file. Here, we have used a constant BOX_HEADING_MY_SIDEBOX. You need to define this in the includes/languages/english/extra_definitions/packt/my_sidebox_defines.php file. This file will look like this:

 <?php
  define('BOX_HEADING_MY_SIDEBOX', 'My Sidebox');
 ?>

Now, you have to build its template file includes/templates/packt/sideboxes/tpl_my_sidebox.php, which will read as:

 <?php
  $content = "This is my first Sidebox. I have created it in 5
 minutes. Although it is not of practical use yet, I 
 hope I can eventually build a good sidebox.";
 ?>

If you have created these files for the packt template, you can try it by going to Tools | Layout Boxes Controller in the administration panel. From here, turn the sidebox ON and set it up to display in the left or the right side column. This sidebox will look like the following figure.

Zen Cart: E-commerce Application Development

Stylesheets

All stylesheets for your new template should be placed in the /includes/templates/template_name/css folder. You should follow stylesheet naming conventions. It is a good idea to copy an old stylesheet and then modify it to suit your needs. You can have multiple stylesheets for your shop you can even add a stylesheet for each page.

As a design rule, try to keep the declarations minimal, simple, and self explanatory. Try to restrain yourself from changing the class and ID names in the core files.

Creating and Modifying Email Templates

As a store owner, you need to send several mails to your existing and potential customers. All these emails use some templates that reside in the /email folder under the Zen Cart installation directory. To change these emails to your style, you may edit these templates.

The email’s structure is determined in one of two ways. If you are sending plain text emails, the email structure is determined by the way you put together the various items (customer greeting, order number, link to detailed invoice, and so on) in a string variable that is then passed to the zen_mail() function. If you are sending HTML emails, the structure is determined by the template you use.

Text Email Template

You can rearrange, add, or delete items in a plain text email. To do so, you will need to edit the Zen Cart files where the email is created. For example, if you want to edit the order confirmation email, you will need to edit the file includes/classes/order.php.

In your example, open up includes/classes/order.php and scroll down to the bottom of the file, in the function send_order_email(). There, you will see the lines that construct the plain text email message:

[Line 827]
$email_order = EMAIL_TEXT_HEADER . EMAIL_TEXT_FROM . STORE_NAME . "n
n" . $this->customer['firstname'] . ' ' . $this->customer['lastname'] 
. "nn" . EMAIL_THANKS_FOR_SHOPPING . "n" . EMAIL_DETAILS_FOLLOW 
. "n" . EMAIL_SEPARATOR . "n" . EMAIL_TEXT_ORDER_NUMBER . ' ' . 
$zf_insert_id . "n" . EMAIL_TEXT_DATE_ORDERED . ' ' . strftime(DATE_
FORMAT_LONG) . "n" . EMAIL_TEXT_INVOICE_URL . ' ' . zen_href_
link(FILENAME_ACCOUNT_HISTORY_INFO, 'order_id=' . $zf_insert_id, 'SSL' 
[Line 848]
$email_order .= zen_db_output($this->info['comments']) . "nn";
[Line 855]
$email_order .= EMAIL_TEXT_PRODUCTS . "n" .
                        EMAIL_SEPARATOR . "n" .
                        $this->products_ordered .
                        EMAIL_SEPARATOR . "n";

In this file, the variable that holds the plain text email message is called $email_order. It generally has a different name in each file, such as $email or $email_text. Whatever its name, this is the place where you will make your changes. You can add, delete, and rearrange the order of the items to suit your wishes.

HTML Email Templates

HTML Email templates have two parts: embedded CSS and HTML codes. You may be surprised to see the embedded stylesheet in each mail template, and may want to know why linked stylesheets have not been used. One reason for not using the linked stylesheet is that you may not know how the email clients will behave. Most email clients used today can handle HTML emails and stylesheets to some extent. But there is no guarantee that every customer will have an email client that can retrieve linked stylesheets and render the emails in the desired format.

Stylesheets

The first portion of the email template is devoted to defining styles for different parts of the mail. Open the /email/email_template_welcome.html file in your favorite text editor to examine the stylesheet in an email template. The stylesheet in this template will appear as follows:

<style type="text/css">
.body {background-color:#ffffff; color:#000000; font-family:Verdana,    
Arial, Helvetica, sans-serif;}
...
.header {font-size:10px; padding:0px; width:550px;}
.content {font-size:10px; padding:5px; width:550px;}
.content-line {padding:5px;}
.coupon-block { padding: 5px; border: 1px #cccccc solid; background-
color: #FFFF99; }
...
.disclaimer1 a:link {color:#666666;}
.disclaimer1 a:visited {color:#666666;}
.disclaimer2 { color: #666666; padding: 5px; }
.copyright { border-bottom: 0px #9a9a9a solid; padding: 5px; }
</style>

Style declarations in this stylesheet are straight-forward. First, it has defined style for the body and hyperlinks. Then, it defines the content and email related styles. Most of the style names are self-explanatory. You will find the HTML blocks with these names in the template.

HTML with variables

The main part of the email template is the HTML code with style classes and variables. The following are some of the variables used to construct content for the email:

  • $EMAIL_GREETING
  • $EMAIL_WELCOME
  • $COUPON_BLOCK
  • $GV_BLOCK
  • $EMAIL_MESSAGE_HTML
  • $EMAIL_CONTACT_OWNER
  • $EMAIL_CLOSURE
  • $EMAIL_FOOTER_COPYRIGHT
  • $EMAIL_DISCLAIMER
  • $EMAIL_SPAM_DISCLAIMER
  • $EXTRA_INFO

These variables are defined in several PHP files, such as create_account.php. Once you have found the files that need to be edited, you may want to add a definition for your new HTML item to each one. For example, you have added an item called $EMAIL_HOURS_OF_OPERATION to the email_template_order_status.html template. One of the files that you will need to edit is admin/orders.php. Find the part of that file where the email message is being constructed. In this case, it begins around line 100.

You can see that the HTML message is constructed with several statements such as:

$html_msg['EMAIL_CUSTOMERS_NAME'] = $check_status->fields['customers_name'];
$html_msg['EMAIL_TEXT_ORDER_NUMBER'] = EMAIL_TEXT_ORDER_NUMBER . ' ' . $oID;

All you need to do is add a new statement under all of these, to define your new item:

$html_msg['EMAIL_HOURS_OF_OPERATION'] = 'We are open from 9 AM to 5 PM
every day of the week.';

Use a $ in front of the name of your new item in the HTML template, but do not use the $ where you define it.

To change the text displayed in your emails, edit the corresponding language file. You can change an existing text, or add a new one (if you’ve added it to your email structure). You add or change text values using the define() statements:

define(EMAIL_LOVELY_YOU_DROPPED_BY,'We are just so immeasurably 
delighted that you stopped by our store today!');

There is another language file you need to modify when altering text for your emails, includes/languages/english/email_extras.php. This file contains several text strings common to all emails sent from your store.

Summary

Thus we have seen how to create new template using Zen Cart.

 

If you have read this article you may be interested to view :

 

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here