Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi everyone.
I use the app Live Product Options and the theme focal. Here I have a radio button with two options, if one of the radio button is checked it should disable the Add to cart button.
I tried it with this snippet. I put it in the theme.js.
$(document).on('change','#option_8338950095188_Platzbedarf-1',function(){
$('#AddToCart').hide();
if($(this).is('checked')){
$('#AddToCart').show();
}
})
Here is the code from the radio buttons that create the app
<div class="cl-po--option" data-option="Platzbedarf">
<label class="cl-po--label" for="option_8338950095188_Platzbedarf"><!---->Ist der Platzbedarf bis zum Mauerwerk ausreichend (Seitlich links, rechts: min. 20mm / Oben: min. 38mm / Unten: min. 50mm)? </label>
<label class="cl-po--radio-item ">
<input type="radio" class="cl-po--input" id="option_8338950095188_Platzbedarf-0" name="properties[Platzbedarf]" value="trifft zu (Du hast die idealen Vorraussetzungen!)" required="" form="product-form-template--18187666915668__main-8338950095188">
trifft zu (Du hast die idealen Vorraussetzungen!)
</label>
<label class="cl-po--radio-item ">
<input type="radio" class="cl-po--input" id="option_8338950095188_Platzbedarf-1" name="properties[Platzbedarf]" value="trifft nicht zu ( Bitte kontaktiere uns per Mail)" required="" form="product-form-template--18187666915668__main-8338950095188">
trifft nicht zu ( Bitte kontaktiere uns per Mail)
</label>
</div>
This is the code from the Add to Cart button:
<button id="AddToCart" type="submit" is="loader-button" data-use-primary="" data-product-add-to-cart-button="" data-button-content="Zum Warenkorb hinzufügen" class="product-form__add-button button button--primary button--full">
<span class="loader-button__text">Zum Warenkorb hinzufügen</span>
<span class="loader-button__loader" hidden="">
<div class="spinner">
<svg focusable="false" width="24" height="24" class="icon icon--spinner" viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="5"></circle>
</svg>
</div>
</span>
</button>
I am looking forward to your replies.
Kind Regards
Kevin
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025