Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

card drawer show amount for free delivery

main
alexanderroese 2024-06-19 09:33:41 +02:00
parent e237669296
commit 46394005ed
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
snippets/cart-drawer.liquid
View File

@ -82,7 +82,7 @@
{% endif %}
<script>
console.log("cart24", {{ cart | json }}, {{ remaining_amount }}, {{ free_shipping_threshold }}, {{ progress_percentage }}, {{ total_price }}, {{ free_shipping_threshold }}, {{ total_price | times: 100 | divided_by: free_shipping_threshold }})
console.log("cart25", {{ cart | json }}, {{ remaining_amount }}, {{ free_shipping_threshold }}, {{ progress_percentage }}, {{ total_price }}, {{ free_shipping_threshold }}, {{ total_price | times: 100 | divided_by: free_shipping_threshold }})
</script>
<div style="padding: 12px 12px 0 12px; background-color: #deecde; text-align: center;">
@ -94,16 +94,32 @@
{% endif %}
</span>
<progress class="shx-shipping-costs-progress" value="{{ progress_percentage }}" max="100"></progress>
<script>
document.addEventListener("DOMContentLoaded", function() {
const progressBar = document.querySelector(".shx-shipping-costs-progress");
setTimeout(() => {
progressBar.value = {{ progress_percentage }};
}, 100); // Kurzes Timeout, um sicherzustellen, dass die Animation abgespielt wird
const updateProgressBar = (percentage) => {
progressBar.value = 0;
setTimeout(() => {
progressBar.value = percentage;
}, 100);
};
// Initial setting of the progress bar value
updateProgressBar({{ progress_percentage }});
// Listen for custom event to update progress bar
document.addEventListener("cart:updated", function(event) {
const newTotalPrice = event.detail.total_price;
const newFreeShippingThreshold = {{ free_shipping_threshold }};
let newProgressPercentage = (newTotalPrice * 100) / newFreeShippingThreshold;
if (newProgressPercentage > 100) newProgressPercentage = 100;
updateProgressBar(newProgressPercentage);
});
});
</script>
<progress class="shx-shipping-costs-progress" value="0" max="100"></progress>
</div>
{% endif %}