Glossary Item Box

Squirrelcart v6.1.0

Templates - Overview

Overview

Squirrelcart uses template files to allow you to customize the appearance of your store. Each template file controls a certain aspect of the store. For example, the product_thumbnail template controls the appearance of a single product, when a customer clicks on it's category.

Template files are stored within theme folders, and are one of the main components that make up a theme. Template file names always end in .tpl.php, as in product_thumbnail.tpl.php.

Modifying template files requires knowledge of HTML. We also recommend that you learn CSS if you don't already know it.

 

How Squirrelcart Chooses Which Template File to Display

The theme named Squirrelcart is considered the master theme. It's corresponding folder is at the following path:

squirrelcart/themes/squirrelcart

For this example, let's assume you've created a custom theme called MyStore, with a corresponding folder of squirrelcart/themes/mystore. You've also set the custom theme as the default theme for your store. Squirrelcart will make use of several template files for each page load. The template files utilized for each page depend on what was clicked on in your storefront.

When Squirrelcart needs a template file, it first looks in your default theme folder for it. If it does not find the template file in that folder, it then uses the one in the master theme folder. This has been designed this way to make your life easier as a designer. Squirrelcart follows this same logic when determining which image file to display. Here are the benefits of this approach:

Template PHP Code

Templates in Squirrelcart are PHP files. They contain HTML, with some PHP mixed in only for the purposes of outputting information that varies. You don't need to know PHP in order to customize Squirrelcart, but we recommend you read this section to familiarize yourself with some of the PHP we use so you can identify what it does. You can spot PHP code in templates by the opening and closing PHP tags:

<?php ?>

If you see PHP code in your templates and don't know what it's for, we recommend you leave that PHP unmodified. You can certainly modify any HTML you see as you normally would in any HTML page.

This section will explain some of the PHP code you may see in your template files.

Template Header

At the top of almost every template file you will find this code:

<?php /* This line prevents direct access to template. Don't remove it. */ if (!defined('SC_INCLUDE_OK')) die; ?>

<!-- Template: <?php print basename(__FILE__) ?> -->

The first line is very important and should not be moved or altered. It ensures that code in the template file is only parsed (processed by PHP on your server) when it was directly requested by Squirrelcart. This is a security precaution.

The second line will print an HTML comment tag to the browser to help you locate the template file:

<!-- Template: product_detail -->

Variables

Squirrelcart uses PHP variables to output data:

<strong>First Name: </strong><?php print $First_Name ?><br/>

 

The example above includes some HTML (<strong /> and <br/> tags). It also includes a section of PHP beginning with <? and ending with ?>. That section of PHP is used to print the value of the variable named $First_Name to the HTML source code. When sent to the browser, this HTML could look something like this:

<strong>First Name: </strong>Thomas<br/>

 

IF statements

If statements may appear in some templates. They surround code that will only be sent to the browser when the IF statement is true. For example, this IF statement in the product_detail.tpl.php template file causes the HTML that displays a product's price to only be sent to the browser when the product has a price configured on its product record:

<?php if ($Base_Price): ?>
     <div class="prod_price">
          <?php print $Price_Label?>
          <?php print sc_price($Base_Price) ?>
     </div>
<?php endif; ?>

FOREACH statements

A foreach statement is used to loop through a set of things and do something with them. In Squirrelcart's case, we use foreach statements in templates when we need to print out HTML for more than one thing. For example, suppose we have some information for a few products stored in a variable named $Products. We may loop through them in a template file like this:

<div class="products">
     <?php foreach($Products as $Product): ?>
          <strong>Product name is: </strong> <?php print $Product['Name'] ?><br/>
     <?php endforeach; ?>
</div>

The resulting HTML sent to the browser would then be something like this:

<div class="products">
     <strong>Product name is: </strong> 19 Inch LCD Monitor<br/>
     <strong>Product name is: </strong> 20 Inch LCD Monitor<br/>
     <strong>Product name is: </strong> 24 Inch LCD Monitor<br/>
</
div>

 

 

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.