@gem-sdk/pages 1.44.0 → 1.44.2-staging.89
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.
|
@@ -379,25 +379,23 @@ 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
|
-
}
|
|
395
|
-
}
|
|
396
|
-
if (!$component) {
|
|
397
|
-
return;
|
|
382
|
+
const getSelectorComponent = ({ componentUid, productId, articleId })=>{
|
|
383
|
+
if (articleId) {
|
|
384
|
+
return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
398
385
|
}
|
|
399
|
-
|
|
400
|
-
|
|
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 = 500, articleId, forceReActive })=>{
|
|
389
|
+
if (!componentUid) return;
|
|
390
|
+
const selector = getSelectorComponent({
|
|
391
|
+
componentUid,
|
|
392
|
+
productId,
|
|
393
|
+
articleId
|
|
394
|
+
});
|
|
395
|
+
const $component = await waitForElementToExist(selector, timeAwait);
|
|
396
|
+
if (!$component) return;
|
|
397
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
|
|
398
|
+
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
|
|
401
399
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
402
400
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
403
401
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -405,7 +403,8 @@ const Toolbar = ()=>{
|
|
|
405
403
|
if ($toolbar) {
|
|
406
404
|
currentComponentActive.current = {
|
|
407
405
|
componentUid,
|
|
408
|
-
productId
|
|
406
|
+
productId,
|
|
407
|
+
articleId
|
|
409
408
|
};
|
|
410
409
|
$toolbar.removeAttribute('style');
|
|
411
410
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -425,7 +424,7 @@ const Toolbar = ()=>{
|
|
|
425
424
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
426
425
|
}
|
|
427
426
|
// Active same element in product list
|
|
428
|
-
if (productId) {
|
|
427
|
+
if (productId || articleId) {
|
|
429
428
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
430
429
|
if ($relatedElements?.length) {
|
|
431
430
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -453,6 +452,7 @@ const Toolbar = ()=>{
|
|
|
453
452
|
setActiveComponent({
|
|
454
453
|
componentUid,
|
|
455
454
|
productId,
|
|
455
|
+
articleId,
|
|
456
456
|
timeAwait: 2000,
|
|
457
457
|
forceReActive: true
|
|
458
458
|
});
|
|
@@ -555,18 +555,27 @@ const Toolbar = ()=>{
|
|
|
555
555
|
const isElementInsideProduct = async ()=>{
|
|
556
556
|
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
557
557
|
const $product = $component?.closest('[data-product-id]');
|
|
558
|
-
|
|
559
|
-
|
|
558
|
+
return !!($product?.getAttribute('data-product-id') || '');
|
|
559
|
+
};
|
|
560
|
+
const isElementInsideArticle = async ()=>{
|
|
561
|
+
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
562
|
+
const $article = $component?.closest('[data-article-id]');
|
|
563
|
+
return !!($article?.getAttribute('data-article-id') || '');
|
|
560
564
|
};
|
|
561
565
|
let productId = '';
|
|
566
|
+
let articleId = '';
|
|
562
567
|
if (await isElementInsideProduct()) {
|
|
563
568
|
productId = currentComponentActive.current?.productId || '';
|
|
564
569
|
}
|
|
570
|
+
if (await isElementInsideArticle()) {
|
|
571
|
+
articleId = currentComponentActive.current?.articleId || '';
|
|
572
|
+
}
|
|
565
573
|
const event = new CustomEvent('editor:toolbar:force-active-component', {
|
|
566
574
|
bubbles: true,
|
|
567
575
|
detail: {
|
|
568
576
|
componentUid: uid,
|
|
569
|
-
productId
|
|
577
|
+
productId,
|
|
578
|
+
articleId
|
|
570
579
|
}
|
|
571
580
|
});
|
|
572
581
|
outHover($parent);
|
|
@@ -675,7 +684,8 @@ const Toolbar = ()=>{
|
|
|
675
684
|
if (detail?.componentUid) {
|
|
676
685
|
setActiveComponent({
|
|
677
686
|
componentUid: detail.componentUid,
|
|
678
|
-
productId: detail.productId
|
|
687
|
+
productId: detail.productId,
|
|
688
|
+
articleId: detail.articleId
|
|
679
689
|
});
|
|
680
690
|
} else {
|
|
681
691
|
removeActiveComponent();
|
|
@@ -2,17 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
var core = require('@gem-sdk/core');
|
|
4
4
|
var react = require('react');
|
|
5
|
-
var userAgent = require('../helpers/user-agent.js');
|
|
6
5
|
|
|
7
6
|
const useTrackingView = (token, handle, isFallback)=>{
|
|
8
7
|
const shopToken = token || process.env.NEXT_PUBLIC_SHOP_TOKEN;
|
|
9
8
|
const apiURL = process.env.NEXT_PUBLIC_API_URL;
|
|
10
9
|
const sendTracking = react.useCallback((handle)=>{
|
|
11
10
|
if (!apiURL || !shopToken) return;
|
|
12
|
-
const bot = userAgent.isBot(navigator.userAgent);
|
|
13
11
|
const variables = {
|
|
14
|
-
pageHandle: handle
|
|
15
|
-
userAgent: bot ? 'BOT' : 'BROWSER'
|
|
12
|
+
pageHandle: handle
|
|
16
13
|
};
|
|
17
14
|
const headers = {
|
|
18
15
|
'Content-Type': 'application/json',
|
|
@@ -375,25 +375,23 @@ 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
|
-
}
|
|
391
|
-
}
|
|
392
|
-
if (!$component) {
|
|
393
|
-
return;
|
|
378
|
+
const getSelectorComponent = ({ componentUid, productId, articleId })=>{
|
|
379
|
+
if (articleId) {
|
|
380
|
+
return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
|
|
394
381
|
}
|
|
395
|
-
|
|
396
|
-
|
|
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 = 500, articleId, forceReActive })=>{
|
|
385
|
+
if (!componentUid) return;
|
|
386
|
+
const selector = getSelectorComponent({
|
|
387
|
+
componentUid,
|
|
388
|
+
productId,
|
|
389
|
+
articleId
|
|
390
|
+
});
|
|
391
|
+
const $component = await waitForElementToExist(selector, timeAwait);
|
|
392
|
+
if (!$component) return;
|
|
393
|
+
if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
|
|
394
|
+
if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
|
|
397
395
|
const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
|
|
398
396
|
const $outline = getChildrenByAttrSelector($component, 'data-outline');
|
|
399
397
|
const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
|
|
@@ -401,7 +399,8 @@ const Toolbar = ()=>{
|
|
|
401
399
|
if ($toolbar) {
|
|
402
400
|
currentComponentActive.current = {
|
|
403
401
|
componentUid,
|
|
404
|
-
productId
|
|
402
|
+
productId,
|
|
403
|
+
articleId
|
|
405
404
|
};
|
|
406
405
|
$toolbar.removeAttribute('style');
|
|
407
406
|
$toolbar.setAttribute('data-toolbar-active', 'true');
|
|
@@ -421,7 +420,7 @@ const Toolbar = ()=>{
|
|
|
421
420
|
$btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
|
|
422
421
|
}
|
|
423
422
|
// Active same element in product list
|
|
424
|
-
if (productId) {
|
|
423
|
+
if (productId || articleId) {
|
|
425
424
|
const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
|
|
426
425
|
if ($relatedElements?.length) {
|
|
427
426
|
$relatedElements.forEach(($relatedElement)=>{
|
|
@@ -449,6 +448,7 @@ const Toolbar = ()=>{
|
|
|
449
448
|
setActiveComponent({
|
|
450
449
|
componentUid,
|
|
451
450
|
productId,
|
|
451
|
+
articleId,
|
|
452
452
|
timeAwait: 2000,
|
|
453
453
|
forceReActive: true
|
|
454
454
|
});
|
|
@@ -551,18 +551,27 @@ const Toolbar = ()=>{
|
|
|
551
551
|
const isElementInsideProduct = async ()=>{
|
|
552
552
|
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
553
553
|
const $product = $component?.closest('[data-product-id]');
|
|
554
|
-
|
|
555
|
-
|
|
554
|
+
return !!($product?.getAttribute('data-product-id') || '');
|
|
555
|
+
};
|
|
556
|
+
const isElementInsideArticle = async ()=>{
|
|
557
|
+
const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
|
|
558
|
+
const $article = $component?.closest('[data-article-id]');
|
|
559
|
+
return !!($article?.getAttribute('data-article-id') || '');
|
|
556
560
|
};
|
|
557
561
|
let productId = '';
|
|
562
|
+
let articleId = '';
|
|
558
563
|
if (await isElementInsideProduct()) {
|
|
559
564
|
productId = currentComponentActive.current?.productId || '';
|
|
560
565
|
}
|
|
566
|
+
if (await isElementInsideArticle()) {
|
|
567
|
+
articleId = currentComponentActive.current?.articleId || '';
|
|
568
|
+
}
|
|
561
569
|
const event = new CustomEvent('editor:toolbar:force-active-component', {
|
|
562
570
|
bubbles: true,
|
|
563
571
|
detail: {
|
|
564
572
|
componentUid: uid,
|
|
565
|
-
productId
|
|
573
|
+
productId,
|
|
574
|
+
articleId
|
|
566
575
|
}
|
|
567
576
|
});
|
|
568
577
|
outHover($parent);
|
|
@@ -671,7 +680,8 @@ const Toolbar = ()=>{
|
|
|
671
680
|
if (detail?.componentUid) {
|
|
672
681
|
setActiveComponent({
|
|
673
682
|
componentUid: detail.componentUid,
|
|
674
|
-
productId: detail.productId
|
|
683
|
+
productId: detail.productId,
|
|
684
|
+
articleId: detail.articleId
|
|
675
685
|
});
|
|
676
686
|
} else {
|
|
677
687
|
removeActiveComponent();
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import { PageViewUpDocument } from '@gem-sdk/core';
|
|
2
2
|
import { useCallback, useEffect } from 'react';
|
|
3
|
-
import { isBot } from '../helpers/user-agent.js';
|
|
4
3
|
|
|
5
4
|
const useTrackingView = (token, handle, isFallback)=>{
|
|
6
5
|
const shopToken = token || process.env.NEXT_PUBLIC_SHOP_TOKEN;
|
|
7
6
|
const apiURL = process.env.NEXT_PUBLIC_API_URL;
|
|
8
7
|
const sendTracking = useCallback((handle)=>{
|
|
9
8
|
if (!apiURL || !shopToken) return;
|
|
10
|
-
const bot = isBot(navigator.userAgent);
|
|
11
9
|
const variables = {
|
|
12
|
-
pageHandle: handle
|
|
13
|
-
userAgent: bot ? 'BOT' : 'BROWSER'
|
|
10
|
+
pageHandle: handle
|
|
14
11
|
};
|
|
15
12
|
const headers = {
|
|
16
13
|
'Content-Type': 'application/json',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/pages",
|
|
3
|
-
"version": "1.44.
|
|
3
|
+
"version": "1.44.2-staging.89",
|
|
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.44.
|
|
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.44.2-staging.89",
|
|
30
|
+
"@gem-sdk/plugin-cookie-bar": "1.44.2-staging.87",
|
|
31
|
+
"@gem-sdk/plugin-quick-view": "1.44.2-staging.87",
|
|
32
|
+
"@gem-sdk/plugin-sticky-add-to-cart": "1.44.2-staging.87"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"next": ">=13"
|