@shopify/hydrogen-react 2025.5.0 → 2025.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/dist/browser-dev/ShopifyProvider.mjs +18 -1
  2. package/dist/browser-dev/ShopifyProvider.mjs.map +1 -1
  3. package/dist/browser-dev/analytics.mjs +4 -5
  4. package/dist/browser-dev/analytics.mjs.map +1 -1
  5. package/dist/browser-dev/cart-hooks.mjs +25 -7
  6. package/dist/browser-dev/cart-hooks.mjs.map +1 -1
  7. package/dist/browser-dev/cookies-utils.mjs +4 -4
  8. package/dist/browser-dev/cookies-utils.mjs.map +1 -1
  9. package/dist/browser-dev/index.mjs +4 -0
  10. package/dist/browser-dev/index.mjs.map +1 -1
  11. package/dist/browser-dev/packages/hydrogen-react/package.json.mjs +1 -1
  12. package/dist/browser-dev/tracking-utils.mjs +92 -0
  13. package/dist/browser-dev/tracking-utils.mjs.map +1 -0
  14. package/dist/browser-dev/useShopifyCookies.mjs +96 -9
  15. package/dist/browser-dev/useShopifyCookies.mjs.map +1 -1
  16. package/dist/browser-prod/ShopifyProvider.mjs +18 -1
  17. package/dist/browser-prod/ShopifyProvider.mjs.map +1 -1
  18. package/dist/browser-prod/analytics.mjs +4 -5
  19. package/dist/browser-prod/analytics.mjs.map +1 -1
  20. package/dist/browser-prod/cart-hooks.mjs +25 -7
  21. package/dist/browser-prod/cart-hooks.mjs.map +1 -1
  22. package/dist/browser-prod/cookies-utils.mjs +4 -4
  23. package/dist/browser-prod/cookies-utils.mjs.map +1 -1
  24. package/dist/browser-prod/index.mjs +4 -0
  25. package/dist/browser-prod/index.mjs.map +1 -1
  26. package/dist/browser-prod/packages/hydrogen-react/package.json.mjs +1 -1
  27. package/dist/browser-prod/tracking-utils.mjs +92 -0
  28. package/dist/browser-prod/tracking-utils.mjs.map +1 -0
  29. package/dist/browser-prod/useShopifyCookies.mjs +96 -9
  30. package/dist/browser-prod/useShopifyCookies.mjs.map +1 -1
  31. package/dist/node-dev/ShopifyProvider.js +18 -1
  32. package/dist/node-dev/ShopifyProvider.js.map +1 -1
  33. package/dist/node-dev/ShopifyProvider.mjs +18 -1
  34. package/dist/node-dev/ShopifyProvider.mjs.map +1 -1
  35. package/dist/node-dev/analytics.js +4 -5
  36. package/dist/node-dev/analytics.js.map +1 -1
  37. package/dist/node-dev/analytics.mjs +4 -5
  38. package/dist/node-dev/analytics.mjs.map +1 -1
  39. package/dist/node-dev/cart-hooks.js +24 -6
  40. package/dist/node-dev/cart-hooks.js.map +1 -1
  41. package/dist/node-dev/cart-hooks.mjs +25 -7
  42. package/dist/node-dev/cart-hooks.mjs.map +1 -1
  43. package/dist/node-dev/cookies-utils.js +4 -4
  44. package/dist/node-dev/cookies-utils.js.map +1 -1
  45. package/dist/node-dev/cookies-utils.mjs +4 -4
  46. package/dist/node-dev/cookies-utils.mjs.map +1 -1
  47. package/dist/node-dev/index.js +4 -0
  48. package/dist/node-dev/index.js.map +1 -1
  49. package/dist/node-dev/index.mjs +4 -0
  50. package/dist/node-dev/index.mjs.map +1 -1
  51. package/dist/node-dev/packages/hydrogen-react/package.json.js +1 -1
  52. package/dist/node-dev/packages/hydrogen-react/package.json.mjs +1 -1
  53. package/dist/node-dev/tracking-utils.js +92 -0
  54. package/dist/node-dev/tracking-utils.js.map +1 -0
  55. package/dist/node-dev/tracking-utils.mjs +92 -0
  56. package/dist/node-dev/tracking-utils.mjs.map +1 -0
  57. package/dist/node-dev/useShopifyCookies.js +94 -7
  58. package/dist/node-dev/useShopifyCookies.js.map +1 -1
  59. package/dist/node-dev/useShopifyCookies.mjs +96 -9
  60. package/dist/node-dev/useShopifyCookies.mjs.map +1 -1
  61. package/dist/node-prod/ShopifyProvider.js +18 -1
  62. package/dist/node-prod/ShopifyProvider.js.map +1 -1
  63. package/dist/node-prod/ShopifyProvider.mjs +18 -1
  64. package/dist/node-prod/ShopifyProvider.mjs.map +1 -1
  65. package/dist/node-prod/analytics.js +4 -5
  66. package/dist/node-prod/analytics.js.map +1 -1
  67. package/dist/node-prod/analytics.mjs +4 -5
  68. package/dist/node-prod/analytics.mjs.map +1 -1
  69. package/dist/node-prod/cart-hooks.js +24 -6
  70. package/dist/node-prod/cart-hooks.js.map +1 -1
  71. package/dist/node-prod/cart-hooks.mjs +25 -7
  72. package/dist/node-prod/cart-hooks.mjs.map +1 -1
  73. package/dist/node-prod/cookies-utils.js +4 -4
  74. package/dist/node-prod/cookies-utils.js.map +1 -1
  75. package/dist/node-prod/cookies-utils.mjs +4 -4
  76. package/dist/node-prod/cookies-utils.mjs.map +1 -1
  77. package/dist/node-prod/index.js +4 -0
  78. package/dist/node-prod/index.js.map +1 -1
  79. package/dist/node-prod/index.mjs +4 -0
  80. package/dist/node-prod/index.mjs.map +1 -1
  81. package/dist/node-prod/packages/hydrogen-react/package.json.js +1 -1
  82. package/dist/node-prod/packages/hydrogen-react/package.json.mjs +1 -1
  83. package/dist/node-prod/tracking-utils.js +92 -0
  84. package/dist/node-prod/tracking-utils.js.map +1 -0
  85. package/dist/node-prod/tracking-utils.mjs +92 -0
  86. package/dist/node-prod/tracking-utils.mjs.map +1 -0
  87. package/dist/node-prod/useShopifyCookies.js +94 -7
  88. package/dist/node-prod/useShopifyCookies.js.map +1 -1
  89. package/dist/node-prod/useShopifyCookies.mjs +96 -9
  90. package/dist/node-prod/useShopifyCookies.mjs.map +1 -1
  91. package/dist/types/ShopifyProvider.d.ts +5 -0
  92. package/dist/types/cookies-utils.d.ts +4 -0
  93. package/dist/types/index.d.cts +1 -0
  94. package/dist/types/index.d.ts +1 -0
  95. package/dist/types/tracking-utils.d.ts +21 -0
  96. package/dist/types/useShopifyCookies.d.ts +28 -2
  97. package/dist/umd/hydrogen-react.dev.js +275 -89
  98. package/dist/umd/hydrogen-react.dev.js.map +1 -1
  99. package/dist/umd/hydrogen-react.prod.js +18 -18
  100. package/dist/umd/hydrogen-react.prod.js.map +1 -1
  101. package/package.json +1 -1
