@gem-sdk/components 7.0.1-staging.0 → 7.0.1-staging.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/image/common/helpers.js +2 -2
- package/dist/cjs/product/components/product-list/ProductListCarouselItem.liquid.js +1 -1
- package/dist/cjs/product/components/product-list/ProductListGridItem.liquid.js +1 -1
- package/dist/cjs/product/components/product-list-v3/ProductListCarouselItem.liquid.js +1 -1
- package/dist/cjs/product/components/product-list-v3/ProductListGridItem.liquid.js +1 -1
- package/dist/esm/image/common/helpers.js +1 -1
- package/dist/esm/product/components/product-list/ProductListCarouselItem.liquid.js +3 -3
- package/dist/esm/product/components/product-list/ProductListGridItem.liquid.js +4 -4
- package/dist/esm/product/components/product-list-v3/ProductListCarouselItem.liquid.js +3 -3
- package/dist/esm/product/components/product-list-v3/ProductListGridItem.liquid.js +4 -4
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:o}=e??{},s={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:i,custom:a}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:i,custom:a}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:i,custom:a})};return o?core.getAspectRatioGlobalSize(o):s},composeAspectRatio=({device:e,aspect:t,custom:r,auto:i})=>{let a=t?.[e];return"auto"===a?i?.height?`${i.width}/${i.height}`:void 0:"custom"===a?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:core.makeStyleResponsive("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:r,width:i,height:a})=>{if(e)return{};let o={};return core.DEVICES.forEach(e=>{let s=`--objf${"desktop"!==e?`-${e}`:""}`,
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core");const overwriteDefaultRadius=e=>{let t={...e},r=!0;return t&&Object.keys(t??{}).forEach(e=>{if("bblr"===e||"bbrr"===e||"btlr"===e||"btrr"===e){let i=t[e]??{};"0px"!==i&&(r=!1)}}),r?core.getCornerCSSFromGlobal(t):{}},getAspectRatio=({styles:e,setting:t})=>{let{srcSet:r,image:i}=t??{},{customAspectRadio:a,shape:o}=e??{},s={desktop:composeAspectRatio({device:"desktop",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.desktop:i,custom:a}),tablet:composeAspectRatio({device:"tablet",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.tablet:i,custom:a}),mobile:composeAspectRatio({device:"mobile",aspect:e?.aspectRatio,auto:t?.isAdaptive?r?.mobile:i,custom:a})};return o?core.getAspectRatioGlobalSize(o):s},composeAspectRatio=({device:e,aspect:t,custom:r,auto:i})=>{let a=t?.[e];return"auto"===a?i?.height?`${i.width}/${i.height}`:void 0:"custom"===a?r?.[e]?.height?`${r?.[e]?.width}/${r?.[e]?.height}`:void 0:a},getResponsiveObjectFit=({layout:e,isDisableObjectFit:t})=>t?{}:core.makeStyleResponsive("objf",e),getAspectRatioNextImage=({isDisableAspectStyle:e,aspectRatio:t,objectFits:r,width:i,height:a})=>{if(e)return{};let o={};return core.DEVICES.forEach(e=>{let s=`--objf${"desktop"!==e?`-${e}`:""}`,g=r?.[s]||r?.["--objf"];if(t?.[e]==="auto"&&"contain"===g){o[e]="auto";return}o[e]=t?.[e]!=="auto"&&t?.[e]?t[e]:`${i}/${a}`}),o},safeStringify=e=>JSON.stringify(e||{}).replace(/"/g,"""),shimmer=(e,t)=>`<svg width="${e}" height="${t}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
2
2
|
<defs>
|
|
3
3
|
<linearGradient id="g-${e}-${t}">
|
|
4
4
|
<stop stop-color="rgba(51, 51, 51, 0)" offset="20%" />
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
<rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
|
|
10
10
|
<rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
|
|
11
11
|
<animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite" />
|
|
12
|
-
</svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,o=(t?.tablet
|
|
12
|
+
</svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:r}=e,i=e=>{let{isLiquid:i}=e??{},a=getImageSrc(t?.desktop,"desktop",!i)||r||FALLBACK_IMAGE,o=getImageSrc(t?.tablet,"tablet",!i)||getImageSrc(t?.desktop,"tablet",!i)||r||FALLBACK_IMAGE,s=getImageSrc(t?.mobile,"mobile",!i)||getImageSrc(t?.tablet,"mobile",!i)||getImageSrc(t?.desktop,"mobile",!i)||r||FALLBACK_IMAGE;return{srcTablet:o,srcMobile:s,srcDesktop:a}};return{getDeviceSource:i}},getSrcSet=(e,t,r)=>e?getSrcSetLiquid(e,t):getSrcSetLink(r),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let r=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${r}' | file_url }} 768w, {{ '${r}' | file_url }} 1024w, {{ '${r}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${r}' | file_img_url: '768x' }} 768w, {{ '${r}' | file_img_url: '1024x' }} 1024w, {{ '${r}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,r)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let i=e?.backupFilePath??e?.src??"";if(r)i=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(i=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):i=`{{ "${t}" | asset_url }}`}if(t&&i?.includes("cdn.shopify"))switch(t){case"tablet":i=i?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":i=i?.replace(regexReplaceEndDot,"_768x.")}return i},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let r=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return r&&r!=e?r:e};function resizeImage(e,t){let r=e.match(/\.webp/g)?.length,i=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(r)return i;let a=replaceRegexLastMatch({str:i,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}const replaceRegexLastMatch=e=>{let t=e.str,r=e.str.match(e.reg)?.length;if(r){let i,a=1;for(;null!==(i=e.reg.exec(e.str));){if(a===r){let r=e.reg.lastIndex,a=r-i[0].length;e.isAdd&&(e.newString="_"+e.newString+i),t=t.slice(0,a)+e.newString+t.slice(r,t.length)}a++}}return t},getItemWidth=(e,t)=>{let r=getCurrentDevice(),i=t?.[r]||"auto";if(!i||"auto"===i||i.includes("%"))return e;let a=Number(i.replace("px",""));return a>e?e:Number(i.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:r,qualityType:i,qualityPercent:a}=e,o=getCurrentDevice(),s=getItemWidth(t,r),g=core.getResponsiveValueByScreen(i,o,"finest"),l=core.getResponsiveValueByScreen(a,o,100);switch(g){case"finest":default:return"auto";case"high":return Math.round(1.5*s)||1;case"medium":return Math.round(s)||1;case"custom":return Math.round(s*(Number(l)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r)?.width||"100%";t[r]=i}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),r=0;return t.forEach(e=>{e.offsetWidth>r&&(r=e.offsetWidth)}),r},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,o=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),s=getWidthOfImageListSetting(t),g=getWidthOfListImageInDom(a);o.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:s,width:g,qualityType:r,qualityPercent:i})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:r,qualityPercent:i,builderPropUID:a}=e,o=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),s=getWidthOfFeatureImageSetting(t),g=getWidthOfFeatureImageInDom(a);o.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:s,width:g,qualityType:r,qualityPercent:i})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:r,width:i,qualityType:a,qualityPercent:o}=e,s=getCurrentDevice(),g=t.querySelector("img");if(g){let e=getImageWidthFollowByQuality({itemWidthParam:i,imageWidthSetting:r,qualityType:a,qualityPercent:o}),t=g.getAttribute("base-src");if(!t)return;let l=getImageSrcByQuality(e,t),c=getImageSrcSet(t,l,s);g.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,r)=>`${"mobile"===r&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===r&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===r&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";exports.FALLBACK_IMAGE=FALLBACK_IMAGE,exports.IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",exports.NEXT_IMAGE_CONFIG=NEXT_IMAGE_CONFIG,exports.composeAspectRatio=composeAspectRatio,exports.createBlurDataURL=createBlurDataURL,exports.getAdaptiveImageData=getAdaptiveImageData,exports.getAspectRatio=getAspectRatio,exports.getAspectRatioNextImage=getAspectRatioNextImage,exports.getCurrentDevice=getCurrentDevice,exports.getImageSrc=getImageSrc,exports.getImageWidthFollowByQuality=getImageWidthFollowByQuality,exports.getNewBackupFileKey=getNewBackupFileKey,exports.getResponsiveObjectFit=getResponsiveObjectFit,exports.getSrcSet=getSrcSet,exports.handleSetSrcForFeatureProductImage=handleSetSrcForFeatureProductImage,exports.handleSetSrcForProductImageList=handleSetSrcForProductImageList,exports.isCannotResizeImage=isCannotResizeImage,exports.overwriteDefaultRadius=overwriteDefaultRadius,exports.regexReplaceEndDot=regexReplaceEndDot,exports.replaceBackupFileKeyFileContent=replaceBackupFileKeyFileContent,exports.resizeImage=resizeImage,exports.safeStringify=safeStringify,exports.shimmer=shimmer,exports.toBase64=toBase64;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),classes=require("./common/classes.js");const ProductListItem=e=>{let{pageContext:t,children:n}=e,{productItemClass:o,gpProductClass:a}=classes.getClass(e);return core.template`
|
|
2
2
|
<gp-product
|
|
3
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
3
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
4
4
|
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 }},"pageContext" : ${JSON.stringify(t)}}'
|
|
5
5
|
class="${a}"
|
|
6
6
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
`}).join("")}
|
|
5
5
|
`;return core.template`
|
|
6
6
|
<gp-product
|
|
7
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
7
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
8
8
|
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 }},"pageContext" : ${JSON.stringify(t)}}'
|
|
9
9
|
class="${a}"
|
|
10
10
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),classes=require("./common/classes.js");const ProductListItem=e=>{let{pageContext:t,children:n}=e,{productItemClass:o,gpProductClass:a}=classes.getClass(e);return core.template`
|
|
2
2
|
<gp-product
|
|
3
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
3
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
4
4
|
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 }},"pageContext" : ${JSON.stringify(t)}}'
|
|
5
5
|
class="${a}"
|
|
6
6
|
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
`}).join("")}
|
|
5
5
|
`;return core.template`
|
|
6
6
|
<gp-product
|
|
7
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
7
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
8
8
|
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 }},"pageContext" : ${JSON.stringify(t)}}'
|
|
9
9
|
class="${a}"
|
|
10
10
|
|
|
@@ -9,4 +9,4 @@ import{getCornerCSSFromGlobal as e,getAspectRatioGlobalSize as t,makeStyleRespon
|
|
|
9
9
|
<rect width="${e}" height="${t}" fill="rgba(51, 51, 51, 0)" />
|
|
10
10
|
<rect id="r" width="${e}" height="${t}" fill="url(#g-${e}-${t})" />
|
|
11
11
|
<animate xlink:href="#r" attributeName="x" from="-${e}" to="${e}" dur="1s" repeatCount="indefinite" />
|
|
12
|
-
</svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:i}=e,r=e=>{let{isLiquid:r}=e??{},a=getImageSrc(t?.desktop,"desktop",!r)||i||FALLBACK_IMAGE,l=(t?.tablet
|
|
12
|
+
</svg>`,toBase64=e=>"undefined"==typeof window?Buffer.from(e).toString("base64"):window.btoa(e),createBlurDataURL=(e,t)=>`data:image/svg+xml;base64,${toBase64(shimmer(e,t))}`,IMAGE_PLACEHOLDER="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",FALLBACK_IMAGE="https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",NEXT_IMAGE_CONFIG={DEFAULT_SIZES:"100vw",DEFAULT_ALT:"Alt image",DEFAULT_SRC:"https://cdn.shopify.com/s/files/1/2005/9307/files/placeholder-1.png?v=1751355990",DEFAULT_WIDTH_PROPS:800,DEFAULT_HEIGHT_PROPS:533},getAdaptiveImageData=e=>{let{srcSet:t,fallbackImg:i}=e,r=e=>{let{isLiquid:r}=e??{},a=getImageSrc(t?.desktop,"desktop",!r)||i||FALLBACK_IMAGE,l=getImageSrc(t?.tablet,"tablet",!r)||getImageSrc(t?.desktop,"tablet",!r)||i||FALLBACK_IMAGE,g=getImageSrc(t?.mobile,"mobile",!r)||getImageSrc(t?.tablet,"mobile",!r)||getImageSrc(t?.desktop,"mobile",!r)||i||FALLBACK_IMAGE;return{srcTablet:l,srcMobile:g,srcDesktop:a}};return{getDeviceSource:r}},getSrcSet=(e,t,i)=>e?getSrcSetLiquid(e,t):getSrcSetLink(i),isCannotResizeImage=e=>e.includes("webp")||e.includes("jfif")||e.includes(".svg")||e.includes(".tiff"),getSrcSetLiquid=(e,t)=>{let i=replaceBackupFileKeyFileContent(e);return isCannotResizeImage(e)?"FILE_CONTENT"==t?`{{ '${i}' | file_url }} 768w, {{ '${i}' | file_url }} 1024w, {{ '${i}' | file_url }} 1440w`:`{{ '${e}' | asset_url }} 768w, {{ '${e}' | asset_url }} 1024w, {{ '${e}' | asset_url }} 1440w`:"FILE_CONTENT"==t?`{{ '${i}' | file_img_url: '768x' }} 768w, {{ '${i}' | file_img_url: '1024x' }} 1024w, {{ '${i}' | file_img_url: 'master' }} 1440w`:`{{ '${e}' | asset_img_url: '768x' }} 768w, {{ '${e}' | asset_img_url: '1024x' }} 1024w, {{ '${e}' | asset_img_url: 'master' }} 1440w`},getSrcSetLink=e=>e,getImageSrc=(e,t,i)=>{if(e?.metafieldDefinitionKey)return getImageMetafieldDefinitionKey(e?.metafieldDefinitionKey);let r=e?.backupFilePath??e?.src??"";if(i)r=e?.src||"";else if(e?.backupFileKey){let t=getNewBackupFileKey(e.backupFileKey,e?.src??"");"THEME"!==e.storage&&e.storage?"FILE_CONTENT"===e.storage&&(r=`{{ "${replaceBackupFileKeyFileContent(t)}" | file_url }}`):r=`{{ "${t}" | asset_url }}`}if(t&&r?.includes("cdn.shopify"))switch(t){case"tablet":r=r?.replace(regexReplaceEndDot,"_1024x.");break;case"mobile":r=r?.replace(regexReplaceEndDot,"_768x.")}return r},getImageMetafieldDefinitionKey=e=>`{{${e} | file_url}}`,regexReplaceEndDot=/\.(?=[^.]*$)/,replaceBackupFileKeyFileContent=e=>e.replace(/\.jpeg|\.jfif/g,".jpg"),getNewBackupFileKey=(e,t)=>{let i=t?.match(/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))/)?.[1];return i&&i!=e?i:e};function resizeImage(e,t){let i=e.match(/\.webp/g)?.length,r=replaceRegexLastMatch({str:e,reg:/_(pico|icon|thumb|small|compact|medium|large|grande|original|1024x1024|2048x2048|master)+\./g,newString:"."});if(i)return r;let a=replaceRegexLastMatch({str:r,reg:/\.jpg|\.png|\.gif|\.jpeg/g,newString:t,isAdd:!0});return a}let replaceRegexLastMatch=e=>{let t=e.str,i=e.str.match(e.reg)?.length;if(i){let r,a=1;for(;null!==(r=e.reg.exec(e.str));){if(a===i){let i=e.reg.lastIndex,a=i-r[0].length;e.isAdd&&(e.newString="_"+e.newString+r),t=t.slice(0,a)+e.newString+t.slice(i,t.length)}a++}}return t},getItemWidth=(e,t)=>{let i=getCurrentDevice(),r=t?.[i]||"auto";if(!r||"auto"===r||r.includes("%"))return e;let a=Number(r.replace("px",""));return a>e?e:Number(r.replace("px",""))},getImageWidthFollowByQuality=e=>{let{itemWidthParam:t,imageWidthSetting:i,qualityType:r,qualityPercent:l}=e,g=getCurrentDevice(),o=getItemWidth(t,i),s=a(r,g,"finest"),c=a(l,g,100);switch(s){case"finest":default:return"auto";case"high":return Math.round(1.5*o)||1;case"medium":return Math.round(o)||1;case"custom":return Math.round(o*(Number(c)/100))||1}},getWidthOfFeatureImageSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return r.forEach(i=>{let r=a(e,i)?.width||"100%";t[i]=r}),t},getWidthOfImageListSetting=e=>{let t={desktop:"100%",tablet:"100%",mobile:"100%"};return r.forEach(i=>{let r=a(e,i)?.width||"100%";t[i]=r}),t},getWidthOfListImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-gallery-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},getWidthOfFeatureImageInDom=e=>{let t=document.querySelectorAll(`.gem-slider-item-${e}.gp-ft-image-item`),i=0;return t.forEach(e=>{e.offsetWidth>i&&(i=e.offsetWidth)}),i},handleSetSrcForProductImageList=e=>{let{shapeByLayout:t,qualityType:i,qualityPercent:r,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-gallery-image-item`),g=getWidthOfImageListSetting(t),o=getWidthOfListImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:g,width:o,qualityType:i,qualityPercent:r})})},handleSetSrcForFeatureProductImage=e=>{let{ftShape:t,qualityType:i,qualityPercent:r,builderPropUID:a}=e,l=document.querySelectorAll(`.gem-slider-item-${a}.gp-ft-image-item`),g=getWidthOfFeatureImageSetting(t),o=getWidthOfFeatureImageInDom(a);l.forEach(e=>{handleSetSrcForGalleryImage({item:e,settingWidth:g,width:o,qualityType:i,qualityPercent:r})})},handleSetSrcForGalleryImage=e=>{let{item:t,settingWidth:i,width:r,qualityType:a,qualityPercent:l}=e,g=getCurrentDevice(),o=t.querySelector("img");if(o){let e=getImageWidthFollowByQuality({itemWidthParam:r,imageWidthSetting:i,qualityType:a,qualityPercent:l}),t=o.getAttribute("base-src");if(!t)return;let s=getImageSrcByQuality(e,t),c=getImageSrcSet(t,s,g);o.setAttribute("srcset",c)}},getImageSrcByQuality=(e,t)=>"auto"===e?t:resizeImage(t,`${e}x`),getImageSrcSet=(e,t,i)=>`${"mobile"===i&&e!==t?t:resizeImage(e,"768x")} 767w, ${"tablet"===i&&e!==t?t:resizeImage(e,"1024x")} 1023w, ${"desktop"===i&&e!==t?t:resizeImage(e,"1920x")} 1440w`,getCurrentDevice=()=>window.innerWidth<768?"mobile":window.innerWidth>=768&&window.innerWidth<1025?"tablet":"desktop";export{FALLBACK_IMAGE,IMAGE_PLACEHOLDER,NEXT_IMAGE_CONFIG,composeAspectRatio,createBlurDataURL,getAdaptiveImageData,getAspectRatio,getAspectRatioNextImage,getCurrentDevice,getImageSrc,getImageWidthFollowByQuality,getNewBackupFileKey,getResponsiveObjectFit,getSrcSet,handleSetSrcForFeatureProductImage,handleSetSrcForProductImageList,isCannotResizeImage,overwriteDefaultRadius,regexReplaceEndDot,replaceBackupFileKeyFileContent,resizeImage,safeStringify,shimmer,toBase64};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{template as t}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=n=>{let{pageContext:o,children:a}=n,{productItemClass:r,gpProductClass:
|
|
1
|
+
import{template as t}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=n=>{let{pageContext:o,children:a}=n,{productItemClass:r,gpProductClass:i}=e(n);return t`
|
|
2
2
|
<gp-product
|
|
3
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
3
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
4
4
|
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 }},"pageContext" : ${JSON.stringify(o)}}'
|
|
5
|
-
class="${
|
|
5
|
+
class="${i}"
|
|
6
6
|
|
|
7
7
|
>
|
|
8
8
|
{%- form 'product', product, id: product_form_id, class: 'form contents ${r}', data-type: 'add-to-cart-form', autocomplete: 'off' -%}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import{template as t,RenderChildren as e}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:
|
|
1
|
+
import{template as t,RenderChildren as e}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=n(o),d=()=>t`
|
|
2
2
|
${r?.map((n,o)=>{if(n)return t`
|
|
3
3
|
${e({...n,index:o})}
|
|
4
4
|
`}).join("")}
|
|
5
5
|
`;return t`
|
|
6
6
|
<gp-product
|
|
7
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
7
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
8
8
|
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 }},"pageContext" : ${JSON.stringify(a)}}'
|
|
9
|
-
class="${
|
|
9
|
+
class="${c}"
|
|
10
10
|
|
|
11
11
|
>
|
|
12
|
-
{%- form 'product', product, id: product_form_id, class: 'form contents ${
|
|
12
|
+
{%- form 'product', product, id: product_form_id, class: 'form contents ${i}', data-type: 'add-to-cart-form', autocomplete: 'off' -%}
|
|
13
13
|
<input type="hidden" name="id" value="{{ variant.id }}" />
|
|
14
14
|
<input type="hidden" min="1" name="quantity" value="{{ quantity }}" />
|
|
15
15
|
<button type="submit" onclick="return false;" style="display:none;"></button>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{template as t}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=n=>{let{pageContext:o,children:a}=n,{productItemClass:r,gpProductClass:
|
|
1
|
+
import{template as t}from"@gem-sdk/core";import{getClass as e}from"./common/classes.js";let ProductListItem=n=>{let{pageContext:o,children:a}=n,{productItemClass:r,gpProductClass:i}=e(n);return t`
|
|
2
2
|
<gp-product
|
|
3
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
3
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
4
4
|
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 }},"pageContext" : ${JSON.stringify(o)}}'
|
|
5
|
-
class="${
|
|
5
|
+
class="${i}"
|
|
6
6
|
|
|
7
7
|
>
|
|
8
8
|
{%- form 'product', product, id: product_form_id, class: 'form contents ${r}', data-type: 'add-to-cart-form', autocomplete: 'off' -%}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import{template as t,RenderChildren as e}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:
|
|
1
|
+
import{template as t,RenderChildren as e}from"@gem-sdk/core";import{getClass as n}from"./common/classes.js";let ProductListItem=o=>{let{pageContext:a,rawChildren:r}=o,{productItemClass:i,gpProductClass:c}=n(o),d=()=>t`
|
|
2
2
|
${r?.map((n,o)=>{if(n)return t`
|
|
3
3
|
${e({...n,index:o})}
|
|
4
4
|
`}).join("")}
|
|
5
5
|
`;return t`
|
|
6
6
|
<gp-product
|
|
7
|
-
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 , "formId": "{{ product_form_id }}"}'
|
|
7
|
+
gp-context='{"variantSelected": {{ variant | json | escape }}, "inventory_management": {{ variant.inventory_management | json | escape }}, "inventory_policy": {{ variant.inventory_policy | json | escape }}, "quantity": 1 ,"inventoryQuantity": {{ variant.inventory_quantity }}, "formId": "{{ product_form_id }}"}'
|
|
8
8
|
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 }},"pageContext" : ${JSON.stringify(a)}}'
|
|
9
|
-
class="${
|
|
9
|
+
class="${c}"
|
|
10
10
|
|
|
11
11
|
>
|
|
12
|
-
{%- form 'product', product, id: product_form_id, class: 'form contents ${
|
|
12
|
+
{%- form 'product', product, id: product_form_id, class: 'form contents ${i}', data-type: 'add-to-cart-form', autocomplete: 'off' -%}
|
|
13
13
|
<input type="hidden" name="id" value="{{ variant.id }}" />
|
|
14
14
|
<input type="hidden" min="1" name="quantity" value="{{ quantity }}" />
|
|
15
15
|
<button type="submit" onclick="return false;" style="display:none;"></button>
|