addSectionsToRender

Deprecated

Use this only when Growave cannot recognize your theme's cart markup. If Cart Actions refresh the cart correctly on your theme, do not call this method — the theme renders its own cart, and the sections you register here would be rendered a second time.

After a cart mutation Growave re-renders the cart surfaces on the page through Shopify's Section Rendering API. It recognizes Dawn-style markup out of the box: the cart drawer, the cart icon bubble, and the cart page's items and footer. Themes that build their cart differently keep showing a stale cart until the page reloads — addSectionsToRender tells Growave where their cart lives.

Pass a CSS selector for each element that hosts a cart section. Prefer a selector that survives a theme update over a literal section id, whose generated number changes when the theme is updated or duplicated.

window.gw.sdk.cart.methods.addSectionsToRender(["header.shopify-section"]);

It won't help when the cart lives in a custom element such as <cart-icon> — the element repaints itself over anything written into it. Those themes already update from the cart:update event Growave dispatches after every mutation.

Example

Register the sections once, as early as possible — they apply to every cart mutation that happens afterwards.

function onSdkReady() {
    const moduleName = window.gw.sdk.common.constants.modules.CART;

    window.gw.sdk.runIfModuleReady(moduleName, () => {
        window.gw.sdk.cart.methods.addSectionsToRender([
            // this theme renders its cart counter inside the header section
            "header.shopify-section",
        ]);
    });
}

if (window.gw && window.gw.sdk) {
    onSdkReady();
} else {
    document.addEventListener("gwSdkReady", onSdkReady);
}