@@ -1,18 +1,27 @@
1
- import { useEffect } from "react";
1
+ import { useEffect, useState, useRef } from "react";
2
2
  import { stringify } from "worktop/cookie";
3
3
  import { SHOPIFY_Y, SHOPIFY_S } from "./cart-constants.mjs";
4
- import { getShopifyCookies, buildUUID } from "./cookies-utils.mjs";
4
+ import { buildUUID } from "./cookies-utils.mjs";
5
+ import { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER } from "./tracking-utils.mjs";
5
6
  const longTermLength = 60 * 60 * 24 * 360 * 1;
6
7
  const shortTermLength = 60 * 30;
7
8
  function useShopifyCookies(options) {
8
9
  const {
9
- hasUserConsent = false,
10
+ hasUserConsent,
10
11
  domain = "",
11
- checkoutDomain = ""
12
+ checkoutDomain = "",
13
+ storefrontAccessToken,
14
+ fetchTrackingValues,
15
+ ignoreDeprecatedCookies = false
12
16
  } = options || {};
17
+ const coreCookiesReady = useCoreShopifyCookies({
18
+ storefrontAccessToken,
19
+ fetchTrackingValues,
20
+ checkoutDomain
21
+ });
13
22
  useEffect(() => {
14
- const cookies = getShopifyCookies(document.cookie);
15
- let currentDomain = domain || window.document.location.host;
23
+ if (ignoreDeprecatedCookies || !coreCookiesReady) return;
24
+ let currentDomain = domain || window.location.host;
16
25
  if (checkoutDomain) {
17
26
  const checkoutDomainParts = checkoutDomain.split(".").reverse();
18
27
  const currentDomainParts = currentDomain.split(".").reverse();
@@ -27,15 +36,19 @@ function useShopifyCookies(options) {
27
36
  if (/^localhost/.test(currentDomain)) currentDomain = "";
28
37
  const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
29
38
  if (hasUserConsent) {
39
+ const trackingValues = getTrackingValues();
40
+ if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) {
41
+ return;
42
+ }
30
43
  setCookie(
31
44
  SHOPIFY_Y,
32
- cookies[SHOPIFY_Y] || buildUUID(),
45
+ trackingValues.uniqueToken || buildUUID(),
33
46
  longTermLength,
34
47
  domainWithLeadingDot
35
48
  );
36
49
  setCookie(
37
50
  SHOPIFY_S,
38
- cookies[SHOPIFY_S] || buildUUID(),
51
+ trackingValues.visitToken || buildUUID(),
39
52
  shortTermLength,
40
53
  domainWithLeadingDot
41
54
  );
@@ -43,7 +56,14 @@ function useShopifyCookies(options) {
43
56
  setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
44
57
  setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
45
58
  }
46
- }, [options, hasUserConsent, domain, checkoutDomain]);
59
+ }, [
60
+ coreCookiesReady,
61
+ hasUserConsent,
62
+ domain,
63
+ checkoutDomain,
64
+ ignoreDeprecatedCookies
65
+ ]);
66
+ return coreCookiesReady;
47
67
  }
