Race condition when animating Ajax Cart after item added

[james0r]

I'm trying to animate my ajax cart into view using Alpine.js after item has been added via the product add form.

I'm suspecting that the ajax cart is being updated by LAC after the response is received and that's what is interfering with the animation and instead just showing the ajax cart without animating in.

here's my liquid-ajax-cart logic:

<script type="application/json" data-ajax-cart-initial-state>
  {{ cart | json }}
</script>

<script type="module">
  import { subscribeToCartAjaxRequests } from '{{ 'liquid-ajax-cart-v1.1.0.static.js' | asset_url }}';

  subscribeToCartAjaxRequests((requestState, subscribeToResult) => {

    if (requestState.requestType === 'add') {
      console.log('Item add request sent')

      subscribeToResult(requestState => {
        if (requestState.responseData?.ok) {

           window.Alpine.store('globals').minicartIsShowing = true
        }
      })
    }
    }
  });
</script>

If I wrap my ajax cart visibility state change in a setTimeout I get the desired animation. Is there a way I can listen for when the cart has been updated so i know when to begin animation?

My minicart section --> https://gist.github.com/james0r/cf256bf980b121466e7ce5d9b9e4905d

[james0r]

Edit: Solved
There were a couple issues at play here, one being that i was losing applied classes to the cart that was being swapped out by liquid ajax cart. The solution to this was to move my root level Alpine.js revealed ajax cart to a wrapper wrapping the root of LAC.

Then I faced the issue with LAC wanting to be the root element of the section so I ended up moving my Alpine.js ajax cart root into theme.liquid and wrapping my {% section 'minicart' %} in the Alpine.js ajax cart root.

Looks like this:

  <div 
      class="minicart-wrapper"
      x-data 
      x-show="$store.globals.minicartIsShowing" 
      x-on:click.outside="$store.globals.minicartIsShowing = false"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="off-screen-right"
      x-transition:enter-end="right-50"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="right-50"
      x-transition:leave-end="off-screen-right"
      x-cloak 
      :aria-hidden="$store.globals.minicartIsShowing ? 'false' : 'true'"
      aria-modal="true"
      role="dialog" 
      >
        {% section 'minicart' %}
    </div>

Now when I set my Alpine.js minicart visibility flag to true from subscribeToResult() callback, I keep my transitions and the cart updates properly.

[james0r]

oh i see what you mean, that's desirable isn't it?

[EvgeniyMukhamedjanov]

I did it intentionally because I didn't want to spend time to some edge cases that might happen. I don't think it brings any inconveniences since Shopify responds fast enough. Maybe in the future will think about it, but it is not critical for now.

[EvgeniyMukhamedjanov]

That is why in the docs I recommended to use the .js-ajax-cart-request-in-progress body class to make the ajax sections looks "disabled".

[EvgeniyMukhamedjanov]

Just for UX

[EvgeniyMukhamedjanov]

@james0r
Just a small update.
Now it is possible to apply the data-ajax-cart-section attribute not only to a root element.

{% comment %} sections/my-cart.liquid {% endcomment %}

<div class="my-cart">
  <div class="my-cart__wrapper" data-ajax-cart-section >
    <!-- cart content -->
  </div>
</div> 

{% schema %} { "name": "My Cart" } {% endschema %}

In the above example only the .my-cart__wrapper will be updated, so you can safely apply any animation to the .my-cart element.

It is available since the v1.5.0.