close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Web development tutorial

Add a shopping cart III (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: eCart, Dreamweaver, PHP


In the eCommerce series, you will learn about using eCart to create a responsive shopping cart for selling your products online. There are three steps to this process, each with a dedicated tutorial. This tutorial shows you how to design a shopping cart page that holds informational details about the products a customer is purchasing using the eCart Display Manager. The first shopping cart tutorial shows you how to create an eCart object which defines the structure of your cart. The second shopping cart tutorial shows you how to place an Add to Cart button on a product catalog which your customers can use to select items to purchase and add them to their shopping cart.

You'll find a linked index including an overview of each tutorial belonging to the eCommerce series at the bottom of this page.

arrow downWhat do you need to start?

  1. Dreamweaver CS4 or higher.
  2. eCart 5 or higher installed and activated in Dreamweaver.
  3. Site defined in Dreamweaver. For assistance defining a site, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
  4. PHP web page and connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
  5. Product catalog pages. For assistance creating product catalog pages, view this tutorial: Create a product catalog.

arrow downDesign a shopping cart

Using eCart's Display Manager, you will create, configure, and design a responsive shopping cart page for your online store. The shopping cart, a temporary personal database that holds informational details about the products a customer is purchasing, is where your customer will be taken to review the items they have selected to purchase. From this page, they can update quantities, remove items, and proceed to check out.

New in eCart 6! Responsive shopping cart displays are generated for smartphones, tablets, and desktop devices.
  1. Create a new PHP page in your site called cart.php

  2. Go to WebAssist > eCart > Display Manager to open the eCart Display Manager interface.

  3. Select the correct Cart object from the menu. In this tutorial, it is named eCart1. If you have only one Cart object created for this site, it will be selected by default.

  4. The Display type menu has four different types of shopping carts, Updateable cart, Read-only cart, Email-friendly cart, and Quick cart. In most cases, an Updateable cart is the best choice because it provides your customer with the opportunity to modify the cart contents before checking out.

  5. Choose your desired Font group to style the HTML text in the shopping cart.

  6. Select a Color scheme from the various options to be applied to the shopping cart display. If the colors are not as you would like, you can modify them using the Theme-It interface. (See below for more information.)

  7. Select the Design for the shopping cart layout from the six options to configure HTML structure and CSS styling in the shopping cart display.

  8. The Button type allows you to choose image buttons or form buttons for your cart.

  9. The Theme-It interface can be used to modify the color scheme used in your cart page. Click the Theme-It button to manage additional colors options.

  10. The Manage Colors tab allows you to easily change all the colors defined in your form's design. Within this section of the interface, you can replace a currently used color with a new one.

  11. Preview your choices in a browser using the Preview tab.

  12. The Color Importer tab allows you to import an image or webpage that you wish to sample colors from.

arrow downPreview responsive design options

  1. Choose one of three options in the eCart Display Manager to preview your chosen design options: Smartphone, Tablet, and Desktop.

  2. Smartphone preview:

  3. Tablet preview:

  4. Desktop preview:

  5. Click Next when you are done.

arrow downConfigure shopping cart columns

The Display Manager allows you to configure the cart columns that will display on your shopping cart page. The cart columns area displays the columns that will be included in the shopping cart display. The most common options are included by default but others can be made available by clicking the add icon.

  1. Add, delete, and group columns in your shopping cart. The columns are the individual details associated with an item when it is added to or updated in your shopping cart.

  2. The cart columns include Responsive options, Phone Only, Max Tablet, Tablet Only, Min Tablet, Desktop Only, and Always Display. The responsive option determines whether or not the cart columns and the columns contained within cart columns are displayed on a particular device.

  3. Click the pencil icon to edit the cart columns.

  4. Click OK and Next when you are satisfied with your choices.

arrow downDisplay discounts and charges

The final step of the eCart Display Manager allows you to determine how charges, discounts, shipping, and tax will be displayed on your shopping cart page.

  1. Choose between a summary of all charges for the section (Summary), individual line items within each section (Individual), or disabling that section in the display (Do not show). By default, the Summary option is selected which summarizes each of the options in their own section of the cart display.

  2. Preview your design choices as you did before using the Phone, Tablet and Desktop icons.

  3. Click Finish.

  4. Save the page. (Ctrl or Cmd + S).

arrow downWhat's your next step?

Peruse the following section for an overview of the WebAssist eCommerce series. For further help, check our Community Forums or post comments to any of the tutorials

arrow downWebAssist eCommerce series

With eCart technology as the cornerstone of the WebAssist eCommerce series, these in-depth tutorials will walk you through the steps of building an eCommerce site: product catalogs, shopping carts, product options (both static and dynamic), and checkout including payments. Completing the eCart portion of the series is help for setting up a back-end administration to manage your eCommerce business. Additionally, to be used with or without eCart, you will learn about payment gateway providers, hosting solutions, and online shipping accounts.

  1. Introduction to the eCommerce series: An overview of the WebAssist eCommerce series including a detailed description of each tutorial.

  2. Create a product catalog: Learn to create a dynamic product catalog for an online store.

    1. In Create a product catalog I, you will learn if a dynamic product catalog is appropriate for your online store and how to complete the initial set-up.
    2. In Create a product catalog II, you will learn how to create product administration pages, product catalog pages, and order pages for your dynamic product catalog.

  3. Add a shopping cart: Learn about using eCart to create a responsive shopping cart for selling your products online.

    1. Create an eCart object to define the structure of your shopping cart.
    2. Place an Add to Cart button on a product catalog which your customers can use to select items to purchase and add them to their shopping cart.
    3. Design a responsive shopping cart page that holds informational details about the products a customer is purchasing.

  4. Add dynamic product options I: Learn how to add dynamic product options to your website's online store using eCart's shopping cart functionality.

  5. Add dynamic product options II: Learn how to add dynamic product options, which include options within themselves (for example, incremental pricing), to your website's online store using eCart's shopping cart functionality.

  6. Add static product options: Learn how to add static product options to your online catalog store.

  7. Add checkout and administration: Learn how to manage checkout, payments, and the back-end administration of your eCommerce site using the seven tabs in the eCart Checkout Wizard - Settings, Payments, Shipping, Tax, Orders, Email, and Form Design.

    1. In the Settings tab, you will choose the general settings for your site and checkout pages.
    2. In the Payments tab, you will set up payment provider and checkout options.
    3. In the Shipping tab, you will choose shipping providers and set charges.
    4. In the Tax tab, you will set the rules for sales tax or VAT.
    5. In the Orders tab, you will configure your order storage options.
    6. In the Email tab, you will enter your email server settings.
    7. In the Form Design tab, you will select your checkout form from preset designs.

  8. Online payment solutions: Learn about online payment solutions including seamless checkout, remote checkout, and various PayPal checkout options.

  9. Hosting provider solutions: Learn about and choose between five hosting providers, 1&1, GoDaddy, HostGator, Network Solutions, and DreamHost.

  10. Online shipping solutions: Learn where and how to set up free shipping accounts with FedEx, UPS, USPS, and Australia Post.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question





Ease of use


security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.