48
68
  function setCookie(name, value, maxage, domain) {
49
69
  document.cookie = stringify(name, value, {
@@ -53,6 +73,73 @@ function setCookie(name, value, maxage, domain) {
53
73
  path: "/"
54
74
  });
55
75
  }
76
+ async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
77
+ const { uniqueToken, visitToken } = getTrackingValues();
78
+ const response = await fetch(
79
+ // TODO: update this endpoint when it becomes stable
80
+ `${storefrontApiDomain.replace(/\/+$/, "")}/api/unstable/graphql.json`,
81
+ {
82
+ method: "POST",
83
+ headers: {
84
+ "Content-Type": "application/json",
85
+ ...storefrontAccessToken && {
86
+ "X-Shopify-Storefront-Access-Token": storefrontAccessToken
87
+ },
88
+ ...visitToken || uniqueToken ? {
89
+ [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
90
+ [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
91
+ } : void 0
92
+ },
93
+ body: JSON.stringify({
94
+ query: (
95
+ // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.
96
+ // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.
97
+ "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }"
98
+ )
99
+ })
100
+ }
101
+ );
102
+ if (!response.ok) {
103
+ throw new Error(
104
+ `Failed to fetch consent from browser: ${response.status} ${response.statusText}`
105
+ );
106
+ }
107
+ await response.json();
108
+ getTrackingValues();
109
+ }
110
+ function useCoreShopifyCookies({
111
+ checkoutDomain,
112
+ storefrontAccessToken,
113
+ fetchTrackingValues = false
114
+ }) {
115
+ const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);
116
+ const hasFetchedTrackingValues = useRef(false);
117
+ useEffect(() => {
118
+ if (!fetchTrackingValues) {
119
+ setCookiesReady(true);
120
+ return;
121
+ }
122
+ if (hasFetchedTrackingValues.current) return;
123
+ hasFetchedTrackingValues.current = true;
124
+ fetchTrackingValuesFromBrowser(storefrontAccessToken).catch(
125
+ (error) => checkoutDomain ? (
126
+ // Retry with checkout domain if available to at least
127
+ // get the server-timing values for tracking.
128
+ fetchTrackingValuesFromBrowser(
129
+ storefrontAccessToken,
130
+ checkoutDomain
131
+ )
132
+ ) : Promise.reject(error)
133
+ ).catch((error) => {
134
+ console.warn(
135
+ "[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error))
136
+ );
137
+ }).finally(() => {
138
+ setCookiesReady(true);
139
+ });
140
+ }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);
141
+ return cookiesReady;
142
+ }
56
143
  export {
57
144
  useShopifyCookies
58
145
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useShopifyCookies.mjs","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID, getShopifyCookies} from './cookies-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n /**\n * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n */\n checkoutDomain?: string;\n};\n\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): void {\n const {\n hasUserConsent = false,\n domain = '',\n checkoutDomain = '',\n } = options || {};\n useEffect(() => {\n const cookies = getShopifyCookies(document.cookie);\n\n /**\n * Setting cookie with domain\n *\n * If no domain is provided, the cookie will be set for the current host.\n * For Shopify, we need to ensure this domain is set with a leading dot.\n */\n\n // Use override domain or current host\n let currentDomain = domain || window.document.location.host;\n\n if (checkoutDomain) {\n const checkoutDomainParts = checkoutDomain.split('.').reverse();\n const currentDomainParts = currentDomain.split('.').reverse();\n const sameDomainParts: Array<string> = [];\n checkoutDomainParts.forEach((part, index) => {\n if (part === currentDomainParts[index]) {\n sameDomainParts.push(part);\n }\n });\n\n currentDomain = sameDomainParts.reverse().join('.');\n }\n\n // Reset domain if localhost\n if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n // Shopify checkout only consumes cookies set with leading dot domain\n const domainWithLeadingDot = currentDomain\n ? /^\\./.test(currentDomain)\n ? currentDomain\n : `.${currentDomain}`\n : '';\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n setCookie(\n SHOPIFY_Y,\n cookies[SHOPIFY_Y] || buildUUID(),\n longTermLength,\n domainWithLeadingDot,\n );\n setCookie(\n SHOPIFY_S,\n cookies[SHOPIFY_S] || buildUUID(),\n shortTermLength,\n domainWithLeadingDot,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n }\n }, [options, hasUserConsent, domain, checkoutDomain]);\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAmBtB,SAAS,kBAAkB,SAA0C;AACpE,QAAA;AAAA,IACJ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,iBAAiB;AAAA,EACnB,IAAI,WAAW,CAAC;AAChB,YAAU,MAAM;AACR,UAAA,UAAU,kBAAkB,SAAS,MAAM;AAUjD,QAAI,gBAAgB,UAAU,OAAO,SAAS,SAAS;AAEvD,QAAI,gBAAgB;AAClB,YAAM,sBAAsB,eAAe,MAAM,GAAG,EAAE,QAAQ;AAC9D,YAAM,qBAAqB,cAAc,MAAM,GAAG,EAAE,QAAQ;AAC5D,YAAM,kBAAiC,CAAC;AACpB,0BAAA,QAAQ,CAAC,MAAM,UAAU;AACvC,YAAA,SAAS,mBAAmB,KAAK,GAAG;AACtC,0BAAgB,KAAK,IAAI;AAAA,QAAA;AAAA,MAC3B,CACD;AAED,sBAAgB,gBAAgB,UAAU,KAAK,GAAG;AAAA,IAAA;AAIpD,QAAI,aAAa,KAAK,aAAa,EAAmB,iBAAA;AAGhD,UAAA,uBAAuB,gBACzB,MAAM,KAAK,aAAa,IACtB,gBACA,IAAI,aAAa,KACnB;AAKJ,QAAI,gBAAgB;AAClB;AAAA,QACE;AAAA,QACA,QAAQ,SAAS,KAAK,UAAU;AAAA,QAChC;AAAA,QACA;AAAA,MACF;AACA;AAAA,QACE;AAAA,QACA,QAAQ,SAAS,KAAK,UAAU;AAAA,QAChC;AAAA,QACA;AAAA,MACF;AAAA,IAAA,OACK;AACK,gBAAA,WAAW,IAAI,GAAG,oBAAoB;AACtC,gBAAA,WAAW,IAAI,GAAG,oBAAoB;AAAA,IAAA;AAAA,KAEjD,CAAC,SAAS,gBAAgB,QAAQ,cAAc,CAAC;AACtD;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACG,WAAA,SAAS,UAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;"}
1
+ {"version":3,"file":"useShopifyCookies.mjs","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n getTrackingValues,\n SHOPIFY_UNIQUE_TOKEN_HEADER,\n SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n /**\n * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n */\n checkoutDomain?: string;\n /**\n * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n */\n ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n const {\n hasUserConsent,\n domain = '',\n checkoutDomain = '',\n storefrontAccessToken,\n fetchTrackingValues,\n ignoreDeprecatedCookies = false,\n } = options || {};\n\n const coreCookiesReady = useCoreShopifyCookies({\n storefrontAccessToken,\n fetchTrackingValues,\n checkoutDomain,\n });\n\n useEffect(() => {\n // Skip setting JS cookies until http-only cookies and server-timing\n // are ready so that we have values synced in JS and http-only cookies.\n if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n /**\n * Setting cookie with domain\n *\n * If no domain is provided, the cookie will be set for the current host.\n * For Shopify, we need to ensure this domain is set with a leading dot.\n */\n\n // Use override domain or current host\n let currentDomain = domain || window.location.host;\n\n if (checkoutDomain) {\n const checkoutDomainParts = checkoutDomain.split('.').reverse();\n const currentDomainParts = currentDomain.split('.').reverse();\n const sameDomainParts: Array<string> = [];\n checkoutDomainParts.forEach((part, index) => {\n if (part === currentDomainParts[index]) {\n sameDomainParts.push(part);\n }\n });\n\n currentDomain = sameDomainParts.reverse().join('.');\n }\n\n // Reset domain if localhost\n if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n // Shopify checkout only consumes cookies set with leading dot domain\n const domainWithLeadingDot = currentDomain\n ? /^\\./.test(currentDomain)\n ? currentDomain\n : `.${currentDomain}`\n : '';\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n const trackingValues = getTrackingValues();\n if (\n (\n trackingValues.uniqueToken ||\n trackingValues.visitToken ||\n ''\n ).startsWith('00000000-')\n ) {\n // Skip writing cookies when tracking values signal we don't have consent yet\n return;\n }\n\n setCookie(\n SHOPIFY_Y,\n trackingValues.uniqueToken || buildUUID(),\n longTermLength,\n domainWithLeadingDot,\n );\n setCookie(\n SHOPIFY_S,\n trackingValues.visitToken || buildUUID(),\n shortTermLength,\n domainWithLeadingDot,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n }\n }, [\n coreCookiesReady,\n hasUserConsent,\n domain,\n checkoutDomain,\n ignoreDeprecatedCookies,\n ]);\n\n return coreCookiesReady;\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n storefrontAccessToken?: string,\n storefrontApiDomain = '',\n): Promise<void> {\n // These values might come from server-timing or old cookies.\n // If consent cannot be initially assumed, these tokens\n // will be dropped in SFAPI and it will return a mock token\n // starting with '00000000-'.\n // However, if consent can be assumed initially, these tokens\n // will be used to create proper cookies and continue our flow.\n const {uniqueToken, visitToken} = getTrackingValues();\n\n const response = await fetch(\n // TODO: update this endpoint when it becomes stable\n `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(storefrontAccessToken && {\n 'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n }),\n ...(visitToken || uniqueToken\n ? {\n [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n }\n : undefined),\n },\n body: JSON.stringify({\n query:\n // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n 'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n );\n }\n\n // Consume the body to complete the request and\n // ensure server-timing is available in performance API\n await response.json();\n\n // Ensure we cache the latest tracking values from resources timing\n getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n storefrontAccessToken?: string;\n fetchTrackingValues?: boolean;\n checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n checkoutDomain,\n storefrontAccessToken,\n fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n const hasFetchedTrackingValues = useRef(false);\n\n useEffect(() => {\n if (!fetchTrackingValues) {\n // Backend did the work, or proxy is disabled.\n setCookiesReady(true);\n return;\n }\n\n // React runs effects twice in dev mode, avoid double fetching\n if (hasFetchedTrackingValues.current) return;\n hasFetchedTrackingValues.current = true;\n\n // Fetch consent from browser via proxy\n fetchTrackingValuesFromBrowser(storefrontAccessToken)\n .catch((error) =>\n checkoutDomain\n ? // Retry with checkout domain if available to at least\n // get the server-timing values for tracking.\n fetchTrackingValuesFromBrowser(\n storefrontAccessToken,\n checkoutDomain,\n )\n : Promise.reject(error),\n )\n .catch((error) => {\n console.warn(\n '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n (error instanceof Error ? error.message : String(error)),\n );\n })\n .finally(() => {\n // Proceed even on errors, degraded tracking is better than no app\n setCookiesReady(true);\n });\n }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n return cookiesReady;\n}\n"],"names":[],"mappings":"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"}
@@ -26,6 +26,11 @@ export interface ShopifyProviderBase {
26
26
  * `ISO 369` language codes supported by Shopify.
27
27
  */
28
28
  languageIsoCode: LanguageCode;
29
+ /**
30
+ * Uses the current window.location.origin for Storefront API requests.
31
+ * This requires setting up a proxy for Storefront API requests in your domain.
32
+ */
33
+ sameDomainForStorefrontApi?: boolean;
29
34
  }
