A Zen Cart sidebox is what displays various items in the side columns of your Zen Cart store. By default numerous sideboxes will show in either the left or right column of a Zen Cart online store for instance the categories sidebox, the search sidebox, and the information sidebox. Adding a new sidebox to Zen Cart can be completed in a few quick steps. You will need access to the server to add and modify files.

Add a Zen Cart Sidebox:

  1. Create Sidebox Template:Add a new file to the server in the following directory: zen-cart-root/includes/templates/template-name/sideboxes/. You should name the file something relating to the contents of the sidebox. In this example we will be adding a welcome message sidebox so we might name the file tpl_welcome.php. The contents of the file will include what you want to display in the box and will be in a $content variable. Below is an example of the contents of the file if you wanted it to just display a message like “Welcome to my store”.
    <?php
    /**
    * Side Box Template
    *
    */
    $content = 'Welcome to my store.';
    ?>
    
  2. Create Sidebox:Now we want to add the actual sidebox which goes into the following directory: /zen-cart-root/includes/modules/sideboxes. Again name the file something relating to the contents of the sidebox which in this case will be welcome.php. The contents of this file will look something like the below so just modify the variables that relate to your template.
    <?php
    /**
    * welcome sidebox - used to display a welcome message in a sidebox
    *
    */// test if box should display
    $show_welcome = true;if ($show_welcome == true) {require($template->get_template_dir('tpl_welcome.php',DIR_WS_TEMPLATE, $current_page_base,'sideboxes'). '/tpl_welcome.php');$title = BOX_HEADING_WELCOME;
    $title_link = false;
    require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,'common') . '/' . $column_box_default);
    }
    ?>
    
  3. Add Language Variables:You now need to modify the english.php language file to add the definitions for any text variables you have used in either file. In this example we have added a new variable called BOX_HEADING_WELCOME. So for this example you would add the below to english.php.
    // welcome box text in sideboxes/welcome.php
    define('BOX_HEADING_WELCOME', 'Welcome Message');
    

    Note above that BOX_HEADING_WELCOME is the name of the variable used and “Welcome Message” is the text that is displayed anywhere that the variable is used.

  4. Enable Sidebox:Now visit the Zen Cart admin system in your browser to turn the sidebox on. Once you have logged into the admin hover over Tools and select “Layout Boxes Controller” from the drop down. You will see the new sidebox in the list which in this example is sideboxes/welcome.php. Click on the new box twice and in the upper right of the window you will see fields that  you can edit. Type the correct number is the sort order field to display the box, select the radio button next to on in “Left/Right Column Status”, and then click the Update button. Your new sidebox is now enabled on your site.
  5. Verify Sidebox:Now visit your Zen Cart store in a browser and the sidebox should show.

That is all that needs to be completed for the sidebox to show on your site. The book below is a great reference for modifying or adding items to your Zen Cart store.


List Price: $49.99 USD
New From: $44.99 USD In Stock
Used from: $19.98 USD In Stock

