---

Thank you for purchasing the X-Cart Smart Template for v4.4.x!

---

• 1) Requirements
• 2) Installation
  • a) Patch Database
  • b) Modify Store Files
  • c) Upload New Files
  • d) Activate Template
  • e) Clear Template Cache
• 3) Template Options
• 4) Customisation
  • Home Templates
  • Logo
  • Header
  • Footer
• 5) Features
• 6) FAQs
• 7) Notes

---

1) Requirements

• X-Cart Gold or Pro v4.4.x (v4.4.3 highly recommended)
• Basic - intermediate knowledge of CSS, XHTML and Smarty.
• Good working knowledge of the X-Cart system.
• FTP Client.

2) Installation

Follow each of the steps below...

You may wish to close your store while performing the installation. You can do so in General Settings.

a) Patch Database

In admin go to Tools > Patch/Upgrade, browse to the SQL patch file, patch_install.sql and click 'Apply'.

If for any reason you need to uninstall the template, use patch_uninstall.sql.

b) Modify Store Files

1) In home.php after...

require './auth.php';

Insert...

# Smart Template if ($main == "" && $cat == 0 && $config['Smart_Template']['st_featured_new'] == 'Y') { require './smart_new_products.php'; } if ($main == "" && $cat == 0 && $config['Smart_Template']['st_featured_random'] == 'Y') { require './smart_random_products.php'; } if ($main == "" && $cat == 0 && $config['Smart_Template']['st_ticker'] == 'Y') { require './smart_get_news.php'; } # /Smart Template

---

2) In recommends.php before...

if (!empty($recommends)) { $smarty->assign('recommends', $recommends); }

Insert...

# Smart Template if (!empty($recommends)) foreach ($recommends as $rid => $prod) { $prod_tmp = func_select_product($prod['productid'], (isset($user_account) && isset($user_account["membershipid"])) ? max(intval($user_account["membershipid"]), 0) : 0); $recommends["$rid"]['descr'] = $prod_tmp['descr']; } # /Smart Template

---

3) In modules/Upselling_Products/related_products.php before...

if (!empty($product_links)) $smarty->assign('product_links', $product_links);

Insert...

# Smart Template if (!empty($product_links)) foreach ($product_links as $pid => $prod) { $prod_tmp = func_select_product($prod['productid'], (isset($user_account) && isset($user_account["membershipid"])) ? max(intval($user_account["membershipid"]), 0) : 0); $product_links["$pid"]['descr'] = $prod_tmp['descr']; } # /Smart Template

---

4) X-Cart Gold Users - In skin/common_files/single/menu_box.tpl after...

<a href="{$catalogs.admin}/images_location.php">{$lng.lbl_images_location}</a>

Insert...

{* Smart Template *} <a href="{$catalogs.admin}/configuration.php?option=Smart_Template">{$lng.option_title_Smart_Template}</a> {* / Smart Template *}

X-Cart Pro Users - instead, add the above code to skin/common_files/admin/menu_box.tpl

c) Upload New Files

FTP all files in the upload directory to your store root directory.

d) Activate Template

In admin go to Settings > General Settings > Appearance, select Smart Template and click 'Apply changes'.

e) Clear Template Cache

Clear the template cache from Tools > Maintenance (IMPORTANT).

---

Template installation complete!

The template should now be active and you should be able to view the template settings.

PLEASE NOTE! If the template is not appearing as per the demo, and/or you cannot see the template settings link in admin, then the most likely cause will be that the SQL patch has not been applied correctly. Re-apply the install patch, then clear the template cache.

3) Template Options

Access the Smart Template options from Settings > Smart Template options.

4) Customisation

Home Templates

There are three separate home templates depending on which store layout you choose...

• 3 Column Layout - skin/smart_template/custom/home_3col.tpl
• 2 Column Left Menu Layout - skin/smart_template/custom/home_2col_left.tpl
• 2 Column Right Menu Layout - skin/smart_template/custom/home_2col_right.tpl

These files are where you add/remove/re-order menu elements.

Logo

The logo is a transparent PNG file - logo.png - and is located in skin/smart_template/custom/themes/xxx/

xxx being the chosen theme directory.

For best results, export your logo.png file in PNG32 mode (full alpha transparency).

A CSS image replacement technique is used and the default image size is W480px x H100px.

Eg. skin/smart_template/custom/themes/royal.css

