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)
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
