So a couple of months ago I used some code to make a cart drawer. This worked completely fine, I even implemented the cart progress bar from The Prompted and it was working flawless. Eventually I decided to remove the progress bar and keep the cart drawer pretty easy. For some reason it is not working anymore. I checked the entire code but I can’t find the mistake or even remove the cart drawer entirely. Is there someone who can help me with this? The remove, add and the changing of the total amount in the cart drawer don’t work at all. (which it did like 4 days ago). The link to my website is www.avenora-jewellery.com
Hello @isabelbrnzls
i have checked and it’s working fine.
Yes is saw the error, but i can’t seem to find it in my code tho.
The only thing I can find that is remotely close is this at the bottom of my cart-drawer.js file
customElements.define(‘cart-drawer-items’, CartDrawerItems);
Can you by any chance see the extra } where it is located?
That’s weird mine is not working at all not even on other devices or incognito
Hello @isabelbrnzls
Can you send me the video ?
I approved sorry forgot to change it to an open video 
Hello @isabelbrnzls
Please share the store access so I can check and update you. Also, kindly share your WhatsApp number.
Could you please share with me the access so I can see the video too and check it for you?
Best,
Daisy
Hi Daisy,
I gave you acces!
Hello there,
You can try this code.
// Base CartItems class definition (if it's not already defined)
class CartItems {
constructor() {
// You can add properties or methods here that CartDrawerItems will inherit
this.items = [];
}
addItem(item) {
this.items.push(item);
}
removeItem(itemId) {
this.items = this.items.filter(item => item.id !== itemId);
}
getItems() {
return this.items;
}
}
// CartDrawer class definition
class CartDrawer extends HTMLElement {
constructor() {
super();
this.addEventListener('keyup', (evt) => evt.code === 'Escape' && this.close());
this.querySelector('#CartDrawer-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');
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) {
this.querySelector('.drawer__inner').classList.contains('is-empty') &&
this.querySelector('.drawer__inner').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) return;
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',
},
];
}
getSectionDOM(html, selector = '.shopify-section') {
return new DOMParser().parseFromString(html, 'text/html').querySelector(selector);
}
setActiveElement(element) {
this.activeElement = element;
}
}
// Register CartDrawer as a custom element
customElements.define('cart-drawer', CartDrawer);
// CartDrawerItems extends CartItems to manage specific cart items
class CartDrawerItems extends CartItems {
constructor() {
super(); // Call the parent constructor to initialize inherited properties
}
getSectionsToRender() {
return [
{
id: 'CartDrawer',
section: 'cart-drawer',
selector: '.drawer__inner',
},
{
id: 'cart-icon-bubble',
section: 'cart-icon-bubble',
selector: '.shopify-section',
},
];
}
// You can add more methods specific to CartDrawerItems if necessary
}
// You may need to define trapFocus and removeTrapFocus functions if they aren't already defined
function trapFocus(container, element) {
// Implement focus trapping logic (if necessary for your application)
}
function removeTrapFocus(element) {
// Implement focus removal logic (if necessary for your application)
}
I added this one in cart-drawer.js instead of my current code but it is still not working unfortunatly..