Add a checkbox to a product page Debut Theme

[nealm759]

I am trying to add a confirmation checkbox to the new version of DEBUT and the validation to disable and enable the add to cart button is not working.

I want the add to cart button to be unclickable until the customer confirms, right now it either is clickable or does not become clickable. 

I have used this as a reference and it does not seem to work, I have also disabled the ajax add to cart notification to no avail

https://community.shopify.com/c/Shopify-Design/Add-age-confirm-checkbox-to-Product-page/td-p/647541

Below is my code 

<div class="custom-field__outofstock">          
              <span style="text-decoration: underline; color: #ff2a00;"><strong>Temporarily Out Of Stock</strong></span><br>
<input type="hidden" name="properties[_confirm-preorder]" value="Yes">
  <label for="confirm-preorder">Due to high demand, this item is not available until <b>{{ product.metafields.custom_fields["dateavailable"] }}</b>. I understand that my <b>entire order</b> will ship after <b>{{ product.metafields.custom_fields["dateavailable"] }}</b></label>
                <input id="confirm-preorder" required class="required acceptTerms" type="checkbox" name="properties[_confirm-age]" value="Yes">

              </div>  
                      

          <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
              data-error-message-wrapper
              role="alert"
            >
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>
            <div class="product-form__controls-group product-form__controls-group--submit">
              <div class="product-form__item product-form__item--submit
                {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
              >
                <button type="submit" name="add" id="purchase" class="btn {% if section.settings.show_smart_checkout %} secondary-button{% endif %}" data-cart-action="{{ section.settings.cart-action }}">
        {% if pick_an_option or current_variant.available %}
          {{ 'products.product.add_to_cart' | t }}
                  {% else %}
                    {{ 'products.product.sold_out' | t }}
                  {% endif %}
      </button>
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              </div>
            </div>

and the javascript

(function () {
  const addToCardBtnEl = document.getElementById('addToCardBtn');
  const confirmAgeCheckboxEl = document.getElementById('confirmAge');
  addToCardBtnEl.setAttribute('disabled', true);

  confirmAgeCheckboxEl.addEventListener('change', (event) => {
    if (confirmAgeCheckboxEl.checked) {
      addToCardBtnEl.removeAttribute ('disabled');
    } else {
      addToCardBtnEl.setAttribute('disabled', true);
    }
  });
})()

[JHKCreate]

Hi @nealm759 

Try creating a required line property to block the add the cart from tiggering before the user ticks this option. A reference link is this one Line Item Property – Shopify UI Elements Generator (myshopify.com), try using the code below as a test, put it inside your <form> tag:

<p class="line-item-property__field">
  <input type="hidden" name="properties[Accept This Box]" value="No">
  <input id="accept-this-box" required class="required" type="checkbox" name="properties[Accept This Box]" value="Yes">
  <label for="accept-this-box">Accept This Box</label>
</p>

Let me know if that solves it for you!

[nealm759]

@JHKCreate 

It does add a checkbox, but it still is not required to click the add to cart button.

Though it does pass the value to the cart which is very nice...

https://we42j981ga2435di-10034053167.shopifypreview.com/products/white-distressed-lantern-small?vari...

[nealm759]

@JHKCreate Do you think that some sort of validation needs to be added to the add to cart button? I have removed the add to cart notification, but I feel like AJAX is still the issue.