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.

Table of Contents


  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: