close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Product Options with eCart

Tutorial created by Team WebAssist

Categories: eCart

rating

Online stores sell a wide variety of products, and many of those products have options within themselves. For example, you may be selling shoes, and want the customer to be able to choose the size shoe that they require. A slightly more complex example would be if you were selling T-Shirts, and needed to charge extra for those who purchase X-Large due to the additional fabric.

This tutorial shows you how you can incorporate product options with eCart's shopping cart functionality including the ability to increment the price for certain options.

arrow downWhat 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

This tutorial refers to the Free eCommerce MySQL database that is provided by WebAssist. This database contains all the necessary tables and columns to complete this tutorial. If you are not using this database, you will need to review the table and column references to make sure they match up with your database structure.

arrow downDefine 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.

arrow downUpdate 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.

arrow downCreate 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.

arrow downAdding 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.

arrow downCreate 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.

arrow downSize 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.

arrow downColor 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.

arrow downPopulate 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.

arrow downUpdate 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.

arrow downWhat 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.

arrow downReviews 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.

Sign in to add comments
rating

Etta: 4 Years, 7 Months, 1 Week, 5 Days, 2 Hours, 45 Minutes ago

Hi team, I have just purchased ecart and it is a pivotal part of our online business that I have drop down menu's for all of the products (they can select a product type to go into a gift box). Can you please tell me in the absence of this tutorial where I can get the information I need to actually assist in the setting up of static drop down menu buttons for selection for add to cart functionality.

rating

Team WebAssist: 4 Years, 7 Months, 1 Week, 1 Day, 8 Hours, 2 Minutes ago

Art, appreciate you pointing out the wrong screenshot. We've updated it. The text in the tutorial was correct. Thanks again!

rating

Team WebAssist: 4 Years, 6 Months, 5 Days, 8 Hours, 9 Minutes ago

Fixed! Thank you for pointing out!

rating

Art: 3 Years, 7 Months, 4 Weeks, 1 Day, 5 Hours, 40 Minutes ago

Two more

In the SizeLookup Recordset area
It reads SQL WHERE optiongroups.OptionGroupName = 'size' AND productoptions.ProductOptionID = paramOption AND productoptions.ProductID = paramItem
But, in the screen it shows options.OptionGroupID = 2...

Then further down, in the Populate the Select Lists area (just under point 11), there's a new recordset that is introduced in the screenshot: rsSize

Sorry about being such a pain with this.

rating

Team WebAssist: 4 Years, 6 Months, 5 Days, 1 Hour, 42 Minutes ago

You're not being a pain! Sorry it's confusing. We'll look this over and comment back!

rating

Team WebAssist: 4 Years, 6 Months, 5 Hours, 26 Minutes ago

In the SizeLookup Recordset area, ignore the screenshot. The typed SQL is correct.

rating

Team WebAssist: 4 Years, 6 Months, 5 Hours, 2 Minutes ago

Just added the steps to create the rsSize recordset. So sorry about that omission!

rating

Team WebAssist: 4 Years, 5 Months, 4 Weeks, 2 Days, 3 Hours, 47 Minutes ago

Tech support (in the forums) can definitely get you through every bit of it. Our Quality Assurance team is currently keystroking the tutorial from scratch so we can make clarifications wherever needed. Sorry for the back and forth.

rating

Art: 3 Years, 7 Months, 4 Weeks, 1 Day, 5 Hours, 40 Minutes ago

Redoing this tutorial is much needed!

If I'm not mistaken, the originally was created 5 or more years ago.

In the forum, Jason commented on the nature of the option data and how it works. Perhaps it might get incorporated. See link below.
http://www.webassist.com/forums/showthread.php?t=12841

Also, an overview explanation that shows what is happening at each step would be helpful

I got my options working and I think the tutorial has some more problems. I think the "Add To Cart" should pull from the form to add to the cart not from the recordset. As shown, it wasn't adding the price from the select list.

Anyways, I'm anxious to see what shows up. Thanks.

rating

Team WebAssist: 4 Years, 5 Months, 4 Weeks, 1 Day, 7 Hours, 14 Minutes ago

Really happy you got this working with some assistance from technical support. We'll try to set aside some time soon to re-work this tutorial. Thank you for your feedback.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.