Product Options with eCart

Tutorial created by Ray Borduin, WebAssist

Categories: eCart

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

next section

What you need to start

- Dreamweaver CS3 or later
- Dreamweaver site with eCart checkout functionality already created.
- eCart 5
- WebAssist Free eCommerce MySQL database (Optional)
-You will need a database driven catalog already created which includes a product details page and a supporting Products recordset. For help creating one using Data Bridge, please see the Integrating Data Bridge and eCart Tutorial:
http://www.webassist.com/community/tutorials/view_tutorial.php?tid=22

next section

Define your product options

Before you proceed with adding the product option functionality to eCart, you will need to populate your product catalog, and add the various product options, and option groups to your database.

The Free eCommerce MySQL database contains the necessary database tables for handling these product options and it is recommended that you use this database to add product options to your online store. Using your preferred database management tool, you should populate the necessary tables with your products and their options. Then continue with this tutorial to add this functionality to your shopping cart.

Refer to the Database Relationship Overview to learn more about how the tables are configured for product options.

In this tutorial we will be creating two types of product options:

1. Color options without a price increment.
   
2. Size options with a price increment for certain sizes.

next section

Update your eCart Object

The first step you need to take is to update your eCart Object with the necessary columns for handling your product options.

Add New Columns

1. From the eCart Object panel, select your cart and click Edit.
   
2. Choose the Columns tab of your eCart object.
   
   
   
   
3. Add a new column called color.
   
4. From the menu list, choose text for the column.
   
5. Select the unique checkbox.
   
6. Add a new column called size.
   
7. From the menu list, choose text for the column.
   
8. Select the unique checkbox.
   
9. Add a new column called sizePriceInc.
   
10. From the menu list, choose currency for the column.
    
11. Select the unique checkbox.
    
    

Adding new Calculations

1. Choose the Calculations tab.
   
   
   
   
2. Add a new calculation called truePrice.
   
3. For the truePrice calculation, enter the following:
   

   [Price] + [sizePriceInc]

   
   
4. With this new calculation, we will need to update the TotalPrice calculation.
   
5. Modify the TotalPrice calculation to look like this:
   

   ([Price] + [sizePriceInc]) * [Quantity]

   
   
   
   
   
6. Click OK to save your changes and close the eCart Object window.

next section

Create your Shopping Cart

Now that you have made changes to your eCart Object, you will need to update the shopping cart page to contain the new columns. 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.
   If you don't already have one, create a new PHP page in your site called cart.php.
   
2. Place your cursor where you wish your new shopping cart display to be inserted.
   
3. From the Insert menu, choose WebAssist > eCart > Display Manager.
   
4. Recreate your eCart Shopping cart.
   If you have never created an eCart Shopping Cart Display, see the Getting Started Guide for more information.

next section

Adding Product Options

Now that you have updated your eCart Object and recreated your Shopping Cart Display, you can update your Add to cart behaviors to handle the product options.

1. Open your product detail page.
   This page is typically created by DataAssist that displays the details for a specific item and the Add to Cart button for that item.
   
2. Open the Server Behaviors panel from Window > Server Behaviors.
   
3. From the Server Behaviors panel, choose Add > Recordset.
   
   
   
   
   NOTE:When the Recordset dialog box displays, it may open in Simple Mode. For these instructions, we will need to change this to Advanced Mode. If present, choose the Advanced... button from the buttons on the right.
   
   
4. In the Name field, enter rsColor.
   
5. Highlight the following code, and press Ctrl (Cmd) + C to copy this content.
   

   SELECT productoptions.OptionPriceincrement, 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 (Cmd) + V to paste this content.
   
7. Under the Variables section, click Add.
   
8. In the Name field of the Variables dialog, enter paramItem.
   
9. From the menu list choose Integer.
   
10. In the Value field, enter -1.
    
11. Copy and paste the following parameter in for the run-time value:
    

    $row_WADAproducts['ProductID']

    
    
    WADAproducts is the name of the Products recordset that Data Bridge's Create Pages Wizard creates. If you are using your own details page, you will need to substitute 'WADAproducts' with the name of your own Products recordset
    
    
    
    
    
12. Click OK.

Now that you have created a recordset for colors, you also want to create a recordset for sizes.

1. In the server behaviors panel, select rsColor.
   
2. Copy and paste it from the server behaviors panel menu (or Ctrl/Cmd+C and Ctrl/Cmd+V). A recordset will be added to your server behaviors panel.
   
3. Double click the new recordset to open it.
   
4. Change the Name to rsSize.
   
5. Go to advanced mode if you are in simple mode.
   
6. Change:
   WHERE optiongroups.OptionGroupName = 'color'
   to
   

   WHERE optiongroups.OptionGroupName = 'size'

   
   
7. Click OK.

next section

Create Add to Cart button

The next step is to create your Add to Cart buttons. If you already have these buttons added to this page, you can reenter the interface to modify them. Otherwise, you can create new ones.

1. Place your cursor where you wish to insert your Add to Cart button.
   If you already have an Add to Cart button on this page, you can launch the Add to Cart button interface by double-clicking the eCart Add from Recordset option in the Server Behaviors panel.
   
2. From the Insert menu, choose WebAssist > eCart > Add to Cart.
   
