Need Developer for this project

[TrendBlend]

Hello, I'm working on something called conditional logic for product options. URL: MagCharge – TrendBlend.

I want this for one product only the 'MagCharge' and it should work with the following apps: (Zoorix Sticky ATC) for my Add to Cart widget on the bottom of the page and (FastBundles) for my bundles on my product page. I'm using DAWN Theme.

I need some code to edit the looks of my variant selection. What I want to achieve:
I got these 3 variant selectors for this product.
First one: Wire (1m Wire, 2m Wire, 3m Wire, No Wire)
Second one: Color (Black, Red, Purple)
Third one: Connector (iOS Connection, Type C Connection, Micro Connection, All Connections, No Connections)

The Color variant selector is only relevant for the wired options since the Connectors don't have colors at all. So the color variant should only show up when an option with a wire is chosen. Also the Connector option (so not selector in this case) 'No Connections' should never show up when the option "No Wire" is chosen since you order nothing then.

Now I have already tried to achieve this using custom code myself by hiding the options in the Add To Cart widget and Cart which have worked. But I'm then still seeing the variant options in the Checkout/Order Confirmation Page/Customer Emails/Bundles. So I need someone who can do this for me in a different way.

If you want to help me with this for free please reply to this topic directly, and I will give you a tip. If you want to do this for money only please contact me privately. Since I only want to do this for one product only I can't be spending too much money on this I hope you understand that. Thanks in advance.

Kind regards,
Stef

[TrendBlend]

Hello,

Please either respond with valid code or text about this subject in this thread. Or private message me if you want to do it for money only (and we will discuss it).

kind regards,

Stef

[Sangeetanahar]

hello @TrendBlend 

I am a Shopify expert and mobile developer I can help you I have worked on more than 700 websites if you need my help then you can message me.

Thanks

[TheUntechnickle · Accepted solution]

Hi @TrendBlend,

I saw your question about implementing conditional logic for your MagCharge product, and I'd like to help you out. I've worked on a similar setup before, and I think we can solve your issue by adjusting your product variants directly in Shopify. This way, you won't need complex code, and it should work seamlessly with your existing apps (Zoorix Sticky ATC and FastBundles) and the DAWN theme.

Solution Overview:

We'll modify your product variants to include only valid combinations. By doing this, you'll prevent unwanted options from appearing not just on the product page but also in the cart, checkout, order confirmations, customer emails, and bundles.

---

Steps to Implement

1. Add "Geen Kleur" to the "Kleur" Option

• In your Shopify admin, go to Products > MagCharge.
• Under Options, find Kleur.
• Add a new value: "Geen Kleur" (No Color).

2. Adjust Your Product Variants

We'll delete invalid variants and keep only the valid ones.

A. When "Geen Draad" (No Wire) is Selected in "Snoer":

• Available Kleur Option:

  • Only "Geen Kleur".

• Variants to Delete:

  • All variants where Snoer is "Geen Draad" and Kleur is "Zwart", "Rood", or "Paars".

    Examples:

    • Geen Draad / Zwart / any Aansluiting
    • Geen Draad / Rood / any Aansluiting
    • Geen Draad / Paars / any Aansluiting

  • Variants where Snoer is "Geen Draad", Kleur is "Geen Kleur", and Aansluiting is "Geen Aansluiting".

    Example:

    • Geen Draad / Geen Kleur / Geen Aansluiting

B. When a Wire Length is Selected in "Snoer" ("1m Draad", "2m Draad", "3m Draad"):

• Unavailable Kleur Option:

  • "Geen Kleur" (since a wire requires a color).

• Variants to Delete:

  • All variants where Snoer is "1m Draad", "2m Draad", or "3m Draad" and Kleur is "Geen Kleur".

    Examples:

    • 1m Draad / Geen Kleur / any Aansluiting
    • 2m Draad / Geen Kleur / any Aansluiting
    • 3m Draad / Geen Kleur / any Aansluiting

C. Ensure "Geen Aansluiting" (No Connection) Isn't Available with "Geen Draad":

• Delete any variant where Snoer is "Geen Draad" and Aansluiting is "Geen Aansluiting".

  Example:

  • Geen Draad / Geen Kleur / Geen Aansluiting

3. Keep Your Existing JavaScript

• Since you've already implemented code to hide the Kleur option when "Geen Draad" is selected, you can keep it as it enhances the user experience.
• No additional JavaScript is needed because adjusting the variants ensures that invalid combinations aren't possible.

---

Benefits of This Approach

• Consistent Checkout Experience: By removing invalid variants, customers won't see unwanted options during checkout, in order confirmations, or in emails.
• Improved User Experience: Hiding irrelevant options simplifies the selection process for your customers.
• Compatibility with Apps: Since we're adjusting variants at the Shopify level, it should work smoothly with Zoorix Sticky ATC and FastBundles without requiring special configurations.

Feel free to reach out if you've any questions.

Shubham
Founder | Untechnickle