30
35
  /**
31
36
  * Shopify-specific values that are used in various Hydrogen React components and hooks.
@@ -1,4 +1,8 @@
1
1
  import { ShopifyCookies } from './analytics-types.js';
2
2
  export declare function buildUUID(): string;
3
3
  export declare function hexTime(): string;
4
+ /**
5
+ * Gets the values of _shopify_y and _shopify_s cookies from the provided cookie string.
6
+ * @deprecated Use getTrackingValues instead.
7
+ */
4
8
  export declare function getShopifyCookies(cookies: string): ShopifyCookies;
@@ -32,6 +32,7 @@ export { ShopPayButton } from './ShopPayButton.js';
32
32
  export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
33
33
  export type { StorefrontClientProps } from './storefront-client.js';
34
34
  export { createStorefrontClient } from './storefront-client.js';
35
+ export { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, } from './tracking-utils.js';
35
36
  export { useMoney } from './useMoney.js';
36
37
  export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
37
38
  export { useShopifyCookies } from './useShopifyCookies.js';
@@ -32,6 +32,7 @@ export { ShopPayButton } from './ShopPayButton.js';
32
32
  export type { StorefrontApiResponse, StorefrontApiResponseError, StorefrontApiResponseOk, StorefrontApiResponseOkPartial, StorefrontApiResponsePartial, } from './storefront-api-response.types.js';
