After theme customization, when I change items in my shopcart, the theme can’t auto update the cart bubble’s counter on header and the total price on cart page as well, then I go to check parsed JSON, seems cart-icon-bubble and cart-live-region-text in sections is null:
Weird. Autally, I always keep those id in the same sections:
main-card-items.liquid
...
...
header.liquid
...
{%- if cart != empty -%}
{%- if cart.item_count < 100 -%}
{{ cart.item_count }}
{%- endif -%}
{%- endif -%}
...
I just wonder how to fetch them successfully. And here is some additional informations:
-
Customized based on Dawn 12.0.0
-
Installed Apps (10):
-
Smart Product Filter & Search (embeded in theme)
-
Powerful Form Builder (embeded in theme)
-
Accounts Concierge
-
Frequently Bought (embeded in theme)
-
Pandectes GDPR Compliance (embeded in theme)
-
Vify Order Printer
-
Judge.me Reviews
-
Geolocation
-
Search & Discovery
-
Email
P.S: Each value is success fetched(bubble counter, total price, etc.) when page was just loaded. This issue only show up when change the quantity of products, and I never edited the cart.js before:
// Original cart.js in Dawn ver 12.0.0
// Start on line 81
...
getSectionsToRender() {
return [
{
id: 'main-cart-items',
section: document.getElementById('main-cart-items').dataset.id,
selector: '.js-contents',
},
{
id: 'cart-icon-bubble',
section: 'cart-icon-bubble',
selector: '.shopify-section',
},
{
id: 'cart-live-region-text',
section: 'cart-live-region-text',
selector: '.shopify-section',
},
{
id: 'main-cart-footer',
section: document.getElementById('main-cart-footer').dataset.id,
selector: '.js-contents',
},
];
}
updateQuantity(line, quantity, name, variantId) {
this.enableLoading(line);
const body = JSON.stringify({
line,
quantity,
sections: this.getSectionsToRender().map((section) => section.section),
sections_url: window.location.pathname,
});
fetch(`${routes.cart_change_url}`, { ...fetchConfig(), ...{ body } })
.then((response) => {
return response.text();
})
.then((state) => {
const parsedState = JSON.parse(state);
const quantityElement =
document.getElementById(`Quantity-${line}`) || document.getElementById(`Drawer-quantity-${line}`);
const items = document.querySelectorAll('.cart-item');
if (parsedState.errors) {
quantityElement.value = quantityElement.getAttribute('value');
this.updateLiveRegions(line, parsedState.errors);
return;
}
this.classList.toggle('is-empty', parsedState.item_count === 0);
const cartDrawerWrapper = document.querySelector('cart-drawer');
const cartFooter = document.getElementById('main-cart-footer');
if (cartFooter) cartFooter.classList.toggle('is-empty', parsedState.item_count === 0);
if (cartDrawerWrapper) cartDrawerWrapper.classList.toggle('is-empty', parsedState.item_count === 0);
this.getSectionsToRender().forEach((section) => {
const elementToReplace =
document.getElementById(section.id).querySelector(section.selector) || document.getElementById(section.id);
elementToReplace.innerHTML = this.getSectionInnerHTML(
parsedState.sections[section.section],
section.selector
);
});
const updatedValue = parsedState.items[line - 1] ? parsedState.items[line - 1].quantity : undefined;
let message = '';
if (items.length === parsedState.items.length && updatedValue !== parseInt(quantityElement.value)) {
if (typeof updatedValue === 'undefined') {
message = window.cartStrings.error;
} else {
message = window.cartStrings.quantityError.replace('[quantity]', updatedValue);
}
}
this.updateLiveRegions(line, message);
const lineItem =
document.getElementById(`CartItem-${line}`) || document.getElementById(`CartDrawer-Item-${line}`);
if (lineItem && lineItem.querySelector(`[name="${name}"]`)) {
cartDrawerWrapper
? trapFocus(cartDrawerWrapper, lineItem.querySelector(`[name="${name}"]`))
: lineItem.querySelector(`[name="${name}"]`).focus();
} else if (parsedState.item_count === 0 && cartDrawerWrapper) {
trapFocus(cartDrawerWrapper.querySelector('.drawer__inner-empty'), cartDrawerWrapper.querySelector('a'));
} else if (document.querySelector('.cart-item') && cartDrawerWrapper) {
trapFocus(cartDrawerWrapper, document.querySelector('.cart-item__name'));
}
publish(PUB_SUB_EVENTS.cartUpdate, { source: 'cart-items', cartData: parsedState, variantId: variantId });
})
.catch(() => {
this.querySelectorAll('.loading__spinner').forEach((overlay) => overlay.classList.add('hidden'));
document.getElementById('cart-errors').classList.remove('hidden');
const errors = document.getElementById('cart-errors').querySelector('.cart-item__error-text') || document.getElementById('CartDrawer-CartErrors');
errors.textContent = window.cartStrings.error;
})
.finally(() => {
this.disableLoading(line);
});
}
...
