Example Description
In this example we select a product we would like to promote (upsell) and display it on the cart page. The upsell product is displayed when site visitors have a product in their cart from the same Stores collection as the upsell product. Site visitors can add the upsell product to the cart directly from the cart page.
How We Built It
Page Elements
On the cart page we added the following elements:
-
A container box to display information about the upsell product
-
3 text elements to display the product name, price, and description
-
An image to display the product image
-
An Add to Cart button
Code
In the backend cart.jsw module, we get information about the current site visitor’s shopping cart.
On the cart page, we do the following:
-
Define a variable that contains information about the upsell product.
-
Initially hide the upsell box.
-
Use the backend function to get information about the current cart.
-
Check whether the upsell product is currently in the cart by comparing the upsell product ID with each cart item product ID.
-
If the upsell item is not in the cart, we get information about the upsell product from the Stores/Products collection and display the information in the upsell box.
-
We set an event handler that runs if a site visitor clicks the Add to Cart button. It adds the upsell product to the cart with the upsell choices defined in the upsell variable, and hides the upsell box.
Related Examples
Did this help?
|
Thanks for your feedback!
Add to Cart Gallery
Let customers add products to their cart—right from your product gallery.
Advanced
Bulk Add to Cart
Let customers add multiple items to their cart—all at once.
Advanced
Related Items
Recommend products based on price, brand and more.
Intermediate