addToCart with Pizza Toppings Selection

Ask the community
,
1

Hello Everyone!

I am struggling to create a form that allows you to add a product to the cart but also includes options that users can select. That then adds the product and sends the form information with the order.

For example;

You have a pizza and the first selection is size.

SIZE: Small, Medium, Large, Extra Large

The pizza allows 3 toppings but there are 20 to choose from.
I want to have images people can select for the toppings or at least radial buttons next to them if that’s easier code wise.

TOPPINGS: Olives, Pepperoni, Onions, Peppers, Mushrooms, Pineapple, etc.

Once they select the 3 toppings I want it to limit them on how many they can select then show the add to cart button.

Then once the button is clicked it will add it to their cart and somehow submit the information from their choices with the order.

Here is what I have so far code wise but I feel I am missing a bunch.

“$w(” #addtocartbutton ").onClick( () => {
$w( “#shoppingCartIcon1” ).addToCart( “3e1721b6-c906-7f2c-f0b6-8d86bda9a2c3” , 1 ,{
“choices” : {
“Size” : {
“optionType” : “drop_down” ,
“name” : “Size” ,
“choices” : [
{
“value” : “Small” ,
“description” : “Small” ,
“inStock” : true ,
“visible” : true ,
“mainMedia” : null ,
“mediaItems” :
},
{
“value” : “Medium” ,
“description” : “Medium” ,
“inStock” : true ,
“visible” : true ,
“mainMedia” : null ,
“mediaItems” :
},
{
“value” : “Large” ,
“description” : “Large” ,
“inStock” : true ,
“visible” : true ,
“mainMedia” : null ,
“mediaItems” :
},
{
“value” : “XL” ,
“description” : “XL” ,
“inStock” : true ,
“visible” : true ,
“mainMedia” : null ,
“mediaItems” :
},
{

I am not sure how to add the checkbox choices for the toppings or how to actually submit this information once selected.

Also, do I have to create a different product for every possible toppings combination?

If anyone could help point me in the right direction that would be great. I have tried the product configurator demo https://www.wix.com/velo/example/product-configurator
and it got me this far now I am stuck.

Thanks and talk soon!

2

Hi,

To achieve this functionality, I recommend following this tutorial here as the logic is in line with the customizations you are looking for with your pizzas. The tutorial gives you step by step instructions and you can adapt your code to your needs along the way.
If you need this functionality for multiple pizzas, you will have to follow the tutorial for each pizza on a new page or develop a way to get it to work with dynamic pages, but following the same logic.

Hope this helps!

Edward