@brytdesigns/shopify-ajax-cart-components 3.0.0 → 3.2.0

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 (9) hide show
  1. package/dist/main/components/cart-data-listener.js +14 -10
  2. package/dist/main/components/cart-data-listener.js.map +1 -1
  3. package/dist/main/components/cart-view-event.js +51 -0
  4. package/dist/main/components/cart-view-event.js.map +1 -0
  5. package/dist/main/components/index.js +1 -0
  6. package/dist/main/index.d.ts +918 -3330
  7. package/dist/main/index.js +2 -0
  8. package/dist/main/index.js.map +1 -1
  9. package/package.json +4 -3
package/dist/main/components/cart-data-listener.js CHANGED
@@ -32,6 +32,10 @@ var Component = (props, { element }) => {
32
32
  let resetStatusId = null;
33
33
  function onEvent(e) {
34
34
  const cart = AjaxCart;
35
+ const options = { event: {
36
+ target: element,
37
+ context: "cart"
38
+ } };
35
39
  if (preventDefault) e.preventDefault();
36
40
  async function handleStatus(promise) {
37
41
  setStatus("loading");
@@ -59,30 +63,30 @@ var Component = (props, { element }) => {
59
63
  if (method === "replaceItem") return handleStatus(cart.replaceItem({
60
64
  key: formObj.key,
61
65
  id: formObj.id
62
- })).finally(reset);
66
+ }, options)).finally(reset);
63
67
  if (method === "updateItem") return handleStatus(cart.updateItem({
64
68
  id: formObj.id,
65
69
  quantity: formObj?.quantity || void 0,
66
70
  properties: formObj?.properties || {},
67
71
  selling_plan: formObj?.selling_plan || void 0
68
- })).finally(reset);
69
- if (method === "removeItem") return handleStatus(cart.removeItem(formObj.key)).finally(reset);
70
- if (method === "addDiscount") return handleStatus(cart.addDiscount(formObj.code)).finally(reset);
71
- if (method === "removeDiscount") return handleStatus(cart.removeDiscount(formObj.code)).finally(reset);
72
- if (method === "updateNote") return handleStatus(cart.updateNote(formObj.note)).finally(reset);
72
+ }, options)).finally(reset);
73
+ if (method === "removeItem") return handleStatus(cart.removeItem(formObj.key, options)).finally(reset);
74
+ if (method === "addDiscount") return handleStatus(cart.addDiscount(formObj.code, options)).finally(reset);
75
+ if (method === "removeDiscount") return handleStatus(cart.removeDiscount(formObj.code, options)).finally(reset);
76
+ if (method === "updateNote") return handleStatus(cart.updateNote(formObj.note, options)).finally(reset);
73
77
  return;
74
78
  }
75
79
  const input = e.target;
76
- if (method === "removeItem") return handleStatus(cart.removeItem(data.key));
80
+ if (method === "removeItem") return handleStatus(cart.removeItem(data.key, options));
77
81
  if (method === "updateQuantity") return handleStatus(cart.updateItem({
78
82
  id: data.key,
79
83
  quantity: input.valueAsNumber
80
- }));
84
+ }, options));
81
85
  if (method === "updateItemVariant") return handleStatus(cart.replaceItem({
82
86
  key: data.key,
83
87
  id: input.value
84
- }));
85
- if (method === "updateNote") return handleStatus(cart.updateNote(input.value));
88
+ }, options));
89
+ if (method === "updateNote") return handleStatus(cart.updateNote(input.value, options));
86
90
  }
87
91
  const handleEvent = debounce(onEvent, debounceDelay), controller = new AbortController();
