X-Cart:Responsive Template

Overview

Responsive Template for X-Cart allows you to provide your visitors with a version of your website that is best suited for their monitor or display. The template is adaptive/responsive from 1280 pixels down to 350 pixels. For even smaller screens, you can consider X-Cart Mobile.

Monitors come in a variety of shapes and sizes, with different resolutions. From smartphones to tablets to widescreen desktops, the template will adapt to fit each. Furthermore, it provides a solid base for your own responsive design.

How the Responsive Template works

The Responsive Template includes JavaScript that detects the width or the browser window or screen that is displaying it. After this detection occurs, the appropriate style sheet is selected and displayed to the browser. Additionally, a cookie is set to remember that browser's width for the remainder of the session. When the browser is resized, such as turning a tablet on its side, or clicking and dragging the browser window on a desktop, the style sheet and cookie are updated. The result is that the correct dimensions are displayed to your visitor at all times, and the text and objects are always legible. Scaling and horizontal scrolling are no longer necessary for most devices and screens.

The Responsive Template comes bundled with style sheets that control four preset widths: 350px, 700px, 960px, and 1280px. You can tailor the experience for each of the preset widths, alter the code to change them, or even define your own. This skin modifies a wide range of core templates, but no PHP code is altered or changed.

System Requirements and Installation

The Responsive Template is designed to work with all X-Cart 4.5.x versions, GOLD, GOLD PLUS and PLATINUM. X-Cart versions prior to 4.5.0 may work with this template but have not been tested at this time.

System Requirements

To use this add-on you need a working copy of X-Cart GOLD, GOLD PLUS or PLATINUM version 4.5.x installed on your server.

Installation

To install the add-on:

1. Obtain a distribution package for the add-on module by downloading it from the File Area section of your X-Cart Account. The distribution package you need is contained in the archive file Responsive_Template_x.y.z.zip where x, y and z are the version numbers of the module. Make sure the version of the module is the same as the version of the installed copy of X-Cart.
2. Decompress the archive with the distribution package to a directory on your system using your favorite compression program (WinZIP or any other archiver).
3. Use an FTP client to upload all the files contained in the archive (retaining the directory structure) to the X-Cart root directory on your server or your hosting account. No files should be overwritten during this process, unless the add-on was previously installed.
4. Visit the Admin area of your store, and go to General Settings->Appearance. Select the new skin Ideal Responsive from the drop down list at the top, and click Apply Changes. If the skin does not appear in the list, ensure that the directory ideal_responsive exists in your xcart/skin directory and try clearing the X-Cart cache.
5. Clear the X-Cart cache of temporary files.

Responsive Design

As you customize your responsive template to fit your brand, make sure to not accidentally break the responsive features. Images should usually not exceed 350 px, or their width and height need to be set as percentage values to allow resizing. Keeping product and category images consistent and reasonably sized is a good idea as well.

Test your layout changes at various widths. Make note of the style sheets located in <xcart_dir>/skin/ideal_responsive/css/, mobile.css controls widths from 350px to 699px, and the rest of the sheets are named according to their size. You can mimic certain features to customize the experience for mobile or tablet users: take a look at how the Tabs of the top menu become the Quick Menu dropdown in the mobile version. Another important snippet of code can be found in <xcart_dir>/skin/ideal_responsive/customer/service_js.tpl, where it defines what style sheet to display for particular widths.