More sites for X-Cart
with "add to cart" function

Simply connecting - two steps

Connect external website to your X-Cart shop in 2 steps
1st step: Connecting your external website
Open My addons/More sites for X-Cart with "add to cart" function/settings

Copy JS reference code for external websites into the <HEAD> tag of your external website.
Make sure you have jQuery library (v1.11.3) on your external website.
2nd step: Adding add-to-cart function for button, image or text
When the module is installed you can find block of link codes for external websites in the bottom of all product pages
(like Catalog/Products/your_product).

Use them to insert add-to-cart function for button, text or image on your external website.

For external websites based on Tilda
We love Tilda! It allows you to create a website really quick, download it and get really good looking pages even if you don't have any design skills. All Tilda pages have good typography, styles and adaptive design.

Our addon JS code should be placed to the HEAD zone of your Tilda website.

Open Dashboard/your site/Site settings/more/html_code_for_head-zone/edit_code. Put the JS reference code for external websites into the <HEAD> zone of your Tilda-based website and save it.
Tilda is a visual editor.
Since all elements and links are inserted through the CMS-like interface, you should use Tilda external websites links codes.
Copy "Link for button, text or image" and paste it to the link field for image, button or text link in your external Tilda website to add "add-to-cart" function.
Popup tooltips for links
You can set any popup tooltip text for links in your external websites. To do that just type any text after the product number and a hyphen #addtocart-product-37- in the link field.
If you don't need a tooltip just delete the text after the hyphen.

If you have a HTML external website
If you have an HTML or PHP based external website.
For example, you've created your external website using a desktop HTML-editor, or you already have a website but it's not yet connected to your X-cart shop.

Put the JS reference code for external websites into the <HEAD> tag of your external website.
We've made link code templates for image, button and text links.
Popup tooltip for links
You can set any tooltip text for links in the title attribute.
If you don't need a tooltip just delete it.

Minicart fine tuning
Minicart tooltip
The minicart tooltip text is set in the JS reference code (marked blue).
You can set different tooltip text for each external website.
Minicart style
We did our best to make the minicart design universal and matching most website designs, but you can change minicart style if you wish.

The module uses minicart.css stylesheet by default.
This file is located in the /src/skins/customer/modules/FC/CmsShop/ directory of your X-Cart shop. It is specified in the JS reference code.
To change the stylesheet for external website
  • Make a copy of minicart.css file,
  • Upload it to the same directory with a new name (like minicart_exsite1.css),
  • Update CSS styles in new file to customize the minicart for your external website,
  • Put the new file name minicart_exsite1.css to the JS reference code in your external website.
Therefore you can create a unique minicart style for every external website.

External websites requirements
  • version 5.3.3.x
  • available on FREE edition and higher
External websites
  • rights to add HTML-code to web pages, including HEAD tag
  • jQuery library is connected, version 1.11.3 or higher

Made on