Hey !
how can i show the remaining amount before free delivery in the cart header product view after add to basket the product like this :
website: utopia-paris.fr
theme : Studio
To display the remaining amount needed for free delivery in the cart header after a product is added, you can use JavaScript to calculate and update the message dynamically. Here’s how:
1. Set the free shipping threshold in your code:
const freeShippingThreshold = 50; // Replace with your free delivery threshold.
2. Calculate the remaining amount:
function updateFreeShippingMessage(cartTotal) {
const remaining = freeShippingThreshold - cartTotal;
const message = remaining > 0
? Add $${remaining.toFixed(2)} more for free delivery!
: ‘You qualify for free delivery!’;
document.querySelector(‘#free-shipping-message’).innerText = message;
}
3. Update the cart header when products are added: Use Shopify’s AJAX cart API to retrieve the cart total and call the update function.
4. Example Integration:
fetch(‘/cart.js’)
.then(response => response.json())
.then(cart => {
updateFreeShippingMessage(cart.total_price / 100); // Convert cents to dollars.
});
5. Add the message container to your theme:
This will dynamically update the message in the cart header when products are added.
If you have other questions, I am willing to answer them more.
Best regards,
Daisy