How to create 'Add To Cart' with product options & quantities in a repeater?

Ask the community
,
1

I’m trying to create ‘Add To Cart’ with product options in a repeater, and customers can stay the same page to select options ( Select Weight, Select Grind, quantities, custom text fields, etc. ) from repeater then add to cart. Do I need to add dropdown menus or other elements to the repeater? I tried a few days, but still don’t know how to achieve this.
Any helps would be much appreciated!

I found an answer and try the code below, that works if only products without options.

$w.onReady( function () {
$w(“#button31”).onClick((event) => {
let $item = $w.at(event.context); // Get container scope
let selectedProduct = $item(‘#dataset1’).getCurrentItem();
let productId = selectedProduct._id;
$w(‘#shoppingCartIcon1’).addToCart(productId)
.then(() => {
// Item added to the shopping cart
console.log(“add product ${productId} success”);
})
. catch ((error) => {
// Catch an error that occurs
console.log(“Error: ${error.stack}”);
});
});
});

1 Like
2

Any helps??

3

I’m also looking for a solution to a similar problem to this. When my products don’t have options then the add to cart button works fine. When they have options I have not found a good way to link a drop down menu to those options, and then let the selection by user inform what is added to the cart.

4

Got an answer? Please write it here. Thanks!

5

im waiting for the answer plz help Wix

6

See the documentation here: https://www.wix.com/corvid/reference/$w/carticon/addtocart

To breakdown the code given in the documentation:

$w('#shoppingCartIcon1').addToCart("ea77f230-558f-0ba565e8f827", 1)

The above code will only add the product (without any option parameter) and set the quantity to be 1. If you want to add the option parameter see below.

$w('#shoppingCartIcon1').addToCart("ea77f230-558f-0ba565e8f827", 1, {
   "choices": {
      "Size": "Small"
    }
 })

In the above code I am passing the ‘Size’ parameter under ‘choices’ to be ‘Small’. Note that for this code I must have the ‘Size’ variant on my product and one of the variant options should be ‘Small’.

If instead of ‘Size’ I have ‘Color’ as a variant and one of the color variants is ‘Blue’ I will use the below code.

$w('#shoppingCartIcon1').addToCart("ea77f230-558f-0ba565e8f827", 1, {
   "choices": {
      "Color": "Blue"
    }
 })

Now how you build the user interface to actually allow your users to select the product options is up to you.

7

thanks Shan

if you can do it for me a write the code please now more then a month im trying

wam@almayas.net

8

Thank you Shan for sharing the code :blush: