[Cpt.Crashtastic]

Overriding a modules css

Even though we have declared another skin which overrides the default skin, it does not override the js or css files of a module created by another developer. Lets take for example the Product Options module which uses product_options.css to format the product options. This resides in

skins/default/en/modules/CDev/ProductOptions

First of all this structure needs creating for our module


skins/default/en/modules/<ADev>/<ASKIN>/ProductOptions


Then copy the product_options.css and rename it to <ADev>_product_options.css


In the skin module Main.php, the next step is to declare that the skin module is dependent on the product options module.

    public static function getDependencies() {
      return array('CDev\ProductOptions'); // Product Options Module
    }

The next step is to replicate the folder structure in our module for the View we want to override in CDev/Product Options. In this case it's Product.php

<ADEV>/<ASKIN>/ProductOptions/View/

Create a php file Product.php again to replicate the structure at this location and enter the following code.

namespace XLite\Module\<ADEV>\<ASKIN>\ProductOptions\View;

/**
 * Product widget
 *
 */
abstract class Product extends \XLite\View\Product\Details\Customer\ACustomer implements \XLite\Base\IDecorator
{

    /**
     * Register CSS files
     *
     * @return array
     */
    public function getCSSFiles()
    {
        $list = parent::getCSSFiles();
        $key = array_search('modules/CDev/ProductOptions/product_details.css', $list);
   
        if($key) {
          unset($list[$key]);
        }

        $list[] = 'modules/<ADEV>/<ASKIN>/ProductOptions/<ADEV>_product_details.css';

        return $list;
    }
}

This code extends and decorates the ACustomer class. The getCSSFiles function retrieves the list of css files for the View created by Product.php and assigns the array to $list. Now it is possible to find the product_details.css within this list and remove it.The content of each element of the array contains the full path to the file which is added to the array in CDev/ProductOptions/View/Product.php. It is important to know that another module could be doing the same thing as your module so you must check that the $list array contains the string before attempting to remove it.

The same can be done with the JS files.

There are other ways of doing this which are easier. This method ensures that your module is transportable to another site or you can even switch between themes on one without having to edit any css.