@gem-sdk/components 15.0.1 → 15.0.3
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/collection/settings/collection-banner/configs/settings.js +1 -1
- package/dist/cjs/product/components/product-variants/ProductVariants.liquid.js +4 -4
- package/dist/cjs/product/components/product-variants/common/base/attrs.js +1 -1
- package/dist/cjs/product/components/product-variants/common/variants/classes.js +1 -1
- package/dist/esm/collection/settings/collection-banner/configs/settings.js +1 -1
- package/dist/esm/product/components/product-variants/ProductVariants.liquid.js +8 -8
- package/dist/esm/product/components/product-variants/common/base/attrs.js +1 -1
- package/dist/esm/product/components/product-variants/common/variants/classes.js +1 -1
- package/package.json +1 -1
|
@@ -11,4 +11,4 @@
|
|
|
11
11
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.08398 6C5.08398 6.82843 5.75556 7.5 6.58398 7.5H11.584C12.4124 7.5 13.084 6.82843 13.084 6V5C13.084 4.17157 12.4124 3.5 11.584 3.5L6.58398 3.5C5.75556 3.5 5.08398 4.17157 5.08398 5V6ZM6.58398 6.5C6.30784 6.5 6.08398 6.27614 6.08398 6V5C6.08398 4.72386 6.30784 4.5 6.58398 4.5L11.584 4.5C11.8601 4.5 12.084 4.72386 12.084 5V6C12.084 6.27614 11.8601 6.5 11.584 6.5H6.58398Z" fill="currentColor"/>
|
|
12
12
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.58398 12.5C2.75556 12.5 2.08398 11.8284 2.08398 11L2.08398 10C2.08398 9.17157 2.75556 8.5 3.58398 8.5H11.584C12.4124 8.5 13.084 9.17157 13.084 10V11C13.084 11.8284 12.4124 12.5 11.584 12.5L3.58398 12.5ZM3.08398 11C3.08398 11.2761 3.30784 11.5 3.58398 11.5L11.584 11.5C11.8601 11.5 12.084 11.2761 12.084 11V10C12.084 9.72386 11.8601 9.5 11.584 9.5L3.58398 9.5C3.30784 9.5 3.08398 9.72386 3.08398 10L3.08398 11Z" fill="currentColor"/>
|
|
13
13
|
</svg>
|
|
14
|
-
`,iconName:"gp-justify-content-bottom"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",iconName:"gp-align-top",tooltip:"Align top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical",tooltip:"Align center"},{label:"End",value:"end",iconName:"gp-align-bottom",tooltip:"Align bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"content-dimension-group",type:"group",label:"Content Dimension",controls:[{id:"fixedMode",type:"toggle",default:!1},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:"500px"}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition",label:"Content Position",type:"option:value",options:[{label:"
|
|
14
|
+
`,iconName:"gp-justify-content-bottom"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",iconName:"gp-align-top",tooltip:"Align top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical",tooltip:"Align center"},{label:"End",value:"end",iconName:"gp-align-bottom",tooltip:"Align bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"content-dimension-group",type:"group",label:"Content Dimension",controls:[{id:"fixedMode",type:"toggle",default:!1},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:"500px"}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition",label:"Content Position",type:"option:value",options:[{label:"Left",value:"top",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"bottom",tooltip:"Align right",iconName:"gp-align-right"}],default:"center"},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0},tablet:{default:!0},mobile:{default:!0}}},{id:"width",type:"input:unit",label:"Width",min:0,units:["px"],devices:{desktop:{default:"1200px"}}},{id:"verticalGutter",type:"input:slider",units:["px"],min:0,max:120,ignoreMax:!0,label:"Spacing",devices:{desktop:{default:"32px"}}}]},{id:"image-info",label:"Image",type:"group",controls:[{id:"background",type:"collection-banner",ignoreReRender:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c.gif",width:1920,height:900,hiddenSEO:!0,hiddenLCP:!0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"hoverEffect",label:"Hover effect",type:"option:value",options:[{label:"None",value:"none"},{label:"Zoom",value:"zoom"}],default:"none"},{id:"hoverScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:1,default:110,useOnlyUnitInit:!0,isNumber:!0},{id:"hoverDuration",type:"input:unit",label:"Zoom Time",min:0,units:["s"],default:"0.5",useOnlyUnitInit:!0,isNumber:!0}]},{id:"overlay",label:"Overlay",type:"group",controls:[{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0}},{id:"overlayColor",label:"Color",type:"color-picker-v2",default:{normal:"#121212"},state:{normal:!0,hover:!0}}]}]}];exports.CollectionBannerSettings=CollectionBannerSettings;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
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,variantPresets: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}))}
|
|
2
|
+
${system.LiquidFor("value in values",index_liquid.default({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",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
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)),P=system.createStyle(styles.getVariantOptionGroupStyle(l,l)),E=getData.getTextVariantTitleData(e,"Liquid"),x=system.createClass(classes$1.getWrapVariantOptionClass(y,o)),N=()=>core.template`
|
|
4
4
|
${system.Liquid(`{%- assign presets = "${j()}" | split: '($1)' -%}`)}
|
|
5
5
|
${system.Liquid(`{% assign hiddenPresetOptions = "${O()}" | split: ',' %}`)}
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
<div className="${I}">
|
|
69
69
|
${DropdownGroup_liquid.default(F)}
|
|
70
70
|
</div>
|
|
71
|
-
`,G=system.createAttr(getAttr.getAttrs({uid:_,hasPreSelected:v,cssClass:a?.cssClass})),k=system.createStyle(styles.getWrapperStyle(e)),
|
|
71
|
+
`,G=system.createAttr(getAttr.getAttrs({uid:_,hasPreSelected:v,cssClass:a?.cssClass})),k=system.createStyle(styles.getWrapperStyle(e)),z=system.createClass({"gp-flex gp-flex-col !gp-ml-0":!0}),W=()=>{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
|
|
@@ -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="${
|
|
97
|
+
class="${z}"
|
|
98
98
|
style="${k}"
|
|
99
99
|
>
|
|
100
100
|
${system.If(f,C(),N())}
|
|
101
101
|
</div>`)}
|
|
102
102
|
</gp-product-variants>
|
|
103
103
|
|
|
104
|
-
${
|
|
104
|
+
${W()}
|
|
105
105
|
`};exports.default=ProductVariants;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const getWrapperAttr=(
|
|
1
|
+
"use strict";const getWrapperAttr=(e,a)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=e;return"Liquid"===a?{id:"value-wrapper-{{option.name | escape | strip | handleize}}-{{value | escape | strip | handleize}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};exports.getWrapperAttr=getWrapperAttr;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js");const getVariantItemLabelClass=t=>{let{available:e}=t,p="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":p&&!e}},getTooltipClass=()=>({"gp-hidden !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-block gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]":!0}),getTooltipSvgClass=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),getVariantOptionClass=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),getWrapVariantOptionClass=(t,e)=>{let p=core.getLayoutClasses(t),a=_function.getAlignClasses(t,e);return{"gp-flex variant-inside":!0,...p,...a}};exports.getTooltipClass=getTooltipClass,exports.getTooltipSvgClass=getTooltipSvgClass,exports.getVariantItemLabelClass=getVariantItemLabelClass,exports.getVariantOptionClass=getVariantOptionClass,exports.getWrapVariantOptionClass=getWrapVariantOptionClass;
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js");const getVariantItemLabelClass=t=>{let{available:e}=t,p="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative !gp-block gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":p&&!e}},getTooltipClass=()=>({"gp-hidden !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-block gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]":!0}),getTooltipSvgClass=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),getVariantOptionClass=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),getWrapVariantOptionClass=(t,e)=>{let p=core.getLayoutClasses(t),a=_function.getAlignClasses(t,e);return{"gp-flex variant-inside":!0,...p,...a}};exports.getTooltipClass=getTooltipClass,exports.getTooltipSvgClass=getTooltipSvgClass,exports.getVariantItemLabelClass=getVariantItemLabelClass,exports.getVariantOptionClass=getVariantOptionClass,exports.getWrapVariantOptionClass=getWrapVariantOptionClass;
|
|
@@ -11,4 +11,4 @@ let CollectionBannerSettings=[{id:"setting",controls:[{id:"layout",type:"layout"
|
|
|
11
11
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.08398 6C5.08398 6.82843 5.75556 7.5 6.58398 7.5H11.584C12.4124 7.5 13.084 6.82843 13.084 6V5C13.084 4.17157 12.4124 3.5 11.584 3.5L6.58398 3.5C5.75556 3.5 5.08398 4.17157 5.08398 5V6ZM6.58398 6.5C6.30784 6.5 6.08398 6.27614 6.08398 6V5C6.08398 4.72386 6.30784 4.5 6.58398 4.5L11.584 4.5C11.8601 4.5 12.084 4.72386 12.084 5V6C12.084 6.27614 11.8601 6.5 11.584 6.5H6.58398Z" fill="currentColor"/>
|
|
12
12
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.58398 12.5C2.75556 12.5 2.08398 11.8284 2.08398 11L2.08398 10C2.08398 9.17157 2.75556 8.5 3.58398 8.5H11.584C12.4124 8.5 13.084 9.17157 13.084 10V11C13.084 11.8284 12.4124 12.5 11.584 12.5L3.58398 12.5ZM3.08398 11C3.08398 11.2761 3.30784 11.5 3.58398 11.5L11.584 11.5C11.8601 11.5 12.084 11.2761 12.084 11V10C12.084 9.72386 11.8601 9.5 11.584 9.5L3.58398 9.5C3.30784 9.5 3.08398 9.72386 3.08398 10L3.08398 11Z" fill="currentColor"/>
|
|
13
13
|
</svg>
|
|
14
|
-
`,iconName:"gp-justify-content-bottom"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",iconName:"gp-align-top",tooltip:"Align top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical",tooltip:"Align center"},{label:"End",value:"end",iconName:"gp-align-bottom",tooltip:"Align bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"content-dimension-group",type:"group",label:"Content Dimension",controls:[{id:"fixedMode",type:"toggle",default:!1},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:"500px"}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition",label:"Content Position",type:"option:value",options:[{label:"
|
|
14
|
+
`,iconName:"gp-justify-content-bottom"}],devices:{desktop:{default:"start"}}},{id:"verticalAlign",type:"option:value",options:[{label:"Start",value:"start",iconName:"gp-align-top",tooltip:"Align top"},{label:"Center",value:"center",iconName:"gp-align-center-vertical",tooltip:"Align center"},{label:"End",value:"end",iconName:"gp-align-bottom",tooltip:"Align bottom"},{label:"Between",value:"space-between",tooltip:"Distribute vertical spacing",iconName:"gp-justify-content-space-between"}],devices:{desktop:{default:"start"}}},{id:"content-dimension-group",type:"group",label:"Content Dimension",controls:[{id:"fixedMode",type:"toggle",default:!1},{id:"height",label:"Height",type:"input:unit",units:["px"],placeholder:"Auto",devices:{desktop:{default:"500px"}},info:"Full Width: To set Hero Banner full width, first you drag & drop a Section element from left sidebar, then make it full-width, after that you put your Hero Banner inside Section you have created."},{id:"contentPosition",label:"Content Position",type:"option:value",options:[{label:"Left",value:"top",tooltip:"Align left",iconName:"gp-align-left"},{label:"Center",value:"center",tooltip:"Align center",iconName:"gp-align-center"},{label:"Right",value:"bottom",tooltip:"Align right",iconName:"gp-align-right"}],default:"center"},{id:"fullWidth",label:"Full Width",type:"toggle",devices:{desktop:{default:!0},tablet:{default:!0},mobile:{default:!0}}},{id:"width",type:"input:unit",label:"Width",min:0,units:["px"],devices:{desktop:{default:"1200px"}}},{id:"verticalGutter",type:"input:slider",units:["px"],min:0,max:120,ignoreMax:!0,label:"Spacing",devices:{desktop:{default:"32px"}}}]},{id:"image-info",label:"Image",type:"group",controls:[{id:"background",type:"collection-banner",ignoreReRender:!0,devices:{desktop:{default:{type:"image",image:{src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c.gif",width:1920,height:900,hiddenSEO:!0,hiddenLCP:!0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}}}},{id:"hoverEffect",label:"Hover effect",type:"option:value",options:[{label:"None",value:"none"},{label:"Zoom",value:"zoom"}],default:"none"},{id:"hoverScale",type:"input:slider",label:"Zoom Value",units:["%"],min:100,max:200,step:1,default:110,useOnlyUnitInit:!0,isNumber:!0},{id:"hoverDuration",type:"input:unit",label:"Zoom Time",min:0,units:["s"],default:"0.5",useOnlyUnitInit:!0,isNumber:!0}]},{id:"overlay",label:"Overlay",type:"group",controls:[{id:"overlayOpacity",label:"Opacity",type:"input:slider",min:0,max:100,units:["%"],step:1,default:{normal:"20%"},state:{normal:!0,hover:!0}},{id:"overlayColor",label:"Color",type:"color-picker-v2",default:{normal:"#121212"},state:{normal:!0,hover:!0}}]}]}];export{CollectionBannerSettings};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{template as e,isLocalEnv as t,baseAssetURL as
|
|
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:
|
|
3
|
-
${_(t?'type == "dropdown"':"false",r({...T,...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:
|
|
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 P}from"./common/main/getData.js";import{getWrapVariantOptionClass as b}from"./common/variants/classes.js";import{getStyleOfObject as A}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:z}=T??{},{label:L,optionType:J,showAsSwatches:M,layout:U,hasPreSelected:W}=x??{},R=q?.d??DEFAULT_ADVANCED_DISPLAY_SETTING,{uid:Y}=O??{},H="groupOption"===J,K=()=>{let e={};return s.forEach(t=>{let i=o(G,t);e[t]="auto"===i}),e},Q=()=>{let e={};return s.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,variantPresets: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 | handleize}}-{{value | escape | handleize}}",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 -%}":"",...T,...Z,swatchAutoWidth:K(),optionTypo:k,isRenderDefault:i}))}
|
|
3
|
+
${_(t?'type == "dropdown"':"false",r({...T,...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(F)),er=c(h(I,I)),ep=S(E,"Liquid"),el=m(b(U,F)),ed=()=>e`
|
|
4
4
|
${v(`{%- assign presets = "${et()}" | split: '($1)' -%}`)}
|
|
5
|
-
${v(`{% assign hiddenPresetOptions = "${
|
|
5
|
+
${v(`{% assign hiddenPresetOptions = "${ei()}" | split: ',' %}`)}
|
|
6
6
|
|
|
7
7
|
${v(`{% assign all_option_names = options | map: 'name' %}
|
|
8
8
|
{% assign filtered_options_string = '' %}
|
|
@@ -33,7 +33,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
|
|
|
33
33
|
<div
|
|
34
34
|
option-name="{{option.name | escape}}"
|
|
35
35
|
class="${el} ${_("hiddenPresetOptions contains option.name","gp-hidden")}"
|
|
36
|
-
style="${A(D(
|
|
36
|
+
style="${A(D(z))}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
|
|
37
37
|
>
|
|
38
38
|
${v("{%- assign showVariantClass = 'variant-display' -%}")}
|
|
39
39
|
${v("{%- assign optionName = option.name -%}")}
|
|
@@ -41,7 +41,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
|
|
|
41
41
|
${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
|
|
42
42
|
${_("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
|
|
43
43
|
`)}
|
|
44
|
-
${$(
|
|
44
|
+
${$(L,a(ep)," ")}
|
|
45
45
|
<div
|
|
46
46
|
variant-option-name="{{option.name | escape}}"
|
|
47
47
|
class="${en}"
|
|
@@ -59,7 +59,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
|
|
|
59
59
|
{%- endif -%}
|
|
60
60
|
`)}
|
|
61
61
|
${$(!W,v("{%- assign selectedValue = null -%}"),"")}
|
|
62
|
-
${$(M,em(),
|
|
62
|
+
${$(M,em(),es({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
|
|
63
63
|
</div>
|
|
64
64
|
</div>`)}
|
|
65
65
|
`,em=()=>e`
|
|
@@ -68,7 +68,7 @@ import{template as e,isLocalEnv as t,baseAssetURL as s,DEVICES as i,getResponsiv
|
|
|
68
68
|
<div className="${ec}">
|
|
69
69
|
${p(eu)}
|
|
70
70
|
</div>
|
|
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 }}":`${
|
|
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`
|
|
72
72
|
${v("{%- assign total_combinations = 1 -%}")}
|
|
73
73
|
${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
|
|
74
74
|
<gp-product-variants
|
|
@@ -1 +1 @@
|
|
|
1
|
-
let getWrapperAttr=(a,e)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip}}-{{value | escape | strip}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};export{getWrapperAttr};
|
|
1
|
+
let getWrapperAttr=(a,e)=>{let{typeOfOption:t,available:i,optionName:p,optionNameValue:o,isVariantOutStock:n}=a;return"Liquid"===e?{id:"value-wrapper-{{option.name | escape | strip | handleize}}-{{value | escape | strip | handleize}}","option-data":"{{option.name | escape}}","option-value":"{{value | escape}}","option-position":"{{option.position}}","data-gp-option-available":"{{value.available}}","option-type":`${t||"rectangle_list"}`,"data-disabled":"{%- if option_disabled == true -%} disabled {%- endif -%}","data-hidden":"true"}:{id:`value-wrapper-${p}-${o}`,"option-data":p||"","option-value":o||"","option-position":1,"data-gp-option-available":!!i,"option-type":`${t||"rectangle_list"}`,"data-disabled":!!n,"data-hidden":"true"}};export{getWrapperAttr};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getLayoutClasses as t}from"@gem-sdk/core";import{getAlignClasses as p}from"../../../../helpers/function.js";let getVariantItemLabelClass=t=>{let{available:p}=t,e="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":e&&!p}},getTooltipClass=()=>({"gp-hidden !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-block gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]":!0}),getTooltipSvgClass=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),getVariantOptionClass=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),getWrapVariantOptionClass=(e,a)=>{let g=t(e),o=p(e,a);return{"gp-flex variant-inside":!0,...g,...o}};export{getTooltipClass,getTooltipSvgClass,getVariantItemLabelClass,getVariantOptionClass,getWrapVariantOptionClass};
|
|
1
|
+
import{getLayoutClasses as t}from"@gem-sdk/core";import{getAlignClasses as p}from"../../../../helpers/function.js";let getVariantItemLabelClass=t=>{let{available:p}=t,e="disable"===t.soldOutStyle;return{[`option-item gp-group gp-relative !gp-block gp-child-item-${t.uid}`]:!0,"gp-pointer-events-none gp-opacity-20":e&&!p}},getTooltipClass=()=>({"gp-hidden !gp-max-w-[150px] gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-absolute gp-bottom-[calc(100%+20px)] gp-text-[12px] group-hover:gp-block gp-w-max gp-bg-[#333333] gp-text-[#F9F9F9] gp-px-[8px] gp-py-[4px] gp-rounded-[8px] gp-mb-[-10px] after:gp-content-[''] after:gp-absolute after:gp-p-[7px] after:gp-left-0 after:gp-w-full after:gp-bottom-[-10px]":!0}),getTooltipSvgClass=()=>({"gp-absolute gp-left-[50%] gp-translate-x-[-50%] gp-translate-y-0 gp-z-10 gp-bottom-[-4px]":!0}),getVariantOptionClass=()=>({"option-item-inner gp-w-auto gp-h-auto":!0}),getWrapVariantOptionClass=(e,a)=>{let g=t(e),o=p(e,a);return{"gp-flex variant-inside":!0,...g,...o}};export{getTooltipClass,getTooltipSvgClass,getVariantItemLabelClass,getVariantOptionClass,getWrapVariantOptionClass};
|