Ensuring Cart Initialization Across All Pages

[bonamsrikanth1]

Hello Team, reaching out to discuss an issue we've encountered regarding cart initialization on our Hydrogen 2 website.

Current Challenge:

-We have observed that the cart ID is only created when a product is first added to the cart. This means the cart is not instantiated on page load if no products are added.

-We need the cart ID to be available on every page load, as we use it as a unique identifier to match client-side events with server-side purchase events received through Shopify webhooks.

Use Case: If a user clicks the "Buy Now" button and goes directly to checkout without adding anything to the cart, the cart ID is not available on page load. This leads to challenges in tracking and linking purchase events.

I've noticed the same on skeleton template:
https://github.com/Shopify/hydrogen/tree/main/templates/skeleton

Request for Assistance:

Could you provide guidance on how to ensure the cart is instantiated with an ID on every page load, regardless of whether a product is added to cart? Any insights into existing features or workarounds would be greatly appreciated.

Thank you for your support.

[juanpprieto]

Interesting one. This will have a negative effect on performance, because you would have to wait for a new cart to be created before rendering the page.

If you still want to explore this, you could change the root template logic to create a cart if one doesn't exist for a given visitor.

Pseudo-code:

• Check a cart.id exists in the session on the root loader

• If one doesn't exist create a new cart by making a mutation to cartCreate and saving the id on the session before returning it from the loader so that you can pass it to Analytics.

mutation cartCreate(input: {}) {
  cartCreate {
    cart {
      id
    }
  }
}