I recently put together an example file for a user showing how to set up a product list and dynamic shopping cart using the repeater widget. While there are plenty of valuable threads to be found that discuss how to manipulate repeater-based shopping carts, I noticed that we don’t yet have one that demonstrates how to build the basic setup. As such, I thought I’d share my very plain, stripped-down example and the steps I took to create it.
Note: If you haven’t yet worked with repeaters, variables, and conditional logic, you may want to read up on these topics before moving forward.
The Cart
Because you’ll need to target the shopping cart repeater with some “Add Rows” actions later on, it’s a good idea to set it up first.
Create a header for the cart from three widgets: the first will be a simple title for the cart; the second, “Items”, will display the number of items in the cart; and the third, “Total”, will display the total cost of the items in the cart.
Drag a repeater widget under this header, name it “Cart”, and double-click it to open it for editing.
Click “Repeater Dataset” and give it a “Name” column and a “Price” column. Then, delete all of the rows so that the cart will load empty.
Click “Repeater Item Interactions”, double-click the “Set text” action under the OnItemLoad event, and change the text to [[Item.Name]] $[[Item.Price]].
Add two more shape widgets to the repeater. Name one of these “Add” and set its text to “+”; name the other “Delete” and set its text to “x”.
Double-click “Add”s OnClick event and give it these three actions in this order: “Add Rows”, “Set Variable Value”, “Set Text”.
Set the Add Rows action to target the “Cart” repeater. Click “Add Rows” at the bottom of the pane and enter one row with [[Item.Name]] in the “Name” column and [[Item.Price]] in the “Price” column.
For the Set Variable Value action, add two variables, “ItemTotal” and “PriceTotal”. Set “ItemTotal” equal to [[ItemTotal+1]] and “PriceTotal” to [[(PriceTotal+item.price).tofixed(2)]]. (Note: The “.tofixed(2)” is only necessary if you want your prices to include cents, since this returns a value with two decimal places.)
For the Set Text action, set the “Items” widget to [[ItemTotal]] (you can also use the “value of variable” option for this) and set the “Total” widget to $[[PriceTotal]].
Copy the Set Variable Value and Set Text actions from the “Add” widget, paste them into the “Delete” widget’s OnClick event, and change the “+” symbols in the equations to “-” symbols.
Finally, add a “Delete Rows” action after the Set actions and have it target “This from Cart”.
The Products
While you could use discrete groups of widgets to make up your product list, I find that using a repeater is easier since it allows you to quickly add or remove products by simply adding or deleting rows in the repeater’s dataset.
Note: Products in my example can be either clicked or dragged to be added to the cart. If you don’t want or need the “Drag to Add” functionality, skip steps 6 and 7.
Add another repeater to the page-level design area, name it “Products”, and double-click it to open it for editing.
Click “Repeater Dataset”, give it a “Name” column and a “Price” column, and add a row for each product in your list.
Click “Repeater Item Interactions”, double-click the “Set text” action under the OnItemLoad event, and change the text to [[Item.Name]] $[[Item.Price]].
Add two button widgets to the repeater. Name one of these “Click to Add” and set this as its text; name the other “Drag to Add” and set this as its text.
Copy the OnClick event from the “Add” button in the “Cart” repeater and paste it into the OnClick event for the “Click to Add” button.
Right-click the “Drag to Add” button and select “Convert to Dynamic Panel”.
Set up the following cases for the dynamic panel:
The OnDrag event allows the item description and the “Drag to Add” widgets to be dragged around the page. The OnDragDrop event adds the item to the cart if the “Drag to Add” widget is dropped on top of the shopping cart header; it then returns the item description and the “Drag to Add” widgets to their starting positions.
I hope that this tutorial proves helpful. If anyone has any questions, please let me know.
Can you tell me how to the carry the total cost and number of items to the cart on other pages. I’m looking to achieve the traditional basket inside a header which updates across the site as the user adds more products.
To carry the total cost and number of items in the cart to other pages, you can use the global variables “ItemTotal” and “PriceTotal”. All you need is an action (e.g. OnClick) that opens up the other page and then an OnPageLoad that sets the header’s text to the value of the variables ItemTotal and PriceTotal.
I’ve added an example to Anthony’s file to demonstrate this. I hope it helps! Cart_EXAMPLE_EDIT.rp (77.5 KB)
Thank you Jane. I’ve included a back button on ‘Next Page’, how do I stop the cart values from disappearing on the ‘Shopping Cart’ page when I click back and forth through pages? Cart_EXAMPLE_EDIT_2.rp (93.6 KB)
That would require the same logic that was used to display the cart values on the “Next Page”. In other words, you’ll need an event such as OnPageLoad that sets the text to a widget (e.g. Total, Item) to display the value of the global variables: “ItemTotal” and “PriceTotal”. That event should ensure that the cart values continuously display when going back and forth between pages.
For a good tutorial on this, I’d strongly encourage you to go through our training materials on using global variables, conditional logic, and then a combination of the two:
I’ve also edited your file so that the OnPageLoad of the “Shopping Cart” page sets the text of the Items widget to the value of the ItemTotal variable and sets the text of the Total widget to the PriceTotal variable.
First off, it looks like you removed the Items and Total widgets from the main Shopping Cart page. This is a problem because the action to set the text no longer has targeted widgets to display the global variables ItemsTotal and PriceTotal.
To resolve this, you’ll first want to remove the OnDrag events for the “Drag to Add” widget since there’s nothing to drag the widget to. Then, keep the same actions on the “Click to Add” widget where you set the value of the ItemTotal variable to [[ItemTotal + 1]] and set the value of the PriceTotal variable to [[(PriceTotal + Item.price).toFixed(2)]] where “Item.price” is the second column of the Products repeater and .toFixed(2) is the output value to the nearest 2 decimal points, e.g. LVAR1 = 5.6789, and so LVAR1.toFixed will give you 5.68.
Since you removed the Items and Total widgets on this page, modify the second “Set Text” action on the “Click to Add” widget so it instead sets the text on the Items and Total widgets on the Cart state. Setting the text on the Cart page will be a bit different since widgets on a separate page aren’t available to target from the current page’s Case Editor. This is where global variables come in handy. As I mentioned from my previous post, global variables allow you to store values and then pass those values onto the next page. To do this for the Cart page, simply add an OnPageLoad to the Cart page where you set the text of the Items and Total widgets to the value of ItemsTotal and PriceTotal. Lastly, add an OnClick to the “View Cart on a Page” widget that opens the Cart page in a new or current window. Cart_EXAMPLE States_and_Pages_EDIT.rp (102 KB)
Hi,
How do I use a repeater to display items added in the cart in a different page? I have attached my file here. How to display items in page “cart” which are added in page “mobile” ? mycart.rp (410 KB)
You’re so close! If I’m understanding correctly, all you have to do is add a repeater to the page and then use OnPageLoad where you “Add Rows” to the repeater the values of the variables Total_item and Total_price:
This should carry over and display the global variables Total_item and Total_price in a repeater on the Cart page. mycart_EDIT.rp (418 KB)
Is there a way to keep the cart list persistent so you can add and delete different items? It seems like you are totaling up items when moving to the next page as opposed to seeing the itemized list.
It’s a bit involved, but you can carry repeater data across pages by storing each column in a global variable. Then, you can use the JavaScript substring() and indexOf() methods to load the data into an empty repeater on the new page. Check out the post here for a full discussion of this technique: Persistent Repeaters
