Skip to main content
page last edited on 1 December 2014

Adding CSS and JS files for Mobile Skin

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


This article describes how developers can include CSS/JS files to X-Cart which has the Mobile Skin module enabled. The problem is that Mobile Skin module removes all CSS/JS files that were registered via regular approach of adding CSS/JS files, so we must work around it in this case.


  1. Create an empty module. We are creating a module with developer ID Tony and module ID MobileCSS.

  2. Since we cannot use the getThemeFiles() method of \XLite\View\AView object, because CSS/JS files from it will be cleaned up anyway, we need to decorate the registerResources() method of the \XLite\Core\Layout class.

  3. We create the <X-Cart>/classes/XLite/Module/Tony/MobileCSS/Core/Layout.php file with the following content: 


    namespace XLite\Module\Tony\MobileCSS\Core;

    class Layout extends \XLite\Core\Layout implements \XLite\Base\IDecorator
    public function registerResources(array $resources, $index, $interface = null)
    parent::registerResources($resources, $index, $interface);

    if (\XLite\Core\Request::isMobileDevice()) {
    $files = array(

    $this->registerResourcesByType($files, 100, $interface, \XLite\View\AView::RESOURCE_CSS);

    This code means that if X-Cart is called by mobile device, then we must register the <X-Cart>/skins/default/en/modules/Tony/MobileCSS/css/custom.css CSS file and call parent object's registerResources() method.

  4. Obviously, now we need to create this <X-Cart>/skins/default/en/modules/Tony/MobileCSS/css/custom.css file that will be added to customer store-front's pages.

  5. That is it. Now if we re-deploy the store, this CSS file will be included into all pages of customer area.

Module pack

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