X-Cart:Responsive Template

Overview

Ideal 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 Ideal Responsive Template works

The Ideal 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 Ideal 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 Ideal Responsive Template is designed to work with all X-Cart 4.6.x versions out of the box, GOLD, GOLD PLUS and PLATINUM. X-Cart versions prior to 4.6.0 may work with this template but have not been tested at this time.

Template Settings

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.

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.