Introduction

This article describes how you can create your own sidebar menu in customer store-front via module. This is a menu similar to Categories or New Arrivals ones you can see in default package.

Table of Contents

Step 1. Create an empty module

You can simply do it according to the guide. For the sake of example, I have created a module with developer ID Tony and module ID SidebarMenu, so it will be sitting in the <X-Cart 5>/XLite/Module/Tony/SidebarMenu/ folder.

Rebuild the cache and this module will appear in the Extensions > Installed modules section in your admin area. Enable this module.

Step 2. Create viewer class for your sidebar 

  1. Create View folder in your module.
  2. Put MySidebar.php script into this folder with the following content: 

    <?php
    
    namespace XLite\Module\Tony\SidebarMenu\View;
    
    /**
     * @ListChild (list="sidebar.single", zone="customer", weight="500")
     * @ListChild (list="sidebar.first", zone="customer", weight="500")
     */
    
    class MySidebar extends \XLite\View\SideBarBox
    {
        protected function getHead()
        {
            return 'My header';
        }
    
        protected function getDir()
        {
            return 'modules/Tony/SidebarMenu/menu';
        }
    }
    

Let’s walk through each line of its code:

  1. namespace XLite\Module\Tony\SidebarMenu\View; this defines a namespace of the class and you must use your own developer and module IDs here. I used Tony and SidebarMenu, because they are IDs of my module.

  2. construction with @ListChild (list="sidebar.first", zone="customer", weight="500") is used to assign the sidebar box into the area where all other sidebar boxes are located. You can change its weight to move it up or down in the left-hand side menu. This section must start with /** and finish with */ .
  3. class MySidebar extends \XLite\View\SideBarBox tells that we are going to use typical sidebar box as a template for our own menu.

  4. method getHead() defines the header of the menu
  5. method getDir() defines the folder where the template - that defines the look of the sidebar menu - is located. In my case, this folder is <X-Cart>/skins/default/en/modules/Tony/SidebarMenu/menu/. Again, you must use your own developer and module IDs in this path.

Step 3. Create template

Create the template <X-Cart 5>/skins/default/en/modules/Tony/SidebarMenu/menu/body.tpl mentioned above. Its content will be what you want to display in the sidebar box, e.g.: 

Hello world!

Step 4. Rebuild the cache and check the results

If you have done everything right, you will see the following results in customer store-front:

Module pack

You can download this module pack from here: https://dl.dropboxusercontent.com/u/23858825/Tony-SidebarMenu-v5_1_0.tar

You can download this module pack for versions 5.2.x from here: Tony-SidebarMenu-v5_2_0.tar

Attachments: