Indefinitely saved cart

As of Flight ^6.1 identified customers internal ID is replacing the GUID like cartID when the customer is logged in. This means that upon login, the previously anonymous cart will be merged with the identified customers cart.

When logged out, the cart ID is removed from local storage, meaning it cannot be edited as a anoymous user.

The same approach applies if a customer has items in the cart and decides to create an account. In that case, we do the same thing as during login.

Since this may be considered a breaking change when using add to cart outside of Flight, the feature is introduced behind a shop.config setting named useIndefinitelySavedCart, in most cases this is all you need to do. However, you should ensure that it works as expected, considering the project may be using any customized 'add to cart' operations. To verify this, as a logged-in customer, the cartId should be set as an integer and should never be removed until logging out.

The cart is saved indefinitely.

Copy
Copied
/** @type {import('@jetshop/core/components/ConfigProvider').BootOptions} */
const config = {
  // rest of config,
  useIndefinitelySavedCart: true,
};

If the project you're working on is using it's own addToCart operations, in say category pages,

Copy
Copied
const [addToCartMutation] = useMutation<
  { addToCart: CartMutation },
  MutationAddToCartArgs
>(cartMutation);

function addToCart() {
  addToCartMutation({
    variables: {
      input,
    },
  });
}

return <button onClick={addToCart}>Add</button>;

then your add function needs to update the cache aswell, like so:

Copy
Copied
addToCartMutation({
  variables: {
    input,
  },
  update: (cache, { data }) => {
    cache.modify({
      fields: {
        cart() {
          return data?.addToCart?.cart;
        },
      },
    });
  },
});

Hooks like useIncrementQuantity, useDecrementQuantity, useAddMultipleToCart or useRemoveFromCart or components like AddToCartFormik from Flight does this for you.

All according to Apollo Graphql documentation: https://www.apollographql.com/docs/react/data/mutations#the-update-function

Copyright © Norce 2023. All right reserved.