設定 > チェックアウト > 追加スクリプト
※このコードは、その設定が「代金引換」という文字列である前提で組まれております。
<script>
{% for transaction in checkout.transactions %}
{% capture transaction_gateway_name %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
{% endfor %} var IsCOD = false{% if transaction_gateway_name contains "代金引換" %}
IsCOD = true
{% endif %} document.addEventListener('DOMContentLoaded', (event) => {
const codTotal = 330 // ¥330const originalTotal = () => {
const total = document.querySelector('.payment-due__price')
.getAttribute('data-checkout-payment-due-target')
prettyTotal = parseInt(total) / 100
return prettyTotal
}const totalPlusCod = () => {
return originalTotal() + codTotal
}// Insert the COD fee under total line items
const insertCodRow = (codTotal) => {
const tableHTML = `<th class="total-line__name" scope="row">{{ 'checkout.cod_fee' | t }}</th>
<td class="total-line__price">
<span class="order-summary__emphasis">
¥${codTotal}
</span>
</td>
</tr>`
const newRow = document.querySelector('.total-line-table__tbody').insertRow()
newRow.setAttribute('id', 'payment-fee')
newRow.setAttribute('class', 'total-line total-line--shipping')
newRow.innerHTML = tableHTML
}// formatting for currency display -- int => string
const numberWithCommas = (number) => {
const parts = number.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}// This function updates the total price if COD is selected/deselected
const updatePrice = () => { const htmlSubtotal = document.querySelector('.payment-due__price')
//const orderSummary = document.querySelectorAll('.order-summary__emphasis')
const mobileTotal = document.querySelector('.total-recap__final-price') const newTotal = numberWithCommas(totalPlusCod())
htmlSubtotal.textContent = `¥${newTotal}`
//orderSummary[1].textContent = `¥${newTotal}`
mobileTotal.textContent = `¥${newTotal}`
insertCodRow(codTotal) const detail = document.querySelector('.payment-method-list__item__amount');
detail.textContent = ` - ¥${newTotal}`
}if(IsCOD) {
updatePrice()
}
})
</script>