/* Adjust Logo Width & Height Dimensions Here : Default W480 x H100 */ #st_logo h1 { background: url(royal/logo.png) no-repeat; width: 480px; height: 100px; border: 0; overflow: hidden; margin: 0; padding: 0; z-index: 30; float: left; } #st_logo h1 a { display: block; text-indent: -10000px; width: 480px; height: 100px; border: 0; text-decoration: none; } #st_logo h1 a:hover { border: 0; text-decoration: none; }

Header

The first menu is a single level dynamic speedbar menu.

The second menu is a dynamic four level horizontal dropdown category menu.

IMPORTANT: You must enable the 'Flyout Menus' module (in modules) in order for the flyout/dropdown category menus to function correctly.

IMPORTANT: If you have any problems viewing the category menus, go to Modules > Flyout Menus and disable the 'Cache the menu' option.

If you have disabled the horizontal category menu, then it becomes a hard-coded menu, composed of simple nested unordered lists.

See skin/smart_template/custom/horiz_custom.tpl

Footer

The speedbar menu also appears at the footer.

Footer links and social networking icons are hard-coded unordered lists.

A large number of 16px and 32px social networking icons are included.

See skin/smart_template/custom/footer.tpl

5) Features

Site Preferences

Dynamically switch site width, products layout and theme.

Chosen settings are remembered with the use of cookies.

Each function can be enabled/disabled via the template options.

---

To set the initial site width (fixed or fluid) edit line 10 of skin/smart_template/custom/js/switchers/switch_width.js

