Setting Up Your Cart for the First Time

MercuryCart has been built to allow your cart pages to look the same as your main website. While not essential, a basic grasp of HTML and CSS is an advantage and advanced users will be able to employ this to great advantage in designing the layout of the shopping cart. If your skills in this area are limited, we would recommend that you use the basic settings to start with; a highly professional looking cart can still be achieved using only the basic settings.

Adding a Basic Product

Watch a movie on adding a simple product code

In the next example we will run through what is needed in the way of HTML code in your web site to allow a single product to be added to the cart. While this example is the most basic form of adding a product, it will give you an understanding of what is happening behind the scenes.

Each of your pages that contain an item(s) for sale has to all at least four basic HTML properties:

1. An HTML form tag pointing to your cart page, with the method set to POST.

2. An HTML hidden field carrying your product code / SKU number.

3. An HTML hidden field carry a instruction telling the cart what to do ( in this case that is add)

4. An HTML submit button to send the information to the cart.

A Basic Set Up

The brief example below is designed to give you a basic understanding of the code needed to add a product to your cart. Of course before this would work, the product(s) would have to be added to your database file within MercuryCart; it is recommended that you read through the code below first to give you the general idea. We shall be dealing with adding products to your database a little later on in this manual.

An HTML form:
This is added into your web page and encapsulates the other form elements; the method attribute is set to POST and the action attribute points to the URL of your cart. The example below shows the complete opening form tag for the fictitious widget site.

<form action="http://widget.MercuryCart.com/widget/files/index.html" method="post">

<input type="HIDDEN" name="code" value="9214"> 

The line of code above tells the shopping cart to get all the information for product number 9214 ready.

The next hidden field used is to tell the shopping cart what to do with the information being sent. Here it is being told to carry out an add action.

<input type="HIDDEN" name="action" value="add">

And of course you need a submit button, to allow the customer to send all the information. We then close the form off with a closing form tag:

<input type="submit" name="Submit" value="Add to Cart">

</form>

So the basic code in its entirety to add an item with the product code of 9214 to the cart would be as follows:

(example 1.1)

<form action="http://widget.MercuryCart.com/widget/files/index.html" method="post">.

<p>

<input type="HIDDEN" name="code" value="9214">

<input type="HIDDEN" name="action" value="add">

Super Widget</p>

<input type="submit" name="Submit" value="Add to Cart">

</form>

In the basic example above no quantity is being sent (which we shall cover next), but it is worth noting that if no value is sent for the quantity, the cart adds a default value of one item.

Adding a Quantity Field

Watch a movie on adding a simple quantity field

To allow the customer to choose how many of a certain product they wish to purchase, we can employ the services of a text field with a name of “qty”. This allows the customer to change the quantity to any number of products that they wish. This field is normally set to 1 by default. The HTML code for adding a quantity box is as follows:

<input type="TEXT" name="qty" value="1" size="3">

(the above code example must be entered between the form tags)

If the above code was submitted it would carry a value of just one unit, telling the MercuryCart to add one product to the shopper’s basket, however the shopper can change the value to what ever they wish. So by adding this to our basic setup (example 1.1) we now have the following:

(example 1.2)

<form action="http://widget.MercuryCart.com/widget/files/index.html" method="post">.

    <input type="HIDDEN" name="code" value="9214">

    <input type="HIDDEN" name="action" value="add">

  <p>Super Widgets 

    <input type="TEXT" name="qty"  value="1" size="3">

</p>

<input type="SUBMIT" name="Submit" value="Add to Cart">

</form>

The shopper can now add as many of the items to their cart as they wish too. There are many other parameters that can be added and we will be covering them later in the manual. The purpose of the example above was to highlight the basic code needed.

It is possible to add multiple options to a product such as colour, size and many other variations; this is covered in the advanced section at the end of this manual.

Lets Get Started Setting Up Your cart.

The first thing you will most likely want to do is to add your products to your database. This can be achieved in a couple of different ways, but they are all controlled via the Product Manager section of the site: to access this you will first need to log in to the admin section, you should have been emailed all these details, if not or if you are unsure of any aspect please contact tech@mercurycart.com.

Product Manager

Adding Products for the First Time

Watch a movie on adding a product online

Before any products can be added to the cart, they must have already been entered into your MercuryCart database.

Online Management

Product Manager > Add Product

1.1 Screenshot of add products admin, where products can be added one at a time , for the adding of large numbers of products the offline management feature is a better solution

Offline Management

This is the option that most people start off with, particularly if a large number of items need to be added at one time. It allows you to add data for multiple products at once using a spreadsheet program such as Excel, and accepts files in the CSV format. Please note below you upload any files to Mercurycart please read this section and also view the

Watch a movie about adding a product offline

Product Manager > Product Template

1.2 download template admin screen shot, for normal use the Download Raw Text File option .

Product Management Example

For our new Super Widget store we are going to add a couple of products to the MercuryCart Database. Because we have a few products to add we have decided to use the “Offline Management” feature which is the easiest way to add multiple items.

