Add To Cart Custom Donut Selection With Quantity

Ask the community
, ,
1

Hello,

I was wondering if I could get some direction on the best way to do something?

I have a client that sells donuts and they want to give people the option to choose a pack of 6 or 12 donuts.

Then they can pick the donut flavours and add it to the cart as 1 item of either 6 or 12 pack of donuts with flavours as options.

I know how to do this if all the donuts are different what I don’t know how to do is connect individual quantity selectors so say they want 3 chocolate and 3 sprinkle donuts to make 6.

952×555 34.4 KB

I can follow this tutorial which allows me to add multiple items to the cart but instead it would break each donut down as individual items instead of a pack of 6 or 12 and I cant choose quantity for each flavour.

https://support.wix.com/en/article/velo-tutorial-adding-multiple-items-to-the-cart-in-a-wix-stores-site#step-16-create-the-addtocartbutton_click-function-1

I have done this with a form but not with a quantity selector for each donut as I cannot seem to figure out how to make this work.

Any ideas on what might be best or has anyone done something similar?

Thanks!

2

I believe the simplest solution is to have 4 product(sprinkle, chocolat, maple, minty) add to your cart.
Have a custom add to cart button that is enabled only when the total quantity of donuts is equals to 6 or 12.

Once the user client add to cart, add each donut with its quantity. Example

5 Sprinkles + 1 Chocolat.

Key is to not let user pick a number of donut that not a multiple of 6.

You’ll need to do the same thing on the checkout page so that user can’t remove or add 1 donut to their cart on the checkout page.

3

@plomteuxquentin Thank you so much for the response this helped a ton and give me a good starting point. I appreciate it as for some reason I just could not get my head around it.

I made good progress and this is what I have so far and the code does work.
I reduced it only to 2 donuts for now just for testing.

import { cart } from 'wix-stores';

$w.onReady(function () {
$w("#donut1").onChange(CartButtonEnableDisable);
$w("#donut2").onChange(CartButtonEnableDisable);

});

function CartButtonEnableDisable() {
    let selOptA=Number($w("#donut1").value);
    let selOptB=Number($w("#donut2").value);
  let totalLength = (selOptA + selOptB)
    if(totalLength >= 6){
    $w('#buyNow').enable();
  } else $w('#buyNow').disable();
  console.log(totalLength)

}

export function buyNow_click(event) {
let selOptA=Number($w("#donut1").value);
let donuts="2112c343-cecb-1666-eff9-2c422bdc5075"
  $w("#shoppingCartIcon1").addToCart(donuts,selOptA)
    .then( () => {
      console.log("Product added");
    } )
    .catch( (error) => {
      console.log(error);
    } );
}

My question is do you know how to add more then one donut with quantity to cart at the same time?

I went through the API and forums and cannot find a clear way to do it. I know there is a Velo example that walks through it but it seems to be way more then what I need.

Thanks!

4

I figured it out and it does work. I am sure there is a better way to do this with repeaters and arrays but this is a simple quick way to do this and it does work.

Here is my code:

import { cart } from 'wix-stores';

$w.onReady(function () {
$w("#donut1").onChange(CartButtonEnableDisable);
$w("#donut2").onChange(CartButtonEnableDisable);

});

function CartButtonEnableDisable() {
    let selOptA=Number($w("#donut1").value);
    let selOptB=Number($w("#donut2").value);
  let totalLength = (selOptA + selOptB)
    if(totalLength >= 6){
    $w('#buyNow').enable();
  } else $w('#buyNow').disable();
  console.log(totalLength)

}

//Add the Product ID for each item and each quantity dropdown then add them with na addToCart for each. I am sure there is a better cleaner way to do this but this works for now. 

export function buyNow_click(event) {
let selOptA=Number($w("#donut1").value);
let selOptB=Number($w("#donut2").value);
let donuts="2112c343-cecb-1666-eff9-2c422bdc5075"
let donuts2="d68c460b-b450-2614-4a65-28815e32e22a"
  $w("#shoppingCartIcon1").addToCart(donuts,selOptA)
    .then( () => {
      console.log("Product added");
    } )
    .catch( (error) => {
      console.log(error);
    } );
 $w("#shoppingCartIcon1").addToCart(donuts2,selOptB)
    .then( () => {
      console.log("Product added");
    } )
    .catch( (error) => {
      console.log(error);
    } );

}
5

Hi, this is an intersting idea. Which option did you choose and is it possible to see you Donuts website please? Would like to check how the flow works, especially the add to cart and what the cart looks like with the selected options.

We are trying to create a custom tshirt print design with eight options, but are having problems with the display of the end designed product in the cart.

Any help is very welcome, thank in advance:)