Disable recharge 'subscribe' option for one variant.

[BirdhouseUSA]

Hi everyone! 

We have 3 products that come in the following variants:

4 Pack, 8 Pack, 16 Pack.

Here's the store URL: 
https://crispandcrude.myshopify.com/ ( password: susahx )

The Issue:

We are using ReCharge for subscriptions, however we do not want to offer subscriptions for the "4 Pack" because it isn't cost efficient.

We also want to avoid creating multiple product pages just to split up the subscription items and buy now items. In this case it would be very confusion and not user friendly.

Does anyone how how to achieve this either through native ReCharge options, or using jQuery? 

The logic is essentially as follows: 

// If onload '4 pack' is selected or

// If the quantity button is clicked and '4 pack' is selected

// then Disable subscription

// else Enable subscription

Any direction you can offer would be very helpful. I'm actually kind of surprised ReCharge doesn't have this built in being the top Shopify subscription app  😕 

[iDoThemes · Accepted solution]

I believe this is happening because recharge loads after the page load, so DOMContentLoaded won't work here. I was only testing in the console after page load so I didn't catch this issue.

We can instead use a setInterval trick to wait for a certain element to exist before firing the code, give this a try:

var checkExist = setInterval(function() {
  // Check if RC widget exists on the page, if not, check again in 100ms
  if (document.querySelector('.rc_container')) {
    // Clear interval so this only runs once
    clearInterval(checkExist);

    // Variant title to prevent sub on
    let noSub = '4 Pack'

    // DOM elements 
    let variants = document.querySelectorAll('[data-value]');
    let rechargeForm = document.querySelector('.rc_container')
    let initialCheckedValue = document.querySelector('.swatch input:checked')

    // For each variant option
    variants.forEach(variant =>
      // Add an onclick event listener
      variant.addEventListener('click', e => {
        // If the variant selected matches the no subscription variable
        if (e.target.value == noSub) {
          // Hide RC widget and click first/one time option          
          rechargeForm.style.display = 'none'
          document.querySelector('.rc_widget__option--onetime input').click();
        } else {
          // Show RC widget
          rechargeForm.style.display = 'block'
        }
      })
    )

    // On first load
    if (initialCheckedValue.value == noSub) {
      // Hide RC widget and click first/one time option
      rechargeForm.style.display = 'none'
      document.querySelector('.rc_widget__option--onetime input').click();
    } else {
      // Show RC widget
      rechargeForm.style.display = 'block'
    }
  } 
}, 100); // check every 100ms

[iDoThemes]

It looks like your theme.js file is minified so hooking into the onchange event might be feasible.  Here's something I threw together that should do this, though since it relies on DOM elements that belong to an app, they are subject to change and might break in the future. If 4 pack is selected, or is the default value, it will click the one-time option, then hide the recharge form.

  window.addEventListener('DOMContentLoaded', (event) => {
    let noSub = '4 Pack'
    let variants = document.querySelectorAll('[data-value]');
    let rechargeForm = document.querySelector('.rc_container')
    let initialCheckedValue = document.querySelector('.swatch input:checked')

    // On variant change
    variants.forEach(variant =>
      variant.addEventListener('click', e=> {
        if (e.target.value == noSub) {
          // Hide RC widget and click first/one time option          
          rechargeForm.style.display = 'none'
          document.querySelector('.rc_widget__option--onetime input').click();
        } else {
          rechargeForm.style.display = 'block'
        }
      })
    )

    // On first load
    if (initialCheckedValue.value == noSub) {
      // Hide RC widget and click first/one time option
      rechargeForm.style.display = 'none'
      document.querySelector('.rc_widget__option--onetime input').click();
    } else {
      rechargeForm.style.display = 'block'
    }
  });

[BirdhouseUSA]

Hi, thank you VERY much, I didn't expect such thorough detail so this is greatly appreciated! 

I ran into an error when trying to run your code, do you know if this is something I'm doing wrong on my end? Thanks again!

[iDoThemes · Accepted solution]

I believe this is happening because recharge loads after the page load, so DOMContentLoaded won't work here. I was only testing in the console after page load so I didn't catch this issue.

We can instead use a setInterval trick to wait for a certain element to exist before firing the code, give this a try:

var checkExist = setInterval(function() {
  // Check if RC widget exists on the page, if not, check again in 100ms
  if (document.querySelector('.rc_container')) {
    // Clear interval so this only runs once
    clearInterval(checkExist);

    // Variant title to prevent sub on
    let noSub = '4 Pack'

    // DOM elements 
    let variants = document.querySelectorAll('[data-value]');
    let rechargeForm = document.querySelector('.rc_container')
    let initialCheckedValue = document.querySelector('.swatch input:checked')

    // For each variant option
    variants.forEach(variant =>
      // Add an onclick event listener
      variant.addEventListener('click', e => {
        // If the variant selected matches the no subscription variable
        if (e.target.value == noSub) {
          // Hide RC widget and click first/one time option          
          rechargeForm.style.display = 'none'
          document.querySelector('.rc_widget__option--onetime input').click();
        } else {
          // Show RC widget
          rechargeForm.style.display = 'block'
        }
      })
    )

    // On first load
    if (initialCheckedValue.value == noSub) {
      // Hide RC widget and click first/one time option
      rechargeForm.style.display = 'none'
      document.querySelector('.rc_widget__option--onetime input').click();
    } else {
      // Show RC widget
      rechargeForm.style.display = 'block'
    }
  } 
}, 100); // check every 100ms

[BirdhouseUSA]

I honestly can't thank you enough. There was no way I was going to come up with that solution alone. 

I APPRECIATE YOU!! 

[BirdhouseUSA]

If I could tap your brilliance, do you suppose there's a good way to hide the recharge from loading so it doesn't look like it's glitching before it hides for the 4 pack?

Let me know where to send the pizza to!! 🍕

[iDoThemes · Accepted solution]

Maybe hide it by default since the above code will reveal it anyway.

Something like this in your main CSS file should achieve that:

.rc_container {
  display: none;
}

[GFOatsAustralia]

Hi all - I am also trying to hijack this code and use for our site, to hide a few variants for subscription products.
Can someone please point me towards where I add the code? Do it go in the "subscritption-product.liquid" file or somewhere else?

Also, If i want to hide several variants; can i get clarification on how to do this?

// Variant title to prevent sub on
let noSub = 'Option 2'
let noSub = 'Option 5'
let noSub = 'Option 6'

Or let noSub = 'Option 2, Option 5, Option 6'

Any help would be great! - Thanks, Andy

[bretvoltage]

I'm looking to do a similar thing - I'm having an issue where my Wholesale Pricing Discount app and Recharge are both trying to edit the price on my product pages when a wholesale customer is logged in. The WPD app is telling the price to get discounted, but then Recharge is loading after and changing the product back to its original retail price. So, I would like to hide the Recharge subscription widget all together (not needed / used by my wholesale customers anyway), or otherwise stop Recharge from editing the product price *if* customer tag contains "wholesale". Any ideas? Thanks!