@gem-sdk/components 7.0.1-dev.15 → 7.0.1-dev.16
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 +2 -2
- package/dist/cjs/product/components/product-variants/OptionVariantsOldFormat.liquid.js +4 -4
- package/dist/cjs/product/components/product-variants/ProductVariants.liquid.js +22 -22
- package/dist/cjs/product/components/product-variants/common/base/styles.js +1 -1
- package/dist/esm/product/components/product-variants/OptionVariantsNewFormat.liquid.js +4 -4
- package/dist/esm/product/components/product-variants/OptionVariantsOldFormat.liquid.js +4 -4
- package/dist/esm/product/components/product-variants/ProductVariants.liquid.js +42 -42
- package/dist/esm/product/components/product-variants/common/base/styles.js +1 -1
- package/package.json +1 -1
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
{% endfor %}
|
|
34
34
|
{%- assign optionRendered = true -%}
|
|
35
35
|
|
|
36
|
-
${s(
|
|
36
|
+
${s({showDropdown:!0})}
|
|
37
37
|
{% endif %}
|
|
38
38
|
{% endfor %}`)}
|
|
39
39
|
|
|
40
|
-
${system.LiquidIf("optionRendered == false",s(
|
|
40
|
+
${system.LiquidIf("optionRendered == false",s({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
41
41
|
`};exports.renderOptionValuesNewFormatSwatches=renderOptionValuesNewFormatSwatches;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var system=require("@gem-sdk/system"),core=require("@gem-sdk/core");const renderOptionValuesOld=s=>{let{renderVariantItem:
|
|
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
2
|
${system.Liquid("{%- assign optionRendered = false -%}")}
|
|
3
3
|
${system.Liquid("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
|
|
4
4
|
${system.Liquid("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
${system.Liquid("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
|
|
49
49
|
|
|
50
50
|
${system.LiquidIf("optionTitle == option.name",`
|
|
51
|
-
${system.Liquid(`{%- assign variantPresetString = "${
|
|
51
|
+
${system.Liquid(`{%- assign variantPresetString = "${i}" -%}`)}
|
|
52
52
|
${system.Liquid('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
|
|
53
53
|
${system.Liquid("{%- assign items = variantPresetString | split:'($2)' -%}")}
|
|
54
54
|
${system.Liquid("{%- assign type = 'dropdown' -%}")}
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
${system.LiquidIf('itemPreset[0] == "base"',system.Liquid("{%- assign type = itemPreset[1] -%}"))}
|
|
59
59
|
`)}
|
|
60
60
|
${system.Liquid("{%- assign optionRendered = true -%}")}
|
|
61
|
-
${
|
|
61
|
+
${e({showDropdown:!0})}
|
|
62
62
|
`)}
|
|
63
63
|
`)}
|
|
64
64
|
|
|
65
|
-
${system.LiquidIf("optionRendered == false",
|
|
65
|
+
${system.LiquidIf("optionRendered == false",e({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
66
66
|
`};exports.renderOptionValuesOld=renderOptionValuesOld;
|
|
@@ -1,8 +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"),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=
|
|
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:
|
|
3
|
-
|
|
4
|
-
${system.Liquid(`{%- assign presets = "${
|
|
5
|
-
${system.Liquid(`{% assign hiddenPresetOptions = "${
|
|
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)"),V=()=>i?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(","),D=({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}))}`,O=i?.variantPresets?.map(e=>({name:L(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),A={renderVariantItem:D,variantPresetsLiquid:O??""},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)),T=()=>core.template`
|
|
4
|
+
${system.Liquid(`{%- assign presets = "${j()}" | split: '($1)' -%}`)}
|
|
5
|
+
${system.Liquid(`{% assign hiddenPresetOptions = "${V()}" | split: ',' %}`)}
|
|
6
6
|
|
|
7
7
|
${system.Liquid(`{% assign all_option_names = options | map: 'name' %}
|
|
8
8
|
{% assign filtered_options_string = '' %}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
${system.LiquidFor("option in options",`
|
|
33
33
|
<div
|
|
34
34
|
option-name="{{option.name | escape}}"
|
|
35
|
-
class="${
|
|
35
|
+
class="${x} ${system.LiquidIf("hiddenPresetOptions contains option.name","gp-hidden")}"
|
|
36
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 %}")}"
|
|
37
37
|
>
|
|
38
38
|
${system.Liquid("{%- assign showVariantClass = 'variant-display' -%}")}
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
${system.Liquid("{%- assign presetDetail = preset | split: '($2)' -%}")}
|
|
42
42
|
${system.LiquidIf("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${system.Liquid("{%- assign showVariantClass = '' -%}")} ${system.Liquid("{%- break -%}")}`)}
|
|
43
43
|
`)}
|
|
44
|
-
${system.If(u,Text_liquid.default(
|
|
44
|
+
${system.If(u,Text_liquid.default(P)," ")}
|
|
45
45
|
<div
|
|
46
46
|
variant-option-name="{{option.name | escape}}"
|
|
47
|
-
class="${
|
|
48
|
-
style="${_function.getStyleOfObject(
|
|
47
|
+
class="${b}"
|
|
48
|
+
style="${_function.getStyleOfObject(E)}"
|
|
49
49
|
>
|
|
50
50
|
${system.Liquid("{%- assign values = option.values -%}")}
|
|
51
51
|
${system.Liquid("{%- assign rootForloop = forloop.index0 -%}")}
|
|
@@ -59,22 +59,22 @@
|
|
|
59
59
|
{%- endif -%}
|
|
60
60
|
`)}
|
|
61
61
|
${system.If(!v,system.Liquid("{%- assign selectedValue = null -%}"),"")}
|
|
62
|
-
${system.If(c,
|
|
62
|
+
${system.If(c,I(),D({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
63
63
|
</div>
|
|
64
64
|
</div>`)}
|
|
65
|
-
`,
|
|
66
|
-
${system.LiquidIf("
|
|
67
|
-
`,
|
|
68
|
-
<div className="${
|
|
69
|
-
${DropdownGroup_liquid.default(
|
|
65
|
+
`,I=()=>core.template`
|
|
66
|
+
${system.LiquidIf("shop.metafields.GEMPAGES.swatches and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",OptionVariantsNewFormat_liquid.renderOptionValuesNewFormatSwatches(A),OptionVariantsOldFormat_liquid.renderOptionValuesOld(A))}
|
|
67
|
+
`,N=system.createClass(classes.getWrapDropdownClass(o)),C=getData.getDropdownGroupData(e),F=()=>`
|
|
68
|
+
<div className="${N}">
|
|
69
|
+
${DropdownGroup_liquid.default(C)}
|
|
70
70
|
</div>
|
|
71
|
-
`,
|
|
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}),M=()=>{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`
|
|
72
72
|
${system.Liquid("{%- assign total_combinations = 1 -%}")}
|
|
73
73
|
${system.LiquidFor("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
|
|
74
74
|
<gp-product-variants
|
|
75
|
-
${
|
|
75
|
+
${G}
|
|
76
76
|
gp-data='{
|
|
77
|
-
"setting":${JSON.stringify(
|
|
77
|
+
"setting":${JSON.stringify(w)?.replaceAll("'","'")},
|
|
78
78
|
"styles":${JSON.stringify(s)},
|
|
79
79
|
"variants":{{product.variants | json | escape}},
|
|
80
80
|
"optionsWithValues": {{product.options_with_values | json | escape}},
|
|
@@ -94,12 +94,12 @@
|
|
|
94
94
|
${system.Liquid("{%- assign options = product.options_with_values -%}")}
|
|
95
95
|
${system.Liquid("{%- assign variants = product.variants -%}")}
|
|
96
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
|
|
97
|
-
class="${
|
|
98
|
-
style="${
|
|
97
|
+
class="${W}"
|
|
98
|
+
style="${k}"
|
|
99
99
|
>
|
|
100
|
-
${system.If(f,
|
|
100
|
+
${system.If(f,F(),T())}
|
|
101
101
|
</div>`)}
|
|
102
102
|
</gp-product-variants>
|
|
103
103
|
|
|
104
|
-
${
|
|
104
|
+
${M()}
|
|
105
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;
|
|
@@ -1,4 +1,4 @@
|
|
|
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:
|
|
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
2
|
${s("{%- assign optionRendered = false -%}")}
|
|
3
3
|
${s("{%- assign swatches = shop.metafields.GEMPAGES.swatchesJSONFormat.value -%}")}
|
|
4
4
|
|
|
@@ -21,7 +21,7 @@ import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@
|
|
|
21
21
|
{%- assign imageUrls = imageUrlsString | split: '${n}' | slice: 0, imageUrlsString.size -%}
|
|
22
22
|
|
|
23
23
|
{% if optionTitle == option.name %}
|
|
24
|
-
{%- assign variantPresetString = "${
|
|
24
|
+
{%- assign variantPresetString = "${r}" -%}
|
|
25
25
|
{%- assign optionName = option.name | replace: "'", "'" | replace: '"', '"' -%}
|
|
26
26
|
{%- assign items = variantPresetString | split: '($2)' -%}
|
|
27
27
|
{%- assign type = 'dropdown' -%}
|
|
@@ -33,9 +33,9 @@ import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@
|
|
|
33
33
|
{% endfor %}
|
|
34
34
|
{%- assign optionRendered = true -%}
|
|
35
35
|
|
|
36
|
-
${
|
|
36
|
+
${o({showDropdown:!0})}
|
|
37
37
|
{% endif %}
|
|
38
38
|
{% endfor %}`)}
|
|
39
39
|
|
|
40
|
-
${i("optionRendered == false",
|
|
40
|
+
${i("optionRendered == false",o({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
41
41
|
`};export{renderOptionValuesNewFormatSwatches};
|
|
@@ -1,4 +1,4 @@
|
|
|
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:
|
|
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
2
|
${e("{%- assign optionRendered = false -%}")}
|
|
3
3
|
${e("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
|
|
4
4
|
${e("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
|
|
@@ -48,7 +48,7 @@ import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{tem
|
|
|
48
48
|
${e("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
|
|
49
49
|
|
|
50
50
|
${t("optionTitle == option.name",`
|
|
51
|
-
${e(`{%- assign variantPresetString = "${
|
|
51
|
+
${e(`{%- assign variantPresetString = "${o}" -%}`)}
|
|
52
52
|
${e('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
|
|
53
53
|
${e("{%- assign items = variantPresetString | split:'($2)' -%}")}
|
|
54
54
|
${e("{%- assign type = 'dropdown' -%}")}
|
|
@@ -58,9 +58,9 @@ import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{tem
|
|
|
58
58
|
${t('itemPreset[0] == "base"',e("{%- assign type = itemPreset[1] -%}"))}
|
|
59
59
|
`)}
|
|
60
60
|
${e("{%- assign optionRendered = true -%}")}
|
|
61
|
-
${n(
|
|
61
|
+
${n({showDropdown:!0})}
|
|
62
62
|
`)}
|
|
63
63
|
`)}
|
|
64
64
|
|
|
65
|
-
${t("optionRendered == false",n(
|
|
65
|
+
${t("optionRendered == false",n({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
66
66
|
`};export{renderOptionValuesOld};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{
|
|
2
|
-
${
|
|
3
|
-
|
|
4
|
-
${
|
|
5
|
-
${
|
|
1
|
+
import{template as e,isLocalEnv as t,baseAssetURL as i,DEVICES as s,getResponsiveValueByScreen as o}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 V}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as E}from"./OptionVariantsOldFormat.liquid.js";let DEFAULT_ADVANCED_DISPLAY_SETTING={desktop:!0,tablet:!0,mobile:!0},ProductVariants=N=>{let{builderProps:T,styles:O,setting:x,advanced:q}=N,{align:G,swatchItemWidth:C,dropdownItemWidth:F,swatchSpacing:I,optionTypo:k,marginBottom:L}=O??{},{label:z,optionType:J,showAsSwatches:M,layout:U,hasPreSelected:W}=x??{},R=q?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:Y}=T??{},H="groupOption"===J,K=()=>{let e={};return s.forEach(t=>{let i=o(C,t);e[t]="auto"===i}),e},Q=()=>{let e={};return s.forEach(t=>{e[t]=F?.[t]==="fill"}),e},B=x?.variantPresets?d(x?.variantPresets,O):[],X=B?.map(e=>({...e,presets:{[e.optionType]:e.presets[e.optionType]}})),Z={...x,variantPresetsOptionType:X},ee=e=>{let t={"'":"'",'"':"""},i=e;for(let s in t)e.indexOf(s)>=0&&(i=i.replaceAll(s,t[s]));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(","),es=({showDropdown:t,isRenderDefault:i,typeOfOption:s})=>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:s,activeClass:W?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...O,...Z,swatchAutoWidth:K(),optionTypo:k,isRenderDefault:i}))}
|
|
3
|
+
${_(t?'type == "dropdown"':"false",r({...O,...Z,swatchAutoWidth:Q(),optionTypo:k}))}`,eo=x?.variantPresets?.map(e=>({name:ee(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),ea={renderVariantItem:es,variantPresetsLiquid:eo??""},en=m(j(G)),er=c(h(I,I)),ep=S(N,"Liquid"),el=m(A(U,G)),ed=()=>e`
|
|
4
|
+
${v(`{%- assign presets = "${et()}" | split: '($1)' -%}`)}
|
|
5
|
+
${v(`{% assign hiddenPresetOptions = "${ei()}" | split: ',' %}`)}
|
|
6
6
|
|
|
7
|
-
${
|
|
7
|
+
${v(`{% assign all_option_names = options | map: 'name' %}
|
|
8
8
|
{% assign filtered_options_string = '' %}
|
|
9
9
|
{% assign delimiter = '||' %}
|
|
10
10
|
|
|
@@ -27,29 +27,29 @@ import{composeMemo as e,template as t,isLocalEnv as i,baseAssetURL as s,DEVICES
|
|
|
27
27
|
|
|
28
28
|
{% assign filtered_options_array = filtered_options_string | split: delimiter %}`)}
|
|
29
29
|
|
|
30
|
-
${
|
|
30
|
+
${v("{% assign last_option_name = filtered_options_array | last %}")}
|
|
31
31
|
|
|
32
|
-
${
|
|
32
|
+
${f("option in options",`
|
|
33
33
|
<div
|
|
34
34
|
option-name="{{option.name | escape}}"
|
|
35
|
-
class="${
|
|
36
|
-
style="${
|
|
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 %}")}"
|
|
37
37
|
>
|
|
38
|
-
${
|
|
39
|
-
${
|
|
40
|
-
${
|
|
41
|
-
${
|
|
42
|
-
${
|
|
38
|
+
${v("{%- assign showVariantClass = 'variant-display' -%}")}
|
|
39
|
+
${v("{%- assign optionName = option.name -%}")}
|
|
40
|
+
${f("preset in presets",`
|
|
41
|
+
${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
|
|
42
|
+
${_("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
|
|
43
43
|
`)}
|
|
44
|
-
${
|
|
44
|
+
${$(z,a(ep)," ")}
|
|
45
45
|
<div
|
|
46
46
|
variant-option-name="{{option.name | escape}}"
|
|
47
|
-
class="${
|
|
48
|
-
style="${
|
|
47
|
+
class="${en}"
|
|
48
|
+
style="${P(er)}"
|
|
49
49
|
>
|
|
50
|
-
${
|
|
51
|
-
${
|
|
52
|
-
${
|
|
50
|
+
${v("{%- assign values = option.values -%}")}
|
|
51
|
+
${v("{%- assign rootForloop = forloop.index0 -%}")}
|
|
52
|
+
${v(`
|
|
53
53
|
{%- if option.position == 1 -%}
|
|
54
54
|
{%- assign selectedValue = variant.option1 -%}
|
|
55
55
|
{%- elsif option.position == 2 -%}
|
|
@@ -58,24 +58,24 @@ import{composeMemo as e,template as t,isLocalEnv as i,baseAssetURL as s,DEVICES
|
|
|
58
58
|
{%- assign selectedValue = variant.option3 -%}
|
|
59
59
|
{%- endif -%}
|
|
60
60
|
`)}
|
|
61
|
-
${
|
|
62
|
-
${
|
|
61
|
+
${$(!W,v("{%- assign selectedValue = null -%}"),"")}
|
|
62
|
+
${$(M,em(),es({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
63
63
|
</div>
|
|
64
64
|
</div>`)}
|
|
65
|
-
`,
|
|
66
|
-
${
|
|
67
|
-
`,
|
|
68
|
-
<div className="${
|
|
69
|
-
${
|
|
65
|
+
`,em=()=>e`
|
|
66
|
+
${_("shop.metafields.GEMPAGES.swatches and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",V(ea),E(ea))}
|
|
67
|
+
`,ec=m(w(G)),eu=b(N),ev=()=>`
|
|
68
|
+
<div className="${ec}">
|
|
69
|
+
${p(eu)}
|
|
70
70
|
</div>
|
|
71
|
-
`,
|
|
72
|
-
${
|
|
73
|
-
${
|
|
71
|
+
`,ef=u(g({uid:Y,hasPreSelected:W,cssClass:q?.cssClass})),e_=c(y(N)),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`
|
|
72
|
+
${v("{%- assign total_combinations = 1 -%}")}
|
|
73
|
+
${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
|
|
74
74
|
<gp-product-variants
|
|
75
|
-
${
|
|
75
|
+
${ef}
|
|
76
76
|
gp-data='{
|
|
77
|
-
"setting":${JSON.stringify(
|
|
78
|
-
"styles":${JSON.stringify(
|
|
77
|
+
"setting":${JSON.stringify(Z)?.replaceAll("'","'")},
|
|
78
|
+
"styles":${JSON.stringify(O)},
|
|
79
79
|
"variants":{{product.variants | json | escape}},
|
|
80
80
|
"optionsWithValues": {{product.options_with_values | json | escape}},
|
|
81
81
|
"variantSelected": {{ variant | json | escape }},
|
|
@@ -85,21 +85,21 @@ import{composeMemo as e,template as t,isLocalEnv as i,baseAssetURL as s,DEVICES
|
|
|
85
85
|
"productId": {{product.id | json | escape}},
|
|
86
86
|
"productUrl": {{product.url | json | escape}},
|
|
87
87
|
"productHandle": {{product.handle | json | escape}},
|
|
88
|
-
"displayState": ${JSON.stringify(
|
|
88
|
+
"displayState": ${JSON.stringify(R)},
|
|
89
89
|
"totalVariantCombinations": {{total_combinations}},
|
|
90
90
|
"firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
|
|
91
91
|
}
|
|
92
92
|
'>
|
|
93
93
|
<div class="gp-hidden" style="--hvr-shadow: none; --hvr-shadow-tablet: none; --hvr-shadow-mobile: none"></div>
|
|
94
|
-
${
|
|
95
|
-
${
|
|
96
|
-
${
|
|
97
|
-
class="${
|
|
98
|
-
style="${
|
|
94
|
+
${v("{%- assign options = product.options_with_values -%}")}
|
|
95
|
+
${v("{%- assign variants = product.variants -%}")}
|
|
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_}"
|
|
99
99
|
>
|
|
100
|
-
${
|
|
100
|
+
${$(H,ev(),ed())}
|
|
101
101
|
</div>`)}
|
|
102
102
|
</gp-product-variants>
|
|
103
103
|
|
|
104
|
-
${
|
|
104
|
+
${eg()}
|
|
105
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};
|