Cart value update the header hide

Technical Q&A
, , , ,
1

Hi Team,

I’m using the Sense theme,
When the cart value is update from the cart page the header not showing,
please check let me know is the issue,

2

I check the cart page and see the issue. May I confirm are you using any app for the header or it’s the native theme Header?

3

Hi @Galico-Digital ,

Theme header

4

You have broken JS

This is the default theme code:

Line 187-188 – element to replace is retrieved first by parent id and then by section selector inside this parent, or, if that fails (it does) by id only.

Here is your theme code:

this.getSectionsToRender().forEach((section) => {
  const sectionHTML = parsedState.sections?.[section.section];
  if (!sectionHTML) return;

  const elementToReplace =
    document.querySelector(section.selector) || document.getElementById(section.id);
  if (!elementToReplace) return;

  elementToReplace.innerHTML = this.getSectionInnerHTML(sectionHTML, section.selector);
});

Element to replace is fetched by section.selector first which, for the cart bubble is .shopify-section and it fetches entire header section.

Hope this is enough for you to fix it given that you’ve made these changes – basically, you need to restore lines 187-188 to original code.

6

Sense theme uses the same code Dawn use, so no need to copy/paste this, especially when it breaks like it did.

I see that someone has made edits to the code cart.js-default-vs-modified
and made change to line 187-188 as I mentioned:
from

document.getElementById(section.id).querySelector(section.selector) ||
document.getElementById(section.id);

to

document.querySelector(section.selector) || 
document.getElementById(section.id);

I see that line 132 was changed.

But why these changes? I worked fine before…

7

Hi @tim_tairli ,

Thanks for help

       this.getSectionsToRender().forEach((section) => {
        const sectionHTML = parsedState.sections?.[section.section];
        if (!sectionHTML) return;

        const container = document.getElementById(section.id);
        if (!container) return;

        const elementToReplace =
          container.querySelector(section.selector) || container;

        elementToReplace.innerHTML = this.getSectionInnerHTML(
          sectionHTML,
          section.selector
        );
      });
8

Hi @tim_tairli ,

Please check issue when I click to “Quick Add” Button the header cart icon value not update in count

9

If the cart is empty, there is no cart bubble element.
Your custom JS code tries to update it, but can’t find and does nothing.