In this tutorial, the fourth in the eCommerce series, you will learn how to add dynamic product options, which include options within themselves, to your website's online store using eCart's shopping cart functionality. As an example, specialty clothing lines often need the ability to increment prices for extra-large sizes since they are more costly to manufacture. So while sizes small, medium, and large could have a base price of $9.99, extra large and extra-extra large sizes could be incrementally priced at an additional $2.
If you want to add static product options (for example, product lines that do not change often) or dynamic product options (for example, product options that need categorizing) to your website, there are dedicated tutorials in this series to walk you through the steps. You'll find a linked index including an overview of each tutorial belonging to the eCommerce series at the bottom of this page.
- Dreamweaver CS4 or higher.
- eCart 5 or higher installed and activated in Dreamweaver
- 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+.
- PHP web page and connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
- MySQL database. If you do not have one, you can download our free eCommerce MySQL database in this tutorial.
- Product catalog pages. For assistance creating product catalog pages, view this tutorial: Create a product catalog.
- Shopping cart. For assistance creating a shopping cart, view this tutorial: Create a shopping cart.
There are two main methods of customizing a shopping cart. The most basic is to add custom columns to store data specific to the product line. For instance size and color are common columns. But in this tutorial, you'll learn the more complex technique of options affecting more than one column in a shopping cart.
A common example is a store that sells t-shirts. The t-shirts each have a base price of $9.99. But the XL and XXL sizes cost $2 more. Thus, size affects price. The store owner could individually price the larger t-shirts. But using one option group with incremental pricing simplifies future updates. For example, when prices need to be increased, one update to the base price is all that will be required.
While incremental pricing is probably the most common use for options affecting more than one column, this technique can be applied in other ways. For example, an eCommerce site might sell boats as a single product. The options would be the actual boat, a 1976 Bayliner or a 1973 Chris Craft. In this case, when a boat is selected as an option, the make, model, length, year, etc. are automatically set in the shopping cart. This is the same concept as size affecting price, where one item chosen from the list affects the value of more than one column in the shopping cart.
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 two types of product options for a fictitious online store selling t-shirts:
- Color options without a price increment.
- Size options with a price increment for certain sizes.
If you are not using the eCommerce MySQL database, you will need to review the table and column references to make sure they match up with your database structure.
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.
- 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.
- Options table: Give each color an individual OptionID as well as the sizes. Enter the OptionGroupID to join the color and size options to the OptionGroups table.
- 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 two types of t-shirts each have an individual CategoryID also.
- Products table: Give each product its own ProductID and an actual product name. Fill in price, weight, and a description of the product. In the ProductCategoryID column, place the CategoryID number from the ProductCategories table. In the ProductColor column, place the OptionGroupID for color from the OptionsGroup table.
- ProductOptions table: Now it is time to join the T-Shirts to color options, size options, and price increment. First though, give each t-shirt a unique ProductOptionID. Then fill in the ProductID found in the Products table. In the OptionID column, display colors and sizes by adding the corresponding OptionID. Fill in the OptionGroupID, which joins this table to the OptionGroups table for color and size. Lastly, determine the incremental pricing option.
In the Add a shopping cart tutorial, you already created the eCart Object. Now you are going to update the eCart Object by adding new columns and calculations to accommodate your online store's product options.
Add new columns:
- Back in Dreamweaver, go to Webassist > eCart > eCart Object.
- From the eCart Object panel, select your cart and click Edit.
- Choose the Columns tab of your eCart object. This is where you will define specific columns for use within your shopping cart.
- Click Add to add a new column. Name it color.
- From the menu list, choose Text as the Output Type for the color 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.
- 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.
- Click the Add icon to add another new column and name it size.
- From the menu list, choose text for the column and select the unique checkbox.
- Add a third new column called sizePriceInc but this time choose currency for the column.
- Select the unique checkbox.
- 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.
Add new calculations:
- Choose the Calculations tab.
- Add a new calculation called truePrice.
- For the truePrice calculation, enter the following:
- With this new calculation, the TotalPrice calculation needs updating.
- Modify the TotalPrice calculation to look like this:
([Price] + [sizePriceInc]) * [Quantity]
- Click OK to save your changes and close the eCart Object window.
Although cart columns can be added at any time, it will require that you manually update the Add to Cart button interface and shopping cart display. So save time by carefully setting up your product options in advance.
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.
- Open your shopping cart page and remove your shopping cart. Place your cursor where you wish your new shopping cart display to be inserted.
- Go to WebAssist > eCart > Display Manager. Open the specific cart to review the settings. Make any updates to the design of your cart, and click Next.
- Click Add to add the color, size, and sizePriceInc columns you added to the eCart Object.
- In the Label column, change sizePriceInc to * XL XXL so that price increment options are self-explanatory to your shoppers.
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.
- 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.
- 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.
- Review your shopping cart columns.
.
- Save the page (Ctrl or Cmd + S).
Now that you have updated your eCart Object and recreated your Shopping Cart Display, the server behaviors need updating in order to populate select lists with the dynamic product options.
- 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.
- Go to Window > Server Behaviors.
- 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.
- In the Name field enter rsColor.
- Select and copy (Ctrl or Cmd + C) the following code:
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
- Place your cursor in the SQL box of the Recordset dialog and press (Ctrl or Cmd + V) to paste this content.
- In the Variables section, click the + icon.
- Enter paramItem into the Name field of the Variables dialog.
- From the menu list choose Integer.
- In the Default value field, enter -1.
- Copy (Ctrl or Cmd + C) and paste (Ctrl or Cmd + V) the following parameter into the Runtime value field:
$row_WADAproducts['ProductID']
- 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
- Now that you have created a recordset for colors, you also want to create a recordset for sizes.
- In the server behaviors panel, select rsColor.
- Copy (Ctrl or Cmd + C) and paste it (Ctrl or Cmd + V) back in.
- A duplicate recordset (Recordset 1) will be added to your server behaviors panel.
- Double click the new recordset to open it.
- Change the Name to rsSize.
- Go to advanced mode if you are in simple mode.
- In the SQL file, change:
WHERE optiongroups.OptionGroupName = 'color'
to
WHERE optiongroups.OptionGroupName = 'size'
- Click OK.
- When prompted, click rename to rename the recordsets.
The next step is to update your Add to Cart buttons that you added during the Add a shopping cart tutorial.
- To begin updating, launch the Add to Cart button interface by double-clicking the eCart Add from Recordset option in the Server Behaviors panel.
- From the General tab, choose the correct cart name.
- Select Look up item ID from recordset.
- 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.
- 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 cart.php.
- Choose the Bindings tab.
- Select the color 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.
- 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.
- Click OK to update the Add to Cart button.
You will be modifying the Add to Cart button to handle more information in the last step of this tutorial.
The next step is to create the recordset that handles the size price increment.
- From the Server Behaviors panel, click the + icon and then Recordset to open the Recordset dialog box.
- Make sure you are in Advanced Mode.
- In the Name field, enter rsSizeLookup.
- 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
- Under the Variables section, click the + icon.
- In the Name field of the Variables dialog, enter paramOption.
- From the menu list choose Integer.
- In the Value field, enter -1.
- Copy and paste the following parameter in the Runtime Value field.
$_POST['eCart1_1_size_Add']
- Under the Variables section, click the + icon.
- In the Name field of the Variables dialog, enter paramItem.
- From the menu list choose Integer.
- In the Value field, enter -1.
- Copy and paste the following parameter in for the Runtime value:
$_POST['eCart1_1_ID_Add']
- Click OK.
- Click OK.
In case your select list name differs, make sure that the name entered in the parameter above matches the name you copied earlier.
The next step is to create the recordset that handles the color price increment.
- From the Server Behaviors panel, click the + icon and then Recordset to open the Recordset dialog box.
- Make sure you are in Advanced Mode.
- In the Name field, enter rsColorLookup.
- 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
- Under the Variables section, click the + icon.
- In the Name field of the Variables dialog, enter paramOption.
- From the menu list choose Integer.
- In the Value field, enter -1.
- Copy and paste the following parameter in the Runtime Value field.
$_POST['eCart1_1_color_Add']
- Click OK.
- Under the Variables section, click the + icon.
- In the Name field of the Variables dialog, enter paramItem.
- From the menu list choose Integer.
- In the Value field, enter -1.
- Copy and paste the following parameter in for the Runtime value:
$_POST['eCart1_1_ID_Add']
- Click OK.
- Click OK.
In case your select list name differs, make sure that the name entered in the parameter above matches the name you copied earlier.
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:
- Place your cursor where you wish the Size Select List to display.
- From the Insert menu, choose Form > List/Menu.
- 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.
- Select the Size Select List you just created.
- From the Properties Inspector, choose the Dynamic button.
- 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.)
- From the Options from recordset field, choose rsSize.
- From the Value field, choose ProductOptionID.
- From the Labels field, choose OptionName.
- Click OK.
Color list:
- Select the Color Select List that was created when you added the eCart Add to Cart button.
- From the Properties Inspector, choose the Dynamic button.
- 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.)
- From the Options from recordset field, choose rsColor.
- From the Value field, choose OptionName.
- From the Labels field, choose OptionName.
- Click OK.
Now that we have created and populated the color and size lists, we need to modify the Add to Cart button on your Products Detail page.
- 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.
- Select the Bindings tab.
- Select the size column.
- Choose the Default value lightning bolt.
- Expand the rsSizeLookup Recordset.
- Choose OptionName and click OK.
- Select the sizePriceInc.
- Choose the Default value lightning bolt.
- Expand the rsSizeLookup Recordset.
- Select OptionPriceIncrement and click OK.
- Click OK.
- Save your Products Detail page (Ctrl or Cmd + S).
Now you will modify the Size Select List to inform customers that XL and XXL sizes cost an additional $2. This is done so that customers aren't surprised by the incremental pricing for larger sizes in the shopping cart,
- View your Products Detail page in Split view so you can see both the page and code.
- Click directly in the Size Select List indicated by red marker.
- In the Bindings panel, select OptionPriceincrement and drag it into the code, inserting as indicated in the above screenshot by the yellow marker.
- Within the code, add + $ as indicated in the screenshot, adding a few spaces to make the Size Select List more aesthetically pleasing. Note that + $ has been added to the Size Select List.
- Save your Products Detail page (Ctrl or Cmd + S) and view in your browser (File > Preview in Browser) where you can choose quantity, color, and size before adding the product to your shopping cart.
- 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). Note the incremental pricing for XL and XXL sizes per t-shirt. 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.
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.
- Introduction to the eCommerce series: An overview of the WebAssist eCommerce series including a detailed description of each tutorial.
- Create a product catalog: Learn to create a dynamic product catalog for an online store.
- 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.
- 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.
- Add a shopping cart: Learn about using eCart to create a responsive shopping cart for selling your products online.
- Create an eCart object to define the structure of your shopping cart.
- 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.
- Design a responsive shopping cart page that holds informational details about the products a customer is purchasing.
- Add dynamic product options I: Learn how to add dynamic product options to your website's online store using eCart's shopping cart functionality.
- 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.
- Add static product options: Learn how to add static product options to your online catalog store.
- 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.
- In the Settings tab, you will choose the general settings for your site and checkout pages.
- In the Payments tab, you will set up payment provider and checkout options.
- In the Shipping tab, you will choose shipping providers and set charges.
- In the Tax tab, you will set the rules for sales tax or VAT.
- In the Orders tab, you will configure your order storage options.
- In the Email tab, you will enter your email server settings.
- In the Form Design tab, you will select your checkout form from preset designs.
- Online payment solutions: Learn about online payment solutions including seamless checkout, remote checkout, and various PayPal checkout options.
- Hosting provider solutions: Learn about and choose between five hosting providers, 1&1, GoDaddy, HostGator, Network Solutions, and DreamHost.
- Online shipping solutions: Learn where and how to set up free shipping accounts with FedEx, UPS, USPS, and Australia Post.
What do you need to start?
Print tutorial
Robert Crespo: 11 Years, 2 Months, 1 Day, 19 Hours, 29 Minutes ago
Excellent tutorial! My clients website required the price to be increased for very specific products only. After reading through this tutorial I was able to not only achieve the goal of incremental pricing, but I also ramped up my relational database skills quite a bit.
Kate Ford: 11 Years, 2 Months, 8 Hours, 26 Minutes ago
So glad to hear the tutorial helps your business! Thanks for letting us know. Kate
PS Don't miss the other eCommerce tutorials! Links to the entire series are included above.