Free Shopping cart e-commerce service

   

Support\How to\Generate HTML code

Home
     Standard Account
     ProAccount
     Credit card payments
     Demo store
Support
     FAQ
     Ask question online
     How to
         Set up account?
         Generate HTML code?
         Upgrade account?
     Library
Login
About Us
     Contact Us
     News
     Events


How to generate HTML buttons and links

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&param2=value2&param3=value3">Add to cart</a>
where param1, param2, ... value1, value2, ... are some concrete parameters and values that will be discussed below.

For a button the code will look like this:

<form method="post" action="http://www.e-freecart.com/cart">
    <input type="hidden" name="param1" value="value1">
    <input type="hidden" name="param2" value="value2">
    .........
    <input type="submit" name="submit" value="Add to cart">
</form>
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:
<a href="www.e-freecart.com/cart">View shopping cart</a>

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.

For the button we will have the following code:

<form method="post" action="http://www.e-freecart.com/cart">
    <input type="hidden" name="key" value="1-064123">
    <input type="hidden" name="desc" value="Test product">
    <input type="hidden" name="qty" value="1">
    <input type="hidden" name="price" value="12.00">
    <input type="hidden" name="units" value="1.4">
    <input type="hidden" name="returnlink" value="www.site.com/shop">
    <input type="submit" name="submit" value="Add to cart">
</form>

Additional product parameters

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:
<select name="parameter">
    <option value="optionDesc1">optionText1</option>
    <option value="optionDesc2">optionText2</option>
    .........
</select>
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:

<form method="post" action="http://www.e-freecart.com/cart">
    <input type="hidden" name="key" value="1-064123">
    <input type="hidden" name="desc" value="T-Shirt">
    <input type="hidden" name="qty" value="1">
    <input type="hidden" name="price" value="12.00">

    Size:
    <select name="parameter">
        <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
    </select>

    Color:
    <select name="parameter">
        <option value="white">White</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
    </select>

    <input type="submit" name="submit" value="Add to cart">
</form>
Note: you can place text labels ("Size:" and "Color:") before the respective drop-down menus. In your product page it will look like this:

Size: Color:
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:

<select name="parameter">
    <option value="optionDesc1:price1">optionText1</option>
    <option value="optionDesc2:price2">optionText2</option>
    .........
</select>
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.

And our sample code now will be as follows:

<form method="post" action="http://www.e-freecart.com/cart">
    <input type="hidden" name="key" value="1-064123">
    <input type="hidden" name="desc" value="T-Shirt">
    <input type="hidden" name="qty" value="1">
    <input type="hidden" name="price" value="12.00">

    Size:
    <select name="parameter">
        <option value="small:10.00">Small</option>
        <option value="medium:12.00">Medium</option>
        <option value="large:15.00">Large</option>
    </select>

    Color:
    <select name="parameter">
        <option value="white">White</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
    </select>

    <input type="submit" name="submit" value="Add to cart">
</form>

Product database use

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:
<form method="post" action="http://www.e-freecart.com/cart">
    <input type="hidden" name="key" value="1-064123">
    <input type="hidden" name="code" value="1234">
    <input type="hidden" name="qty" value="1">

    <input type="submit" name="submit" value="Add to cart">
</form>
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.

Copyright © 2001-2003 SYNTONE, Brussels www.e-freecart.com