Adding a Custom Add-to-Cart Form

Adding a Custom Add-to-Cart Form

This method is only applicable to XLEcom versions 3.93 and below. Version 4.0 already has a similar, more efficient functionality built into the program. Visit the following page for more information: XLEcom Version 4.0 Released.

The following instructions will show you how to add a custom Add-to-Cart form as a replacement to the automatically generated XLEcom Add-to-Cart code. The code provided on this page is for Mal's e-commerce shopping cart.

Example Product Ad using a Custom Add-to-Cart Form
Say for instance you need to utilize a custom Add-to-Cart form that requires multiple drop-down selection options as shown in the following example.

The custom Add-to-Cart form uses three drop-down selection options:

   

 

The following HTML code is the custom Add-to-Cart form for the above example. As you can see in the HTML code, there are three drop-down selection list boxes, one for the display size, one for the mounting options, and one for the color. This Add-to-Cart form utilizes Mal's Shopping Cart.

    <form action="http://ww7.aitsafe.com/cf/add.cfm" method="post">

    <input type="hidden" name="userid" value="98103224">
    <input type="hidden" name="price" value="">
    <input type="hidden" name="product[]" value="">
    <input type="hidden" name="return" value="http://xlecom.com">
    <input type="text" name="qty" size="3" value="1">&nbsp;

    <select name="productpr">
    <option value="ABCO-15TTFB 15 inch display:150">ABCO-15TTFB 15 inch display ($150)
    <option value="ABCO-17TTFB 17 inch display:250">ABCO-17TTFB 17 inch display ($250)
    <option value="ABCO-19TTFB 19 inch display:350">ABCO-19TTFB 19 inch display ($350)
    <option value="ABCO-20TTFB 20 inch display:450">ABCO-20TTFB 20 inch display ($450)
    <option value="ABCO-24TTFB 24 inch display:950">ABCO-24TTFB 24 inch display ($950)
    </option>
    </select>&nbsp;

    <select name="product[]">
    <option value="Desktop Mount">Desktop Mount
    <option value="Wall Mount">Wall Mount
    </option>
    </select>&nbsp;

    <select name="product[]">
    <option value="Black">Black
    <option value="Silver">Silver
    </option>
    </select>

    <br><br>

    <input type="submit" value="Buy Now">

    </form>

Here is how to implement the custom form code:
You can implement the following procedure via the Product Design sheet or Database sheet.

(Step 1) First remove all line breaks from your custom Add-to-Cart form code to make a "single line" of code as shown below:

    <form action="http://ww7.aitsafe.com/cf/add.cfm" method="post"><input type="hidden" name="userid" value="98103224"><input type="hidden" name="price" value=""><input type="hidden" name="product[]" value=""><input type="hidden" name="return" value="http://xlecom.com"><input type="text" name="qty" size="3" value="1">&nbsp;<select name="productpr"><option value="ABCO-15TTFB 15 inch display:150">ABCO-15TTFB 15 inch display ($150)<option value="ABCO-17TTFB 17 inch display:250">ABCO-17TTFB 17 inch display ($250)<option value="ABCO-19TTFB 19 inch display:350">ABCO-19TTFB 19 inch display ($350)<option value="ABCO-20TTFB 20 inch display:450">ABCO-20TTFB 20 inch display ($450)<option value="ABCO-24TTFB 24 inch display:950">ABCO-24TTFB 24 inch display ($950)</option></select>&nbsp;<select name="product[]"><option value="Desktop Mount">Desktop Mount<option value="Wall Mount">Wall Mount</option></select>&nbsp;<select name="product[]"><option value="Black">Black<option value="Silver">Silver</option></select><br><br><input type="submit" value="Buy Now"></form>

(Step 2) Make sure your Item Description does not contain any line breaks such that it is a single line of code as shown in the example below.

    <b>Description:</b><br>Introducing the next generation of UltraPro™ Series Flat Panel LCDs Monitors from ABCO.<br><br>The ABCO UltraPro™ offers bright crisp color resolutions and distortion free images with a fast refresh rate.<br><br>Compliant Standards - UL, CSA, DHHS, FCC-B, MPR-II, NUTEK, ISO 9241, EPA Energy Star<br><br><b>Specifications:</b><br>• 0.24mm Pixel Pitch horizontal<br>• 0.14mm Pixel Pitch vertical<br>• 3-Year Manufacturer Warranty<br><br><b>Sizes Available:</b><br>• 15 inch display (Native Resolution: 1024 x 768)<br>• 17 inch display (Native Resolution: 1280 x 1024)<br>• 19 inch display (Native Resolution: 1600 x 1200)<br>• 20 inch display (Native Resolution: 1600 x 1200)<br>• 24 inch display (Native Resolution: 1920 x 1200)

