@gem-sdk/components 19.0.0-staging.8 → 19.1.0-dev.0

package/dist/esm/product/components/product-variants/OptionVariantsNewFormat.liquid.js

@@ -2,6 +2,16 @@ import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@
     ${s("{%- assign optionRendered = false -%}")}
     ${s("{%- assign swatches = shop.metafields.GEMPAGES.swatchesJSONFormat.value -%}")}
 
+    ${s(`{%- assign variantPresetString = "${r}" -%}
+      {%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
+      {%- assign items = variantPresetString | split: '($2)' -%}
+      {%- assign type = 'dropdown' -%}
+      {% for item in items %}
+        {%- assign itemPreset = item | split: '($1)' -%}
+        {% if itemPreset[0] == optionName %}{%- assign type = itemPreset[1] -%}{% endif %}
+        {% if itemPreset[0] == 'base' %}{%- assign type = itemPreset[1] -%}{% endif %}
+      {% endfor %}`)}
+
     ${s(`{% for swatch in swatches %}
       {%- assign optionTitle = swatch.optionTitle -%}
       {%- assign optionType = swatch.optionType -%}
@@ -21,21 +31,10 @@ import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@
       {%- assign imageUrls = imageUrlsString | split: '${n}' | slice: 0, imageUrlsString.size -%}
 
       {% if optionTitle == option.name %}
-        {%- assign variantPresetString = "${r}" -%}
-        {%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
-        {%- assign items = variantPresetString | split: '($2)' -%}
-        {%- assign type = 'dropdown' -%}
-
-        {% for item in items %}
-          {%- assign itemPreset = item | split: '($1)' -%}
-          {% if itemPreset[0] == optionName %}{%- assign type = itemPreset[1] -%}{% endif %}
-          {% if itemPreset[0] == 'base' %}{%- assign type = itemPreset[1] -%}{% endif %}
-        {% endfor %}
         {%- assign optionRendered = true -%}
-
         ${o({showDropdown:!0})}
       {% endif %}
     {% endfor %}`)}
 
