Storefront - Main Template

Overview

This page describes the templates involved in generating the storefront page. When using the default master squirrelcart theme, that page looks something like this:

storefront

Several templates are involved in generating your storefront, depending on the page being viewed. This page discusses the main template that controls the overall appearance of all pages in your storefront.

Primary template file - store_main.tpl.php

Template Overview

The template file store_main.tpl.php is the most important template in Squirrelcart. It controls the overall layout of your storefront.

Code Details

We will discuss some of the code that you will find in this template below. HTML knowledge is needed to understand this section. Note the line numbers, which will be referenced below this example block of code:

1: <?php /* This line prevents direct access to template. Don't remove it. */ if (!defined('SC_INCLUDE_OK')) die; ?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head>
5:      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6:      <meta name="title" content="<?php print $Title ?>" />
7:      <meta name="keywords" content="<?php print $Keywords ?>" />
8:      <meta name="description" content="<?php print $Description ?>" />
9:      <title><?php print $Title ?></title>
10:      <?php print $SC_header ?>
11: </head>
12:
13: <body onload="scOnLoad()">
14: 
15:
16: <div id="sc" class="cols<?php print $num_columns?>">
17:
18:      <div id="sc_logo">
19:           <a href="<?php print $Storefront_Home_URL ?>">
20:                <img src="<?php print $Logo_Image['dyn'] ?>" alt="<?php print $Logo_Image['alt'] ?>" width="<?php print $Logo_Image['width'] ?>" height="<?php print 20: $Logo_Image['height'] ?>" />
21:           </a>
22:      </div>
23:
24:      <div id="sc_inner">
25:           
26:           <?php if (sc_nav('Primary')): ?>
27:                <div id="sc_col1">
28:                     <?php
29:                          // Left Navigation section
30:                          print sc_nav('Primary');
31:                     ?>
32:                </div>
33:           <?php endif; ?>
34:
35:           
36:           <div id="sc_main">
37:                <?php print $Cart_Content; ?>
38:           </div>
39:
40:           
41:           <?php if (sc_nav('Secondary')): ?>
42:                <div id="sc_col2">
43:                     <?php
44:                          // Right Navigation section
45:                          print sc_nav('Secondary');
46:                     ?>
47:                </div>
48:           <?php endif; ?>
49:
50:           <div id="sc_footer">
51:                <?php
52:                     // This is a link back to Squirrelcart.com. You can change the appearance of the link on the Visual Settings page in the control panel
53:                     squirrelcart_link();
54:                ?>
55:                
56:                <?php if ($Show_W3C_Links):?>
57:                     <p id="sc_w3c">
58:                          <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Transitional - click to validate">
59:                               <img src="<?php print $W3C_XHTML_Image['dyn'] ?>" width="<?php print $W3C_XHTML_Image['width'] ?>" height="<?php print $W3C_XHTML_Image['height'] ?>" alt="Valid XHTML 1.0 Transitional" />
60:                          </a>
61:                          <a href="http://jigsaw.w3.org/css-validator/validator?uri=<?php print urlencode(SC_REQUEST_URL) ?>" title="Valid CSS 2.1 - click to validate">
62:                               <img src="<?php print $W3C_CSS_Image['dyn'] ?>" width="<?php print $W3C_CSS_Image['width'] ?>" height="<?php print $W3C_CSS_Image['height'] ?>" alt="Valid CSS!" />
63:                          </a>
64:                     </p>
65:                <?php endif; ?>
66:           </div>
67:      </div>
68: </div>
69: </body>
70: </html>

Line by Line Code Explanation

This section explains some of the lines shown above. We do not cover some of the more basic HTML tags. Only code specific to Squirrelcart is discussed.

Line #1:

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

This ensures that this file is only included by Squirrelcart, and is a security precaution. It appears at the top of all template files.

Line #2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is a document type delcaration - it ensures browsers know what type of page this is. We recommend that you do not change or remove this line.

Line #3:

This is your typical HTML tag. It has an xmlns attribute, which is required for the XHTML 1.0 Transitional doctype.

Lines #6 - 9:

The values for these tags vary based on the page being viewed in Squirrelcart. For more information, see the Configuration > Search Engine Settings topic in this documentation.

Line #10:

<?php print $SC_header ?>

The $SC_header variable is printed in this line. This is used to insert any additional <head/> tag code needed by Squirrelcart. The HTML that this inserts can vary based on the page being viewed. It will include <link /> tags for CSS stylesheets, and <script /> tags for Javascript.

