Add a shopping cart III (eCommerce Series)

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.

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.

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.
    
    
    

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.

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.

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

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

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.

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