@brytdesigns/shopify-product-info-components 1.0.3 → 1.0.5
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.
- package/dist/main/components/product-info.js +1 -9
- package/dist/main/components/product-info.js.map +1 -1
- package/dist/main/components/product-options.js +1 -9
- package/dist/main/components/product-options.js.map +1 -1
- package/dist/main/hooks/useProduct.js +10 -7
- package/dist/main/hooks/useProduct.js.map +1 -1
- package/dist/main/hooks/useProductOptions.js +6 -8
- package/dist/main/hooks/useProductOptions.js.map +1 -1
- package/dist/main/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -10,15 +10,7 @@ const ProductInfo = (props, { element }) => {
|
|
|
10
10
|
return console.warn(
|
|
11
11
|
"product-info: product attribute needs selected or first available variant object"
|
|
12
12
|
);
|
|
13
|
-
provideProductContext(
|
|
14
|
-
{
|
|
15
|
-
get product() {
|
|
16
|
-
return props.product;
|
|
17
|
-
},
|
|
18
|
-
element
|
|
19
|
-
},
|
|
20
|
-
element
|
|
21
|
-
);
|
|
13
|
+
provideProductContext(props, element);
|
|
22
14
|
const url = createMemo(() => {
|
|
23
15
|
const url2 = new URL(window.location.href);
|
|
24
16
|
if (props.product && props.product.selected_or_first_available_variant) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/product-info.ts"],"names":["url"],"mappings":";;;AAaO,MAAM,WAAsD,GAAA,CACjE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,IAAO,OAAA,OAAA,CAAQ,KAAK,6CAA6C,CAAA;AACnE,EAAI,IAAA,CAAC,MAAM,OAAQ,CAAA,QAAA;AACjB,IAAO,OAAA,OAAA,CAAQ,KAAK,sDAAsD,CAAA;AAC5E,EAAI,IAAA,CAAC,MAAM,OAAQ,CAAA,mCAAA;AACjB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb;AAAA,KACF;AACF,EAAA,qBAAA
|
|
1
|
+
{"version":3,"sources":["../../../src/components/product-info.ts"],"names":["url"],"mappings":";;;AAaO,MAAM,WAAsD,GAAA,CACjE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,OAAA;AACT,IAAO,OAAA,OAAA,CAAQ,KAAK,6CAA6C,CAAA;AACnE,EAAI,IAAA,CAAC,MAAM,OAAQ,CAAA,QAAA;AACjB,IAAO,OAAA,OAAA,CAAQ,KAAK,sDAAsD,CAAA;AAC5E,EAAI,IAAA,CAAC,MAAM,OAAQ,CAAA,mCAAA;AACjB,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb;AAAA,KACF;AACF,EAAA,qBAAA,CAAsB,OAAc,OAAO,CAAA;AAE3C,EAAM,MAAA,GAAA,GAAM,WAAW,MAAM;AAC3B,IAAA,MAAMA,IAAM,GAAA,IAAI,GAAI,CAAA,MAAA,CAAO,SAAS,IAAI,CAAA;AACxC,IAAA,IAAI,KAAM,CAAA,OAAA,IAAW,KAAM,CAAA,OAAA,CAAQ,mCAAqC,EAAA;AACtE,MAAAA,KAAI,YAAa,CAAA,GAAA;AAAA,QACf,SAAA;AAAA,QACA,KAAM,CAAA,OAAA,CAAQ,mCAAoC,CAAA,EAAA,CAAG,QAAS;AAAA,OAChE;AAAA;AAEF,IAAOA,OAAAA,IAAAA;AAAA,GACR,CAAA;AAED,EAAA,SAAS,UAAU,EAA4C,EAAA;AAC7D,IAAA,OAAO,WAAW,MAAM,KAAA,CAAM,OAAO,CAAE,CAAA,SAAA,CAAU,EAAE,CAAE,CAAA,WAAA;AAAA;AAGvD,EAAA,MAAA,CAAO,OAAO,OAAS,EAAA;AAAA,IACrB;AAAA,GACD,CAAA;AAED,EAAA,YAAA,CAAa,MAAM;AACjB,IAAI,IAAA,CAAC,MAAM,aAAe,EAAA;AAC1B,IAAA,MAAA,CAAO,OAAQ,CAAA,YAAA,CAAa,IAAM,EAAA,EAAA,EAAI,KAAK,CAAA;AAAA,GAC5C,CAAA;AACH","file":"product-info.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\n\nimport { createEffect, createMemo, observable } from \"solid-js\";\n\nimport { provideProductContext } from \"../hooks/index.js\";\n\nimport type { Product } from \"../types.js\";\n\ntype ProductInfoProps = {\n product?: Product;\n isProductPage?: boolean;\n};\n\nexport const ProductInfo: CorrectComponentType<ProductInfoProps> = (\n props,\n { element },\n) => {\n if (!props.product)\n return console.warn(\"product-info: product attribute is required\");\n if (!props.product.variants)\n return console.warn(\"product-info: product attribute needs variants array\");\n if (!props.product.selected_or_first_available_variant)\n return console.warn(\n \"product-info: product attribute needs selected or first available variant object\",\n );\n provideProductContext(props as any, element);\n\n const url = createMemo(() => {\n const url = new URL(window.location.href);\n if (props.product && props.product.selected_or_first_available_variant) {\n url.searchParams.set(\n \"variant\",\n props.product.selected_or_first_available_variant.id.toString(),\n );\n }\n return url;\n });\n\n function subscribe(cb: (product: Product | undefined) => void) {\n return observable(() => props.product).subscribe(cb).unsubscribe;\n }\n\n Object.assign(element, {\n subscribe,\n });\n\n createEffect(() => {\n if (!props.isProductPage) return;\n window.history.replaceState(null, \"\", url());\n });\n};\n"]}
|
|
@@ -5,15 +5,7 @@ const ProductOptions = (props, { element }) => {
|
|
|
5
5
|
return console.warn(
|
|
6
6
|
"product-options: selected-options attribute is required"
|
|
7
7
|
);
|
|
8
|
-
provideProductOptionsContext(
|
|
9
|
-
{
|
|
10
|
-
get selectedOptions() {
|
|
11
|
-
return props.selectedOptions;
|
|
12
|
-
},
|
|
13
|
-
element
|
|
14
|
-
},
|
|
15
|
-
element
|
|
16
|
-
);
|
|
8
|
+
provideProductOptionsContext(props, element);
|
|
17
9
|
};
|
|
18
10
|
|
|
19
11
|
export { ProductOptions };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/product-options.ts"],"names":[],"mappings":";;AAOO,MAAM,cAA4D,GAAA,CACvE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,eAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb;AAAA,KACF;AACF,EAAA,4BAAA
|
|
1
|
+
{"version":3,"sources":["../../../src/components/product-options.ts"],"names":[],"mappings":";;AAOO,MAAM,cAA4D,GAAA,CACvE,KACA,EAAA,EAAE,SACC,KAAA;AACH,EAAA,IAAI,CAAC,KAAM,CAAA,eAAA;AACT,IAAA,OAAO,OAAQ,CAAA,IAAA;AAAA,MACb;AAAA,KACF;AACF,EAAA,4BAAA,CAA6B,OAAO,OAAO,CAAA;AAC7C","file":"product-options.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-utils\";\nimport { provideProductOptionsContext } from \"../hooks/index.js\";\n\ntype ProductOptionsProps = {\n selectedOptions: string[];\n};\n\nexport const ProductOptions: CorrectComponentType<ProductOptionsProps> = (\n props,\n { element },\n) => {\n if (!props.selectedOptions)\n return console.warn(\n \"product-options: selected-options attribute is required\",\n );\n provideProductOptionsContext(props, element);\n};\n"]}
|
|
@@ -1,22 +1,25 @@
|
|
|
1
1
|
import { createContext, provide, consume } from 'component-register';
|
|
2
|
-
import { splitProps, mergeProps } from 'solid-js';
|
|
2
|
+
import { splitProps, mergeProps, untrack } from 'solid-js';
|
|
3
3
|
import { getContextFromProvider } from '@brytdesigns/web-component-utils';
|
|
4
4
|
|
|
5
5
|
function initializeProductContext(props) {
|
|
6
|
-
const [privateProps, publicProps] = splitProps(props, ["
|
|
6
|
+
const [privateProps, publicProps] = splitProps(props, ["root"]);
|
|
7
7
|
const state = mergeProps(publicProps, {});
|
|
8
8
|
function updateSelectedVariant(variantId) {
|
|
9
|
-
|
|
9
|
+
const product = untrack(() => state?.product);
|
|
10
|
+
if (typeof product?.selected_or_first_available_variant === "undefined" || typeof product === "undefined" || typeof product?.variants === "undefined")
|
|
10
11
|
return;
|
|
11
|
-
const newVariant =
|
|
12
|
+
const newVariant = product.variants.find(
|
|
12
13
|
(variant) => variant.id.toString() === variantId.toString()
|
|
13
14
|
);
|
|
15
|
+
if (newVariant?.id.toString() === product.selected_or_first_available_variant?.id.toString())
|
|
16
|
+
return;
|
|
14
17
|
const newState = {
|
|
15
|
-
...
|
|
18
|
+
...product,
|
|
16
19
|
selected_or_first_available_variant: newVariant
|
|
17
20
|
};
|
|
18
|
-
privateProps.
|
|
19
|
-
privateProps.
|
|
21
|
+
privateProps.root.setAttribute("product", JSON.stringify(newState));
|
|
22
|
+
privateProps.root.dispatchEvent(
|
|
20
23
|
new CustomEvent("variant-updated", {
|
|
21
24
|
detail: {
|
|
22
25
|
variant: newVariant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useProduct.ts"],"names":[],"mappings":";;;;AAoBA,SAAS,yBAAyB,KAA6B,EAAA;AAC7D,EAAM,MAAA,CAAC,cAAc,WAAW,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useProduct.ts"],"names":[],"mappings":";;;;AAoBA,SAAS,yBAAyB,KAA6B,EAAA;AAC7D,EAAM,MAAA,CAAC,cAAc,WAAW,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,MAAM,CAAC,CAAA;AAC9D,EAAA,MAAM,KAAQ,GAAA,UAAA,CAAW,WAAa,EAAA,EAAE,CAAA;AAExC,EAAA,SAAS,sBAAsB,SAA4B,EAAA;AACzD,IAAA,MAAM,OAAU,GAAA,OAAA,CAAQ,MAAM,KAAA,EAAO,OAAO,CAAA;AAC5C,IACE,IAAA,OAAO,SAAS,mCAAwC,KAAA,WAAA,IACxD,OAAO,OAAY,KAAA,WAAA,IACnB,OAAO,OAAA,EAAS,QAAa,KAAA,WAAA;AAE7B,MAAA;AACF,IAAM,MAAA,UAAA,GAAa,QAAQ,QAAS,CAAA,IAAA;AAAA,MAClC,CAAC,OAAY,KAAA,OAAA,CAAQ,GAAG,QAAS,EAAA,KAAM,UAAU,QAAS;AAAA,KAC5D;AAEA,IAAA,IACE,YAAY,EAAG,CAAA,QAAA,OACf,OAAQ,CAAA,mCAAA,EAAqC,GAAG,QAAS,EAAA;AAEzD,MAAA;AAEF,IAAA,MAAM,QAAW,GAAA;AAAA,MACf,GAAG,OAAA;AAAA,MACH,mCAAqC,EAAA;AAAA,KACvC;AAEA,IAAA,YAAA,CAAa,KAAK,YAAa,CAAA,SAAA,EAAW,IAAK,CAAA,SAAA,CAAU,QAAQ,CAAC,CAAA;AAElE,IAAA,YAAA,CAAa,IAAK,CAAA,aAAA;AAAA,MAChB,IAAI,YAAY,iBAAmB,EAAA;AAAA,QACjC,MAAQ,EAAA;AAAA,UACN,OAAS,EAAA,UAAA;AAAA,UACT,OAAS,EAAA;AAAA,SACX;AAAA,QACA,OAAS,EAAA;AAAA,OACV;AAAA,KACH;AAAA;AAGF,EAAO,OAAA;AAAA,IACL,KAAA;AAAA,IACA;AAAA,MACE,OAAS,EAAA;AAAA,QACP,MAAQ,EAAA;AAAA;AACV;AACF,GACF;AACF;AAEA,MAAM,mBAAA,GAAsB,cAAc,wBAAwB,CAAA;AAErD,MAAA,qBAAA,GAAwB,CACnC,YAAA,EACA,OACmB,KAAA;AACnB,EAAA,MAAM,QAAQ,UAAW,CAAA,YAAA,EAAc,EAAE,IAAA,EAAM,SAAS,CAAA;AACxD,EAAO,OAAA,OAAA,CAAQ,mBAAqB,EAAA,KAAA,EAAO,OAAO,CAAA;AACpD;AAEa,MAAA,iBAAA,GAAoB,CAAC,OAA4B,KAAA;AAC5D,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,UAAA,GAAa,CAAC,OAA0C,KAAA;AACnE,EAAM,MAAA,OAAA,GAA0B,OAAQ,CAAA,mBAAA,EAAqB,OAAO,CAAA;AAEpE,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,OAAQ,CAAA,KAAA;AAAA,MACZ;AAAA,KACF;AAAA;AAGF,EAAA,OAAO,kBAAkB,OAAO,CAAA;AAClC;AAEa,MAAA,iBAAA,GAAoB,CAAC,OAAqB,KAAA;AACrD,EAAA,MAAM,OAAU,GAAA,sBAAA;AAAA,IACd,mBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,OAAO,kBAAkB,OAAO,CAAA;AAClC","file":"useProduct.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { mergeProps, splitProps, untrack } from \"solid-js\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\n\nimport type { Product } from \"../types\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n product: Product;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductContext = ReturnType<typeof initializeProductContext>;\n\nfunction initializeProductContext(props: CreateContextOptions) {\n const [privateProps, publicProps] = splitProps(props, [\"root\"]);\n const state = mergeProps(publicProps, {});\n\n function updateSelectedVariant(variantId: string | number) {\n const product = untrack(() => state?.product);\n if (\n typeof product?.selected_or_first_available_variant === \"undefined\" ||\n typeof product === \"undefined\" ||\n typeof product?.variants === \"undefined\"\n )\n return;\n const newVariant = product.variants.find(\n (variant) => variant.id.toString() === variantId.toString(),\n );\n\n if (\n newVariant?.id.toString() ===\n product.selected_or_first_available_variant?.id.toString()\n )\n return;\n\n const newState = {\n ...product,\n selected_or_first_available_variant: newVariant,\n };\n\n privateProps.root.setAttribute(\"product\", JSON.stringify(newState));\n\n privateProps.root.dispatchEvent(\n new CustomEvent(\"variant-updated\", {\n detail: {\n variant: newVariant,\n product: newState,\n },\n bubbles: true,\n }),\n );\n }\n\n return [\n state,\n {\n variant: {\n update: updateSelectedVariant,\n },\n },\n ] as const;\n}\n\nconst ProductContextState = createContext(initializeProductContext);\n\nexport const provideProductContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ProductContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ProductContextState, props, element);\n};\n\nexport const useProductContext = (context: ProductContext) => {\n return context;\n};\n\nexport const useProduct = (element: HTMLElement & ICustomElement) => {\n const context: ProductContext = consume(ProductContextState, element);\n\n if (!context) {\n throw console.error(\n \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n );\n }\n\n return useProductContext(context);\n};\n\nexport const getProductContext = (element: Element) => {\n const context = getContextFromProvider<ProductContext>(\n ProductContextState,\n element,\n );\n return useProductContext(context);\n};\n"]}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import { createContext, provide, consume } from 'component-register';
|
|
2
|
-
import { splitProps, createEffect, mergeProps } from 'solid-js';
|
|
2
|
+
import { splitProps, createEffect, untrack, mergeProps } from 'solid-js';
|
|
3
3
|
import { getContextFromProvider } from '@brytdesigns/web-component-utils';
|
|
4
4
|
import { useProduct } from './useProduct.js';
|
|
5
5
|
|
|
6
6
|
function initializeProductOptionsContext(props) {
|
|
7
|
-
const [privateProps, publicProps] = splitProps(props, ["
|
|
8
|
-
const [context, methods] = useProduct(privateProps.
|
|
7
|
+
const [privateProps, publicProps] = splitProps(props, ["root"]);
|
|
8
|
+
const [context, methods] = useProduct(privateProps.root);
|
|
9
9
|
function updateSelectedOptions(options) {
|
|
10
|
-
privateProps.
|
|
11
|
-
"selected-options",
|
|
12
|
-
JSON.stringify(options)
|
|
13
|
-
);
|
|
10
|
+
privateProps.root.setAttribute("selected-options", JSON.stringify(options));
|
|
14
11
|
}
|
|
15
12
|
function updateSelectedOption(option, index) {
|
|
16
|
-
const
|
|
13
|
+
const current = untrack(() => publicProps.selectedOptions);
|
|
14
|
+
const options = [...current];
|
|
17
15
|
options[index] = option;
|
|
18
16
|
return updateSelectedOptions(options);
|
|
19
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useProductOptions.ts"],"names":["variant"],"mappings":";;;;;AAoBA,SAAS,gCAAgC,KAA6B,EAAA;AACpE,EAAM,MAAA,CAAC,cAAc,WAAW,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useProductOptions.ts"],"names":["variant"],"mappings":";;;;;AAoBA,SAAS,gCAAgC,KAA6B,EAAA;AACpE,EAAM,MAAA,CAAC,cAAc,WAAW,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,MAAM,CAAC,CAAA;AAC9D,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,UAAA,CAAW,aAAa,IAAI,CAAA;AAEvD,EAAA,SAAS,sBAAsB,OAAmB,EAAA;AAChD,IAAA,YAAA,CAAa,KAAK,YAAa,CAAA,kBAAA,EAAoB,IAAK,CAAA,SAAA,CAAU,OAAO,CAAC,CAAA;AAAA;AAG5E,EAAS,SAAA,oBAAA,CAAqB,QAAgB,KAAe,EAAA;AAC3D,IAAA,MAAM,OAAU,GAAA,OAAA,CAAQ,MAAM,WAAA,CAAY,eAAe,CAAA;AACzD,IAAM,MAAA,OAAA,GAAU,CAAC,GAAG,OAAO,CAAA;AAC3B,IAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AACjB,IAAA,OAAO,sBAAsB,OAAO,CAAA;AAAA;AAGtC,EAAA,YAAA,CAAa,MAAM;AACjB,IAAA,MAAM,UAAU,OAAQ,CAAA,OAAA,CAAQ,QAAS,CAAA,IAAA,CAAK,CAACA,QAAY,KAAA;AACzD,MAAA,OAAO,YAAY,eAAgB,CAAA,KAAA;AAAA,QAAM,CAAC,MAAA,KACxCA,QAAQ,CAAA,OAAA,CAAQ,SAAS,MAAM;AAAA,OACjC;AAAA,KACD,CAAA;AACD,IAAA,IAAI,CAAC,OAAS,EAAA;AACd,IAAA,IAAI,OAAQ,CAAA,EAAA,KAAO,OAAQ,CAAA,OAAA,CAAQ,mCAAoC,CAAA,EAAA;AACrE,MAAA;AACF,IAAQ,OAAA,CAAA,OAAA,CAAQ,MAAO,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,GAClC,CAAA;AAED,EAAO,OAAA;AAAA,IACL,KAAA;AAAA,IACA;AAAA,MACE,OAAS,EAAA;AAAA,QACP,MAAQ,EAAA,qBAAA;AAAA,QACR,YAAc,EAAA;AAAA;AAChB;AACF,GACF;AACF;AAEA,MAAM,0BAA6B,GAAA,aAAA;AAAA,EACjC;AACF,CAAA;AAEa,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,OAC0B,KAAA;AAC1B,EAAA,MAAM,QAAQ,UAAW,CAAA,YAAA,EAAc,EAAE,IAAA,EAAM,SAAS,CAAA;AACxD,EAAO,OAAA,OAAA,CAAQ,0BAA4B,EAAA,KAAA,EAAO,OAAO,CAAA;AAC3D;AAEa,MAAA,wBAAA,GAA2B,CAAC,OAAmC,KAAA;AAC1E,EAAO,OAAA,OAAA;AACT;AAEa,MAAA,iBAAA,GAAoB,CAAC,OAA0C,KAAA;AAC1E,EAAA,MAAM,OAAiC,GAAA,OAAA;AAAA,IACrC,0BAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,OAAQ,CAAA,KAAA;AAAA,MACZ;AAAA,KACF;AAAA;AAGF,EAAA,OAAO,yBAAyB,OAAO,CAAA;AACzC;AAEa,MAAA,wBAAA,GAA2B,CAAC,OAAqB,KAAA;AAC5D,EAAA,MAAM,OAAU,GAAA,sBAAA;AAAA,IACd,0BAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,OAAO,yBAAyB,OAAO,CAAA;AACzC","file":"useProductOptions.js","sourcesContent":["import {\n type ICustomElement,\n createContext,\n provide,\n consume,\n} from \"component-register\";\nimport { createEffect, mergeProps, splitProps, untrack } from \"solid-js\";\nimport { getContextFromProvider } from \"@brytdesigns/web-component-utils\";\n\nimport { useProduct } from \"./useProduct.js\";\n\ntype CreateContextOptions = {\n root: HTMLElement & ICustomElement;\n selectedOptions: string[];\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype ProductOptionsContext = ReturnType<typeof initializeProductOptionsContext>;\n\nfunction initializeProductOptionsContext(props: CreateContextOptions) {\n const [privateProps, publicProps] = splitProps(props, [\"root\"]);\n const [context, methods] = useProduct(privateProps.root);\n\n function updateSelectedOptions(options: string[]) {\n privateProps.root.setAttribute(\"selected-options\", JSON.stringify(options));\n }\n\n function updateSelectedOption(option: string, index: number) {\n const current = untrack(() => publicProps.selectedOptions);\n const options = [...current];\n options[index] = option;\n return updateSelectedOptions(options);\n }\n\n createEffect(() => {\n const variant = context.product.variants.find((variant) => {\n return publicProps.selectedOptions.every((option) =>\n variant.options.includes(option),\n );\n });\n if (!variant) return;\n if (variant.id === context.product.selected_or_first_available_variant.id)\n return;\n methods.variant.update(variant.id);\n });\n\n return [\n props,\n {\n options: {\n update: updateSelectedOptions,\n updateOption: updateSelectedOption,\n },\n },\n ] as const;\n}\n\nconst ProductOptionsContextState = createContext(\n initializeProductOptionsContext,\n);\n\nexport const provideProductOptionsContext = (\n initialState: Omit<CreateContextOptions, \"root\">,\n element: WalkableNode,\n): ProductOptionsContext => {\n const props = mergeProps(initialState, { root: element });\n return provide(ProductOptionsContextState, props, element);\n};\n\nexport const useProductOptionsContext = (context: ProductOptionsContext) => {\n return context;\n};\n\nexport const useProductOptions = (element: HTMLElement & ICustomElement) => {\n const context: ProductOptionsContext = consume(\n ProductOptionsContextState,\n element,\n );\n\n if (!context) {\n throw console.error(\n \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n );\n }\n\n return useProductOptionsContext(context);\n};\n\nexport const getProductOptionsContext = (element: Element) => {\n const context = getContextFromProvider<ProductOptionsContext>(\n ProductOptionsContextState,\n element,\n );\n return useProductOptionsContext(context);\n};\n"]}
|
package/dist/main/index.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ export declare const getProductContext: (element: Element) => readonly [
|
|
|
32
32
|
}
|
|
33
33
|
];
|
|
34
34
|
export type CreateContextOptions = {
|
|
35
|
-
|
|
35
|
+
root: HTMLElement & ICustomElement;
|
|
36
36
|
selectedOptions: string[];
|
|
37
37
|
};
|
|
38
38
|
export declare const useProductOptions: (element: HTMLElement & ICustomElement) => readonly [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brytdesigns/shopify-product-info-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "Headless web components used to render product information based on active product variants",
|
|
5
5
|
"main": "./dist/main/index.js",
|
|
6
6
|
"module": "./dist/main/index.js",
|