Introduction

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

Implementation

  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: 

    <?php
    
    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(
                    'modules/Tony/MobileCSS/css/custom.css',
                );
    
                $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: https://dl.dropboxusercontent.com/u/23858825/Tony-MobileCSS-v5_1_0.tar