This page helps you to understand how to create HTML code for a link or a button that will be placed in your product page to add a product item to the cart.
Basics
Of course you can use html wizard to create link or button, and in most cases it will be adequate, but in some particular cases you may want to create HTML code manually or edit the code generated by the HTML wizard.
First HTML code may display a link like this: Add to cart or a button like this:
Link or button requires different HTML codes.
For link your code will look like this:
<a href="http://www.e-freecart.com/cart?param1=
value1¶m2=value2¶m3=value3">Add to cart</a>
where param1, param2, ...
value1, value2, ... are some concrete parameters
and values that will be discussed below.
You might also want to place a "View shopping cart" link in your page that allows your buyers to check
the cart content without adding any new product. This link is simple and looks as follows:
You are free to change "Add to cart" link or button caption to any other words, for example
"Buy now" or "Buy me". The same applies to the "View shopping cart" caption.
Parameters
Which parameters and values are required or optional in the HTML code?
key (required parameter). This is your unique identifier in our system assigned at the
time of your registration. You can find your key at the
personal details page. You need to login to view this section.
desc (required parameter). This is your product item description.
qty (required parameter). Quantity of product items that will be added to the cart
at a time. Note: later your buyers may change this quantity in the order page.
price (required parameter). Price of the product item. For the price use a decimal
point as delimiter and exactly 2 digits after the decimal point. "111.22", "1.00", "0.50" - correct format;
"1.222", "11,22", "1.2", ".22" - wrong price format.
units (required parameter). You may associate some count of units of measurement with a product item.
They may be Kg, meters, pounds, sq ft or any other measure of your product. In the
order calculation page you can set up your order shipping
costs calculation that depends on the total order units. If you are selling your products
by item set this parameter to 1.0. If you use UPS shipping calculator this
parameter represents weight in pounds (lbs).
curr (optional parameter). Use the currency name as it will be displayed in the order.
If the currency name is omitted a default "USD" will be used. Note: if several products with different currency are
being added to the cart the currency of last added product will be used.
customshipment (optional parameter). Here you may set your shipping cost
if it is different for each product. Otherwise the costs are set in the
order calculation page.
This parameter is taken into account only if the"Custom" shipping was selected
in the order calculation page.
itemsize (optional parameter). This is an item size, in inches. Used only for
UPS Shipment to calculate total order size; UPS Shipment cost may depend on package size.
Value of this parameter should be in form "LxWxH", for example "10x15x20". Choose the smallest
dimension of your item for the "L" value, since this value will be multiplied when several items are ordered.
returnlink and retlinkcaption (optional parameters).
First parameter is URL that will be used in the order page for "Back to shop" button to return your buyer to
the product page, the second parameter allows you to rename this button. If the return link is omitted the system
will try to use the success return link from
return links page; if the
success return link was not set either the system will try to determine your product page URL through the HTTP
"Referer" header sent by the buyer's browser to our system.
Example
Now let's consider a sample code. For example, your key is 1-064123, the product has a description "Test product",
cost 12.00 and weight 1.4 Kg, the default product quantity is 1 and your product page is placed at
http://www.site.com/shop. In this case the code for the link will be as follows:
<a href="http://www.e-freecart.com/cart?key=1-064123&
desc=Test+product&qty=1&price=12.00&units=1.4&
returnlink=www.site.com/shop">Add to cart</a>
Note: in the product description (and any other parameter values) you have to replace all spaces with "+"
character (or %20) so you will use "Test+product" or "Test%20product" instead of "Test product". Also,
if the product name contains some other special characters, for example "&" or "=" characters, it should be
changed to %26 or %3D. This limitation doesn't apply to the code for a button.
You may wish to give your buyers a possibility to set some additional product parameters, for example a choice
of available colors or sizes. You can define a drop-down menu of available options that will be displayed for
your buyers and will be added to the order with the product description. If you wish to use this feature you must
use a button and <form> tag. Inside <form> you must add a piece of code for the drop-down menu(s) with a list of
options. In general this additional code for each menu will look like this:
Where optionDesc1, optionDesc2, ... are the available product
options as it will be added to the product description in the order, and
optionText1, optionText2, ... are the options as it will be
displayed in the drop-down menu.
For example, you sell T-shirt with available sizes Small, Medium and Large and with available colors White, Green
and Red. In this case you code may look like this:
Note: you can place text labels ("Size:" and "Color:") before the respective drop-down menus.
In your product page it will look like this:
If a medium size and green color were selected the product description in the order page will be:
"T-Shirt, medium, green".
You may also wish to define different prices for different options, for example 10.00 for the small size,
12.00 for the medium and 15.00 for the large. In this case you only need to add a colon and then the price
at the end of each product option description (not to the option text that will be shown in the menu!).
Generally it will look like this:
System will insert a string "optionsDesc:price" into the option description that will be added at the end of the
product description and the price that will override the product price defined by the "price" parameter.
As described above the description and price are required parameters but there is one exception. If you have the
ProAccount you can upload and manage the product database. This database is a list of products with
code - instead of desc, price,
units and currency parameters.
For example, your product database has a record "1234,Barby,17.99,0,USD" that defines a product with a code 1234,
description "Barby", price is 17.99 in USD and no shipping units. In this case your HTML code may look like this:
Product database feature is very useful if you sell a product in several shops or if you want to avoid editing the
HTML code of your shop each time you edit the characteristics of your product (description, price...).
You can just edit the product in the product database and the product characteristics in your shop
(or in several shops where this product is present) will be changed automatically.
How to generate HTML buttons and links