NO BUG: {woo_cart_items_count} updates only upon page reload

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hello,

I tried to build an offcanvas cart, but the cart count doesn’t update live; the page has to be reloaded. Am I overlooking something?

Hi @Victor1999 ,

You should wrap the element inside the new Dynamic fragment element.

Please check this out Create a custom mini cart with Dynamic fragment | Bricks Academy

Please let me know if it’s still not working.

Regards,
Jenn

Hi @itchycode,

Yes, you’re right; thanks for the explanation. Just two technical questions that I think might come up for many people.

1- Based on the screenshot in the article you shared, Suppose we have two cart icons. one in the header and another in the mobile menu. What would the structure look like in this case? Each cart icon would certainly need to be inside a fragment, but what about the offcanvas element? Should we have a single offcanvas outside of these two fragments and use the fragment within its content? In fact, three fragment elements are used.

What is the best solution in this situation?

2- Are there any limitations on using the fragment element? Does using it multiple times affect performance?

Best regards

@Victor1999

I’d recommend using 3 Dynamic fragments in this case (assuming both cart icons display cart-related data like the item count). Both cart icons/toggles can point to the same Cart Offcanvas.

There’s no fixed limit on the number of Dynamic fragments. In Bricks 2.4, all top-level mounted fragments are refreshed in a single debounced AJAX request, not one request per fragment. So having three small fragments like this is perfectly fine.

A few recommendations:

  • Keep each Dynamic fragment as small as possible.
  • Avoid wrapping the entire header or Offcanvas if only a small part is dynamic.
  • Don’t nest Dynamic fragments.
  • Dynamic fragments inside query loops or Component instances are currently not supported.

Regards,
Jenn

1 Like