RSS Feed

Blog

CMS Made Simple and Zen Cart Template Integration

CMS Made Simple and Zen Cart Template Integration
Posted on Mar 10, 2009 by Stephen Owens
Tutorial and Code category
   [ Return ]

How to integrate the site design and menus from CMS Made Simple with the default template found in Zen Cart. This method is much better than having similarly themed sites as this method of template integration will give the appearance of a seamless site.

NOTICE: The procedure I describe below is old and out of date and I no longer supprot it. Please see my CMSMS Shop Skin Helper instead. It works awesome and is much faster than the method below.

This tutorial assumes that you have already installed CMS Made Simple and Zen Cart, and that you have a little bit of knowledge about CMS Made Simple templates. If you can follow along with the video and understand the process of what is happening then you will be fine.

Required server settings for PHP:

Your server PHP must be setup to "allow URL include".  This means you can include files using the fully qualified URL. e.g. http://www.yoursite.com/included-file.php

Many hosts have this active by default. For example, GoDaddy, and Flexiss both a have this turned on automatically. If you cannot include a file using the fully qualified URL you will need to contact your host to have this feature turned on, which can be set in the PHP.ini file.

Required software for this tutorial:

CMS Made Simple - www.cmsmadesimple.org

Zen Cart - www.zencart.com

This tutorial is easiest to use if the CMS Made Simple template has a single column layout with header, content, and footer sections. If your CMS Made Simple template has more than one column, then you will just have to use some creative thinking and do a variation on this tutorial to make it work with your creative template layout.

This is not a full integration between the two programs. It is simply an easy way to integrate your two templates.

By integrating the templates a consistent feel is brought to all pages of the site. If small changes are made to the design or layout in CMS Made Simple they will carry over to Zen Cart.

There are four steps to completing this process and it takes about 10 to 20 minutes.

Watch this video to see how I do it and then use the information below to complete your own template integration. I cover all the information below in the video tutorial, and the video tutorial was created to help illustrate the steps. I have to find a better open source screen recorder. The sound and video jump and stumble a great deal.

Step 1: Create Templates in CMS Made Simple

In this step you will create templates that will surround the Zen Cart content. This can be thought of like two pieces of bread on a sandwich, with ZenCart being the filling between the slices of bread. Normally in CMS Made Simple you would create a template and put the {content} tag into the template where you wanted your page content to be displayed. In this situation however you will be creating multiple CMS Made Simple templates that will “sandwich” the Zen Cart content.

Start with a CMS Made Simple template that is a single column layout.

Open the template editor in CMS Made Simple and create the following templates.

zen-css-js

This template is going to have only one line of code, and it is the smarty tag for the css style sheets:

  1. {stylesheet}

zen-top

This template has everything between the opening <body> tag and the {content} smarty tag. Do not include the <body> tag or anything above it. Do not include the {content} tag or anything below it. This template will include your main navigation {menu} tag. The code might look something like:

  1. <div class="site-top">
  2.    {menu template="mainLinksOnly"}
  3. </div>
  4. <div class="site-content">

zen-bottom

This template has everything between the {content} smarty tag and the closing </body> tag. Do not include the {content} or </body> tags. The code might look something like:

  1. </div>
  2. <div class="site-footer">
  3.    {custom_copyright}
  4. </div>

Step 2: Create Pages in CMS Made Simple

Here we are creating pages that use the templates created in Step 1 that will eventually be called from Zen Cart.

Open the page editor in CMS Made Simple and create the following pages. Note that even though we didn't put any {content} tags into our templates in the previous step some content will need to be added in order to save the pages. I typically just add a single character to the content section of the CMS Made Simple page editor before saving.

Shop

This is an external link that will point to your Zen Cart installation. You can name it anything you like, such as catalog or store or shop on-line. Show this link in the menu. The link will be something like:

http://www.yoursite.com/shop/

zen-css-js

This page will have a title, menu text, and page alias all called, zen-css-js. Do not show this page in the menu. For the template choose the zen-css-js template you created in the previous step. In the content section just put any character you want. I typically just put a single period into the content box.

zen-top

This page will have a title, menu text, and page alias all called, zen-top. Do not show this page in the menu. For the template choose the zen-top template you created in the previous step. In the content section just put any character you want. I typically just put a single period into the content box.

zen-bottom

This page will have a title, menu text, and page alias all called, zen-top. Do not show this page in the menu. For the template choose the zen-top template you created in the previous step. In the content section just put any character you want. I typically just put a single period into the content box.

Step 3: Modify the Zen Cart Default Template

In this step you will modify three files in the Zen Cart default template that will sandwich the Zen Cart content. These three files are located on your computer in:

'Zen Cart folder'/templates/template_default/common/

html_header.php

Open the html_header.php file and find:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

Before this, paste the following code. Replace www.yoursite.com with your domain.

  1. <?php
  2.    if ($_SERVER['SERVER_PORT'] == '443') {
  3.       $cmsmsURL = 'https://www.yoursite.com/';
  4.    } else {
  5.       $cmsmsURL = 'http://www.yoursite.com/';
  6.    }
  7. ?>

The above code determines if your site is currently SSL secured (https) or not (http), and will provide the appropriate base URL to the CMS Made Simple pages created in step two.

If your site is not using pretty URLs then you may need to change the http://www.yoursite.com/ to a link that points to your CMS Made Simple index. It may be something like http://www.yoursite.com/index.php/?page=

Next find in the html_header.php file:

  1. <head>

Directly after it add this code:

  1. <?php include($cmsmsURL.'zen-css-js'); ?>

The above code includes the CMS Made Simple style sheets.

tpl_header.php

At the very top of tpl_header.php, on the very first line, add the following code:

  1. <?php include($cmsmsURL.'zen-top'); ?>

The above code includes the top half of the template sandwich from CMS Made Simple.

tpl_footer.php

At the very bottom of tpl_footer.php, on the very last line, add the following code:

  1. <?php include($cmsmsURL.'zen-bottom'); ?>

The above code includes the bottom half of the template sandwich from CMS Made Simple.

Step 4: Upload the Zen Cart files to your Web Sever

Use your FTP program and upload the three Zen Cart template files from your local computer, which we just modified, and upload them to the correct directory on the web server. The three files are:

'Zen Cart folder'/includes/templates/template_default/common/html_header.php

'Zen Cart folder'/includes/templates/template_default/common/tpl_header.php

'Zen Cart folder'/includes/templates/template_default/common/tpl_footer.php

Once the files have been uploaded to the sever reload your Zen Cart page and it will appear in your CMS Made Simple site template.

Final Thoughts

At this point you will most likely want to edit the Zen Cart template to make it fit better within the space of your site. There are a ton of tutorials on the web that will explain how to do this for Zen Cart. A great place to start is www.zencart.com, where you can learn about: Template Customization, Building Overrides, EZ-pages, and Sideboxes.

Using the technique above you can figure out how to include all kinds of things from CMS Made Simple into Zen Cart.

This method will also work if you have osCommerce with the Simple Template System (STS) modification. STS causes osCommerce to take a very noticeable performance hit, but I have done a few osC sites using this template sandwich method.

Share
Like what you read? Get updates for free!
comments powered by Disqus