概要

設定方法

<div class="page-width" id="about-discount-message">
	<p>あと<span id="about-remaining-price"></span>で¥1,000割引になります。</p>
</div>
<script>
const minimumPurchaseAmount = 10000;
window.addEventListener('DOMContentLoaded', (event) => {
  const observer = new MutationObserver(discountChecker);
  const elem = document.getElementById('main-cart-footer');
  const config = { 
    attributes: true, 
    childList: true, 
    characterData: true,
    subtree: true
  };
  observer.observe(elem, config);
	discountChecker();
});
const discountChecker = () => {
	const xhr = new XMLHttpRequest();
  xhr.open('GET', '/cart.json', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      const cart = JSON.parse(xhr.responseText);
      const originalTotalPrice = cart.original_total_price / 100;
			const aboutDiscountMessage = document.getElementById('about-discount-message');
      const remainingPrice = freeShippingPrice - originalTotalPrice;
			const aboutRemainingPrice = document.getElementById('about-remaining-price');
      if ( remainingPrice > 0 ){
          aboutDiscountMessage.style.display = 'block';
          aboutRemainingPrice.innerText = remainingPrice.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
      } else {
          aboutDiscountMessage.style.display = 'none';
			}
    }
  };
  xhr.send();
}
</script>
<style>
#about-discount-message {
	display: none;
  text-align: right;
}
#about-remaining-price {
    color: #C00;
    font-weight: bold;
}
</style>