概要

Produce_36.mp4

設定方法

※前提となるディスカウントの設定が異なる場合、以下のコードをそのまま適用することはできません。

<script>
	const freeShippingMinAmount = 5000;
	const minimumAmountForDiscount = 10000;
	window.addEventListener('DOMContentLoaded', (event) => {
		const observer = new MutationObserver(shoppingAndDiscountChecker);
		const elem = document.getElementById('main-cart-footer');
		const config = { 
			attributes: true, 
			childList: true, 
			characterData: true,
			subtree: true
		};
		observer.observe(elem, config);
		shoppingAndDiscountChecker();
	});
	const shoppingAndDiscountChecker = () => {
		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 aboutShippingAndDiscountMessage = document.getElementById('about-shipping-and-discount-message');
				const remainingAmountForFreeShipping = freeShippingMinAmount - originalTotalPrice;
				const remainingAmountForDiscount = minimumAmountForDiscount - originalTotalPrice;
				let isDiscounted = false;
				let displayMessage = null;
				if (remainingAmountForFreeShipping > 0 && remainingAmountForDiscount > 0) {
					displayMessage = `あと<span class="price">${remainingAmountForFreeShipping.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })}</span>で配送料無料、<span class="price">${remainingAmountForDiscount.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })}</span>で¥1,000割引になります。`;
					isDiscounted = true;
				} else if (remainingAmountForFreeShipping <= 0 && remainingAmountForDiscount > 0) {
					displayMessage = `配送料は無料です。あと<span class="price">${remainingAmountForDiscount.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })}</span>で¥1,000割引になります。`;
					isDiscounted = true;
				} else if (remainingAmountForFreeShipping <= 0 && remainingAmountForDiscount <= 0) {
					displayMessage = `配送料は無料です。合計金額が${minimumAmountForDiscount.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })}を超えましたので¥1,000割引されています。`;
					isDiscounted = true;
				} else {
					isDiscounted = false;
				}
				if (isDiscounted){
					aboutShippingAndDiscountMessage.style.display = 'block';
					aboutShippingAndDiscountMessage.innerHTML = displayMessage;
				} else {
					aboutShippingAndDiscountMessage.style.display = 'none';
					aboutShippingAndDiscountMessage.innerHTML = '';
				}
			};
		}
		xhr.send();
	}
</script>
<div class="page-width" id="about-shipping-and-discount-message"></div>
<style>
	#about-shipping-and-discount-message {
		display: none;
		text-align: right;
	}
	#about-shipping-and-discount-message .price {
		color: #C00;
		font-weight: bold;
	}
</style>