Add static product options (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 CS3 or higher.
   
2. eCart 5 or higher installed and activated in Dreamweaver
   
3. A php page on your Dreamweaver website displaying the name, short description, image, and price of your product.

next section

Create an eCart Object

Your first step is to create the eCart Object. 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. The eCart Object panel consists of 7 different tabs for configuring various settings for your cart. At this point, you will configure the General tab and the Columns tab. You can choose to leave the other options at their default settings.

1. From the Dreamweaver Files panel, open your product page where you will be placing your Add to Cart button.
   
   
   
   
   
2. Next, go to WebAssist > eCart > eCart Object to open the eCart Object panel and click the Add icon.
   
   
3. In the Cart name field, enter a name for your shopping cart. I have named this shopping cart eCart2 since eCart1 exists already as the shopping cart for dynamic product options.
   
   
   
   
   
4. Review the Settings, Currency, and Weight options on the General tab. In most cases, the default settings will be correct.
   
   
   
   
   
5. Move to the Columns tab and just as you would a database, customize it to match the products you're selling. Revisiting the example of custom birthday invitations with five color options, you would want to add a Color column.
   
   Since items in a product catalog do not necessarily contain the same type of information, carefully consider your inventory so you can design a structure that will specify the correct product options. For example, it would be unnecessary to create a color column if you sell downloadable music or magazine subscriptions.
   
   
6. In Columns, click the Add icon and in the Name field, enter Color. Choose text for the Output Type and check Unique so the shopping cart will allow a customer to purchase multiples of the identical color.
   
   
   
   
   
7. Click OK when you are finished.
   
   You can re-enter this interface at any time to create additional columns as needed for storing product information within the cart by going to WebAssist > eCart > eCart Object and choosing the Edit icon.

next section

Create a shopping cart

Next, you will create the actual shopping cart. Think of it as a temporary database that holds informational details about the products a customer is purchasing. This is the page where your customer will review the items they have selected to purchase. From the shopping cart, your customer can add additional products to purchase, increase quantity, remove items, clear the cart, update the cart, and proceed to checkout.

1. Create a new PHP page in your Dreamweaver site for the cart.
   
   Give the shopping cart page a definitive name, since your eCommerce store may have more than one cart. For example, cart_static.php.
   
   
2. Go to WebAssist > eCart > Display Manager to open the eCart Display Manager panel.
   
   
3. Choose the specific cart, in this example eCart2.
   
   
4. Make your design choices. Experiment with the type of cart, font, color scheme, and button (image or form), to be used on your shopping cart. Click next when you are done.
   
   
   
   
   
5. Now you will add, delete, and group columns in your shopping cart. The columns are the individual details associated with a product when it is added to or updated in your shopping cart. Click next when you are satisfied with your choices.
   
   To display additional columns that you created in the eCart object, click the Add icon. However, if you decide that you want additional columns, they need to be created first in the eCart object before being added on this page.
   
   
   
   
   
6. Next you can determine how charges, discounts, shipping, and tax will be displayed. Choose between Summary which includes the section header and a corresponding total, Individually for each rule triggered in the shopping cart as well as the sum, or Do not show to disable the selected option on the cart display. Summary is a common choice. After you have have made your selection, click Finish.
   
   
   
   
   
7. Review your shopping cart columns.
   
   
   
   
   
8. Save the page (Ctrl or Cmd + S).

next section

Create an Add to Cart button

Using eCart, you will now add the static product options while creating the Add to Cart button that will be placed on your product page. When clicked, this button will add the customer's selected items to the shopping cart created in the previous step.

1. Place your cursor on your product page where you want to place the Add to Cart button.
   
   
2. From the Insert menu, choose WebAssist > eCart > Add To Cart Button to open the interface.
   
   
3. In the Add To Cart Button interface, choose the shopping cart you wish to use. If your site only has one cart connected to it, this will be selected by default.
   
   
4. Select Add static item to cart.
   
   
5. Specify the destination page where you want a customer redirected after adding an item to the shopping cart, in this example, cart_static.php. (Click the folder icon to select the page.) Alternately, leave the field blank if you want your customer to remain on the product page.
   
   
   
   
   
6. Select the Bindings tab where you will specify the details for the product. Select the ID column, and in the Default value field, enter a unique ID for your product.
   
   
7. Repeat this process for Name and Description.
   
   
   
   
   
8. Set the Default value field for Weight at 0 if weight is not a consideration in your product line. You can also do this for any of the other 5 default columns (ID, Name, Description, Quantity, and Price) if you do not plan to use them.
   
   
9. In most cases, you will want to leave the Default value field for Quantity at 1 and select the Updateable option. Set Action to Sum which increases the quantity of the item in the cart. This allows the customer to specify how much of that product they intend to purchase, for example, 25 sheets of red paper.
   
   
10. Add the price.
    
    
    
    
    
11. Select the Color column and set it to Updateable. From the menu, choose select list.
    
    
    
    
    
12. Select the Button tab. In the Style menu, browse through the 11 different color schemes. Choose the button that fits best with your website's design. You also have the option of a form button or specifying a custom image location. Lastly, you have the option of adding a description in the Alt text field.
    
    
    
    
    
13. Click OK to insert the Add to Cart button on your product page.
    
    
14. Now it's time to add the static product options by editing the Color select list in the Properties Inspector. Click on List Values.
    
    
    
    
    
15. In this example, I added five color options for the custom birthday invitations. The Item Label and Value do not necessarily need to be the same. Item Label passes through to your site and will be seen by your customers.
    
    
    
    
    
16. Click OK and save your page (Ctrl or Cmd + S).
    
    
    
    
    
17. View the product page in your browser (File > Preview in Browser) where you will see that quantity and color choice can be specified. By clicking the Add to Cart button, you can review your order on the shopping cart page (assuming the product page was re-directed to the shopping cart page in the General tab).
    
    
    
    
    
18. Use the Continue Shopping button to return to the products page to make more selections. You can also increase quantity, remove items, clear the cart, update the cart, and proceed to checkout from the shopping cart.
    
    
    

next section

Update static product options

Your data may need modifying at some point, even when using static product options. For instance, you may want to update the color choices. To do this, re-enter the eCart Object and eCart Add to Cart Button interfaces to modify and update information. You can also re-create the shopping cart display.

1. Open your site, making sure that you have chosen the correct Dreamweaver site from the Files panel.
   
   
2. In the Server Behaviors window, click on eCart Object (eCart2) to open the interface. Make changes and click OK.
   
   
3. After updating the eCart Object, you will need to manually update the Add to Cart button to reflect those changes. In the Server Behaviors window, click on eCart Add To Cart Button (eCart2) to open the interface. Make changes and click OK.
   
   
   
   
   
4. After updating the eCart Object and Add to Cart button, you will also need to re-create the shopping cart display to reflect those changes. Open your shopping cart page (in this example, cart_static.php) and go to Insert > Webassist > eCart> Display Manager to re-create your shopping cart display.

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