feat: usecartupdateattributes

app/data/graphql/storefront/cart.ts

@@ -467,3 +467,15 @@ export const CART_FRAGMENT = `#graphql
   ${OPTION_FRAGMENT}
   ${SELLING_PLAN_ALLOCATION_FRAGMENT}
 ` as const;
+
+export const CART_ATTRIBUTES_QUERY = `#graphql
+  query ProductPage($id: ID!) {
+    cart: cart(id: $id) {
+      id
+      attributes {
+        key
+        value
+      }
+    }
+  }
+` as const;

app/hooks/cart/index.ts

@@ -1 +1,2 @@
 export {useCartAddDiscountUrl} from './useCartAddDiscountUrl';
+export {useCartUpdateAttributes} from './useCartUpdateAttributes';

app/hooks/cart/useCartUpdateAttributes.ts

@@ -0,0 +1,38 @@
+import {useCallback} from 'react';
+import {useCart} from '@shopify/hydrogen-react';
+import type {
+  AttributeInput,
+  Cart,
+} from '@shopify/hydrogen/storefront-api-types';
+
+/* Hook that updates shopify cart attributes using the Storefront API query
+   This hook ensures adding existing attributes added by 3rd party scripts
+
+   Note: A common mistake of updating cart attributes with Shopify's
+   cartAttributesUpdate mutation is that existing attributes need to be included
+   when adding new attributes. Sometimes 3rd party scripts don't include this.
+*/
+
+export function useCartUpdateAttributes() {
+  const {cartAttributesUpdate, id} = useCart();
+
+  const updateCartAttributes = useCallback(
+    async (attributes: {key: string; value: string}[]) => {
+      const response = await fetch(`/api/cart-attributes?id=${id}`, {
+        method: 'GET',
+      });
+
+      const {cart}: {cart: Cart} = await response.json();
+
+      const existingAttributes = cart?.attributes || [];
+
+      cartAttributesUpdate([
+        ...existingAttributes,
+        ...attributes,
+      ] as AttributeInput[]);
+    },
+    [id],
+  );
+
+  return {updateCartAttributes};
+}

app/routes/($locale).api.cart-attributes.tsx

@@ -0,0 +1,22 @@
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+import {CART_ATTRIBUTES_QUERY} from '~/data/graphql/storefront/cart';
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+  const {storefront} = context;
+  const url = new URL(request.url);
+
+  const searchParams = new URLSearchParams(url.search);
+  const id = String(searchParams.get('id') || '');
+
+  const cart = await storefront.query(CART_ATTRIBUTES_QUERY, {
+    variables: {
+      id,
+      country: storefront.i18n.country,
+      language: storefront.i18n.language,
+    },
+    cache: storefront.CacheShort(),
+  });
+
+  return cart;
+}