The Shopping Cart page at its simplest includes a table which displays the contents of the shopping cart and computes an item total. It may include other optional features for customer interaction, such as buttons to update or clear the cart or a form to collect customer information.
To set up the Shopping Cart page complete the following steps:
| Copy the shopping cart to the page | |
| Add the HTML table display of the shopping cart | |
| Add Customer Interactions |
Note: The shopping cart must be identical (that is, it must contain the same columns) on both pages. If you change the shopping cart on one page, remember to change it on all other pages in which it is used as well.
To copy and paste the shopping cart:
Copy the shopping cart to the page
You can follow the same steps as outlined in Setting up a Product Page to add the shopping cart to the page, or you can simply copy and paste the shopping cart that you set up on the Product Page to the View Shopping Cart page.
| 1 | Open the Product Page (or the page on which you set up the shopping cart), then open the Data Binding inspector (if it is not already open). |
| 2 | Select the Shopping Cart data source. |
| 3 | Click the arrow button in the upper-right corner of the inspector and choose Copy from the pop-up menu. |
| 4 | Open the View Shopping Cart page (or the page to which you want to paste the shopping cart). |
| 5 | Click the arrow button in the upper-right corner of the inspector and choose Paste from the pop-up menu. |
Note: If you are going to use a form on the page, you may want to add the form element first and then insert the cart display table inside the form. You will need a form element, for instance, if you are going to allow users to change and update the cart contents.
To display the cart contents:
| 1 | Choose Insert > Table, or drag the Table object from the Object palette to the Document window. |
| 2 | In the Insert Table dialog box, for the Row option, choose 2 if you want to show table headings, or 1 if you do not want headings. |
| 3 | Enter and format the headings in the first row, if you want headings. |
| 4 | Open the Data Binding inspector (Windows > Data Bindings) if it is not already open. Open the shopping cart data source. |
| 5 | Click inside a table cell and, in the Data Binding inspector, select the column you want to display from the shopping cart; then click Insert. Repeat to bind each cell of the table to a shopping cart column you want to display. |
| If you want customers to be able to change quantities and update the cart, use the text field (edit box) form element for the Quantity and bind it to the Quantity column in the shopping cart. Do not insert a form element in the cell; rather, you should drop a form element onto the page first and place the shopping cart table within the form element, so that the entire table is within the form tag. (See Changing quantities and updating the cart.) | |
| 6 | Finally, add the Cart Repeat Region behavior. Select the dynamic table row that is bound to the shopping cart. In the Server Behavior inspector, click the plus (+) button and choose MX Shopping Cart > Cart Repeat Region. |
After you have set up the bindings, you can test your cart by browsing the Product Page, clicking the Add to Cart button (or link), and viewing the resulting shopping cart on the View Shopping Cart page.
Add Customer Interactions
Customer interactions with the shopping cart that you can add include:
| Changing quantities and updating the cart | |
| Empty cart | |
| Redirect if empty |
To provide these interactions, you use shopping cart server behaviors.
| 1 | Drop a form element onto the page and drag the shopping cart display table into the form. |
| 2 | Use a text field (edit box) for the Quantity column in the shopping cart display. (See Add the HTML table display of the shopping cart.) If you have not already done this, you can edit the Quantity display field to contain a text field (Insert > Form Object > Text Field). |
| If you do not put the form element on the page first, you will be asked if you want to add a form element. Answer No. If you answer Yes, the form element is inserted within the table cell, rather than including the entire table. | |
| 3 | Add a form button to the page, putting it inside the form (but not inside the table). In the Property inspector, give the button an appropriate name and label, such as Update Cart. |
| The button must be of type Submit (Action = Submit form). | |
| 4 | Select the Quantity edit box. In the Server Behavior inspector, click the plus (+) button and choose MX Shopping Cart > Update Cart. |
| Note that you apply the behavior to the Quantity edit box, not the button. The button will submit the form and automatically perform the update action. | |
| 5 | In the dialog box, choose the name of the Form and the Form element (the name you assigned to the Quantity edit box). |
| 6 | If you want to redirect the user after updating the cart, enter a URL or browse to select a page. If you want the page to simply refresh with the updated cart contents, leave this blank and click OK. |
| 1 | On the shopping cart display page, select the text or image you want to use for the link. If you do not select anything, the default text link "Empty cart" will be created. |
| 2 | In the Server Behavior inspector, click the plus (+) button and choose MX Shopping Cart > Empty cart. |
| In the dialog box that appears, the link text is shown. You can choose a different link text on the page if you want. | |
| 3 | If you want to redirect the user after deleting the item and updating the cart, enter a URL or browse to select a page. If you want the page to simply refresh to show the updated cart contents, leave the dialog box blank and click OK. |
To redirect customers when the cart is empty:
| 1 | Create the redirect page that contain the appropriate message (for example, "There are no items in your cart.") |
| 2 | Open the shopping cart display page. In the Server Behavior inspector, click the plus (+) button and select MX Shopping Cart > Redirect if empty. |
| 3 | Enter the URL to redirect to, or click the Browse button and select the page. |
![]() |
![]() |
![]() |