@gem-sdk/pages 1.40.2-staging.5 → 1.41.0-dev.16
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/components/Footer.js +11 -8
- package/dist/cjs/components/Header.js +70 -69
- package/dist/cjs/components/builder/Toolbar.js +35 -31
- package/dist/cjs/pages/builder.js +5 -3
- package/dist/esm/components/Footer.js +11 -8
- package/dist/esm/components/Header.js +71 -70
- package/dist/esm/components/builder/Toolbar.js +35 -31
- package/dist/esm/pages/builder.js +5 -3
- package/dist/types/index.d.ts +1 -0
- package/package.json +5 -5
|
@@ -11,12 +11,15 @@ const defaultMargin = {
|
|
|
11
11
|
tablet: '40px',
|
|
12
12
|
mobile: '40px'
|
|
13
13
|
};
|
|
14
|
+
const FOOTER_ON_COLOR = '#D6D6D6';
|
|
14
15
|
const FOOTER_OFF_COLOR = '#F4F4F4';
|
|
15
16
|
const Footer = (props)=>{
|
|
16
|
-
const { pageType } = props;
|
|
17
|
+
const { pageType, isOriginTemplate } = props;
|
|
17
18
|
const urlParams = new URLSearchParams(window.location.search);
|
|
18
19
|
const shopName = urlParams.get('storefrontHandle');
|
|
19
20
|
const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
|
|
21
|
+
const activeFooter = layoutSetting?.showFooter || isOriginTemplate;
|
|
22
|
+
const footerColor = activeFooter ? FOOTER_ON_COLOR : FOOTER_OFF_COLOR;
|
|
20
23
|
const [shouldFixed, setShouldFixed] = react.useState(false);
|
|
21
24
|
react.useEffect(()=>{
|
|
22
25
|
const $iframe = parent.document.querySelector('.iframe');
|
|
@@ -78,19 +81,19 @@ const Footer = (props)=>{
|
|
|
78
81
|
children: [
|
|
79
82
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
80
83
|
d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
81
|
-
fill:
|
|
84
|
+
fill: footerColor
|
|
82
85
|
}),
|
|
83
86
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
84
87
|
d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
|
|
85
|
-
fill:
|
|
88
|
+
fill: footerColor
|
|
86
89
|
}),
|
|
87
90
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
88
91
|
d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
|
|
89
|
-
fill:
|
|
92
|
+
fill: footerColor
|
|
90
93
|
})
|
|
91
94
|
]
|
|
92
95
|
}),
|
|
93
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
96
|
+
!isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
94
97
|
className: "gp-footer gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
|
|
95
98
|
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
96
99
|
className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
|
|
@@ -126,15 +129,15 @@ const Footer = (props)=>{
|
|
|
126
129
|
children: [
|
|
127
130
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
128
131
|
d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
129
|
-
fill:
|
|
132
|
+
fill: footerColor
|
|
130
133
|
}),
|
|
131
134
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
132
135
|
d: "M30 4C30 1.79086 31.7909 0 34 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H34C31.7909 8 30 6.20914 30 4Z",
|
|
133
|
-
fill:
|
|
136
|
+
fill: footerColor
|
|
134
137
|
}),
|
|
135
138
|
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
136
139
|
d: "M60 4C60 1.79086 61.7909 0 64 0H78C80.2091 0 82 1.79086 82 4C82 6.20914 80.2091 8 78 8H64C61.7909 8 60 6.20914 60 4Z",
|
|
137
|
-
fill:
|
|
140
|
+
fill: footerColor
|
|
138
141
|
})
|
|
139
142
|
]
|
|
140
143
|
})
|
|
@@ -10,6 +10,7 @@ const defaultMargin = {
|
|
|
10
10
|
tablet: '40px',
|
|
11
11
|
mobile: '40px'
|
|
12
12
|
};
|
|
13
|
+
const HEADER_ON_COLOR = '#D6D6D6';
|
|
13
14
|
const HEADER_OFF_COLOR = '#F4F4F4';
|
|
14
15
|
const sizeCheck = {
|
|
15
16
|
desktop: '24px',
|
|
@@ -17,8 +18,10 @@ const sizeCheck = {
|
|
|
17
18
|
mobile: '36px'
|
|
18
19
|
};
|
|
19
20
|
const Header = (props)=>{
|
|
20
|
-
const { pageType } = props;
|
|
21
|
+
const { pageType, isOriginTemplate } = props;
|
|
21
22
|
const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
|
|
23
|
+
const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
|
|
24
|
+
const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
|
|
22
25
|
return /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
23
26
|
className: core.cls('gp-header-container gp-border-1 gp-group gp-relative gp-flex gp-justify-center gp-border-b gp-border-[#EEEEEE] gp-font-sans'),
|
|
24
27
|
children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
@@ -88,82 +91,80 @@ const Header = (props)=>{
|
|
|
88
91
|
})
|
|
89
92
|
]
|
|
90
93
|
})
|
|
91
|
-
}) : /*#__PURE__*/ jsxRuntime.
|
|
94
|
+
}) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
92
95
|
className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
|
|
93
96
|
style: {
|
|
94
97
|
maxWidth: `var(--g-ct-w)`,
|
|
95
98
|
...core.makeStyleResponsive('ml', defaultMargin),
|
|
96
99
|
...core.makeStyleResponsive('mr', defaultMargin)
|
|
97
100
|
},
|
|
98
|
-
children:
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
]
|
|
141
|
-
})
|
|
101
|
+
children: [
|
|
102
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
103
|
+
width: "84",
|
|
104
|
+
height: "8",
|
|
105
|
+
viewBox: "0 0 84 8",
|
|
106
|
+
fill: "none",
|
|
107
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
108
|
+
children: [
|
|
109
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
110
|
+
d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
111
|
+
fill: activeHeader ? '#9E9E9E' : HEADER_OFF_COLOR
|
|
112
|
+
}),
|
|
113
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
114
|
+
d: "M28 4C28 1.79086 29.7909 0 32 0H80C82.2091 0 84 1.79086 84 4C84 6.20914 82.2091 8 80 8H32C29.7909 8 28 6.20914 28 4Z",
|
|
115
|
+
fill: headerColor
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
}),
|
|
119
|
+
!isOriginTemplate && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
120
|
+
className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
|
|
121
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
122
|
+
className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
|
|
123
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
124
|
+
width: "14",
|
|
125
|
+
height: "14",
|
|
126
|
+
viewBox: "0 0 14 14",
|
|
127
|
+
fill: "none",
|
|
128
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
129
|
+
children: [
|
|
130
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
131
|
+
fillRule: "evenodd",
|
|
132
|
+
clipRule: "evenodd",
|
|
133
|
+
d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
|
|
134
|
+
fill: "#212121"
|
|
135
|
+
}),
|
|
136
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
137
|
+
fillRule: "evenodd",
|
|
138
|
+
clipRule: "evenodd",
|
|
139
|
+
d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
|
|
140
|
+
fill: "#212121"
|
|
141
|
+
})
|
|
142
|
+
]
|
|
142
143
|
})
|
|
143
|
-
}),
|
|
144
|
-
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
145
|
-
width: "192",
|
|
146
|
-
height: "8",
|
|
147
|
-
viewBox: "0 0 192 8",
|
|
148
|
-
fill: "none",
|
|
149
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
150
|
-
children: [
|
|
151
|
-
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
152
|
-
d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
153
|
-
fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
|
|
154
|
-
}),
|
|
155
|
-
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
156
|
-
d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
|
|
157
|
-
fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
|
|
158
|
-
}),
|
|
159
|
-
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
160
|
-
d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
|
|
161
|
-
fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
|
|
162
|
-
})
|
|
163
|
-
]
|
|
164
144
|
})
|
|
165
|
-
|
|
166
|
-
|
|
145
|
+
}),
|
|
146
|
+
/*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
147
|
+
width: "192",
|
|
148
|
+
height: "8",
|
|
149
|
+
viewBox: "0 0 192 8",
|
|
150
|
+
fill: "none",
|
|
151
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
152
|
+
children: [
|
|
153
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
154
|
+
d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
155
|
+
fill: headerColor
|
|
156
|
+
}),
|
|
157
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
158
|
+
d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
|
|
159
|
+
fill: headerColor
|
|
160
|
+
}),
|
|
161
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
162
|
+
d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
|
|
163
|
+
fill: headerColor
|
|
164
|
+
})
|
|
165
|
+
]
|
|
166
|
+
})
|
|
167
|
+
]
|
|
167
168
|
})
|
|
168
169
|
});
|
|
169
170
|
};
|
|
@@ -85,7 +85,7 @@ const Toolbar = ()=>{
|
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
};
|
|
88
|
-
const setHoverComponent = react.useCallback(({ $component, componentUid, focus,
|
|
88
|
+
const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
|
|
89
89
|
if (!$component && !componentUid) return;
|
|
90
90
|
if (!$component) {
|
|
91
91
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -102,7 +102,7 @@ const Toolbar = ()=>{
|
|
|
102
102
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
103
103
|
const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
|
|
104
104
|
const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
|
|
105
|
-
if (
|
|
105
|
+
if (isPreventSection && $themeSectionStatus) {
|
|
106
106
|
$themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
|
|
107
107
|
}
|
|
108
108
|
if ($toolbar) {
|
|
@@ -124,7 +124,7 @@ const Toolbar = ()=>{
|
|
|
124
124
|
if (isParent) {
|
|
125
125
|
$outline.setAttribute('data-outline-parent-hover', 'true');
|
|
126
126
|
}
|
|
127
|
-
if (
|
|
127
|
+
if (isPreventSection) {
|
|
128
128
|
$outline.setAttribute('data-outline-overlay-theme-section', 'true');
|
|
129
129
|
}
|
|
130
130
|
if (focus) {
|
|
@@ -379,25 +379,25 @@ const Toolbar = ()=>{
|
|
|
379
379
|
countShowOnboarding,
|
|
380
380
|
onCloseOnboarding
|
|
381
381
|
]);
|
|
382
|
-
const
|
|
383
|
-
if (
|
|
384
|
-
|
|
385
|
-
// check element fetch data: product, product list
|
|
386
|
-
if (!$component) {
|
|
387
|
-
const isLoading = document.querySelector(`.gp-loading-placeholder`);
|
|
388
|
-
if (!isLoading) {
|
|
389
|
-
return;
|
|
390
|
-
}
|
|
391
|
-
if (isLoading) {
|
|
392
|
-
// await element onload
|
|
393
|
-
$component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
|
|
394
|
-
}
|
|
382
|
+
const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
|
|
383
|
+
if (marqueeKey) {
|
|
384
|
+
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
395
385
|
}
|
|
396
|
-
|
|
397
|
-
|
|
386
|
+
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
387
|
+
};
|
|
388
|
+
const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
389
|
+
if (!componentUid) return;
|
|
390
|
+
const selector = getSelectorComponent({
|
|
391
|
+
componentUid,
|
|
392
|
+
productId,
|
|
393
|
+
marqueeKey
|
|
394
|
+
});
|
|
395
|
+
const $component = await waitForElementToExist(selector, timeAwait);
|
|
396
|
+
if (!$component) return;
|
|
397
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
398
|
+
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
399
|
+
removeActiveComponent();
|
|
398
400
|
}
|
|
399
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
|
|
400
|
-
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
|
|
401
401
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
402
402
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
403
403
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -405,7 +405,8 @@ const Toolbar = ()=>{
|
|
|
405
405
|
if ($toolbar) {
|
|
406
406
|
currentComponentActive.current = {
|
|
407
407
|
componentUid,
|
|
408
|
-
productId
|
|
408
|
+
productId,
|
|
409
|
+
marqueeKey
|
|
409
410
|
};
|
|
410
411
|
$toolbar.removeAttribute('style');
|
|
411
412
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -424,8 +425,9 @@ const Toolbar = ()=>{
|
|
|
424
425
|
if ($btnAddBottom) {
|
|
425
426
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
426
427
|
}
|
|
428
|
+
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
427
429
|
// Active same element in product list
|
|
428
|
-
if (productId) {
|
|
430
|
+
if (productId || isChildOfMarquee) {
|
|
429
431
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
430
432
|
if ($relatedElements?.length) {
|
|
431
433
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -480,6 +482,7 @@ const Toolbar = ()=>{
|
|
|
480
482
|
const componentUid = currentComponentActive.current?.componentUid;
|
|
481
483
|
const productId = currentComponentActive.current?.productId;
|
|
482
484
|
const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
|
|
485
|
+
console.log(' $component', $component);
|
|
483
486
|
if ($component) {
|
|
484
487
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
485
488
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
@@ -632,23 +635,23 @@ const Toolbar = ()=>{
|
|
|
632
635
|
}
|
|
633
636
|
}
|
|
634
637
|
}
|
|
635
|
-
const $
|
|
636
|
-
if ($
|
|
638
|
+
const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
|
|
639
|
+
if ($preventSection) {
|
|
637
640
|
setHoverComponent({
|
|
638
|
-
$component: $
|
|
641
|
+
$component: $preventSection,
|
|
639
642
|
focus: true,
|
|
640
|
-
|
|
643
|
+
isPreventSection: true
|
|
641
644
|
});
|
|
642
645
|
} else {
|
|
643
646
|
return;
|
|
644
647
|
}
|
|
645
648
|
}
|
|
646
|
-
const $
|
|
647
|
-
if ($
|
|
649
|
+
const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
|
|
650
|
+
if ($preventSection) {
|
|
648
651
|
setHoverComponent({
|
|
649
|
-
$component: $
|
|
652
|
+
$component: $preventSection,
|
|
650
653
|
focus: true,
|
|
651
|
-
|
|
654
|
+
isPreventSection: true
|
|
652
655
|
});
|
|
653
656
|
} else {
|
|
654
657
|
setHoverComponent({
|
|
@@ -675,7 +678,8 @@ const Toolbar = ()=>{
|
|
|
675
678
|
if (detail?.componentUid) {
|
|
676
679
|
setActiveComponent({
|
|
677
680
|
componentUid: detail.componentUid,
|
|
678
|
-
productId: detail.productId
|
|
681
|
+
productId: detail.productId,
|
|
682
|
+
marqueeKey: detail.marqueeKey
|
|
679
683
|
});
|
|
680
684
|
} else {
|
|
681
685
|
removeActiveComponent();
|
|
@@ -14,7 +14,7 @@ var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
|
|
|
14
14
|
var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
|
|
15
15
|
var Toolbar = require('../components/builder/Toolbar.js');
|
|
16
16
|
|
|
17
|
-
const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
|
|
17
|
+
const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, isOriginTemplate })=>{
|
|
18
18
|
const [loadSuccess, setLoadSuccess] = react.useState(false);
|
|
19
19
|
const isDisableHeaderFooter = ()=>{
|
|
20
20
|
return isThemeSectionEditor;
|
|
@@ -71,7 +71,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
71
71
|
!hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
72
72
|
className: "h-[40px] bg-[#f4f4f4]"
|
|
73
73
|
}) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {
|
|
74
|
-
pageType: pageType
|
|
74
|
+
pageType: pageType,
|
|
75
|
+
isOriginTemplate: isOriginTemplate
|
|
75
76
|
})),
|
|
76
77
|
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
77
78
|
id: "storefront",
|
|
@@ -94,7 +95,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
94
95
|
id: "visual-content"
|
|
95
96
|
}),
|
|
96
97
|
!isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {
|
|
97
|
-
pageType: pageType
|
|
98
|
+
pageType: pageType,
|
|
99
|
+
isOriginTemplate: isOriginTemplate
|
|
98
100
|
})
|
|
99
101
|
]
|
|
100
102
|
})
|
|
@@ -7,12 +7,15 @@ const defaultMargin = {
|
|
|
7
7
|
tablet: '40px',
|
|
8
8
|
mobile: '40px'
|
|
9
9
|
};
|
|
10
|
+
const FOOTER_ON_COLOR = '#D6D6D6';
|
|
10
11
|
const FOOTER_OFF_COLOR = '#F4F4F4';
|
|
11
12
|
const Footer = (props)=>{
|
|
12
|
-
const { pageType } = props;
|
|
13
|
+
const { pageType, isOriginTemplate } = props;
|
|
13
14
|
const urlParams = new URLSearchParams(window.location.search);
|
|
14
15
|
const shopName = urlParams.get('storefrontHandle');
|
|
15
16
|
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
17
|
+
const activeFooter = layoutSetting?.showFooter || isOriginTemplate;
|
|
18
|
+
const footerColor = activeFooter ? FOOTER_ON_COLOR : FOOTER_OFF_COLOR;
|
|
16
19
|
const [shouldFixed, setShouldFixed] = useState(false);
|
|
17
20
|
useEffect(()=>{
|
|
18
21
|
const $iframe = parent.document.querySelector('.iframe');
|
|
@@ -74,19 +77,19 @@ const Footer = (props)=>{
|
|
|
74
77
|
children: [
|
|
75
78
|
/*#__PURE__*/ jsx("path", {
|
|
76
79
|
d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
77
|
-
fill:
|
|
80
|
+
fill: footerColor
|
|
78
81
|
}),
|
|
79
82
|
/*#__PURE__*/ jsx("path", {
|
|
80
83
|
d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
|
|
81
|
-
fill:
|
|
84
|
+
fill: footerColor
|
|
82
85
|
}),
|
|
83
86
|
/*#__PURE__*/ jsx("path", {
|
|
84
87
|
d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
|
|
85
|
-
fill:
|
|
88
|
+
fill: footerColor
|
|
86
89
|
})
|
|
87
90
|
]
|
|
88
91
|
}),
|
|
89
|
-
/*#__PURE__*/ jsx("div", {
|
|
92
|
+
!isOriginTemplate && /*#__PURE__*/ jsx("div", {
|
|
90
93
|
className: "gp-footer gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
|
|
91
94
|
children: /*#__PURE__*/ jsx("div", {
|
|
92
95
|
className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
|
|
@@ -122,15 +125,15 @@ const Footer = (props)=>{
|
|
|
122
125
|
children: [
|
|
123
126
|
/*#__PURE__*/ jsx("path", {
|
|
124
127
|
d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
125
|
-
fill:
|
|
128
|
+
fill: footerColor
|
|
126
129
|
}),
|
|
127
130
|
/*#__PURE__*/ jsx("path", {
|
|
128
131
|
d: "M30 4C30 1.79086 31.7909 0 34 0H48C50.2091 0 52 1.79086 52 4C52 6.20914 50.2091 8 48 8H34C31.7909 8 30 6.20914 30 4Z",
|
|
129
|
-
fill:
|
|
132
|
+
fill: footerColor
|
|
130
133
|
}),
|
|
131
134
|
/*#__PURE__*/ jsx("path", {
|
|
132
135
|
d: "M60 4C60 1.79086 61.7909 0 64 0H78C80.2091 0 82 1.79086 82 4C82 6.20914 80.2091 8 78 8H64C61.7909 8 60 6.20914 60 4Z",
|
|
133
|
-
fill:
|
|
136
|
+
fill: footerColor
|
|
134
137
|
})
|
|
135
138
|
]
|
|
136
139
|
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, jsxs
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
|
|
3
3
|
|
|
4
4
|
const defaultMargin = {
|
|
@@ -6,6 +6,7 @@ const defaultMargin = {
|
|
|
6
6
|
tablet: '40px',
|
|
7
7
|
mobile: '40px'
|
|
8
8
|
};
|
|
9
|
+
const HEADER_ON_COLOR = '#D6D6D6';
|
|
9
10
|
const HEADER_OFF_COLOR = '#F4F4F4';
|
|
10
11
|
const sizeCheck = {
|
|
11
12
|
desktop: '24px',
|
|
@@ -13,8 +14,10 @@ const sizeCheck = {
|
|
|
13
14
|
mobile: '36px'
|
|
14
15
|
};
|
|
15
16
|
const Header = (props)=>{
|
|
16
|
-
const { pageType } = props;
|
|
17
|
+
const { pageType, isOriginTemplate } = props;
|
|
17
18
|
const layoutSetting = useShopStore((s)=>s.layoutSettings);
|
|
19
|
+
const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
|
|
20
|
+
const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
|
|
18
21
|
return /*#__PURE__*/ jsx("div", {
|
|
19
22
|
className: cls('gp-header-container gp-border-1 gp-group gp-relative gp-flex gp-justify-center gp-border-b gp-border-[#EEEEEE] gp-font-sans'),
|
|
20
23
|
children: pageType === 'POST_PURCHASE' ? /*#__PURE__*/ jsx("div", {
|
|
@@ -84,82 +87,80 @@ const Header = (props)=>{
|
|
|
84
87
|
})
|
|
85
88
|
]
|
|
86
89
|
})
|
|
87
|
-
}) : /*#__PURE__*/
|
|
90
|
+
}) : /*#__PURE__*/ jsxs("div", {
|
|
88
91
|
className: "gp-flex gp-h-[40px] gp-flex-1 gp-items-center gp-justify-between",
|
|
89
92
|
style: {
|
|
90
93
|
maxWidth: `var(--g-ct-w)`,
|
|
91
94
|
...makeStyleResponsive('ml', defaultMargin),
|
|
92
95
|
...makeStyleResponsive('mr', defaultMargin)
|
|
93
96
|
},
|
|
94
|
-
children:
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
]
|
|
137
|
-
})
|
|
97
|
+
children: [
|
|
98
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
99
|
+
width: "84",
|
|
100
|
+
height: "8",
|
|
101
|
+
viewBox: "0 0 84 8",
|
|
102
|
+
fill: "none",
|
|
103
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
104
|
+
children: [
|
|
105
|
+
/*#__PURE__*/ jsx("path", {
|
|
106
|
+
d: "M0 4C0 1.79086 1.79086 0 4 0H18C20.2091 0 22 1.79086 22 4C22 6.20914 20.2091 8 18 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
107
|
+
fill: activeHeader ? '#9E9E9E' : HEADER_OFF_COLOR
|
|
108
|
+
}),
|
|
109
|
+
/*#__PURE__*/ jsx("path", {
|
|
110
|
+
d: "M28 4C28 1.79086 29.7909 0 32 0H80C82.2091 0 84 1.79086 84 4C84 6.20914 82.2091 8 80 8H32C29.7909 8 28 6.20914 28 4Z",
|
|
111
|
+
fill: headerColor
|
|
112
|
+
})
|
|
113
|
+
]
|
|
114
|
+
}),
|
|
115
|
+
!isOriginTemplate && /*#__PURE__*/ jsx("div", {
|
|
116
|
+
className: "gp-header gp-invisible gp-absolute gp-left-[8px] gp-flex gp-h-[24px] gp-w-[24px] gp-cursor-pointer gp-items-center gp-justify-center gp-rounded gp-bg-[#EEEEEE] gp-p-[4px] hover:gp-bg-[#0000001a] group-hover:gp-visible",
|
|
117
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
118
|
+
className: "gp-flex gp-h-[24px] gp-w-[24px] gp-items-center gp-justify-center",
|
|
119
|
+
children: /*#__PURE__*/ jsxs("svg", {
|
|
120
|
+
width: "14",
|
|
121
|
+
height: "14",
|
|
122
|
+
viewBox: "0 0 14 14",
|
|
123
|
+
fill: "none",
|
|
124
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
125
|
+
children: [
|
|
126
|
+
/*#__PURE__*/ jsx("path", {
|
|
127
|
+
fillRule: "evenodd",
|
|
128
|
+
clipRule: "evenodd",
|
|
129
|
+
d: "M6.99985 4.08501C5.38983 4.08501 4.08465 5.39019 4.08465 7.00021C4.08465 8.61023 5.38983 9.9154 6.99985 9.9154C8.60987 9.9154 9.91504 8.61023 9.91504 7.00021C9.91504 5.39019 8.60987 4.08501 6.99985 4.08501ZM5.08465 7.00021C5.08465 5.94247 5.94211 5.08501 6.99985 5.08501C8.05758 5.08501 8.91504 5.94247 8.91504 7.00021C8.91504 8.05794 8.05758 8.9154 6.99985 8.9154C5.94211 8.9154 5.08465 8.05794 5.08465 7.00021Z",
|
|
130
|
+
fill: "#212121"
|
|
131
|
+
}),
|
|
132
|
+
/*#__PURE__*/ jsx("path", {
|
|
133
|
+
fillRule: "evenodd",
|
|
134
|
+
clipRule: "evenodd",
|
|
135
|
+
d: "M5.52351 0.00390625C5.28138 0.00390625 5.07405 0.177388 5.03135 0.415715L4.7415 2.03321C4.40346 2.18248 4.08346 2.36419 3.78558 2.57432L2.18557 2.00147C1.95684 1.91958 1.70235 2.01395 1.58232 2.22517L0.122204 4.79451C0.00217064 5.00572 0.0513362 5.27266 0.238747 5.42725L1.50086 6.46836C1.48358 6.64355 1.47474 6.82106 1.47474 7.00047C1.47474 7.17981 1.48357 7.35726 1.50084 7.53238L0.238747 8.57347C0.0513362 8.72806 0.00217064 8.995 0.122203 9.20622L1.58232 11.7756C1.70235 11.9868 1.95684 12.0811 2.18557 11.9993L3.78537 11.4265C4.08332 11.6367 4.40341 11.8185 4.74155 11.9678L5.03135 13.585C5.07405 13.8233 5.28138 13.9968 5.52351 13.9968H8.47647C8.7186 13.9968 8.92593 13.8233 8.96863 13.585L9.25846 11.9676C9.5965 11.8183 9.91649 11.6365 10.2144 11.4264L11.8144 11.9993C12.0431 12.0811 12.2976 11.9868 12.4177 11.7756L13.8778 9.20622C13.9978 8.995 13.9486 8.72806 13.7612 8.57347L12.4988 7.5321C12.516 7.35706 12.5249 7.17971 12.5249 7.00047C12.5249 6.82116 12.516 6.64375 12.4988 6.46864L13.7612 5.42725C13.9486 5.27266 13.9978 5.00572 13.8778 4.79451L12.4177 2.22517C12.2976 2.01395 12.0431 1.91958 11.8144 2.00147L10.2141 2.57441C9.91636 2.36433 9.59645 2.18264 9.25851 2.0334L8.96863 0.415715C8.92593 0.177389 8.7186 0.00390625 8.47647 0.00390625H5.52351ZM5.67747 2.47943L5.94187 1.00391H8.0581L8.32253 2.47958C8.35348 2.6523 8.47271 2.79616 8.63668 2.85863C9.06768 3.02283 9.46674 3.25007 9.82215 3.5288C9.95734 3.63483 10.1375 3.66402 10.2993 3.6061L11.7559 3.08459L12.8007 4.92323L11.6503 5.8722C11.5145 5.98427 11.4476 6.15956 11.4743 6.33366C11.5076 6.55089 11.5249 6.77354 11.5249 7.00047C11.5249 7.22735 11.5076 7.44993 11.4743 7.66711C11.4476 7.8412 11.5145 8.01648 11.6504 8.12855L12.8007 9.07749L11.7559 10.9161L10.2994 10.3947C10.1377 10.3368 9.95752 10.366 9.82233 10.472C9.46686 10.7508 9.06773 10.9781 8.63664 11.1423C8.47267 11.2048 8.35344 11.3487 8.32249 11.5214L8.0581 12.9968H5.94187L5.67752 11.5215C5.64656 11.3488 5.52732 11.2049 5.36333 11.1425C4.93215 10.9782 4.53292 10.7509 4.17738 10.4721C4.04219 10.3661 3.86203 10.3369 3.70027 10.3948L2.24412 10.9161L1.19924 9.07749L2.34929 8.12883C2.48516 8.01675 2.55204 7.84146 2.52535 7.66736C2.49205 7.4501 2.47474 7.22743 2.47474 7.00047C2.47474 6.77345 2.49206 6.55072 2.52538 6.33341C2.55207 6.15931 2.48519 5.984 2.34932 5.87192L1.19924 4.92323L2.24412 3.08459L3.70047 3.60601C3.86221 3.66392 4.04236 3.63474 4.17755 3.52872C4.53304 3.24994 4.93219 3.02269 5.36329 2.85849C5.52728 2.79603 5.64652 2.65216 5.67747 2.47943Z",
|
|
136
|
+
fill: "#212121"
|
|
137
|
+
})
|
|
138
|
+
]
|
|
138
139
|
})
|
|
139
|
-
}),
|
|
140
|
-
/*#__PURE__*/ jsxs("svg", {
|
|
141
|
-
width: "192",
|
|
142
|
-
height: "8",
|
|
143
|
-
viewBox: "0 0 192 8",
|
|
144
|
-
fill: "none",
|
|
145
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
146
|
-
children: [
|
|
147
|
-
/*#__PURE__*/ jsx("path", {
|
|
148
|
-
d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
149
|
-
fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
|
|
150
|
-
}),
|
|
151
|
-
/*#__PURE__*/ jsx("path", {
|
|
152
|
-
d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
|
|
153
|
-
fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
|
|
154
|
-
}),
|
|
155
|
-
/*#__PURE__*/ jsx("path", {
|
|
156
|
-
d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
|
|
157
|
-
fill: layoutSetting?.showHeader ? '#D6D6D6' : HEADER_OFF_COLOR
|
|
158
|
-
})
|
|
159
|
-
]
|
|
160
140
|
})
|
|
161
|
-
|
|
162
|
-
|
|
141
|
+
}),
|
|
142
|
+
/*#__PURE__*/ jsxs("svg", {
|
|
143
|
+
width: "192",
|
|
144
|
+
height: "8",
|
|
145
|
+
viewBox: "0 0 192 8",
|
|
146
|
+
fill: "none",
|
|
147
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
148
|
+
children: [
|
|
149
|
+
/*#__PURE__*/ jsx("path", {
|
|
150
|
+
d: "M0 4C0 1.79086 1.79086 0 4 0H52C54.2091 0 56 1.79086 56 4C56 6.20914 54.2091 8 52 8H4C1.79086 8 0 6.20914 0 4Z",
|
|
151
|
+
fill: headerColor
|
|
152
|
+
}),
|
|
153
|
+
/*#__PURE__*/ jsx("path", {
|
|
154
|
+
d: "M68 4C68 1.79086 69.7909 0 72 0H120C122.209 0 124 1.79086 124 4C124 6.20914 122.209 8 120 8H72C69.7909 8 68 6.20914 68 4Z",
|
|
155
|
+
fill: headerColor
|
|
156
|
+
}),
|
|
157
|
+
/*#__PURE__*/ jsx("path", {
|
|
158
|
+
d: "M136 4C136 1.79086 137.791 0 140 0H188C190.209 0 192 1.79086 192 4C192 6.20914 190.209 8 188 8H140C137.791 8 136 6.20914 136 4Z",
|
|
159
|
+
fill: headerColor
|
|
160
|
+
})
|
|
161
|
+
]
|
|
162
|
+
})
|
|
163
|
+
]
|
|
163
164
|
})
|
|
164
165
|
});
|
|
165
166
|
};
|
|
@@ -81,7 +81,7 @@ const Toolbar = ()=>{
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
};
|
|
84
|
-
const setHoverComponent = useCallback(({ $component, componentUid, focus,
|
|
84
|
+
const setHoverComponent = useCallback(({ $component, componentUid, focus, isPreventSection, isParent })=>{
|
|
85
85
|
if (!$component && !componentUid) return;
|
|
86
86
|
if (!$component) {
|
|
87
87
|
const $c = document.querySelector(`[data-uid="${componentUid}"]`);
|
|
@@ -98,7 +98,7 @@ const Toolbar = ()=>{
|
|
|
98
98
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
99
99
|
const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
|
|
100
100
|
const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
|
|
101
|
-
if (
|
|
101
|
+
if (isPreventSection && $themeSectionStatus) {
|
|
102
102
|
$themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
|
|
103
103
|
}
|
|
104
104
|
if ($toolbar) {
|
|
@@ -120,7 +120,7 @@ const Toolbar = ()=>{
|
|
|
120
120
|
if (isParent) {
|
|
121
121
|
$outline.setAttribute('data-outline-parent-hover', 'true');
|
|
122
122
|
}
|
|
123
|
-
if (
|
|
123
|
+
if (isPreventSection) {
|
|
124
124
|
$outline.setAttribute('data-outline-overlay-theme-section', 'true');
|
|
125
125
|
}
|
|
126
126
|
if (focus) {
|
|
@@ -375,25 +375,25 @@ const Toolbar = ()=>{
|
|
|
375
375
|
countShowOnboarding,
|
|
376
376
|
onCloseOnboarding
|
|
377
377
|
]);
|
|
378
|
-
const
|
|
379
|
-
if (
|
|
380
|
-
|
|
381
|
-
// check element fetch data: product, product list
|
|
382
|
-
if (!$component) {
|
|
383
|
-
const isLoading = document.querySelector(`.gp-loading-placeholder`);
|
|
384
|
-
if (!isLoading) {
|
|
385
|
-
return;
|
|
386
|
-
}
|
|
387
|
-
if (isLoading) {
|
|
388
|
-
// await element onload
|
|
389
|
-
$component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
|
|
390
|
-
}
|
|
378
|
+
const getSelectorComponent = ({ componentUid, productId, marqueeKey })=>{
|
|
379
|
+
if (marqueeKey) {
|
|
380
|
+
return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
|
|
391
381
|
}
|
|
392
|
-
|
|
393
|
-
|
|
382
|
+
return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
383
|
+
};
|
|
384
|
+
const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, forceReActive, marqueeKey })=>{
|
|
385
|
+
if (!componentUid) return;
|
|
386
|
+
const selector = getSelectorComponent({
|
|
387
|
+
componentUid,
|
|
388
|
+
productId,
|
|
389
|
+
marqueeKey
|
|
390
|
+
});
|
|
391
|
+
const $component = await waitForElementToExist(selector, timeAwait);
|
|
392
|
+
if (!$component) return;
|
|
393
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
|
|
394
|
+
if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
|
|
395
|
+
removeActiveComponent();
|
|
394
396
|
}
|
|
395
|
-
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
|
|
396
|
-
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
|
|
397
397
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
398
398
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
399
399
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -401,7 +401,8 @@ const Toolbar = ()=>{
|
|
|
401
401
|
if ($toolbar) {
|
|
402
402
|
currentComponentActive.current = {
|
|
403
403
|
componentUid,
|
|
404
|
-
productId
|
|
404
|
+
productId,
|
|
405
|
+
marqueeKey
|
|
405
406
|
};
|
|
406
407
|
$toolbar.removeAttribute('style');
|
|
407
408
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -420,8 +421,9 @@ const Toolbar = ()=>{
|
|
|
420
421
|
if ($btnAddBottom) {
|
|
421
422
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
422
423
|
}
|
|
424
|
+
const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
|
|
423
425
|
// Active same element in product list
|
|
424
|
-
if (productId) {
|
|
426
|
+
if (productId || isChildOfMarquee) {
|
|
425
427
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
426
428
|
if ($relatedElements?.length) {
|
|
427
429
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -476,6 +478,7 @@ const Toolbar = ()=>{
|
|
|
476
478
|
const componentUid = currentComponentActive.current?.componentUid;
|
|
477
479
|
const productId = currentComponentActive.current?.productId;
|
|
478
480
|
const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
|
|
481
|
+
console.log(' $component', $component);
|
|
479
482
|
if ($component) {
|
|
480
483
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
481
484
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
@@ -628,23 +631,23 @@ const Toolbar = ()=>{
|
|
|
628
631
|
}
|
|
629
632
|
}
|
|
630
633
|
}
|
|
631
|
-
const $
|
|
632
|
-
if ($
|
|
634
|
+
const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
|
|
635
|
+
if ($preventSection) {
|
|
633
636
|
setHoverComponent({
|
|
634
|
-
$component: $
|
|
637
|
+
$component: $preventSection,
|
|
635
638
|
focus: true,
|
|
636
|
-
|
|
639
|
+
isPreventSection: true
|
|
637
640
|
});
|
|
638
641
|
} else {
|
|
639
642
|
return;
|
|
640
643
|
}
|
|
641
644
|
}
|
|
642
|
-
const $
|
|
643
|
-
if ($
|
|
645
|
+
const $preventSection = $target.closest('[data-theme-section]') || $target.closest('[data-shopify-section]');
|
|
646
|
+
if ($preventSection) {
|
|
644
647
|
setHoverComponent({
|
|
645
|
-
$component: $
|
|
648
|
+
$component: $preventSection,
|
|
646
649
|
focus: true,
|
|
647
|
-
|
|
650
|
+
isPreventSection: true
|
|
648
651
|
});
|
|
649
652
|
} else {
|
|
650
653
|
setHoverComponent({
|
|
@@ -671,7 +674,8 @@ const Toolbar = ()=>{
|
|
|
671
674
|
if (detail?.componentUid) {
|
|
672
675
|
setActiveComponent({
|
|
673
676
|
componentUid: detail.componentUid,
|
|
674
|
-
productId: detail.productId
|
|
677
|
+
productId: detail.productId,
|
|
678
|
+
marqueeKey: detail.marqueeKey
|
|
675
679
|
});
|
|
676
680
|
} else {
|
|
677
681
|
removeActiveComponent();
|
|
@@ -12,7 +12,7 @@ import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
|
|
|
12
12
|
import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
|
|
13
13
|
import Toolbar from '../components/builder/Toolbar.js';
|
|
14
14
|
|
|
15
|
-
const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
|
|
15
|
+
const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, isOriginTemplate })=>{
|
|
16
16
|
const [loadSuccess, setLoadSuccess] = useState(false);
|
|
17
17
|
const isDisableHeaderFooter = ()=>{
|
|
18
18
|
return isThemeSectionEditor;
|
|
@@ -69,7 +69,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
69
69
|
!hiddenToolbar && (isDisableHeaderFooter() ? /*#__PURE__*/ jsx("div", {
|
|
70
70
|
className: "h-[40px] bg-[#f4f4f4]"
|
|
71
71
|
}) : /*#__PURE__*/ jsx(Header, {
|
|
72
|
-
pageType: pageType
|
|
72
|
+
pageType: pageType,
|
|
73
|
+
isOriginTemplate: isOriginTemplate
|
|
73
74
|
})),
|
|
74
75
|
/*#__PURE__*/ jsx("div", {
|
|
75
76
|
id: "storefront",
|
|
@@ -92,7 +93,8 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
|
|
|
92
93
|
id: "visual-content"
|
|
93
94
|
}),
|
|
94
95
|
!isDisableHeaderFooter() && !hiddenToolbar && /*#__PURE__*/ jsx(Footer, {
|
|
95
|
-
pageType: pageType
|
|
96
|
+
pageType: pageType,
|
|
97
|
+
isOriginTemplate: isOriginTemplate
|
|
96
98
|
})
|
|
97
99
|
]
|
|
98
100
|
})
|
package/dist/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.41.0-dev.16",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"next": "latest"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "1.
|
|
30
|
-
"@gem-sdk/plugin-cookie-bar": "1.
|
|
31
|
-
"@gem-sdk/plugin-quick-view": "1.
|
|
32
|
-
"@gem-sdk/plugin-sticky-add-to-cart": "1.
|
|
29
|
+
"@gem-sdk/core": "1.41.0-dev.16",
|
|
30
|
+
"@gem-sdk/plugin-cookie-bar": "1.41.0-staging.13",
|
|
31
|
+
"@gem-sdk/plugin-quick-view": "1.41.0-staging.13",
|
|
32
|
+
"@gem-sdk/plugin-sticky-add-to-cart": "1.41.0-staging.13"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"next": ">=13"
|