DeliciousStumbleUponDiggTwitterFacebookRedditLinkedInEmail
Tags: , , , , , ,
41 Responses to “How to Add a New Sidebox to Zen Cart”
  1. nick says:

    This is a useful tutorial. But….

    The first lines of the sidebox template should evidently read:

    <?php
    /**

    It’s obvious for some but not for everyone using the tutorial perhaps.

    Cheers
    Nick

    [Reply]

    alex Reply:

    Hello Nick,

    Thanks for pointing that out. It is something I need to fix actually… it converted weird when publishing the post. Anyhow thanks!~

    [Reply]

  2. elvinjoe says:

    This post is very helpful. . thanks

    [Reply]

    alex Reply:

    No problem. Glad it helped out. If you learn any other tricks regarding ZenCart and would like them posted on the site let us know.

    Thanks!~

    [Reply]

  3. Tamara says:

    Thanks for this tutorial. I thought it would be hard to add a new sidebox, I’m amazed at how simple it is!

    [Reply]

    alex Reply:

    Hello Tamara,

    No problem. Glad it helped out. Thanks for leaving a comment.

    [Reply]

  4. appz says:

    It’s helpful.thanks

    [Reply]

    alex Reply:

    Sure thing. Thanks for leaving a comment.

    [Reply]

  5. Jesse Taylor says:

    Thanks for posting this tutorial. I didn’t know where to begin writing a custom sidebox, and this was very helpful.

    [Reply]

    alex Reply:

    Hello Jesse,

    Glad this helped! I appreciate you taking the time to leave feedback!

    [Reply]

  6. Snehal Rana says:

    Excellent article. How do I add links to this newly created sidebox?

    Snehal

    [Reply]

    alex Reply:

    Hello Snehal Rana,

    Use PHP’s echo statement to create normal HTML href links. There are many great examples on the Internet.

    Thanks.
    alex

    [Reply]

  7. Vic C says:

    Thank you Alex. This tutorial is very useful to me…

    [Reply]

    alex Reply:

    Hello Vic,

    No problem. Glad it helped you out. Thanks for taking the time to leave feedback.

    Thanks.
    alex

    [Reply]

  8. Ty says:

    I get a completly blank page when I levae in your code for the “welcome.php” file.

    Your code:
    require($template->get_template_dir(‘tpl_welcome_box.php’,DIR_WS_TEMPLATE, $current_page_base,’sideboxes’).’/tpl_welcome_box.php’);
    $title = BOX_HEADING_WELCOME;
    $title_link = false;
    require($template->get_template_dir($column_box_default, DIR_WS_TEMPLATE, $current_page_base,’common’).’/’. $column_box_default);

    [Reply]

    Ty Reply:

    User error, your code is great.

    Thanks!

    [Reply]

    alex Reply:

    Hello Ty,

    No problem. When I got the first notification saying there was an error in the code I started to see if I made a typo so I appreciate you letting me know that was not the case. I make typos or forget semi colons all the time so I figured that was the case. :) Anyway I was glad to see it was on your end and again really appreciate you taking the time to post back and let me know that was the case. I really hope you found the article useful and that you will visit QD again. We also have a new site we are working on called Engage which allows anyone to easily sign up and post questions or answer others questions. If you get a chance check it out and let us know what you think. Also we have a growing QD Tools section that we are always looking for good ideas for online technology tools that we can build.

    So thanks again. Zen Cart is awesome.

    Thanks.
    alex

    [Reply]

  9. Ivan says:

    I followed the tutorial exact. When I enable the sidebox it causes my page to stop loading just at the point where the sidebox should be loaded in. I get no error messages from PHP or javascript. I’m using Zen Cart 1.3.9b.

    [Reply]

    alex Reply:

    Hello Ivan,

    It would be hard to say without looking directly at it. I would assume a closing tag is missing or something but it is definitely possible that the above article worked with 1.3.8 and has an issue with 1.3.9a. If you figure it out we would love to hear what it is so I can update the article if necessary.

    Thanks.
    alex

    [Reply]

  10. Kyle says:

    Hi Alex, I am very new to zen cart and php programing… I am wondering what the above code would look like if I had image links inside of my new sidebox?

    for example: My new sidebox is titled “Social Media”
    I would like to add links to all of my facebook, twitter, etc. by using little image icons as buttons.

    I read your tutorial word for word and you have certainly made it easy for me to add a new sidebox in my shopping cart!

    Thanks

    [Reply]

    alex Reply:

    Hello Kyle,

    You simply add the HTML code for what you want displayed in the side box to the content variable where “Welcome to my store” currently exists.

    Glad you found the tutorial helpful.

    Thanks.
    alex

    [Reply]

    Kyle Reply:

    You’re good! Thanks to you I have completed what I set out to do… I was under the impression that it would take much more that just an html markup!

    Thanks again!

    [Reply]

    alex Reply:

    Hello Kyle,

    Thanks for the compliment. Glad you got your Zen Cart sidebox rocking. Thanks also for taking the time to leave feedback.

    Thanks.
    alex

    [Reply]

  11. Dane says:

    Alex,

    Great tutorial, it works great! I, like Kyle, was adding social networking links to my site.

    I did run into one problem though. I am using a 12leaves template on my site (pure_blue_free), and the boarders around the new side box and the spacing with in the box are gone.

    Any thoughts on how to fix the box so it looks like the others?

    Thanks in advance for your help.

    Dane

    [Reply]

    alex Reply:

    Hello Dane,

    I am not familiar with that sidebox so I cannot say. I would compare it to other sideboxs for that specific template and see what the differences are.

    Thanks.
    alex

    [Reply]

    Dane Reply:

    Hi Alex,

    Thanks for the quick response.

    I have gone through all the code on the other side box templates and it looks like my code matches (besides content).

    Thanks again for the tutorial, it looks like I am back to the drawing board.

    Dane

    [Reply]

    alex Reply:

    Hello Dane,

    No problem. Let us know what the final solution is.

    Thanks.
    alex

    [Reply]

    Dane Reply:

    Success!!!

    The issue I was having is that I had my div tag outside of my main $content. Like this:
    $content ”
    $content ‘……’
    $content ”

    I played around and decided to put the div tag inside my main $content, so it looks like this now:
    $content ‘ the actual content of the box ‘

    Now it is picking up the style sheet.

    Thanks again for all your help.

    [Reply]

    alex Reply:

    Hello Dane,

    Awesome! Great to hear you got this resolved. Also we appreciate you taking the time to note what resolved the problem so others having similar issues might find a solution. Hope you find our site useful in the future as well.

    Thanks.
    alex

  12. AdytmRO says:

    Hy,

    Thanks for this short tutorial.

    It saved me a lot of time.

    I;ve added my sidebox in notime.

    Thanks.
    Adrian

    [Reply]

    alex Reply:

    Hello AdytmRO,

    No problem. Glad you found the article useful. Thanks for taking the time to leave feedback.

    Thanks.
    alex

    [Reply]

  13. Zencarted says:

    a simple and yet effective tutorial…. kudos man, and thanks!

    [Reply]

    alex Reply:

    Hello Zencarted,

    No problem at all. We appreciate you taking the time to post feedback.

    Thanks.
    alex

    [Reply]

  14. Gustav says:

    Hello
    Thanks for the tutorial – I applied it as is
    But in the end there is no content anymore !
    Can you helpme to find out what went wrong ?
    I’m using a commercialtemplate – but even if I follow your instructions on the default template there iscontent anymore – only the header appears :(

    [Reply]

    Gustav Reply:

    sorry – Ifound my error (name of the sidebox) – Thanks

    [Reply]

    alex Reply:

    Hello Gustav,

    No problem. Thanks for taking the time to leave feedback again letting us know you got it worked out.

    Thanks.
    alex

    [Reply]

  15. leela says:

    hi,i want to move the footer fro bottom to left sidebox using zeen cart.how can we do this ?

    [Reply]

    alex Reply:

    Hello leela,

    Create a sidebox as noted in the article above and simply comment out the footer display in the theme you are using.

    Thanks.
    alex

    [Reply]

  16. Marta says:

    I’ve just now found your tutorial about creating a sidebox in zen cart I followed all the steps. In the admin side the new sidebox appears but when I update the front store, what appears is the whole the navigation bar (header/left), but not the new box and also the main page information is gone together with the header. I don’t understand for the life of me what I’m doing wrong.

    I cannot post a link because I’m working on a test site and I don’t want to be track by the spiders. I very much hope this thread is still alive.

    Many thanks in advance

    [Reply]

    alex Reply:

    Hello Marta,

    To me that sounds like a missing quote single or double… or a missing semi colon. Start taking little bits of the page but typically the error is going to be in the code directly following the last item displaying.

    Thanks.
    alex

    [Reply]

  17.  
Leave a Reply

*Type the letter/number combination in the abvoe field before clicking submit.

*