@gem-sdk/components 8.0.0-staging.14 → 8.0.0-staging.18
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/product/components/product-variants/OptionVariantsNewFormat.liquid.js +41 -0
- package/dist/cjs/product/components/product-variants/OptionVariantsOldFormat.liquid.js +66 -0
- package/dist/cjs/product/components/product-variants/ProductVariants.liquid.js +25 -77
- package/dist/cjs/product/components/product-variants/common/base/styles.js +1 -1
- package/dist/cjs/product/components/product-variants/common/const.js +1 -0
- package/dist/cjs/product/components/product-variants/common/dropdown/styles.js +1 -1
- package/dist/cjs/product/components/product-variants/components/color/color.liquid.js +3 -3
- package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.js +1 -1
- package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js +3 -3
- package/dist/cjs/text/components/Text.liquid.js +3 -4
- package/dist/esm/product/components/product-variants/OptionVariantsNewFormat.liquid.js +41 -0
- package/dist/esm/product/components/product-variants/OptionVariantsOldFormat.liquid.js +66 -0
- package/dist/esm/product/components/product-variants/ProductVariants.liquid.js +28 -80
- package/dist/esm/product/components/product-variants/common/base/styles.js +1 -1
- package/dist/esm/product/components/product-variants/common/const.js +1 -0
- package/dist/esm/product/components/product-variants/common/dropdown/styles.js +1 -1
- package/dist/esm/product/components/product-variants/components/color/color.liquid.js +3 -3
- package/dist/esm/product/components/product-variants/components/dropdown-swatches/Dropdown.js +1 -1
- package/dist/esm/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js +5 -5
- package/dist/esm/text/components/Text.liquid.js +9 -10
- package/package.json +2 -2
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),_const=require("./common/const.js");const renderOptionValuesNewFormatSwatches=e=>{let{renderVariantItem:s,variantPresetsLiquid:i}=e;return core.template`
|
|
2
|
+
${system.Liquid("{%- assign optionRendered = false -%}")}
|
|
3
|
+
${system.Liquid("{%- assign swatches = shop.metafields.GEMPAGES.swatchesJSONFormat.value -%}")}
|
|
4
|
+
|
|
5
|
+
${system.Liquid(`{% for swatch in swatches %}
|
|
6
|
+
{%- assign optionTitle = swatch.optionTitle -%}
|
|
7
|
+
{%- assign optionType = swatch.optionType -%}
|
|
8
|
+
{%- assign labelsString = "" -%}
|
|
9
|
+
{%- assign colorArraysString = "" -%}
|
|
10
|
+
{%- assign imageUrlsString = "" -%}
|
|
11
|
+
|
|
12
|
+
{% for optionValue in swatch.optionValues %}
|
|
13
|
+
{%- assign labelsString = labelsString | append: optionValue.label | append: '${_const.OPTION_VALUES_DELIMITER}' -%}
|
|
14
|
+
{%- assign colorsJoined = optionValue.colors | join: '${_const.OPTION_VALUES_DELIMITER}' -%}
|
|
15
|
+
{%- assign colorArraysString = colorArraysString | append: colorsJoined | append: '${_const.OPTION_VALUES_DELIMITER}' -%}
|
|
16
|
+
{%- assign imageUrlsString = imageUrlsString | append: optionValue.imageUrl | append: '${_const.OPTION_VALUES_DELIMITER}' -%}
|
|
17
|
+
{% endfor %}
|
|
18
|
+
|
|
19
|
+
{%- assign labels = labelsString | split: '${_const.OPTION_VALUES_DELIMITER}' | slice: 0, labelsString.size -%}
|
|
20
|
+
{%- assign colorStrings = colorArraysString | split: '${_const.OPTION_VALUES_DELIMITER}' | slice: 0, colorArraysString.size -%}
|
|
21
|
+
{%- assign imageUrls = imageUrlsString | split: '${_const.OPTION_VALUES_DELIMITER}' | slice: 0, imageUrlsString.size -%}
|
|
22
|
+
|
|
23
|
+
{% if optionTitle == option.name %}
|
|
24
|
+
{%- assign variantPresetString = "${i}" -%}
|
|
25
|
+
{%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
|
|
26
|
+
{%- assign items = variantPresetString | split: '($2)' -%}
|
|
27
|
+
{%- assign type = 'dropdown' -%}
|
|
28
|
+
|
|
29
|
+
{% for item in items %}
|
|
30
|
+
{%- assign itemPreset = item | split: '($1)' -%}
|
|
31
|
+
{% if itemPreset[0] == optionName %}{%- assign type = itemPreset[1] -%}{% endif %}
|
|
32
|
+
{% if itemPreset[0] == 'base' %}{%- assign type = itemPreset[1] -%}{% endif %}
|
|
33
|
+
{% endfor %}
|
|
34
|
+
{%- assign optionRendered = true -%}
|
|
35
|
+
|
|
36
|
+
${s({showDropdown:!0})}
|
|
37
|
+
{% endif %}
|
|
38
|
+
{% endfor %}`)}
|
|
39
|
+
|
|
40
|
+
${system.LiquidIf("optionRendered == false",s({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
41
|
+
`};exports.renderOptionValuesNewFormatSwatches=renderOptionValuesNewFormatSwatches;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";var system=require("@gem-sdk/system"),core=require("@gem-sdk/core");const renderOptionValuesOld=s=>{let{renderVariantItem:e,variantPresetsLiquid:i}=s;return core.template`
|
|
2
|
+
${system.Liquid("{%- assign optionRendered = false -%}")}
|
|
3
|
+
${system.Liquid("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
|
|
4
|
+
${system.Liquid("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
|
|
5
|
+
|
|
6
|
+
${system.LiquidFor("swatchesItem in swatchesItems",`
|
|
7
|
+
${system.Liquid('{%- assign colorArraysString = "" -%}')}
|
|
8
|
+
${system.Liquid('{%- assign labelsString = "" -%}')}
|
|
9
|
+
${system.Liquid('{%- assign imageUrlsString = "" -%}')}
|
|
10
|
+
${system.Liquid("{%- assign attrItems = swatchesItem | split: '($3)' -%}")}
|
|
11
|
+
|
|
12
|
+
${system.LiquidFor("attrItem in attrItems",`
|
|
13
|
+
${system.Liquid("{%- assign attrs = attrItem | split: '($2)' -%}")}
|
|
14
|
+
${system.Liquid("{%- assign optionKey = attrs[0] -%}")}
|
|
15
|
+
${system.Liquid("{%- assign optionValue = attrs[1] -%}")}
|
|
16
|
+
${system.Liquid(`
|
|
17
|
+
{% if optionKey == 'optionTitle' %}
|
|
18
|
+
{% assign optionTitle = optionValue %}
|
|
19
|
+
{% elsif optionKey == 'optionType' %}
|
|
20
|
+
{% assign optionType = optionValue %}
|
|
21
|
+
{% endif %}
|
|
22
|
+
`)}
|
|
23
|
+
|
|
24
|
+
${system.LiquidIf('optionKey == "optionValues"',`
|
|
25
|
+
${system.Liquid("{%- assign opValueItems = optionValue | split: '($4)' -%}")}
|
|
26
|
+
${system.LiquidFor("opValueItem in opValueItems",`
|
|
27
|
+
${system.Liquid("{%- assign opValueItemAttrs = opValueItem | split: '($6)' -%}")}
|
|
28
|
+
${system.LiquidFor("opValueItemAttr in opValueItemAttrs",`
|
|
29
|
+
${system.Liquid("{%- assign attrs = opValueItemAttr | split: '($5)' -%}")}
|
|
30
|
+
${system.Liquid("{%- assign opValueItemKey = attrs[0] -%}")}
|
|
31
|
+
${system.Liquid("{%- assign opValueItemValue = attrs[1] -%}")}
|
|
32
|
+
|
|
33
|
+
${system.LiquidIf('opValueItemKey == "label"',`${system.Liquid("{%- assign labelsString = labelsString | append: opValueItemValue -%}")}
|
|
34
|
+
${system.Liquid('{%- assign labelsString = labelsString | append: "($8)" -%}')}`)}
|
|
35
|
+
|
|
36
|
+
${system.LiquidIf('opValueItemKey == "colors"',`${system.Liquid("{%- assign colorArraysString = colorArraysString | append: opValueItemValue -%}")}
|
|
37
|
+
${system.Liquid('{%- assign colorArraysString = colorArraysString | append: "($8)" -%}')}`)}
|
|
38
|
+
|
|
39
|
+
${system.LiquidIf('opValueItemKey == "imageUrl"',`${system.Liquid("{%- assign imageUrlsString = imageUrlsString | append: opValueItemValue -%}")}
|
|
40
|
+
${system.Liquid('{%- assign imageUrlsString = imageUrlsString | append: "($8)" -%}')}`)}
|
|
41
|
+
`)}
|
|
42
|
+
`)}
|
|
43
|
+
`)}
|
|
44
|
+
`)}
|
|
45
|
+
|
|
46
|
+
${system.Liquid("{%- assign labels = labelsString | split: '($8)' -%}")}
|
|
47
|
+
${system.Liquid("{%- assign colorStrings = colorArraysString | split: '($8)' -%}")}
|
|
48
|
+
${system.Liquid("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
|
|
49
|
+
|
|
50
|
+
${system.LiquidIf("optionTitle == option.name",`
|
|
51
|
+
${system.Liquid(`{%- assign variantPresetString = "${i}" -%}`)}
|
|
52
|
+
${system.Liquid('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
|
|
53
|
+
${system.Liquid("{%- assign items = variantPresetString | split:'($2)' -%}")}
|
|
54
|
+
${system.Liquid("{%- assign type = 'dropdown' -%}")}
|
|
55
|
+
${system.LiquidFor("item in items",`
|
|
56
|
+
${system.Liquid("{%- assign itemPreset = item | split:'($1)' -%}")}
|
|
57
|
+
${system.LiquidIf("itemPreset[0] == optionName",system.Liquid("{%- assign type = itemPreset[1] -%}"))}
|
|
58
|
+
${system.LiquidIf('itemPreset[0] == "base"',system.Liquid("{%- assign type = itemPreset[1] -%}"))}
|
|
59
|
+
`)}
|
|
60
|
+
${system.Liquid("{%- assign optionRendered = true -%}")}
|
|
61
|
+
${e({showDropdown:!0})}
|
|
62
|
+
`)}
|
|
63
|
+
`)}
|
|
64
|
+
|
|
65
|
+
${system.LiquidIf("optionRendered == false",e({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
66
|
+
`};exports.renderOptionValuesOld=renderOptionValuesOld;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../../text/components/Text.liquid.js"),index_liquid=require("./components/variants/index.liquid.js"),Dropdown_liquid=require("./components/dropdown-swatches/Dropdown.liquid.js"),DropdownGroup_liquid=require("./components/dropdown-group/DropdownGroup.liquid.js"),helpers=require("../../../helpers.js"),mappingVariantStyles=require("./utils/mappingVariantStyles.js"),system=require("@gem-sdk/system"),getAttr=require("./common/main/getAttr.js"),styles=require("./common/main/styles.js"),classes=require("./common/main/classes.js"),getData=require("./common/main/getData.js"),classes$1=require("./common/variants/classes.js"),_function=require("../../helpers/function.js"),styles$1=require("./common/variants/styles.js");const DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=e=>{let{builderProps:
|
|
2
|
-
|
|
3
|
-
${system.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../../text/components/Text.liquid.js"),index_liquid=require("./components/variants/index.liquid.js"),Dropdown_liquid=require("./components/dropdown-swatches/Dropdown.liquid.js"),DropdownGroup_liquid=require("./components/dropdown-group/DropdownGroup.liquid.js"),helpers=require("../../../helpers.js"),mappingVariantStyles=require("./utils/mappingVariantStyles.js"),system=require("@gem-sdk/system"),getAttr=require("./common/main/getAttr.js"),styles=require("./common/main/styles.js"),classes=require("./common/main/classes.js"),getData=require("./common/main/getData.js"),classes$1=require("./common/variants/classes.js"),_function=require("../../helpers/function.js"),styles$1=require("./common/variants/styles.js"),OptionVariantsNewFormat_liquid=require("./OptionVariantsNewFormat.liquid.js"),OptionVariantsOldFormat_liquid=require("./OptionVariantsOldFormat.liquid.js");const DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=e=>{let{builderProps:t,styles:s,setting:i,advanced:a}=e,{align:o,swatchItemWidth:n,dropdownItemWidth:r,swatchSpacing:l,optionTypo:p,marginBottom:d}=s??{},{label:u,optionType:m,showAsSwatches:c,layout:y,hasPreSelected:v}=i??{},g=a?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:_}=t??{},f="groupOption"===m,q=()=>{let e={};return core.DEVICES.forEach(t=>{let s=core.getResponsiveValueByScreen(n,t);e[t]="auto"===s}),e},$=()=>{let e={};return core.DEVICES.forEach(t=>{e[t]=r?.[t]==="fill"}),e},h=i?.variantPresets?mappingVariantStyles.mappingVariantStyles(i?.variantPresets,s):[],S=h?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),w={...i,variantPresetsOptionType:S},L=e=>{let t={"'":"'",'"':"""},s=e;for(let i in t)e.indexOf(i)>=0&&(s=s.replaceAll(i,t[i]));return s},j=()=>i?.variantPresets?.map(e=>`${L(e.optionName)}($2)${e.optionType}`).join("($1)"),O=()=>i?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),V=({showDropdown:e,isRenderDefault:t,typeOfOption:i})=>core.template`
|
|
2
|
+
${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:_,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:v?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:v?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...s,...w,swatchAutoWidth:q(),optionTypo:p,isRenderDefault:t}))}
|
|
3
|
+
${system.LiquidIf(e?'type == "dropdown"':"false",Dropdown_liquid.default({...s,...w,swatchAutoWidth:$(),optionTypo:p}))}`,D=i?.variantPresets?.map(e=>({name:L(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),A={renderVariantItem:V,variantPresetsLiquid:D??""},b=system.createClass(classes.getVariantOptionGroupClass(o)),E=system.createStyle(styles.getVariantOptionGroupStyle(l,l)),P=getData.getTextVariantTitleData(e,"Liquid"),x=system.createClass(classes$1.getWrapVariantOptionClass(y,o)),N=()=>core.template`
|
|
4
|
+
${system.Liquid(`{%- assign presets = "${j()}" | split: '($1)' -%}`)}
|
|
5
|
+
${system.Liquid(`{% assign hiddenPresetOptions = "${O()}" | split: ',' %}`)}
|
|
4
6
|
|
|
5
7
|
${system.Liquid(`{% assign all_option_names = options | map: 'name' %}
|
|
6
8
|
{% assign filtered_options_string = '' %}
|
|
@@ -30,7 +32,7 @@
|
|
|
30
32
|
${system.LiquidFor("option in options",`
|
|
31
33
|
<div
|
|
32
34
|
option-name="{{option.name | escape}}"
|
|
33
|
-
class="${
|
|
35
|
+
class="${x} ${system.LiquidIf("hiddenPresetOptions contains option.name","gp-hidden")}"
|
|
34
36
|
style="${_function.getStyleOfObject(styles$1.getMarginBottomStyle(d))}${system.Liquid("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
|
|
35
37
|
>
|
|
36
38
|
${system.Liquid("{%- assign showVariantClass = 'variant-display' -%}")}
|
|
@@ -39,11 +41,11 @@
|
|
|
39
41
|
${system.Liquid("{%- assign presetDetail = preset | split: '($2)' -%}")}
|
|
40
42
|
${system.LiquidIf("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${system.Liquid("{%- assign showVariantClass = '' -%}")} ${system.Liquid("{%- break -%}")}`)}
|
|
41
43
|
`)}
|
|
42
|
-
${system.If(u,Text_liquid.default(
|
|
44
|
+
${system.If(u,Text_liquid.default(P)," ")}
|
|
43
45
|
<div
|
|
44
46
|
variant-option-name="{{option.name | escape}}"
|
|
45
|
-
class="${
|
|
46
|
-
style="${_function.getStyleOfObject(
|
|
47
|
+
class="${b}"
|
|
48
|
+
style="${_function.getStyleOfObject(E)}"
|
|
47
49
|
>
|
|
48
50
|
${system.Liquid("{%- assign values = option.values -%}")}
|
|
49
51
|
${system.Liquid("{%- assign rootForloop = forloop.index0 -%}")}
|
|
@@ -56,78 +58,24 @@
|
|
|
56
58
|
{%- assign selectedValue = variant.option3 -%}
|
|
57
59
|
{%- endif -%}
|
|
58
60
|
`)}
|
|
59
|
-
${system.If(!
|
|
60
|
-
${system.If(c,
|
|
61
|
+
${system.If(!v,system.Liquid("{%- assign selectedValue = null -%}"),"")}
|
|
62
|
+
${system.If(c,T(),V({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
61
63
|
</div>
|
|
62
64
|
</div>`)}
|
|
63
|
-
`,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
${system.LiquidFor("swatchesItem in swatchesItems",`
|
|
69
|
-
${system.Liquid('{%- assign colorArraysString = "" -%}')}
|
|
70
|
-
${system.Liquid('{%- assign labelsString = "" -%}')}
|
|
71
|
-
${system.Liquid('{%- assign imageUrlsString = "" -%}')}
|
|
72
|
-
${system.Liquid("{%- assign attrItems = swatchesItem | split: '($3)' -%}")}
|
|
73
|
-
|
|
74
|
-
${system.LiquidFor("attrItem in attrItems",`${system.Liquid("{%- assign attrs = attrItem | split: '($2)' -%}")}
|
|
75
|
-
${system.Liquid("{%- assign optionKey = attrs[0] -%}")}
|
|
76
|
-
${system.Liquid("{%- assign optionValue = attrs[1] -%}")}
|
|
77
|
-
${system.Liquid(`
|
|
78
|
-
{% if optionKey == 'optionTitle' %}
|
|
79
|
-
{% assign optionTitle = optionValue %}
|
|
80
|
-
{% elsif optionKey == 'optionType' %}
|
|
81
|
-
{% assign optionType = optionValue %}
|
|
82
|
-
{% endif %}
|
|
83
|
-
`)}
|
|
84
|
-
|
|
85
|
-
${system.LiquidIf("optionKey == 'optionValues'",`${system.Liquid("{%- assign opValueItems = optionValue | split: '($4)' -%}")}
|
|
86
|
-
${system.LiquidFor("opValueItem in opValueItems",`${system.Liquid("{%- assign opValueItemAttrs = opValueItem | split: '($6)' -%}")}
|
|
87
|
-
${system.LiquidFor("opValueItemAttr in opValueItemAttrs",`${system.Liquid("{%- assign attrs = opValueItemAttr | split: '($5)' -%}")}
|
|
88
|
-
${system.Liquid("{%- assign opValueItemKey = attrs[0] -%}")}
|
|
89
|
-
${system.Liquid("{%- assign opValueItemValue = attrs[1] -%}")}
|
|
90
|
-
|
|
91
|
-
${system.LiquidIf("opValueItemKey == 'label'",`${system.Liquid("{%- assign labelsString = labelsString | append: opValueItemValue -%}")}${system.Liquid('{%- assign labelsString = labelsString | append: "($8)" -%}')}`)}
|
|
92
|
-
|
|
93
|
-
${system.LiquidIf("opValueItemKey == 'colors'",`${system.Liquid("{%- assign colorArraysString = colorArraysString | append: opValueItemValue -%}")}${system.Liquid('{%- assign colorArraysString = colorArraysString | append: "($8)" -%}')}`)}
|
|
94
|
-
|
|
95
|
-
${system.LiquidIf("opValueItemKey == 'imageUrl'",`${system.Liquid("{%- assign imageUrlsString = imageUrlsString | append: opValueItemValue -%}")}${system.Liquid('{%- assign imageUrlsString = imageUrlsString | append: "($8)" -%}')}`)}`)}`)}`)}
|
|
96
|
-
`)}
|
|
97
|
-
|
|
98
|
-
${system.Liquid("{%- assign labels = labelsString | split: '($8)' -%}")}
|
|
99
|
-
${system.Liquid("{%- assign colorStrings = colorArraysString | split: '($8)' -%}")}
|
|
100
|
-
${system.Liquid("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
|
|
101
|
-
|
|
102
|
-
${system.LiquidIf("optionTitle == option.name",`
|
|
103
|
-
${system.Liquid(`{%- assign variantPresetString = "${D}" -%}`)}
|
|
104
|
-
${system.Liquid('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
|
|
105
|
-
${system.Liquid("{%- assign items = variantPresetString | split:'($2)' -%}")}
|
|
106
|
-
${system.Liquid("{%- assign type = 'dropdown' -%}")}
|
|
107
|
-
${system.LiquidFor("item in items",`
|
|
108
|
-
${system.Liquid("{%- assign itemPreset = item | split:'($1)' -%}")}
|
|
109
|
-
${system.LiquidIf("itemPreset[0] == optionName",system.Liquid("{%- assign type = itemPreset[1] -%}"))}
|
|
110
|
-
${system.LiquidIf('itemPreset[0] == "base"',system.Liquid("{%- assign type = itemPreset[1] -%}"))}
|
|
111
|
-
`)}
|
|
112
|
-
${system.Liquid("{%- assign optionRendered = true -%}")}
|
|
113
|
-
${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:v,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:g?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",optionType:"optionType",activeClass:g?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...t,...L,swatchAutoWidth:f(),optionTypo:p}))}
|
|
114
|
-
${system.LiquidIf("type == 'dropdown'",Dropdown_liquid.default({...t,...L,swatchAutoWidth:_(),optionTypo:p}))}
|
|
115
|
-
`)}
|
|
116
|
-
`)}
|
|
117
|
-
|
|
118
|
-
${system.LiquidIf("optionRendered == false",T())}
|
|
119
|
-
`,T=()=>system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:c,uid:v,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:g?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:"optionType",activeClass:g?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...t,...L,swatchAutoWidth:f(),optionTypo:p,isRenderDefault:!0})),x=system.createClass(classes.getWrapDropdownClass(o)),O=getData.getDropdownGroupData(e),C=()=>`
|
|
120
|
-
<div className="${x}">
|
|
121
|
-
${DropdownGroup_liquid.default(O)}
|
|
65
|
+
`,T=()=>core.template`
|
|
66
|
+
${system.LiquidIf("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",OptionVariantsNewFormat_liquid.renderOptionValuesNewFormatSwatches(A),OptionVariantsOldFormat_liquid.renderOptionValuesOld(A))}
|
|
67
|
+
`,I=system.createClass(classes.getWrapDropdownClass(o)),F=getData.getDropdownGroupData(e),C=()=>`
|
|
68
|
+
<div className="${I}">
|
|
69
|
+
${DropdownGroup_liquid.default(F)}
|
|
122
70
|
</div>
|
|
123
|
-
|
|
71
|
+
`,G=system.createAttr(getAttr.getAttrs({uid:_,hasPreSelected:v,cssClass:a?.cssClass})),k=system.createStyle(styles.getWrapperStyle(e)),W=system.createClass({"gp-flex gp-flex-col !gp-ml-0":!0}),J=()=>{let e=core.isLocalEnv?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${core.baseAssetURL}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return core.template`
|
|
124
72
|
${system.Liquid("{%- assign total_combinations = 1 -%}")}
|
|
125
73
|
${system.LiquidFor("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
|
|
126
74
|
<gp-product-variants
|
|
127
|
-
${
|
|
75
|
+
${G}
|
|
128
76
|
gp-data='{
|
|
129
|
-
"setting":${JSON.stringify(
|
|
130
|
-
"styles":${JSON.stringify(
|
|
77
|
+
"setting":${JSON.stringify(w)?.replaceAll("'","'")},
|
|
78
|
+
"styles":${JSON.stringify(s)},
|
|
131
79
|
"variants":{{product.variants | json | escape}},
|
|
132
80
|
"optionsWithValues": {{product.options_with_values | json | escape}},
|
|
133
81
|
"variantSelected": {{ variant | json | escape }},
|
|
@@ -137,7 +85,7 @@
|
|
|
137
85
|
"productId": {{product.id | json | escape}},
|
|
138
86
|
"productUrl": {{product.url | json | escape}},
|
|
139
87
|
"productHandle": {{product.handle | json | escape}},
|
|
140
|
-
"displayState": ${JSON.stringify(
|
|
88
|
+
"displayState": ${JSON.stringify(g)},
|
|
141
89
|
"totalVariantCombinations": {{total_combinations}},
|
|
142
90
|
"firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
|
|
143
91
|
}
|
|
@@ -146,12 +94,12 @@
|
|
|
146
94
|
${system.Liquid("{%- assign options = product.options_with_values -%}")}
|
|
147
95
|
${system.Liquid("{%- assign variants = product.variants -%}")}
|
|
148
96
|
${system.LiquidIf("options.size == 0 or options.size == 1 and variants.size == 1 and variants[0].title == 'Default Title' and variants[0].option1 == 'Default Title'","<div></div>",core.template`<div
|
|
149
|
-
class="${
|
|
150
|
-
style="${
|
|
97
|
+
class="${W}"
|
|
98
|
+
style="${k}"
|
|
151
99
|
>
|
|
152
|
-
${system.If(
|
|
100
|
+
${system.If(f,C(),N())}
|
|
153
101
|
</div>`)}
|
|
154
102
|
</gp-product-variants>
|
|
155
103
|
|
|
156
|
-
${
|
|
104
|
+
${J()}
|
|
157
105
|
`};exports.default=ProductVariants;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return core.makeStyleResponsive("minw",r)},getWrapperStyleActive=e=>{let{preset:t,optionTypography:o,optionTypo:r,typeOfOption:l}=e,a=t?.optionBgColor,p=t?.optionTextColor,i=t?.optionBorder,n=t?.optionHasShadow,c=t?.optionShadow,d=t?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,y=core.composeTypographyStyle(r,o),S=e=>{let t=a?.active??a?.normal,o=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(t),bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color)})},g=c?.active??c?.normal,
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return core.makeStyleResponsive("minw",r)},getWrapperStyleActive=e=>{let{preset:t,optionTypography:o,optionTypo:r,typeOfOption:l}=e,a=t?.optionBgColor,p=t?.optionTextColor,i=t?.optionBorder,n=t?.optionHasShadow,c=t?.optionShadow,d=t?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,y=core.composeTypographyStyle(r,o),S=e=>{let t=a?.active??a?.normal,o=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(t),bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color)})},g=c?.active??c?.normal,u=n?.active??n?.normal,b=p?.active??p?.normal;return helpers.filterTruthyObject({...S(!h),...core.getRadiusStyleActiveState(d),...core.getStyleShadow({value:g,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:u},!0),...y,...!h&&!s&&core.makeStyle({c:core.getSingleColorVariable(b)}),...h&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:o,optionTypography:r,optionTypo:l,typeOfOption:a}=e,p=t?.optionBgColor,i=t?.optionTextColor,n=t?.optionBorder,c=t?.optionHasShadow,d=t?.optionShadow,h=t?.optionRounded,s="color"===a,y="image"===a||"image_shopify"===a,S=["normal","hover"].reduce((e,t)=>({...e,...core.getStyleShadow({value:d?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:c?.[t]})}),{});return helpers.filterTruthyObject({...core.composeRadius(h),...S,...!s&&core.getGlobalColorStateStyle("bg",p),...!s&&core.handleConvertBorderStyle(n),...!s&&core.handleConvertBorderWidth(n),...!s&&core.handleConvertBorderColor(n),...!s&&!y&&core.makeStyle({c:o}),...!s&&!y&&core.getGlobalColorStateStyle("c",i),...typoStyleNotIn(l,r,["--c"]),...s&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})};function typoStyleNotIn(e,t,o){let r=core.composeTypographyStyle(e,t);return o&&0!==o.length?Object.fromEntries(Object.entries(r).filter(([e])=>!o.includes(e))):r}const getWrapperTextStyle=e=>{let{preset:t,typeOfOption:o,checked:r}=e,l=t?.optionBorder,a=t?.optionRounded,p="color"===o,i=()=>{let e="16px",o={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return t?.width?.desktop?.toLowerCase()!=="auto"&&t?.width?.desktop||(o["--pl"]=e,o["--pr"]=e),t?.width?.tablet?.toLowerCase()!=="auto"&&t?.width?.tablet||(o["--pl-tablet"]=e,o["--pr-tablet"]=e),t?.width?.mobile?.toLowerCase()!=="auto"&&t?.width?.mobile||(o["--pl-mobile"]=e,o["--pr-mobile"]=e),(t?.height?.toLowerCase()==="auto"||t?.height)&&(o["--pt"]="8px",o["--pb"]="8px"),o},n={...a,active:{...a?.active||{},radiusType:"custom"}},c=r?core.getRadiusStyleActiveState(n):core.composeRadius(a),d=!r&&p?{...core.handleConvertBorderStyle(l),...core.handleConvertBorderWidth(l),...core.handleConvertBorderColor(l)}:{};return helpers.filterTruthyObject({...!p&&i(),...p&&c,...d})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},a=t=>t?{"--bs":"none"}:core.handleConvertBorderStyle(e),p=o=>({"--d":"flex","--jc":"center"," --ai":"center","--w":"100%","--h":"100%","--of":"hidden","--hvr-c":"unset",...a(o),...core.handleConvertBorderWidth(e),...core.handleConvertBorderColor(e),...core.composeRadius(t),...l()});return p(!!o)},getTextStyle=({optionTypo:e,optionTypography:t})=>{let o=core.composeTypographyStyle(e,t);return delete o["--c"],helpers.filterTruthyObject({...o})};exports.getColorStyle=getColorStyle,exports.getTextStyle=getTextStyle,exports.getWrapperStyleActive=getWrapperStyleActive,exports.getWrapperStyleNormalAndHover=getWrapperStyleNormalAndHover,exports.getWrapperTextStyle=getWrapperTextStyle;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";const OPTION_VALUES_DELIMITER="|||";exports.OPTION_VALUES_DELIMITER="|||";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getSelectStyle=({width:e,height:
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getSelectStyle=({width:e,height:o,optionTypo:t,optionTypography:r,optionBgColor:a,optionTextColor:l,optionRounded:c,optionHasShadow:s,optionShadow:i,optionBorder:d,optionTransform:S,isCombine:h,textAlign:n})=>{let p=core.composeTypographyStyle(t,r),y=n?core.makeStyleResponsive("ta",n):{},g=core.makeStyle({bg:core.getSingleColorVariable(a?.active),bs:d?.active?.border,bw:d?.active?.width,bc:d?.active?.color}),b=[h?"active":"normal","hover"].reduce((e,o)=>({...e,...core.getStyleShadow({value:i?.[o],state:o,styleAppliedFor:"box-shadow",isEnableShadow:s?.[o]})}),{});return helpers.filterTruthyObject({...core.makeStyleResponsive("w",core.makeWidth(e)),...core.makeStyle({h:o}),...b,...g,...core.makeStyle({tt:S}),...p,...core.getGlobalColorStateStyle("c",l),...core.getGlobalColorStateStyle("bg",a),...core.handleConvertBorderStyle(d),...core.handleConvertBorderWidth(d),...core.handleConvertBorderColor(d),...core.composeRadius(c),...core.getStyleShadow({value:t?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:t?.custom?.hasShadowText}),...y,appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};exports.getSelectStyle=getSelectStyle;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js");const ColorVariant=({isVariantOutStock:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js"),_const=require("../../common/const.js");const ColorVariant=({isVariantOutStock:o,swatchValue:e,...r})=>core.template`
|
|
2
2
|
{% assign colorsString = null %}
|
|
3
3
|
{% assign colors = null %}
|
|
4
4
|
{% for label in labels %}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% endif %}
|
|
8
8
|
{% endfor %}
|
|
9
9
|
{% if colorsString != null %}
|
|
10
|
-
{% assign colors = colorsString | split: '
|
|
10
|
+
{% assign colors = colorsString | split: '${_const.OPTION_VALUES_DELIMITER}' %}
|
|
11
11
|
{% endif %}
|
|
12
|
-
${base_liquid.default({...
|
|
12
|
+
${base_liquid.default({...r,typeOfOption:"color",optionRounded:mappingVariantStyles.optionRoundedColorDefault})}
|
|
13
13
|
`;exports.default=ColorVariant;
|
package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),VariantOption=require("../dropdown-option/VariantOption.js"),DropdownOption=require("../dropdown-option/DropdownOption.js"),classes=require("../../common/dropdown/classes.js"),system=require("@gem-sdk/system"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),useDropdownSwatches=require("./hooks/useDropdownSwatches.js");const DropdownVariant=e=>{let{option:t,optionPosition:o,optionNumber:s,variantGroup:n,variants:r,price:i,blankText:a,swatchHeight:d,optionTypography:
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),VariantOption=require("../dropdown-option/VariantOption.js"),DropdownOption=require("../dropdown-option/DropdownOption.js"),classes=require("../../common/dropdown/classes.js"),system=require("@gem-sdk/system"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),useDropdownSwatches=require("./hooks/useDropdownSwatches.js");const DropdownVariant=e=>{let{option:t,optionPosition:o,optionNumber:s,variantGroup:n,variants:r,price:i,blankText:a,swatchHeight:d,optionTypography:l,optionTransform:p,initValue:u,hasPreSelected:m,optionTypo:c,combineHeight:w,combineWidth:j,soldOutStyle:h}=e,{optionBgColor:x,optionTextColor:y,optionRounded:S,optionShadow:g,optionHasShadow:D,optionBorder:q}=e,{value:v,preset:O,handleOnChangeSelect:R,checkVariantInStock:b}=useDropdownSwatches.useDropdownSwatches(e),f="disable"===h;n||(x=O?.optionBgColor,y=O?.optionTextColor,q=O?.optionBorder,D=O?.optionHasShadow,g=O?.optionShadow,S=O?.optionRounded);let C=system.createClass(classes.getSelectClass({optionTypo:c,optionTypography:l,optionBgColor:x,optionBorder:q,optionTextColor:y})),V=system.createStyle(styles.getSelectStyle({width:n?j:O?.width,height:n?w:O?.height,optionTypo:c,optionTypography:l,optionBgColor:x,optionTextColor:y,optionRounded:S,optionShadow:g,optionHasShadow:D,optionBorder:q,optionTransform:p,swatchHeight:d,isCombine:n,textAlign:c?.attrs?.textAlign})),k=system.createAttr(attrs.getSelectAttr({optionName:t?.name,value:v??u,type:"React"})),A=()=>r?.map(e=>jsxRuntime.jsx(VariantOption.default,{disabled:!b(e)&&f,value:e?.id,variant:e,includePrice:i},e?.id)),N=()=>t?.values?.map(e=>jsxRuntime.jsx(DropdownOption.default,{value:e,optionName:t.name,optionPosition:o,optionNumber:s,isSoldOutMark:f},e?.id));return jsxRuntime.jsxs("select",{...k,className:C,style:V,onChange:e=>R(e),children:[system.If(!m,jsxRuntime.jsx("option",{value:"blank",children:a??"Please select an option"})," "),system.If(n,A(),N())]})};exports.default=DropdownVariant;
|
package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../../common/dropdown/classes.js"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),index=require("../dropdown-option/render-liquid/index.js");const DropdownVariant=e=>{let{variantGroup:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../../common/dropdown/classes.js"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),index=require("../dropdown-option/render-liquid/index.js");const DropdownVariant=e=>{let{variantGroup:t,blankText:s,swatchAutoWidth:r,swatchHeight:o,optionTypography:n,optionBgColor:i,optionTextColor:d,optionRounded:l,optionShadow:a,optionHasShadow:c,optionBorder:m,optionTransform:p,hasPreSelected:y,optionTypo:u,combineHeight:g,combineWidth:q,soldOutStyle:w,children:x}=e,j="disable"===w,S=system.createClass(classes.getSelectClass({optionTypo:u,optionTypography:n,optionBgColor:i,optionBorder:m,optionTextColor:d})),$=system.createStyle(styles.getSelectStyle({width:t?q:r,height:t?g:o,optionTypo:u,optionTypography:n,optionBgColor:i,optionTextColor:d,optionRounded:l,optionHasShadow:c,optionShadow:a,optionBorder:m,optionTransform:p,isCombine:t,textAlign:u?.attrs?.textAlign})),f=system.createAttr(attrs.getSelectAttr({variantGroup:t,type:"Liquid"})),A=()=>x;return core.template`
|
|
2
2
|
<select
|
|
3
3
|
${f}
|
|
4
4
|
class="${S}"
|
|
5
5
|
style="${$}"
|
|
6
6
|
>
|
|
7
|
-
${system.If(!y,index.renderBlankOption(
|
|
8
|
-
${system.If(
|
|
7
|
+
${system.If(!y,index.renderBlankOption(s))}
|
|
8
|
+
${system.If(t,A(),index.renderDropdownOptions(j,y))}
|
|
9
9
|
</select>`};exports.default=DropdownVariant;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js");const Text=({id:e,styles:s,builderAttrs:t,style:r,setting:l,advanced:a,builderProps:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js");const Text=({id:e,styles:s,builderAttrs:t,style:r,setting:l,advanced:a,builderProps:y,className:i,isText:c,pageContext:o,elementAttrs:m})=>{let{htmlTag:n="div",excludeFlex:u}=l??{},g=system.createAttr({...e&&{id:e},...attrs.getAttr({uid:y?.uidInteraction??y?.uid??""}),...t}),d=system.createAttr({...attrs.getTextAttr(),...m}),p=system.createStyle({...styles.getStyle(s,r)}),$=system.createStyle({...styles.getContainerStyle(s,l)}),x=system.createStyle({...styles.getTextStyle(s,l)}),q=system.createClass({...classes.getClasses({setting:l,advanced:a,builderProps:y})}),v=system.createClass({"gp-flex":!u}),C=system.createClass({...classes.getTextClasses({styles:s,setting:l,className:i}),...c&&{"gp-text":!0}}),T=helpers.getDisplayText({type:"Liquid",styles:s,setting:l,builderProps:y,pageContext:o}),j=system.createContent(T);return core.template`
|
|
2
2
|
{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}
|
|
3
3
|
<div ${{...g}}
|
|
4
4
|
class="${q}"
|
|
5
5
|
style="${p}"
|
|
6
|
-
data-test-force-publish="${new Date().getTime()}"
|
|
7
6
|
>
|
|
8
|
-
<div class="${
|
|
7
|
+
<div class="${v}" style="${$}">
|
|
9
8
|
<${n}
|
|
10
9
|
${{...d}}
|
|
11
|
-
class="${
|
|
10
|
+
class="${C}"
|
|
12
11
|
style="${x}"
|
|
13
12
|
>
|
|
14
13
|
${j}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@gem-sdk/system";import{OPTION_VALUES_DELIMITER as n}from"./common/const.js";let renderOptionValuesNewFormatSwatches=t=>{let{renderVariantItem:o,variantPresetsLiquid:r}=t;return e`
|
|
2
|
+
${s("{%- assign optionRendered = false -%}")}
|
|
3
|
+
${s("{%- assign swatches = shop.metafields.GEMPAGES.swatchesJSONFormat.value -%}")}
|
|
4
|
+
|
|
5
|
+
${s(`{% for swatch in swatches %}
|
|
6
|
+
{%- assign optionTitle = swatch.optionTitle -%}
|
|
7
|
+
{%- assign optionType = swatch.optionType -%}
|
|
8
|
+
{%- assign labelsString = "" -%}
|
|
9
|
+
{%- assign colorArraysString = "" -%}
|
|
10
|
+
{%- assign imageUrlsString = "" -%}
|
|
11
|
+
|
|
12
|
+
{% for optionValue in swatch.optionValues %}
|
|
13
|
+
{%- assign labelsString = labelsString | append: optionValue.label | append: '${n}' -%}
|
|
14
|
+
{%- assign colorsJoined = optionValue.colors | join: '${n}' -%}
|
|
15
|
+
{%- assign colorArraysString = colorArraysString | append: colorsJoined | append: '${n}' -%}
|
|
16
|
+
{%- assign imageUrlsString = imageUrlsString | append: optionValue.imageUrl | append: '${n}' -%}
|
|
17
|
+
{% endfor %}
|
|
18
|
+
|
|
19
|
+
{%- assign labels = labelsString | split: '${n}' | slice: 0, labelsString.size -%}
|
|
20
|
+
{%- assign colorStrings = colorArraysString | split: '${n}' | slice: 0, colorArraysString.size -%}
|
|
21
|
+
{%- assign imageUrls = imageUrlsString | split: '${n}' | slice: 0, imageUrlsString.size -%}
|
|
22
|
+
|
|
23
|
+
{% if optionTitle == option.name %}
|
|
24
|
+
{%- assign variantPresetString = "${r}" -%}
|
|
25
|
+
{%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
|
|
26
|
+
{%- assign items = variantPresetString | split: '($2)' -%}
|
|
27
|
+
{%- assign type = 'dropdown' -%}
|
|
28
|
+
|
|
29
|
+
{% for item in items %}
|
|
30
|
+
{%- assign itemPreset = item | split: '($1)' -%}
|
|
31
|
+
{% if itemPreset[0] == optionName %}{%- assign type = itemPreset[1] -%}{% endif %}
|
|
32
|
+
{% if itemPreset[0] == 'base' %}{%- assign type = itemPreset[1] -%}{% endif %}
|
|
33
|
+
{% endfor %}
|
|
34
|
+
{%- assign optionRendered = true -%}
|
|
35
|
+
|
|
36
|
+
${o({showDropdown:!0})}
|
|
37
|
+
{% endif %}
|
|
38
|
+
{% endfor %}`)}
|
|
39
|
+
|
|
40
|
+
${i("optionRendered == false",o({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
41
|
+
`};export{renderOptionValuesNewFormatSwatches};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{template as i}from"@gem-sdk/core";let renderOptionValuesOld=a=>{let{renderVariantItem:n,variantPresetsLiquid:o}=a;return i`
|
|
2
|
+
${e("{%- assign optionRendered = false -%}")}
|
|
3
|
+
${e("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
|
|
4
|
+
${e("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
|
|
5
|
+
|
|
6
|
+
${s("swatchesItem in swatchesItems",`
|
|
7
|
+
${e('{%- assign colorArraysString = "" -%}')}
|
|
8
|
+
${e('{%- assign labelsString = "" -%}')}
|
|
9
|
+
${e('{%- assign imageUrlsString = "" -%}')}
|
|
10
|
+
${e("{%- assign attrItems = swatchesItem | split: '($3)' -%}")}
|
|
11
|
+
|
|
12
|
+
${s("attrItem in attrItems",`
|
|
13
|
+
${e("{%- assign attrs = attrItem | split: '($2)' -%}")}
|
|
14
|
+
${e("{%- assign optionKey = attrs[0] -%}")}
|
|
15
|
+
${e("{%- assign optionValue = attrs[1] -%}")}
|
|
16
|
+
${e(`
|
|
17
|
+
{% if optionKey == 'optionTitle' %}
|
|
18
|
+
{% assign optionTitle = optionValue %}
|
|
19
|
+
{% elsif optionKey == 'optionType' %}
|
|
20
|
+
{% assign optionType = optionValue %}
|
|
21
|
+
{% endif %}
|
|
22
|
+
`)}
|
|
23
|
+
|
|
24
|
+
${t('optionKey == "optionValues"',`
|
|
25
|
+
${e("{%- assign opValueItems = optionValue | split: '($4)' -%}")}
|
|
26
|
+
${s("opValueItem in opValueItems",`
|
|
27
|
+
${e("{%- assign opValueItemAttrs = opValueItem | split: '($6)' -%}")}
|
|
28
|
+
${s("opValueItemAttr in opValueItemAttrs",`
|
|
29
|
+
${e("{%- assign attrs = opValueItemAttr | split: '($5)' -%}")}
|
|
30
|
+
${e("{%- assign opValueItemKey = attrs[0] -%}")}
|
|
31
|
+
${e("{%- assign opValueItemValue = attrs[1] -%}")}
|
|
32
|
+
|
|
33
|
+
${t('opValueItemKey == "label"',`${e("{%- assign labelsString = labelsString | append: opValueItemValue -%}")}
|
|
34
|
+
${e('{%- assign labelsString = labelsString | append: "($8)" -%}')}`)}
|
|
35
|
+
|
|
36
|
+
${t('opValueItemKey == "colors"',`${e("{%- assign colorArraysString = colorArraysString | append: opValueItemValue -%}")}
|
|
37
|
+
${e('{%- assign colorArraysString = colorArraysString | append: "($8)" -%}')}`)}
|
|
38
|
+
|
|
39
|
+
${t('opValueItemKey == "imageUrl"',`${e("{%- assign imageUrlsString = imageUrlsString | append: opValueItemValue -%}")}
|
|
40
|
+
${e('{%- assign imageUrlsString = imageUrlsString | append: "($8)" -%}')}`)}
|
|
41
|
+
`)}
|
|
42
|
+
`)}
|
|
43
|
+
`)}
|
|
44
|
+
`)}
|
|
45
|
+
|
|
46
|
+
${e("{%- assign labels = labelsString | split: '($8)' -%}")}
|
|
47
|
+
${e("{%- assign colorStrings = colorArraysString | split: '($8)' -%}")}
|
|
48
|
+
${e("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
|
|
49
|
+
|
|
50
|
+
${t("optionTitle == option.name",`
|
|
51
|
+
${e(`{%- assign variantPresetString = "${o}" -%}`)}
|
|
52
|
+
${e('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
|
|
53
|
+
${e("{%- assign items = variantPresetString | split:'($2)' -%}")}
|
|
54
|
+
${e("{%- assign type = 'dropdown' -%}")}
|
|
55
|
+
${s("item in items",`
|
|
56
|
+
${e("{%- assign itemPreset = item | split:'($1)' -%}")}
|
|
57
|
+
${t("itemPreset[0] == optionName",e("{%- assign type = itemPreset[1] -%}"))}
|
|
58
|
+
${t('itemPreset[0] == "base"',e("{%- assign type = itemPreset[1] -%}"))}
|
|
59
|
+
`)}
|
|
60
|
+
${e("{%- assign optionRendered = true -%}")}
|
|
61
|
+
${n({showDropdown:!0})}
|
|
62
|
+
`)}
|
|
63
|
+
`)}
|
|
64
|
+
|
|
65
|
+
${t("optionRendered == false",n({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
66
|
+
`};export{renderOptionValuesOld};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import{
|
|
2
|
-
|
|
3
|
-
${
|
|
1
|
+
import{template as e,isLocalEnv as t,baseAssetURL as i,DEVICES as o,getResponsiveValueByScreen as s}from"@gem-sdk/core";import a from"../../../text/components/Text.liquid.js";import n from"./components/variants/index.liquid.js";import r from"./components/dropdown-swatches/Dropdown.liquid.js";import p from"./components/dropdown-group/DropdownGroup.liquid.js";import{getSettingPreloadData as l}from"../../../helpers.js";import{mappingVariantStyles as d}from"./utils/mappingVariantStyles.js";import{createClass as m,createStyle as c,createAttr as u,Liquid as v,LiquidFor as f,LiquidIf as _,If as $}from"@gem-sdk/system";import{getAttrs as g}from"./common/main/getAttr.js";import{getVariantOptionGroupStyle as h,getWrapperStyle as y}from"./common/main/styles.js";import{getVariantOptionGroupClass as j,getWrapDropdownClass as w}from"./common/main/classes.js";import{getTextVariantTitleData as S,getDropdownGroupData as b}from"./common/main/getData.js";import{getWrapVariantOptionClass as A}from"./common/variants/classes.js";import{getStyleOfObject as P}from"../../helpers/function.js";import{getMarginBottomStyle as D}from"./common/variants/styles.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as V}from"./OptionVariantsOldFormat.liquid.js";let DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=E=>{let{builderProps:O,styles:T,setting:x,advanced:q}=E,{align:F,swatchItemWidth:G,dropdownItemWidth:C,swatchSpacing:I,optionTypo:k,marginBottom:L}=T??{},{label:J,optionType:z,showAsSwatches:M,layout:U,hasPreSelected:W}=x??{},R=q?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:Y}=O??{},H="groupOption"===z,K=()=>{let e={};return o.forEach(t=>{let i=s(G,t);e[t]="auto"===i}),e},Q=()=>{let e={};return o.forEach(t=>{e[t]=C?.[t]==="fill"}),e},B=x?.variantPresets?d(x?.variantPresets,T):[],X=B?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),Z={...x,variantPresetsOptionType:X},ee=e=>{let t={"'":"'",'"':"""},i=e;for(let o in t)e.indexOf(o)>=0&&(i=i.replaceAll(o,t[o]));return i},et=()=>x?.variantPresets?.map(e=>`${ee(e.optionName)}($2)${e.optionType}`).join("($1)"),ei=()=>x?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),eo=({showDropdown:t,isRenderDefault:i,typeOfOption:o})=>e`
|
|
2
|
+
${f("value in values",n({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:M,uid:Y,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:W?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:o,activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...Z,swatchAutoWidth:K(),optionTypo:k,isRenderDefault:i}))}
|
|
3
|
+
${_(t?'type == "dropdown"':"false",r({...T,...Z,swatchAutoWidth:Q(),optionTypo:k}))}`,es=x?.variantPresets?.map(e=>({name:ee(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),ea={renderVariantItem:eo,variantPresetsLiquid:es??""},en=m(j(F)),er=c(h(I,I)),ep=S(E,"Liquid"),el=m(A(U,F)),ed=()=>e`
|
|
4
|
+
${v(`{%- assign presets = "${et()}" | split: '($1)' -%}`)}
|
|
5
|
+
${v(`{% assign hiddenPresetOptions = "${ei()}" | split: ',' %}`)}
|
|
4
6
|
|
|
5
7
|
${v(`{% assign all_option_names = options | map: 'name' %}
|
|
6
8
|
{% assign filtered_options_string = '' %}
|
|
@@ -30,20 +32,20 @@ import{composeMemo as e,template as t,DEVICES as s,getResponsiveValueByScreen as
|
|
|
30
32
|
${f("option in options",`
|
|
31
33
|
<div
|
|
32
34
|
option-name="{{option.name | escape}}"
|
|
33
|
-
class="${
|
|
34
|
-
style="${P(
|
|
35
|
+
class="${el} ${_("hiddenPresetOptions contains option.name","gp-hidden")}"
|
|
36
|
+
style="${P(D(L))}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
|
|
35
37
|
>
|
|
36
38
|
${v("{%- assign showVariantClass = 'variant-display' -%}")}
|
|
37
39
|
${v("{%- assign optionName = option.name -%}")}
|
|
38
40
|
${f("preset in presets",`
|
|
39
41
|
${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
|
|
40
|
-
${
|
|
42
|
+
${_("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
|
|
41
43
|
`)}
|
|
42
|
-
${
|
|
44
|
+
${$(J,a(ep)," ")}
|
|
43
45
|
<div
|
|
44
46
|
variant-option-name="{{option.name | escape}}"
|
|
45
|
-
class="${
|
|
46
|
-
style="${P(
|
|
47
|
+
class="${en}"
|
|
48
|
+
style="${P(er)}"
|
|
47
49
|
>
|
|
48
50
|
${v("{%- assign values = option.values -%}")}
|
|
49
51
|
${v("{%- assign rootForloop = forloop.index0 -%}")}
|
|
@@ -56,78 +58,24 @@ import{composeMemo as e,template as t,DEVICES as s,getResponsiveValueByScreen as
|
|
|
56
58
|
{%- assign selectedValue = variant.option3 -%}
|
|
57
59
|
{%- endif -%}
|
|
58
60
|
`)}
|
|
59
|
-
${
|
|
60
|
-
${
|
|
61
|
+
${$(!W,v("{%- assign selectedValue = null -%}"),"")}
|
|
62
|
+
${$(M,em(),eo({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
61
63
|
</div>
|
|
62
64
|
</div>`)}
|
|
63
|
-
`,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
${f("swatchesItem in swatchesItems",`
|
|
69
|
-
${v('{%- assign colorArraysString = "" -%}')}
|
|
70
|
-
${v('{%- assign labelsString = "" -%}')}
|
|
71
|
-
${v('{%- assign imageUrlsString = "" -%}')}
|
|
72
|
-
${v("{%- assign attrItems = swatchesItem | split: '($3)' -%}")}
|
|
73
|
-
|
|
74
|
-
${f("attrItem in attrItems",`${v("{%- assign attrs = attrItem | split: '($2)' -%}")}
|
|
75
|
-
${v("{%- assign optionKey = attrs[0] -%}")}
|
|
76
|
-
${v("{%- assign optionValue = attrs[1] -%}")}
|
|
77
|
-
${v(`
|
|
78
|
-
{% if optionKey == 'optionTitle' %}
|
|
79
|
-
{% assign optionTitle = optionValue %}
|
|
80
|
-
{% elsif optionKey == 'optionType' %}
|
|
81
|
-
{% assign optionType = optionValue %}
|
|
82
|
-
{% endif %}
|
|
83
|
-
`)}
|
|
84
|
-
|
|
85
|
-
${y("optionKey == 'optionValues'",`${v("{%- assign opValueItems = optionValue | split: '($4)' -%}")}
|
|
86
|
-
${f("opValueItem in opValueItems",`${v("{%- assign opValueItemAttrs = opValueItem | split: '($6)' -%}")}
|
|
87
|
-
${f("opValueItemAttr in opValueItemAttrs",`${v("{%- assign attrs = opValueItemAttr | split: '($5)' -%}")}
|
|
88
|
-
${v("{%- assign opValueItemKey = attrs[0] -%}")}
|
|
89
|
-
${v("{%- assign opValueItemValue = attrs[1] -%}")}
|
|
90
|
-
|
|
91
|
-
${y("opValueItemKey == 'label'",`${v("{%- assign labelsString = labelsString | append: opValueItemValue -%}")}${v('{%- assign labelsString = labelsString | append: "($8)" -%}')}`)}
|
|
92
|
-
|
|
93
|
-
${y("opValueItemKey == 'colors'",`${v("{%- assign colorArraysString = colorArraysString | append: opValueItemValue -%}")}${v('{%- assign colorArraysString = colorArraysString | append: "($8)" -%}')}`)}
|
|
94
|
-
|
|
95
|
-
${y("opValueItemKey == 'imageUrl'",`${v("{%- assign imageUrlsString = imageUrlsString | append: opValueItemValue -%}")}${v('{%- assign imageUrlsString = imageUrlsString | append: "($8)" -%}')}`)}`)}`)}`)}
|
|
96
|
-
`)}
|
|
97
|
-
|
|
98
|
-
${v("{%- assign labels = labelsString | split: '($8)' -%}")}
|
|
99
|
-
${v("{%- assign colorStrings = colorArraysString | split: '($8)' -%}")}
|
|
100
|
-
${v("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
|
|
101
|
-
|
|
102
|
-
${y("optionTitle == option.name",`
|
|
103
|
-
${v(`{%- assign variantPresetString = "${en}" -%}`)}
|
|
104
|
-
${v('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
|
|
105
|
-
${v("{%- assign items = variantPresetString | split:'($2)' -%}")}
|
|
106
|
-
${v("{%- assign type = 'dropdown' -%}")}
|
|
107
|
-
${f("item in items",`
|
|
108
|
-
${v("{%- assign itemPreset = item | split:'($1)' -%}")}
|
|
109
|
-
${y("itemPreset[0] == optionName",v("{%- assign type = itemPreset[1] -%}"))}
|
|
110
|
-
${y('itemPreset[0] == "base"',v("{%- assign type = itemPreset[1] -%}"))}
|
|
111
|
-
`)}
|
|
112
|
-
${v("{%- assign optionRendered = true -%}")}
|
|
113
|
-
${f("value in values",r({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:L,uid:H,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:W?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",optionType:"optionType",activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...x,...B,swatchAutoWidth:Q(),optionTypo:k}))}
|
|
114
|
-
${y("type == 'dropdown'",p({...x,...B,swatchAutoWidth:Y(),optionTypo:k}))}
|
|
115
|
-
`)}
|
|
116
|
-
`)}
|
|
117
|
-
|
|
118
|
-
${y("optionRendered == false",ep())}
|
|
119
|
-
`,ep=()=>f("value in values",r({id:"{{option.name | escape}}-{{value | escape}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:L,uid:H,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:W?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:"optionType",activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...x,...B,swatchAutoWidth:Q(),optionTypo:k,isRenderDefault:!0})),el=c(I(U)),em=w(N),ed=()=>`
|
|
120
|
-
<div className="${el}">
|
|
121
|
-
${l(em)}
|
|
65
|
+
`,em=()=>e`
|
|
66
|
+
${_("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",N(ea),V(ea))}
|
|
67
|
+
`,ec=m(w(F)),eu=b(E),ev=()=>`
|
|
68
|
+
<div className="${ec}">
|
|
69
|
+
${p(eu)}
|
|
122
70
|
</div>
|
|
123
|
-
|
|
71
|
+
`,ef=u(g({uid:Y,hasPreSelected:W,cssClass:q?.cssClass})),e_=c(y(E)),e$=m({"gp-flex gp-flex-col !gp-ml-0":!0}),eg=()=>{let e=t?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${i}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${e}" defer="defer"></script>`};return e`
|
|
124
72
|
${v("{%- assign total_combinations = 1 -%}")}
|
|
125
73
|
${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
|
|
126
74
|
<gp-product-variants
|
|
127
|
-
${
|
|
75
|
+
${ef}
|
|
128
76
|
gp-data='{
|
|
129
|
-
"setting":${JSON.stringify(
|
|
130
|
-
"styles":${JSON.stringify(
|
|
77
|
+
"setting":${JSON.stringify(Z)?.replaceAll("'","'")},
|
|
78
|
+
"styles":${JSON.stringify(T)},
|
|
131
79
|
"variants":{{product.variants | json | escape}},
|
|
132
80
|
"optionsWithValues": {{product.options_with_values | json | escape}},
|
|
133
81
|
"variantSelected": {{ variant | json | escape }},
|
|
@@ -137,7 +85,7 @@ import{composeMemo as e,template as t,DEVICES as s,getResponsiveValueByScreen as
|
|
|
137
85
|
"productId": {{product.id | json | escape}},
|
|
138
86
|
"productUrl": {{product.url | json | escape}},
|
|
139
87
|
"productHandle": {{product.handle | json | escape}},
|
|
140
|
-
"displayState": ${JSON.stringify(
|
|
88
|
+
"displayState": ${JSON.stringify(R)},
|
|
141
89
|
"totalVariantCombinations": {{total_combinations}},
|
|
142
90
|
"firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
|
|
143
91
|
}
|
|
@@ -145,13 +93,13 @@ import{composeMemo as e,template as t,DEVICES as s,getResponsiveValueByScreen as
|
|
|
145
93
|
<div class="gp-hidden" style="--hvr-shadow: none; --hvr-shadow-tablet: none; --hvr-shadow-mobile: none"></div>
|
|
146
94
|
${v("{%- assign options = product.options_with_values -%}")}
|
|
147
95
|
${v("{%- assign variants = product.variants -%}")}
|
|
148
|
-
${
|
|
149
|
-
class="${
|
|
150
|
-
style="${
|
|
96
|
+
${_("options.size == 0 or options.size == 1 and variants.size == 1 and variants[0].title == 'Default Title' and variants[0].option1 == 'Default Title'","<div></div>",e`<div
|
|
97
|
+
class="${e$}"
|
|
98
|
+
style="${e_}"
|
|
151
99
|
>
|
|
152
|
-
${
|
|
100
|
+
${$(H,ev(),ed())}
|
|
153
101
|
</div>`)}
|
|
154
102
|
</gp-product-variants>
|
|
155
103
|
|
|
156
|
-
${
|
|
104
|
+
${eg()}
|
|
157
105
|
`};export{ProductVariants as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{composeTypographyStyle as e,getRadiusStyleActiveState as t,getStyleShadow as o,makeStyle as r,getSingleColorVariable as l,composeRadius as i,getGlobalColorStateStyle as p,handleConvertBorderStyle as a,handleConvertBorderWidth as n,handleConvertBorderColor as d,makeStyleResponsive as h}from"@gem-sdk/core";import{filterTruthyObject as c}from"../../../../../helpers.js";let getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return h("minw",r)},getWrapperStyleActive=i=>{let{preset:p,optionTypography:a,optionTypo:n,typeOfOption:d}=i,h=p?.optionBgColor,
|
|
1
|
+
import{composeTypographyStyle as e,getRadiusStyleActiveState as t,getStyleShadow as o,makeStyle as r,getSingleColorVariable as l,composeRadius as i,getGlobalColorStateStyle as p,handleConvertBorderStyle as a,handleConvertBorderWidth as n,handleConvertBorderColor as d,makeStyleResponsive as h}from"@gem-sdk/core";import{filterTruthyObject as c}from"../../../../../helpers.js";let getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return h("minw",r)},getWrapperStyleActive=i=>{let{preset:p,optionTypography:a,optionTypo:n,typeOfOption:d}=i,h=p?.optionBgColor,s=p?.optionTextColor,g=p?.optionBorder,b=p?.optionHasShadow,m=p?.optionShadow,u=p?.optionRounded,w="color"===d,x="image"===d||"image_shopify"===d,y=e(n,a),S=e=>{let t=h?.active??h?.normal,o=g?.active??g?.normal;return r({bg:e&&l(t),bs:o?.border,bw:o?.width,bc:l(o?.color)})},v=m?.active??m?.normal,C=b?.active??b?.normal,f=s?.active??s?.normal;return c({...S(!w),...t(u),...o({value:v,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:C},!0),...y,...!w&&!x&&r({c:l(f)}),...w&&getColorStyleWidth(p),...r({h:p?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:l,optionTypography:h,optionTypo:s,typeOfOption:g}=e,b=t?.optionBgColor,m=t?.optionTextColor,u=t?.optionBorder,w=t?.optionHasShadow,x=t?.optionShadow,y=t?.optionRounded,S="color"===g,v="image"===g||"image_shopify"===g,C=["normal","hover"].reduce((e,t)=>({...e,...o({value:x?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:w?.[t]})}),{});return c({...i(y),...C,...!S&&p("bg",b),...!S&&a(u),...!S&&n(u),...!S&&d(u),...!S&&!v&&r({c:l}),...!S&&!v&&p("c",m),...typoStyleNotIn(s,h,["--c"]),...S&&getColorStyleWidth(t),...r({h:t?.height})})};function typoStyleNotIn(t,o,r){let l=e(t,o);return r&&0!==r.length?Object.fromEntries(Object.entries(l).filter(([e])=>!r.includes(e))):l}let getWrapperTextStyle=e=>{let{preset:o,typeOfOption:r,checked:l}=e,p=o?.optionBorder,h=o?.optionRounded,s="color"===r,g=()=>{let e="16px",t={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return o?.width?.desktop?.toLowerCase()!=="auto"&&o?.width?.desktop||(t["--pl"]=e,t["--pr"]=e),o?.width?.tablet?.toLowerCase()!=="auto"&&o?.width?.tablet||(t["--pl-tablet"]=e,t["--pr-tablet"]=e),o?.width?.mobile?.toLowerCase()!=="auto"&&o?.width?.mobile||(t["--pl-mobile"]=e,t["--pr-mobile"]=e),(o?.height?.toLowerCase()==="auto"||o?.height)&&(t["--pt"]="8px",t["--pb"]="8px"),t},b={...h,active:{...h?.active||{},radiusType:"custom"}},m=l?t(b):i(h),u=!l&&s?{...a(p),...n(p),...d(p)}:{};return c({...!s&&g(),...s&&m,...u})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},p=t=>t?{"--bs":"none"}:a(e),h=o=>({"--d":"flex","--jc":"center"," --ai":"center","--w":"100%","--h":"100%","--of":"hidden","--hvr-c":"unset",...p(o),...n(e),...d(e),...i(t),...l()});return h(!!o)},getTextStyle=({optionTypo:t,optionTypography:o})=>{let r=e(t,o);return delete r["--c"],c({...r})};export{getColorStyle,getTextStyle,getWrapperStyleActive,getWrapperStyleNormalAndHover,getWrapperTextStyle};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
let OPTION_VALUES_DELIMITER="|||";export{OPTION_VALUES_DELIMITER};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{composeTypographyStyle as e,
|
|
1
|
+
import{composeTypographyStyle as e,makeStyleResponsive as t,makeStyle as o,getSingleColorVariable as a,getStyleShadow as r,makeWidth as c,getGlobalColorStateStyle as s,handleConvertBorderStyle as l,handleConvertBorderWidth as i,handleConvertBorderColor as d,composeRadius as p}from"@gem-sdk/core";import{filterTruthyObject as h}from"../../../../../helpers.js";let getSelectStyle=({width:n,height:b,optionTypo:g,optionTypography:m,optionBgColor:u,optionTextColor:v,optionRounded:w,optionHasShadow:S,optionShadow:x,optionBorder:y,optionTransform:f,isCombine:k,textAlign:A})=>{let E=e(g,m),F=A?t("ta",A):{},j=o({bg:a(u?.active),bs:y?.active?.border,bw:y?.active?.width,bc:y?.active?.color}),T=[k?"active":"normal","hover"].reduce((e,t)=>({...e,...r({value:x?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:S?.[t]})}),{});return h({...t("w",c(n)),...o({h:b}),...T,...j,...o({tt:f}),...E,...s("c",v),...s("bg",u),...l(y),...i(y),...d(y),...p(w),...r({value:g?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:g?.custom?.hasShadowText}),...F,appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};export{getSelectStyle};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{template as o}from"@gem-sdk/core";import
|
|
1
|
+
import{template as o}from"@gem-sdk/core";import r from"../base/base.liquid.js";import{optionRoundedColorDefault as l}from"../../utils/mappingVariantStyles.js";import{OPTION_VALUES_DELIMITER as i}from"../../common/const.js";let ColorVariant=({isVariantOutStock:s,swatchValue:n,...t})=>o`
|
|
2
2
|
{% assign colorsString = null %}
|
|
3
3
|
{% assign colors = null %}
|
|
4
4
|
{% for label in labels %}
|
|
@@ -7,7 +7,7 @@ import{template as o}from"@gem-sdk/core";import l from"../base/base.liquid.js";i
|
|
|
7
7
|
{% endif %}
|
|
8
8
|
{% endfor %}
|
|
9
9
|
{% if colorsString != null %}
|
|
10
|
-
{% assign colors = colorsString | split: '
|
|
10
|
+
{% assign colors = colorsString | split: '${i}' %}
|
|
11
11
|
{% endif %}
|
|
12
|
-
${
|
|
12
|
+
${r({...t,typeOfOption:"color",optionRounded:l})}
|
|
13
13
|
`;export{ColorVariant as default};
|
package/dist/esm/product/components/product-variants/components/dropdown-swatches/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsxs as o,jsx as t}from"react/jsx-runtime";import e from"../dropdown-option/VariantOption.js";import i from"../dropdown-option/DropdownOption.js";import{getSelectClass as n}from"../../common/dropdown/classes.js";import{createClass as r,createStyle as a,createAttr as p,If as m}from"@gem-sdk/system";import{getSelectStyle as
|
|
2
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import e from"../dropdown-option/VariantOption.js";import i from"../dropdown-option/DropdownOption.js";import{getSelectClass as n}from"../../common/dropdown/classes.js";import{createClass as r,createStyle as a,createAttr as p,If as m}from"@gem-sdk/system";import{getSelectStyle as s}from"../../common/dropdown/styles.js";import{getSelectAttr as d}from"../../common/dropdown/attrs.js";import{useDropdownSwatches as l}from"./hooks/useDropdownSwatches.js";let DropdownVariant=c=>{let{option:w,optionPosition:h,optionNumber:u,variantGroup:f,variants:g,price:j,blankText:v,swatchHeight:b,optionTypography:x,optionTransform:k,initValue:y,hasPreSelected:C,optionTypo:D,combineHeight:N,combineWidth:S,soldOutStyle:O}=c,{optionBgColor:P,optionTextColor:V,optionRounded:A,optionShadow:B,optionHasShadow:R,optionBorder:H}=c,{value:M,preset:T,handleOnChangeSelect:q,checkVariantInStock:z}=l(c),E="disable"===O;f||(P=T?.optionBgColor,V=T?.optionTextColor,H=T?.optionBorder,R=T?.optionHasShadow,B=T?.optionShadow,A=T?.optionRounded);let F=r(n({optionTypo:D,optionTypography:x,optionBgColor:P,optionBorder:H,optionTextColor:V})),G=a(s({width:f?S:T?.width,height:f?N:T?.height,optionTypo:D,optionTypography:x,optionBgColor:P,optionTextColor:V,optionRounded:A,optionShadow:B,optionHasShadow:R,optionBorder:H,optionTransform:k,swatchHeight:b,isCombine:f,textAlign:D?.attrs?.textAlign})),I=p(d({optionName:w?.name,value:M??y,type:"React"})),J=()=>g?.map(o=>t(e,{disabled:!z(o)&&E,value:o?.id,variant:o,includePrice:j},o?.id)),K=()=>w?.values?.map(o=>t(i,{value:o,optionName:w.name,optionPosition:h,optionNumber:u,isSoldOutMark:E},o?.id));return o("select",{...I,className:F,style:G,onChange:o=>q(o),children:[m(!C,t("option",{value:"blank",children:v??"Please select an option"})," "),m(f,J(),K())]})};export{DropdownVariant as default};
|
package/dist/esm/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import{template as o}from"@gem-sdk/core";import{createClass as
|
|
1
|
+
import{template as o}from"@gem-sdk/core";import{createClass as t,createStyle as r,createAttr as e,If as s}from"@gem-sdk/system";import{getSelectClass as m}from"../../common/dropdown/classes.js";import{getSelectStyle as i}from"../../common/dropdown/styles.js";import{getSelectAttr as d}from"../../common/dropdown/attrs.js";import{renderBlankOption as n,renderDropdownOptions as p}from"../dropdown-option/render-liquid/index.js";let DropdownVariant=l=>{let{variantGroup:a,blankText:c,swatchAutoWidth:f,swatchHeight:w,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionShadow:x,optionHasShadow:y,optionBorder:h,optionTransform:b,hasPreSelected:k,optionTypo:q,combineHeight:A,combineWidth:D,soldOutStyle:V,children:C}=l,L="disable"===V,v=t(m({optionTypo:q,optionTypography:g,optionBgColor:$,optionBorder:h,optionTextColor:j})),z=r(i({width:a?D:f,height:a?A:w,optionTypo:q,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionHasShadow:y,optionShadow:x,optionBorder:h,optionTransform:b,isCombine:a,textAlign:q?.attrs?.textAlign})),B=e(d({variantGroup:a,type:"Liquid"})),E=()=>C;return o`
|
|
2
2
|
<select
|
|
3
3
|
${B}
|
|
4
|
-
class="${
|
|
5
|
-
style="${
|
|
4
|
+
class="${v}"
|
|
5
|
+
style="${z}"
|
|
6
6
|
>
|
|
7
|
-
${
|
|
8
|
-
${
|
|
7
|
+
${s(!k,n(c))}
|
|
8
|
+
${s(a,E(),p(L,k))}
|
|
9
9
|
</select>`};export{DropdownVariant as default};
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import{template as t}from"@gem-sdk/core";import{createAttr as
|
|
1
|
+
import{template as t}from"@gem-sdk/core";import{createAttr as o,createStyle as s,createClass as e,createContent as i}from"@gem-sdk/system";import{getAttr as r,getTextAttr as m}from"../common/attrs.js";import{getStyle as l,getContainerStyle as p,getTextStyle as d}from"../common/styles.js";import{getClasses as n,getTextClasses as a}from"../common/classes.js";import{getDisplayText as c}from"../common/helpers.js";let Text=({id:$,styles:u,builderAttrs:f,style:g,setting:y,advanced:j,builderProps:v,className:x,isText:T,pageContext:h,elementAttrs:k})=>{let{htmlTag:q="div",excludeFlex:I}=y??{},L=o({...$&&{id:$},...r({uid:v?.uidInteraction??v?.uid??""}),...f}),O=o({...m(),...k}),_=s({...l(u,g)}),b=s({...p(u,y)}),w=s({...d(u,y)}),z=e({...n({setting:y,advanced:j,builderProps:v})}),A=e({"gp-flex":!I}),B=e({...a({styles:u,setting:y,className:x}),...T&&{"gp-text":!0}}),C=c({type:"Liquid",styles:u,setting:y,builderProps:v,pageContext:h}),D=i(C);return t`
|
|
2
2
|
{% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}
|
|
3
|
-
<div ${{...
|
|
4
|
-
class="${
|
|
5
|
-
style="${
|
|
6
|
-
data-test-force-publish="${new Date().getTime()}"
|
|
3
|
+
<div ${{...L}}
|
|
4
|
+
class="${z}"
|
|
5
|
+
style="${_}"
|
|
7
6
|
>
|
|
8
|
-
<div class="${
|
|
7
|
+
<div class="${A}" style="${b}">
|
|
9
8
|
<${q}
|
|
10
|
-
${{...
|
|
11
|
-
class="${
|
|
12
|
-
style="${
|
|
9
|
+
${{...O}}
|
|
10
|
+
class="${B}"
|
|
11
|
+
style="${w}"
|
|
13
12
|
>
|
|
14
|
-
${
|
|
13
|
+
${D}
|
|
15
14
|
</${q}>
|
|
16
15
|
</div>
|
|
17
16
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/components",
|
|
3
|
-
"version": "8.0.0-staging.
|
|
3
|
+
"version": "8.0.0-staging.18",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"scan-all-text": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/scan-all-text && node ./scripts/scan-all-text"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "8.0.0-staging.
|
|
29
|
+
"@gem-sdk/core": "8.0.0-staging.16",
|
|
30
30
|
"@gem-sdk/styles": "7.0.1-staging.0",
|
|
31
31
|
"@gem-sdk/system": "7.0.1-staging.0",
|
|
32
32
|
"@types/react-transition-group": "^4.4.12",
|