Shopify動的チェックアウト対策

dynamicCheckoutCart

<script>
  "use strict";
  const deliveryDateInput = document.querySelector('#delivery_date_input');
  const deliveryTimeInput = document.querySelector('#delivery_time');

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (deliveryDateInput.value !== null) {
        updateDeliveryDate();
      }
    });
  });
  const config = {
    attributes: true,
    attributeFilter: ['value']
  };
  observer.observe(deliveryDateInput, config);
  deliveryTimeInput.addEventListener('change', updateDeliveryDate);

  function updateDeliveryDate() {
    const deliveryDateInputValue = deliveryDateInput.value;
    const deliveryTimeInputValue = deliveryTimeInput.value;
    const data = {
      attributes: {
        'delivery_date': deliveryDateInputValue,
        'delivery_time': deliveryTimeInputValue
      }
    };
    fetch('/cart/update.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    })
    .then(response => response.json())
    .then(data => {
      console.log('Success:', data);
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  }
</script>