So implementieren Sie ein benutzerdefiniertes Hinzufügen zum Warenkorb zum Dawn -Thema von Shopify? ⇐ JavaScript

[Anonymous]

Ich habe versucht, eine benutzerdefinierte Taste zum Karren für das Dawn -Thema (unter Verwendung von AJAX -Funktionalität) basierend auf den Dev -Notizen für CART -API (https://shopify.dev/docs/api/ajax/Reference/Cart).
Ich habe die Seite mit dem AUFFORTE -AUFFORT auf die AUFFORTE -AUSCORS. Nach diesem Punkt konnte ich keine Lösung finden, um die Seite zu eliminieren.

Code: Select all

Add to Cart
⏳



.custom-buy-button {
width: 100%;
border: 1px solid #1f1d24;
background: white;
color: #1f1d24;
cursor: pointer;
position: relative;
}
.custom-buy-button.unavailable {
pointer-events: none;
border: 1px solid gray;
color: gray;
}
.loading-spinner {
display: inline-block;
margin-left: 10px;
}
.hidden {
display: none;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
display: none;
}
.cart-success-message {
color: green;
font-size: 14px;
margin-top: 5px;
display: none;
}



document.addEventListener("DOMContentLoaded", function () {
let buyButton = document.querySelector('.custom-buy-button');
let loadingSpinner = buyButton.querySelector('.loading-spinner');
let cartDrawer = document.querySelector('cart-drawer') || document.querySelector('.cart-notification');

if (!buyButton) {
console.error("Buy button not found");
return;
}

buyButton.addEventListener("click", function () {
function updateCartDrawer() {
fetch(`${window.Shopify.routes.root}?sections=cart-drawer`)
.then(response => response.json())
.then(data => {
console.log("Update Cart Drawer");
})
.catch(error => {
console.error('Error updating cart drawer:', error);
});
}
});
});