@gem-sdk/components 2.2.0-staging.38 → 2.3.0
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/article/components/ArticleImage.js +1 -2
- package/dist/cjs/banner/components/hero-banner/index.liquid.js +7 -4
- package/dist/cjs/builder.js +1 -1
- package/dist/cjs/button/components/Button.js +3 -3
- package/dist/cjs/button/components/Button.liquid.js +5 -5
- package/dist/cjs/carousel/components/Carousel.liquid.js +2 -3
- package/dist/cjs/carousel/components/plugins/AutoPlayPlugin.js +58 -17
- package/dist/cjs/common/const.js +1 -1
- package/dist/cjs/grid/setting/Section.js +7 -37
- package/dist/cjs/image/components/AdaptiveImage.liquid.js +5 -6
- package/dist/cjs/image/components/Image.js +1 -2
- package/dist/cjs/image/components/Image.liquid.js +4 -6
- package/dist/cjs/image/components/NextImage.liquid.js +3 -4
- package/dist/cjs/image-comparison/components/CompareImage.liquid.js +3 -7
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/index.liquid.js +2 -2
- package/dist/cjs/marquee/components/Marquee.liquid.js +13 -10
- package/dist/cjs/post-purchase/product/components/variants/Dropdown.js +1 -1
- package/dist/cjs/product/components/ProductButton.js +1 -1
- package/dist/cjs/product/components/ProductButton.liquid.js +3 -21
- package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js +5 -6
- package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js +3 -3
- package/dist/cjs/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js +4 -4
- package/dist/cjs/product/components/ProductImagesV2/liquid/ProductImages.liquid.js +4 -4
- package/dist/cjs/product/components/ProductVariants/variants/combine/index.js +1 -1
- package/dist/cjs/product/setting/ProductList.js +1 -1
- package/dist/cjs/tab/hooks/useTabInteraction.js +9 -13
- package/dist/cjs/third-party/components/Bogos/BogosSampleContent.js +10 -9
- package/dist/cjs/third-party/components/RechargeSubscriptions.liquid.js +1 -1
- package/dist/cjs/third-party/components/Releasit.liquid.js +2 -4
- package/dist/cjs/third-party/configs/BoldProductOptions.js +2 -2
- package/dist/cjs/third-party/configs/EcoboostifyShoppableReelUgc.js +1 -1
- package/dist/cjs/third-party/next.js +3 -3
- package/dist/cjs/third-party/setting/EcoboostifyShoppableReelUgc.js +2 -2
- package/dist/cjs/third-party/setting/Releasit.js +2 -59
- package/dist/cjs/third-party/setting/index.js +3 -3
- package/dist/cjs/video/components/HTML5Embed.js +2 -2
- package/dist/cjs/video/components/HTML5Embed.liquid.js +3 -6
- package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js +3 -5
- package/dist/esm/article/components/ArticleImage.js +1 -2
- package/dist/esm/banner/components/hero-banner/index.liquid.js +7 -4
- package/dist/esm/builder.js +1 -1
- package/dist/esm/button/components/Button.js +3 -3
- package/dist/esm/button/components/Button.liquid.js +5 -5
- package/dist/esm/carousel/components/Carousel.liquid.js +2 -3
- package/dist/esm/carousel/components/plugins/AutoPlayPlugin.js +58 -17
- package/dist/esm/common/const.js +1 -1
- package/dist/esm/grid/setting/Section.js +7 -37
- package/dist/esm/image/components/AdaptiveImage.liquid.js +5 -6
- package/dist/esm/image/components/Image.js +2 -3
- package/dist/esm/image/components/Image.liquid.js +4 -6
- package/dist/esm/image/components/NextImage.liquid.js +3 -4
- package/dist/esm/image-comparison/components/CompareImage.liquid.js +3 -7
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.liquid.js +1 -1
- package/dist/esm/marquee/components/Marquee.liquid.js +13 -10
- package/dist/esm/post-purchase/product/components/variants/Dropdown.js +1 -1
- package/dist/esm/product/components/ProductButton.js +1 -1
- package/dist/esm/product/components/ProductButton.liquid.js +3 -21
- package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js +5 -6
- package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js +3 -3
- package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js +4 -4
- package/dist/esm/product/components/ProductImagesV2/liquid/ProductImages.liquid.js +4 -4
- package/dist/esm/product/components/ProductVariants/variants/combine/index.js +1 -1
- package/dist/esm/product/setting/ProductList.js +1 -1
- package/dist/esm/tab/hooks/useTabInteraction.js +10 -14
- package/dist/esm/third-party/components/Bogos/BogosSampleContent.js +11 -10
- package/dist/esm/third-party/components/RechargeSubscriptions.liquid.js +1 -1
- package/dist/esm/third-party/components/Releasit.liquid.js +2 -4
- package/dist/esm/third-party/configs/BoldProductOptions.js +2 -2
- package/dist/esm/third-party/configs/EcoboostifyShoppableReelUgc.js +1 -1
- package/dist/esm/third-party/next.js +3 -3
- package/dist/esm/third-party/setting/EcoboostifyShoppableReelUgc.js +2 -2
- package/dist/esm/third-party/setting/Releasit.js +2 -59
- package/dist/esm/third-party/setting/index.js +4 -4
- package/dist/esm/video/components/HTML5Embed.js +2 -2
- package/dist/esm/video/components/HTML5Embed.liquid.js +3 -6
- package/dist/esm/video/components/LiteYouTubeEmbed.liquid.js +3 -5
- package/dist/types/index.d.ts +16 -30
- package/package.json +3 -3
package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js
CHANGED
|
@@ -9,7 +9,7 @@ import NextImage from '../../../../image/components/NextImage.liquid.js';
|
|
|
9
9
|
import Video from '../../../../image/components/Video.liquid.js';
|
|
10
10
|
import { getStyleOfObject } from '../../../helpers/function.js';
|
|
11
11
|
|
|
12
|
-
const ProductFeaturedImageCarousel = ({ builderPropUID, children,
|
|
12
|
+
const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
|
|
13
13
|
const ftAspectRatio = getAspectRatio(setting.ftShape);
|
|
14
14
|
const getStyleFeaturedImageDisplay = ()=>{
|
|
15
15
|
return getDisplayStyle((device)=>![
|
|
@@ -149,7 +149,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
|
|
|
149
149
|
},
|
|
150
150
|
priority: setting?.preload,
|
|
151
151
|
className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${className}`,
|
|
152
|
-
|
|
152
|
+
enableLazyloadImage
|
|
153
153
|
})}`;
|
|
154
154
|
};
|
|
155
155
|
const renderNoImage = ()=>{
|
|
@@ -167,7 +167,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
|
|
|
167
167
|
},
|
|
168
168
|
priority: setting?.preload,
|
|
169
169
|
className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none`,
|
|
170
|
-
|
|
170
|
+
enableLazyloadImage
|
|
171
171
|
})}`;
|
|
172
172
|
};
|
|
173
173
|
const getValueFromValueContainUnit = (value)=>{
|
|
@@ -394,11 +394,10 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
|
|
|
394
394
|
},
|
|
395
395
|
className: `gp-w-full featured-image-only !gp-rounded-none`,
|
|
396
396
|
customLazyload: true,
|
|
397
|
-
|
|
397
|
+
enableLazyloadImage
|
|
398
398
|
})}
|
|
399
399
|
{%- endif -%}
|
|
400
|
-
|
|
401
|
-
ftShapeProductImage: setting?.ftShape
|
|
400
|
+
`
|
|
402
401
|
})}
|
|
403
402
|
`;
|
|
404
403
|
};
|
|
@@ -6,7 +6,7 @@ import { convertSpacing, getDisplayStyle, getAspectRatio, getSrcImage } from '..
|
|
|
6
6
|
import { getShapeByLayout, getSettingMinWidthForCarouselItem, getSettingWidthForCarouselItem, getMinHeightByPosition, getSliderPerShowConfig, getAllowDotConfig, getDotStyleConfig, getCarouselVerticalConfigByPosition, checkDisplayGalleryByWidth, getZoomDisplay } from '../common/productGallery.js';
|
|
7
7
|
import { getStyleOfObject } from '../../../helpers/function.js';
|
|
8
8
|
|
|
9
|
-
const ProductGalleryCarousel = ({ builderPropUID, children,
|
|
9
|
+
const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
|
|
10
10
|
const getCarouselDisplay = ()=>{
|
|
11
11
|
const isDisplayCarousel = (type, position, device)=>{
|
|
12
12
|
const layout = getResponsiveValueByScreen(position, device);
|
|
@@ -86,7 +86,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
|
|
|
86
86
|
customLazyload: true,
|
|
87
87
|
style: style,
|
|
88
88
|
className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
|
|
89
|
-
|
|
89
|
+
enableLazyloadImage
|
|
90
90
|
})}`;
|
|
91
91
|
};
|
|
92
92
|
const aspectRatioToPaddingBottom = ()=>{
|
|
@@ -102,7 +102,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
|
|
|
102
102
|
'tablet'
|
|
103
103
|
];
|
|
104
104
|
DEVICES.forEach((device)=>{
|
|
105
|
-
const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('
|
|
105
|
+
const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('').reverse().join('') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
|
|
106
106
|
result = {
|
|
107
107
|
...result,
|
|
108
108
|
[device]: `calc((${value})*100%)`
|
|
@@ -8,7 +8,7 @@ import Model3d from '../../../../image/components/Modal3d.liquid.js';
|
|
|
8
8
|
import Video from '../../../../image/components/Video.liquid.js';
|
|
9
9
|
import HTML5Embed from '../../../../video/components/HTML5Embed.liquid.js';
|
|
10
10
|
|
|
11
|
-
const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children,
|
|
11
|
+
const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
|
|
12
12
|
const getGridDisplay = ()=>{
|
|
13
13
|
const isDisplayGrid = (type, position, device)=>{
|
|
14
14
|
const layout = getResponsiveValueByScreen(position, device);
|
|
@@ -97,7 +97,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
|
|
|
97
97
|
style: style,
|
|
98
98
|
className: '!gp-rounded-none',
|
|
99
99
|
customLazyload: false,
|
|
100
|
-
|
|
100
|
+
enableLazyloadImage
|
|
101
101
|
})}
|
|
102
102
|
${setting?.galleryHoverEffect !== 'none' ? `<div class="${cls('zoom-element !gp-max-w-none', getZoomImageClass())}">
|
|
103
103
|
${NextImage({
|
|
@@ -111,7 +111,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
|
|
|
111
111
|
style: style,
|
|
112
112
|
className: '!gp-rounded-none gp-w-full gp-h-full',
|
|
113
113
|
customLazyload: false,
|
|
114
|
-
|
|
114
|
+
enableLazyloadImage
|
|
115
115
|
})}
|
|
116
116
|
</div>` : ''}
|
|
117
117
|
${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
|
|
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
|
|
|
294
294
|
},
|
|
295
295
|
className: '!gp-rounded-none',
|
|
296
296
|
customLazyload: false,
|
|
297
|
-
|
|
297
|
+
enableLazyloadImage
|
|
298
298
|
})}`;
|
|
299
299
|
};
|
|
300
300
|
return template`
|
|
@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../../../helpers.js';
|
|
|
7
7
|
import { getShapeByLayout, sizeSettingDefaultForNewLayout } from '../common/productGallery.js';
|
|
8
8
|
|
|
9
9
|
const ProductImages = (productImageProps)=>{
|
|
10
|
-
const { setting, styles, builderProps, style, advanced, rawChildren, pageContext,
|
|
10
|
+
const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
|
|
11
11
|
const settings = {
|
|
12
12
|
...setting,
|
|
13
13
|
...styles
|
|
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
|
|
|
112
112
|
builderPropUID: `gp-carousel-${builderProps?.uid}`,
|
|
113
113
|
...settings,
|
|
114
114
|
children: renderProductBadge(),
|
|
115
|
-
|
|
115
|
+
enableLazyloadImage
|
|
116
116
|
})}
|
|
117
117
|
${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
|
|
118
118
|
<div
|
|
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
|
|
|
128
128
|
${ProductGalleryCarousel({
|
|
129
129
|
builderPropUID: `gp-gallery-${builderProps?.uid}`,
|
|
130
130
|
...settings,
|
|
131
|
-
|
|
131
|
+
enableLazyloadImage
|
|
132
132
|
})}
|
|
133
133
|
</div>
|
|
134
134
|
${ProductGalleryGrid({
|
|
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
|
|
|
138
138
|
},
|
|
139
139
|
children: renderProductBadge(),
|
|
140
140
|
...settings,
|
|
141
|
-
|
|
141
|
+
enableLazyloadImage
|
|
142
142
|
})}
|
|
143
143
|
`)}
|
|
144
144
|
</div>
|
|
@@ -38,7 +38,7 @@ const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
|
|
|
38
38
|
`}`;
|
|
39
39
|
};
|
|
40
40
|
const renderBlankOption = (hasPreSelected, blankText)=>{
|
|
41
|
-
return !hasPreSelected ? `<option value="blank" selected>${blankText
|
|
41
|
+
return !hasPreSelected ? `<option value="blank" selected>${blankText ?? getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
export { renderBlankOption, renderCombineVariants };
|
|
@@ -814,7 +814,7 @@ const config = {
|
|
|
814
814
|
options: {
|
|
815
815
|
tooltip: {
|
|
816
816
|
icon: 'info-line-16',
|
|
817
|
-
content: 'Note: this might not work properly on Safari for iOS versions below
|
|
817
|
+
content: 'Note: this might not work properly on Safari for iOS versions below 17',
|
|
818
818
|
iconClass: 'text-[#757575] hover:text-[#F9F9F9]'
|
|
819
819
|
}
|
|
820
820
|
},
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import { useInteraction, useEditorMode } from '@gem-sdk/core';
|
|
2
|
-
import { useEffect } from 'react';
|
|
2
|
+
import { useState, useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
|
|
5
|
-
const
|
|
5
|
+
const [previousTab, setPreviousTab] = useState(activeKey || 1);
|
|
6
|
+
const { trigger, onListener, interactionListenerLoaded } = useInteraction();
|
|
6
7
|
const mode = useEditorMode();
|
|
7
8
|
const changeOpenTabInteraction = (params)=>{
|
|
8
|
-
const { data, isRollback
|
|
9
|
-
if (data === undefined && isRollback) return;
|
|
10
|
-
const newData = Number(data) + 1;
|
|
9
|
+
const { data, isRollback } = params || {};
|
|
10
|
+
if (data === undefined && isRollback === undefined) return;
|
|
11
11
|
if (isRollback) {
|
|
12
|
-
setActiveKey(
|
|
12
|
+
setActiveKey(previousTab);
|
|
13
|
+
setPreviousTab(activeTab);
|
|
13
14
|
return;
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
-
setActiveKey(
|
|
16
|
+
setPreviousTab(activeTab);
|
|
17
|
+
setActiveKey(data + 1);
|
|
17
18
|
};
|
|
18
19
|
const dispatchEventTabActive = (index)=>{
|
|
19
20
|
trigger({
|
|
@@ -34,16 +35,11 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
|
|
|
34
35
|
dispatchEventTabActive(activeTab - 1);
|
|
35
36
|
});
|
|
36
37
|
const selector = `[data-id="${componentUid}"]`;
|
|
37
|
-
const element = findElementIncludingSelf(document, selector);
|
|
38
38
|
const removeListener = onListener({
|
|
39
39
|
event: 'gp:change-open-tab',
|
|
40
40
|
selector
|
|
41
41
|
}, (params)=>{
|
|
42
|
-
changeOpenTabInteraction(
|
|
43
|
-
...params,
|
|
44
|
-
element,
|
|
45
|
-
key: params?.uniqueStorageKey
|
|
46
|
-
});
|
|
42
|
+
changeOpenTabInteraction(params);
|
|
47
43
|
});
|
|
48
44
|
return ()=>{
|
|
49
45
|
removeListener?.();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
3
|
import BogosConfig from '../../configs/Bogos.js';
|
|
4
4
|
import ThirdPartyPreview from '../ThirdPartyPreview.js';
|
|
@@ -9,8 +9,7 @@ const mapWidgetLabel = {
|
|
|
9
9
|
slider: 'Gift slider',
|
|
10
10
|
message: 'Cart message',
|
|
11
11
|
['classic-bundle']: 'Classic bundle',
|
|
12
|
-
['quantity-break']: 'Quantity break'
|
|
13
|
-
['mix-match']: 'Mix and match'
|
|
12
|
+
['quantity-break']: 'Quantity break'
|
|
14
13
|
};
|
|
15
14
|
const BogosSampleContent = ({ setting })=>{
|
|
16
15
|
const widgetLabel = setting?.widgetType && mapWidgetLabel[setting.widgetType];
|
|
@@ -19,13 +18,15 @@ const BogosSampleContent = ({ setting })=>{
|
|
|
19
18
|
}, [
|
|
20
19
|
widgetLabel
|
|
21
20
|
]);
|
|
22
|
-
return /*#__PURE__*/ jsx(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
22
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
23
|
+
className: "p-2",
|
|
24
|
+
children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
|
|
25
|
+
setting: {
|
|
26
|
+
label,
|
|
27
|
+
iconSvg: `<img class="gp-w-[24px] border border-[#494949] rounded-[3px]" src="${BogosConfig.logoUrl}">`
|
|
28
|
+
}
|
|
29
|
+
})
|
|
29
30
|
})
|
|
30
31
|
});
|
|
31
32
|
};
|
|
@@ -2,7 +2,7 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
|
|
|
2
2
|
|
|
3
3
|
const RechargeSubscriptions = ({ setting, advanced })=>{
|
|
4
4
|
const { align, appBlockId } = setting ?? {};
|
|
5
|
-
return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}
|
|
5
|
+
return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`);
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
export { RechargeSubscriptions as default };
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
|
|
2
1
|
import { template, makeStyleResponsive } from '@gem-sdk/core';
|
|
3
2
|
|
|
4
3
|
const Releasit = ({ setting, advanced })=>{
|
|
5
|
-
const { align
|
|
6
|
-
|
|
7
|
-
return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : template`
|
|
4
|
+
const { align } = setting ?? {};
|
|
5
|
+
return template`
|
|
8
6
|
<div
|
|
9
7
|
class="${advanced?.cssClass}"
|
|
10
8
|
style="${{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var BoldProductOptionsConfig = {
|
|
2
2
|
id: 'bold-product-options',
|
|
3
|
-
label: '
|
|
4
|
-
logoUrl: 'https://
|
|
3
|
+
label: 'Bold Product Options',
|
|
4
|
+
logoUrl: 'https://ucarecdn.com/cae13b55-18b6-416a-a447-c18211d78cfe/-/format/auto/-/preview/3000x3000/-/quality/lighter/Bold%20Product%20Options.png',
|
|
5
5
|
tag: 'BoldProductOptions'
|
|
6
6
|
};
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var AppConfig = {
|
|
2
2
|
id: 'ecoboostify-shoppable-reel-ugc',
|
|
3
3
|
label: 'EcoBoostify Shoppable Reel UGC',
|
|
4
|
-
logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/
|
|
4
|
+
logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png',
|
|
5
5
|
tag: 'EcoboostifyShoppableReelUgc'
|
|
6
6
|
};
|
|
7
7
|
|
|
@@ -2,11 +2,11 @@ import dynamic from 'next/dynamic';
|
|
|
2
2
|
import Loading from '../common/components/Loading.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const AppstleBundlesDiscounts = dynamic(()=>import('./components/AppstleBundlesDiscounts.js'), {
|
|
6
6
|
ssr: false,
|
|
7
7
|
loading: Loading
|
|
8
8
|
});
|
|
9
|
-
const
|
|
9
|
+
const EcomsendBackInStockAlert = dynamic(()=>import('./components/EcomsendBackInStockAlert.js'), {
|
|
10
10
|
ssr: false,
|
|
11
11
|
loading: Loading
|
|
12
12
|
});
|
|
@@ -467,8 +467,8 @@ const EcoboostifyShoppableReelUgc = dynamic(()=>import('./components/Ecoboostify
|
|
|
467
467
|
loading: Loading
|
|
468
468
|
});
|
|
469
469
|
var thirdParty = {
|
|
470
|
-
EcomsendBackInStockAlert,
|
|
471
470
|
AppstleBundlesDiscounts,
|
|
471
|
+
EcomsendBackInStockAlert,
|
|
472
472
|
EcoboostifyShoppableReelUgc,
|
|
473
473
|
EstimatedDeliveryDatePlus,
|
|
474
474
|
OkendoReviewsLoyalty,
|
|
@@ -3,7 +3,7 @@ import AppConfig from '../configs/EcoboostifyShoppableReelUgc.js';
|
|
|
3
3
|
const config = {
|
|
4
4
|
tag: AppConfig.tag,
|
|
5
5
|
label: AppConfig.label,
|
|
6
|
-
icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/
|
|
6
|
+
icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png">',
|
|
7
7
|
editorConfigs: {
|
|
8
8
|
component: {
|
|
9
9
|
isThirdParty: true
|
|
@@ -18,7 +18,7 @@ const config = {
|
|
|
18
18
|
hideTextContent: true,
|
|
19
19
|
icon: {
|
|
20
20
|
desktop: `<div class="w-full flex flex-col items-center">
|
|
21
|
-
<img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/
|
|
21
|
+
<img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png">
|
|
22
22
|
<span class="preset-item-title">EcoBoostify Shoppable Reel UGC</span>
|
|
23
23
|
</div>`
|
|
24
24
|
},
|
|
@@ -7,11 +7,6 @@ const config = {
|
|
|
7
7
|
editorConfigs: {
|
|
8
8
|
component: {
|
|
9
9
|
isThirdParty: true
|
|
10
|
-
},
|
|
11
|
-
placeholder: {
|
|
12
|
-
flowTag: [
|
|
13
|
-
'Product'
|
|
14
|
-
]
|
|
15
10
|
}
|
|
16
11
|
},
|
|
17
12
|
presets: [
|
|
@@ -40,16 +35,6 @@ const config = {
|
|
|
40
35
|
{
|
|
41
36
|
id: 'setting',
|
|
42
37
|
controls: [
|
|
43
|
-
{
|
|
44
|
-
id: 'appBlockId',
|
|
45
|
-
type: 'input',
|
|
46
|
-
default: ''
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
id: 'productHandle',
|
|
50
|
-
type: 'input',
|
|
51
|
-
default: ''
|
|
52
|
-
},
|
|
53
38
|
{
|
|
54
39
|
id: 'install',
|
|
55
40
|
type: 'open-link',
|
|
@@ -66,38 +51,6 @@ const config = {
|
|
|
66
51
|
href: 'https://admin.shopify.com/?redirect=/apps/releasit-cod-order-form',
|
|
67
52
|
appName: ReleasitConfig.label
|
|
68
53
|
},
|
|
69
|
-
{
|
|
70
|
-
id: 'version',
|
|
71
|
-
label: 'Choose version',
|
|
72
|
-
type: 'select',
|
|
73
|
-
default: 'v1',
|
|
74
|
-
options: [
|
|
75
|
-
{
|
|
76
|
-
label: 'V1',
|
|
77
|
-
value: 'v1'
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
label: 'V2',
|
|
81
|
-
value: 'v2'
|
|
82
|
-
}
|
|
83
|
-
]
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
id: 'widgetTypeV2',
|
|
87
|
-
label: 'Choose widget',
|
|
88
|
-
type: 'select',
|
|
89
|
-
default: 'button-app-block',
|
|
90
|
-
options: [
|
|
91
|
-
{
|
|
92
|
-
label: 'Releasit button',
|
|
93
|
-
value: 'button-app-block'
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
label: 'Releasit embedded form',
|
|
97
|
-
value: 'form-app-block'
|
|
98
|
-
}
|
|
99
|
-
]
|
|
100
|
-
},
|
|
101
54
|
{
|
|
102
55
|
id: 'align',
|
|
103
56
|
label: 'Alignment',
|
|
@@ -135,24 +88,14 @@ const config = {
|
|
|
135
88
|
id: 'install'
|
|
136
89
|
}
|
|
137
90
|
},
|
|
138
|
-
{
|
|
139
|
-
type: 'control',
|
|
140
|
-
label: {
|
|
141
|
-
en: 'Choose version'
|
|
142
|
-
},
|
|
143
|
-
setting: {
|
|
144
|
-
id: 'version'
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
91
|
{
|
|
148
92
|
type: 'control',
|
|
149
93
|
label: {
|
|
150
94
|
en: 'Choose widget'
|
|
151
95
|
},
|
|
152
96
|
setting: {
|
|
153
|
-
id: '
|
|
154
|
-
}
|
|
155
|
-
condition: 'version === "v2"'
|
|
97
|
+
id: 'widgetType'
|
|
98
|
+
}
|
|
156
99
|
},
|
|
157
100
|
{
|
|
158
101
|
type: 'control',
|
|
@@ -112,8 +112,8 @@ import config$1K from './BfSizeChartSizeGuide.js';
|
|
|
112
112
|
import config$1L from './AlsoBoughtCbb.js';
|
|
113
113
|
import config$1M from './HextomFreeShippingBar.js';
|
|
114
114
|
import config$1N from './EcoboostifyShoppableReelUgc.js';
|
|
115
|
-
import config$1O from './
|
|
116
|
-
import config$1P from './
|
|
115
|
+
import config$1O from './AppstleBundlesDiscounts.js';
|
|
116
|
+
import config$1P from './EcomsendBackInStockAlert.js';
|
|
117
117
|
|
|
118
118
|
var index = {
|
|
119
119
|
HextomCountdownTimerBar: config,
|
|
@@ -230,8 +230,8 @@ var index = {
|
|
|
230
230
|
AlsoBoughtCbb: config$1L,
|
|
231
231
|
HextomFreeShippingBar: config$1M,
|
|
232
232
|
EcoboostifyShoppableReelUgc: config$1N,
|
|
233
|
-
|
|
234
|
-
|
|
233
|
+
AppstleBundlesDiscounts: config$1O,
|
|
234
|
+
EcomsendBackInStockAlert: config$1P
|
|
235
235
|
};
|
|
236
236
|
|
|
237
237
|
export { index as default };
|
|
@@ -47,14 +47,14 @@ const HTML5Embed = (props)=>{
|
|
|
47
47
|
}),
|
|
48
48
|
props.thumbnail && showThumbnail && /*#__PURE__*/ jsxs("div", {
|
|
49
49
|
role: "presentation",
|
|
50
|
-
className: "gp-absolute gp-top-0 gp-left-0 gp-w-full
|
|
50
|
+
className: "gp-absolute gp-top-0 gp-left-0 gp-w-full",
|
|
51
51
|
onClick: playVideoAndTurnOffThumbnail,
|
|
52
52
|
style: props.style,
|
|
53
53
|
children: [
|
|
54
54
|
/*#__PURE__*/ jsx("img", {
|
|
55
55
|
id: "video-thumbnail",
|
|
56
56
|
src: props.thumbnail,
|
|
57
|
-
className: "gp-w-full gp-h-full gp-object-
|
|
57
|
+
className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
|
|
58
58
|
alt: "Video Thumbnail"
|
|
59
59
|
}),
|
|
60
60
|
/*#__PURE__*/ jsx("button", {
|
|
@@ -3,7 +3,6 @@ import NextImage from '../../image/components/NextImage.liquid.js';
|
|
|
3
3
|
import { getSettingPreloadData } from '../../helpers.js';
|
|
4
4
|
|
|
5
5
|
const HTML5Embed = (props)=>{
|
|
6
|
-
const { enableLazyLoadImage, pageContext } = props;
|
|
7
6
|
const videoId = `gp-video-${props.uid}`;
|
|
8
7
|
const preloadThumbnail = props.autoplay && props.thumbnail;
|
|
9
8
|
const offLazyVideo = !props.lazy && props.isVideoComponent;
|
|
@@ -20,9 +19,7 @@ const HTML5Embed = (props)=>{
|
|
|
20
19
|
'--op': 0,
|
|
21
20
|
'--z': -1,
|
|
22
21
|
display: 'none'
|
|
23
|
-
}
|
|
24
|
-
enableLazyLoadImage,
|
|
25
|
-
pageContext
|
|
22
|
+
}
|
|
26
23
|
})}
|
|
27
24
|
${RenderIf(props.autoplay, `<script>
|
|
28
25
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
@@ -71,14 +68,14 @@ const HTML5Embed = (props)=>{
|
|
|
71
68
|
</video>
|
|
72
69
|
<div
|
|
73
70
|
style="${props.style}"
|
|
74
|
-
class="${cls('gp-absolute gp-top-0 gp-left-0 gp-w-full gp-
|
|
71
|
+
class="${cls('gp-absolute gp-top-0 gp-left-0 gp-w-full gp-thumbnail-video', {
|
|
75
72
|
'gp-hidden': !props.thumbnail || props.autoplay
|
|
76
73
|
})}"
|
|
77
74
|
>
|
|
78
75
|
<img
|
|
79
76
|
id="video-thumbnail"
|
|
80
77
|
src="${props.thumbnail ?? ''}"
|
|
81
|
-
class="gp-w-full gp-h-full gp-object-
|
|
78
|
+
class="gp-w-full gp-h-full gp-object-cover"
|
|
82
79
|
alt="Video Thumbnail"
|
|
83
80
|
></img>
|
|
84
81
|
<button
|
|
@@ -3,7 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
|
|
|
3
3
|
import { getSettingPreloadData } from '../../helpers.js';
|
|
4
4
|
|
|
5
5
|
const LiteYouTubeEmbed = (props)=>{
|
|
6
|
-
const { style, lazy, preload
|
|
6
|
+
const { style, lazy, preload } = props;
|
|
7
7
|
const videoUid = `gp-video-${props.uid}`;
|
|
8
8
|
const videoId = encodeURIComponent(props.id);
|
|
9
9
|
const videoTitle = props.title;
|
|
@@ -38,7 +38,7 @@ const LiteYouTubeEmbed = (props)=>{
|
|
|
38
38
|
data-title="${videoTitle}"
|
|
39
39
|
style="${{
|
|
40
40
|
...makeStyleResponsive('bgi', {
|
|
41
|
-
desktop: preload
|
|
41
|
+
desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
|
|
42
42
|
}),
|
|
43
43
|
...style
|
|
44
44
|
}}"
|
|
@@ -48,9 +48,7 @@ const LiteYouTubeEmbed = (props)=>{
|
|
|
48
48
|
src: posterUrl,
|
|
49
49
|
alt: 'Poster',
|
|
50
50
|
className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
|
|
51
|
-
isDisableAspectStyle: true
|
|
52
|
-
enableLazyLoadImage,
|
|
53
|
-
pageContext
|
|
51
|
+
isDisableAspectStyle: true
|
|
54
52
|
})}
|
|
55
53
|
<button
|
|
56
54
|
type="button"
|