Best implementation for the /cart page?

[edoardolunardi]

What is the recommended way of combining the ajax cart with the /cart page? The demo shows a "update cart" button at the bottom of the page https://liquid-ajax-cart.myshopify.com/cart.
However, I think this can just confuse the user.

Is it possible to have multiple data-ajax-cart-section in the same page? This way the drawer cart and the one in the page can stay in synch. I tried with no luck, the lib correctly updates only the first data-ajax-cart-section found in the page, if there are others, they get removed from the dom.

[EvgeniyMukhamedjanov]

Hi @edoardolunardi ,
Usually we don't add the Update Cart button on the cart page on the modern websites.
Example: nakedcashmere.com.
But if you theme has the "Update Cart" button, then I would suggest hiding it when the html tag has the js-ajax-cart-init class. (If there is no such class, it means Liquid Ajax Cart isn't loaded because JavaScript is turned off, so the Update Cart button might be useful for such users).

Liquid Ajax Cart supports multiple data-ajax-cart-section on the same page.
You can check the https://liquid-ajax-cart.myshopify.com/cart page -- it has ajax-drawer + ajax page synced using those attributes.

If something is removed from DOM after the request, it means that the response of the request doesn't return the same amount of data-ajax-cart-section elements. Might it be due to the gift app you use?

[edoardolunardi]

The demo page actually has only 1 data-ajax-cart-section in the same page, so here's what I think it's happening (the demo it's a little confusing)
According to the docs, the html for the cart can only update if data-ajax-cart-section is present, so the quantity buttons in the cart page are not updated with the response, but it's just the browser doing I guess. That's why clicking delete causes a full page reload, as this would be the edge case. If you try to add some cart notes in the drawer, you will see that they are not shown in the cart page until you reload the page.

I disabled the gift app temporarily.
So, do you confirm I can have multiple data-ajax-cart-section in the same page, given the demo only has 1? Thank you!

[EvgeniyMukhamedjanov]

Yeah, I confirm you can have multiple of them on the same page:
https://liquid-ajax-cart.js.org/v2/data-ajax-cart-section/#multiple-containers-to-re-render

But they work only when they are part of a shopify section.

[edoardolunardi]

Thanks, I will try. Btw, do all the data-ajax-cart-section need to be inside the same Shopify section?

[EvgeniyMukhamedjanov]

No.
But each section must always return the same amount of data-ajax-cart-section elements.
For example if cart drawer section has only one element, it should always return this one element. The same for the page section. Otherwise Liquid Ajax Cart will will not know what to do when a section returns different amount of elements.

[edoardolunardi]

Works great! Thank you!