Skip to main content
page last edited on 14 January 2015

Adding third column

This article applies to the specific versions of software: X-Cart 5.1 - 5.2
Version: 5.4 and early

Introduction

This article gives an example of how to create the right sidebar and hide the left sidebar in customer area, while transferring all sidebar widgets from left to right.

If you use X-Cart 5.3 and higher, you can add right sidebar via admin area. For that, go to 'Look & feel' > 'Layout' section in admin area and change 'Default layout' and/or 'Home page layout' options there.

Implementation

We start with creating an empty module with developer ID Tony and module ID RightColumnDemo. The fact whether to show left or right sidebar is defined in the \XLite\View\Controller (more about classnames in X-Cart) class: 

  • isSidebarFirstVisible() defines whether to show left sidebar;
  • isSidebarSecondVisible() defines whether to show right sidebar.

In our module we need to decorate this class and override these methods. For that we create the classes/XLite/Module/Tony/RightColumnDemo/View/Controller.php file with the following content: 

<?php
// vim: set ts=4 sw=4 sts=4 et:

namespace XLite\Module\Tony\RightColumnDemo\View;

/**
* Controller main widget
*/
abstract class Controller extends \XLite\View\Controller implements \XLite\Base\IDecorator
{  
public static function isSidebarSecondVisible()
{
return !\XLite::isAdminZone() ? true : parent::isSidebarSecondVisible();
}

public static function isSidebarFirstVisible()
{
return !\XLite::isAdminZone() ? false: parent::isSidebarFirstVisible();
}
}

If we are in customer area, we define isSidebarSecondVisible() method to return true and isSidebarFirstVisible() method to return false. This means that left sidebar will be hidden and right sidebar will be shown in customer area, while admin area will remain the same.

Now we need to move all widgets from left to right sidebar and we can achieve it by adding the following method to the classes/XLite/Module/Tony/RightColumnDemo/Main.php class: 

public static function runBuildCacheHandler()
{
parent::runBuildCacheHandler();

$widgets = \XLite\Core\Database::getRepo('XLite\Model\ViewList')->findClassList('sidebar.first', 'customer');

foreach ($widgets as $widget) {
$widget->setList('sidebar.second');
}
}

It will assign all templates and widget classes that belong to sidebar.first view list (left column) to sidebar.second one (right column).

Finally, we need to add CSS file that will make look of right column smooth. We create the skins/default/en/modules/Tony/RightColumnDemo/css/style.css file with the following content: 

#sidebar-second {
width: 25%;
padding-left: 20px;
}

and then register this CSS file in the system by creating the classes/XLite/Module/Tony/RightColumnDemo/View/AView.php file with the following content: 

<?php
// vim: set ts=4 sw=4 sts=4 et:

namespace XLite\Module\Tony\RightColumnDemo\View;

/**
* Abstract widget
*/
abstract class AView extends \XLite\View\AView implements \XLite\Base\IDecorator
{
protected function getThemeFiles($adminZone = null)
{
$list = parent::getThemeFiles($adminZone);

$list[static::RESOURCE_CSS][] = 'modules/Tony/RightColumnDemo/css/style.css';
return $list;
}
}

Now we are done with the mod and have to re-deploy the store. Once it is done, check your customer area and it should look like this:

Note: using the same approach you can create three column layout or a vertical layout without sidebars.

Module pack

You can download this module example from here: Tony-RightColumnDemo-v5_1_0.tar