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 10:02:25 +02:00
parent 04f465a6ec
commit 5dfe99775b
3 changed files with 1 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/cart.js
View File

@ -48,7 +48,6 @@ class CartItems extends HTMLElement {
} }
onChange(event) { onChange(event) {
console.log("chart on change", event);
this.updateQuantity( this.updateQuantity(
event.target.dataset.index, event.target.dataset.index,
event.target.value, event.target.value,
@ -58,8 +57,6 @@ class CartItems extends HTMLElement {
} }
onCartUpdate() { onCartUpdate() {
console.log("onCartUpdate");
if (this.tagName === "CART-DRAWER-ITEMS") { if (this.tagName === "CART-DRAWER-ITEMS") {
fetch(`${routes.cart_url}?section_id=cart-drawer`) fetch(`${routes.cart_url}?section_id=cart-drawer`)
.then((response) => response.text()) .then((response) => response.text())

8
assets/component-cart-drawer.css
View File

@ -452,17 +452,9 @@ cart-drawer-items::-webkit-scrollbar-track-piece {
.shx-shipping-costs-progress::-webkit-progress-value { .shx-shipping-costs-progress::-webkit-progress-value {
background: green; background: green;
border-radius: 23px; border-radius: 23px;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
} }
.shx-shipping-costs-progress::-moz-progress-bar { .shx-shipping-costs-progress::-moz-progress-bar {
background: green; background: green;
border-radius: 23px; border-radius: 23px;
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
} }

97
snippets/cart-drawer.liquid
View File

@ -82,7 +82,7 @@
{% endif %} {% endif %}
<script> <script>
console.log("cart32", {{ 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("cart33", {{ cart | json }}, {{ remaining_amount }}, {{ free_shipping_threshold }}, {{ progress_percentage }}, {{ total_price }}, {{ free_shipping_threshold }}, {{ total_price | times: 100 | divided_by: free_shipping_threshold }})
</script> </script>
<div style="padding: 12px 12px 0 12px; background-color: #deecde; text-align: center;"> <div style="padding: 12px 12px 0 12px; background-color: #deecde; text-align: center;">
@ -94,102 +94,7 @@
{% endif %} {% endif %}
</span> </span>
<script>
/*
document.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded")
const progressBar = document.querySelector(".shx-shipping-costs-progress");
console.log("el progressBar", progressBar)
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) {
console.log("event cart:updated", event)
const newTotalPrice = event.detail.total_price;
const newFreeShippingThreshold = {{ free_shipping_threshold }};
let newProgressPercentage = (newTotalPrice * 100) / newFreeShippingThreshold;
if (newProgressPercentage > 100) newProgressPercentage = 100;
console.log("newProgressPercentage", newProgressPercentage)
updateProgressBar(newProgressPercentage);
});
}); */
</script>
<progress class="shx-shipping-costs-progress" value={{ progress_percentage }} max="100"></progress> <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");
const updateProgressBar = (percentage) => {
progressBar.value = 0;
setTimeout(() => {
progressBar.value = percentage;
}, 100);
};
console.log("DOMContentLoaded")
// 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);
});
});
// Beispielcode, der das benutzerdefinierte Event auslöst
function updateCart(cart) {
console.log("updateCart", cart)
// Beispiel für die Aktualisierung des Warenkorbs
// Diesen Teil sollten Sie an Ihre Logik zur Warenkorbaktualisierung anpassen
fetch('/cart/update.js', {
method: 'POST',
body: JSON.stringify(cart),
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(updatedCart => {
// Trigger custom event after cart is updated
const cartUpdatedEvent = new CustomEvent('cart:updated', {
detail: {
total_price: updatedCart.total_price
}
});
document.dispatchEvent(cartUpdatedEvent);
});
}
// Beispielaufruf der updateCart Funktion
// Passen Sie dies entsprechend Ihrer Warenkorblogik an
const exampleCart = {
// ... cart details here
total_price: {{ total_price }}
};
updateCart(exampleCart);
</script>
</div> </div>
{% endif %} {% endif %}