Allow multiple (different) variants to be added to cart at once

Shopify Discussion
,
1

Schermafbeelding 2025-01-10 135407.png
Schermafbeelding 2025-01-10 135407.png1918×1078 261 KB

Hello I got this volume bundle which exists of a table with 3 rows. I added the cart just like the add to cart is added in main-product.liquid. But when I add a product to cart, currently for row 1, 1 product is added for row 2, 2 products are added, and for the last row we look at the quantity selector to determine how many products are added to cart. But this process only looks at the latest change variant to determine which variant to add to cart how many times. It does not allow me to look at the variant selectors within the row, to determine the products that need to be added to cart. Is there a simple way to achieve this?

Kind regards,

Stef

2

Hello @webcraftio . I’m currently still working on this and I’m struggling with the third row of the volume bundle. I got this javascript for handling adding variant selectors and options to the third row ‘Buy 3+, Save 15%’. This means a user defaultly buys 3 products in this row, but can add more. Currently I got this code: Jan 11 1:11 PM - Codeshare. (Look at the bottom for addition in code for add to cart button.)

{%- for option in product.options_with_values -%}

              
                
                
              

            {%- endfor -%}

1 product has 2 variant selectors in my example product: Glow Curtain: 400 LED Lights for a Magical Ambiance – InteriorGlows. When I log option, I notice that ‘Size’ and ‘Plug’ are like added apart from each other. And when I try to get the variantId from looking at the variants, it does not work. Is there a proper way to get the correct variantIDs from multiple products?

3

Hello @webcraftio , I currently got this code: Jan 12 12:44 PM - Codeshare. At the bottom, the new part is added. I added some debug messages, currently only these debug messages are triggered on the event, nothing is added to cart and no variantIds are found I think:
CLICKED
glowcurtain-400-led-lights:5926 triggered
glowcurtain-400-led-lights:5931 pickers: [object NodeList]
glowcurtain-400-led-lights:5932 selectedValues: 1M x 1M,Type A (EU)

So currently, only the variants of the top selected variant are being logged, and not the other variants (second and third one from the Buy 3+ offer). No variants are being added to cart unfortenately.

4

Hello @webcraftio , nevermind the products are added to cart, Thank you so much! I got a problem with the products not showing up until I reload the page, or go to the cart page. When I click on my cart drawer after adding the products to cart, they do not show up though. Do you know how to fix this?

5

And I got one other question, the bundle is supposed to give you a discount when you order more than one product, do you know how I can set a 15% discount for the group of products added to cart?

6

Hello @webcraftio , is it possible to make the discount via code? I’m creating this volume bundle for all products on my webshop, so I will have to create a discount for all of my products if I want to do it manually. And if I create one Product discount for it (e.g. 10% discount for 2 products) and assign them to all products, the customers will be able to combine different products to get the discounts, and I only want to allow different (or the same) variants for a product to get the discount. Furthermore, do you know how I can refresh the cart after I added the products show the products added to cart actually show up in my cart drawer. THANKS a lot for all of your help!

7

Hello @webcraftio , I’m using the basic plan.

8

Hello @webcraftio , I really want to set it up myself to also learn javascript/html/css. it finally also works good, I just need to create a function to update and open the cart drawer after adding to cart, and the prices system needs to work. Please let me know if you have an idea how to set the prices for a group of products, and if one of the product is deleted, reset all prices to original price.

9

I primarely use the cart drawer and not the cart page. I made changes on the displayment of discounts on the cart drawer page, I automatically apply a shipping cost of $0, and show that in the user’s currency on the cart drawer pages. Furthermore I showcase product discounts (the difference in the product price and compare-at-price directly under the shipping price. Under the product discount I show other discounts such as SIGN UP discounts or other shopify discounts in a for loop on top of each other.

10

Hello @webcraftio , currently I want to set a price for a group of products. So when products are added to cart from a bundle I want to set a custom price for the group of products, if a product from the group of products is removed from the cart, I want all other products from that cart to reset prices to their original prices. This way users cannot manipulate prices and can get discounts by buying from the bundle offer.

11

Hello @webcraftio , I added a file assets/bundle-pricing.js which looks like this: Jan 12 6:48 PM - Codeshare. I added my 3 standard variants to the products in bundleConfig:

{ id: '49774845821267', originalPrice: 44.99, bundlePrice: 24.99 },
    { id: '49774845821267', originalPrice: 44.99, bundlePrice: 29.99 },
    { id: '49774845821267', originalPrice: 44.99, bundlePrice: 39.99 }

And I added the file to my theme.liquid head and my snippets/cart-drawer.liquid:

But when I add the 3 products with ID: 49774845821267 to cart and go to cart after, there is no discount on the prices. but the original prices remain the same. Do you know what I did wrong here?

12

I did all the steps, my bundleConfig looks like this:

{ id: '49774845821267', originalPrice: 44.99, bundlePrice: 24.99 },
    { id: '49824558383443', originalPrice: 47.99, bundlePrice: 29.99 },
    { id: '49824558481747', originalPrice: 50.99, bundlePrice: 39.99 }

When I try to add the products using the bundle, products with ids 49774845821267, 49824558383443,49824558481747 no discounts are added to the products. Also I added debug messages to the bundle-pricing.js but none of them fire. Do you want me to share my collaboration code with you, so you can have a closer look instead of just getting information from me. Here is my idea of how it should work.

My volume bundle has to work with two discounts, first: Buy 2, Save 10%. Second: Buy 3+, Save 15%.
I specifically focus on the Buy 3+ part right now, because it allows the quantity to go above 3. The logic for the buy 2 offer is a lot easier.

For the Buy 3+, Save 15% part. For all of my products, I want to allow the bundles. The bundle should allow different variants in a product to work, but not to combine 2 different products to get the discount, the discount should only be applied on different variants, so let’s say someone wants to buy this product 3x: Best Indoor Lighting Ideas: LED Ceiling & Table Lamps for Your Home – InteriorGlows in different variants.

Variant 1: 1M x 1M, Type A (EU) regular price 44.99

Variant 2: 2M x 2M, Type A (EU) regular price 47.99

Variant 3: 3M x 3M, Type A (EU) regular price 50.99

The pricing of these offers should go to

Variant 1: 1M x 1M, Type A (EU) regular price 44.99 price → (price-(0.15*price))

Variant 2: 2M x 2M, Type A (EU) regular price 47.99 price → (price-(0.15*price))

Variant 3: 3M x 3M, Type A (EU) regular price 50.99 price → (price-(0.15*price))

When for example Variant 3 is removed, variant 1 and variant 2 should get back to their original prices (44.99,47.99)