Liquid Ajax Cart: the HTML for the "sections_url" section was requested but the response is null

[edoardolunardi]

Hey, I'm having a couple of issues with the cart.
When I add a product to the cart, I get this error in console:

Liquid Ajax Cart: the HTML for the "sections_url" section was requested but the response is null

However, I'm able to add the product and open the cart.
The issue is that let's say I add 5 products, the quantity input shows a wrong value, but the input value in the dom is correct (on page reload, everything looks okay).

Same error I get when I try to update the line item quantity from the cart.

Another I error I get when I add a product with a selling plan to the cart is:

Liquid Ajax Cart: line item with line="1" not found

Same as above, the item is added to the cart, but the selling plan is empty. It works upon page reload.
I can't quite figure out what's wrong, any help is appreciated! Thank you.

[EvgeniyMukhamedjanov]

@edoardolunardi
Obviously you don't have a section with the "sections_url" name on your website. So we need to understand why Liquid Ajax Cart tries to request the "sections_url" section.
Liquid Ajax Cart gets the sections names from the DOM by looking within parents of data-ajax-cart-section elements in order to find a parent with the id that starts with "shopify-section-". Everything that goes after "shopify-section-" will be the name of the shopify section.
Can you check if you have elements in your DOM with the "shopify-section-section_url" id?
Also can you take a screenshot of the DOM with all the parents of the "data-ajax-cart-section" element? Something like this:

I need to see the cart's "data-ajax-cart-section" element and its parent with id="shopify-section-..."

[edoardolunardi]

Hey @EvgeniyMukhamedjanov, thanks for looking into this.
There's no element in the dom containing section_url or sections_url as id or class.
Here's a screenshot with the parents of the data-ajax-cart-section

[edoardolunardi]

Hey @EvgeniyMukhamedjanov, sorry to bug you, did you have another change to take a look? 🙏

[EvgeniyMukhamedjanov]

Hi @edoardolunardi.
Yeah, I was trying to replicate the issues with no success.
I remember you mentioned the project is under NDA but maybe you have a chance to replicate this issue on a test store without disclosure any clients information?
Or maybe you could provide the steps to replicate the issue?
It is important to find this bug for me as well, as we use the lib on a lot of prod stores :-)

[edoardolunardi]

Hey @EvgeniyMukhamedjanov, after banging my head on this for hours and hours, I finally realized the culprit is an app, in my case this one https://apps.shopify.com/freegifts. This app is adding some products to the cart automatically, and somehow it messes up the ajax cart. Still not sure how I'm gonna approach this with the client, in the meantime, does it ring any bell? Thank you!

[EvgeniyMukhamedjanov]

@edoardolunardi
I think in this case it is easier either to get back to the Dawn ajax cart implementation and continue using this app
or build the BOGO promo by yourself if the app isn't a request from the client.

Basically Liquid Ajax Cart has methods to build any kind of automatic adding/removing items to/from the cart. You just need to add some fields for the client where they will be able to chose which product is a gift. Also the discount set up will be on you as well.

If you decide to use Liquid Ajax Cart API to automatically add/remove items then check this doc:
https://liquid-ajax-cart.js.org/v2/cart-mutations/

[edoardolunardi]

Thanks @EvgeniyMukhamedjanov! Out of curiosity, do you have any idea why that app might cause issues with the ajax cart? The client is gonna have one app doing cart upselling as well as showing bundles in the cart when a specific product is added, is there a change this app will also mess it up?

[EvgeniyMukhamedjanov]

@edoardolunardi
Most likely this app intercepts all the ajax requests and change them somehow. And it is understandable, as they need to understand somehow all the cart changes made by a user. I checked it on their demo site, and I see that a simple ajax add to cart goes through this app:

Most likely you'll see a trace of this app within each cart ajax request as well on your website.

Unfortunately I don't see any dev doc that explains how to change the app behavior.

Actually why did you decide using Liquid Ajax Cart on your project? Do you have a lot of cart customization?

[edoardolunardi]

Yeah that makes sense.
Actually yes, the cart is gonna have quite some customization, specifically, upselling based on products in the cart. For example, if there's a product with selling plans, and the user added just the one time purchase, the upsell will tell that a subscription is better. Or another use case, if the user has specific products in the cart, the upsell will tell that adding another one will make you save money etc.. so yes, a lot of customization I would say. Since I'm developing a theme, this logic should be offloaded to the backend.

So at this point it sounds like the ajax cart is not really suitable for these cases correct? (assuming the theme offloads all the cart logic to the backend through apps).

[EvgeniyMukhamedjanov]

@edoardolunardi
Actually the Liquid Ajax Cart might be not suitable only because the apps, that you use, have frontend customizations. If the customizations were backend only, then it wouldn't be an issue.

But now I see that the gift app modifies the behavior of frontend requests and if you must use the apps, then you have no choice I guess.

[edoardolunardi]

@EvgeniyMukhamedjanov thanks, then I guess I have no choice but remove the liquid-ajax-cart :/
I plan to build my own ajax cart https://shopify.dev/docs/api/ajax/reference/cart, but I wonder: isn't this what liquid-ajax-cart is doing under the hood? Do you think I might run into the same issues then?

[EvgeniyMukhamedjanov]

@edoardolunardi
Yes, Liquid Ajax Cart is just a wrapper for the Shopify Cart API your mentioned.

But in addition to that it automatically scans all the sections on the page that should be updated after each request (data-ajax-cart-section) and modifies the request to also ask Shopify to return updated HTML for those sections using this API:
https://shopify.dev/docs/api/ajax/reference/cart#bundled-section-rendering (If you are going to build your own ajax-cart, you'll need this as well)

Also Liquid Ajax Cart provides ready components for product add-to-cart form, qty controls etc.

So for me it is difficult to say at what point the gift app conflicts with the Liquid Ajax Cart logic and I can't guarantee that you won't face the same issue unfortunately.

Do you have any website with the gift app install and liquid ajax cart installed? Maybe a dev website that you can share? I would be able at least find the reason.

Also did you try contacting the app developers? Sometimes they might check why the issue happening and suggest a fix or fix it by themselves?

[edoardolunardi]

@EvgeniyMukhamedjanov thanks for the support.
I will proceed this way:

1. run a dev store with the dawn theme, install that culprit app, and see if it works with the default cart drawer
2. if no, then it's definitely an issue with the app
3. if yes, I will install my theme with the ajax cart on the dev store + the app so you can have a quick look

My goal would be to stick with the ajax cart since it abstracts logic away that otherwise I would need to implement manually, but I need to make sure it's not gonna break when the client adds apps that can modify whatever is in the cart.

I will keep you posted! Thank you.

[edoardolunardi]

Hey @EvgeniyMukhamedjanov, the free gifts app works with the default dawn theme ajax cart, this means something is off in the liquid-ajax-cart library. I coded my custom ajax cart in the end. This can be closed 👍. Thanks for the support!