close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Add a shopping cart (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: eCart, Dreamweaver, PHP

rating

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 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. The third shopping cart tutorial shows you how to design a responsive cart page that holds informational details about the products a customer is purchasing.

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 downCreate an eCart Object

Your first step in building a shopping cart is to create an eCart Object for your Dreamweaver site or edit an existing one. An eCart Object is the backbone of your shopping cart functionality. It defines important settings such as the currency your store will use, as well as discounts, shipping, or tax rules. All pages that contain shopping cart functionality must have an eCart Object applied to the page.

  1. Open a PHP page of your website from the Dreamweaver Files panel.

  2. Go to WebAssist > eCart > eCart Object to open the eCart Object panel and click Add.

arrow downeCart object panel tabs

The eCart Object panel consists of 7 tabs for configuring various settings for your cart. At this point, you only need to configure the General tab. Although we review the other tabs, you can leave the options at their default settings and come back later to edit them if you wish.

  1. In the Cart name field on the General tab, enter a name for your shopping cart. Review the options on the General tab to ensure that everything fits the store you intend to have. In most cases, the default settings will be correct.


  2. Move to the Columns tab and just as you would a database, customize it to fit the products you are selling. Using boats again as an example, you would want additional columns to address whether the boat includes a motor, year built, or length.


  3. Proceed to the Calculations tab where the eCart Object can be configured to calculate values based on column contents of your cart.


  4. The eCart Object can be configured to perform additions and subtractions from the subtotal of the items in your cart. Discounts decrease the cart total. Charges, tax, and shipping increase the cart total.








  5. Click OK and then Finish.


    Because you can re-enter this Dreamweaver interface at any time, you can easily modify how your cart functions by going to Insert > WebAssist > eCart > eCart Object and choosing Edit. So you should feel free to use the default settings for now and return in the future to customize further.
    .

arrow downWhat's your next step?

Now that you are finished creating the eCart object, proceed to the next shopping cart tutorial: Add a shopping cart II (eCommerce Series) where you will 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.

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
rating

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

Content

rating

Layout

rating

Ease of use

rating

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.