(Step 3) Next, add a </p><p align=center> to the end of the Item Description line. The </p><p align=center> ends the Item Description paragraph and begins the Add-to-Cart form paragraph.

Place the single line of Add-to-Cart form code after the </p><p align=center> as shown below. The new Item Description line will look like the following with the included Add-to-Cart form code:

    <b>Description:</b><br>Introducing the next generation of UltraPro™ Series Flat Panel LCDs Monitors from ABCO.<br><br>The ABCO UltraPro™ offers bright crisp color resolutions and distortion free images with a fast refresh rate.<br><br>Compliant Standards - UL, CSA, DHHS, FCC-B, MPR-II, NUTEK, ISO 9241, EPA Energy Star<br><br><b>Specifications:</b><br>• 0.24mm Pixel Pitch horizontal<br>• 0.14mm Pixel Pitch vertical<br>• 3-Year Manufacturer Warranty<br><br><b>Sizes Available:</b><br>• 15 inch display (Native Resolution: 1024 x 768)<br>• 17 inch display (Native Resolution: 1280 x 1024)<br>• 19 inch display (Native Resolution: 1600 x 1200)<br>• 20 inch display (Native Resolution: 1600 x 1200)<br>• 24 inch display (Native Resolution: 1920 x 1200)</p><p align=center><form action="http://ww7.aitsafe.com/cf/add.cfm" method="post"><input type="hidden" name="userid" value="98103224"><input type="hidden" name="price" value=""><input type="hidden" name="product[]" value=""><input type="hidden" name="return" value="http://xlecom.com"><input type="text" name="qty" size="3" value="1">&nbsp;<select name="productpr"><option value="ABCO-15TTFB 15 inch display:150">ABCO-15TTFB 15 inch display ($150)<option value="ABCO-17TTFB 17 inch display:250">ABCO-17TTFB 17 inch display ($250)<option value="ABCO-19TTFB 19 inch display:350">ABCO-19TTFB 19 inch display ($350)<option value="ABCO-20TTFB 20 inch display:450">ABCO-20TTFB 20 inch display ($450)<option value="ABCO-24TTFB 24 inch display:950">ABCO-24TTFB 24 inch display ($950)</option></select>&nbsp;<select name="product[]"><option value="Desktop Mount">Desktop Mount<option value="Wall Mount">Wall Mount</option></select>&nbsp;<select name="product[]"><option value="Black">Black<option value="Silver">Silver</option></select><br><br><input type="submit" value="Buy Now"></form>

For the remaining steps, you can use either the Product Design form on the Product Design sheet or edit the values directly in the Database sheet.

(Step 4)

  • Copy the new Item Description / Add-to-Cart form code combination into the Item Description field.
  • Turn OFF the Display Add to Cart, Display List Price, and Display You Save options. This way the program will not automatically create an Add-to-Cart button for this particular Product Ad.
  • Replace the numeric value in the Our Price field with a text value such as "See prices below".

If you want to use the Add-to-Cart image button instead of the standard form button, then replace both the following Form and submit button code with the code shown below:

      Replace...
      <form method="post" action="http://ww7.aitsafe.com/cf/add.cfm">

      with...
      <form action="http://ww7.aitsafe.com/cf/add.cfm" method="post" target="shopcart">

    and

      Replace...
      <input type="submit" value="Buy Now">

      with...
      <input type="image" name="submit" src="../images/add-to-cart-01.gif" border="0" alt="Add to Cart" OnClick="window.open('','shopcart','scrollbars,resizable,status,width=600,height=400')">

The target="shopcart" code in the form tag opens the cart in a popup window

Note: The Add-to-Cart image button may only appear when the Product Ad is published and not in the local html Previews. This is because the publish path reference to the image file on the web server is typically different from that of the local computer's path.

Below is what the final published Product Ad will look like when you use this method. The price is determined by the first drop-down scroll box.

    ABCO-15TTFB 15 inch display ($150)
    ABCO-17TTFB 17 inch display ($250)
    ABCO-19TTFB 19 inch display ($350)
    ABCO-20TTFB 20 inch display ($450)
    ABCO-24TTFB 24 inch display ($950)

When the customer presses the "Buy Now" button using the default Product Ad selections, the Shopping cart will display the following results.

If you want to simply be able to change the prices without having to manually edit the Add-to-Cart form code, then you must create a formula Form function by referencing the prices as a cell links. This procedure is too complicated to explain here, but you may be able to figure this one out for yourself.

Multiple Options Add-to-Cart Form Generator Utility (for use with Mal's e-commerce shopping cart)
Use the following Excel utility file to generate any number of HTML Add-to-Cart form code snippets that will support up to three (3) drop-down option scroll boxes with each scroll box supporting up to 5 selections. The first of the three scroll boxes can include up to 5 different prices.

More Information: Multiple Options Add-to-Cart Form Utility

Sam Raheb
XLEcom Program Developer