Add dynamic product options I (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, 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. 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. MySQL database. If you do not have one, you can download our free eCommerce MySQL database in this tutorial.
   
6. Product catalog pages. For assistance creating product catalog pages, view this tutorial: Create a product catalog.
   
7. Shopping cart. For assistance creating a shopping cart, view this tutorial: Create a shopping cart.

next section

Populate your product catalog

Before you begin to add product option functionality to a shopping cart, you need to populate your product catalog, adding into a database the various product options and option groups to display products you wish to sell on your website. You can use our free eCommerce MySQL database with the necessary tables for defining product options. However, if you already have a database and a product catalog, you can skip this step and move to the next section of this tutorial.

In this tutorial, we will be setting up product options in a database to populate a product catalog for a fictitious online store selling t-shirts and athletic shoes. But we are going to work with only one product option group, color, that has three color options, Red, Blue, and Green.

1. Go to a MySQL administration tool of your choice and open the eCommerce MySQL database that you downloaded. You will be working in these five tables, OptionGroups, Options, ProductCategories, Products, and ProductOptions.
   
   
2. OptionGroups table: The first table we are going to populate in the eCommerce MySQL database is OptionGroups. Fill in 1 for color and 2 for size.
   
   
   
   
   
3. Options table: Let's limit the options in OptionName to three colors and five sizes. Give each color an individual OptionID, in this case, 1, 2, and 3. Continue numbering the sizes sequentially. Type 1 in OptionGroupID to join the individual color options to the main Option Group, color, found in the OptionGroups table. Type 2 in OptionGroupID to join the individual size options to the main Option Group, size, found in the OptionGroups table.
   
   
   
   
   
4. ProductCategories table: There are four categories of men's athletic shoes in our fictitious store, Running, Walking, Hiking, and Track and Trail. They each are assigned an individual CategoryID, 1, 2, 3, and 4. The t-shirts come in two sleeve options which are numbered 5 and 6.
   
   
   
   
   
5. Products table: Give each shoe and t-shirt product a ProductID and product name. Fill in price, weight, and a description of the product. In the ProductCategoryID column, place the CategoryID number from the ProductCategories table to tell your customers if this shoe belongs to the Running, Walking, Hiking, or Track and Trail category. Do this for the t-shirt sleeve options also.
   
   
   
   
   
6. ProductOptions table: Now it is time to tie each shoe (pardon the pun) and t-shirt to a color option. First though, give each shoe and t-shirt a unique ProductOptionID. Then fill in the ProductID found in the Products table. In the OptionID column, add the corresponding OptionID for the appropriate color and size. Lastly, fill in the OptionGroupID, which joins this table to the OptionGroups table where we set up the option groups, color and size. (Incremental pricing is covered in a subsequent eCommerce tutorial.)
   
   
   

next section

Update your eCart Object

In the Add a shopping cart tutorial, you already created the eCart Object. Now you are going to update the eCart Object by adding necessary columns to accommodate your online store's product options.

1. Back in Dreamweaver, go to Webassist > eCart > eCart Object.
   
   
2. From the eCart Object panel, select your cart and click the Edit icon.
   
   
   
   
   
3. Choose the Columns tab of your eCart object. This is where you will define specific columns for use within your shopping cart.
   
   
4. Click the Add icon to add a new column. Name it Colors.
   
   
5. From the menu list, choose Text as the Output Type for the Colors column so your shopping cart can display the various colors contained in your database. The six available Output Types are number, Text, Currency, Date, Integer, and Weight. For example, the price column's Output Type is Currency.
   
   
6. Select the unique checkbox so that the shopping cart recognizes that some customers may want to purchase more than one pair of red shoes, for example.
   
   
   
   
   
7. Just as you used the Add icon to insert a new column into the list, you can also use the Delete icon to remove an existing column.
   
   Adding cart columns requires that you manually add that column in the Add to Cart button interface and shopping cart display.

next section

Update your shopping cart

In the Add a shopping cart tutorial, you created the shopping cart. You also created a page named cart.php. Now that you have made changes to your eCart Object by adding columns, you need to update the shopping cart page. This requires that you remove the Shopping Cart instance from your cart page, and insert a new one using the eCart Display Manager.

1. Open your shopping cart page and remove your shopping cart. Place your cursor where you wish your new shopping cart display to be inserted.
   
   
   
   
   
2. Go to Insert > WebAssist > eCart > Display Manager. Review the settings, make any updates to the design of your cart, and click Next.
   
   
   
   
   
3. Click the Add icon to add the Colors column you added to the eCart Object.The label can be changed to Color.
   
   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.
   
   
4. Use the up and down arrows to adjust the order of the columns. Check the Group with previous column box to group items together. You can also delete columns. Click Next.
   
   
   
   
   
5. 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.
   
   
   
   
   
6. Review your shopping cart columns.
   .
   
   
   
   
7. Save the page (Ctrl or Cmd + S).

next section

Add product options recordset

Now that you have updated your eCart Object and recreated your Shopping Cart Display, the server behaviors need updating in order to populate the select list with the dynamic product options.

1. Open your product detail page.
   
   The product detail page is typically created by DataAssist to display the details for a specific item and a related Add to Cart button.
   
   
   
   
   
2. Go to Window > Server Behaviors.
   
   
3. From the Server Behaviors panel, click the + icon and then Recordset to open the Recordset dialog box.
   
   
   
   
   
   When the Recordset dialog box displays, it may open in Simple mode. For these instructions, you will need to change this to Advanced. Choose Advanced from the buttons on the right. If you see Simple, you are already in Advanced mode.
   
   
   
   
   
4. In the Name field enter rsColor.
   
   
5. Select and copy (Ctrl or Cmd + C) the following code:
   

   SELECT productoptions.ProductOptionID, options.OptionName, options.OptionGroupID, optiongroups.OptionGroupName
   FROM options INNER JOIN productoptions ON options.OptionID = productoptions.OptionID INNER JOIN optiongroups ON options.OptionGroupID = optiongroups.OptionGroupID
   WHERE optiongroups.OptionGroupName='color' AND productoptions.ProductID = ParamItem

   
   
   
6. Place your cursor in the SQL box of the Recordset dialog and press (Ctrl or Cmd + V) to paste this content.
   
   
7. In the Variables section, click the + icon.
   
   
   
   
   
8. Enter ParamItem into the Name field of the Variables dialog.
   
   
9. From the menu list choose Integer.
   
   
10. In the Default value field, enter -1.
    
    
11. Copy (Ctrl or Cmd + C) and paste (Ctrl or Cmd + V) the following parameter into the Runtime value field:
    

    $_GET['ProductID']

    
    
    
    
    
12. Click OK.
    
    WADAproducts is the name of the products recordset created by the DataAssist: Create Pages wizard. If you are using your own details page, you will need to substitute WADAproducts with the name of your own products recordset

next section

Update Add to Cart button

The next step is to update your Add to Cart buttons that you added during the Add a shopping cart tutorial.

1. To begin updating, launch the Add to Cart button interface by double-clicking the eCart Add from Recordset option in the Server Behaviors panel.
   
   
2. From the General tab, choose Look up item ID from recordset.
   
   
3. Choose the DataAssist recordset, WADAProducts. This recordset was created by DataAssist and displays all the products in the products database table.
   If you are not using a DataAssist created page, you will want to create this recordset, and then re-enter the Add to Cart interface.
   
   
4. To specify the page you wish the customer to be taken to after adding this product to their cart, click the folder icon and browse to the page. In this tutorial, the page is named cart2.php.
   
   
   
   
   
5. Choose the Bindings tab.
   
   
6. Select the Colors column but instead of binding it to the recordset, check the Updatable checkbox and from the menu list, choose the select list. Set Action to Sum so that the quantity of the item in the cart can be increased, for example, two pairs of blue running shoes.
   
   
   
   
   
   You may bind other items such as Name, Description and Price to the proper columns in your Products table (WADAProducts) at this time if they are not already bound. By default, the Quantity of the item added to the cart is automatically configured to be set using a text field placed on the page with the Add to Cart button.
   
   
7. Now select the Button tab. In the Style menu, browse through the 11 different color schemes. Then select the button that fits best with your website's design. You can also choose a form button or specify a custom image location. You can also add an image description in the Alt text field.
   
   
   
   
   
8. Click OK to update the Add to Cart button.

next section

Populate the select list

The Color select list was automatically created for you when you updated your eCart Add to Cart button.

1. Click inside the select list and from the Properties Inspector, choose the Dynamic button.
   
   
   
   
   
2. Click in the Value/Label box and delete any blank entry that could be hiding using the minus icon next to Static options. (This corrects a Dreamweaver error.)
   
   
3. Choose the rsColor recordset.
   
   
4. For Values, choose OptionName.
   
   
5. For Labels, choose OptionName.
   
   
   
   
   
6. Click OK.
   
   
7. View the product page in your browser (File > Preview in Browser) where you can make a color choice and specify quantity.
   
   
   
   
   
8. 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). Use the Continue Shopping button to make another selection. You can also increase quantity, remove items, clear the cart, update the cart, and proceed to checkout from the 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