Dawm Theme - Add Checkbox for Terms & Condition in cart-drawer

Store Design
, ,
1

Hello Community,

i am about to add a checkbox into my cart-drawer for the terms and conditions in the dawn theme. So far it looks good as you can see in the pictures:

Image1.png
Image1.png397×167 7.54 KB

Image2.png
Image2.png391×162 7.32 KB

Image3.png
Image3.png388×157 7.24 KB

I do have a checkbox for terms and the goal is that the checkout button is only available when the checkbox is marked. This works except for one condition.

The function does not work when the cart drawer is open for the first time (image3) It just does work when i refresh the whole browser page one time (image2), so after a first refresh the function works perfectly.

Here is my script:

// Funktion zur Überprüfung des Checkbox-Status
  function updateCheckoutButtonStatus() {
    const termsCheckbox = document.getElementById('termsbox_id');
    const checkoutButton = document.querySelector('[name="checkout"][type="submit"]');

    if (termsCheckbox && checkoutButton) {
      if (termsCheckbox.checked) {
        checkoutButton.disabled = false;
      } else {
        checkoutButton.disabled = true;
      }
    }
  }

  // DOMContentLoaded-Event: Warten, bis das DOM geladen ist
  document.addEventListener('DOMContentLoaded', function () {
    // Initialen Status beim Laden der Seite setzen
    updateCheckoutButtonStatus();

    // Event Listener für Checkbox hinzufügen
    const termsCheckbox = document.getElementById('termsbox_id');
    if (termsCheckbox) {
      termsCheckbox.addEventListener('change', updateCheckoutButtonStatus);
    }
  });

Cheers,