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

User Guide
Detailed description & instructions for addon


Global structure
The module can be found here after the installation:
And its files (physically) are here:
The module creates the JS reference code for external websites
After you put the JS reference code to external website, the minicart appears there.
Clicking on the minicart the user is transferred to the X-Cart shopping cart page of your online store.
The module generates link codes to place on external websites for all products in your X-Cart shop.
Use them to bring Add-to-cart functionality for buttons, images and text links on external websites.

Features and functions
Module allows you
It allows you to bring the "Add To Cart In One Click" function to any page element you want (like a button, a text hyperlink or an image); this can be done for all pages allowing JS code execution (even located in another domain).

After you put the JS reference code to your external website, a sticky mini-cart icon will appear in a corner of the given static page – it indicates the amount of goods added to the cart and the total sum; a click on the icon opens the cart of the main X-Cart site (where customers can see all their added goods and process the order).
This brings new features to your websites
Due to the module there is a huge area for experimenting with various methods of providing and placing information regarding:
- goods and services,
- methods of use / application of the goods,
- problems and needs facing your customers
All this can be performed with a help of various special design and slicing platforms meant for creating nice-looking, functional and informative pages.
Install the plugin and go beyond any limits: create experimental websites with text and graphics, give your marketing ideas a test without any need to spend more money; sell different complex products and services.

Connecting external website
To connect external website to your X-Cart shop you need to add the main JavaScript reference code to your additional website. When it's done you will see the minicart on the external website pages.
This instruction has two sections
  1. connecting an HTML external website
  2. connecting external website made with Tilda
Connecting an HTML external website in 2 steps
1st step: Connecting external website
Supposing you have created a website using a desktop HTML-editor or you already have a website, but it's not connected to your X-Cart.

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.

The JS reference code is unique for every X-Cart shop.

Make sure you have jQuery library (v1.11.3 or higher) on your external website. You can find how to download and connect it on official jQuery website.
Save changes and upload files to your hosting. When it's done a sticky mini-cart icon will appear in a corner of the given pages. A click on the icon opens the cart on the main X-cart 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) in X-Cart administration panel.
Use them to insert add-to-cart function for button, text or image on your external website.

We've made link code templates for image, button and text links.
To make image with add-to-cart function
Find the corresponding image tag in the HTML code of your external website (like the selected line below) in any HTML-editor of your choice
<div id="g_container"><div class="logo"> <img src="images/logo_03.png" width="515" height="102"></div>
Take link code for the image from the X-Cart product page (key points marked red).
<a href="#addtocart-product-37" title="add to cart"><img src="YourImage.jpg"></a>
And paste it to get code like this:
<div id="g_container"><div class="logo"> <a href="#addtocart-product-37" title="add to cart"> <img src="images/logo_03.png" width="515" height="102"></a></div>
You can change the tooltip text by editing the title attribute.
To make a button with add-to-cart function
Search for the corresponding button code on your external website page in HTML-editor (like the selected line below)
<button>Fancy text button</button>
Or create a new button using button code from the X-Cart product page (product specific code is selected red below)
<button data-addtocart-product="37" title="add to cart">Fancy text button</button>
You can change the tooltip text by editing the title attribute.
To make a text-link with add-to-cart function
Find the text on your external website page in HTML-editor (like the selected line below)
Long or short text about your product
Take link code for the image from the X-Cart product page (key points marked red)
<a href="#addtocart-product-37" title="add to cart">Long or short text</a>
Paste it to text like this with add-to-cart function.
<a href="#addtocart-product-37" title="add to cart">Long or short text about your product</a>
You can change the tooltip text by editing the title attribute.
Tooltip text for links
You can set any popup text in the title attribute.

Connecting a Tilda based external website in 2 steps
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.
1st step: Connecting external Tilda website
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.
2nd step: Adding add-to-cart function for button, image or text
Tilda is a visual editor. Since all elements and links are inserted through the CMS-like interface, you should use Tilda external websites links code.

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.

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) in X-Cart administration panel.
Use it to append add-to-cart function for button, image or text link on your external Tilda website.
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.
Creating an image with add-to-cart function
  1. Create the Image block (like IM01)
  2. Press Content
  3. Copy the "Link for button, text or image" string to the link field
  4. Press Save and close
  5. Publish the page.

    Now you can click the image to add the corresponding product to the cart of your X-Cart shop!
Creating a text link with add-to-cart function
  1. Select text
  2. Click the "add link" button ∞
  3. Copy the "Link for button, text or image" string and paste it to the link field
Creating a button with add-to-cart function
  1. Create the Form and Button block, like BF302
  2. Press Content button to open the content editing dialog
  3. Copy the "Link for button, text or image" string and paste it to the link field
  4. You can set any popup text after the product number and a dash symbol in the link #addtocart-product-37-
  5. If you don't need a tooltip you can simply delete the text after the dash symbol.
Changing the tooltip text
  1. You can set any popup text after the product number and a dash symbol in the link #addtocart-product-37-
  2. If you don't need a tooltip you can simply delete the text after the dash symbol.

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.
data-url="sitename" data-title="Your own minicart title"></script>
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.

Websites requirements
X-Cart website
  • 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

Licence
Number of connected external websites and X-Cart licence
The amount of external websites connected to one X-Cart shop is logically unlimited. You won't have to buy additional licences as far as all orders made by users on external websites are processed with the same X-Cart shop. External websites are working as additional showcases.
Connecting jQuery library
Put this code into the <HEAD> tag of your external website.
Contacts

Made on
Tilda