Guide to shopping cart integration
This article explains the HTML script for integrating your online shop items to your Basket2go shopping cart
Introduction
This article suppliment another article - Adding products with Product Builder, and the quick start tutorial . Item information (such as price and quantity) are passed to Basket2go shopping cart by embedding them as form elements within a form tag. The fields (mandatory) that are passed to Basket2go are:
- Product name
- Unit price, and
- Quantity of item
Other optional fields are:
- Product code
- Product options
- Weight of an item - for calculating the delivery charges, and
- Applicable tax
Difficulity level - intermediate. HTML knowledge essential.
Include Basket2go script to the HEAD tag
Make sure the following script has been added into your <head> tag for any webpages. This script should already be present if you have already set-up add-to-cart links.
...
<script id="basket2go-script" type="text/javascript" src="http://checkout.basket2go.net/cart.js" shopid="your-shop-id" ui="1" ></script>
...
</head>
Remember to replace your-shop-id with your own shop id.
Construct the form tag
Evey item information is embedded in a form tag. Make sure each tag contains the class="b2gshelf" class definition. Item fields are defined as input element inside the form as name and value pair.
...
<input type="submit" name="Add" value="Add to cart" />
</form>
The name value pairs is explained in the subsequent section. Notice that a form submit button is used to display the "add to cart" button. Alternatively, it can be displayed using a custom add-to-cart image by replacing input type=submit to input type=image:
Mandatory fields to be included as input element
productname - Product name
A short description of your product which will be display in the shopping cart
productprice
Unit price of the product. This is a numeric field. Do not include the currency symbol
quantity
The quantity of the product that is added to the shopping cart. This is a numeric field.
Optional fields
productcode - Product code (highly recommended)
Product code can be used to uniquely identify your product. Basket2go also use product code to track whether the same product has been more than once to the cart and will update the quantity instead of creating a new row in your shopping cart
weight (optional)
The weight of a product in gram. This is a numeric field. Do not include the unit symbol (g, gram)
tax (optional)
Tax value of the product expressed as a percentage value. Do not include the % symbol
Adding options to the product
Defining options
Multiple options can be added to the form tag to allow the customer to select variant of a product, such as colour or size of a shirt, for example. Options are declared as name: option1 for first option, option2 for second option, and so on. The normal way to implement options is via the select form input element. The example below will display three size options for a T-shirt:
<input type="hidden" name="productprice" value="10.00" />
<input type="hidden" name="quantity" value="1" />
<select name="option1"/>
<option value="M - Medium">Size: Medium</option>
<option value="L - Large">Size: Large</option>
</select>
<input type="submit" name="Add" value="Add to cart" />
</form>
Adding price difference
The above example implements a same price for all options. If there is a need to enable different price for different options, the price difference can be included in the value attribute of respective option element by enclosing the price different by brackets (). The example code snippet below shows the price of 20, 23, 25 and 18 for Kenco Westminster, Café 25, Italia and Mixed respectively.
Note that the currency symbol is not included in the price declaration. The currency symbol is defined in the control panel.
<input type="hidden" name="productprice" value="20.00" />
<input type="hidden" name="quantity" value="1" />
<select name="option1"/>
<option value="Café 25 medium-dark roast (+3.00)">Café 25, medium-dark roast</option>
<option value="Italia dark roast (+5.00)"> Italia, dark roast</option>
<option value="Mixed roast (-2.00)"> Mixed roast</option>
</select>
<input type="submit" name="Add" value="Add to cart" />
</form>
