document.querySelectorAll('.cart-item-remove').forEach(button => {
button.addEventListener('click', function() {
const lineItemId = this.getAttribute('data-line-item-id');
// Disable the button to prevent multiple clicks
this.disabled = true;
this.textContent = 'Removing...';
fetch('/cart/change.js',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: lineItemId, quantity: 0 })
)
.then(response => {
if (!response.ok) {
throw new Error('Failed to remove item');
}
return response.json();
})
.then(() => {
location.reload(); // Reload the page to update the cart
})
.catch(error => {
console.error('Error:', error);
this.disabled = false; // Re-enable the button if there's an error
this.textContent = 'Remove'; // Reset the button text
alert('Failed to remove item. Please try again.');
});
});
});
// Ensure CartItems is defined before extending it
if (typeof window.CartItems === 'undefined') {
class CartItems {
constructor() {
this.items = [];
}
}
window.CartItems = CartItems; // Make it global
}
javascript
const removeButtons = document.querySelectorAll('.cart-item-remove');
if (removeButtons.length > 0) {
removeButtons.forEach(button => {
button.addEventListener('click', function() {
// Your existing code here
});
});
}
// Define CartDrawerItems after CartItems is guaranteed to exist
class CartDrawerItems extends window.CartItems {
constructor() {
super(); // Call the parent class constructor
console.log("CartDrawerItems opprettet!");
}
}
// Define CartDrawer
class CartDrawer extends HTMLElement {
constructor() {
super(); // Call the parent class constructor
this.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
const overlay = this.querySelector('#CartDrawer-Overlay');
if (overlay) overlay.addEventListener('click', this.close.bind(this));
this.setHeaderCartIconAccessibility();
}
setHeaderCartIconAccessibility() {
const cartLink = document.querySelector('#cart-icon-bubble');
if (!cartLink) return;
cartLink.setAttribute('role', 'button');
cartLink.setAttribute('aria-haspopup', 'dialog');
cartLink.addEventListener('click', (event) => {
event.preventDefault();
this.open(cartLink);
});
cartLink.addEventListener('keydown', (event) => {
if (event.code.toUpperCase() === 'SPACE') {
event.preventDefault();
this.open(cartLink);
}
});
}
open(triggeredBy) {
if (triggeredBy) this.setActiveElement(triggeredBy);
const cartDrawerNote = this.querySelector('[id^="Details-"] summary');
if (cartDrawerNote && !cartDrawerNote.hasAttribute('role')) {
this.setSummaryAccessibility(cartDrawerNote);
}
setTimeout(() => {
this.classList.add('animate', 'active');
});
this.addEventListener(
'transitionend',
() => {
const containerToTrapFocusOn = this.classList.contains('is-empty')
? this.querySelector('.drawer__inner-empty')
: document.getElementById('CartDrawer');
const focusElement = this.querySelector('.drawer__inner') || this.querySelector('.drawer__close');
trapFocus(containerToTrapFocusOn, focusElement);
},
{ once: true }
);
document.body.classList.add('overflow-hidden');
}
close() {
this.classList.remove('active');
if (this.activeElement) removeTrapFocus(this.activeElement);
document.body.classList.remove('overflow-hidden');
}
setSummaryAccessibility(cartDrawerNote) {
cartDrawerNote.setAttribute('role', 'button');
cartDrawerNote.setAttribute('aria-expanded', 'false');
if (cartDrawerNote.nextElementSibling?.getAttribute('id')) {
cartDrawerNote.setAttribute('aria-controls', cartDrawerNote.nextElementSibling.id);
}
cartDrawerNote.addEventListener('click', (event) => {
event.currentTarget.setAttribute(
'aria-expanded',
!event.currentTarget.closest('details').hasAttribute('open')
);
});
cartDrawerNote.parentElement.addEventListener('keyup', onKeyUpEscape);
}
renderContents(parsedState) {
const drawerInner = this.querySelector('.drawer__inner');
if (drawerInner?.classList.contains('is-empty')) {
drawerInner.classList.remove('is-empty');
}
this.productId = parsedState.id;
this.getSectionsToRender().forEach((section) => {
const sectionElement = section.selector
? document.querySelector(section.selector)
: document.getElementById(section.id);
if (sectionElement) {
sectionElement.innerHTML = this.getSectionInnerHTML(parsedState.sections[section.id], section.selector);
}
});
setTimeout(() => {
this.querySelector('#CartDrawer-Overlay')?.addEventListener('click', this.close.bind(this));
this.open();
});
}
getSectionInnerHTML(html, selector = '.shopify-section') {
return new DOMParser().parseFromString(html, 'text/html').querySelector(selector)?.innerHTML || '';
}
getSectionsToRender() {
return [
{
id: 'cart-drawer',
selector: '#CartDrawer',
},
{
id: 'cart-icon-bubble',
},
];
}
setActiveElement(element) {
this.activeElement = element;
}
}
customElements.define('cart-drawer', CartDrawer);
customElements.define('cart-drawer-items', CartDrawerItems);
Do you see where this goes badly?
