[DOCS] Possible race condition on clean Shopify Checkout initialization

[mnlmaier]

Hi @jackabox,

thanks for your nice work on the plugin. Using it regularly! :)

I noticed a possible race condition which I was consistently able to reproduce in one of my shops where I followed the Frontend JS Snippets included in the docs. It's easy to reproduce: Just delete the LocalStorage key and refresh the Shop Overview. It's not initializing, still, the checkoutId is correctly set in Local Storage.

After another refresh (ie after the CheckoutId has been stored in LS), the Shop starts working (as is expected).

The culprit seems to be this snippet in the frontend:

if (!shopifyCheckout) {
    client.checkout.create().then(checkout => {
      localStorage.setItem('statamic.shopify.cart.id', checkout.id)
      shopifyCheckout = checkout.id
    })
  }

I have re-written this to the following:

if (!shopifyCheckout) {
    const { id } = await client.checkout.create()
    localStorage.setItem('statamic.shopify.cart.id', id)
    shopifyCheckout = id
}

and obviously adjusted some imports. Now everything is working as expected. This is caused by the script not properly waiting for the checkout init, which is an asynchronous task.

Am I the only person with this issue? If somebody can reproduce, I will gladly clean this up and turn this into a PR for @jackabox to have a closer look at.

Have a nice rest of the weekend :)

[klickreflex]

I've had the issue of the cart not being emptied after successful checkout, and I think there was a JS error thrown mentioning something about shopifyCheckout. Could this be related?

[jackabox]

@mnlmaier Thanks for this, feel free to open a PR and I'll get it merged in at the next changes 👍🏻

[klickreflex]

PS: I coud reproduce this now, PR would be appreciated.

[jackabox]

Added this into the core. If you've published the JS to make changes, you may need to adjust your JS (checkout.js) as needed.

[mnlmaier]

awesome! thanks a lot :)