3. From the General tab, choose Look up item ID from recordset.
   
4. 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 reenter the Add to Cart interface.
   
   
   
   
5. Choose the Bindings tab.
   
6. Select the Color column.
   
7. Select the Updatable checkbox.
   
8. From the menu list, choose Select List.
   
   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.
   
   
9. Click OK to create this add to cart button.
   We will be modifying this add to cart button to handle more information later.

next section

Size Lookup Recordset

The next step is to create the recordset that handles the size price increment.

1. From the Server Behaviors panel, choose Add > Recordset.
   
2. Make sure you are in Advanced Mode.
   
3. In the Name field, enter rsSizeLookup.
   
4. Copy and paste the following SQL query into the SQL text field.
   

   SELECT productoptions.OptionPriceincrement, 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 = 'size' AND productoptions.ProductOptionID = paramOption AND productoptions.ProductID = paramItem

   
   
5. Under the Variables section, click Add.
   
6. In the Name field of the Variables dialog, enter paramOption.
   
7. From the menu list choose Integer.
   
8. In the Value field, enter -1.
   
9. Copy and paste the following parameter in the Runtime Value field.
   

   $_POST['eCart1_1_size_Add']

   
   
   
   
   
10. Under the Variables section, click Add.
    
11. In the Name field of the Variables dialog, enter paramItem.
    
12. From the menu list choose Integer.
    
13. In the Value field, enter -1.
    
14. Copy and paste the following parameter in for the Runtime value:
    

    $_POST['eCart1_1_ID_Add']

    
    
    
    
    
    In case your select list name differs, make sure that the name entered in the parameter above matches the name you copied earlier.

next section

Color Lookup Recordset

The next step is to create the recordset that handles the color price increment.

1. From the Server Behaviors panel, choose Add > Recordset.
   
2. Make sure you are in Advanced Mode.
   
3. In the Name field, enter rsColorLookup.
   
4. Copy and paste the following SQL query into the SQL text field.
   

   SELECT productoptions.OptionPriceincrement, 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.ProductOptionID = paramOption AND productoptions.ProductID = paramItem

   
   
5. Under the Variables section, click Add.
   
6. In the Name field of the Variables dialog, enter paramOption.
   
7. From the menu list choose Integer.
   
8. In the Value field, enter -1.
   
9. Copy and paste the following parameter in the Runtime Value field.
   

   $_POST['eCart1_1_color_Add']

   
   
   
   
   
10. Under the Variables section, click Add.
    
11. In the Name field of the Variables dialog, enter paramItem.
    
12. From the menu list choose Integer.
    
13. In the Value field, enter -1.
    
14. Copy and paste the following parameter in for the Runtime value:
    

    $_POST['eCart1_1_ID_Add']

    
    
    
    
    
    In case your select list name differs, make sure that the name entered in the parameter above matches the name you copied earlier.

next section

Populate the Select Lists

The Color select list was automatically created for you when you created your eCart Add to Cart button. However, we are going to manually create the Size select list since this list will include a price increment for certain options.

Size List

1. Place your cursor where you wish the size select list to display.
   
2. From the Insert menu, choose Form > List/Menu.
   
3. In the name field, enter eCart1_1_size_Add.
   
   
   
   
   This name is already being used in the recordset you created above. So, in order to ensure this works, you will need to enter the name exactly as it is displayed.
   
   
4. Select the Size Select List you just created.
   
5. From the Properties Inspector, choose the Dynamic button.
   
   
   
   
6. Click Add for static options.
   
7. Press tab to leave the Value field blank.
   
8. In the Label field, enter Select A Size.
   
9. From the Options from recordset field, choose rsSize.
   
10. From the Value field, choose ProductOptionID.
    
11. From the Labels field, choose OptionName.
    
    
    
    
12. Click OK.

Color List

1. Select the Color select list that was created when you added the eCart Add to Cart button.
   
2. From the Properties Inspector, choose the Dynamic button.
   
3. Click Add for static options.
   
4. Press tab to leave the Value field blank.
   
5. In the Label field, enter Select A Color.
   
6. From the Options from recordset field, choose rsColor.
   
7. From the Value field, choose ProductOptionID.
   
8. From the Labels field, choose OptionName.
   
   
   
   
9. Click OK.

next section

Update the Add to Cart

Now that we have created and populated the lists for this product's options, we need to update the Add to Cart button.

1. From the Server Behaviors panel, double-click the eCart Add From Recordset behavior.
   This will launch the Add to Cart interface for modifying the behavior.
   
2. Select the Bindings tab.
   
3. Select the size column.
   
4. Choose the value lightning bolt.
   
5. Expand the rsSizeLookup Recordset.
   
6. Choose OptionName.
   
   
   
   
7. Click OK.
   
8. Select the sizePriceInc.
   
9. Choose the value lightning bolt.
   
10. Expand the rsSizeLookup Recordset.
    
11. Select OptionPriceIncrement.
    
    
    
    
12. Click OK.

What to do next...

Now that you have completed creating your Download Center, you may want to spend some time customizing the appearance of the page, and adding additional Recordset bindings to display information from the orders or products tables. When you are finished with your site, you will want to upload everything to your live server and import your database to your live MySQL database so that your online store is on the web.

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.

2 ratings | Sign in to rate this tutorial