Glossary Item Box

Squirrelcart v6.1.0

Add to Cart Manually

Overview

While we recommend that you let Squirrelcart generate your product pages, you do not have to. This page explains how you can add HTML to any page you like for the purpose of adding an item to the cart. In this topic, we will explain 2 methods you can use to add an item to the cart:

Gather Data

Before we can add the code necessary to add an item to the cart, we will need to gather some information about that product.

  1. Add Item to Database
    In order for you to add an item to the cart, that item must be present in Squirrelcart's database. If the item you wish to work with is not in your database, follow the instructions in the "Creating and Modifying Products" topic to create it.
  2. Obtain Product Record Number
    Each product has a unique record number in your database, so Squirrelcart can identify it. To locate the product's record number, view your products by clicking Catalog > Products > Manage in the control panel. Locate the product you wish to work with. The record number for that product will be listed in the first column, under the # symbol. Write this number down.
  3. Obtain Product Option Information
    If you wish to use product options for this product, you will need to add them to the product in the database, as described in the Managing Your Store > Products > Product Options section of this documentation. Once you've added them, you will need to write down the options and their choices in the order they appear on the product's record. The order is very important to ensure the appropriate option/choice is added to the cart. For example, you would write down something like:
    Size: small, medium, large
    Color: red, blue, yellow
Using a Form to Add to Cart
  1. Open page in editor
    Open the page you wish to add the code to. For this example, we will start with a simple blank page which initially looks like this:

    <html>
    <head></head>
    <body>
    </body>
    </html>

  2. Add HTML
    Inside the <body> tag, add a <form> tag as in this example, which shows the minimum amount of code needed to add an item to the cart:

    <html>
    <head></head>
    <body>
         <form action="store.php" method="get">
              <input type="hidden" name="prod_rn" value="274" />
              Quantity: <input type="text" name="quantity" size="3" value="1" />
              <input type="submit" value="add to cart" />
         </form>
    </body>
    </html>


    In the code above, the first field is named prod_rn and the value should be set to the record number of the product.
  3. Add Options
    If you would like to add options, you will need to add more fields to your form. Let's assume you had the following 5 options and choices specified on the product's record, in the following order:

    Option type: Select
    Option name: Size
    Choices: small, medium, large

    Option type: Radio
    Option name: Color
    Choices: red, green, blue

    Option type: Checkbox
    Option name: Add Gift Wrap

    Option type: Text
    Option name: First Name

    Option type: Textarea
    Option name: Engraving

    The HTML you would need to add for these 5 options would be:

    <!-- For first option, name starts with 0, as in "option_0" -->
    Choose size:
    <select name="option_0">
         <option value="0"></option>
         <option value="1">small</option>
         <option value="2">medium</option>
         <option value="3">large</option>
    </select><br />

    <!-- For 2nd option, name is "option_1" -->
    Choose color:
    <input type="radio" name="option_1" value="0" />Red<br />
    <input type="radio" name="option_1" value="1" />Green<br />
    <input type="radio" name="option_1" value="2" />Blue<br />

    <!-- For 3rd option, name is "option_2" -->
    Add Gift Wrap?: <input type="checkbox" name="option_2" value="0" /><br />

    <!-- For 4th option, name is "option_3" -->
    First Name: <input type="text" name="option_3" />

    <!-- For 5th option, name is "option_4" -->
    Engraving: <textarea name="option_4"></textarea><br />

Using a Link to Add to Cart

The HTML code needed to add an item to the cart using a link is similar to the code needed to add to cart using a form. The only difference is that you need to pass field/value pairs using a query string in the URL. Using a link to add to cart will not allow a customer to specify choices for options, or for quantity.

Simple

The simplest way to add (1) unit of an item to the cart via a link is to add HTML similar to this example to your page:

<a href="store.php?prod_rn=274&quantity=1">Click Here to Buy 1 Item</a>

The number that appears after "prod_rn=" represents the product's record number in the Products table.

 

With Options

You can add options to the item as well, by specifying their names and values in the URL. Using the same 5 options described in the Using a Form to Add to Cart section above, you could set the options as follows:

<a href="store.php?prod_rn=274&quantity=1&option_0=2&option_1=0&option_2=0&option_3=Fred&option_4=Happy%20Anniversary">Click Here to Buy 1 Item</a>

 

For Use in Email

You may need to send someone a link to add an item to the cart using email. You can do this in most email clients by just typing the URL, as in this example:

http://www.example.com/store.php?prod_rn=274&quantity=1 

Field Information

The following table shows the fields that can be passed, along with their expected values.

 

Field Name Required Expected Value
prod_rn y integer - representing the product's record number in the Products table
quantity y integer - number of units to add to cart
microtime n

This field is used to ensure that a product is not added to the cart twice if a customer refreshes the page after submitting the form. It needs to be set to any unique value, and should change every time the product page is loaded.

If your product page name ends in ".php", you can set microtime as follows:

<input type="hidden" name="microtime" value="<?php print microtime()?>" />

 

If your product page does not end in ".php", you can set microtime as follows:

<input type="hidden" id="microtime" name="microtime" value="" />

<script type="text/javascript">

     document.getElementById('microtime').value = Math.random();

</script>

option_X n

This field is used to add product options to the cart. The X should be replaced with an integer representing the position of the option on the product's record, starting with 0. If the option is of type select or radio, the choices should have integer values starting from 0, representing the order of  choices as they appear on the product's record. Example:

<select name="option_0">
     <option value="0"></option>
     <option value="1">Small</option>
     <option value="2">Medium</option>
     <option value="3">Large</option>
</select>

 

 

Important Notes:

  • You cannot use the POST method in your form tag. You must use GET.
  • When specifying options and their choices, they MUST be represented in the order they appear on the product's record. If they are not in order, they will not correctly correspond to the options and choices for that product, and will not work correctly.
  • When using this method, you may wish to make some template modifications as follows:
    - Remove the Product Catalog nav block to keep customers from browsing the cart using Squirrelcart's storefront page
    - Remove the "modify" link in the checkout
    - Remove the product links in the checkout
  • If you plan to create pages to add items to the cart on a domain other than the one used for your Squirrelcart installation, you will need to specify the referring domain name on your Store Settings page, using the Authorized Hosts field in the Security Settings section. This field will only appear when the Check Referrer field in the same section is checked.
  • If you plan on creating links to add items in emails, you should disable the Check Referrer option in Store Settings.

 



 

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.