You should start by defining the shopping cart. The identical shopping cart must appear on both the Product Detail page (from which items are added to the cart) and the View Shopping Cart page (which displays the contents of the cart). It also must appear on any other pages that interact with the cart via the shopping cart server behaviors, which are part of the shopping cart extension (see Shopping Cart Reference).
You can add the shopping cart to any page first, then copy it to another page. The following instructions set up the shopping cart on the Product Page first, since setting up this page is necessary for you to test your cart display on the View Shopping Cart page.
At minimum, you must have the following three components on your product detail page:
| One field to provide the Product ID in the shopping cart | |
| One field to provide the Quantity in the shopping cart | |
| One field to provide the Price field in the shopping cart |
Usually these required fields come from a database and are bound to a data source. However, a source database is not required. The values for these fields may just as well come from a pop-up menu selection (which may itself be either static or dynamic). Or it may be a literal, defined value.
Other information, such as description, size and color selectors (SKU modifiers), a product picture, and so on, are optional. If you want to include SKU modifiers like size and color to be passed on as part of the order, you must add a column to the shopping cart to carry each of these values. Any other fields that you wish to display in the shopping cart must also be added to it.
| A Product ID | |
| A Quantity | |
| A Price |
| 1 | Open the Data Bindings inspector. |
| 2 | Click the plus (+) button and choose MX Shopping Cart. |
| A dialog box appears in which you can name your cart and choose the columns you want to include in the shopping cart. | |
The five default fields in the cart are shown:
| Product ID | |
| Quantity | |
| Name | |
| Price | |
| Total |
These default fields, with the exception of Description, cannot be deleted. However, you do not have to use all the fields. The one field that must always be included is Product ID. Total is an automatically computed field based on Price multiplied by Quantity. You can add other fields as desired.
If the default fields are the only ones you want, simply click OK. If you want to add other columns, see Add SKU modifiers and optional columns.
Add SKU modifiers and optional columns
To add new columns to the shopping cart:
| 1 | Open the Add Shopping Cart dialog box if it is not already open. |
| If you have already defined your shopping cart and closed this dialog box, you can reopen the dialog box and edit the shopping cart by double-clicking the Shopping Cart in the Data Binding inspector or the Server Behavior inspector. | |
| 2 | In the Add Shopping Cart dialog box, click the plus (+) button. |
| 3 | Enter a name for the column in the Edit Column Name box. |
| 4 | If you want this field to be a computed value, select the column that is to be multiplied by the quantity. |
| For example: You can add a Shipping Weight column to hold the weight of an item, then add a Total Shipping Weight. The Total Shipping Weight will be computed by multiplying the Shipping Weight times Quantity. | |
| If you use a form button, use the "Add to cart via form" behavior. | |
| If you use a text or image link, use the "Add to cart via link" behavior. |
Note: If you want to add SKU modifiers (such as color and size), you must use a form button (since they need to be submitted via a form). If you choose a link type, you cannot use SKU modifiers.
To add the Add to Cart behavior:
| 1 | Drop a button onto the page and give it an appropriate label (for example, "Add to Cart" or "Buy This Item"). Or add an image or a text string to click. |
| 2 | Select the button, image, or text. In the Server Behavior inspector, click the plus (+) button and choose Shopping cart > Add to Cart. |
| The Add to Cart dialog box appears. | |
| 3 | In the Add to Cart dialog box, select the linking element if you use a text or image link, or the name of the form if you use a form button to add to cart. (The form will have been added to the page when you added the form button, if a form was not already on the page.) |
| 4 | Bind each item on the page that will be used in the shopping cart to the appropriate column in the shopping cart. To begin, click Product ID, then choose the binding type and source: |
| If the source is a recordset column (your product data is a dynamic page that uses a data source), click Recordset, then choose the recordset and the column. | |
| If the source is a form element (such as an item chosen from a static pop-up menu), click Form element and choose the name of the form element. | |
| If the source is a given literal value, enter a value in the text box. (For example, if you only have one type of item, such as a t-shirt which comes in several colors and sizes, the Product ID number may be the same for all. The SKU modifiers of Size and Color will be the distinguishing factors, rather than the Product ID.) | |
| If you do not want to use a cart column, select Nothing for the binding type. Since the Product ID is required, you must choose one of the first three above for that column. However, you are not required to use any of the other cart columns. | |
| 5 | If you want to redirect shoppers directly to a warning page in case the selected item is already in the cart, enter the path in the Redirect To box or click Browse to select the page. If this is left blank the cart contents will be updated. |
| 6 | If you want to redirect shoppers directly to the View Shopping Cart page after the item is added to their cart, enter the path in the Go to URL box or click Browse to select the page. |
![]() |
![]() |
![]() |