@gem-sdk/core 1.23.9 → 1.23.14
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/cjs/components/src/product/helpers/variant-presets.js +56 -0
- package/dist/cjs/graphql/queries/product-value-label.generated.js +11 -0
- package/dist/cjs/hooks/useInitialSwatchesOptions.js +111 -0
- package/dist/cjs/hooks/useProduct.js +1 -2
- package/dist/cjs/hooks/useSwatchesOptions.js +97 -2
- package/dist/cjs/index.js +2 -0
- package/dist/esm/components/src/product/helpers/variant-presets.js +54 -0
- package/dist/esm/graphql/queries/product-value-label.generated.js +9 -0
- package/dist/esm/hooks/useInitialSwatchesOptions.js +107 -0
- package/dist/esm/hooks/useProduct.js +1 -2
- package/dist/esm/hooks/useSwatchesOptions.js +97 -2
- package/dist/esm/index.js +1 -0
- package/dist/types/index.d.ts +23 -2
- package/package.json +1 -1
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const colorPreset = {
|
|
4
|
+
black: '#000000',
|
|
5
|
+
white: '#FFFFFF',
|
|
6
|
+
gray: '#808080',
|
|
7
|
+
red: '#FF0000',
|
|
8
|
+
blue: '#0000FF',
|
|
9
|
+
green: '#008000',
|
|
10
|
+
yellow: '#FFFF00',
|
|
11
|
+
orange: '#FFA500',
|
|
12
|
+
pink: '#FFC0CB',
|
|
13
|
+
purple: '#800080',
|
|
14
|
+
brown: '#A52A2A',
|
|
15
|
+
cyan: '#00FFFF',
|
|
16
|
+
magenta: '#FF00FF',
|
|
17
|
+
teal: '#008080',
|
|
18
|
+
navy: '#000080',
|
|
19
|
+
maroon: '#800000',
|
|
20
|
+
gold: '#FFD700',
|
|
21
|
+
silver: '#C0C0C0',
|
|
22
|
+
beige: '#F5F5DC',
|
|
23
|
+
ivory: '#FFFFF0',
|
|
24
|
+
lavender: '#E6E6FA',
|
|
25
|
+
indigo: '#4B0082',
|
|
26
|
+
coral: '#FF7F50',
|
|
27
|
+
mint: '#98FF98',
|
|
28
|
+
'sky blue': '#87CEEB',
|
|
29
|
+
salmon: '#FA8072',
|
|
30
|
+
olive: '#808000',
|
|
31
|
+
lilac: '#C8A2C8',
|
|
32
|
+
peach: '#FFDAB9',
|
|
33
|
+
turquoise: '#40E0D0',
|
|
34
|
+
ruby: '#E0115F',
|
|
35
|
+
bronze: '#CD7F32',
|
|
36
|
+
slate: '#708090',
|
|
37
|
+
charcoal: '#36454F',
|
|
38
|
+
sand: '#C2B280',
|
|
39
|
+
mauve: '#E0B0FF',
|
|
40
|
+
tangerine: '#FF4500',
|
|
41
|
+
'mint green': '#00FF99',
|
|
42
|
+
'forest green': '#228B22',
|
|
43
|
+
'ruby red': '#9B111E',
|
|
44
|
+
marigold: '#FFB928',
|
|
45
|
+
eggplant: '#990066',
|
|
46
|
+
'coral pink': '#F88379',
|
|
47
|
+
mustard: '#FFDB58',
|
|
48
|
+
'sky gray': '#B0C4DE',
|
|
49
|
+
'dusty rose': '#FF9BAE',
|
|
50
|
+
'olive green': '#556B2F',
|
|
51
|
+
coffee: '#6F4E37',
|
|
52
|
+
'lilac gray': '#C8A2C8',
|
|
53
|
+
'steel blue': '#4682B4'
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
exports.colorPreset = colorPreset;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var useSWR = require('swr');
|
|
6
|
+
var productValueLabel_generated = require('../graphql/queries/product-value-label.generated.js');
|
|
7
|
+
var variantPresets = require('../components/src/product/helpers/variant-presets.js');
|
|
8
|
+
var shop = require('./shop.js');
|
|
9
|
+
var useFetchHandle = require('./useFetchHandle.js');
|
|
10
|
+
var ShopContext = require('../contexts/ShopContext.js');
|
|
11
|
+
|
|
12
|
+
let swatchChange = false;
|
|
13
|
+
let colorChange = false;
|
|
14
|
+
const useInitialSwatchesOptions = (options)=>{
|
|
15
|
+
const fetcher = useFetchHandle.useFetchHandle();
|
|
16
|
+
const changeSwatches = ShopContext.useShopStore((s)=>s.changeSwatches);
|
|
17
|
+
const { swatches } = shop.useSwatches();
|
|
18
|
+
const { data: productOptionName } = useSWR([
|
|
19
|
+
'/query/productOptionName',
|
|
20
|
+
{}
|
|
21
|
+
], async ()=>fetchProductValueLabel(fetcher), {
|
|
22
|
+
revalidateOnMount: true
|
|
23
|
+
});
|
|
24
|
+
const swatchesTitleList = [];
|
|
25
|
+
swatches?.forEach((el)=>{
|
|
26
|
+
swatchesTitleList.push(el.optionTitle);
|
|
27
|
+
});
|
|
28
|
+
productOptionName?.productOptionName?.forEach((el)=>{
|
|
29
|
+
if (!swatchesTitleList.includes(el)) {
|
|
30
|
+
swatchChange = true;
|
|
31
|
+
swatches?.push({
|
|
32
|
+
optionTitle: el,
|
|
33
|
+
optionType: 'rectangle_list',
|
|
34
|
+
optionValues: []
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
if (!options) return [];
|
|
39
|
+
setDefaultSwatches(swatches, options);
|
|
40
|
+
if (swatches?.length && (swatchChange || colorChange)) {
|
|
41
|
+
window?.parent?.postMessage?.(JSON.stringify({
|
|
42
|
+
type: 'update-swatches',
|
|
43
|
+
swatches
|
|
44
|
+
}), '*');
|
|
45
|
+
changeSwatches(swatches);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const getColorDefault = (label, color)=>{
|
|
49
|
+
const colorByLabel = label ? variantPresets.colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
50
|
+
const colorArray = colorByLabel ? [
|
|
51
|
+
colorByLabel
|
|
52
|
+
] : [];
|
|
53
|
+
const firstColor = color?.[0];
|
|
54
|
+
if (!firstColor && colorArray.length) colorChange = true;
|
|
55
|
+
return firstColor ? [
|
|
56
|
+
firstColor
|
|
57
|
+
] : colorArray;
|
|
58
|
+
};
|
|
59
|
+
const getProductOptionsLabelByName = (options, name)=>{
|
|
60
|
+
const labels = [];
|
|
61
|
+
const optionByName = options.find((op)=>op.name === name);
|
|
62
|
+
optionByName?.values.forEach((val)=>{
|
|
63
|
+
labels.push(val.label ?? '');
|
|
64
|
+
});
|
|
65
|
+
return labels;
|
|
66
|
+
};
|
|
67
|
+
const getSwatchesOptionsLabel = (options)=>{
|
|
68
|
+
const labels = [];
|
|
69
|
+
options.forEach((op)=>{
|
|
70
|
+
labels.push(op.label ?? '');
|
|
71
|
+
return;
|
|
72
|
+
});
|
|
73
|
+
return labels;
|
|
74
|
+
};
|
|
75
|
+
const setDefaultSwatches = (swatches, options)=>{
|
|
76
|
+
if (swatches) {
|
|
77
|
+
swatches?.map((sw)=>{
|
|
78
|
+
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
79
|
+
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
80
|
+
productLabels.forEach((label)=>{
|
|
81
|
+
if (!swLabels.includes(label)) {
|
|
82
|
+
sw.optionValues.push({
|
|
83
|
+
label,
|
|
84
|
+
colors: getColorDefault(label),
|
|
85
|
+
imageUrl: ''
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
sw.optionValues.map((op)=>{
|
|
90
|
+
return {
|
|
91
|
+
...op,
|
|
92
|
+
colors: getColorDefault(op.label, op.colors)
|
|
93
|
+
};
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
return swatches;
|
|
98
|
+
};
|
|
99
|
+
const fetchProductValueLabel = async (fetcher)=>{
|
|
100
|
+
const initVariables = {};
|
|
101
|
+
const query = async (variables)=>{
|
|
102
|
+
const response = await fetcher([
|
|
103
|
+
productValueLabel_generated.ProductOptionNameDocument,
|
|
104
|
+
variables
|
|
105
|
+
]);
|
|
106
|
+
return response;
|
|
107
|
+
};
|
|
108
|
+
return query(initVariables);
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
exports.default = useInitialSwatchesOptions;
|
|
@@ -141,8 +141,7 @@ const useCurrentVariant = ()=>{
|
|
|
141
141
|
};
|
|
142
142
|
const useCurrentVariantInStock = ()=>{
|
|
143
143
|
const currentVariant = useCurrentVariant();
|
|
144
|
-
|
|
145
|
-
return isInStock;
|
|
144
|
+
return variant.checkInStock(currentVariant);
|
|
146
145
|
};
|
|
147
146
|
const useVariantOutStock = (optionId, optionValue)=>{
|
|
148
147
|
const { selectedOptions } = useSelectedOption();
|
|
@@ -2,7 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var useSWR = require('swr');
|
|
6
|
+
var productValueLabel_generated = require('../graphql/queries/product-value-label.generated.js');
|
|
7
|
+
var variantPresets = require('../components/src/product/helpers/variant-presets.js');
|
|
5
8
|
var shop = require('./shop.js');
|
|
9
|
+
var useFetchHandle = require('./useFetchHandle.js');
|
|
6
10
|
|
|
7
11
|
const initialSwatchOptionValue = {
|
|
8
12
|
label: '',
|
|
@@ -14,16 +18,35 @@ const initialGlobalSwatchesData = {
|
|
|
14
18
|
optionType: '',
|
|
15
19
|
optionValues: []
|
|
16
20
|
};
|
|
21
|
+
let swatchChange = false;
|
|
22
|
+
let colorChange = false;
|
|
17
23
|
const useSwatchesOptions = (options)=>{
|
|
24
|
+
const fetcher = useFetchHandle.useFetchHandle();
|
|
18
25
|
const { swatches } = shop.useSwatches();
|
|
26
|
+
const { data: productOptionName } = useSWR({}, async ()=>fetchProductValueLabel(fetcher), {});
|
|
27
|
+
const swatchesTitleList = [];
|
|
28
|
+
swatches?.forEach((el)=>{
|
|
29
|
+
swatchesTitleList.push(el.optionTitle);
|
|
30
|
+
});
|
|
31
|
+
productOptionName?.productOptionName?.forEach((el)=>{
|
|
32
|
+
if (!swatchesTitleList.includes(el)) {
|
|
33
|
+
swatchChange = true;
|
|
34
|
+
swatches?.push({
|
|
35
|
+
optionTitle: el,
|
|
36
|
+
optionType: 'rectangle_list',
|
|
37
|
+
optionValues: []
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
});
|
|
19
41
|
if (!options) return [];
|
|
20
|
-
|
|
42
|
+
setDefaultSwatches(swatches, options);
|
|
43
|
+
const result = options?.map((option)=>{
|
|
21
44
|
const swatchOption = swatches?.find((sw)=>sw?.optionTitle === option?.name) || {
|
|
22
45
|
...initialGlobalSwatchesData
|
|
23
46
|
};
|
|
24
47
|
return {
|
|
25
48
|
...option,
|
|
26
|
-
optionType: swatchOption ? swatchOption.optionType : '',
|
|
49
|
+
optionType: swatchOption && swatchOption.optionType ? swatchOption.optionType : 'rectangle_list',
|
|
27
50
|
values: option.values?.map((val)=>{
|
|
28
51
|
const swatchValue = swatchOption && swatchOption?.optionValues?.find((swatOp)=>swatOp?.label === val?.label) || {
|
|
29
52
|
...initialSwatchOptionValue
|
|
@@ -36,6 +59,78 @@ const useSwatchesOptions = (options)=>{
|
|
|
36
59
|
})
|
|
37
60
|
};
|
|
38
61
|
});
|
|
62
|
+
if (swatches?.length && (swatchChange || colorChange)) {
|
|
63
|
+
window?.parent?.postMessage?.(JSON.stringify({
|
|
64
|
+
type: 'update-swatches',
|
|
65
|
+
swatches
|
|
66
|
+
}), '*');
|
|
67
|
+
swatchChange = false;
|
|
68
|
+
colorChange = false;
|
|
69
|
+
return [];
|
|
70
|
+
}
|
|
71
|
+
return result;
|
|
72
|
+
};
|
|
73
|
+
const getColorDefault = (label, color)=>{
|
|
74
|
+
const colorByLabel = label ? variantPresets.colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
75
|
+
const colorArray = colorByLabel ? [
|
|
76
|
+
colorByLabel
|
|
77
|
+
] : [];
|
|
78
|
+
const firstColor = color?.[0];
|
|
79
|
+
if (!firstColor && colorArray.length) colorChange = true;
|
|
80
|
+
return firstColor ? [
|
|
81
|
+
firstColor
|
|
82
|
+
] : colorArray;
|
|
83
|
+
};
|
|
84
|
+
const getProductOptionsLabelByName = (options, name)=>{
|
|
85
|
+
const labels = [];
|
|
86
|
+
const optionByName = options.find((op)=>op.name === name);
|
|
87
|
+
optionByName?.values.forEach((val)=>{
|
|
88
|
+
labels.push(val.label ?? '');
|
|
89
|
+
});
|
|
90
|
+
return labels;
|
|
91
|
+
};
|
|
92
|
+
const getSwatchesOptionsLabel = (options)=>{
|
|
93
|
+
const labels = [];
|
|
94
|
+
options.forEach((op)=>{
|
|
95
|
+
labels.push(op.label ?? '');
|
|
96
|
+
return;
|
|
97
|
+
});
|
|
98
|
+
return labels;
|
|
99
|
+
};
|
|
100
|
+
const setDefaultSwatches = (swatches, options)=>{
|
|
101
|
+
if (swatches) {
|
|
102
|
+
swatches?.map((sw)=>{
|
|
103
|
+
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
104
|
+
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
105
|
+
productLabels.forEach((label)=>{
|
|
106
|
+
if (!swLabels.includes(label)) {
|
|
107
|
+
sw.optionValues.push({
|
|
108
|
+
label,
|
|
109
|
+
colors: getColorDefault(label),
|
|
110
|
+
imageUrl: ''
|
|
111
|
+
});
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
sw.optionValues.map((op)=>{
|
|
115
|
+
return {
|
|
116
|
+
...op,
|
|
117
|
+
colors: getColorDefault(op.label, op.colors)
|
|
118
|
+
};
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
return swatches;
|
|
123
|
+
};
|
|
124
|
+
const fetchProductValueLabel = async (fetcher)=>{
|
|
125
|
+
const initVariables = {};
|
|
126
|
+
const query = async (variables)=>{
|
|
127
|
+
const response = await fetcher([
|
|
128
|
+
productValueLabel_generated.ProductOptionNameDocument,
|
|
129
|
+
variables
|
|
130
|
+
]);
|
|
131
|
+
return response;
|
|
132
|
+
};
|
|
133
|
+
return query(initVariables);
|
|
39
134
|
};
|
|
40
135
|
|
|
41
136
|
exports.default = useSwatchesOptions;
|
package/dist/cjs/index.js
CHANGED
|
@@ -83,6 +83,7 @@ var useProduct = require('./hooks/useProduct.js');
|
|
|
83
83
|
var useProductList = require('./hooks/useProductList.js');
|
|
84
84
|
var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
|
|
85
85
|
var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
|
|
86
|
+
var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
|
|
86
87
|
var shop$1 = require('./types/shop.js');
|
|
87
88
|
var globalStyle = require('./types/global-style.js');
|
|
88
89
|
var getCollection = require('./helpers/queries/get-collection.js');
|
|
@@ -284,6 +285,7 @@ exports.useProductListSettings = useProductList.useProductListSettings;
|
|
|
284
285
|
exports.useProductListStyles = useProductList.useProductListStyles;
|
|
285
286
|
exports.useSuspenseFetch = useSuspenseFetch.default;
|
|
286
287
|
exports.useSwatchesOptions = useSwatchesOptions.default;
|
|
288
|
+
exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
|
|
287
289
|
exports.ShopType = shop$1;
|
|
288
290
|
exports.OptionNormalStyle = globalStyle.OptionNormalStyle;
|
|
289
291
|
exports.OptionSpecialStyle = globalStyle.OptionSpecialStyle;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
const colorPreset = {
|
|
2
|
+
black: '#000000',
|
|
3
|
+
white: '#FFFFFF',
|
|
4
|
+
gray: '#808080',
|
|
5
|
+
red: '#FF0000',
|
|
6
|
+
blue: '#0000FF',
|
|
7
|
+
green: '#008000',
|
|
8
|
+
yellow: '#FFFF00',
|
|
9
|
+
orange: '#FFA500',
|
|
10
|
+
pink: '#FFC0CB',
|
|
11
|
+
purple: '#800080',
|
|
12
|
+
brown: '#A52A2A',
|
|
13
|
+
cyan: '#00FFFF',
|
|
14
|
+
magenta: '#FF00FF',
|
|
15
|
+
teal: '#008080',
|
|
16
|
+
navy: '#000080',
|
|
17
|
+
maroon: '#800000',
|
|
18
|
+
gold: '#FFD700',
|
|
19
|
+
silver: '#C0C0C0',
|
|
20
|
+
beige: '#F5F5DC',
|
|
21
|
+
ivory: '#FFFFF0',
|
|
22
|
+
lavender: '#E6E6FA',
|
|
23
|
+
indigo: '#4B0082',
|
|
24
|
+
coral: '#FF7F50',
|
|
25
|
+
mint: '#98FF98',
|
|
26
|
+
'sky blue': '#87CEEB',
|
|
27
|
+
salmon: '#FA8072',
|
|
28
|
+
olive: '#808000',
|
|
29
|
+
lilac: '#C8A2C8',
|
|
30
|
+
peach: '#FFDAB9',
|
|
31
|
+
turquoise: '#40E0D0',
|
|
32
|
+
ruby: '#E0115F',
|
|
33
|
+
bronze: '#CD7F32',
|
|
34
|
+
slate: '#708090',
|
|
35
|
+
charcoal: '#36454F',
|
|
36
|
+
sand: '#C2B280',
|
|
37
|
+
mauve: '#E0B0FF',
|
|
38
|
+
tangerine: '#FF4500',
|
|
39
|
+
'mint green': '#00FF99',
|
|
40
|
+
'forest green': '#228B22',
|
|
41
|
+
'ruby red': '#9B111E',
|
|
42
|
+
marigold: '#FFB928',
|
|
43
|
+
eggplant: '#990066',
|
|
44
|
+
'coral pink': '#F88379',
|
|
45
|
+
mustard: '#FFDB58',
|
|
46
|
+
'sky gray': '#B0C4DE',
|
|
47
|
+
'dusty rose': '#FF9BAE',
|
|
48
|
+
'olive green': '#556B2F',
|
|
49
|
+
coffee: '#6F4E37',
|
|
50
|
+
'lilac gray': '#C8A2C8',
|
|
51
|
+
'steel blue': '#4682B4'
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export { colorPreset };
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import useSWR from 'swr';
|
|
2
|
+
import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
|
|
3
|
+
import { colorPreset } from '../components/src/product/helpers/variant-presets.js';
|
|
4
|
+
import { useSwatches } from './shop.js';
|
|
5
|
+
import { useFetchHandle } from './useFetchHandle.js';
|
|
6
|
+
import { useShopStore } from '../contexts/ShopContext.js';
|
|
7
|
+
|
|
8
|
+
let swatchChange = false;
|
|
9
|
+
let colorChange = false;
|
|
10
|
+
const useInitialSwatchesOptions = (options)=>{
|
|
11
|
+
const fetcher = useFetchHandle();
|
|
12
|
+
const changeSwatches = useShopStore((s)=>s.changeSwatches);
|
|
13
|
+
const { swatches } = useSwatches();
|
|
14
|
+
const { data: productOptionName } = useSWR([
|
|
15
|
+
'/query/productOptionName',
|
|
16
|
+
{}
|
|
17
|
+
], async ()=>fetchProductValueLabel(fetcher), {
|
|
18
|
+
revalidateOnMount: true
|
|
19
|
+
});
|
|
20
|
+
const swatchesTitleList = [];
|
|
21
|
+
swatches?.forEach((el)=>{
|
|
22
|
+
swatchesTitleList.push(el.optionTitle);
|
|
23
|
+
});
|
|
24
|
+
productOptionName?.productOptionName?.forEach((el)=>{
|
|
25
|
+
if (!swatchesTitleList.includes(el)) {
|
|
26
|
+
swatchChange = true;
|
|
27
|
+
swatches?.push({
|
|
28
|
+
optionTitle: el,
|
|
29
|
+
optionType: 'rectangle_list',
|
|
30
|
+
optionValues: []
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
if (!options) return [];
|
|
35
|
+
setDefaultSwatches(swatches, options);
|
|
36
|
+
if (swatches?.length && (swatchChange || colorChange)) {
|
|
37
|
+
window?.parent?.postMessage?.(JSON.stringify({
|
|
38
|
+
type: 'update-swatches',
|
|
39
|
+
swatches
|
|
40
|
+
}), '*');
|
|
41
|
+
changeSwatches(swatches);
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
const getColorDefault = (label, color)=>{
|
|
45
|
+
const colorByLabel = label ? colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
46
|
+
const colorArray = colorByLabel ? [
|
|
47
|
+
colorByLabel
|
|
48
|
+
] : [];
|
|
49
|
+
const firstColor = color?.[0];
|
|
50
|
+
if (!firstColor && colorArray.length) colorChange = true;
|
|
51
|
+
return firstColor ? [
|
|
52
|
+
firstColor
|
|
53
|
+
] : colorArray;
|
|
54
|
+
};
|
|
55
|
+
const getProductOptionsLabelByName = (options, name)=>{
|
|
56
|
+
const labels = [];
|
|
57
|
+
const optionByName = options.find((op)=>op.name === name);
|
|
58
|
+
optionByName?.values.forEach((val)=>{
|
|
59
|
+
labels.push(val.label ?? '');
|
|
60
|
+
});
|
|
61
|
+
return labels;
|
|
62
|
+
};
|
|
63
|
+
const getSwatchesOptionsLabel = (options)=>{
|
|
64
|
+
const labels = [];
|
|
65
|
+
options.forEach((op)=>{
|
|
66
|
+
labels.push(op.label ?? '');
|
|
67
|
+
return;
|
|
68
|
+
});
|
|
69
|
+
return labels;
|
|
70
|
+
};
|
|
71
|
+
const setDefaultSwatches = (swatches, options)=>{
|
|
72
|
+
if (swatches) {
|
|
73
|
+
swatches?.map((sw)=>{
|
|
74
|
+
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
75
|
+
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
76
|
+
productLabels.forEach((label)=>{
|
|
77
|
+
if (!swLabels.includes(label)) {
|
|
78
|
+
sw.optionValues.push({
|
|
79
|
+
label,
|
|
80
|
+
colors: getColorDefault(label),
|
|
81
|
+
imageUrl: ''
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
sw.optionValues.map((op)=>{
|
|
86
|
+
return {
|
|
87
|
+
...op,
|
|
88
|
+
colors: getColorDefault(op.label, op.colors)
|
|
89
|
+
};
|
|
90
|
+
});
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
return swatches;
|
|
94
|
+
};
|
|
95
|
+
const fetchProductValueLabel = async (fetcher)=>{
|
|
96
|
+
const initVariables = {};
|
|
97
|
+
const query = async (variables)=>{
|
|
98
|
+
const response = await fetcher([
|
|
99
|
+
ProductOptionNameDocument,
|
|
100
|
+
variables
|
|
101
|
+
]);
|
|
102
|
+
return response;
|
|
103
|
+
};
|
|
104
|
+
return query(initVariables);
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export { useInitialSwatchesOptions as default };
|
|
@@ -139,8 +139,7 @@ const useCurrentVariant = ()=>{
|
|
|
139
139
|
};
|
|
140
140
|
const useCurrentVariantInStock = ()=>{
|
|
141
141
|
const currentVariant = useCurrentVariant();
|
|
142
|
-
|
|
143
|
-
return isInStock;
|
|
142
|
+
return checkInStock(currentVariant);
|
|
144
143
|
};
|
|
145
144
|
const useVariantOutStock = (optionId, optionValue)=>{
|
|
146
145
|
const { selectedOptions } = useSelectedOption();
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
import useSWR from 'swr';
|
|
2
|
+
import { ProductOptionNameDocument } from '../graphql/queries/product-value-label.generated.js';
|
|
3
|
+
import { colorPreset } from '../components/src/product/helpers/variant-presets.js';
|
|
1
4
|
import { useSwatches } from './shop.js';
|
|
5
|
+
import { useFetchHandle } from './useFetchHandle.js';
|
|
2
6
|
|
|
3
7
|
const initialSwatchOptionValue = {
|
|
4
8
|
label: '',
|
|
@@ -10,16 +14,35 @@ const initialGlobalSwatchesData = {
|
|
|
10
14
|
optionType: '',
|
|
11
15
|
optionValues: []
|
|
12
16
|
};
|
|
17
|
+
let swatchChange = false;
|
|
18
|
+
let colorChange = false;
|
|
13
19
|
const useSwatchesOptions = (options)=>{
|
|
20
|
+
const fetcher = useFetchHandle();
|
|
14
21
|
const { swatches } = useSwatches();
|
|
22
|
+
const { data: productOptionName } = useSWR({}, async ()=>fetchProductValueLabel(fetcher), {});
|
|
23
|
+
const swatchesTitleList = [];
|
|
24
|
+
swatches?.forEach((el)=>{
|
|
25
|
+
swatchesTitleList.push(el.optionTitle);
|
|
26
|
+
});
|
|
27
|
+
productOptionName?.productOptionName?.forEach((el)=>{
|
|
28
|
+
if (!swatchesTitleList.includes(el)) {
|
|
29
|
+
swatchChange = true;
|
|
30
|
+
swatches?.push({
|
|
31
|
+
optionTitle: el,
|
|
32
|
+
optionType: 'rectangle_list',
|
|
33
|
+
optionValues: []
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
});
|
|
15
37
|
if (!options) return [];
|
|
16
|
-
|
|
38
|
+
setDefaultSwatches(swatches, options);
|
|
39
|
+
const result = options?.map((option)=>{
|
|
17
40
|
const swatchOption = swatches?.find((sw)=>sw?.optionTitle === option?.name) || {
|
|
18
41
|
...initialGlobalSwatchesData
|
|
19
42
|
};
|
|
20
43
|
return {
|
|
21
44
|
...option,
|
|
22
|
-
optionType: swatchOption ? swatchOption.optionType : '',
|
|
45
|
+
optionType: swatchOption && swatchOption.optionType ? swatchOption.optionType : 'rectangle_list',
|
|
23
46
|
values: option.values?.map((val)=>{
|
|
24
47
|
const swatchValue = swatchOption && swatchOption?.optionValues?.find((swatOp)=>swatOp?.label === val?.label) || {
|
|
25
48
|
...initialSwatchOptionValue
|
|
@@ -32,6 +55,78 @@ const useSwatchesOptions = (options)=>{
|
|
|
32
55
|
})
|
|
33
56
|
};
|
|
34
57
|
});
|
|
58
|
+
if (swatches?.length && (swatchChange || colorChange)) {
|
|
59
|
+
window?.parent?.postMessage?.(JSON.stringify({
|
|
60
|
+
type: 'update-swatches',
|
|
61
|
+
swatches
|
|
62
|
+
}), '*');
|
|
63
|
+
swatchChange = false;
|
|
64
|
+
colorChange = false;
|
|
65
|
+
return [];
|
|
66
|
+
}
|
|
67
|
+
return result;
|
|
68
|
+
};
|
|
69
|
+
const getColorDefault = (label, color)=>{
|
|
70
|
+
const colorByLabel = label ? colorPreset[label.toLocaleLowerCase()] : undefined;
|
|
71
|
+
const colorArray = colorByLabel ? [
|
|
72
|
+
colorByLabel
|
|
73
|
+
] : [];
|
|
74
|
+
const firstColor = color?.[0];
|
|
75
|
+
if (!firstColor && colorArray.length) colorChange = true;
|
|
76
|
+
return firstColor ? [
|
|
77
|
+
firstColor
|
|
78
|
+
] : colorArray;
|
|
79
|
+
};
|
|
80
|
+
const getProductOptionsLabelByName = (options, name)=>{
|
|
81
|
+
const labels = [];
|
|
82
|
+
const optionByName = options.find((op)=>op.name === name);
|
|
83
|
+
optionByName?.values.forEach((val)=>{
|
|
84
|
+
labels.push(val.label ?? '');
|
|
85
|
+
});
|
|
86
|
+
return labels;
|
|
87
|
+
};
|
|
88
|
+
const getSwatchesOptionsLabel = (options)=>{
|
|
89
|
+
const labels = [];
|
|
90
|
+
options.forEach((op)=>{
|
|
91
|
+
labels.push(op.label ?? '');
|
|
92
|
+
return;
|
|
93
|
+
});
|
|
94
|
+
return labels;
|
|
95
|
+
};
|
|
96
|
+
const setDefaultSwatches = (swatches, options)=>{
|
|
97
|
+
if (swatches) {
|
|
98
|
+
swatches?.map((sw)=>{
|
|
99
|
+
const productLabels = getProductOptionsLabelByName(options, sw.optionTitle);
|
|
100
|
+
const swLabels = getSwatchesOptionsLabel(sw.optionValues);
|
|
101
|
+
productLabels.forEach((label)=>{
|
|
102
|
+
if (!swLabels.includes(label)) {
|
|
103
|
+
sw.optionValues.push({
|
|
104
|
+
label,
|
|
105
|
+
colors: getColorDefault(label),
|
|
106
|
+
imageUrl: ''
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
sw.optionValues.map((op)=>{
|
|
111
|
+
return {
|
|
112
|
+
...op,
|
|
113
|
+
colors: getColorDefault(op.label, op.colors)
|
|
114
|
+
};
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
return swatches;
|
|
119
|
+
};
|
|
120
|
+
const fetchProductValueLabel = async (fetcher)=>{
|
|
121
|
+
const initVariables = {};
|
|
122
|
+
const query = async (variables)=>{
|
|
123
|
+
const response = await fetcher([
|
|
124
|
+
ProductOptionNameDocument,
|
|
125
|
+
variables
|
|
126
|
+
]);
|
|
127
|
+
return response;
|
|
128
|
+
};
|
|
129
|
+
return query(initVariables);
|
|
35
130
|
};
|
|
36
131
|
|
|
37
132
|
export { useSwatchesOptions as default };
|
package/dist/esm/index.js
CHANGED
|
@@ -84,6 +84,7 @@ export { useCheckAvailableVariantInStock, useCurrentVariant, useCurrentVariantIn
|
|
|
84
84
|
export { useProductList, useProductListProducts, useProductListSettings, useProductListStyles } from './hooks/useProductList.js';
|
|
85
85
|
export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
|
|
86
86
|
export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
|
|
87
|
+
export { default as useInitialSwatchesOptions } from './hooks/useInitialSwatchesOptions.js';
|
|
87
88
|
import * as shop from './types/shop.js';
|
|
88
89
|
export { shop as ShopType };
|
|
89
90
|
export { OptionNormalStyle, OptionSpecialStyle } from './types/global-style.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9730,7 +9730,28 @@ declare const useSuspenseFetch: <T>(key: string | any[], promise: () => Promise<
|
|
|
9730
9730
|
data: T;
|
|
9731
9731
|
};
|
|
9732
9732
|
|
|
9733
|
-
declare const useSwatchesOptions: (options?: ProductOption[]) =>
|
|
9733
|
+
declare const useSwatchesOptions: (options?: ProductOption[]) => {
|
|
9734
|
+
optionType: string;
|
|
9735
|
+
values: {
|
|
9736
|
+
colors: string[];
|
|
9737
|
+
imageUrl: string;
|
|
9738
|
+
baseID?: Maybe<string>;
|
|
9739
|
+
createdAt?: any;
|
|
9740
|
+
deletedAt?: any;
|
|
9741
|
+
id: string;
|
|
9742
|
+
isDefault?: Maybe<boolean>;
|
|
9743
|
+
label?: Maybe<string>;
|
|
9744
|
+
platform?: Maybe<ProductOptionValuePlatform>;
|
|
9745
|
+
position?: Maybe<number>;
|
|
9746
|
+
sortOrder?: Maybe<number>;
|
|
9747
|
+
updatedAt?: any;
|
|
9748
|
+
}[];
|
|
9749
|
+
id: string;
|
|
9750
|
+
name?: Maybe<string>;
|
|
9751
|
+
position?: Maybe<number>;
|
|
9752
|
+
}[];
|
|
9753
|
+
|
|
9754
|
+
declare const useInitialSwatchesOptions: (options?: ProductOption[]) => never[] | undefined;
|
|
9734
9755
|
|
|
9735
9756
|
type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' | 'handle' | 'isMobile' | 'sectionPosition'> & {
|
|
9736
9757
|
pageSections?: Maybe<Array<Maybe<Pick<PublishedPageSection, 'cid' | 'component' | 'id'>>>>;
|
|
@@ -9743,4 +9764,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
|
|
|
9743
9764
|
|
|
9744
9765
|
declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
|
|
9745
9766
|
|
|
9746
|
-
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|
|
9767
|
+
export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageContext, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
|