We enter the MercuryCart admin section for the Widget store and select the “Product Manager” section. We then navigate to “Offline Management” (screen shot 1.2) , once there we download the “Product Template”, and save it to our local machine.

Once the file is downloaded we can open the product_template.csv in Excel or any other spread sheet program. When you open the file you will notice that document fields have been marked for you across the top of the document (screen shot 1.3 ). While it is obvious what some of the fields are for, some may not be, so we will run through them and give a brief description of the function of each field.

 1.3 screenshot of product template opened in Excel ready for products to be entered, notice the default fields across the top to help you identify what to enter in the fields

SKU:

Contains your product id, this must be a unique entry and no two products can share the same number. You are not restricted to numbers as product ids, letters can also be used, however it is advisable to avoid the use of any special characters.

NAME:

This field is the text that the customer will see has the product description in their cart, and also provides the description contained in the confirmation email detailing the purchase that is sent to the shopper after the transaction. We recommend that the product is described in simple terms as not to confuse the customer.

INVENTORY:

The Inventory option allows the input of your current stock level. If you had 56 Super Deluxe Widgets in stock, the number inputted into the Inventory level would reflect this, there is also an option in the Product Manager > Inventory Settings that allows Back Orders, we shall go into greater detail on Back Orders in the Product Manager section of this manual.

WEIGHT:

The Product Weight field is used to adjust the total shipping weight and is covered in great detail in the shipping section of this manual.

LENGTH:

The length field is the length of your product – this is to be used in the future for shipping calculations.

HEIGHT:

The height field is the height of your product – this is to be used in the future for shipping calculations.

WIDTH:

The width field is the width of your product – this is to be used in the future for shipping calculations.

QUICK BUY:

This accepts one of two possible values, y which = YES and n which = NO. By setting this to y it allows the shopper to add products directly to their basket after finding a product using the MercuryCart Search function, it is recommended that this is set to y.

QUANTITY MODIFICATION:

Allows the shopper to amend the amounts of the product to be amended from within the cart, again we recommend that this setting is set to y.

TAX 1 and TAX 2

Two tax fields are included, and either one, two or none can be used, before this becomes active, tax regions have to be set up in the Payment Settings > Tax Settings, this is covered in detail in the Tax Settings part of this manual.

ALTERNATIVE OPTIONS: (Number of Product Options)

Controls the number of different options (colours, size etc) that can be associated with a product. This is covered in the “Adding a product with Multiple Options“.

PRODUCT URL:

This must be set to the absolute URL of the product including http://, if the page for the product was super-widget.html, then you would enter http://www.widgetworld.com/super-widget.html (assuming that your domain name was www.widgetworld.com ).

UPSELL 1 to 6:

Allows the input of other product codes. When a shopper adds a product to their cart this feature allows other associated products that may be of interest to the customer to be displayed. This allows the cart owner to take advantage of powerful cross selling techniques.

KEYWORDS:

This field accepts keywords separated by a space that you would think a shopper would use to find a certain product when using the search feature.

Appendix 2 - Product Upload Specification

Notes: The product upload must be a comma separated file. Each field is separated by a comma. If there is a comma within any field, then that field must be declared as a text field by placing double quotes (“) around the field, i.e. sku,”product, name”,price

All fields must be listed for each line, it will denote in the table below whether that field must have a value in it however. For fields that are not required, there need not be any value in the field.

However, note that due to a bug within Microsoft Excel, when you are exporting a CSV for which there is NO VALUE in the LAST field of a CSV Export, Excel may not include the required last comma. To avoid this potential problem, if you are not including any keywords for a line, place a space in the cell in Excel.

(table 1.1)

Uploading the Completed Data

Once you have filled in all the details, you need to save the file as filename.csv (replace filename with what ever value you wish, but remember to keep the .csv extension) and upload it to the server using: Product Manager > Offline Management > Upload List.

Just select the Browse button and navigate to the file on your local machine, ensuring that the correct radio button is selected in step 2, the options are Append or Replace. Append will concatenate your list with an already existing product list, while Replace will overwrite any product list that is already in the database (screen shot 1.4 ).

Since this is the first time we have added any products we will pick Replace. After the successful upload of our new product list we will need to install it, this is done by going back to the Offline Management screen and selecting Install List, this is essential since the product list will not be active until it’s been installed.

 1.4 screenshot showing the upload manager, notice the file extension of .csv

Restore a Product List

It is worth noting here, that if after uploading and installing your product list you find that you have made errors, you can restore any of your past product lists by using the “Restore Product List Feature” this is located under the Product Manager section and keeps a record of all the lists you have uploaded (screenshot 1.5).

You now have your database populated with products; in the next section we will look at the options for customizing the cart pages to mimic the look of your main website. Let’s take a look at the options that are available to create the look of the Cart / Checkout pages; these are located in the Appearance Settings Section.

  1.5 Screenshot showing the restore product data list