33
33
  export type { StorefrontClientProps } from './storefront-client.js';
34
34
  export { createStorefrontClient } from './storefront-client.js';
35
+ export { getTrackingValues, SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, } from './tracking-utils.js';
35
36
  export { useMoney } from './useMoney.js';
36
37
  export { useSelectedOptionInUrlParam } from './useSelectedOptionInUrlParam.js';
37
38
  export { useShopifyCookies } from './useShopifyCookies.js';
@@ -0,0 +1,21 @@
1
+ /** Storefront API header for VisitToken */
2
+ export declare const SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
3
+ /** Storefront API header for UniqueToken */
4
+ export declare const SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
5
+ type TrackingValues = {
6
+ /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */
7
+ uniqueToken: string;
8
+ /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */
9
+ visitToken: string;
10
+ /** Represents the consent given by the user or the default region consent configured in Admin */
11
+ consent: string;
12
+ };
13
+ export declare const cachedTrackingValues: {
14
+ current: null | TrackingValues;
15
+ };
16
+ /**
17
+ * Retrieves user session tracking values for analytics
18
+ * and marketing from the browser environment.
19
+ */
20
+ export declare function getTrackingValues(): TrackingValues;
21
+ export {};
@@ -1,4 +1,4 @@
1
- type UseShopifyCookiesOptions = {
1
+ type UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {
2
2
  /**
3
3
  * If set to `false`, Shopify cookies will be removed.
4
4
  * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
@@ -13,6 +13,32 @@ type UseShopifyCookiesOptions = {
13
13
  * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.
14
14
  */
15
15
  checkoutDomain?: string;
16
+ /**
17
+ * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.
18
+ */
19
+ ignoreDeprecatedCookies?: boolean;
20
+ };
21
+ /**
22
+ * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
23
+ * for backward compatibility support.
24
+ *
25
+ * If `fetchTrackingValues` is true, it makes a request to Storefront API
26
+ * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
27
+ * Generally speaking, this should only be needed if you're not using Hydrogen's
28
+ * built-in analytics components and hooks that already handle this automatically.
29
+ * For example, set it to `true` if you are using `hydrogen-react` only with
30
+ * a different framework and still need to make a same-domain request to
31
+ * Storefront API to set cookies.
32
+ *
33
+ * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
34
+ * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
35
+ *
36
+ * @returns `true` when cookies are set and ready.
37
+ */
38
+ export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean;
39
+ type CoreShopifyCookiesOptions = {
40
+ storefrontAccessToken?: string;
41
+ fetchTrackingValues?: boolean;
42
+ checkoutDomain?: string;
16
43
  };
17
- export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): void;
18
44
  export {};