I have created a custom product attribute text field for personalizations that I only want it to appear on the product page if the product has an option name called “Personalization” and the selected value is “Yes”.
<div id="personalization-content">
<div class="field">
<input required class="required" id="personalized-text" type="text" name="properties[Personalized Text]" value="{{ properties["Personalized Text"] }}" placeholder="First Name for Personalization" form="product-form-{{ section.id }}" maxlength="25" >
<label for="personalized-text">First Name for Personalization</label>
</div>
</div>
I tried wrapping my code in the conditions {%- if option.name == ‘Personalization’ -%} and {% if option.selected_value == ‘Yes’ %}, however, it only works on the page load, it does not update when the the selected variant changes. From what i’ve read, I need to utilize JS to access the selected variant but am unsure how to do this. I want to achieve this without the use of apps and would appreciate some guidance.
I would also love to find a way if possible, to display a checkbox in place of the personalization option pills that says “Add personalization”. By default, if unchecked, the option value “No” will be selected, however, if it is checked then the “Yes” value is selected instead.
