How to create an e-commerce shopping cart

Best Practices > Step 1 - Settings > The Advanced section > The e-commerce shopping cart >

How to create an e-commerce shopping cart

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

With WebSite X5 you can transform your website into an incredible work place, for example, by adding an e-commerce shopping cart to sell your products/services directly online.

Imagine you have to create a simple e-commerce shopping cart to sell items of clothing. To make things easy, we'll deal with just a few items, organized in a couple of categories. Orders may be sent by mail or by express courier, and we will accept bank transfers and credit card payments. Obviously, with WebSite X5 it is possible to handle a much more complex product catalog, with many more methods of shipment and payment.

All the options for configuring an e-commerce shopping cart are available in the Shopping Cart section of Step 1 - Website Settings | Advanced. Once you have set up your shopping cart, you can create an online catalog using the Product Catalog Object.

Click to expand/collapseHow to create a product catalog

The first thing to do when creating an e-commerce shopping cart is to create the product catalog. All the products for sale on your website are included in the catalog, and each has a complete and accurate description. If there are a lot of products, they are organized in categories.

In the Shopping Cart | Product List window, click on the New Category button to create the categories and subcategories you need. Categories are added directly to the table: they are just containers and have no particular properties. Just give them a name so that you can identify them easily.
Select the category or subcategory to add a new product to and click on the New Product button, then enter the requested information in the Product Settings window. When you confirm the information, the new product will be added to the category.
Repeat these steps for all the products that you want to put on sale.

Click to expand/collapse

The Product Catalog can be imported, if it already exists in .TXT or .CSV format, or exported using the and buttons. For more information on Importing/exporting and how to create and manage the files with the Product catalog, see How to import/export products in the shopping cart.

Click to expand/collapseHow to define shipping and payment methods

When you have created your Product catalog, you have to define the shipping and payment methods that the customer can choose from when making his order.

In the Shopping Cart | Order Management window, the Shipping type List table proposes default values of "Post" and "Express Courier": select one at a time and click on the Edit... button to open the Shipping Type window and set the parameters.
Click on the Add... button to define a new shipping method.

Do the same for the payment methods, using the Payment Type window. Payment methods also include PayPal and credit card. To select PayPal, for example, you have to:

In Payment Type | General, specify a Name and a Description for the payment method;
In Payment Type | Cost, select the Pay now option and set "PayPal/Credit Card" as the Payment Type. Enter your PayPal Account in the field and indicate the pages in the website that must be displayed to confirm payment or to indicate an error during the transaction.
In Payment Type | Type, insert a description of the payment method that is suitable to be included in the order confirmation e-mail that will be sent to the customer when his order is received.
Click to expand/collapseHow to define shipping costs based on the weight/total amount of the order

When you add a new shipping method, you can specify a fixed cost or a variable cost, that depends either on the weight or the total amount of the order.

To create price ranges according to weight:

Use the Weight option in the Product Settings | General window to give a weight to the products in the shopping cart catalog.

The Weight option does not specify a particular measure for the weight. Decide which is the best for your products and make sure you don't change it, to prevent errors in calculating shipping costs.

In the Shopping Cart | Order Management window, click on the Add... or Edit... button, next to the Shipping type List table to open the Shipping Type window and create a new shipping method or edit an existing one.
In Shipping Type |  Cost, select the Cost related to Total Weight option and click on the Add... button. Use the window that opens to specify the Total Weight which must be equalled or exceeded to apply the specified shipping Cost.
Repeat these steps to set all the price ranges you want.

When you have set the prices for the products in the shopping cart (using the Price option in Product Settings | General) you can create the price range according to the total order value:

In the Shopping Cart | Order Management window,  click on the Add... or Edit... button next to the Shipping type List table to open the Shipping Type window and create a new shipping method or edit an existing one.
In Shipping Type |  Cost, select the Cost of total Order amount option and click on the Add... button. Use the window that opens to specify the Order's amount which must be equalled or exceeded to apply the specified shipping Price.
Repeat these steps to set all the price ranges you want.
Click to expand/collapseHow to compose the order form

Obviously, to make an order, customers need to fill in a form, giving the invoicing and shipping details. The procedure to compose an order form as follows:

In the Shopping Cart | Customer Details window, check in the Field List table the fields you can use. Select the one you want to work on and click on the and buttons to make it "visible" or "hidden, and "mandatory" or "optional".
When you have decided how to compose your form, select the Allow shipping data to differ from invoice data option to duplicate the fields which allow customers to give details if the invoice data is different from the shipping data.
Use the editor to write the Sales Terms and Conditions Text which customers must agree to in order to complete their order.
Click to expand/collapseHow to set up automatic e-mail delivery

When a customer places an order, two e-mails must be sent from the shopping cart: the first is the order summary and goes to the Site Administrator, and the second is the order confirmation and it goes to the customer.

In the Shopping Cart | Sending order window, select Send data by e-mail and specify the E-mail Address for receiving Orders (the Site Administrator's e-mail).
If you want to include the order details in .CSV format at the bottom of the e-mail, select the Attach Order Data in CSV format option.
Write the Header Text and Footer Text which will be also used for the User's Order confirmation e-mail.

For more information on the order confirmation e-mail, see How to write an order confirmation e-mail.

Click to expand/collapseHow to handle orders through a database

Instead of receiving an e-mail for every order, if you are using the Pro edition of WebSite X5 you can have them sent directly to an online database.

First, you have to give the details of the database you want to use:

In the Access Management window, click on the Add... button.
In the Database Settings window, add all the parameters necessary for identifying the database and confirm.

When the database has been defined, you can use it with the e-commerce shopping cart:

In the Shopping Cart | Sending order window, select the Send data to a Database option and then select the Database from the list.
You can specify the Tables Prefix Name in which data is to be saved (this is optional).
If you want the Site Administrator to receive notification that a new order has arrived, select the Send an e-mail to notify the data has been received option and specify the Admin e-mail address. In all cases you must enter the Admin e-mail address because this is also used as the sender of the order confirmation e-mail.
Specify whether the order confirmation e-mail should be sent before or after payment is completed.
Choose the type of e-mail being defined from the relevant menu and use the fields to compose the Header Text and Footer Text to be included.
Click to expand/collapseHow to create the "Buy now" button

When you have defined the e-commerce shopping cart, you need to create the pages that present your product catalog and allow customers to buy articles. Creating the "Buy now" button is easy:

In Step 3 - Map select the page to work on and insert an Image Object in an appropriate cell in the page layout table.
Double-click on the Image Object to define it: import the graphic file you want to use for the button.
If you want, go to the Image Object | Display section and choose a Mouse Over Effects.
In Image Object | General click on the button to associate a link Link with the image.
In the Link window, select Add to Cart. You can set up the link in two ways:
if you want to open the product table, select the Show the Product List of the selected Category option and then select a category;
if you want to add a product to the shopping cart, select the Add the selected Product directly to the Cart option and then select the product, specifying the Option, if available, and the Quantity.

Alternatively, the products can be shown in the Product Catalog Object.

For more information on using the Product List Object, see How to work with the Product List Object.

When you test the website offline, a message warns you that the order will not be sent and you will be redirected automatically to the order confirmation page. The e-commerce shopping cart will be fully functional when the website has been published on the server.

 


Best practices:

-

How to import/export shopping cart products

-

How to write notification e-mails

-

How to work with the Product List Object