How do I hide a div when Recharge Subscription is selected on a product page?

Technical Q&A
1

I am looking for something really simple here that is for some reason doesn’t work no matter what I try.

How do I hide a div when Recharge Subscription is selected on a product page? I was thinking something like this:

$(“.rc-radio__input”).change(function(){
if($(this).val() == ‘onetime’){
$(“.afterpay-holder”).show();
} else {
$(“.afterpay-holder”).hide();
}
});

2

Hi @jlfx ,

You can try with following code:

document.querySelector('.rc-radio__input').addEventListener('change', (event) => {
  if(event.target.value == 'onetime'){
    document.querySelector('.rc-radio__input').style.display = 'block';
  } else {
    document.querySelector('.rc-radio__input').style.display = 'none';
  }
});

Hope it helps!

3

Thanks, but no cigar. For more information, I am trying to hide the AfterPay messaging when a subscription is selected for two reasons: 1: the price is different, 2: you cannot pay for a subscription with AfterPay. I see this behavior on a lot of sites, just not sure how they achieve it.

4

Hi @jlfx ,

Please send your site and if your site is password protected, please send me the password. I will check it.

5

Hi @jlfx ,

Please change code theme.liquid file:


  
 

    
  
  
  
  
 
{% render 'network' %}
 
  {% if settings.favicon != blank %}
   
{% endif %}
 
  
  
  {% if page_description %}
  
  {% endif %}
 
  {% render 'social-meta-tags' %}
 
  
  
  
  
  
 
  
{% render 'css-include' %}
 

  
  
 
  {% if settings.anim_load %}

{% endif %}
  {% if template contains 'customers' %}
  
  {% endif %}
 

 

 
 
  
  
 

 

{% section 'mobile-drawer' %}
{% section 'announcement' %}
{% section 'header' %}
 

{{ content_for_layout }}

 
{% section 'footer' %}
{% section 'age-checker' %}

 
{% if settings.search_enable %}

   

       

           

               ### {{ 'general.search.label' | t }}
           

       

       
           
           {% assign search_nav = settings.search_linklist %}
           {% if linklists[search_nav].links.size > 0 %}
               
                   #### {{ linklists[search_nav].title }}
                   
                       {% for link in linklists[search_nav].links %}
                           - {{ link.title }}
                           
                       {% endfor %}
                   

               

           {% endif %}
       

   

{% endif %}
 

           

           {% if settings.cart_type == 'modal' %}
               ### {{ 'cart.general.title' | t }}
               {% endif %}
               {% if settings.cart_type == 'notification' %}
               ### {{ 'cart.general.added_to_cart' | t }}
               {% endif %}
           

       

      

      {% unless settings.cart_type == 'notification' %}
      
      

      ##### {{ 'cart.general.empty' | t }}
      
      
      
      {{ 'cart.general.empty_link' | t }}
      

      

      {% endunless %}
      

 
{% render 'ajax-cart-template' %}
 

 
 {{ 'minifier-link-prefetch.js' | asset_url | script_tag }} {% include 'booster-recommendation' %}
 
{% include 'stamped-rewards-init' %}
 

  
  

{% if template contains 'product' %}

{% endif %}

Hope it helps!