@gem-sdk/components 2.1.34 → 2.1.36

package/dist/cjs/image/helpers/getSrcSet.js

@@ -30,7 +30,8 @@ const getSrcSetLiquid = (liquid, storage)=>{
     return `{{ '${liquid}' | asset_img_url: '768x' }} 768w, {{ '${liquid}' | asset_img_url: '1024x' }} 1024w, {{ '${liquid}' | asset_img_url: 'master' }} 1440w`;
 };
 const getSrcSetLink = (link)=>{
-    return `${link} 768w,${link} 1024w,${link} 1440w`;
+    return link; // Since image src didn't change in size so this line of code is pointless
+// return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
     let src = image?.backupFilePath;

package/dist/cjs/product/components/Product.liquid.js

@@ -9,6 +9,7 @@ var helpers = require('../../helpers.js');
 const PRODUCT_ID_LATEST = 'latest';
 const PREFIX_PRODUCT_ID = 'gid://shopify/Product/';
 const PREFIX_PRODUCT_VARIANT_ID = 'gid://shopify/ProductVariant/';
+const PREFIX_PRODUCT_OPTION_VALUE_ID = 'gid://shopify/ProductOptionValue/';
 const STATIC_PRODUCT_STATUS = 'static';
 const DYNAMIC_PRODUCT_STATUS = 'dynamic';
 const Product = ({ children, setting, styles, style, builderProps, rawChildren, advanced })=>{
@@ -24,8 +25,8 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
     const formatProductId = productSetting?.productId?.replace(PREFIX_PRODUCT_ID, '').toLowerCase() || PRODUCT_ID_LATEST;
     const formatVariantId = initVariantId?.replace(PREFIX_PRODUCT_VARIANT_ID, '') || '';
     const productStatus = productSetting?.productStatus ?? STATIC_PRODUCT_STATUS;
+    const preSelectedOptionIds = productSetting?.selectedOptions?.map((option)=>option?.valueBaseID?.replace(PREFIX_PRODUCT_OPTION_VALUE_ID, ''));
     return core.template /* liquid */ `
-    
     {%- assign gpBkProduct = product -%}
     ${productStatus !== DYNAMIC_PRODUCT_STATUS ? `
         {%- liquid
@@ -100,7 +101,7 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
       {%- endif -%}
       <gp-product data-uid="${builderProps?.uid}" data-id="${builderProps?.uid}" style="${{
         ...advancedStyle
-    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
+    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${preSelectedOptionIds}], "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "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 }}}'>
         <product-form class="product-form">
           {%- form 'product', product, id: product_form_id, class: 'form contents', data-type: 'add-to-cart-form', autocomplete: 'off'  -%}

package/dist/cjs/product/components/ProductVariants/index.liquid.js

@@ -97,15 +97,9 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
         <div
         option-name="{{option.name | escape}}"
         class="${core.cls('gp-flex variant-inside', {
-            'gp-flex-col': layout?.desktop === 'vertical',
-            'gp-flex-row': layout?.desktop === 'horizontal',
-            'tablet:gp-flex-row': layout?.tablet === 'horizontal',
-            'tablet:gp-flex-col': layout?.tablet === 'vertical',
-            'mobile:gp-flex-row': layout?.mobile === 'horizontal',
-            'mobile:gp-flex-col': layout?.mobile === 'vertical'
-        }, {
+            ...core.getLayoutClasses(layout),
             ..._function.getAlignClasses(layout, align)
-        })} {% if hiddenPresetOptions contains option.name %} gp-hidden {% endif %}"
+        })}"
 
         >
           {% assign showVariantClass = 'variant-display' %}
@@ -137,15 +131,7 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
           <div
               variant-option-name="{{option.name | escape}}"
               class="${core.cls({
