Glossary Item Box

Squirrelcart v6.1.0

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:

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.

The code below is accurate as of Squirrelcart version 5.5.0. Please keep in mind this is just an example and is subject to change. If you are running a newer version of Squirrelcart your code may differ.

Code Details


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

2
<!DOCTYPE html>

3
<html<?php print $HTML_Attributes?>>

4
    <head>

5
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

6
        <title><?php print $Title ?></title>

7
        <meta name="description" content="<?php print $Description ?>" />

8
        <?php if ($Keywords):?><meta name="keywords" content="<?php print $Keywords ?>" /><?php endif;?> 

9
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10" />

10
        <?php print $SC_meta ?>

11
        <?php print $SC_css ?>

12
        <?php print $SC_js ?>

13
    </head>

14
    <body class="<?php print $SC_Body_Classes?>">

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

16
        <div id="sc" class="<?php print $SC_Classes ?> btn_wait_toggle">

17
            <?php print $Header_Outside ?>

18
            <div id="sc_outer" class="sc_section">

19
                <?php print $Header_Inside ?>

20
                <div id="sc_inner" class="<?php print $SC_Page_Classes?>">

21
                    <div id="sc_nav">

22
                        <!--  left navigation -->

23
                        <?php if (sc_nav('Primary')): ?>

24
                            <aside id="sc_col1" class="nav_col">

25
                                <?php

26
                                    // Left Navigation section

27
                                    print sc_nav('Primary');

28
                                ?>

29
                            </aside>

30
                        <?php endif; ?>

31
                        

32
                        <!--  right navigation -->

33
                        <?php if (sc_nav('Secondary')): ?>

34
                            <aside id="sc_col2" class="nav_col">

35
                                <?php

36
                                    // Right Navigation section

37
                                    print sc_nav('Secondary');

38
                                ?>        

39
                            </aside>

40
                        <?php endif; ?>

41
                    </div>

42
            

43
                    <!--  main content -->

44
                    <div id="sc_main">

45
                        <?php print $Cart_Content?>

46
                    </div>

47
                </div>

48
                <?php print $Footer_Inside ?>

49
            </div>

50
            <?php print $Footer_Outside ?>

51
        </div>

52
    </body>

53
</html>

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:

 

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.

 

<?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.

 

 

<!DOCTYPE html>

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

 

 

<html<?php print $HTML_Attributes?>>

This is your typical HTML tag with a print statement to include additional attributes Squirrelcart needs to function.

 

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title><?php print $Title ?></title> 
<meta name="description" content="<?php print $Description ?>" /> 
<?php if ($Keywords):?><meta name="keywords" content="<?php print $Keywords ?>" /><?php endif;?>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10" />

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.

 

 

<?php print $SC_meta ?>

Squirrelcart uses this to include additional meta-tags as needed.

 

 

<?php print $SC_css ?>

Squirrelcart uses this to include our of our stylesheets.

 

 

<?php print $SC_js ?>

Squirrelcart uses this to include our JavaScript.

 

 

<body class="<?php print $SC_Body_Classes?>">

This is your typical body tag, with a print statement to print classes that help us to format various elements on the page.

 

 

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

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:

<!-- Template: store_main -->

 

 

 

<div id="sc" class="<?php print $SC_Classes ?> btn_wait_toggle">

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

 

 

 

<?php print $Header_Outside ?>

<?php print $Header_Inside ?>

This is how the header is added to the page. Some theme settings put the header outside (above) the main page box, and some put it inside, hence the two variables.

Alternatively, if you are working with a custom theme you can place your header using this instead:

<?php print $Header ?>

 

 

 

<div id="sc_nav"> 
     <!--  left navigation --> 
     <?php if (sc_nav('Primary')): ?> 
          <aside id="sc_col1" class="nav_col"> 
               <?php 
                    
// Left Navigation section 
                    
print sc_nav('Primary'); 
               
?> 
          </aside> 
     <?php endif; ?> 
                         
     <!--  right navigation --> 
     <?php if (sc_nav('Secondary')): ?> 
          <aside id="sc_col2" class="nav_col"> 
               <?php 
                    
// Right Navigation section 
                    
print sc_nav('Secondary'); 
               
?>         
          </aside> 
     <?php endif; ?> 
</div>

This section of code displays the Navigation Blocks associated with this theme that are assigned to the Primary and Secondary navigation section. This is explained in more detail in the Navigation Blocks topic in this section. In the default squirrelcart theme, the primary navigation is on the left hand side of the page.

 

 

 

<!-- main content -->
<div
id="sc_main">
     <?php print $Cart_Content; ?>
</div>

This controls the content in the center area of the page. The content in this area varies based on the page you are currently viewing.

 

 

<?php print $Footer_Outside ?>

<?php print $Footer_Inside ?>

This is how the footer is added to the page. Some theme settings put the footer outside (below) the main page box, and some put it inside, hence the two variables.

Alternatively, if you are working with a custom theme you can place your footer using this instead:

<?php print $Footer ?>

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.