Giới hạn giá trị đơn hàng cho phương thức Thanh toán khi nhận hàng (COD)

Phương thức Thanh toán khi nhận hàng (COD) được sử dụng khi người bán hàng muốn thu tiền thanh toán tại thời điểm người mua nhận hàng. Tuy nhiên, sẽ có rủi ro khi khách mua hàng đặt các đơn có giá trị cao và tỉ lệ những đơn hàng này có thể bị trả lại sẽ cao hơn so với đơn hàng đã được thanh toán trước do người mua có ít cam kết trong việc mua hàng. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách giới hạn giá trị đơn hàng khi thanh toán COD để giảm thiểu rủi ro này.

Hướng dẫn

Tại trang quản trị ShopBase, đi tới Cửa hàng (Online store) > Cài đặt ưu tiên (Preferences).


Trong mục Scripts bổ sung (Additional script), dán đoạn script dưới đây vào ô trống trong tab Đầu (Head):

<script >
    	window.sbsdk.ready(function() {
    		window.sbsdk.page.onContextUpdate(function(context) {
    			if (context.type === 'checkout' || context.type === 'process_checkout') {
    				const maxItem = 3
    				const maxValue = 550
    
    				const type = 'semi'
    
    				var readyCheckInterval = setInterval(function() {
    					const btn = document.getElementsByClassName("step__continue-button")[0] || document.getElementsByClassName("step__complete-order")[0]
    
    					function addAlert() {
    					    console.log(btn)
    						btn.disabled = true
    						var text = ""
    						if (type === "value") {
    							text = `Your order reaches the maximum amount. It should be less than or equal to $${maxValue}. Please select another payment method or update your cart.`
    						}
    						if (type === "item") {
    							text = `Your order reaches the maximum quantity. It should be less than or equal to ${maxItem} items. Please select another payment method or update your cart.`
    						}
    						if (type === "semi") {
    							text = `Your order reaches the maximum quantity and/or amount. It should be less than or equal to ${maxItem} items and/or $${maxValue}. Please select another payment method or update your cart.`
    						}
    						document.getElementById('cod-cod-header').insertAdjacentHTML('afterend', `<div id="alert_cod" style="
                    /* padding-top: 10px; */
                    padding: 16px;
                    background: rgb(252,246,230);
                ">
                <div style="
                font-size: 12px;
                display: flex;
                width: 100%;
                justify-content: space-evenly;
                ">
                <img src="https://upload.wikimedia.org/wikipedia/commons/9/99/OOjs_UI_icon_alert-yellow.svg">
                <div style="
        padding-left: 20px;
    ">${text}</div>
        
                </div>
                </div>`)
    					}
    
    					function removeAlert() {
    						const alert = document.getElementById("alert_cod")
    						if (alert !== null) {
    							document.getElementById("alert_cod").remove()
    							btn.disabled = false
    						}
    
    					}
    
    					var a = document.getElementsByClassName("payment_method")
    					for (let i = 0; i < a.length; i++) {
    						if (a[i].id === "cod-cod-header") {
    							continue
    						}
    						a[i].addEventListener("click", removeAlert)
    					}
    
    					function validValue() {
    						const text = document.getElementsByClassName("payment-due__price")[0].innerHTML
    						let numb = text.match(/[0-9/(.)]/g);
    						numb = Number(numb.join(""));
    						return numb > maxValue
    					}
    
    					function validItem() {
    						let count = 0
    						const listItem = document.getElementsByClassName('checkout-product-thumbnail__quantity')
    						for (let item of listItem) {
    							count += parseInt(item.innerHTML)
    						}
    						return count > maxItem
    					}
    
    					function valid() {
    						if (type === "value") {
    							return validValue()
    						}
    						if (type === "item") {
    							return validItem()
    						}
    						if (type === "semi") {
    							return validValue() || validItem()
    						}
    
    					}
    					if (document.getElementById("cod-cod-header") !== null) {
    						document.getElementById("cod-cod-header").addEventListener("click", item => {
    							const alert = document.getElementById('alert_cod')
    							if (valid() && alert === null) {
    								addAlert()
    							}
    						})
    					}
    					setInterval(() => {
    					    if (document.getElementById("cod-cod-section")) {
        						if (!btn.disabled && document.getElementById("cod-cod-section").style.display === '' && document.getElementById("alert_cod") === null && valid()) {
        							addAlert()
        						}
        					}	
    					}, 500)
    
    				}, 500);
    			}
    		});
    	}); 
    	</script>

Bạn có thể tùy chỉnh số lượng mặt hàng và/hoặc các giá trị đơn hàng tối đa trong đoạn script:

Để giới hạn số lượng mặt hàng:

Đi tới dòng: const maxItem = 3.
Thay thế số 3 bằng số lượng mặt hàng tối đa mà bạn cho phép khách hàng đặt hàng.

Để giới hạn giá trị đơn hàng:

Đi tới dòng: const maxValue = 550.
Thay thế số 550 bằng giá trị đơn hàng tối đa mà bạn cho phép khách hàng đặt hàng.

Để xác định giá trị đơn hàng bạn muốn giới hạn:

Đi tới dòng: const type = 'semi'
Thay thế semi bằng giá trị sau: semi nếu bạn muốn giới hạn số lượng mặt hàng và giá trị đơn hàng; value nếu bạn muốn giới hạn số lượng mặt hàng; item nếu bạn muốn giới hạn giá trị đơn hàng.

Nhấp vào Lưu (Save) khi hoàn thành.

Logic sẽ được áp dụng ngay lập tức và bạn có thể xem trang thanh toán như ảnh bên dưới.


Logic này không áp dụng cho ưu đãi sau khi mua hàng vì khách hàng có thể thêm mặt hàng bổ sung sau khi mua hàng. Bạn có thể tắt ưu đãi sau khi mua hàng bằng cách làm theo các bước trong bài viết này.

Bài viết liên quan

Tổng quan về các phương thức thanh toán
Kết nối Thanh toán khi nhận hàng (COD) trên cửa hàng của bạn

Cập nhật vào: 29/12/2022