Add a shopping cart II (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: eCart, Dreamweaver, PHP

1 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

Delete existing Add to Cart button

Using eCart's interface, you can create an Add to Cart button to be placed beside each product listing on your website. When clicked, this button will add the item that is for sale to the shopping cart. Customers can continue shopping on your store, adding additional items to their cart, and then proceed to the shopping cart page when ready to purchase those items. But first it is necessary to delete the existing button on the form.

1. Open the product_detail.php page.
   
   
   
   
   
2. In split code view, select the Add to Cart Button that is currently on the page and delete it.
   
   
   
   
   
3. Within the code, look for the opening (<form...) and closing (</form>) tags and remove both tags. Because eCart buttons include their own form tags, leaving the existing tag will create a conflict.
   
   
   
   
   
   

next section

Create an Add to Cart button

Now you will create an Add to Cart Button and place it on the detail page of your product catalog using the eCart interface. This will allow customers to purchase your products displayed in your online store.

1. In code view, place your cursor as indicated, inside <div class="WADADetailsButton"></div>.
   
   
   
   
   
2. Click WebAssist > eCart > Add to Cart Button.
   
   
3. Click on Look up item ID from recordset.
   
   
4. Set the Recordset to WADAproducts.
   
   
5. Set the ID Column to ProductID.
   
   
6. Type cart.php in the Go to page field.
   
   
   
   
   
7. Click the Bindings tab of the Add to Cart Button dialog. Here you're going to set the values for the product details so the correct product is added to the cart. As well, you can determine how the cart is updated and if a redirect should take place upon an update.
   
   
8. Click Name from the Column list.
   
   
9. Click the Dynamic Data (lightning bolt) button next to the Default value field.
   
   
   
   
   
10. On the Dynamic Data dialog, expand the Recordset (WADAproducts) field.
    
    
11. Select the ProductName variable.
    
    
12. Click OK.
    
    
    
    
    
13. Click Description from the Column list.
    
    
14. Click the Dynamic Data (lightning bolt) button next to the Default value field.
    
    
    
    
    
15. On the Dynamic Data dialog, expand the Recordset (WADAproducts) field.
    
    
16. Select the ProductShortDesc variable.
    
    
17. Click OK.
    
    
    
    
    
18. Click Thumbnail from the Column list.
    
    
19. Click the Dynamic Data (lightning bolt) button next to the Default value field.
    
    
    
    
    
20. On the Dynamic Data dialog, expand the Recordset (WADAproducts) field.
    
    
21. Select the ProductImage variable.
    
    
22. Click OK.
    
    
    
    
    
23. Click Weight from the Column list.
    
    
24. Click the Dynamic Data (lightning bolt) button next to the Default value field.
    
    
    
    
    
25. On the Dynamic Data dialog, expand the Recordset (WADAproducts) field.
    
    
26. Select the ProductWeight variable.
    
    
27. Click OK.
    
    
    
    
    
28. Click Price from the Column list.
    
    
29. Click the Dynamic Data (lightning bolt) button next to the Default value field.
    
    
    
    
    
30. On the Dynamic Data dialog, expand the Recordset (WADAproducts) field.
    
    
31. Select the ProductPrice variable.
    
    
32. Click OK.
    
    
    
    
    
    Once you have finished configuring the Add to Cart Button, you may discover that you want to add a new column. If this happens, you must return to the eCart Add to Cart Button interface and manually bind the new column after adding the column to the eCart Object. Otherwise, you will get an error message.
    
    
33. Updateable option: You have the option of making a column value editable and including an updateable form field. Cart columns can be updated using one of the three types of form fields: hidden field, text field, or select list.
    1. For example, by checking the Updateable field for Quantity (which automatically uses a text field), your customer can purchase more than one of the same product.
       
    2. However, there may be some instances when you would not want Quantity updated. Going back to the example of selling boats, if you had only one Bayliner for sale, you would not want to make Quantity an updateable field.
       
    3. If you want to use eCart to set up donations, one easy way is to configure the price field to be updateable, allowing someone to enter how much they intend to donate. This will require some additional configuring. Refer to Donations with eCart for more information.

    
    

    
    
    
    Using a select list to update a cart column requires that you configure the list's options after creating the button. This can be done directly through the Property Inspector for the list.
    
    
34. If Item In Cart option: You can select one of four options from the Action list to determine how an item is populated into the shopping cart if it's already present.
    1. Sum increases the quantity of the item in the cart.
    2. Ignore does not allow the item to be added. Add New creates a new instance of that item in the cart.
    3. Replace adds the item to the shopping cart and replaces the existing item.

    
    

35. Redirect option: You may decide to redirect a customer to another page. If so, click the Redirect checkbox and enter a new URL.
    1. For example, you might want to explain why their action is ignored when they try to purchase an item on back-order.
       
    2. This redirect will override the redirect specified on the General tab.

    
    

36. Now click on the Button tab of the eCart Add To Button interface to configure the type of button displayed. You have the option of selecting different color schemes and form buttons. Or you can create a custom button and specify its image location.
    
    
    
    
    
37. Click OK to add the button.
    
    
38. Save the page (Ctrl or Cmd + S).
    
    
    
    
    
39. You can preview your page by going to File > Preview in Browser and selecting your browser.
    
    
40. You now have created an Add to Cart Button for your Product Details page that will add selected products to the cart.
    
    You may find that you want to make changes in the eCart Add to Cart Button interface in the future. If so, re-enter the interface by going to Server Behaviors > eCart Add From Recordset (your-cart's-name WADAproducts).

Congratulations! You've finished creating the eCart Object, shopping cart, and Add to Cart Button. Tutorials 4 and 5 in this series will shows you how to incorporate your product options with eCart's shopping cart functionality including the ability to increment the price of products for certain options.

next section

What's your next step?

Now that you are finished placing an Add to Cart button on a product catalog page, proceed to the next shopping cart tutorial: Add a shopping cart III (eCommerce Series) where you will design a responsive cart page that holds informational details about the products a customer is purchasing.

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.

1 ratings | Sign in to rate this tutorial