Grey out Checkout button prior to option selection

Store Design
1

Hello,

I would like to add a feature to my cart, whereby if a customer adds a certain product with relevant tag to the basket, options are given to enter a text field or select a radio button relevant to the product, and once this is selected customer can proceed. Can anyone help?

Many thanks!

2

HI @AirsoftAnon

you should edit your for cycle into your cart.liquid and add an if condition in order to check the tag

prior to the loop you could assign a bool variable which is changed as true if the given tag is met.

Into the tag classes you could so that put a condition, if the variable is true, then add disabled class.

so for example

{% assign checkTag = false %}

{% for line_item in cart.items %}

/outputs the item/

{% if product.tags contains ‘specialTag’ %}

/outputs the input fields, like a radio or a text input/

{% endif %}

{% endfor %}

/here’s the “go to checkout” button/

<button type=“submit” class="btn btn-classes {%- if checkTag %}btn-disabled{% endif %}>

Go to checkout

of course you will need some kind of listener in JS in order to remove the disabled class from the button once the inputs are filled

Let me know if this idea could be of some help!