Progress bar two step free shipping/ free Product based on selected country Shopify
<!-- Free shipping progress markup -->
<div class="cart-shipping__wrapper cart-page__congrats-massage-box">
<div class="progress_area">
<div class="progressbar_start" style="width:"></div>
<div class="main-progress">
<div class="progressbar_step1">
<span class="free_shipping"
><span class="checked-icon" style="display:none;">{% render 'icon-checked' %}</span>Gratis Versand</span
>
</div>
<div class="progressbar_step2">
<span class="free_gift"
><span class="checked-icon" style="display:none;">{% render 'icon-checked' %}</span>Free Gift</span
>
</div>
</div>
</div>
<p class="cart-shipping__success" style="display:none;">
<b>Glückwunsch!</b> Dein Versand ist <span>kostenfrei!</span>
</p>
<p class="cart-gift__success" style="display:none;"><b>Glückwunsch!</b> Du erhältst ein <span>Free Gift!</span></p>
<p class="cart-shipping__numOuter">Noch <span class="cart-shipping__num"></span> bis zu Deinem Geschenk</p>
</div>
<style>
.progress_area {
background: #E0E0E0;
margin-top: 45px;
height: 10px;
border-radius: 3px;
}
.progressbar_start {
background: #000000;
z-index: 9999;
height: 10px;
display: block !important;
position: relative;
width: 0;
}
.main-progress {
display: flex;
position: relative;
}
.progressbar_step1:before, .progressbar_step2:before {
content: "";
border: 3px solid #000;
position: absolute;
right: -6px;
top: 0;
bottom: 0;
}
.progressbar_step1 {
width: 32.5%;
position: absolute;
top: -10px;
height: 10px;
}
.main-progress.special_country .progressbar_step1{
width: 49.17%;
}
span.free_shipping {
position: absolute;
top: -23px;
right: -52px;
display:flex;
color: #000;
font-family: "Avenir Next";
font-size: 14px;
font-style: normal;
font-weight: 400;
}
.progressbar_step2 {
width: 83.33%;
position: absolute;
top: -10px;
height: 10px;
}
span.free_gift{
position: absolute;
top: -23px;
right: -31px;
display:flex;
color: #000;
font-family: "Avenir Next";
font-size: 14px;
font-style: normal;
font-weight: 400;
}
span.checked-icon {
margin: auto 3px auto auto;
}
.progressbar_step1.custom-style:before, .progressbar_step2.custom-style:before{
border-color: #fff !important;
z-index: 99999;
}
.progressbar_start {
max-width: 100%;
}
p.cart-shipping__numOuter {
color: #000;
font-family: "Helvetica Neue";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin-top: 8px;
margin-bottom:0;
}
p.cart-shipping__success {
margin-top: 10px;
margin-bottom: 0;
color: #000;
font-family: "Helvetica Neue";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
.cart-gift__success {
margin-top: 4px;
margin-bottom: 0;
color: #000;
font-family: "Helvetica Neue";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
p.cart-shipping__success span, .cart-gift__success span {
color: #1ABA46;
font-weight: 700;
}
</style>
<!-- start Geo location -->
<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.Shopify && window.Shopify.country) {
let country = window.Shopify.country;
// alert(`Country: ${country}`);
if (country === "LU" || country === "AT" || country === "CH") {
setInterval(function() {
var special_country = document.querySelector('.main-progress');
if (special_country) {
special_country.classList.add('special_country');
}
// alert("hii");
// Fetch cart data from Shopify
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Shopify currency symbol placeholder - replace with actual symbol if needed
var shop_symbol = "{{ cart.currency.symbol }}";
// Calculate total price and progress percentage
var totalPrice = cart.total_price;
var progressPercentage = (totalPrice / 12000) * 100;
// Update progress bar width
var progressBar = document.querySelector(".progressbar_start");
if (progressBar) {
progressBar.style.width = progressPercentage + "%";
}
// Show or hide free shipping message
var shippingSuccessElement = document.querySelector('.cart-shipping__success');
var progressBarStep1 = document.querySelector('.progressbar_step1');
var freeshippingchecked = document.querySelector('.free_shipping .checked-icon');
if (cart.total_price >= 5900) {
if (shippingSuccessElement) {
shippingSuccessElement.style.display = 'block';
}
if (freeshippingchecked) {
freeshippingchecked.style.display = 'block';
}
if (progressBarStep1) {
progressBarStep1.classList.add('custom-style');
}
} else {
if (shippingSuccessElement) {
shippingSuccessElement.style.display = 'none';
}
if (freeshippingchecked) {
freeshippingchecked.style.display = 'none';
}
if (progressBarStep1) {
progressBarStep1.classList.remove('custom-style');
}
}
// Show remaining amount message
var shop_symbol = "{{ cart.currency.symbol }}"; // Example, you can replace it with your actual shop symbol
var remainingamount = document.querySelector('.cart-shipping__numOuter');
if (cart.total_price >= 5900 && cart.total_price < 10000) {
var gift_price = 10000 - cart.total_price;
var gift_final_price = (gift_price / 100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace('.', ',');
console.log('Remaining amount for free Gift:', gift_final_price);
var output = shop_symbol + gift_final_price;
document.querySelector('.cart-shipping__num').textContent = output;
if (remainingamount) {
remainingamount.style.marginTop = '4px';
}
}else{
if (remainingamount) {
remainingamount.style.marginTop = '8px';
}
}
if (cart.total_price < 5900) {
var ship_price = 5900 - cart.total_price;
var ship_final_price = (ship_price / 100).toFixed(2);
console.log('Remaining amount for free shipping:', ship_final_price);
var output = shop_symbol + ship_final_price;
document.querySelector('.cart-shipping__num').textContent = output;
}
// Show or hide free gift message
var giftSuccessElement = document.querySelector('.cart-gift__success');
var progressBarStep2 = document.querySelector('.progressbar_step2');
var remainingAmount = document.querySelector('.cart-shipping__numOuter');
var freegiftchecked = document.querySelector('.free_gift .checked-icon');
if (cart.total_price >= 10000) {
if (giftSuccessElement) {
giftSuccessElement.style.display = 'block';
}
if (freegiftchecked) {
freegiftchecked.style.display = 'block';
}
if (progressBarStep2) {
progressBarStep2.classList.add('custom-style');
}
if (remainingAmount) {
remainingAmount.style.display = 'none';
}
} else {
if (giftSuccessElement) {
giftSuccessElement.style.display = 'none';
}
if (freegiftchecked) {
freegiftchecked.style.display = 'none';
}
if (progressBarStep2) {
progressBarStep2.classList.remove('custom-style');
}
if (remainingAmount) {
remainingAmount.style.display = 'block';
}
}
})
.catch(error => console.error('Error fetching cart data:', error));
}, 100);
} else {
setInterval(function() {
// Fetch cart data from Shopify
fetch('/cart.js')
.then(response => response.json())
.then(cart => {
// Shopify currency symbol placeholder - replace with actual symbol if needed
var shop_symbol = "{{ cart.currency.symbol }}";
// Calculate total price and progress percentage
var totalPrice = cart.total_price;
var progressPercentage = (totalPrice / 12000) * 100;
// Update progress bar width
var progressBar = document.querySelector(".progressbar_start");
if (progressBar) {
progressBar.style.width = progressPercentage + "%";
}
// Show or hide free shipping message
var shippingSuccessElement = document.querySelector('.cart-shipping__success');
var progressBarStep1 = document.querySelector('.progressbar_step1');
var freeshippingchecked = document.querySelector('.free_shipping .checked-icon');
if (cart.total_price >= 3900) {
if (shippingSuccessElement) {
shippingSuccessElement.style.display = 'block';
}
if (freeshippingchecked) {
freeshippingchecked.style.display = 'block';
}
if (progressBarStep1) {
progressBarStep1.classList.add('custom-style');
}
} else {
if (shippingSuccessElement) {
shippingSuccessElement.style.display = 'none';
}
if (freeshippingchecked) {
freeshippingchecked.style.display = 'none';
}
if (progressBarStep1) {
progressBarStep1.classList.remove('custom-style');
}
}
// Show remaining amount message
var shop_symbol = "{{ cart.currency.symbol }}"; // Example, you can replace it with your actual shop symbol
var remainingamount = document.querySelector('.cart-shipping__numOuter');
if (cart.total_price >= 3900 && cart.total_price < 10000) {
var gift_price = 10000 - cart.total_price;
var gift_final_price = (gift_price / 100).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace('.', ',');
console.log('Remaining amount for free Gift:', gift_final_price);
var output = shop_symbol + gift_final_price;
document.querySelector('.cart-shipping__num').textContent = output;
if (remainingamount) {
remainingAmount.style.marginTop = '4px';
}
}else{
if (remainingamount) {
remainingAmount.style.marginTop = '8px';
}
}
if (cart.total_price < 3900) {
var ship_price = 3900 - cart.total_price;
var ship_final_price = (ship_price / 100).toFixed(2);
console.log('Remaining amount for free shipping:', ship_final_price);
var output = shop_symbol + ship_final_price;
document.querySelector('.cart-shipping__num').textContent = output;
}
// Show or hide free gift message
var giftSuccessElement = document.querySelector('.cart-gift__success');
var remainingAmount = document.querySelector('.cart-shipping__numOuter');
var freegiftchecked = document.querySelector('.free_gift .checked-icon');
var progressBarStep2 = document.querySelector('.progressbar_step2');
if (cart.total_price >= 10000) {
if (giftSuccessElement) {
giftSuccessElement.style.display = 'block';
}
if (freegiftchecked) {
freegiftchecked.style.display = 'block';
}
if (progressBarStep2) {
progressBarStep2.classList.add('custom-style');
}
if (remainingAmount) {
remainingAmount.style.display = 'none';
}
} else {
if (giftSuccessElement) {
giftSuccessElement.style.display = 'none';
}
if (freegiftchecked) {
freegiftchecked.style.display = 'none';
}
if (progressBarStep2) {
progressBarStep2.classList.add('custom-style');
}
}
})
.catch(error => console.error('Error fetching cart data:', error));
}, 100);
}
} else {
console.error("Shopify country information is not available.");
}
});
</script>
Post a Comment!