How to add new sidebox in Zencart


A very common question comes into mind of zencart freshers is how they can add a new sidebox with their own content. It might be new banners, or may be a custom newsletter section or may be a google ad. People search the codes like crazy and again ends up adding some hard-coded html/php garbage code in the main template file (tpl_main_page.php). So following is the way you should do it:

Like all other modules, sideboxes also has basically 2 files, one for code and one for template. Lets say we want to add a google ad box in the left or right column. We call it googlead.

  1. Step 1: Create the file CATALOG_DIR/includes/modules/sideboxes/googlead.php. This is where your code goes. Do not add any design elements here. Following is the minimum lines of code required to make it work:
    
    <?php
    //Put any logical code you need to generate the template file above this line
    require($template->get_template_dir('tpl_googlead.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_googlead.php');
    $title =  BOX_HEADING_GOOGLEAD; //Define in CATALOG_DIR/includes/languages/english.php
    $title_link = false; //Add any link if you want the title to be linked to any page
    require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
    ?>
    
    

    $title is the title of the sidebox. Always define the texts in languages files. In this case add a definition in CATALOG_DIR/includes/languages/english.php
    define('BOX_HEADING_GOOGLEAD', 'Ads by Google');
    (English is the system language, use any other languages if required)
    $title_link checks if there is any link need to be added to the header text. If it finds any link, it puts an anchor tag.

    Lets put 2 of our variables we need to generate our template file:

    $ad_client_no = 'XXXXXXXXXXXXXXX';
    $ad_slot = 'YYYYYYYYYY';
    

    Write these codes above all the basic codes.

  2. Step 2: Now create the template file CATALOG_DIR/includes/templates/YOUR_TEMPLATE/sideboxes/tpl_googlead.php
    The very first line you should not forget to add is:
    $content = "";
    This will empty the $content variable, otherwise it’ll contain template of earlier boxes.
    Now add all the html codes in the $content variable. A sample file can contain code like below:

    
    <?php
    
    $content = "";
    $content .= '<script type="text/javascript"><!--' . "\n";
    $content .= 'google_ad_client = "' . $ad_client_no . '";' . "\n";
    
    $content .= 'google_ad_slot = "' . $ad_slot . '";' . "\n";
    $content .= 'google_ad_width = 120;' . "\n";
    $content .= 'google_ad_height = 240;' . "\n";
    $content .= '//-->' . "\n";
    $content .= '</script>' . "\n";
    $content .= '<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">' . "\n";
    $content .= '</script>' . "\n";
    ?>
    
    

    So we can see, whatever we add in the $content variable, it’ll be displayed in the sidebox. If you generated some variables in the module file, those can be directly accessed in template file. In our case we added $ad_client_no and $ad_slot in module page.

    Upto this point, you are done with you code. Now configure from backend.

  3. Step 3: Login to admin. Go to Tools >> Layout Box Controller.
    Wow!! zencart has recognized your sidebox and listed here (highlighted in red). It is disabled by default; so, first thing is to enable it. You can configure it to show in either left or right column, change the sort order to show it in top or any vertical position of the side columns.

You are done, your google ad box is there in your front end. So next time you want to add any sidebox in Zencart, DO NOT hard code it. Hard coding looks easy in short but very painful at the end.

, ,

  1. #1 by Igor on December 8, 2010 - 8:05 am

    Hi Imran,

    Thank you for the tips!
    I used your guide to add my own box to my Zen Cart.
    The box works fine and I can put a simple text in.
    But my attempt to run Google translate widget failed.
    I am not a programmer so probably I did some silly mistakes in the code.
    Could you help with coding /YOUR_TEMPLATE/sideboxes/tpl_googlead.php file?

    The Google translate widget code:

    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: ‘en’
    }, ‘google_translate_element’);
    }

    What code should I put in tpl_googlead.php file?
    Please help!

    Thank you!

  2. #2 by Imran on December 8, 2010 - 4:05 pm

    Hi Igor,

    I think you are missing the last line of the google code.

    <script src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>

    Following is the full code you need to enter into the tpl_googlead.php file:

    <?php

    $content = “”;
    $content .= “<div id=\”google_translate_element\”><script> function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: ‘en’
    }, ‘google_translate_element’);
    }</script>
    <script src=\”https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit\”></script></div>”;

    ?>

  3. #3 by Igor on December 9, 2010 - 7:56 am

    Hi Imran,

    Thank you for your suggestion!

    Unfortunately the code, if it is put in this way, is not working. I already tried that and as the result the entire colon had disappeared.
    The problem is the code is not being passed through.
    I don’t know why. The code itself work fine if I include it in any page using the Define Pages Editor but stops working in the sidebox.
    I think the more likely problem is that at some point the code is wrongly interpreted by ZenCart software or PHP. It could be a simple syntax error.

    P.S. I pasted in the correct Google code but your blog’s software “cleared” the code.

    Please help if you have more ideas.

    Regards,
    Igor

  4. #4 by dipanwita on July 6, 2015 - 10:53 am

    Thank you…you have saved my time!!!

(will not be published)