Merge branch 'main' into EDERCMS-235

techdivision · Oct 18, 2024 · 5b7f25e · 5b7f25e
2 parents 92c21b4 + 98af710
commit 5b7f25e
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 157 deletions.
diff --git a/bin/update-partytown b/bin/update-partytown
@@ -1,3 +1,4 @@
 #!/bin/bash
+mkdir -p scripts/vendor/partytown
 npm update @builder.io/partytown
 node_modules/@builder.io/partytown/bin/partytown.cjs copylib scripts/vendor/partytown
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -220,7 +220,13 @@ header .pre-header ul > li > ul > li > ul {
 }
 
 .pre-header > .section:last-child {
-  padding-top: 20px
+  padding-top: 20px;
+  position: absolute;
+  right: 25px;
+
+  @media (width >= 1400px) {
+    position: unset;
+  }
 }
 
 header .pre-header[aria-expanded='true'] {
@@ -344,8 +350,11 @@ header nav .mobile-menu li.is-visible > ul {
     position: relative;
     grid-template: 'preheader preheader preheader'
     'logo sections .';
-    justify-content: center;
     background: linear-gradient(to bottom, var(--color-gray-dark) 50%, var(--color-white) 50%);
+
+    @media (width >= 1400px) {
+      justify-content: center;
+    }
   }
 
   header nav[aria-expanded='true'] {
@@ -495,7 +504,7 @@ header nav .mobile-menu li.is-visible > ul {
   header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul > li > a,
   header nav .pre-header .default-content-wrapper a {
     position: relative;
-    padding-right: 15px;
+    padding-right: var(--spacing-half);
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li[aria-expanded='true'] > ul > li > a::after,
@@ -527,7 +536,7 @@ header nav .mobile-menu li.is-visible > ul {
 /* breadcrumbs */
 .breadcrumbs {
   max-width: var(--page-width);
-  margin: 0 auto;
+  margin: var(--spacing-half) auto;
   font-size: var(--body-font-size-s);
   line-height: var(--body-line-height-s);
 

diff --git a/blocks/rows/rows.css b/blocks/rows/rows.css
@@ -114,14 +114,19 @@
     gap: var(--spacing-simple);
     grid-template:
     'image content recommendation' / 1fr 2fr 1fr;
+
+    .logo {
+      padding-top: var(--spacing-half);
+    }
   }
 
   .rows .image img {
     width: auto;
   }
 
   .rows .content {
-    padding: 0;
+    padding: var(--spacing-half) 0;
+    margin-top: 0;
   }
 
   .rows .content .logo {

diff --git a/blocks/thirdparty/thirdparty.js b/blocks/thirdparty/thirdparty.js
@@ -10,15 +10,14 @@
  */
 
 import {
+  createThirdPartyRelatedScriptTag,
   loadThirdPartyScript,
   loadThirdPartyScriptWithoutPartytown,
 } from '../../scripts/load-thirdparty-script.js';
 import {
-  getCurrentUrl,
-  isLocal,
-  isTest,
-  transformRowsToData,
+  getCurrentUrl, hasUrlParam, isLocal, isTest, transformRowsToData,
 } from '../../scripts/helpers.js';
+import { betterLoadScript, createScriptTag } from '../../scripts/load-resource.js';
 
 /**
  * Load usercentrics
@@ -28,11 +27,14 @@ import {
  */
 function loadUsercentrics(id) {
   /*
-    FIXME loader.js works for settings button, bundle.js doesn't, but loader.js
-    will lead to lighthouse score issues
+    FIXME
+      If we use "bundle.js" with loadThirdPartyScript:
+        it works with partytown but settings button in footer doesn't work
+      If we use "loader.js" with betterLoadScript:
+        everything works but without partytown loading to a lower lighthouse score
    */
-  return loadThirdPartyScript(
-    'https://app.usercentrics.eu/browser-ui/latest/bundle.js',
+  return betterLoadScript(
+    'https://app.usercentrics.eu/browser-ui/latest/loader.js',
     {
       id: 'usercentrics-cmp',
       'data-settings-id': id,
@@ -54,23 +56,41 @@ function loadUserlike(id) {
 }
 
 /**
- * Load Google Tag Manager
+ * Init data layer
  *
- * @param {String} id
- * @returns {Promise}
+ * @param {string} id
  */
-function loadGoogleTagManager(id) {
+function initDataLayer(id) {
   window.dataLayer = window.dataLayer || [];
 
-  function gtag() {
+  window.gtag = function gtag() {
     // eslint-disable-next-line prefer-rest-params
     window.dataLayer.push(arguments);
-  }
+  };
 
-  gtag('js', new Date());
-  gtag('config', id);
+  window.gtag('js', new Date());
+  window.gtag('config', id);
+}
 
-  return loadThirdPartyScript(`https://www.googletagmanager.com/gtag/js?id=${id}`);
+/**
+ * Load Google Tag Manager
+ *
+ * @param {String} id
+ * @returns {Promise}
+ */
+function loadGoogleTagManager(id) {
+  const gtmUrl = `https://www.googletagmanager.com/gtag/js?id=${id}`;
+  if (hasUrlParam('gtm_debug')) {
+    betterLoadScript(gtmUrl).then();
+    createScriptTag(null, initDataLayer.toString());
+    return Promise.resolve();
+  }
+  return Promise.all(
+    [
+      loadThirdPartyScript(gtmUrl),
+      createThirdPartyRelatedScriptTag(initDataLayer.toString()),
+    ],
+  );
 }
 
 /**