88
92
  element.addEventListener(on, (e) => {
package/dist/main/components/cart-data-listener.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"cart-data-listener.js","names":[],"sources":["../../../src/components/cart-data-listener.ts"],"sourcesContent":["import AjaxCart from \"@brytdesigns/shopify-ajax-cart\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport debounce from \"lodash.debounce\";\n\nimport {\n\tprovideListenerStatusContext,\n\ttype Status,\n\tuseCartPath,\n\tuseCartValue,\n} from \"../hooks/index.js\";\nimport { parseNestedObject } from \"../utils/index.js\";\n\nexport type Props = {\n\tstatus: Status;\n\ton: string;\n\tmethod: string;\n\tdebounceDelay: number;\n\tresetForm: boolean;\n\tresetStatusDelay: number;\n\tpreventDefault: boolean;\n};\n\nexport const Name = \"cart-data-listener\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [_, setStatus] = provideListenerStatusContext({\n\t\telement,\n\t\tget status() {\n\t\t\treturn props.status;\n\t\t},\n\t});\n\n\tconst path = useCartPath({\n\t\telement,\n\t});\n\tconst data = useCartValue({\n\t\telement,\n\t\tpath,\n\t});\n\n\t// let currentEventId: string | null = null;\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tmethod: props.method,\n\t\t\ton: props.on,\n\t\t\tpreventDefault: props.preventDefault,\n\t\t\tdata: data() as any,\n\t\t\tdebounceDelay: props.debounceDelay,\n\t\t\tresetForm: props.resetForm,\n\t\t\tresetStatusDelay: props.resetStatusDelay,\n\t\t}),\n\t\t({\n\t\t\tmethod,\n\t\t\ton,\n\t\t\tpreventDefault,\n\t\t\tdata,\n\t\t\tdebounceDelay,\n\t\t\tresetForm,\n\t\t\tresetStatusDelay,\n\t\t}) => {\n\t\t\tif (!method)\n\t\t\t\treturn console.error(`${Name}: method property is required!`);\n\t\t\tif (!on) return console.error(`${Name}: on property is required!`);\n\n\t\t\tlet resetStatusId: number | null = null;\n\t\t\t// tempEventId: string | null = null;\n\n\t\t\tfunction onEvent(e: Event) {\n\t\t\t\tconst cart = AjaxCart;\n\n\t\t\t\t// (currentEventId = createUniqueId()), (tempEventId = currentEventId);\n\n\t\t\t\tif (preventDefault) e.preventDefault();\n\n\t\t\t\tasync function handleStatus<T>(promise: Promise<T>) {\n\t\t\t\t\tsetStatus(\"loading\");\n\t\t\t\t\treturn promise\n\t\t\t\t\t\t.then((data) => {\n\t\t\t\t\t\t\tsetStatus(\"success\");\n\t\t\t\t\t\t\treturn data;\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.catch((error) => {\n\t\t\t\t\t\t\tsetStatus(\"error\");\n\t\t\t\t\t\t\treturn error;\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.finally(() => {\n\t\t\t\t\t\t\tif (resetStatusDelay > 0) {\n\t\t\t\t\t\t\t\t//@ts-expect-error\n\t\t\t\t\t\t\t\tresetStatusId = setTimeout(() => {\n\t\t\t\t\t\t\t\t\tsetStatus(\"default\");\n\t\t\t\t\t\t\t\t\tresetStatusId = null;\n\t\t\t\t\t\t\t\t}, resetStatusDelay);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStatus(\"default\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif (on === \"submit\") {\n\t\t\t\t\tconst form = e.target as HTMLFormElement;\n\t\t\t\t\tconst formData = new FormData(form);\n\t\t\t\t\tconst formObj = parseNestedObject(\n\t\t\t\t\t\t//@ts-expect-error\n\t\t\t\t\t\tObject.fromEntries(formData.entries()),\n\t\t\t\t\t);\n\n\t\t\t\t\tfunction reset() {\n\t\t\t\t\t\tif (resetForm) form.reset();\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"replaceItem\") {\n\t\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\t\tcart.replaceItem({\n\t\t\t\t\t\t\t\tkey: formObj.key,\n\t\t\t\t\t\t\t\tid: formObj.id,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"updateItem\") {\n\t\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\t\tcart.updateItem({\n\t\t\t\t\t\t\t\tid: formObj.id,\n\t\t\t\t\t\t\t\tquantity: formObj?.quantity || undefined,\n\t\t\t\t\t\t\t\tproperties: formObj?.properties || {},\n\t\t\t\t\t\t\t\tselling_plan: formObj?.selling_plan || undefined,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"removeItem\") {\n\t\t\t\t\t\treturn handleStatus(cart.removeItem(formObj.key)).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"addDiscount\") {\n\t\t\t\t\t\treturn handleStatus(cart.addDiscount(formObj.code)).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"removeDiscount\") {\n\t\t\t\t\t\treturn handleStatus(cart.removeDiscount(formObj.code)).finally(\n\t\t\t\t\t\t\treset,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"updateNote\") {\n\t\t\t\t\t\treturn handleStatus(cart.updateNote(formObj.note)).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst input = e.target as HTMLInputElement;\n\n\t\t\t\tif (method === \"removeItem\") {\n\t\t\t\t\treturn handleStatus(cart.removeItem(data.key));\n\t\t\t\t}\n\n\t\t\t\tif (method === \"updateQuantity\") {\n\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\tcart.updateItem({\n\t\t\t\t\t\t\tid: data.key,\n\t\t\t\t\t\t\tquantity: input.valueAsNumber,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (method === \"updateItemVariant\") {\n\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\tcart.replaceItem({\n\t\t\t\t\t\t\tkey: data.key,\n\t\t\t\t\t\t\tid: input.value,\n\t\t\t\t\t\t}),\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (method === \"updateNote\") {\n\t\t\t\t\treturn handleStatus(cart.updateNote(input.value));\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst handleEvent = debounce(onEvent, debounceDelay),\n\t\t\t\tcontroller = new AbortController();\n\n\t\t\telement.addEventListener(\n\t\t\t\ton,\n\t\t\t\t(e) => {\n\t\t\t\t\tif (preventDefault) e.preventDefault();\n\t\t\t\t\thandleEvent(e);\n\t\t\t\t},\n\t\t\t\t{ signal: controller.signal },\n\t\t\t);\n\n\t\t\treturn () => {\n\t\t\t\tcontroller.abort();\n\t\t\t\tif (resetStatusId) clearTimeout(resetStatusId);\n\t\t\t};\n\t\t},\n\t);\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"cart-data-listener.js","names":[],"sources":["../../../src/components/cart-data-listener.ts"],"sourcesContent":["import AjaxCart from \"@brytdesigns/shopify-ajax-cart\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport debounce from \"lodash.debounce\";\n\nimport {\n\tprovideListenerStatusContext,\n\ttype Status,\n\tuseCartPath,\n\tuseCartValue,\n} from \"../hooks/index.js\";\nimport { parseNestedObject } from \"../utils/index.js\";\n\nexport type Props = {\n\tstatus: Status;\n\ton: string;\n\tmethod: string;\n\tdebounceDelay: number;\n\tresetForm: boolean;\n\tresetStatusDelay: number;\n\tpreventDefault: boolean;\n};\n\nexport const Name = \"cart-data-listener\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst [_, setStatus] = provideListenerStatusContext({\n\t\telement,\n\t\tget status() {\n\t\t\treturn props.status;\n\t\t},\n\t});\n\n\tconst path = useCartPath({\n\t\telement,\n\t});\n\tconst data = useCartValue({\n\t\telement,\n\t\tpath,\n\t});\n\n\t// let currentEventId: string | null = null;\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tmethod: props.method,\n\t\t\ton: props.on,\n\t\t\tpreventDefault: props.preventDefault,\n\t\t\tdata: data() as any,\n\t\t\tdebounceDelay: props.debounceDelay,\n\t\t\tresetForm: props.resetForm,\n\t\t\tresetStatusDelay: props.resetStatusDelay,\n\t\t}),\n\t\t({\n\t\t\tmethod,\n\t\t\ton,\n\t\t\tpreventDefault,\n\t\t\tdata,\n\t\t\tdebounceDelay,\n\t\t\tresetForm,\n\t\t\tresetStatusDelay,\n\t\t}) => {\n\t\t\tif (!method)\n\t\t\t\treturn console.error(`${Name}: method property is required!`);\n\t\t\tif (!on) return console.error(`${Name}: on property is required!`);\n\n\t\t\tlet resetStatusId: number | null = null;\n\t\t\t// tempEventId: string | null = null;\n\n\t\t\tfunction onEvent(e: Event) {\n\t\t\t\tconst cart = AjaxCart;\n\t\t\t\t// The storefront event for the change is sent from this element,\n\t\t\t\t// as a change the shopper made in the cart.\n\t\t\t\tconst options = {\n\t\t\t\t\tevent: { target: element, context: \"cart\" as const },\n\t\t\t\t};\n\n\t\t\t\t// (currentEventId = createUniqueId()), (tempEventId = currentEventId);\n\n\t\t\t\tif (preventDefault) e.preventDefault();\n\n\t\t\t\tasync function handleStatus<T>(promise: Promise<T>) {\n\t\t\t\t\tsetStatus(\"loading\");\n\t\t\t\t\treturn promise\n\t\t\t\t\t\t.then((data) => {\n\t\t\t\t\t\t\tsetStatus(\"success\");\n\t\t\t\t\t\t\treturn data;\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.catch((error) => {\n\t\t\t\t\t\t\tsetStatus(\"error\");\n\t\t\t\t\t\t\treturn error;\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.finally(() => {\n\t\t\t\t\t\t\tif (resetStatusDelay > 0) {\n\t\t\t\t\t\t\t\t//@ts-expect-error\n\t\t\t\t\t\t\t\tresetStatusId = setTimeout(() => {\n\t\t\t\t\t\t\t\t\tsetStatus(\"default\");\n\t\t\t\t\t\t\t\t\tresetStatusId = null;\n\t\t\t\t\t\t\t\t}, resetStatusDelay);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStatus(\"default\");\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\tif (on === \"submit\") {\n\t\t\t\t\tconst form = e.target as HTMLFormElement;\n\t\t\t\t\tconst formData = new FormData(form);\n\t\t\t\t\tconst formObj = parseNestedObject(\n\t\t\t\t\t\t//@ts-expect-error\n\t\t\t\t\t\tObject.fromEntries(formData.entries()),\n\t\t\t\t\t);\n\n\t\t\t\t\tfunction reset() {\n\t\t\t\t\t\tif (resetForm) form.reset();\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"replaceItem\") {\n\t\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\t\tcart.replaceItem(\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tkey: formObj.key,\n\t\t\t\t\t\t\t\t\tid: formObj.id,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"updateItem\") {\n\t\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\t\tcart.updateItem(\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tid: formObj.id,\n\t\t\t\t\t\t\t\t\tquantity: formObj?.quantity || undefined,\n\t\t\t\t\t\t\t\t\tproperties: formObj?.properties || {},\n\t\t\t\t\t\t\t\t\tselling_plan: formObj?.selling_plan || undefined,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"removeItem\") {\n\t\t\t\t\t\treturn handleStatus(cart.removeItem(formObj.key, options)).finally(\n\t\t\t\t\t\t\treset,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"addDiscount\") {\n\t\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\t\tcart.addDiscount(formObj.code, options),\n\t\t\t\t\t\t).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"removeDiscount\") {\n\t\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\t\tcart.removeDiscount(formObj.code, options),\n\t\t\t\t\t\t).finally(reset);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (method === \"updateNote\") {\n\t\t\t\t\t\treturn handleStatus(cart.updateNote(formObj.note, options)).finally(\n\t\t\t\t\t\t\treset,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst input = e.target as HTMLInputElement;\n\n\t\t\t\tif (method === \"removeItem\") {\n\t\t\t\t\treturn handleStatus(cart.removeItem(data.key, options));\n\t\t\t\t}\n\n\t\t\t\tif (method === \"updateQuantity\") {\n\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\tcart.updateItem(\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tid: data.key,\n\t\t\t\t\t\t\t\tquantity: input.valueAsNumber,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (method === \"updateItemVariant\") {\n\t\t\t\t\treturn handleStatus(\n\t\t\t\t\t\tcart.replaceItem(\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tkey: data.key,\n\t\t\t\t\t\t\t\tid: input.value,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\toptions,\n\t\t\t\t\t\t),\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (method === \"updateNote\") {\n\t\t\t\t\treturn handleStatus(cart.updateNote(input.value, options));\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst handleEvent = debounce(onEvent, debounceDelay),\n\t\t\t\tcontroller = new AbortController();\n\n\t\t\telement.addEventListener(\n\t\t\t\ton,\n\t\t\t\t(e) => {\n\t\t\t\t\tif (preventDefault) e.preventDefault();\n\t\t\t\t\thandleEvent(e);\n\t\t\t\t},\n\t\t\t\t{ signal: controller.signal },\n\t\t\t);\n\n\t\t\treturn () => {\n\t\t\t\tcontroller.abort();\n\t\t\t\tif (resetStatusId) clearTimeout(resetStatusId);\n\t\t\t};\n\t\t},\n\t);\n};\n"],"mappings":"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"}
package/dist/main/components/cart-view-event.js ADDED
@@ -0,0 +1,51 @@
1
+ import { useAjaxCart } from "../hooks/useAjaxCart.js";
2
+ import "../hooks/index.js";
3
+ import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
4
+ import { untrack } from "solid-js";
5
+ import { Events } from "@brytdesigns/shopify-utils";
6
+ //#region src/components/cart-view-event.ts
7
+ var Name = "cart-view-event";
8
+ /**
9
+ * Sends Shopify's `shopify:cart:view` when the shopper sees the cart.
10
+ *
11
+ * Place it inside `cart-context` on the cart page and in the cart drawer. The
12
+ * cart it reports is the live one from the context, so it is never the stale
13
+ * copy a Liquid-rendered payload would be after an Ajax change.
14
+ *
15
+ * In a drawer it watches the surrounding `cart-context` come into view rather
16
+ * than listening to any particular dialog component: a closed drawer is not
17
+ * rendered, so becoming visible is what opening it means, whichever dialog
18
+ * does the opening. Reopened before its closing animation has finished, the
19
+ * drawer never left the screen, and that counts as the same view.
20
+ */
21
+ var Component = (props, { element }) => {
22
+ const cart = useAjaxCart(element);
23
+ const send = (context) => {
24
+ const current = untrack(() => cart());
25
+ Events.cartView(element, (library) => ({
26
+ context,
27
+ cart: current?.token ? Events.cartFromAjax(library, current) : null
28
+ })).catch(() => {});
29
+ };
30
+ Events.preload();
31
+ createGuardedEffect(() => props.context, (context) => {
32
+ if (context !== "dialog") {
33
+ send("page");
34
+ return;
35
+ }
36
+ const surface = element.closest("cart-context") ?? element;
37
+ let visible = false;
38
+ const observer = new IntersectionObserver((entries) => {
39
+ for (const entry of entries) {
40
+ if (entry.isIntersecting && !visible) send("dialog");
41
+ visible = entry.isIntersecting;
42
+ }
43
+ });
44
+ observer.observe(surface);
45
+ return () => observer.disconnect();
46
+ }, { name: `${Name}/observe` });
47
+ };
48
+ //#endregion
49
+ export { Component, Name };
50
+
51
+ //# sourceMappingURL=cart-view-event.js.map
package/dist/main/components/cart-view-event.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cart-view-event.js","names":[],"sources":["../../../src/components/cart-view-event.ts"],"sourcesContent":["import type { CartData } from \"@brytdesigns/shopify-ajax-cart\";\nimport { Events } from \"@brytdesigns/shopify-utils\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { untrack } from \"solid-js\";\n\nimport { useAjaxCart } from \"../hooks/index.js\";\n\nexport type Props = {\n\t/**\n\t * `\"page\"` for the cart page: sent once, when the element connects.\n\t * `\"dialog\"` for a cart drawer: sent every time the drawer opens.\n\t */\n\tcontext: \"page\" | \"dialog\";\n};\n\nexport const Name = \"cart-view-event\";\n\n/**\n * Sends Shopify's `shopify:cart:view` when the shopper sees the cart.\n *\n * Place it inside `cart-context` on the cart page and in the cart drawer. The\n * cart it reports is the live one from the context, so it is never the stale\n * copy a Liquid-rendered payload would be after an Ajax change.\n *\n * In a drawer it watches the surrounding `cart-context` come into view rather\n * than listening to any particular dialog component: a closed drawer is not\n * rendered, so becoming visible is what opening it means, whichever dialog\n * does the opening. Reopened before its closing animation has finished, the\n * drawer never left the screen, and that counts as the same view.\n */\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\tconst cart = useAjaxCart(element);\n\n\tconst send = (context: Props[\"context\"]) => {\n\t\t// A snapshot of the cart as the shopper sees it now — called from an\n\t\t// effect's apply phase and an observer callback, neither of which\n\t\t// should subscribe. The accessor is typed by an empty path, which\n\t\t// resolves to `never`; what it returns is the whole cart.\n\t\tconst current = untrack(() => cart()) as CartData | undefined;\n\t\tvoid Events.cartView(element, (library) => ({\n\t\t\tcontext,\n\t\t\t// An empty token is a cart that has not been created yet.\n\t\t\tcart: current?.token\n\t\t\t\t? Events.cartFromAjax(\n\t\t\t\t\t\tlibrary,\n\t\t\t\t\t\tcurrent as unknown as Events.CartAjaxResponse,\n\t\t\t\t\t)\n\t\t\t\t: null,\n\t\t})).catch(() => {});\n\t};\n\n\tEvents.preload();\n\n\tcreateGuardedEffect(\n\t\t() => props.context,\n\t\t(context) => {\n\t\t\tif (context !== \"dialog\") {\n\t\t\t\tsend(\"page\");\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst surface = element.closest(\"cart-context\") ?? element;\n\t\t\tlet visible = false;\n\t\t\tconst observer = new IntersectionObserver((entries) => {\n\t\t\t\tfor (const entry of entries) {\n\t\t\t\t\tif (entry.isIntersecting && !visible) send(\"dialog\");\n\t\t\t\t\tvisible = entry.isIntersecting;\n\t\t\t\t}\n\t\t\t});\n\t\t\tobserver.observe(surface);\n\n\t\t\treturn () => observer.disconnect();\n\t\t},\n\t\t{ name: `${Name}/observe` },\n\t);\n};\n"],"mappings":";;;;;;AAgBA,IAAa,OAAO;;;;;;;;;;;;;;AAepB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAC7E,MAAM,OAAO,YAAY,OAAO;CAEhC,MAAM,QAAQ,YAA8B;EAK3C,MAAM,UAAU,cAAc,KAAK,CAAC;EACpC,OAAY,SAAS,UAAU,aAAa;GAC3C;GAEA,MAAM,SAAS,QACZ,OAAO,aACP,SACA,OACD,IACC;EACJ,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;CACnB;CAEA,OAAO,QAAQ;CAEf,0BACO,MAAM,UACX,YAAY;EACZ,IAAI,YAAY,UAAU;GACzB,KAAK,MAAM;GACX;EACD;EAEA,MAAM,UAAU,QAAQ,QAAQ,cAAc,KAAK;EACnD,IAAI,UAAU;EACd,MAAM,WAAW,IAAI,sBAAsB,YAAY;GACtD,KAAK,MAAM,SAAS,SAAS;IAC5B,IAAI,MAAM,kBAAkB,CAAC,SAAS,KAAK,QAAQ;IACnD,UAAU,MAAM;GACjB;EACD,CAAC;EACD,SAAS,QAAQ,OAAO;EAExB,aAAa,SAAS,WAAW;CAClC,GACA,EAAE,MAAM,GAAG,KAAK,UAAU,CAC3B;AACD"}
package/dist/main/components/index.js CHANGED
@@ -8,3 +8,4 @@ import "./cart-data-injection.js";
8
8
  import "./cart-data-listener.js";
9
9
  import "./cart-data-listener-status.js";
10
10
  import "./cart-loading-state.js";
11
+ import "./cart-view-event.js";