Quantity & Color selector (bundle selector) *I can pay for it*

Technical Q&A
1

Hi guys, I urgently need help, I need something like in the video I have

I need a selector exactly like this, so 1 quantity selector and 3 selectors that make the color of each chosen quantity choose …

Furthermore, when 1 quantity is selected, the “2 ° Color” and “3 ° Color” selectors must disappear.

And if you choose 2 quantities, the “3 ° Color” selector must disappear

And if 3 quantities are chosen, all 3 selectors must be visible

But now comes the most complex part … I have an application called “widebundle” that allows me to do exactly the same thing, and I have it active on my site, but I need 2 sections where you can choose quantity and colors

(because on my landing page there is the section where you can pay on delivery and a section where you can pay by credit card)

the point is that the application I mentioned earlier (widebundle) creates variants such as these:

Offer:
-1 pieces
-2 pieces
-3 pieces

Color:
-Red
-Gray

-Red, Red
-Red, Gray

-Red, Red, Red
-Red, Red, Gray
-Red, Gray, Gray
-Gray, Gray, Gray

But not all these combinations must appear in the website (otherwise the customer gets confused) that’s why there must be 3 selectors, so that when all 3 selectors are set to “Gray” somehow a script goes to select the variant “Gray, Gray, Gray”

The point is that the widebundle application works exactly like this, and the variants have already been created and cannot be changed (because the application creates them) so when you go to create the script that makes everything work, you have to use the variants already existing

It is also important that when you have finished selecting the quantity and color on the site, the final part of the url (the variant code) updates automatically.

I need 4 colors: Red, Gray, Blue, Black
The script should use these variants as a name:

Offer:
1 Silky Plaid
2 Silky Plaid
3 Silky Plaid

Colore: (*this is color)
Rosso
Rosso,Grigio
Rosso,Grigio,Nero
etc etc…

2

@karimpanacci

I am missing the video you referenced but building a custom bundler that uses variants is a relatively simple task. For example if you want to allow the customer to choose 3 separate colors and add all 3 variants to the cart at the same time you can do so using the product form without any JavaScript used at all. If they can choose the same color variant multiple times then JavaScript is currently necessary for that. The reason is that Shopify’s system does not currently know how to handle that scenario, I have tested recently, and when trying to add 3 I got 2 and add 3 again, the same request payload, I got 1.

Anyway the point being that what you are describing is relatively easy to achieve without needing to use an app at all (assuming some sort of custom discount does not need to be applied).

Hope that helps!

3

oh sorry, this is the link for the video:

https://drive.google.com/file/d/1oxbOOFU8jPmZjSTFFHXb0x-ByaG7KH9k/view?usp=sharing

the point is that you have to use the same system that uses the widebundle application, that is when all 3 selectors are selected (for example) on gray, red and blue through a script you have to select the variant which is called exactly "gray , red, blue "as in the photo I attached (Grigio means gray in Italian)

Schermata 2022-02-05 alle 20.23.52.png
Schermata 2022-02-05 alle 20.23.52.png1294×614 28.6 KB

4

@karimpanacci

I see what you are saying. For the product it has variants that match every color combination? That seems weird to me but if they are like prepackaged kits then it would make some sense. Otherwise, why not just have a variant of each color and allow the customer to purchase up to 3 in a bundle?

I’m not sure about the widebundle app but I just want to understand better why it needs to be used instead of just rolling without an app.

Also, if the variants like you show need to be used then setting up a bundler like the video showed would still be relatively easy to do.

Are there different products for the colors or are they all variants of the same product?

5
Show More

@RobDukarski

Show More

so, i understand what you say, but you can’t use shopify variants directly because shopify allows a maximum of 3 options, instead i need 4 (quantity, color 1,2 and 3) and then i think doing that way shopify will create more combinations … because if for example you have to choose the colors (gray, red, blue) using the widebundle method there is only one combination, instead using the classic method there would be more:

Show More

(gray, red, blue)

Show More

( gray, blue, red)

Show More

(blue, gray, red) etc …

Show More

and therefore the limit of 100 variants will be exceeded very easily …

Show More

in answer to your question, they are all variants of the same product

Show More

I state that although I do not know at all about html / javascript code I am still able to do very very basic things … how could I create what I showed in the video? should i create 4 selectors (give it a class or id) and then use a script? would you be able to write this script?

6

@karimpanacci

What I meant was to have a color of grey, blue, red, etc.

Quantity is of the product variant added to the cart itself so if you wanted a combination you would have 1 red, 1 blue, and 1 grey added to the cart at the same time to create the bundle of 3.

At least that’s how I have always went about bundles that were not prepackaged kits.

It should be okay to go your route though, I just figured it would be easier for inventory management if you removed 1 of each color each time they are sold.

Yeah I can create the bundler for you if you’d like.

Hope that helps!

7

@RobDukarski
if you were able to create a selected one that takes exactly the existing variants it would be perfect! let me know

8

@RobDukarski

ehi Rob, you have news?

9
Show More

hey @RobDukarski i don’t need that selector anymore, at least for the moment, i need to hide from the dropdown selector the unavailable variants (out of stock) can someone help me please?