Как реализовать настраиваемую кнопку «Добавить в корзину» на тему Dawn's Shopify? ⇐ Javascript

[Anonymous]

Я попытался создать пользовательскую кнопку «Добавить в корзину» для темы Dawn (использование функциональности AJAX) на основе Dev Notes для Cart API (https://shopify.dev/docs/api/ajax/reference/cart).
Я был в состоянии применять JS, который обновляет нарисован только на рисунке. После этого момента я не смог найти решение, чтобы устранить необходимость обновления страницы.
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);
});
}
});
});



Подробнее здесь: https://stackoverflow.com/questions/795 ... dawn-theme