Add a shopping cart (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: eCart, Dreamweaver, PHP

3 ratings | Sign in to rate this tutorial | View comments

next section

What 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.

next section

Create 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.
   
   
   

next section

eCart 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.
   .

next section

What'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.

WebAssist 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.

Reviews 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.

3 ratings | Sign in to rate this tutorial