Line #13:

This is your typical body tag, with an onload attribute set to scOnLoad(). This Javascript function handles running storefront specific Javascript after the page loads. Javascript is used minimally in Squirrelcart's storefront, and when it is used - it's done so that it will deprecate when a customer does not have Javascript enabled.

Line #14:

This line appears in all templates. In most templates, you'll find it at the top of the page. In this one, it's placed after the body tag. It outputs an HTML comment to make it easiery to locate the template file by viewing the source code. Example:

Line #16:

This box defined by this div is the boundary for the entire layout of the storefront page in the master squirrelcart theme.

Lines #18 - 22:

<div id="sc_logo">
     <a href="<?php print $Storefront_Home_URL ?>">
          <img src="<?php print $Logo_Image['dyn'] ?>" alt="<?php print $Logo_Image['alt'] ?>" width="<?php print $Logo_Image['width'] ?>" height="<?php print 20: $Logo_Image['height'] ?>" />
     </a>
</div>

This box contains your store logo. The image for that logo can be changed in your control panel (see the How to Customize Guide topic). This div can also be used as a header, to place additional HTML at the top of your storefront.

Lines #25 - 33:

25:           
26:           <?php if (sc_nav('Primary')): ?>
27:                <div id="sc_col1">
28:                     <?php
29:                          // Left Navigation section
30:                          print sc_nav('Primary');
31:                     ?>
32:                </div>
33:           <?php endif; ?>

This section of code displays the Navigation Blocks associated with this theme that are assigned to the "Primary" navigation section. This is explained in more detail in the Navigation Blocks topic in this section. Line #26 checks to make sure that the theme is configured to show a primary navigation. Line #30 actually outputs the HTML for that primary navigation. In the default squirrelcart theme, the primary navigation is on the left hand side of the page:

primary nav

Lines #35 - 38:

<div id="sc_main">
<?php print $Cart_Content; ?>
</div>

This controls the content in the center area of the page.

content area

The content in this area varies based on the page you are currently viewing.

Lines #40 - 48:

40:           
41:           <?php if (sc_nav('Secondary')): ?>
42:                <div id="sc_col2">
43:                     <?php
44:                          // Right Navigation section
45:                          print sc_nav('Secondary');
46:                     ?>
47:                </div>
48:           <?php endif; ?>

This section of code displays the Navigation Blocks associated with this theme that are assigned to the "Secondary" navigation section. This is explained in more detail in the Navigation Blocks topic in this section. Line #41 checks to make sure that the theme is configured to show a secondary navigation. Line #45 actually outputs the HTML for that secondary navigation. In the default squirrelcart theme, the secondary navigation is on the right hand side of the page:

secondary nav

Line #50:

This is the start of the footer at the bottom of the page.

Lines #51 - 54:

<?php
// This is a link back to Squirrelcart.com. You can change the appearance of the link on the Visual Settings page in the control panel
squirrelcart_link();
?>

This outputs a link back to Squirrelcart.com in your footer, which by default reads "Powered by Squirrelcart PHP Shopping Cart Software". You can change this link on the Visual Settings page in your control panel, to use a small image or no link at all.

Lines #55 - 65:

<?php if ($Show_W3C_Links):?>
     <p id="sc_w3c">
          <a href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Transitional - click to validate">
               <img src="<?php print $W3C_XHTML_Image['dyn'] ?>" width="<?php print $W3C_XHTML_Image['width'] ?>" height="<?php print $W3C_XHTML_Image['height'] ?>" alt="Valid XHTML 1.0 Transitional" />
          </a>
          <a href="http://jigsaw.w3.org/css-validator/validator?uri=<?php print urlencode(SC_REQUEST_URL) ?>" title="Valid CSS 2.1 - click to validate">
               <img src="<?php print $W3C_CSS_Image['dyn'] ?>" width="<?php print $W3C_CSS_Image['width'] ?>" height="<?php print $W3C_CSS_Image['height'] ?>" alt="Valid CSS!" />
          </a>
     </p>
<?php endif; ?>

This section is used to display links in your footer, indicating that your website complies with the XHTML 1.0 Transitional and CSS 2.1 web standards:

W3C links

Those links can be clicked to validate your XHTML and CSS. If you would like to remove these links, uncheck the Show W3C Links field on your store's Visual Settings page.