-    ${i("optionRendered == false",o({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+    ${i("optionRendered == false",o({showDropdown:!0,isRenderDefault:!0,typeOfOption:"optionType"}))}
   `};export{t as renderOptionValuesNewFormatSwatches};

package/dist/esm/product/components/product-variants/OptionVariantsOldFormat.liquid.js

@@ -3,6 +3,16 @@ import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{tem
     ${e("{%- assign swatches = shop.metafields.GEMPAGES.swatches -%}")}
     ${e("{%- assign swatchesItems = swatches | split: '($1)' -%}")}
 
+    ${e(`{%- assign variantPresetString = "${o}" -%}
+      {%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
+      {%- assign items = variantPresetString | split: '($2)' -%}
+      {%- assign type = 'dropdown' -%}
+      {% for item in items %}
+        {%- assign itemPreset = item | split: '($1)' -%}
+        {% if itemPreset[0] == optionName %}{%- assign type = itemPreset[1] -%}{% endif %}
+        {% if itemPreset[0] == 'base' %}{%- assign type = itemPreset[1] -%}{% endif %}
+      {% endfor %}`)}
+
     ${s("swatchesItem in swatchesItems",`
       ${e('{%- assign colorArraysString = "" -%}')}
       ${e('{%- assign labelsString = "" -%}')}
@@ -48,19 +58,10 @@ import{Liquid as e,LiquidFor as s,LiquidIf as t}from"@gem-sdk/system";import{tem
       ${e("{%- assign imageUrls = imageUrlsString | split: '($8)' -%}")}
 
       ${t("optionTitle == option.name",`
-        ${e(`{%- assign variantPresetString = "${o}" -%}`)}
-        ${e('{%- assign optionName = option.name | replace: "\'", "'" | replace: \'"\', """ -%}')}
-        ${e("{%- assign items = variantPresetString | split:'($2)' -%}")}
-        ${e("{%- assign type = 'dropdown' -%}")}
-        ${s("item in items",`
-            ${e("{%- assign itemPreset = item | split:'($1)' -%}")}
-            ${t("itemPreset[0] == optionName",e("{%- assign type = itemPreset[1] -%}"))}
-            ${t('itemPreset[0] == "base"',e("{%- assign type = itemPreset[1] -%}"))}
-          `)}
         ${e("{%- assign optionRendered = true -%}")}
         ${n({showDropdown:!0})}
       `)}
     `)}
 
-    ${t("optionRendered == false",n({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+    ${t("optionRendered == false",n({showDropdown:!0,isRenderDefault:!0,typeOfOption:"optionType"}))}
   `};export{a as renderOptionValuesOld};

package/dist/esm/product/components/product-variants/ProductVariants.liquid.js

@@ -1,46 +1,46 @@
-import{template as e,baseAssetURL as t,isLocalEnv as o,DEVICES as i,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 g}from"@gem-sdk/system";import{getAttrs as _}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 b,getDropdownGroupData as S}from"./common/main/getData.js";import{getWrapVariantOptionClass as P}from"./common/variants/classes.js";import{getStyleOfObject as O}from"../../helpers/function.js";import{getMarginBottomStyle as x}from"./common/variants/styles.js";import{PRODUCT_VARIANT_OPTION_MINW_STYLE as V}from"./common/const.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as A}from"./OptionVariantsOldFormat.liquid.js";let q={desktop:!0,tablet:!0,mobile:!0},D=D=>{let{builderProps:E,styles:T,setting:k,advanced:F}=D,{align:G,swatchItemWidth:z,dropdownItemWidth:C,swatchSpacing:J,optionTypo:I,marginBottom:M}=T??{},{label:W,optionType:L,showAsSwatches:R,layout:H,hasPreSelected:K}=k??{},Q=F?.d??q,{uid:U}=E??{},B=()=>{let e={};return i.forEach(t=>{let o=s(z,t);e[t]="auto"===o}),e},X=()=>{let e={};return i.forEach(t=>{e[t]=C?.[t]==="fill"}),e},Y=k?.variantPresets?d(k?.variantPresets,T):[],Z=Y?.map(e=>(e.presets={[e.optionType]:e.presets[e.optionType]},e)),ee={...k,variantPresets:Z},et=e=>{let t={"'":"'",'"':"""},o=e;for(let i in t)e.indexOf(i)>=0&&(o=o.replaceAll(i,t[i]));return o},eo=({showDropdown:t,isRenderDefault:o,typeOfOption:i})=>e`
-    ${f("value in values",n({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:R,uid:U,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:K?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:i,activeClass:K?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...ee,swatchAutoWidth:B(),optionTypo:I,isRenderDefault:o}))}
-      ${$(t?'type == "dropdown"':"false",r({...T,...ee,swatchAutoWidth:X(),optionTypo:I}))}`,ei=k?.variantPresets?.map(e=>({name:et(e.optionName),type:e.optionType})).map(e=>`${e.name}($1)${e.type}`).join("($2)").toString(),es={renderVariantItem:eo,variantPresetsLiquid:ei??""},ea=m(j(G)),en=c(h(J,J)),er=b(D,"Liquid"),ep=m(P(H,G)),el=m(w(G)),ed=S(D),em=u(_({uid:U,hasPreSelected:K,cssClass:F?.cssClass})),ec=c(y(D)),eu=m({"gp-flex gp-flex-col !gp-ml-0":!0});return e`
+import{template as t,baseAssetURL as e,isLocalEnv as i,DEVICES as o,getResponsiveValueByScreen as s}from"@gem-sdk/core";import n from"../../../text/components/Text.liquid.js";import a 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 g}from"@gem-sdk/system";import{getAttrs as _}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 b,getDropdownGroupData as S}from"./common/main/getData.js";import{getWrapVariantOptionClass as P}from"./common/variants/classes.js";import{getStyleOfObject as O}from"../../helpers/function.js";import{getMarginBottomStyle as x}from"./common/variants/styles.js";import{PRODUCT_VARIANT_OPTION_MINW_STYLE as V}from"./common/const.js";import{renderOptionValuesNewFormatSwatches as N}from"./OptionVariantsNewFormat.liquid.js";import{renderOptionValuesOld as A}from"./OptionVariantsOldFormat.liquid.js";let q={desktop:!0,tablet:!0,mobile:!0},D=D=>{let{builderProps:E,styles:T,setting:k,advanced:F}=D,{align:G,swatchItemWidth:z,dropdownItemWidth:C,swatchSpacing:J,optionTypo:I,marginBottom:M}=T??{},{label:W,optionType:L,showAsSwatches:R,layout:H,hasPreSelected:K}=k??{},Q=F?.d??q,{uid:U}=E??{},B=()=>{let t={};return o.forEach(e=>{let i=s(z,e);t[e]="auto"===i}),t},X=()=>{let t={};return o.forEach(e=>{t[e]=C?.[e]==="fill"}),t},Y=k?.variantPresets?d(k?.variantPresets,T):[],Z=Y?.map(t=>(t.presets={[t.optionType]:t.presets[t.optionType]},t)),tt={...k,variantPresets:Z},te=t=>{let e={"'":"'",'"':"""},i=t;for(let o in e)t.indexOf(o)>=0&&(i=i.replaceAll(o,e[o]));return i},ti=({showDropdown:e,isRenderDefault:i,typeOfOption:o})=>t`
+    ${f("value in values",a({id:"{{option.name | escape | handleize}}-{{value | escape | handleize}}",variantKey:"{{option.name | escape}}-{{option.position}}-{{ forloop.index }}",showAsSwatches:R,uid:U,name:"{{option.name | escape}}",value:{label:"{{value | escape}}"},checked:K?"{%- if option.selected_value == value -%}true{% else %}false{%- endif -%}":"false",optionPosition:"rootForloop",typeOfOption:o,activeClass:K?"{%- if option.selected_value == value -%}option-item-active{%- endif -%}":"",...T,...tt,swatchAutoWidth:B(),optionTypo:I,isRenderDefault:i}))}
+      ${$(e?'type == "dropdown"':"false",r({...T,...tt,swatchAutoWidth:X(),optionTypo:I}))}`,to=k?.variantPresets?.map(t=>({name:te(t.optionName),type:t.optionType})).map(t=>`${t.name}($1)${t.type}`).join("($2)").toString(),ts={renderVariantItem:ti,variantPresetsLiquid:to??""},tn=m(j(G)),ta=c(h(J,J)),tr=b(D,"Liquid"),tp=m(P(H,G)),tl=m(w(G)),td=S(D),tm=u(_({uid:U,hasPreSelected:K,cssClass:F?.cssClass})),tc=c(y(D)),tu=m({"gp-flex gp-flex-col !gp-ml-0":!0});return t`
     ${v("{%- assign total_combinations = 1 -%}")}
     ${f("option in product.options_with_values","{%- assign total_combinations = total_combinations | times: option.values.size -%}")}
-    <gp-product-variants
-      ${em}
-      gp-data='{
-        "setting":${JSON.stringify(ee)?.replaceAll("'","&#039;")},
-        "styles":${JSON.stringify(T)},
-        "variants":{{product.variants | json | escape}},
-        "optionsWithValues": {{product.options_with_values | json | escape}},
-        "variantSelected": {{ variant | json | escape }},
-        "variantInventoryQuantity": {{product.variants | map: 'inventory_quantity' | json | escape}},
-        "variantInventoryPolicy": {{product.variants | map: 'inventory_policy' | json | escape}},
-        "moneyFormat": {{shop.money_format | json | escape}},
-        "productId": {{product.id | json | escape}},
-        "productUrl": {{product.url | json | escape}},
-        "productHandle": {{product.handle | json | escape}},
-        "displayState": ${JSON.stringify(Q)},
-        "totalVariantCombinations": {{total_combinations}},
-        "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
-      }
-    '>
+    <gp-product-variants ${tm}>
+      <script gp-data type="application/json">
+        {
+          "setting":${JSON.stringify(tt)?.replaceAll("'","&#039;")},
+          "styles":${JSON.stringify(T)},
+          "variants":{{product.variants | json}},
+          "optionsWithValues": {{product.options_with_values | json}},
+          "variantSelected": {{ variant | json }},
+          "variantInventoryQuantity": {{product.variants | map: 'inventory_quantity' | json }},
+          "variantInventoryPolicy": {{product.variants | map: 'inventory_policy' | json }},
+          "moneyFormat": {{shop.money_format | json }},
+          "productId": {{product.id | json }},
+          "productUrl": {{product.url | json }},
+          "productHandle": {{product.handle | json }},
+          "displayState": ${JSON.stringify(Q)},
+          "totalVariantCombinations": {{total_combinations}},
+          "firstAvailableVariant": {{product.selected_or_first_available_variant | json }}
+        }
+      </script>
       <div class="gp-hidden" style="--hvr-shadow: none; --hvr-shadow-tablet: none; --hvr-shadow-mobile: none"></div>
       ${v("{%- assign options = product.options_with_values -%}")}
       ${v("{%- assign variants = product.variants -%}")}
-      ${$("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
-            class="${eu}"
-            style="${ec}"
+      ${$("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>",t`<div
+            class="${tu}"
+            style="${tc}"
           >
           ${g("groupOption"===L,`
-      <div className="${el}">
-        ${p(ed)}
+      <div className="${tl}">
+        ${p(td)}
       </div>
-    `,e`
-      ${v(`{%- assign presets = "${k?.variantPresets?.map(e=>`${et(e.optionName)}($2)${e.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
-      ${v(`{% assign hiddenPresetOptions = "${k?.variantPresets?.filter(e=>!!e?.hide)?.map(e=>e.optionName).join(",")}" | split: ',' %}`)}
-      
+    `,t`
+      ${v(`{%- assign presets = "${k?.variantPresets?.map(t=>`${te(t.optionName)}($2)${t.optionType}`).join("($1)")}" | split: '($1)' -%}`)}
+      ${v(`{% assign hiddenPresetOptions = "${k?.variantPresets?.filter(t=>!!t?.hide)?.map(t=>t.optionName).join(",")}" | split: ',' %}`)}
+
       ${v(`{% assign all_option_names = options | map: 'name' %}
       {% assign filtered_options_string = '' %}
       {% assign delimiter = '||' %}
-      
+
       {% for item_name in all_option_names %}
         {% assign is_excluded = false %}
         {% for exclude_name in hiddenPresetOptions %}
@@ -48,7 +48,7 @@ import{template as e,baseAssetURL as t,isLocalEnv as o,DEVICES as i,getResponsiv
             {% assign is_excluded = true %}
           {% endif %}
         {% endfor %}
-        
+
         {% unless is_excluded %}
           {% if filtered_options_string == '' %}
             {% assign filtered_options_string = item_name %}
@@ -57,15 +57,15 @@ import{template as e,baseAssetURL as t,isLocalEnv as o,DEVICES as i,getResponsiv
           {% endif %}
         {% endunless %}
       {% endfor %}
-      
+
       {% assign filtered_options_array = filtered_options_string | split: delimiter %}`)}
-      
+
       ${v("{% assign last_option_name = filtered_options_array | last %}")}
-      
+
       ${f("option in options",`
         <div
         option-name="{{option.name | escape}}"
-        class="${ep} ${$("hiddenPresetOptions contains option.name","gp-hidden")}"
+        class="${tp} ${$("hiddenPresetOptions contains option.name","gp-hidden")}"
         style="${O(x(M))}${V}${v("{% if forloop.last or option.name == last_option_name %}--mb:0;--mb-mobile:0;--mb-tablet:0;{% endif %}")}"
         >
           ${v("{%- assign showVariantClass = 'variant-display' -%}")}
@@ -74,11 +74,11 @@ import{template as e,baseAssetURL as t,isLocalEnv as o,DEVICES as i,getResponsiv
             ${v("{%- assign presetDetail = preset | split: '($2)' -%}")}
             ${$("presetDetail[1] == 'dropdown' and presetDetail[0] == optionName",`${v("{%- assign showVariantClass = '' -%}")} ${v("{%- break -%}")}`)}
           `)}
-          ${g(W,a(er)," ")}
+          ${g(W,n(tr)," ")}
           <div
               variant-option-name="{{option.name | escape}}"
-              class="${ea}"
-              style="${O(en)}"
+              class="${tn}"
+              style="${O(ta)}"
             >
               ${v("{%- assign values = option.values -%}")}
               ${v("{%- assign rootForloop = forloop.index0 -%}")}
@@ -92,14 +92,14 @@ import{template as e,baseAssetURL as t,isLocalEnv as o,DEVICES as i,getResponsiv
                 {%- endif -%}
               `)}
               ${g(!K,v("{%- assign selectedValue = null -%}"),"")}
-              ${g(R,e`
-      ${$("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",N(es),A(es))}
-      `,eo({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
+              ${g(R,t`
+      ${$("shop.metafields.GEMPAGES.swatchesJSONFormat and shop.metafields.GEMPAGES.swatchesJSONFormat != blank",N(ts),A(ts))}
+      `,ti({showDropdown:!1,isRenderDefault:!0,typeOfOption:"optionType"}))}
           </div>
       </div>`)}
     `)}
         </div>`)}
     </gp-product-variants>
 
-    ${(()=>{let e=o?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${t}/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>`})()}
+    ${(()=>{let t=i?"{{ 'gp-product-variant-v7-5.js' | asset_url }}":`${e}/assets-v2/gp-product-variant-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}`;return`<script ${l('class="gps-link" delay',"src")}="${t}" defer="defer"></script>`})()}
   `};export{D as default};

package/dist/esm/product/components/product-wrap/Product.liquid.js

@@ -1,11 +1,11 @@
-import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-sdk/core";import a from"../../../grid/components/row/Row.liquid.js";import{LiquidIf as d,If as o}from"@gem-sdk/system";import{getSettingPreloadData as n,getStaticLocale as s}from"../../../helpers.js";import{getData as c,DYNAMIC_PRODUCT_STATUS as p,STATIC_PRODUCT_STATUS as l,PRODUCT_ID_LATEST as u}from"./common/helpers.js";let f=f=>{let{children:m,setting:g,style:y,builderProps:v,rawChildren:_,advanced:$}=f,{isSyncProduct:S,productSetting:I}=g??{},b=I?.hasPreSelected??!1,{rowSetting:j,rowStyles:h,formatVariantId:q,formatProductId:P,productStatus:V,preSelectedOptionIds:k,productHandle:w,advancedStyle:E}=c(f);return r`
+import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-sdk/core";import o from"../../../grid/components/row/Row.liquid.js";import{LiquidIf as a,If as d}from"@gem-sdk/system";import{getSettingPreloadData as n,getStaticLocale as s}from"../../../helpers.js";import{getData as c,DYNAMIC_PRODUCT_STATUS as l,STATIC_PRODUCT_STATUS as p,PRODUCT_ID_LATEST as u}from"./common/helpers.js";let f=f=>{let{children:m,setting:g,style:y,builderProps:v,rawChildren:_,advanced:$}=f,{isSyncProduct:S,productSetting:h}=g??{},j=h?.hasPreSelected??!1,{rowSetting:I,rowStyles:b,formatVariantId:P,formatProductId:q,productStatus:V,preSelectedOptionIds:k,productHandle:w,advancedStyle:E}=c(f);return r`
     ${r`
       {%- assign gpBkProduct = product -%}
-      ${o(V==p,r`
+      ${d(V==l,r`
       {%- liquid
         if request.page_type != 'product'
           assign product = all_products['${w}']
-          assign productId = '${P}' | times: 1
+          assign productId = '${q}' | times: 1
           if product == empty or product == null
             paginate collections.all.products by 100000
               for item in collections.all.products
@@ -20,14 +20,14 @@ import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-s
     `,r`
       {%- liquid
         if request.page_type == 'product'
-          if '${V}' == '${l}'
-            if '${P}' == '${u}'
+          if '${V}' == '${p}'
+            if '${q}' == '${u}'
               paginate collections.all.products by 100000
                 assign product = collections.all.products | sort: 'created_at' | reverse | first
               endpaginate
             else
               assign product = all_products['${w}']
-              assign productId = '${P}' | times: 1
+              assign productId = '${q}' | times: 1
               if product == empty or product == null
                 paginate collections.all.products by 100000
                   for item in collections.all.products
@@ -40,13 +40,13 @@ import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-s
             endif
           endif
         else
-          if '${P}' == '${u}'
+          if '${q}' == '${u}'
             paginate collections.all.products by 100000
               assign product = collections.all.products | sort: 'created_at'| reverse | first
             endpaginate
           else
             assign product = all_products['${w}']
-            assign productId = '${P}' | times: 1
+            assign productId = '${q}' | times: 1
             if product == empty or product == null
               paginate collections.all.products by 100000
                 for item in collections.all.products
@@ -61,33 +61,36 @@ import{RenderIf as t,isLocalEnv as e,baseAssetURL as i,template as r}from"@gem-s
       -%}
     `)}
     `}
-    ${d("product != empty and product != null",r`
+    ${a("product != empty and product != null",r`
       ${r`
-      {%- assign initVariantId = ${q} -%}
+      {%- assign initVariantId = ${P} -%}
       {%- assign product_form_id = 'product-form-' | append: "${v?.uid}" -%}
-      ${q?"{%- assign variant = product.variants | where: 'id', initVariantId | first -%}":"{%- assign variant = product.selected_or_first_available_variant -%}"}
-      ${q?"{%- assign productSelectedVariant = product.variants | where: 'id', initVariantId | first -%}":"{%- assign productSelectedVariant = product.selected_or_first_available_variant -%}"}
+      ${P?"{%- assign variant = product.variants | where: 'id', initVariantId | first -%}":"{%- assign variant = product.selected_or_first_available_variant -%}"}
+      ${P?"{%- assign productSelectedVariant = product.variants | where: 'id', initVariantId | first -%}":"{%- assign productSelectedVariant = product.selected_or_first_available_variant -%}"}
       {%-if productSelectedVariant == empty or productSelectedVariant == null -%}
         {%- assign productSelectedVariant = product.selected_or_first_available_variant -%}
       {%- endif -%}
       {%-if variant == empty or variant == null -%}
         {%- assign variant = product.selected_or_first_available_variant -%}
       {%- endif -%}
+      {% unless isSettingSameHeightProductList %}
+        {%- assign isSettingSameHeightProductList = false -%}
+      {% endunless %}
     `}
       <gp-product
         data-uid="${v?.uid}"
         data-id="${v?.uid}"
         style="${E}"
         class="${$?.cssClass}"
-        gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${k}], "isSyncProduct": "${S}", "hasPreSelected": ${b}, "variantSelected": {{ variant | json | escape }},  "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity | default: 0 }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
-        gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }}}'
+        gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${k}], "isSyncProduct": "${S}", "hasPreSelected": ${j}, "variantSelected": {{ variant | json | escape }},  "inventory_management": {{ variant.inventory_management | json | escape  }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity | default: 0 }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
       >
+        <script gp-data type="application/json">{"variantSelected": {{ variant | json }}, "quantity": 1, "productUrl":{{ product.url | json }}, "productHandle":{{ product.handle | json }}, "collectionUrl": {{ collection.url | json }}, "collectionHandle": {{ collection.handle | json }}}</script>
         <product-form class="product-form">
           {%- form 'product', product, id: product_form_id, class: 'form contents', data-type: 'add-to-cart-form', autocomplete: 'off'  -%}
             <input type="hidden" name="id" value="{{ variant.id }}" />
             <input type="hidden" name="quantity" value="{{ quantity }}" />
             <button type="submit" onclick="return false;" style="display:none;"></button>
-            ${a({builderProps:{...v,uid:v?.uid,uidInteraction:`${v?.uid}-row`},style:y,styles:h,setting:j,children:m,rawChildren:_})}
+            ${o({builderProps:{...v,uid:v?.uid,uidInteraction:`${v?.uid}-row`},style:y,styles:b,setting:I,children:m,rawChildren:_})}
           {%- endform -%}
         </product-form>
       </gp-product>

package/dist/esm/product/index.js

@@ -1 +1 @@
-export{default as Product}from"./components/product-wrap/Product.js";import"react/jsx-runtime";import"next/link";import"@gem-sdk/core";import"react";import"@gem-sdk/system";import"../notification/components/Notifications.js";import"../notification/components/Notice.js";import"./components/product-button/types.js";import"./components/product-variants/components/variants/index.js";import"next/image";import"../modal/components/confirm.js";import"react-dom";import"../video/components/Video.js";import"@gem-sdk/keen-slider/react";export{default as ProductQuickView}from"./components/product-quick-view/QuickView.js";import"./components/constants/product-bundle.js";export{default as ProductListV3}from"./components/product-list-v3/ProductList.js";export{default as ProductList}from"./components/product-list/ProductList.js";import"./components/product-bundle/common/styles.js";import"./components/product-bundle/common/classes.js";import"./components/product-badge/constants.js";import"./components/product-badge/types.js";import"./components/product-badge/utils/shape.js";import t from"./settings/Product.js";import o from"./settings/ProductQuantity.js";import r from"./settings/ProductTitle.js";import s from"./settings/ProductButton.js";import i from"./settings/ProductPrice.js";import e from"./settings/ProductVariants.js";import m from"./settings/ProductImages.js";import c from"./settings/product-image-v3/ProductImages.js";import n from"./settings/product-image-v2/ProductImages.js";import d from"./settings/ProductDescription.js";import p from"./settings/ProductProperties.js";import u from"./settings/ProductTag.js";import a from"./settings/ProductListV3.js";import P from"./settings/ProductList.js";import g from"./settings/DynamicCheckout.js";import j from"./settings/Vendor.js";import f from"./settings/Sku.js";import l from"./components/product-bundle/setting/ProductBundleDiscount.js";import V from"./components/product-bundle/setting/ProductBundleDiscountItem.js";import k from"./settings/ProductViewMore.js";import x from"./settings/ProductBadge.js";import b from"./components/file-upload/settings/index.js";let y={Product:t,ProductQuantity:o,ProductTitle:r,ProductButton:s,ProductPrice:i,ProductVariants:e,ProductImages:m,ProductImagesV2:n,ProductImagesV3:c,ProductDescription:d,ProductProperties:p,ProductTag:u,ProductListV3:a,ProductList:P,DynamicCheckout:g,ProductVendor:j,ProductSku:f,ProductBundleDiscount:l,ProductBundleDiscountItem:V,ProductViewMore:k,ProductBadge:x,FileUpload:b};export{y as productSetting};
+export{default as Product}from"./components/product-wrap/Product.js";import"react/jsx-runtime";import"next/link";import"@gem-sdk/core";import"react";import"@gem-sdk/system";import"../notification/components/Notifications.js";import"../notification/components/Notice.js";import"./components/product-button/types.js";import"./components/product-variants/components/variants/index.js";import"next/image";import"../carousel-v3/components/swiper/Swiper.js";import"../modal/components/confirm.js";import"react-dom";import"../video/components/Video.js";import"@gem-sdk/keen-slider/react";export{default as ProductQuickView}from"./components/product-quick-view/QuickView.js";import"./components/constants/product-bundle.js";export{default as ProductListV3}from"./components/product-list-v3/ProductList.js";export{default as ProductList}from"./components/product-list/ProductList.js";import"./components/product-bundle/common/styles.js";import"./components/product-bundle/common/classes.js";import"./components/product-badge/constants.js";import"./components/product-badge/types.js";import"./components/product-badge/utils/shape.js";import t from"./settings/Product.js";import o from"./settings/ProductQuantity.js";import r from"./settings/ProductTitle.js";import s from"./settings/ProductButton.js";import i from"./settings/ProductPrice.js";import e from"./settings/ProductVariants.js";import m from"./settings/ProductImages.js";import c from"./settings/product-image-v3/ProductImages.js";import n from"./settings/product-image-v2/ProductImages.js";import p from"./settings/ProductDescription.js";import u from"./settings/ProductProperties.js";import d from"./settings/ProductTag.js";import a from"./settings/ProductListV3.js";import P from"./settings/ProductList.js";import g from"./settings/DynamicCheckout.js";import j from"./settings/Vendor.js";import f from"./settings/Sku.js";import l from"./components/product-bundle/setting/ProductBundleDiscount.js";import V from"./components/product-bundle/setting/ProductBundleDiscountItem.js";import k from"./settings/ProductViewMore.js";import x from"./settings/ProductBadge.js";import b from"./components/file-upload/settings/index.js";let v={Product:t,ProductQuantity:o,ProductTitle:r,ProductButton:s,ProductPrice:i,ProductVariants:e,ProductImages:m,ProductImagesV2:n,ProductImagesV3:c,ProductDescription:p,ProductProperties:u,ProductTag:d,ProductListV3:a,ProductList:P,DynamicCheckout:g,ProductVendor:j,ProductSku:f,ProductBundleDiscount:l,ProductBundleDiscountItem:V,ProductViewMore:k,ProductBadge:x,FileUpload:b};export{v as productSetting};

package/dist/esm/product/settings/product-image-v3/configs/ui-v2.js

@@ -1 +1 @@
-import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as o}from"./ui/FeatureNavigation.js";import{FeatureDots as e}from"./ui/FeatureDots.js";let t='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',n='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',l=[{label:"Layout",controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:"Ratio",type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:"Ratio",type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:"Featured image",conditionDisplay:n,controls:[{setting:{id:"ftShape"},hiddenOnMobile:!0,layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:"Image scale",setting:{id:"ftLayout"}},{...e,hiddenOnMobile:!0,conditionDisplay:`${n} && position === "only-feature"`},{...o,hiddenOnMobile:!0,conditionDisplay:`${n}`}],moreSettings:{type:"collapse",controls:[{label:"Corner",setting:{id:"ftCorner"},hiddenOnMobile:!0},{type:"combo",label:"Hover action",conditionDisplay:n,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",hiddenOnMobile:!0,controls:[{label:"When hover",setting:{id:"hoverEffect"}},{label:"Zoom type",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:"Zoom value",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:"Other image",conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:"Click action",hiddenOnMobile:!0,iconName:"gp-trigger-action-click",conditionDisplay:n,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:"After click",setting:{id:"ftClickOpenLightBox"}},{label:"Open new tab",setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:"Slide speed",setting:{id:"ftAnimationSpeed"}},{type:"control",label:"Animation",setting:{id:"ftAnimationMode"}},{label:"Drag / swipe",setting:{id:"ftDragToScroll"}},{label:"Infinity loop",setting:{id:"ftLoop"}}]}},{label:"Image list",conditionDisplay:'(position !== "only-feature")',controls:[{label:"Display",hiddenOnMobile:!0,conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "one-col"'},{label:"Image gap",setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:"Image scale",setting:{id:"layout"}},{...i,hiddenOnMobile:!0,conditionDisplay:t}],moreSettings:{type:"collapse",controls:[{label:"Corner",hiddenOnMobile:!0,setting:{id:"corner"}},{label:"Active border",hiddenOnMobile:!0,conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:"Hover action",conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",hiddenOnMobile:!0,compoDefaultValue:"zoom",controls:[{label:"When hover",setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:"Zoom type",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:"Zoom value",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:"Other image",conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:"Click action",setting:{id:"clickOpenLightBox"}},{conditionDisplay:t,label:"Drag / swipe",setting:{id:"dragToScroll"}},{conditionDisplay:t,label:"Infinity loop",setting:{id:"loop"}}]}},{label:"Item spacing",hiddenOnMobile:!0,conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:"Gap",setting:{id:"spacing"}}]},{label:"Display condition",controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:"Default item",setting:{id:"preDisplay"}},{label:"Image list",setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:"Optimize LCP",conditionDisplay:'pageType !== "STATIC"',controls:[{label:"Preload",conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:"Quality",setting:{id:"qualityType"},conditionDisplay:"preload === false"},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && preload === false',setting:{id:"qualityPercent"}}]},{hiddenOnMobile:!0,controls:[{label:"Align",conditionEnable:'!(parseInt(ftShape.width) >= 100 && ftShape.width?.includes("%"))',setting:{id:"align"},options:{labelVariant:"primary",disableMessage:"Horizontal alignment is disabled when the width is set to 100% or greater"}}]}];export{l as SettingUIV2};
+import{ImageListNavigation as i}from"./ui/ImageListNavigation.js";import{FeatureNavigation as o}from"./ui/FeatureNavigation.js";import{FeatureDots as t}from"./ui/FeatureDots.js";let e='((type == "slider" || position == "left" || position == "right") && position !== "one-col" && position != "two-col")',n='(["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position))',l=[{label:"Layout",controls:[{layout:"vertical",setting:{id:"position"},options:{isComboLayout:!0},controls:[{label:"Ratio",type:"control",setting:{id:"ratioLayout"},layout:"vertical",conditionDisplay:'position == "left"'},{label:"Ratio",type:"control",setting:{id:"ratioLayoutRight"},layout:"vertical",conditionDisplay:'position == "right"'}]}]},{label:"Featured image",conditionDisplay:n,controls:[{setting:{id:"ftShape"},hiddenOnMobile:!0,layout:"vertical",controlChangeTrigger:{settings:[{condition:"ftShape.shape === 'original'",source:["ftShape"],action:{controlId:"ftLayout",newValue:"contain",groupType:"style",controlType:"style"}}],options:{noRecordHistory:!0}}},{conditionDisplay:"ftShape.shape !== 'original'",label:"Image scale",setting:{id:"ftLayout"}},{...t,hiddenOnMobile:!0,conditionDisplay:`${n} && position === "only-feature"`},{...o,hiddenOnMobile:!0,conditionDisplay:`${n}`}],moreSettings:{type:"collapse",controls:[{label:"Corner",setting:{id:"ftCorner"},hiddenOnMobile:!0},{type:"combo",label:"Hover action",conditionDisplay:n,iconName:"gp-trigger-action-hover",getValueFromSettingID:"hoverEffect",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"zoom",hiddenOnMobile:!0,controls:[{label:"When hover",setting:{id:"hoverEffect"}},{label:"Zoom type",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoomType"}},{label:"Zoom value",conditionDisplay:'hoverEffect == "zoom"',setting:{id:"zoom"}},{label:"Other image",conditionDisplay:'hoverEffect == "other"',setting:{id:"otherImage"}}]},{type:"combo",label:"Click action",hiddenOnMobile:!0,iconName:"gp-trigger-action-click",conditionDisplay:n,getValueFromSettingID:"ftClickOpenLightBox",isShowSettingTitle:!0,defaultValueWhenClear:"none",compoDefaultValue:"popup",controls:[{label:"After click",setting:{id:"ftClickOpenLightBox"}},{label:"Open new tab",setting:{id:"ftClickOpenNewTab"},conditionDisplay:'ftClickOpenLightBox === "product-link"'}]},{type:"control",label:"Slide speed",setting:{id:"ftAnimationSpeed"}},{type:"control",label:"Animation",setting:{id:"ftAnimationMode"}},{label:"Drag / swipe",setting:{id:"ftDragToScroll"}},{label:"Infinity loop",setting:{id:"ftLoop"}}]}},{label:"Image list",conditionDisplay:'(position !== "only-feature")',controls:[{label:"Display",hiddenOnMobile:!0,conditionDisplay:'position === "bottom-center" || position === "bottom-left" || position === "inside-bottom"',setting:{id:"type"}},{setting:{id:"shape"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["left", "right"].includes(position)'},{setting:{id:"shapeForBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["bottom-left", "bottom-center"].includes(position)'},{setting:{id:"shapeForInsideBottom"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-bottom"].includes(position)'},{setting:{id:"shapeForInside"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'["inside-left", "inside-right"].includes(position)'},{setting:{id:"shapeForFtOnly"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "only-feature"'},{setting:{id:"shapeFor2Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "two-col"'},{setting:{id:"shapeFor1Col"},hiddenOnMobile:!0,layout:"vertical",conditionDisplay:'position == "one-col"'},{label:"Image gap",setting:{id:"itemSpacing"}},{conditionDisplay:"(position == 'one-col' && shapeFor1Col.shape !== 'original') || (position == 'two-col' && shapeFor2Col.shape !== 'original') || (position == 'only-feature' && shapeForFtOnly.shape !== 'original') || ([\"inside-left\", \"inside-right\"].includes(position) && shapeForInside.shape !== 'original') || ([\"inside-bottom\"].includes(position) && shapeForInsideBottom.shape !== 'original') || ([\"bottom-left\", \"bottom-center\"].includes(position) && shapeForBottom.shape !== 'original') || ([\"left\", \"right\"].includes(position) && shape.shape !== 'original')",label:"Image scale",setting:{id:"layout"}},{...i,hiddenOnMobile:!0,conditionDisplay:e}],moreSettings:{type:"collapse",controls:[{label:"Corner",hiddenOnMobile:!0,setting:{id:"corner"}},{label:"Active border",hiddenOnMobile:!0,conditionDisplay:'!["one-col", "two-col"].includes(position)',setting:{id:"borderActive"}},{type:"combo",label:"Hover action",conditionDisplay:'(position == "one-col" || position == "two-col")',iconName:"gp-trigger-action-hover",getValueFromSettingID:"galleryHoverEffect",defaultValueWhenClear:"none",hiddenOnMobile:!0,compoDefaultValue:"zoom",controls:[{label:"When hover",setting:{id:"galleryHoverEffect"},conditionDisplay:'galleryHoverEffect == "none"'},{label:"Zoom type",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoomType"}},{label:"Zoom value",conditionDisplay:'galleryHoverEffect == "zoom"',setting:{id:"galleryZoom"}},{label:"Other image",conditionDisplay:'galleryHoverEffect == "other"',setting:{id:"otherImage"}}]},{label:"Click action",setting:{id:"clickOpenLightBox"}},{conditionDisplay:e,label:"Drag / swipe",setting:{id:"dragToScroll"}},{conditionDisplay:e,label:"Infinity loop",setting:{id:"loop"}}]}},{label:"Item spacing",hiddenOnMobile:!0,conditionDisplay:'["bottom-center", "left", "right", "inside-bottom", "inside-left", "inside-right"].includes(position)',controls:[{label:"Gap",setting:{id:"spacing"}}]},{label:"Display condition",controls:[{conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',label:"Default item",setting:{id:"preDisplay"}},{label:"Image list",setting:{id:"filterByVariant"}}],messageConfig:{type:"info",message:'Image list can display based on the selected variants. <a class="text-white" target="_blank" href="https://gempages.co/display-selected-variant">How to setup</a>'}},{label:"Optimize LCP",controls:[{label:"Preload",conditionDisplay:'["bottom-center", "left", "right", "only-feature", "inside-bottom", "inside-left", "inside-right"].includes(position)',setting:{id:"preload"}},{label:"Quality",setting:{id:"qualityType"},conditionDisplay:'preload === false || (preload === true && (position === "one-col" || position === "two-col"))'},{layout:"horizontal",label:"Quality",conditionDisplay:'qualityType == "custom" && (preload === false || (preload === true && (position === "one-col" || position === "two-col")))',setting:{id:"qualityPercent"}}]},{hiddenOnMobile:!0,controls:[{label:"Align",setting:{id:"align"},options:{labelVariant:"primary"}}]}];export{l as SettingUIV2};

package/dist/esm/sticky/components/Sticky.liquid.js

@@ -1,20 +1,19 @@
-import{makeStyleResponsive as e,RenderIf as s,isLocalEnv as t,baseAssetURL as i,template as a}from"@gem-sdk/core";import{getSettingPreloadData as r}from"../../helpers.js";import{createStyle as d,createClass as l,createStateOrContext as o}from"@gem-sdk/system";import{getContainerStyles as m,getContentStyles as p}from"../common/styles.js";import{getContainerClasses as c}from"../common/classes.js";let g=({children:g,builderAttrs:n,setting:$,style:k,builderProps:f,advanced:y,pageContext:u})=>{let{width:b,position:v,display:S,preloadBgImage:h,background:j,isScrollToTop:E}=$??{},w=y?.d,C=d({...e("w",b),...m({position:v,display:S})}),q=d(p({setting:$,style:k,uid:f?.uid,pageContext:u??{},type:"Liquid"})),x=l(c({uid:f?.uid,isScrollToTop:E,cssClass:y?.cssClass,isLiquid:!0})),A=o({uid:f?.uid,setting:{display:{desktop:S?.desktop,tablet:S?.tablet??S?.desktop,mobile:S?.mobile??S?.tablet??S?.desktop}},advanced:{d:w}}),G=`.drawer-page-content {
+import{makeStyleResponsive as s,RenderIf as e,isLocalEnv as t,baseAssetURL as i,template as r}from"@gem-sdk/core";import{getSettingPreloadData as a}from"../../helpers.js";import{createStyle as l,createClass as d,createStateOrContext as o}from"@gem-sdk/system";import{getContainerStyles as p,getContentStyles as m}from"../common/styles.js";import{getContainerClasses as c}from"../common/classes.js";let n=({children:n,builderAttrs:g,setting:$,style:k,builderProps:y,advanced:f,pageContext:u})=>{let{width:b,position:v,display:S,preloadBgImage:j,background:h,isScrollToTop:E}=$??{},w=f?.d,C=l({...s("w",b),...p({position:v,display:S})}),q=l(m({setting:$,style:k,uid:y?.uid,pageContext:u??{},type:"Liquid"})),x=d(c({uid:y?.uid,isScrollToTop:E,cssClass:f?.cssClass,isLiquid:!0})),A=o({uid:y?.uid,setting:{display:{desktop:S?.desktop,tablet:S?.tablet??S?.desktop,mobile:S?.mobile??S?.tablet??S?.desktop}},advanced:{d:w}}),G=`.drawer-page-content {
        transform: none !important;
       -webkit-transform: none !important;
-  }`;return a`
-    ${s(!!h,`${s(!!j?.desktop?.image?.src,`<link rel="preload" href="${j?.desktop?.image?.src}" as="image" />`)}${s(!!j?.tablet?.image?.src,`<link rel="preload" href="${j?.tablet?.image?.src}" as="image" />`)}${s(!!j?.mobile?.image?.src,`<link rel="preload" href="${j?.mobile?.image?.src}" as="image" />`)}`)}
+  }`;return r`
+    ${e(!!j,`${e(!!h?.desktop?.image?.src,`<link rel="preload" href="${h?.desktop?.image?.src}" as="image" />`)}${e(!!h?.tablet?.image?.src,`<link rel="preload" href="${h?.tablet?.image?.src}" as="image" />`)}${e(!!h?.mobile?.image?.src,`<link rel="preload" href="${h?.mobile?.image?.src}" as="image" />`)}`)}
     <gp-sticky
-    data-id="${f?.uid}"
-      gp-data='${JSON.stringify(A)}'
-      id="${f?.uid}"
-      data-id="${f?.uid}"
-      class="${x} ${r("gps-lazy")}"
+      id="${y?.uid}"
+      data-id="${y?.uid}"
+      class="${x} ${a("gps-lazy")}"
       style="${C}"
     >
+      <script gp-data type="application/json">${JSON.stringify(A)}</script>
       <style>${G}</style>
-      <div ${{...n}} style="${{...q}}">
-        ${g}
+      <div ${{...g}} style="${{...q}}">
+        ${n}
       </div>
     </gp-sticky>
-    ${s(t,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-sticky-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${i}/assets-v2/gp-sticky-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `};export{g as default};
+    ${e(t,`<script ${a('class="gps-link" delay',"src")}="{{ 'gp-sticky-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a('class="gps-link" delay',"src")}="${i}/assets-v2/gp-sticky-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{n as default};

package/dist/esm/sticky/hooks/useSticky.js

@@ -1 +1 @@
-import{makeStyleResponsive as t,usePageStore as e,useCurrentDevice as o}from"@gem-sdk/core";import{useMemo as l}from"react";let p=p=>{let{width:a,position:s}=p??{},b=t("w",a),d=e(t=>"interaction"===t.sidebarMode),i=o(),k=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),m=l(()=>({...k(s?.desktop,""),...k(s?.tablet??s?.desktop,"-tablet"),...k(s?.mobile??s?.tablet??s?.desktop,"-mobile")}),[s?.desktop,s?.mobile,s?.tablet]),r=l(()=>{if(d&&s?.[i]==="top")return"40px"},[i,d,s]),y=l(()=>({"--d":(p?.display?.desktop,"block"),"--d-tablet":(p?.display?.tablet??p?.display?.desktop,"block"),"--d-mobile":(p?.display?.mobile??p?.display?.tablet??p?.display?.desktop,"block")}),[p?.display?.desktop,p?.display?.mobile,p?.display?.tablet]),c=l(()=>({"--top":r??"auto","--top-tablet":r??"auto","--top-mobile":r??"auto",[`--${s?.desktop}`]:r??"0px",[`--${s?.tablet??s?.desktop}-tablet`]:r??"0px",[`--${s?.mobile??s?.tablet??s?.desktop}-mobile`]:r??"0px"}),[r,s?.desktop,s?.mobile,s?.tablet]),u=t=>"top"==t?"sticky":"fixed",f=l(()=>({"--pos":u(s?.desktop),"--pos-tablet":u(s?.tablet??s?.desktop),"--pos-mobile":u(s?.mobile??s?.tablet??s?.desktop)}),[s?.desktop,s?.mobile,s?.tablet]);return{w:b,displayStyle:c,positionStyle:f,getCSSAlign:m,makeDisplaySettingStyles:y}};export{p as default};
+import{makeStyleResponsive as t,usePageStore as e,useCurrentDevice as o,useStickyStore as l}from"@gem-sdk/core";import{useState as b,useMemo as i,useEffect as s}from"react";let p=p=>{let{width:r,position:a}=p??{},{desktop:d,tablet:n,mobile:m}=p?.display||{},k=t("w",r),u=e(t=>"interaction"===t.sidebarMode),c=o(),[f,x]=b(!1),$=l(t=>t.getFirstVisibleElement(c)),g=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),y=i(()=>({...g(a?.desktop,""),...g(a?.tablet??a?.desktop,"-tablet"),...g(a?.mobile??a?.tablet??a?.desktop,"-mobile")}),[a?.desktop,a?.mobile,a?.tablet]),v=i(()=>{if(u&&a?.[c]==="top")return"40px"},[c,u,a]),w=i(()=>{let t=t=>"after-first-cart-button"!==t||f?"block":"none";return{"--d":t(d),"--d-tablet":t(n??d),"--d-mobile":t(m??n??d)}},[d,n,m,f]),I=i(()=>({"--top":v??"auto","--top-tablet":v??"auto","--top-mobile":v??"auto",[`--${a?.desktop}`]:v??"0px",[`--${a?.tablet??a?.desktop}-tablet`]:v??"0px",[`--${a?.mobile??a?.tablet??a?.desktop}-mobile`]:v??"0px"}),[v,a?.desktop,a?.mobile,a?.tablet]),C=t=>"top"==t?"sticky":"fixed",E=i(()=>({"--pos":C(a?.desktop),"--pos-tablet":C(a?.tablet??a?.desktop),"--pos-mobile":C(a?.mobile??a?.tablet??a?.desktop)}),[a?.desktop,a?.mobile,a?.tablet]);return s(()=>{if(!$)return;let t=new IntersectionObserver(([t])=>{t&&x(t.isIntersecting||t.boundingClientRect.top<=0)});return t.observe($),()=>t.disconnect()},[$]),s(()=>{x(!1)},[c]),{w:k,displayStyle:I,positionStyle:E,getCSSAlign:y,makeDisplaySettingStyles:w}};export{p as default};

package/dist/esm/tab/components/Tabs.liquid.js

@@ -1,33 +1,34 @@
-import{template as e,WrapRenderChildren as t,RenderChildren as s,RenderIf as i,isLocalEnv as l,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as d,createSettingId as r,getSettingPreloadData as o}from"../../helpers.js";import{createStateOrContext as p,createAttr as c,createStyle as m,createClass as n}from"@gem-sdk/system";import{getAttr as u,getAttrContent as y}from"../common/attrs.js";import $ from"../../text/components/Text.liquid.js";import{Tabs as g}from"../settings/configs/translate.js";import{getStyleWrapper as v,getTabParentListStyle as f,getTabListStyle as h,getContainContentStyle as x,getItemStyle as b}from"../common/styles.js";import{getClassesWrapper as j,getContainClasses as C,getStyleTagClasses as S,getTabParentListClasses as T,getTabListClasses as k,getWrapperContentClasses as A,getContainContentClasses as I,getTextClasses as K,getItemClasses as E}from"../common/classes.js";let N=N=>{let{builderProps:V,style:q,setting:P,advanced:z,rawChildren:F}=N;delete P?.labelTypoV2?.attrs?.color;let{cssClass:G}=z??{},{panelWidth:L,childItem:O,labelAlign:W,labelTypo:_,labelTypoV2:J}=P??{},M=p({setting:P,builderProps:V}),R=void 0;P&&!P?.labelWidth&&(P.labelWidth={desktop:"200px"});let U=c({...u({uid:V?.uid||""})}),w=m({...v({setting:P,style:q,uid:V?.uid,pageContext:N.pageContext??{},type:"Liquid"})}),B=n({...j({builderProps:V,advancedCssClass:G})}),D=n({...C({setting:P})}),H=S({panelWidth:L,builderProps:V}),Q=n({...T()}),X=m({...f(P)}),Y=n({...k({setting:P})}),Z=m({...h(P)}),ee=e=>n({...E({setting:P,isNotLiquid:!1,isActive:e,currentDevice:R})}),et=e=>m({...b(P,e)}),es=n({...A()}),ei=n({...I()}),el=m({...x()}),ea=c({...y({uid:V?.uid||""})}),ed=n({...K()});return e`
+import{template as t,WrapRenderChildren as e,RenderChildren as s,RenderIf as i,isLocalEnv as l,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as r,createSettingId as d,getSettingPreloadData as o}from"../../helpers.js";import{createStateOrContext as p,createAttr as c,createStyle as m,createClass as n}from"@gem-sdk/system";import{getAttr as y,getAttrContent as u}from"../common/attrs.js";import $ from"../../text/components/Text.liquid.js";import{Tabs as g}from"../settings/configs/translate.js";import{getStyleWrapper as v,getTabParentListStyle as f,getTabListStyle as h,getContainContentStyle as x,getItemStyle as b}from"../common/styles.js";import{getClassesWrapper as j,getContainClasses as C,getStyleTagClasses as S,getTabParentListClasses as T,getTabListClasses as k,getWrapperContentClasses as A,getContainContentClasses as I,getTextClasses as K,getItemClasses as E}from"../common/classes.js";let N=N=>{let{builderProps:V,style:q,setting:P,advanced:z,rawChildren:F}=N;delete P?.labelTypoV2?.attrs?.color;let{cssClass:G}=z??{},{panelWidth:L,childItem:O,labelAlign:W,labelTypo:_,labelTypoV2:J}=P??{},M=p({setting:P,builderProps:V}),R=void 0;P&&!P?.labelWidth&&(P.labelWidth={desktop:"200px"});let U=c({...y({uid:V?.uid||""})}),w=m({...v({setting:P,style:q,uid:V?.uid,pageContext:N.pageContext??{},type:"Liquid"})}),B=n({...j({builderProps:V,advancedCssClass:G})}),D=n({...C({setting:P})}),H=S({panelWidth:L,builderProps:V}),Q=n({...T()}),X=m({...f(P)}),Y=n({...k({setting:P})}),Z=m({...h(P)}),tt=t=>n({...E({setting:P,isNotLiquid:!1,isActive:t,currentDevice:R})}),te=t=>m({...b(P,t)}),ts=n({...A()}),ti=n({...I()}),tl=m({...x()}),ta=c({...u({uid:V?.uid||""})}),tr=n({...K()});return t`
     <gp-tab
       ${{...U}}
       style="${w}"
       class="${B}"
-      gp-data='${JSON.stringify(M)?.replaceAll("'","&#039;")}'>
+    >
+      <script gp-data type="application/json">${JSON.stringify(M)?.replaceAll("'","&#039;")}</script>
         <style>${H}</style>
         <div class="${D}">
           <div class="${Q}" style="${X}">
             <ul class="${Y}" style="${Z}">
-              ${O?.map(e=>e?.replaceAll("'","&#039;"))?.map((t,s)=>{let i=(P?.activeKey??0)<0||(P?.activeKey??0)>=(P?.childItem??[]).length?0===s:s===P?.activeKey,l=d({val:t,uid:V?.uid,settingId:r({id:g?.childItem?.id,index:s}),pageContext:N.pageContext??{},isCapitalize:P?.labelTypoV2?.attrs?.transform==="capitalize"});return e`
+              ${O?.map(t=>t?.replaceAll("'","&#039;"))?.map((e,s)=>{let i=(P?.activeKey??0)<0||(P?.activeKey??0)>=(P?.childItem??[]).length?0===s:s===P?.activeKey,l=r({val:e,uid:V?.uid,settingId:d({id:g?.childItem?.id,index:s}),pageContext:N.pageContext??{},isCapitalize:P?.labelTypoV2?.attrs?.transform==="capitalize"});return t`
       <li
         aria-hidden
-        class="${ee(i)}"
-        style="${et(i)}"
+        class="${tt(i)}"
+        style="${te(i)}"
         key="${V?.uid}"
 
       >
-        ${$({className:ed,styles:{typo:J,typography:_,textAlign:W},setting:{text:l,htmlTag:"div",excludeFlex:!0,isForceValue:!0},translateSetting:g?.childItem?.id})}
+        ${$({className:tr,styles:{typo:J,typography:_,textAlign:W},setting:{text:l,htmlTag:"div",excludeFlex:!0,isForceValue:!0},translateSetting:g?.childItem?.id})}
       </li>
     `}).join("")}
             </ul>
           </div>
-          <div class="${es}">
+          <div class="${ts}">
             <div
-              ${{...ea}}
-              class="${ei}"
-              style="${el}"
+              ${{...ta}}
+              class="${ti}"
+              style="${tl}"
             >
-              ${t({uid:V?.uid||"",customProps:F?.[0].customProps},F?.map((t,i)=>{let l=(P?.activeKey??0)<0||(P?.activeKey??0)>=(P?.childItem??[]).length?0===i:i===P?.activeKey;return t?e`${s({...t,parentUid:V?.uid,isActive:l})}`:""}))}
+              ${e({uid:V?.uid||"",customProps:F?.[0].customProps},F?.map((e,i)=>{let l=(P?.activeKey??0)<0||(P?.activeKey??0)>=(P?.childItem??[]).length?0===i:i===P?.activeKey;return e?t`${s({...e,parentUid:V?.uid,isActive:l})}`:""}))}
             </div>
           </div>
         </div>

package/dist/esm/text/components/Text.liquid.js

@@ -1,9 +1,9 @@
 import{template as t}from"@gem-sdk/core";import{createAttr as o,createStyle as e,createClass as s,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 n}from"../common/styles.js";import{getClasses as a,getTextClasses as d}from"../common/classes.js";import{getDisplayText as c}from"../common/helpers.js";let $=({id:$,styles:g,builderAttrs:u,style:f,setting:y,advanced:x,builderProps:j,className:v,isText:q,pageContext:h,translateSetting:k,elementAttrs:C})=>{let{htmlTag:L="div",excludeFlex:T}=y??{},I=o({...$&&{id:$},...r({uid:j?.uidInteraction??j?.uid??""}),...u}),O=o({...m(),...C}),_=e({...l(g,f)}),b=e({...p(g,y)}),w=e({...n({styles:g,setting:y,builderProps:j,pageContext:h??{},type:"Liquid"})}),z=s({...a({setting:y,advanced:x,builderProps:j})}),A=s({"gp-flex":!T}),B=s({...d({styles:g,setting:y,className:v}),...q&&{"gp-text":!0}}),D=c({type:"Liquid",styles:g,setting:y,builderProps:j,pageContext:h??{},translateSetting:k}),E=i(D);return t`
     {% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}
     <div ${{...I}}
-        class="${z}"
-        style="${_}"
-      >
+      class="${z}"
+      style="${_}"
+    >
       <div class="${A}" style="${b}">
         <${L}
           ${{...O}}

package/dist/esm/third-party/components/AppstleLoyaltyRewardProgram.js

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as r}from"react/jsx-runtime";import{makeStyleResponsive as e}from"@gem-sdk/core";import o from"./ThirdPartyPreview.js";import t from"../configs/AppstleLoyaltyRewardProgram.js";let a=({setting:a})=>r("div",{style:{...e("ta",a?.align)},children:r("div",{className:"gp-p-2",children:r(o,{setting:{label:"Appstle Loyalty Reward Program",iconSvg:`<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${t.logoUrl}">`}})})});export{a as default};

package/dist/esm/third-party/components/AppstleLoyaltyRewardProgram.liquid.js

@@ -0,0 +1,16 @@
+import{makeStyleResponsive as a,template as t}from"@gem-sdk/core";let l=({setting:l,advanced:e})=>{let{widgetType:d,align:s}=l??{};return t`
+    <div
+      class="${e?.cssClass} gp-appstle-loyalty [&_*]:gp-max-w-none"
+      style="${{...a("ta",s)}}"
+    >
+      {% assign widget = '${d}' %}
+      {% case widget %}
+        {% when "loyalty_dedicated_page" %}
+          <div class="appstleLoyaltyPage" data-appstle-loyalty="APPSTLE_LOYALTY_PAGE" id="appstleLoyaltyPage"></div>
+        {% when "points_display_on_product" %}
+          <div class="appstle-loyalty-acquire-points-block" data-appstle-loyalty="APPSTLE_LOYALTY_ACQUIRE_POINTS" id="appstle-loyalty-acquire-points-block"></div>
+        {% when "points_display_on_collections" %}
+          <div class="appstle_loyalty_stand_alone_selector" data-product-id="{{product.id}}" data-product-handle="{{product.handle}}" data-variant-id="{{ product.selected_or_first_available_variant.id }}" data-product-data="{{product | json | escape}}"></div>
+      {% endcase %}
+    </div>
+  `};export{l as default};

package/dist/esm/third-party/configs/AppstleLoyaltyRewardProgram.js

@@ -0,0 +1 @@
+var a={id:"appstle-loyalty-reward-program",label:"Appstle Loyalty Reward Program",logoUrl:"https://cdn.shopify.com/app-store/listing_images/96443d68c3eaa36c43a8b7d0afa5eada/icon/COui2tT74fwCEAE=.png?width=22&height=22",tag:"AppstleLoyaltyRewardProgram"};export{a as default};