$.cookie('view_Width', 'fixed', { // Set initial site width: fixed or fluid

Clear your cookies to see any changes.

---

To set the initial products layout (row or grid) edit line 10 of skin/smart_template/custom/js/switchers/switch_layout.js

$.cookie('view_Layout', 'row', { // Set initial products layout: row or grid

Clear your cookies to see any changes.

Feature Products Pager and Carousel

Pager...

Carousel...

Cufon

Cufon transforms your H1, H2 and H3 elements into nicely rendered fonts of your choice.

72 Fonts are included. Click here to preview the available fonts.

For more information, or to generate your own Cufon fonts click here.

Menu and Dialog Boxes

Performance of the CSS3 type boxes varies depending on the browser.

In IE8 and below, JavaScript (CSS3 Pie) is used to render the CSS3 corners, which increases rendering time somewhat.

Dynamic four level vertical flyout category menu

IMPORTANT: You need to enable the flyouts module (in modules) for the vertical menu to function correctly.

IMPORTANT: If you have any problems seeing the category menus, go into the 'Flyout Menus' module settings and disable 'Cache the menu'.

If disabled, the standard X-Cart category menu/flyouts are restored.

New & Random Featured Products

Dynamically displays new and/or random featured products on the homepage. Can be displayed in standard or simple view.

Image Sliders

Animated image sliders, easy to customise and ideal for promotions.

Choose from the Nivo Slider, Featured Box or disable completely.

See skin/smart_template/custom/slider.tpl

Countdown

This is a handy script if you would like to display a countdown to an event, eg. the end of a sale, launch of new product etc.

See skin/smart_template/custom/js/countdown/countdown.js

Adjust these date and time values to the end of your event...

var day = 25; var month = 12; var year = 2011; var hour = 0; var minutes = 0; var seconds = 0;

Also language label - lbl_st_countdown_msg

Ticker

This is an eye catching typewriter style news ticker.

The ticker only appears after you have added news.

Items are dynamically generated from your news archive. Last posted news items appears first.

Lazy Loader

Loads images on demand (ie. when they come into focus), which can reduce server load, saves bandwidth and loads your store faster for visitors.

A 'loading' placeholder image will appear until the browser focuses on the image...

Exclude images from being loaded 'lazily' by simply adding class="notlazy" to your images or image containers.

Performance varies depending on the browser. This feature can be enabled at busy times to reduce server load, or disabled altogether.

Smart Tabs

Easier to customise and extend tabs with persistence feature.

See skin/smart_template/custom/tabs.tpl

AJAX Dynamic Product Search

Dynamically displays product search results under search box according to what customers type. Customers can click directly to products.

Redirect IE6 Users

By enabling this option you can redirect IE6 users to the IE6.html page, providing browser upgrade links.

See IE6.html

6) FAQs

Q. How do I change the logo?
A. Create a new logo.png file and upload to your theme directory. More info.

---

Q. How do I add/remove/re-order menu items?
A. Edit skin/smart_template/custom/home_3col.tpl or home_2col_left.tpl or home_2col_left.tpl depending on your chosen store layout.

---

Q. How do I change the footer links?
A. Edit skin/smart_template/custom/footer.tpl

---

Q. How do I edit the header custom horizontal menu links?
A. Edit skin/smart_template/custom/horiz_custom.tpl

---

Q. How do I remove the header custom horizontal menu altogether?
A. Edit skin/smart_template/custom/header.tpl
Replace {include file="custom/horiz_custom.tpl"} with &nbsp; or whatever you wish to put in its place.

---

Q. Why is the news ticker not displaying?
A. Ensure you have enabled the news module, added a newsletter and added at least one news item.

---

Q. How can I adjust the language of the units on the countdown?
A. View this thread.

---

Q. How do I get my new products on a separate page?
A. View this thread.

---

Q. I have made template adjustments but nothing has changed, why?
A. Try running www.yourstore.com/cleanup.php and refresh your browser.

---

Q. Dynamic product search is not working, why?
A. Ensure you have followed this step.

---

Q. How do I change the image slider images?
A. Edit skin/smart_template/custom/slider.tpl

---

Q. How do I modify the homepage content?
A. Edit skin/smart_template/customer/main/welcome.tpl

---

Q. My homepage random and new product prices do not include tax / VAT - Why?
A. Do the following...

In skin/smart_template/custom/featured_new_products.tpl

Replace...

{include file="currency.tpl" value=$n_products[product].price}

With...

{$config.General.currency_symbol}{math equation="x * y" x=$n_products[product].price y=1.2 format="%.2f"}

In skin/smart_template/custom/featured_random_products.tpl

Replace...

{include file="currency.tpl" value=$r_products[product].price}

With...

{$config.General.currency_symbol}{math equation="x * y" x=$r_products[product].price y=1.2 format="%.2f"}

The example given is for 20% tax.

---

Q. How do I increase the width of the search box?
A. View this thread.

---

Q. How do I change the title tag from 'Your Company Name' to my own?
A. Modify the language label - lbl_site_title and/or change the settings in General Settings > SEO.

---

Q. How do I get Facebook 'Like' buttons to appear on my product pages?
A. View this article.

---

Q. How do increase the number of the homepage new and/or random products?
A. Edit line 7 of smart_new_products.php and smart_random_products.php and change the LIMIT variable (default is 3).

---

Q. I have installed a custom module to the template, but my edits are not showing up, why?
A. Be aware that any files in skin/smart_template/... will override any files in skin/common_files/.... This is fundamental to the new templating system in X-Cart v4.4.x.

---

TOP TIP - Enable 'Webmaster Mode' if you are unsure of which templates to edit.

7) Notes

Browser Compatibility

The template has been tested in IE 6*/7/8/9, Firefox, Chrome, Opera and Safari (PC).

* Performance varies depending on what Smart Template features you enable.

IE6 is not supported by us, you should encourage your IE6 users to use an alternative browser.

Optimisation

X-Cart v4.4.x has fairly bloated CSS and JavaScript code out of the box, so be sure to optimise as much as possible.

Enable the 'JS/CSS Speedup' tools once you are ready to launch your store (in General Settings).

Consider minifying your javascript files, compressing CSS files, optimising images etc.

Tips

To ensure smooth running of the template and minimise errors, ensure the HTML markup in your product descriptions is clean and valid. Plain text works best, do not copy and paste information from Word docs, avoid using tables - search engines will like you for it!

Changelog

20th October 2010 - v1.0 Released

25th October 2010 - v1.01 - Updated Smart Tabs

4th November 2010 - v1.02 - Recommended products module minor fix

20th November 2010 - v1.03 - Cufon fonts increased to 72

24th November 2010 - v1.04 - Dynamic four level vertical flyout category menu added

6th December 2010 - v1.05 - Animated image slider added

11th December 2010 - v1.06 - Option to place product descriptions in a tab added

14th January 2011 - v1.07 - Tested with v4.4.2

24th January 2011 - v1.08 - Nivo Image Slider added

11th March 2011 - v1.09 - Minor code changes, added Featured Box

5th May 2011 - v1.10 - Tested with v4.4.3

24th September 2011 - v1.11 - Tested with v4.4.4

Useful Tools / Links

Smart Template Graphic Source Files - Sliced for Adobe Fireworks - (zip password is in your order email)

Useful debugging tools - Internet Explorer Developer Toolbar | Web Developer Toolbar for Firefox | Firebug for Firefox

X-Cart Manuals | X-Cart Client Area | X-Cart Forums | X-Cart Bug Tracker | X-Cart Knowledge Base

CuteFTP Professional - Highly recommended FTP client - Get it for $29 here

Picture-Resize - Handy bulk image resizer for thumbnails

KDIFF - Handy file comparison tool

Please vote for this template!

Click Here