Dynamic checkout button disappears after update (with data-ajax-cart-static-element applied)

[sofiaborovskaia]

Hey @EvgeniyMukhamedjanov!

First of all, thank you for the work you've done. I managed to make the 98% of my lateral cart in about 15% of the estimated time because of how easy and well-documented it is. I have, however, a few questions and I will address one of them here.

I have some dynamic checkout buttons. Their content and logic are loaded through a third party app. I copied this bit from the cart page without changing classes in order not to break any selectors. Re-rendering of these buttons on each cart update would usually take up a good few seconds and was visibly noticeable (and makes the whole experience less smooth), which is why I added the data-ajax-cart-static-element attribute to them.

When the section loads for the first time, everything is fine, we can see that the three buttons are appearing. With every new re-render of the cart one of the buttons (always the same one) for some reason disappears. All the requests related to PayPal or dynamic checkout are OK.

I'd like to understand why this could possibly be happening. Am I doing something wrong? Or is there something happening when the PayPal button interfieres with what Liquid ajax cart is trying to do. If you think it's not something I can possibly solve, I would be very grateful if somebody could give me some ideas how to work around it. Thank you!

You can find the url to the dev theme where I'm currently working on this feature here.

[EvgeniyMukhamedjanov]

Hey @sofiaborovskaia, I'm really happy that Liquid Ajax Cart could be helpful for you :-)
Regarding the PayPal button -- i've never tested how it works but I have a guess that Paypal button gets attached to the Checkout button on the initial loading, and when the Checkout button disappears and appears again during rerendering, the Paypal button loses the bound with it.
So my advice here is to try to move the Checkout button under the data-ajax-cart-static-element as well. Let me know if that works.

[sofiaborovskaia]

Thank you for your answer @EvgeniyMukhamedjanov!
I tried to wrap fast checkout buttons and the checkout button in a parent element with data-ajax-cart-static-element attribute, but unfortunately it didn't change much for me. What I could see is that PayPal is the only button that loads its content via iframe, something funky must be happening there. I will remove thedata-ajax-cart-static-element for now. If the client insists, I will come back to it later. And if I find a solution, I will update this discussion.

[EvgeniyMukhamedjanov]

@sofiaborovskaia
Yeah, let me know please, as I believe this is a case that should be investigated.

[EvgeniyMukhamedjanov]

@sofiaborovskaia I completely forgot, I had the similar issue with another app that used iframe. So I think what can help is removing the payment buttons row from the data-ajax-cart-section completely:

<div data-ajax-cart-section="top">
  <!-- top part -->
</div>
<div>
  <!-- payment buttons -->
</div>
<div data-ajax-cart-section="bottom">
  <!-- footer, checkout btn etc. -->
</div>

The issue is it is not possible to detach and attach iframe back (this is how static-element works) while re-rendering.

[sofiaborovskaia]

It took me a while to check this solution out, sorry about that! I have just tested it and it works perfectly. Amazing! Thank you very much! 😎