-            'gp-justify-start': align?.desktop === 'left',
-            'gp-justify-center': align?.desktop === 'center',
-            'gp-justify-end': align?.desktop === 'right',
-            'tablet:gp-justify-start': align?.tablet === 'left',
-            'tablet:gp-justify-center': align?.tablet === 'center',
-            'tablet:gp-justify-end': align?.tablet === 'right',
-            'mobile:gp-justify-start': align?.mobile === 'left',
-            'mobile:gp-justify-center': align?.mobile === 'center',
-            'mobile:gp-justify-end': align?.mobile === 'right'
+            ...core.getAlignmentClasses(align)
         }, 'gp-flex gp-w-full gp-flex-wrap gp-items-center variant-option-group')}"
               style="${{
             ...core.makeStyle({
@@ -328,6 +314,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
     `;
     };
     return core.template`
+  {%- assign total_combinations = 1 -%}
+  {%- for option in product.options_with_values -%}
+    {%- assign total_combinations = total_combinations | times: option.values.size -%}
+  {%- endfor -%}
   <gp-product-variants
     data-id="${uid}"
     class="${advanced?.cssClass}"
@@ -343,7 +333,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
       "moneyFormat": {{shop.money_format | json | escape}},
       "productId": {{product.id | json | escape}},
       "productUrl": {{product.url | json | escape}},
-      "displayState":${JSON.stringify(advancedDisplay)}
+      "productHandle": {{product.handle | json | escape}},
+      "displayState": ${JSON.stringify(advancedDisplay)},
+      "totalVariantCombinations": {{total_combinations}},
+      "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
     }
   '>
     {%- assign options = product.options_with_values -%}

package/dist/cjs/product/components/ProductVariants/variants/Base.liquid.js

@@ -156,6 +156,7 @@ const BaseVariant = ({ optionTransform, optionTypography, optionBgColor, optionT
     option-data="{{option.name | escape}}"
     option-value="{{value | escape}}"
     option-position="{{option.position}}"
+    data-gp-option-available="{{value.available}}"
     option-type="${type || 'rectangle_list'}"
     data-disabled="{%- if option_disabled == true -%} disabled  {%- endif -%}"
     data-hidden='true'

package/dist/cjs/product/components/ProductVariants/variants/Dropdown.liquid.js

@@ -18,6 +18,15 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = core.composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = core.composeTypographyStyle(optionTypo, optionTypography);
+    const composeSelectOptionAttrs = `
+    option-data="{{option.name | escape}}"
+    option-value="{{value | escape}}" 
+    data-gp-option-value-id="{{value.id}}" 
+    data-gp-option-available="{{value.available}}"
+    value="{{value | escape}}" 
+    class="option-value-wrapper" 
+    key="{{value | escape}}"
+  `;
     return core.template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -73,37 +82,42 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
                         option-position="{{option.position}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                       </option>
                     {% else %}
-                        <option disabled option-data="{{option.name | escape}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        <option 
+                        disabled 
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option ${!hasPreSelected ? '' : 'selected'}   
+                      option-position="{{option.position}}" 
+                      ${composeSelectOptionAttrs}>
                       {{value}}
                   </option>
                   {% else %}
-                  <option  option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option
+                      ${composeSelectOptionAttrs}
+                      option-position="{{option.position}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option ${!hasPreSelected ? '' : 'selected'} 
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {% else %}
-              <option  option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {%- endif -%}`}

package/dist/cjs/product/components/ProductVariants/variants/DropdownGroup.liquid.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
-var helpers = require('../../../../helpers.js');
+var index = require('./combine/index.js');
 
-const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
+const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
     const swatchWidthResponsive = core.makeStyleResponsive('w', core.makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return core.makeStyle({
@@ -27,7 +27,6 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
     option-data="{{option.name}}"
     option-type="{{optionType}}"
     class="${core.cls('gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none dropdown-option-item', core.handleConvertClassColor(optionBorder), appendTypoClass, core.getGlobalColorStateClass('text', optionTextColor), core.getGlobalColorStateClass('bg', optionBgColor), 'gp-outline-none', 'gp-shadow-none')}"
- 
     style="${{
         ...core.getStyleShadowState(optionShadow, 'box-shadow', optionHasShadow),
         ...getCustomCSSActiveState(),
@@ -49,40 +48,8 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
         'background-position': 'right 16px center'
     }}"
   >
-  ${!hasPreSelected ? `<option value="blank" selected>${blankText || helpers.getStaticLocale('ProductVariants', 'please_select')}</option>` : ''}
-  ${`{%- for variantItem in variants -%}
-      ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
-              {%- if variantItem.id == variant.id -%}
-                    <option origin-price="{{variantItem.price}}" disabled ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                    </option>
-              {% else %}
-                    <option origin-price="{{variantItem.price}}" disabled value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                    </option>
-              {%- endif -%}
-            {%- else -%} 
-            {%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                </option>
-            {% else %}
-                <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-            {%- endif -%}
-            {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-              {% else %}
-                  <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                  {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                  </option>
-              {%- endif -%}`}
-       
-      {%- endfor -%}
-    `}
+  ${index.renderBlankOption(hasPreSelected, blankText)}
+  ${index.renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
   </select>
     `;
 };

package/dist/cjs/product/components/ProductVariants/variants/combine/index.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var helpers = require('../../../../../helpers.js');
+
+const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
+    const hasPrice = enablePrice ? '- {{variantItem.price | money}}' : '';
+    const optionAttrs = 'origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"';
+    return `${`{%- for variantItem in variants -%}
+    ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
+            {%- if variantItem.id == variant.id -%}
+                  <option origin-price="{{variantItem.price}}" disabled ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                  {{variantItem.title}} ${hasPrice} : ''} 
+                  </option>
+            {% else %}
+                  <option ${optionAttrs} disabled>
+                  {{variantItem.title}} ${hasPrice}
+                  </option>
+            {%- endif -%}
+          {%- else -%} 
+          {%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice} 
+              </option>
+          {% else %}
+              <option ${optionAttrs}>
+              {{variantItem.title}} ${hasPrice}
+              </option>
+          {%- endif -%}
+          {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice}
+              </option>
+            {% else %}
+                <option ${optionAttrs}>
+                {{variantItem.title}} ${hasPrice}
+                </option>
+            {%- endif -%}`}
+     
+    {%- endfor -%}
+  `}`;
+};
+const renderBlankOption = (hasPreSelected, blankText)=>{
+    return !hasPreSelected ? `<option value="blank" selected>${blankText ?? helpers.getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+};
+
+exports.renderBlankOption = renderBlankOption;
+exports.renderCombineVariants = renderCombineVariants;

package/dist/esm/image/helpers/getSrcSet.js

@@ -28,7 +28,8 @@ const getSrcSetLiquid = (liquid, storage)=>{
     return `{{ '${liquid}' | asset_img_url: '768x' }} 768w, {{ '${liquid}' | asset_img_url: '1024x' }} 1024w, {{ '${liquid}' | asset_img_url: 'master' }} 1440w`;
 };
 const getSrcSetLink = (link)=>{
-    return `${link} 768w,${link} 1024w,${link} 1440w`;
+    return link; // Since image src didn't change in size so this line of code is pointless
+// return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
     let src = image?.backupFilePath;

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

@@ -5,6 +5,7 @@ import { getStaticLocale, getSettingPreloadData } from '../../helpers.js';
 const PRODUCT_ID_LATEST = 'latest';
 const PREFIX_PRODUCT_ID = 'gid://shopify/Product/';
 const PREFIX_PRODUCT_VARIANT_ID = 'gid://shopify/ProductVariant/';
+const PREFIX_PRODUCT_OPTION_VALUE_ID = 'gid://shopify/ProductOptionValue/';
 const STATIC_PRODUCT_STATUS = 'static';
 const DYNAMIC_PRODUCT_STATUS = 'dynamic';
 const Product = ({ children, setting, styles, style, builderProps, rawChildren, advanced })=>{
@@ -20,8 +21,8 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
     const formatProductId = productSetting?.productId?.replace(PREFIX_PRODUCT_ID, '').toLowerCase() || PRODUCT_ID_LATEST;
     const formatVariantId = initVariantId?.replace(PREFIX_PRODUCT_VARIANT_ID, '') || '';
     const productStatus = productSetting?.productStatus ?? STATIC_PRODUCT_STATUS;
+    const preSelectedOptionIds = productSetting?.selectedOptions?.map((option)=>option?.valueBaseID?.replace(PREFIX_PRODUCT_OPTION_VALUE_ID, ''));
     return template /* liquid */ `
-    
     {%- assign gpBkProduct = product -%}
     ${productStatus !== DYNAMIC_PRODUCT_STATUS ? `
         {%- liquid
@@ -96,7 +97,7 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
       {%- endif -%}
       <gp-product data-uid="${builderProps?.uid}" data-id="${builderProps?.uid}" style="${{
         ...advancedStyle
-    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
+    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${preSelectedOptionIds}], "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "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 }}}'>
         <product-form class="product-form">
           {%- form 'product', product, id: product_form_id, class: 'form contents', data-type: 'add-to-cart-form', autocomplete: 'off'  -%}

package/dist/esm/product/components/ProductVariants/index.liquid.js

@@ -1,4 +1,4 @@
-import { makeStyleResponsive, makeWidth, composeMemo, composeTypographyClassName, template, optionLayoutStyle, RenderIf, isLocalEnv, baseAssetURL, cls, makeStyle, getResponsiveValueByScreen } from '@gem-sdk/core';
+import { makeStyleResponsive, makeWidth, composeMemo, composeTypographyClassName, template, optionLayoutStyle, RenderIf, isLocalEnv, baseAssetURL, cls, getLayoutClasses, getAlignmentClasses, makeStyle, getResponsiveValueByScreen } from '@gem-sdk/core';
 import Text from '../../../text/components/Text.liquid.js';
 import VariantItem from './variants/index.liquid.js';
 import DropdownVariant from './variants/Dropdown.liquid.js';
@@ -93,15 +93,9 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
         <div
         option-name="{{option.name | escape}}"
         class="${cls('gp-flex variant-inside', {
-            'gp-flex-col': layout?.desktop === 'vertical',
-            'gp-flex-row': layout?.desktop === 'horizontal',
-            'tablet:gp-flex-row': layout?.tablet === 'horizontal',
-            'tablet:gp-flex-col': layout?.tablet === 'vertical',
-            'mobile:gp-flex-row': layout?.mobile === 'horizontal',
-            'mobile:gp-flex-col': layout?.mobile === 'vertical'
-        }, {
+            ...getLayoutClasses(layout),
             ...getAlignClasses(layout, align)
-        })} {% if hiddenPresetOptions contains option.name %} gp-hidden {% endif %}"
+        })}"
 
         >
           {% assign showVariantClass = 'variant-display' %}
@@ -133,15 +127,7 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
           <div
               variant-option-name="{{option.name | escape}}"
               class="${cls({
-            'gp-justify-start': align?.desktop === 'left',
-            'gp-justify-center': align?.desktop === 'center',
-            'gp-justify-end': align?.desktop === 'right',
-            'tablet:gp-justify-start': align?.tablet === 'left',
-            'tablet:gp-justify-center': align?.tablet === 'center',
-            'tablet:gp-justify-end': align?.tablet === 'right',
-            'mobile:gp-justify-start': align?.mobile === 'left',
-            'mobile:gp-justify-center': align?.mobile === 'center',
-            'mobile:gp-justify-end': align?.mobile === 'right'
+            ...getAlignmentClasses(align)
         }, 'gp-flex gp-w-full gp-flex-wrap gp-items-center variant-option-group')}"
               style="${{
             ...makeStyle({
@@ -324,6 +310,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
     `;
     };
     return template`
+  {%- assign total_combinations = 1 -%}
+  {%- for option in product.options_with_values -%}
+    {%- assign total_combinations = total_combinations | times: option.values.size -%}
+  {%- endfor -%}
   <gp-product-variants
     data-id="${uid}"
     class="${advanced?.cssClass}"
@@ -339,7 +329,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
       "moneyFormat": {{shop.money_format | json | escape}},
       "productId": {{product.id | json | escape}},
       "productUrl": {{product.url | json | escape}},
-      "displayState":${JSON.stringify(advancedDisplay)}
+      "productHandle": {{product.handle | json | escape}},
+      "displayState": ${JSON.stringify(advancedDisplay)},
+      "totalVariantCombinations": {{total_combinations}},
+      "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
     }
   '>
     {%- assign options = product.options_with_values -%}

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

@@ -152,6 +152,7 @@ const BaseVariant = ({ optionTransform, optionTypography, optionBgColor, optionT
     option-data="{{option.name | escape}}"
     option-value="{{value | escape}}"
     option-position="{{option.position}}"
+    data-gp-option-available="{{value.available}}"
     option-type="${type || 'rectangle_list'}"
     data-disabled="{%- if option_disabled == true -%} disabled  {%- endif -%}"
     data-hidden='true'

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

@@ -14,6 +14,15 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = composeTypographyStyle(optionTypo, optionTypography);
+    const composeSelectOptionAttrs = `
+    option-data="{{option.name | escape}}"
+    option-value="{{value | escape}}" 
+    data-gp-option-value-id="{{value.id}}" 
+    data-gp-option-available="{{value.available}}"
+    value="{{value | escape}}" 
+    class="option-value-wrapper" 
+    key="{{value | escape}}"
+  `;
     return template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -69,37 +78,42 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
                         option-position="{{option.position}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                       </option>
                     {% else %}
-                        <option disabled option-data="{{option.name | escape}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        <option 
+                        disabled 
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option ${!hasPreSelected ? '' : 'selected'}   
+                      option-position="{{option.position}}" 
+                      ${composeSelectOptionAttrs}>
                       {{value}}
                   </option>
                   {% else %}
-                  <option  option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option
+                      ${composeSelectOptionAttrs}
+                      option-position="{{option.position}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option ${!hasPreSelected ? '' : 'selected'} 
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {% else %}
-              <option  option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {%- endif -%}`}

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

@@ -1,7 +1,7 @@
 import { makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, template, cls, handleConvertClassColor, getGlobalColorStateClass, getStyleShadowState, makeStyle, getGlobalColorStateStyle, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getSingleColorVariable } from '@gem-sdk/core';
-import { getStaticLocale } from '../../../../helpers.js';
+import { renderBlankOption, renderCombineVariants } from './combine/index.js';
 
-const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
+const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
     const swatchWidthResponsive = makeStyleResponsive('w', makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return makeStyle({
@@ -23,7 +23,6 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
     option-data="{{option.name}}"
     option-type="{{optionType}}"
     class="${cls('gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none dropdown-option-item', handleConvertClassColor(optionBorder), appendTypoClass, getGlobalColorStateClass('text', optionTextColor), getGlobalColorStateClass('bg', optionBgColor), 'gp-outline-none', 'gp-shadow-none')}"
- 
     style="${{
         ...getStyleShadowState(optionShadow, 'box-shadow', optionHasShadow),
         ...getCustomCSSActiveState(),
@@ -45,40 +44,8 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
         'background-position': 'right 16px center'
     }}"
   >
-  ${!hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : ''}
-  ${`{%- for variantItem in variants -%}
-      ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
-              {%- if variantItem.id == variant.id -%}
-                    <option origin-price="{{variantItem.price}}" disabled ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                    </option>
-              {% else %}
-                    <option origin-price="{{variantItem.price}}" disabled value="{{variantItem.id}}" key="{{variantItem.id}}">
-                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                    </option>
-              {%- endif -%}
-            {%- else -%} 
-            {%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
-                </option>
-            {% else %}
-                <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-            {%- endif -%}
-            {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
-                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
-                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                </option>
-              {% else %}
-                  <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
-                  {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
-                  </option>
-              {%- endif -%}`}
-       
-      {%- endfor -%}
-    `}
+  ${renderBlankOption(hasPreSelected, blankText)}
+  ${renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
   </select>
     `;
 };

package/dist/esm/product/components/ProductVariants/variants/combine/index.js

@@ -0,0 +1,44 @@
+import { getStaticLocale } from '../../../../../helpers.js';
+
+const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
+    const hasPrice = enablePrice ? '- {{variantItem.price | money}}' : '';
+    const optionAttrs = 'origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"';
+    return `${`{%- for variantItem in variants -%}
+    ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
+            {%- if variantItem.id == variant.id -%}
+                  <option origin-price="{{variantItem.price}}" disabled ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                  {{variantItem.title}} ${hasPrice} : ''} 
+                  </option>
+            {% else %}
+                  <option ${optionAttrs} disabled>
+                  {{variantItem.title}} ${hasPrice}
+                  </option>
+            {%- endif -%}
+          {%- else -%} 
+          {%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice} 
+              </option>
+          {% else %}
+              <option ${optionAttrs}>
+              {{variantItem.title}} ${hasPrice}
+              </option>
+          {%- endif -%}
+          {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice}
+              </option>
+            {% else %}
+                <option ${optionAttrs}>
+                {{variantItem.title}} ${hasPrice}
+                </option>
+            {%- endif -%}`}
+     
+    {%- endfor -%}
+  `}`;
+};
+const renderBlankOption = (hasPreSelected, blankText)=>{
+    return !hasPreSelected ? `<option value="blank" selected>${blankText ?? getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+};
+
+export { renderBlankOption, renderCombineVariants };

package/dist/types/index.d.ts

@@ -1361,6 +1361,12 @@ type ProductSetting = {
         initialVariantId?: string;
         initialVariantBaseId?: string;
         productHandle?: string;
+        selectedOptions?: {
+            name: string;
+            value: string;
+            optionType: string;
+            valueBaseID: string;
+        }[];
     };
     discountType?: 'PERCENTAGE' | 'FIXED_AMOUNT';
     discountValue?: number;
@@ -5592,6 +5598,12 @@ declare const Product: ({ children, setting, styles, style, builderProps, rawChi
         initialVariantId?: string | undefined;
         initialVariantBaseId?: string | undefined;
         productHandle?: string | undefined;
+        selectedOptions?: {
+            name: string;
+            value: string;
+            optionType: string;
+            valueBaseID: string;
+        }[] | undefined;
     } | undefined;
     discountType?: "FIXED_AMOUNT" | "PERCENTAGE" | undefined;
     discountValue?: number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.1.34",
+  "version": "2.1.36",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.1.33",
+    "@gem-sdk/core": "2.1.36",
     "@gem-sdk/styles": "2.1.31",
     "@types/react-transition-group": "^4.4.5"
   },