From 3358143dfb0c2ac14482ca74f67c65b81553c6d3 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Wed, 25 Oct 2023 18:01:12 +0300 Subject: [PATCH 0001/1296] Update fstab.yaml --- fstab.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fstab.yaml b/fstab.yaml index 7de2166f3..91ec2d543 100644 --- a/fstab.yaml +++ b/fstab.yaml @@ -1,2 +1,2 @@ mountpoints: - /: https://adobe.sharepoint.com/:f:/r/sites/HelixProjects/Shared%20Documents/sites/bitdefender \ No newline at end of file + /: https://bitdefender.sharepoint.com/sites/LandingPages/Shared%20Documents/sites From b3a1bfa617b6b2787cbf7d5fdd0f08014c467d2c Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Wed, 25 Oct 2023 18:03:53 +0300 Subject: [PATCH 0002/1296] Update run-tests.yaml --- .github/workflows/run-tests.yaml | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/.github/workflows/run-tests.yaml b/.github/workflows/run-tests.yaml index 0b534167e..220559316 100644 --- a/.github/workflows/run-tests.yaml +++ b/.github/workflows/run-tests.yaml @@ -21,15 +21,15 @@ jobs: - run: npm run lint env: CI: true - ghost_inspector_tests: - needs: linting - runs-on: ubuntu-latest - steps: - - name: execute Ghost Inspector test - uses: docker://ghostinspector/cli - with: - args: suite execute ${{ secrets.GI_SUITE }} \ - --apiKey ${{ secrets.GI_API_KEY }} \ - --branchName ${{ env.BRANCH_NAME }} \ - --errorOnFail \ - --errorOnScreenshotFail + # ghost_inspector_tests: + # needs: linting + # runs-on: ubuntu-latest + # steps: + # - name: execute Ghost Inspector test + # uses: docker://ghostinspector/cli + # with: + # args: suite execute ${{ secrets.GI_SUITE }} \ + # --apiKey ${{ secrets.GI_API_KEY }} \ + # --branchName ${{ env.BRANCH_NAME }} \ + # --errorOnFail \ + # --errorOnScreenshotFail From abfd513ce24e3f22d44183e4fc6b43c4b07a2156 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Wed, 25 Oct 2023 18:10:58 +0300 Subject: [PATCH 0003/1296] Update fstab.yaml --- fstab.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fstab.yaml b/fstab.yaml index 91ec2d543..ef8b0c811 100644 --- a/fstab.yaml +++ b/fstab.yaml @@ -1,2 +1,2 @@ mountpoints: - /: https://bitdefender.sharepoint.com/sites/LandingPages/Shared%20Documents/sites + /: https://bitdefender.sharepoint.com/sites/wwwwebsitesv2/Shared%20Documents/sites From 456e000ee314aa0bde287c7814f9252d8ec071da Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:24:24 +0200 Subject: [PATCH 0004/1296] Update lib-franklin.js url match --- solutions/scripts/lib-franklin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index 9915aff03..1e72d30f7 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -735,13 +735,13 @@ export function loadFooter(footer) { export function setup() { window.hlx = window.hlx || {}; window.hlx.RUM_MASK_URL = 'full'; - window.hlx.codeBasePath = ''; + window.hlx.codeBasePathp = `/${window.location.pathname.split('/')[1]}`; window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; const scriptEl = document.querySelector('script[src$="/solutions/scripts/scripts.js"]'); if (scriptEl) { try { - [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js'); + window.hlx.codeBasePath = window.hlx.codeBasePath + new URL(scriptEl.src).pathname.split('/scripts/scripts.js')[0]; } catch (error) { // eslint-disable-next-line no-console console.log(error); From f019b140353b510e082a6f2db218ead016d4ab36 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:28:19 +0200 Subject: [PATCH 0005/1296] Update lib-franklin.js typo --- solutions/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index 1e72d30f7..3a82c6d93 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -735,7 +735,7 @@ export function loadFooter(footer) { export function setup() { window.hlx = window.hlx || {}; window.hlx.RUM_MASK_URL = 'full'; - window.hlx.codeBasePathp = `/${window.location.pathname.split('/')[1]}`; + window.hlx.codeBasePath = `/${window.location.pathname.split('/')[1]}`; window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; const scriptEl = document.querySelector('script[src$="/solutions/scripts/scripts.js"]'); From c6c30a0c4d31eeab1e2219b6c6b83b56c62a8480 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:41:54 +0200 Subject: [PATCH 0006/1296] Update lib-franklin.js --- solutions/scripts/lib-franklin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index 3a82c6d93..9915aff03 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -735,13 +735,13 @@ export function loadFooter(footer) { export function setup() { window.hlx = window.hlx || {}; window.hlx.RUM_MASK_URL = 'full'; - window.hlx.codeBasePath = `/${window.location.pathname.split('/')[1]}`; + window.hlx.codeBasePath = ''; window.hlx.lighthouse = new URLSearchParams(window.location.search).get('lighthouse') === 'on'; const scriptEl = document.querySelector('script[src$="/solutions/scripts/scripts.js"]'); if (scriptEl) { try { - window.hlx.codeBasePath = window.hlx.codeBasePath + new URL(scriptEl.src).pathname.split('/scripts/scripts.js')[0]; + [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js'); } catch (error) { // eslint-disable-next-line no-console console.log(error); From 6fb0d9406bee2ce6fd2c95cb1ffa4254a11bb75c Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:45:20 +0200 Subject: [PATCH 0007/1296] Update lib-franklin.js --- solutions/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index 9915aff03..9b651c267 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -182,7 +182,7 @@ export async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - const response = await fetch(`${window.hlx.codeBasePath}/icons/${iconName}.svg`); + const response = await fetch(`${window.location.pathname.split('/')[1]}/${window.hlx.codeBasePath}/icons/${iconName}.svg`); if (!response.ok) { ICONS_CACHE[iconName] = false; return; From 43ff48bb39486ed35235f5444a624e02460c124a Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:45:40 +0200 Subject: [PATCH 0008/1296] Update lib-franklin.js --- solutions/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index 9b651c267..c2f794f6b 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -182,7 +182,7 @@ export async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - const response = await fetch(`${window.location.pathname.split('/')[1]}/${window.hlx.codeBasePath}/icons/${iconName}.svg`); + const response = await fetch(`${window.location.pathname.split('/')[1]}${window.hlx.codeBasePath}/icons/${iconName}.svg`); if (!response.ok) { ICONS_CACHE[iconName] = false; return; From abf2a92974ef3552e61e1084b5fcb0c202da140c Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 15:48:13 +0200 Subject: [PATCH 0009/1296] Update lib-franklin.js --- solutions/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index c2f794f6b..b957b66d5 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -182,7 +182,7 @@ export async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - const response = await fetch(`${window.location.pathname.split('/')[1]}${window.hlx.codeBasePath}/icons/${iconName}.svg`); + const response = await fetch(`/${window.location.pathname.split('/')[1]}${window.hlx.codeBasePath}/icons/${iconName}.svg`); if (!response.ok) { ICONS_CACHE[iconName] = false; return; From 5f5611b2a8c1ab6f921aa8418fc953b70ed5aaf7 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 16:04:44 +0200 Subject: [PATCH 0010/1296] Update header.js --- solutions/blocks/header/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/blocks/header/header.js b/solutions/blocks/header/header.js index 5ecdee7b5..0b067d1cc 100644 --- a/solutions/blocks/header/header.js +++ b/solutions/blocks/header/header.js @@ -379,7 +379,7 @@ export default async function decorate(block) { // fetch nav content const navPath = getMetadata('nav') || '/nav'; - const resp = await fetch(`${navPath}.plain.html`); + const resp = await fetch(`/${window.location.pathname.split('/')[1]}${navPath}.plain.html`); if (resp.ok) { const html = await resp.text(); From 49300a6e37ec67402ccd4d95e9fd68fdc08ea679 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 16:05:44 +0200 Subject: [PATCH 0011/1296] Update footer.js --- solutions/blocks/footer/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/blocks/footer/footer.js b/solutions/blocks/footer/footer.js index 3110840c5..4e814c8ba 100644 --- a/solutions/blocks/footer/footer.js +++ b/solutions/blocks/footer/footer.js @@ -51,7 +51,7 @@ export default async function decorate(block) { // fetch footer content const footerPath = getMetadata('footer') || '/footer'; - const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); + const resp = await fetch(`/${window.location.pathname.split('/')[1]}${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); if (resp.ok) { const html = await resp.text(); From 0b5e4ea99e44bf2c13e8bba32600b9939a12abd4 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Mon, 30 Oct 2023 16:07:52 +0200 Subject: [PATCH 0012/1296] Update lib-franklin.js --- solutions/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index b957b66d5..c879ca186 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -279,7 +279,7 @@ export async function fetchPlaceholders(prefix = 'default') { const loaded = window.placeholders[`${prefix}-loaded`]; if (!loaded) { window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - fetch(`${prefix === 'default' ? '' : prefix}/solutions/placeholders.json`) + fetch(`/${window.location.pathname.split('/')[1]}${prefix === 'default' ? '' : prefix}/solutions/placeholders.json`) .then((resp) => { if (resp.ok) { return resp.json(); From c4e06486a572033cc6380eeafd27d0e92417774c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 1 Nov 2023 15:46:39 +0200 Subject: [PATCH 0013/1296] placeholder-refactoring --- solutions/blocks/hero/hero.js | 2 +- .../product-comparison-table.js | 8 +++-- solutions/blocks/products/products.js | 9 +++-- solutions/scripts/lib-franklin.js | 35 +++++++++++++++++++ solutions/scripts/scripts.js | 3 +- solutions/scripts/utils/utils.js | 19 ++++++++-- 6 files changed, 66 insertions(+), 10 deletions(-) diff --git a/solutions/blocks/hero/hero.js b/solutions/blocks/hero/hero.js index 4ec77d913..63386b519 100644 --- a/solutions/blocks/hero/hero.js +++ b/solutions/blocks/hero/hero.js @@ -3,7 +3,7 @@ import { createTag, createNanoBlock, renderNanoBlocks, - fetchProduct, + fetchProduct, getDatasetFromSection, } from '../../scripts/utils/utils.js'; /** diff --git a/solutions/blocks/product-comparison-table/product-comparison-table.js b/solutions/blocks/product-comparison-table/product-comparison-table.js index 2ca9d5daf..2199b7098 100644 --- a/solutions/blocks/product-comparison-table/product-comparison-table.js +++ b/solutions/blocks/product-comparison-table/product-comparison-table.js @@ -2,7 +2,7 @@ import { createNanoBlock, renderNanoBlocks, fetchProduct } from '../../scripts/u const fetchedProducts = []; -createNanoBlock('price-comparison', (code, variant, label) => { +createNanoBlock('priceComparison', (code, variant, label) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); const oldPriceElement = document.createElement('p'); @@ -266,5 +266,9 @@ export default function decorate(block) { } extractTextFromStrongTagToParent(block); - renderNanoBlocks(block); + console.log(block); + [...block.children[0].children].slice(1).forEach((item, idx) => { + renderNanoBlocks(item, undefined, idx); + }); + } diff --git a/solutions/blocks/products/products.js b/solutions/blocks/products/products.js index 84b9dc3ac..446bb9ebd 100644 --- a/solutions/blocks/products/products.js +++ b/solutions/blocks/products/products.js @@ -364,14 +364,17 @@ createNanoBlock('lowestPrice', renderLowestPrice); * Main decorate function */ export default function decorate(block) { - [...block.children].forEach((row) => { - [...(row.children)].forEach((col) => { + [...block.children].forEach((row, idxParent) => { + [...(row.children)].forEach((col, idxChild) => { col.classList.add('product-card'); block.appendChild(col); const mv = new ProductCard(col); - renderNanoBlocks(col, mv); + console.log('idxParent', idxParent); + console.log('idxChild', idxChild); + + renderNanoBlocks(col, mv, idxParent); // listen to ProductCard change and update the buttons pointing to the store url mv.subscribe((card) => { diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index c879ca186..01de5bbea 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -269,6 +269,41 @@ export async function decorateTags(element) { replaceTagsInNode(element); } +export function decorateTranslations(element) { + const tagTypes = [ + { regex: /\[#(.*?)#\]/g, className: 'dark-blue' }, + { regex: /\[{(.*?)}\]/g, className: 'light-blue' }, + { regex: /\[\$(.*?)\$\]/g, className: 'green' }, + ]; + + function replaceTags(inputValue) { + let nodeValue = inputValue; // Create a local copy to work on + let replaced = false; + + tagTypes.forEach((tagType) => { + let match = tagType.regex.exec(nodeValue); + while (match !== null) { + nodeValue = nodeValue.replace(match[0], `${match[1]}`); + replaced = true; + tagType.regex.lastIndex = 0; // Reset regex index + match = tagType.regex.exec(nodeValue); + } + }); + + return { nodeValue, replaced }; + } + + function replaceTagsInNode(node) { + if (node.nodeType === Node.TEXT_NODE) { + + } else if (node.nodeType === Node.ELEMENT_NODE) { + node.childNodes.forEach(replaceTagsInNode); + } + } + + replaceTagsInNode(element); +} + /** * Gets placeholders object. * @param {string} [prefix] Location of placeholders diff --git a/solutions/scripts/scripts.js b/solutions/scripts/scripts.js index d15947908..c3736b343 100644 --- a/solutions/scripts/scripts.js +++ b/solutions/scripts/scripts.js @@ -12,7 +12,7 @@ import { loadBlocks, loadCSS, getMetadata, - toClassName, + toClassName, decorateTranslations, } from './lib-franklin.js'; import { @@ -282,6 +282,7 @@ export function decorateMain(main) { decorateButtons(main); decorateIcons(main); decorateTags(main); + // decorateTranslations(main); decorateLinkedPictures(main); decorateSections(main); decorateBlocks(main); diff --git a/solutions/scripts/utils/utils.js b/solutions/scripts/utils/utils.js index 9890ec651..71273d1ca 100644 --- a/solutions/scripts/utils/utils.js +++ b/solutions/scripts/utils/utils.js @@ -138,16 +138,24 @@ function parseParams(params) { * Renders nano blocks * @param parent The parent element */ -export function renderNanoBlocks(parent = document.body, mv = undefined) { +export function renderNanoBlocks(parent = document.body, mv = undefined, index = undefined) { const regex = /{([^}]+)}/g; findTextNodes(parent).forEach((node) => { const text = node.textContent.trim(); const matches = text.match(regex); if (matches) { matches.forEach((match) => { - const [name, ...params] = parseParams(match.slice(1, -1)); - const renderer = nanoBlocks.get(name.toLowerCase()); + const [name] = parseParams(match.slice(1, -1)); + const datasetValue = getDatasetFromSection(parent); + const datasetEntryValue = (index !== undefined ? datasetValue[`${name.toLowerCase()}${index + 1}`] : datasetValue[name.toLowerCase()]) || '' + const newMatch = [match, datasetEntryValue.split(',')].join(',').replace(/[{}]/g, ''); + + // const [name] = parseParams(match.slice(1, -1)); + const [newName, ...params] = parseParams(newMatch); + // const datasetValue = getDatasetFromSection(parent); + const renderer = nanoBlocks.get(newName.toLowerCase()); if (renderer) { + // const datasetEntryValue = index !== undefined ? datasetValue[`${name.toLowerCase()}${index + 1}`] : datasetValue[name.toLowerCase()]; const element = mv ? renderer(mv, ...params) : renderer(...params); element.classList.add('nanoblock'); const oldElement = node.parentNode; @@ -217,3 +225,8 @@ export async function fetchIndex(indexFile, sheet, pageSize = 500) { return newIndex; } + +export function getDatasetFromSection(block) { + const parentSelector = block.closest('.section'); + return parentSelector.dataset; +} From 92852575ff55b9769e140e8167e7dddc14e583da Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 1 Nov 2023 15:50:47 +0200 Subject: [PATCH 0014/1296] placeholder-refactoring --- .github/pull_request_template.md | 4 ++-- solutions/scripts/lib-franklin.js | 35 ------------------------------- solutions/scripts/scripts.js | 3 +-- solutions/scripts/utils/utils.js | 3 --- 4 files changed, 3 insertions(+), 42 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index bd93f8e30..822a2bf83 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a Fix # Test URLs: -- Before: https://main--bitdefender--hlxsites.hlx.page/solutions/ -- After: https://--bitdefender--hlxsites.hlx.page/solutions/ \ No newline at end of file +- Before: https://main--bitdefender--hlxsites.hlx.page/zh-hk/solutions/ +- After: https://--bitdefender--hlxsites.hlx.page/zh-hk/solutions/ diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js index 01de5bbea..c879ca186 100644 --- a/solutions/scripts/lib-franklin.js +++ b/solutions/scripts/lib-franklin.js @@ -269,41 +269,6 @@ export async function decorateTags(element) { replaceTagsInNode(element); } -export function decorateTranslations(element) { - const tagTypes = [ - { regex: /\[#(.*?)#\]/g, className: 'dark-blue' }, - { regex: /\[{(.*?)}\]/g, className: 'light-blue' }, - { regex: /\[\$(.*?)\$\]/g, className: 'green' }, - ]; - - function replaceTags(inputValue) { - let nodeValue = inputValue; // Create a local copy to work on - let replaced = false; - - tagTypes.forEach((tagType) => { - let match = tagType.regex.exec(nodeValue); - while (match !== null) { - nodeValue = nodeValue.replace(match[0], `${match[1]}`); - replaced = true; - tagType.regex.lastIndex = 0; // Reset regex index - match = tagType.regex.exec(nodeValue); - } - }); - - return { nodeValue, replaced }; - } - - function replaceTagsInNode(node) { - if (node.nodeType === Node.TEXT_NODE) { - - } else if (node.nodeType === Node.ELEMENT_NODE) { - node.childNodes.forEach(replaceTagsInNode); - } - } - - replaceTagsInNode(element); -} - /** * Gets placeholders object. * @param {string} [prefix] Location of placeholders diff --git a/solutions/scripts/scripts.js b/solutions/scripts/scripts.js index c3736b343..d15947908 100644 --- a/solutions/scripts/scripts.js +++ b/solutions/scripts/scripts.js @@ -12,7 +12,7 @@ import { loadBlocks, loadCSS, getMetadata, - toClassName, decorateTranslations, + toClassName, } from './lib-franklin.js'; import { @@ -282,7 +282,6 @@ export function decorateMain(main) { decorateButtons(main); decorateIcons(main); decorateTags(main); - // decorateTranslations(main); decorateLinkedPictures(main); decorateSections(main); decorateBlocks(main); diff --git a/solutions/scripts/utils/utils.js b/solutions/scripts/utils/utils.js index 71273d1ca..34b28739a 100644 --- a/solutions/scripts/utils/utils.js +++ b/solutions/scripts/utils/utils.js @@ -150,12 +150,9 @@ export function renderNanoBlocks(parent = document.body, mv = undefined, index = const datasetEntryValue = (index !== undefined ? datasetValue[`${name.toLowerCase()}${index + 1}`] : datasetValue[name.toLowerCase()]) || '' const newMatch = [match, datasetEntryValue.split(',')].join(',').replace(/[{}]/g, ''); - // const [name] = parseParams(match.slice(1, -1)); const [newName, ...params] = parseParams(newMatch); - // const datasetValue = getDatasetFromSection(parent); const renderer = nanoBlocks.get(newName.toLowerCase()); if (renderer) { - // const datasetEntryValue = index !== undefined ? datasetValue[`${name.toLowerCase()}${index + 1}`] : datasetValue[name.toLowerCase()]; const element = mv ? renderer(mv, ...params) : renderer(...params); element.classList.add('nanoblock'); const oldElement = node.parentNode; From a99856f8e78659a5b5f641b57ca3b4518faebe80 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 1 Nov 2023 15:52:24 +0200 Subject: [PATCH 0015/1296] placeholder-refactoring --- .github/pull_request_template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 822a2bf83..1cc4953c3 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a Fix # Test URLs: -- Before: https://main--bitdefender--hlxsites.hlx.page/zh-hk/solutions/ -- After: https://--bitdefender--hlxsites.hlx.page/zh-hk/solutions/ +- Before: https://main--www-websites--bitdefender.hlx.page/zh-hk/solutions/ +- After: https://--www-websites--bitdefender.hlx.page/zh-hk/solutions/ From afca93a92faffb3c14cf1aa7dc1b3bea5937b2d5 Mon Sep 17 00:00:00 2001 From: ext-vradulescu-bf <140399829+ext-vradulescu-bf@users.noreply.github.com> Date: Thu, 2 Nov 2023 13:42:35 +0200 Subject: [PATCH 0016/1296] Update utils.js --- solutions/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/utils/utils.js b/solutions/scripts/utils/utils.js index 34b28739a..1786c1fa4 100644 --- a/solutions/scripts/utils/utils.js +++ b/solutions/scripts/utils/utils.js @@ -187,7 +187,7 @@ export async function fetchIndex(indexFile, sheet, pageSize = 500) { const handleIndex = async (offset) => { const sheetParam = sheet ? `&sheet=${sheet}` : ''; - const resp = await fetch(`/solutions/${indexFile}.json?limit=${pageSize}&offset=${offset}${sheetParam}`); + const resp = await fetch(`/${window.location.pathname.split('/')[1]}/solutions/${indexFile}.json?limit=${pageSize}&offset=${offset}${sheetParam}`); const json = await resp.json(); const newIndex = { From 3c478f984528015ff2587f78d77f4cdc8ca72e04 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 2 Nov 2023 14:32:41 +0200 Subject: [PATCH 0017/1296] fixed-nav-footer-urls --- solutions/blocks/footer/footer.js | 2 +- solutions/blocks/header/header.js | 2 +- solutions/scripts/scripts.js | 7 +++++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/solutions/blocks/footer/footer.js b/solutions/blocks/footer/footer.js index 4e814c8ba..3110840c5 100644 --- a/solutions/blocks/footer/footer.js +++ b/solutions/blocks/footer/footer.js @@ -51,7 +51,7 @@ export default async function decorate(block) { // fetch footer content const footerPath = getMetadata('footer') || '/footer'; - const resp = await fetch(`/${window.location.pathname.split('/')[1]}${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); + const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); if (resp.ok) { const html = await resp.text(); diff --git a/solutions/blocks/header/header.js b/solutions/blocks/header/header.js index 0b067d1cc..5ecdee7b5 100644 --- a/solutions/blocks/header/header.js +++ b/solutions/blocks/header/header.js @@ -379,7 +379,7 @@ export default async function decorate(block) { // fetch nav content const navPath = getMetadata('nav') || '/nav'; - const resp = await fetch(`/${window.location.pathname.split('/')[1]}${navPath}.plain.html`); + const resp = await fetch(`${navPath}.plain.html`); if (resp.ok) { const html = await resp.text(); diff --git a/solutions/scripts/scripts.js b/solutions/scripts/scripts.js index d15947908..bd35b8126 100644 --- a/solutions/scripts/scripts.js +++ b/solutions/scripts/scripts.js @@ -162,8 +162,11 @@ export function getEnvironment(hostname, country) { */ function setPageLanguage(param) { document.documentElement.lang = param.language; - createMetadata('nav', '/solutions/nav'); - createMetadata('footer', '/solutions/footer'); + const pages = window.location.pathname.split('/').filter(item => item); + const domain = pages.shift(); + const basePath = pages.length > 1 ? `${domain}/solutions` : domain; + createMetadata('nav', `/${basePath}/nav`); + createMetadata('footer', `/${basePath}/footer`); } export function pushToDataLayer(event, payload) { From 9aabb219ae50c28d9046c1cf41c24e91de6641e6 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 2 Nov 2023 19:43:10 +0200 Subject: [PATCH 0018/1296] Style new content elements --- solutions/styles/styles.css | 77 +++++++++++++++++++++++++++++++++++++ 1 file changed, 77 insertions(+) diff --git a/solutions/styles/styles.css b/solutions/styles/styles.css index 01f9babc6..aa6c56e3a 100644 --- a/solutions/styles/styles.css +++ b/solutions/styles/styles.css @@ -306,6 +306,26 @@ main .section { overflow: hidden; } +main .section.margin-0 { + padding-top: 0; + padding-bottom: 0; +} + +main .section.link-right a { + float: right; +} + +main .section.images-floated .default-content-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; +} + +main .section.images-floated .default-content-wrapper p { + max-width: 140px; +} + .default-content-wrapper { width: 100%; margin: 0 auto; @@ -393,10 +413,67 @@ main .section.center .products .product-card { justify-self: center; } +main .section.bitdefender-ferrari .default-content-wrapper { + background-color: #e4f2ff; + display: flex; + border-radius: 10px; + overflow: hidden; + align-items: center; + justify-content: space-between; + padding: 0; +} + +main .section.bitdefender-ferrari .default-content-wrapper p { + padding: 0; + margin: 0; +} + +main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { + width: 25%; +} + +main .section.bitdefender-ferrari .default-content-wrapper img { + width: 100%; + margin-right: 10%; + margin-bottom: -10px; +} + +main .section.bitdefender-ferrari .default-content-wrapper h2 { + width: 50%; + font-size: 22px; + margin: 10px 0; +} + +main .section.bitdefender-ferrari .default-content-wrapper h2 em { + font-style: normal; + font-weight: normal; + font-size: 15px; + margin-top: 12px; + display: block; +} + +main .section.bitdefender-ferrari .default-content-wrapper .button-container { + width: 15%; +} + +main .section.bitdefender-ferrari .default-content-wrapper .button-container a { + background-color: transparent; + color: black; + border-color: black; +} + +main .section.bitdefender-ferrari .default-content-wrapper .button-container a.button::after { + background-color: black; +} + @media (min-width: 768px) { main .section.center .products .product-card { min-width: 380px; } + + main .section.images-floated .default-content-wrapper { + flex-direction: row; + } } @media (min-width: 992px) { /* desktop */ From f11de88ff3db5461847b437bb10fd103469ec097 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 2 Nov 2023 19:48:31 +0200 Subject: [PATCH 0019/1296] round-card block --- solutions/blocks/round-card/round-card.css | 71 ++++++++++++++++++++++ solutions/blocks/round-card/round-card.js | 19 ++++++ 2 files changed, 90 insertions(+) create mode 100644 solutions/blocks/round-card/round-card.css create mode 100644 solutions/blocks/round-card/round-card.js diff --git a/solutions/blocks/round-card/round-card.css b/solutions/blocks/round-card/round-card.css new file mode 100644 index 000000000..fcb8789dd --- /dev/null +++ b/solutions/blocks/round-card/round-card.css @@ -0,0 +1,71 @@ +.round-card-container .inner-wrapper { + display: flex; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 3px 6px 0 rgba(0,0,0,.08); + position: relative; + overflow: hidden; + z-index: 2; + width: 100%; + margin: 10px 0; + padding: 40px 23px 2pc; +} + +.round-card-container .inner-wrapper > div:nth-child(1) { + width: 50%; +} + +.round-card-container .inner-wrapper > div:last-child { + border-radius: 50%; + position: absolute; + right: -35px; + top: -60px; + width: 225px; + height: 225px; + overflow: hidden; +} + +.round-card-container .icon-apple { + width: 60px; + transform: none; +} + +.round-card-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out; + transform: scale(1); +} + +.round-card-container .inner-wrapper > a:first-child { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + height: 100%; + text-indent: -999999px; +} + +@media(min-width: 767px) { + /* tablet */ + .round-card-container .inner-wrapper p { + font-size: 18px; + } + .round-card-container .inner-wrapper > div:last-child { + width: 325px; + height: 325px; + } + .round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a::after { + transform: translateX(5px); + opacity: 1; + } + .round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a span.button-text { + transform: translate(-10px, 0); + } + + .round-card-container .inner-wrapper > a:first-child:hover ~ div img { + transform: scale(1.1); + } +} diff --git a/solutions/blocks/round-card/round-card.js b/solutions/blocks/round-card/round-card.js new file mode 100644 index 000000000..61919f671 --- /dev/null +++ b/solutions/blocks/round-card/round-card.js @@ -0,0 +1,19 @@ +export default function decorate(block) { + const innerWrapper = block.children[0]; + innerWrapper.classList = 'inner-wrapper'; + + const iconElement = innerWrapper.children[0].children[0].children[0]; + innerWrapper.children[0].children[0].remove(); + innerWrapper.children[0].prepend(iconElement); + + const originalAnchorEl = innerWrapper.children[0].lastElementChild.firstElementChild; + const newAnchorEl = originalAnchorEl.cloneNode(); + newAnchorEl.classList = ''; + innerWrapper.prepend(newAnchorEl); + + const defaultWrapper = document.createElement('div'); + defaultWrapper.classList = 'default-content-wrapper'; + + defaultWrapper.append(innerWrapper); + block.prepend(defaultWrapper); +} From 36542a9f56a98d04eadf25a67af8c2a0566563c1 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Fri, 3 Nov 2023 12:25:59 +0200 Subject: [PATCH 0020/1296] Homepage - 2 sections styles --- solutions/styles/styles.css | 41 +++++++++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 8 deletions(-) diff --git a/solutions/styles/styles.css b/solutions/styles/styles.css index aa6c56e3a..7bacec5d3 100644 --- a/solutions/styles/styles.css +++ b/solutions/styles/styles.css @@ -414,12 +414,13 @@ main .section.center .products .product-card { } main .section.bitdefender-ferrari .default-content-wrapper { - background-color: #e4f2ff; display: flex; - border-radius: 10px; - overflow: hidden; + flex-direction: column; align-items: center; justify-content: space-between; + background-color: #e4f2ff; + border-radius: 10px; + overflow: hidden; padding: 0; } @@ -429,17 +430,16 @@ main .section.bitdefender-ferrari .default-content-wrapper p { } main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { - width: 25%; + width: 100%; } main .section.bitdefender-ferrari .default-content-wrapper img { width: 100%; - margin-right: 10%; - margin-bottom: -10px; } main .section.bitdefender-ferrari .default-content-wrapper h2 { - width: 50%; + width: 98%; + padding: 0 1%; font-size: 22px; margin: 10px 0; } @@ -453,7 +453,9 @@ main .section.bitdefender-ferrari .default-content-wrapper h2 em { } main .section.bitdefender-ferrari .default-content-wrapper .button-container { - width: 15%; + width: 98%; + padding: 0 1% 10px; + text-align: right; } main .section.bitdefender-ferrari .default-content-wrapper .button-container a { @@ -474,6 +476,29 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b main .section.images-floated .default-content-wrapper { flex-direction: row; } + + main .section.bitdefender-ferrari .default-content-wrapper { + flex-direction: row; + } + + main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { + width: 25%; + } + + main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) img { + margin-right: 10%; + margin-bottom: -10px; + } + + main .section.bitdefender-ferrari .default-content-wrapper h2 { + width: 50%; + } + + main .section.bitdefender-ferrari .default-content-wrapper .button-container { + width: 15%; + padding: 0; + text-align: center; + } } @media (min-width: 992px) { /* desktop */ From 90df93feb4b87fba7bd208d2911a1e8c0a0a65e0 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 3 Nov 2023 12:31:53 +0200 Subject: [PATCH 0021/1296] update-columns-block-leftimage --- solutions/blocks/columns/columns.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/solutions/blocks/columns/columns.css b/solutions/blocks/columns/columns.css index ac1fadb4a..b5eb72394 100644 --- a/solutions/blocks/columns/columns.css +++ b/solutions/blocks/columns/columns.css @@ -124,6 +124,10 @@ top: 15%; border-radius: 5px; } + + .columns.highlight-text.black.imageleft { + left: 2.5%; + } } @media (min-width: 992px) { /* desktop */ @@ -145,10 +149,14 @@ margin: 0 auto; } - .columns.highlight-text.black { + .columns.highlight-text.black { right: 10%; top: 10%; } + + .columns.highlight-text.black.imageleft { + left: 10%; + } } @media (min-width: 1600px) { /* large desktop */ @@ -233,7 +241,7 @@ padding-top: 1px; } -.columns.vpn-presentation .button-container, +.columns.vpn-presentation .button-container, .columns.vpn-presentation .info-button-container{ display: inline-block; padding-right: 13px; @@ -451,4 +459,4 @@ main .section.two-columns .right-col .products.plans a.button:any-link { content: url("/solutions/icons/user-guide-white.svg"); color: white; padding-right: 8px; -} \ No newline at end of file +} From d1f254946b0b47761d072e7e6ac8cb259d807d25 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 3 Nov 2023 14:38:51 +0200 Subject: [PATCH 0022/1296] box-image-round-card --- .../box-image-round-card.css | 94 +++++++++++++++++++ .../box-image-round-card.js | 36 +++++++ solutions/blocks/hero/hero.js | 2 +- 3 files changed, 131 insertions(+), 1 deletion(-) create mode 100644 solutions/blocks/box-image-round-card/box-image-round-card.css create mode 100644 solutions/blocks/box-image-round-card/box-image-round-card.js diff --git a/solutions/blocks/box-image-round-card/box-image-round-card.css b/solutions/blocks/box-image-round-card/box-image-round-card.css new file mode 100644 index 000000000..96b39c691 --- /dev/null +++ b/solutions/blocks/box-image-round-card/box-image-round-card.css @@ -0,0 +1,94 @@ +.box-image-round-card-container .inner-wrapper { + display: flex; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 3px 6px 0 rgba(0,0,0,.08); + position: relative; + overflow: hidden; + z-index: 2; + width: 100%; + margin: 10px 0; + padding: 40px 23px 2pc; +} + +/*.box-image-round-card-container .inner-wrapper > div:nth-child(1) {*/ +/* width: 50%;*/ +/*}*/ + +/*.box-image-round-card-container .inner-wrapper > div:last-child {*/ +/* border-radius: 50%;*/ +/* position: absolute;*/ +/* right: -35px;*/ +/* top: -60px;*/ +/* width: 225px;*/ +/* height: 225px;*/ +/* overflow: hidden;*/ +/*}*/ + +.box-image-round-card-container .icon-apple { + width: 60px; + transform: none; +} + +.box-image-round-card-container img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out; + transform: scale(1); +} + +.box-image-round-card-container .inner-wrapper > a:first-child { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + height: 100%; + text-indent: -999999px; +} + +.box-image-round-card-container .inner-wrapper p.button-container { + display: inline-block; + margin-right: 10px; +} + +@media(min-width: 767px) { + /* tablet */ + .box-image-round-card-container .inner-wrapper p { + font-size: 18px; + } + /*.box-image-round-card-container .inner-wrapper > div:last-child {*/ + /* width: 325px;*/ + /* height: 325px;*/ + /*}*/ + .box-image-round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a::after { + transform: translateX(5px); + opacity: 1; + } + .box-image-round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a span.button-text { + transform: translate(-10px, 0); + } + + .box-image-round-card-container .inner-wrapper > a:first-child:hover ~ div img { + transform: scale(1.1); + } + + .box-image-round-card-container .default-content-wrapper { + display: flex; + } + + .box-image-round-card-container .card-wrapper { + order: 2; + flex: 60%; + display: flex; + align-items: center; + } + + .box-image-round-card-container .picture-wrapper { + order: 1; + flex: 40%; + padding-right: 25px; + margin: 10px 0; + } +} diff --git a/solutions/blocks/box-image-round-card/box-image-round-card.js b/solutions/blocks/box-image-round-card/box-image-round-card.js new file mode 100644 index 000000000..816874b97 --- /dev/null +++ b/solutions/blocks/box-image-round-card/box-image-round-card.js @@ -0,0 +1,36 @@ +import * as ceva from '../round-card/round-card.js'; +import {createOptimizedPicture} from '../../scripts/lib-franklin.js'; +import {getDatasetFromSection} from '../../scripts/utils/utils.js'; +export default function decorate(block) { + console.log('box-image-round-card', block); + const innerWrapper = block.children[0]; + innerWrapper.classList = 'inner-wrapper'; + + // const iconElement = innerWrapper.children[0].children[0].children[0]; + // innerWrapper.children[0].children[0].remove(); + // innerWrapper.children[0].prepend(iconElement); + + // const originalAnchorEl = innerWrapper.children[0].lastElementChild.firstElementChild; + // const newAnchorEl = originalAnchorEl.cloneNode(); + // newAnchorEl.classList = ''; + // innerWrapper.prepend(newAnchorEl); + + const defaultWrapper = document.createElement('div'); + defaultWrapper.classList = 'default-content-wrapper'; + + const carWrapper = document.createElement('div'); + carWrapper.classList = 'card-wrapper'; + + carWrapper.append(innerWrapper); + + const pictureWrapper = document.createElement('div'); + pictureWrapper.classList = 'picture-wrapper'; + + const blockDataset = getDatasetFromSection(block); + pictureWrapper.append(createOptimizedPicture(blockDataset.bgImage, 'title')); + + defaultWrapper.prepend(carWrapper); + defaultWrapper.append(pictureWrapper); + + block.prepend(defaultWrapper); +} diff --git a/solutions/blocks/hero/hero.js b/solutions/blocks/hero/hero.js index 63386b519..4ec77d913 100644 --- a/solutions/blocks/hero/hero.js +++ b/solutions/blocks/hero/hero.js @@ -3,7 +3,7 @@ import { createTag, createNanoBlock, renderNanoBlocks, - fetchProduct, getDatasetFromSection, + fetchProduct, } from '../../scripts/utils/utils.js'; /** From f8d9a4b6071625907f5f48f6bbf394bfc6ed6fae Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Fri, 3 Nov 2023 16:08:32 +0200 Subject: [PATCH 0023/1296] Update --- solutions/styles/styles.css | 68 ++++++++++++++++++++++++++----------- 1 file changed, 49 insertions(+), 19 deletions(-) diff --git a/solutions/styles/styles.css b/solutions/styles/styles.css index 7bacec5d3..7fbb2e271 100644 --- a/solutions/styles/styles.css +++ b/solutions/styles/styles.css @@ -313,17 +313,22 @@ main .section.margin-0 { main .section.link-right a { float: right; + display: flex; } main .section.images-floated .default-content-wrapper { display: flex; align-items: center; justify-content: space-between; - flex-direction: column; } main .section.images-floated .default-content-wrapper p { max-width: 140px; + margin: 0 5px; +} + +main .section.images-floated .default-content-wrapper p.button-container { + width: 100%; } .default-content-wrapper { @@ -419,9 +424,8 @@ main .section.bitdefender-ferrari .default-content-wrapper { align-items: center; justify-content: space-between; background-color: #e4f2ff; - border-radius: 10px; overflow: hidden; - padding: 0; + padding: var(--body-padding); } main .section.bitdefender-ferrari .default-content-wrapper p { @@ -431,6 +435,7 @@ main .section.bitdefender-ferrari .default-content-wrapper p { main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { width: 100%; + order: 3; } main .section.bitdefender-ferrari .default-content-wrapper img { @@ -438,24 +443,22 @@ main .section.bitdefender-ferrari .default-content-wrapper img { } main .section.bitdefender-ferrari .default-content-wrapper h2 { - width: 98%; - padding: 0 1%; - font-size: 22px; - margin: 10px 0; + order: 0; } main .section.bitdefender-ferrari .default-content-wrapper h2 em { font-style: normal; font-weight: normal; - font-size: 15px; + font-size: var(--body-font-size-s); margin-top: 12px; display: block; } main .section.bitdefender-ferrari .default-content-wrapper .button-container { - width: 98%; - padding: 0 1% 10px; + width: 100%; text-align: right; + order: 2; + margin-bottom: 10px; } main .section.bitdefender-ferrari .default-content-wrapper .button-container a { @@ -479,23 +482,29 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b main .section.bitdefender-ferrari .default-content-wrapper { flex-direction: row; + padding: 0; + border-radius: 10px; + overflow: hidden; } main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { - width: 25%; + width: 200px; + order: 0; } main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) img { - margin-right: 10%; + margin-right: 10px; margin-bottom: -10px; } main .section.bitdefender-ferrari .default-content-wrapper h2 { - width: 50%; + width: 400px; + font-size: var(--heading-font-size-m); } main .section.bitdefender-ferrari .default-content-wrapper .button-container { - width: 15%; + width: 150px; + margin-right: 15px; padding: 0; text-align: center; } @@ -535,6 +544,27 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b padding: 0 var(--section-desktop-padding); } + main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { + width: 200px; + } + + main .section.bitdefender-ferrari .default-content-wrapper h2 { + width: 540px; + } +} + +@media (min-width: 1200px) { + main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { + width: 350px; + } + + main .section.bitdefender-ferrari .default-content-wrapper h2 { + width: 700px; + } + + main .section.bitdefender-ferrari .default-content-wrapper .button-container { + margin-right: var(--section-desktop-padding); + } } @media (min-width: 1400px) { @@ -705,7 +735,7 @@ p.info-button-container a.info-button.modal:hover { color: var(--link-color); } -a.button::after, input[type="submit"]::after { +a.button::after, input[type="submit"]::after, main .section.link-right a::after { content: ''; width: 24px; height: 24px; @@ -767,7 +797,7 @@ a.button:hover.secondary { color: var(--white-color) } -a.button.modal { +a.button.modal, main .section.link-right a { color: var(--link-color); font-weight: var(--font-weight-bold); background-color: transparent; @@ -779,7 +809,7 @@ a.button.modal { text-overflow: ellipsis; } -a.button.modal::after { +a.button.modal::after, main .section.link-right a::after { background-color: var(--link-color); opacity: 1; margin: 0; @@ -794,13 +824,13 @@ a.button:has(.icon)::after { opacity: 0; } -a.button.modal:hover { +a.button.modal:hover, main .section.link-right a:hover { color: var(--link-hover-color); text-decoration: none; transform: none; } -a.button.modal:hover::after { +a.button.modal:hover::after, main .section.link-right a:hover::after { transform: translateX(3px); background-color: var(--link-hover-color); } From 60e4ee4af4274f1c5929829033e7b4d7a5d90ff4 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 6 Nov 2023 11:31:42 +0200 Subject: [PATCH 0024/1296] css fix --- .../box-image-round-card/box-image-round-card.js | 1 - solutions/blocks/products/products.js | 3 --- solutions/blocks/round-card/round-card.css | 13 +++++++++++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/solutions/blocks/box-image-round-card/box-image-round-card.js b/solutions/blocks/box-image-round-card/box-image-round-card.js index 816874b97..7071de284 100644 --- a/solutions/blocks/box-image-round-card/box-image-round-card.js +++ b/solutions/blocks/box-image-round-card/box-image-round-card.js @@ -2,7 +2,6 @@ import * as ceva from '../round-card/round-card.js'; import {createOptimizedPicture} from '../../scripts/lib-franklin.js'; import {getDatasetFromSection} from '../../scripts/utils/utils.js'; export default function decorate(block) { - console.log('box-image-round-card', block); const innerWrapper = block.children[0]; innerWrapper.classList = 'inner-wrapper'; diff --git a/solutions/blocks/products/products.js b/solutions/blocks/products/products.js index 446bb9ebd..c0e3bd7e5 100644 --- a/solutions/blocks/products/products.js +++ b/solutions/blocks/products/products.js @@ -371,9 +371,6 @@ export default function decorate(block) { const mv = new ProductCard(col); - console.log('idxParent', idxParent); - console.log('idxChild', idxChild); - renderNanoBlocks(col, mv, idxParent); // listen to ProductCard change and update the buttons pointing to the store url diff --git a/solutions/blocks/round-card/round-card.css b/solutions/blocks/round-card/round-card.css index fcb8789dd..00f8b0e28 100644 --- a/solutions/blocks/round-card/round-card.css +++ b/solutions/blocks/round-card/round-card.css @@ -11,8 +11,14 @@ padding: 40px 23px 2pc; } -.round-card-container .inner-wrapper > div:nth-child(1) { - width: 50%; +/* title */ +.round-card-container .inner-wrapper > div:nth-child(2) > *:nth-child(2) { + max-width: 150px; +} + +/* first paragraph */ +.round-card-container .inner-wrapper > div:nth-child(2) > p:nth-child(3) { + margin-top: 40px; } .round-card-container .inner-wrapper > div:last-child { @@ -53,6 +59,9 @@ .round-card-container .inner-wrapper p { font-size: 18px; } + .round-card-container .inner-wrapper > div:nth-child(2) { + max-width: calc(100% - 280px); + } .round-card-container .inner-wrapper > div:last-child { width: 325px; height: 325px; From 0017fa520e3862e34cc2a0cc4a39cf2ef83a90dd Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 6 Nov 2023 12:11:07 +0200 Subject: [PATCH 0025/1296] Update Homepage China --- solutions/styles/styles.css | 53 ++++++++++++++++++++++++++++++++----- 1 file changed, 46 insertions(+), 7 deletions(-) diff --git a/solutions/styles/styles.css b/solutions/styles/styles.css index 7fbb2e271..a7aca69a7 100644 --- a/solutions/styles/styles.css +++ b/solutions/styles/styles.css @@ -418,32 +418,47 @@ main .section.center .products .product-card { justify-self: center; } +main .section.bitdefender-ferrari { + padding-bottom: 0; +} + main .section.bitdefender-ferrari .default-content-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: space-between; - background-color: #e4f2ff; overflow: hidden; - padding: var(--body-padding); + max-width: var(--section-large-desktop-max-width); } main .section.bitdefender-ferrari .default-content-wrapper p { - padding: 0; margin: 0; + padding: 10px; + background-color: #e4f2ff; + align-self: stretch; } main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { width: 100%; order: 3; + overflow: hidden; } main .section.bitdefender-ferrari .default-content-wrapper img { width: 100%; + align-self: stretch; } main .section.bitdefender-ferrari .default-content-wrapper h2 { order: 0; + align-self: stretch; + display: flex; + align-items: center; + justify-content: center; + background-color: #e4f2ff; + margin-bottom: 0; + padding: 10px; + font-size: 19px; } main .section.bitdefender-ferrari .default-content-wrapper h2 em { @@ -456,9 +471,16 @@ main .section.bitdefender-ferrari .default-content-wrapper h2 em { main .section.bitdefender-ferrari .default-content-wrapper .button-container { width: 100%; + align-self: stretch; + display: flex; + align-items: center; + justify-content: center; text-align: right; order: 2; margin-bottom: 10px; + background-color: #e4f2ff; + margin-bottom: 0; + overflow: hidden; } main .section.bitdefender-ferrari .default-content-wrapper .button-container a { @@ -482,14 +504,19 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b main .section.bitdefender-ferrari .default-content-wrapper { flex-direction: row; - padding: 0; border-radius: 10px; overflow: hidden; } + main .section.bitdefender-ferrari .default-content-wrapper p { + padding: 0; + } + main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { width: 200px; order: 0; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; } main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) img { @@ -498,15 +525,17 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } main .section.bitdefender-ferrari .default-content-wrapper h2 { - width: 400px; - font-size: var(--heading-font-size-m); + width: 435px; + font-size: var(--heading-font-size-s); } main .section.bitdefender-ferrari .default-content-wrapper .button-container { - width: 150px; + width: 250px; margin-right: 15px; padding: 0; text-align: center; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; } } @@ -542,6 +571,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b .default-content-wrapper { max-width: var(--section-desktop-max-width); padding: 0 var(--section-desktop-padding); + border-radius: 0; } main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { @@ -550,9 +580,16 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b main .section.bitdefender-ferrari .default-content-wrapper h2 { width: 540px; + font-size: 19px; } } +@media (min-width: 1065px) { + main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { + width: 350px; + } +} + @media (min-width: 1200px) { main .section.bitdefender-ferrari .default-content-wrapper p:nth-of-type(1) { width: 350px; @@ -564,6 +601,8 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b main .section.bitdefender-ferrari .default-content-wrapper .button-container { margin-right: var(--section-desktop-padding); + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; } } From d1c45aa6c62a9c4550918c759f414ae6a46713a8 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 6 Nov 2023 15:40:35 +0200 Subject: [PATCH 0026/1296] InitSelector update for zh-hk and zh-tw --- solutions/scripts/utils/utils.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/solutions/scripts/utils/utils.js b/solutions/scripts/utils/utils.js index 1786c1fa4..72a441ee9 100644 --- a/solutions/scripts/utils/utils.js +++ b/solutions/scripts/utils/utils.js @@ -1,5 +1,13 @@ +export function getDefaultLanguage() { + const localisationList = ['au', 'zh-hk', 'zh-tw']; + const currentPathUrl = window.location.pathname; + const foundLanguage = localisationList.find((item) => currentPathUrl.indexOf(`/${item}/`) !== -1); + return foundLanguage.replace('zh-','') || 'site'; +} + const cacheResponse = new Map(); -const FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; +const siteName = getDefaultLanguage(); +const FETCH_URL = `https://www.bitdefender.${siteName === 'au' ? 'com.au' : 'com'}/site/Store/ajax`; // eslint-disable-next-line import/prefer-default-export export function createTag(tag, attributes, html) { @@ -47,6 +55,7 @@ async function findProductVariant(cachedResponse, variant) { * @param code The product code * @param variant The product variant * @returns {Promise<*>} + * hk - 51, tw - 52 */ export async function fetchProduct(code = 'av', variant = '1u-1y') { const data = new FormData(); @@ -54,12 +63,21 @@ export async function fetchProduct(code = 'av', variant = '1u-1y') { ev: 1, product_id: code, config: { + force_region: '51', extra_params: { pid: null, }, }, })); + if (siteName === 'hk' || siteName === 'tw') { + // append force_region for hk and tw + const newData = JSON.parse(data.get('data')); + newData.config.force_region = siteName === 'hk' ? '52' : '52'; + + data.set('data', JSON.stringify(newData)); + } + if (cacheResponse.has(code)) { return findProductVariant(cacheResponse.get(code), variant); } From ca285e4ea15d0d64ac0289be99ae6bff913c8a4e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 6 Nov 2023 15:48:59 +0200 Subject: [PATCH 0027/1296] update region id --- solutions/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/utils/utils.js b/solutions/scripts/utils/utils.js index 72a441ee9..cc38cd09a 100644 --- a/solutions/scripts/utils/utils.js +++ b/solutions/scripts/utils/utils.js @@ -73,7 +73,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y') { if (siteName === 'hk' || siteName === 'tw') { // append force_region for hk and tw const newData = JSON.parse(data.get('data')); - newData.config.force_region = siteName === 'hk' ? '52' : '52'; + newData.config.force_region = siteName === 'hk' ? '51' : '52'; data.set('data', JSON.stringify(newData)); } From a466b947c5c86c0e95822c5f20b8ce8e9c582aa8 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 6 Nov 2023 16:09:46 +0200 Subject: [PATCH 0028/1296] update region code --- solutions/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/solutions/scripts/utils/utils.js b/solutions/scripts/utils/utils.js index cc38cd09a..564078202 100644 --- a/solutions/scripts/utils/utils.js +++ b/solutions/scripts/utils/utils.js @@ -73,7 +73,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y') { if (siteName === 'hk' || siteName === 'tw') { // append force_region for hk and tw const newData = JSON.parse(data.get('data')); - newData.config.force_region = siteName === 'hk' ? '51' : '52'; + newData.config.force_region = siteName === 'hk' ? '41' : '52'; data.set('data', JSON.stringify(newData)); } From 8fdcc9f1fdc7e02e50d202382787c81534d9bc77 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 6 Nov 2023 18:05:07 +0200 Subject: [PATCH 0029/1296] breadcrumb + hero css fixes --- 404.html | 19 +++++++++------- solutions/blocks/hero/hero.css | 37 ++++++++++++++++++++++++-------- solutions/blocks/hero/hero.js | 8 +++++-- solutions/scripts/breadcrumbs.js | 17 ++++++++------- solutions/scripts/scripts.js | 6 +++++- 5 files changed, 59 insertions(+), 28 deletions(-) diff --git a/404.html b/404.html index 165f8c43b..dd0d21319 100644 --- a/404.html +++ b/404.html @@ -12,9 +12,12 @@ + - + diff --git a/solutions/blocks/accordion/accordion.css b/_src/blocks/accordion/accordion.css similarity index 100% rename from solutions/blocks/accordion/accordion.css rename to _src/blocks/accordion/accordion.css diff --git a/solutions/blocks/accordion/accordion.js b/_src/blocks/accordion/accordion.js similarity index 100% rename from solutions/blocks/accordion/accordion.js rename to _src/blocks/accordion/accordion.js diff --git a/solutions/blocks/awards-search/awards-search.css b/_src/blocks/awards-search/awards-search.css similarity index 98% rename from solutions/blocks/awards-search/awards-search.css rename to _src/blocks/awards-search/awards-search.css index d9fb85468..ec750ecad 100644 --- a/solutions/blocks/awards-search/awards-search.css +++ b/_src/blocks/awards-search/awards-search.css @@ -102,8 +102,8 @@ main .section .awards-search .awards-results-container .award-item-container h2 width: 1.5rem; height: 1.3125rem; /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask: url('/solutions/icons/arrow-right.svg'); - mask: url('/solutions/icons/arrow-right.svg'); + -webkit-mask: url('/_src/icons/arrow-right.svg'); + mask: url('/_src/icons/arrow-right.svg'); background-color: var(--read-more-text-color); display: inline-block; opacity: 1; diff --git a/solutions/blocks/awards-search/awards-search.js b/_src/blocks/awards-search/awards-search.js similarity index 100% rename from solutions/blocks/awards-search/awards-search.js rename to _src/blocks/awards-search/awards-search.js diff --git a/solutions/blocks/barchart/barchart.css b/_src/blocks/barchart/barchart.css similarity index 100% rename from solutions/blocks/barchart/barchart.css rename to _src/blocks/barchart/barchart.css diff --git a/solutions/blocks/barchart/barchart.js b/_src/blocks/barchart/barchart.js similarity index 100% rename from solutions/blocks/barchart/barchart.js rename to _src/blocks/barchart/barchart.js diff --git a/solutions/blocks/box-image-round-card/box-image-round-card.css b/_src/blocks/box-image-round-card/box-image-round-card.css similarity index 100% rename from solutions/blocks/box-image-round-card/box-image-round-card.css rename to _src/blocks/box-image-round-card/box-image-round-card.css diff --git a/solutions/blocks/box-image-round-card/box-image-round-card.js b/_src/blocks/box-image-round-card/box-image-round-card.js similarity index 100% rename from solutions/blocks/box-image-round-card/box-image-round-card.js rename to _src/blocks/box-image-round-card/box-image-round-card.js diff --git a/solutions/blocks/cards/cards.css b/_src/blocks/cards/cards.css similarity index 100% rename from solutions/blocks/cards/cards.css rename to _src/blocks/cards/cards.css diff --git a/solutions/blocks/cards/cards.js b/_src/blocks/cards/cards.js similarity index 100% rename from solutions/blocks/cards/cards.js rename to _src/blocks/cards/cards.js diff --git a/solutions/blocks/columns/columns.css b/_src/blocks/columns/columns.css similarity index 99% rename from solutions/blocks/columns/columns.css rename to _src/blocks/columns/columns.css index b5eb72394..123135334 100644 --- a/solutions/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -456,7 +456,7 @@ main .section.two-columns .right-col .products.plans a.button:any-link { .two-columns .left-col p a.info-button.modal::before { - content: url("/solutions/icons/user-guide-white.svg"); + content: url("/_src/icons/user-guide-white.svg"); color: white; padding-right: 8px; } diff --git a/solutions/blocks/columns/columns.js b/_src/blocks/columns/columns.js similarity index 100% rename from solutions/blocks/columns/columns.js rename to _src/blocks/columns/columns.js diff --git a/solutions/blocks/embed/embed.css b/_src/blocks/embed/embed.css similarity index 100% rename from solutions/blocks/embed/embed.css rename to _src/blocks/embed/embed.css diff --git a/solutions/blocks/embed/embed.js b/_src/blocks/embed/embed.js similarity index 100% rename from solutions/blocks/embed/embed.js rename to _src/blocks/embed/embed.js diff --git a/solutions/blocks/features/features.css b/_src/blocks/features/features.css similarity index 98% rename from solutions/blocks/features/features.css rename to _src/blocks/features/features.css index 065dc557c..968a59495 100644 --- a/solutions/blocks/features/features.css +++ b/_src/blocks/features/features.css @@ -90,7 +90,7 @@ width: 14px; height: 8px; margin: 0 3px; - background: url("/solutions/icons/tabs_arrow.svg") no-repeat; + background: url("/_src/icons/tabs_arrow.svg") no-repeat; background-size: 100%;; transform: rotate(180deg); transition: all .3s linear; diff --git a/solutions/blocks/features/features.js b/_src/blocks/features/features.js similarity index 100% rename from solutions/blocks/features/features.js rename to _src/blocks/features/features.js diff --git a/solutions/blocks/footer/footer.css b/_src/blocks/footer/footer.css similarity index 100% rename from solutions/blocks/footer/footer.css rename to _src/blocks/footer/footer.css diff --git a/solutions/blocks/footer/footer.js b/_src/blocks/footer/footer.js similarity index 100% rename from solutions/blocks/footer/footer.js rename to _src/blocks/footer/footer.js diff --git a/solutions/blocks/form/form.css b/_src/blocks/form/form.css similarity index 100% rename from solutions/blocks/form/form.css rename to _src/blocks/form/form.css diff --git a/solutions/blocks/form/form.js b/_src/blocks/form/form.js similarity index 100% rename from solutions/blocks/form/form.js rename to _src/blocks/form/form.js diff --git a/solutions/blocks/fragment-metadata/fragment-metadata.css b/_src/blocks/fragment-metadata/fragment-metadata.css similarity index 100% rename from solutions/blocks/fragment-metadata/fragment-metadata.css rename to _src/blocks/fragment-metadata/fragment-metadata.css diff --git a/solutions/blocks/fragment-metadata/fragment-metadata.js b/_src/blocks/fragment-metadata/fragment-metadata.js similarity index 100% rename from solutions/blocks/fragment-metadata/fragment-metadata.js rename to _src/blocks/fragment-metadata/fragment-metadata.js diff --git a/solutions/blocks/header/header.css b/_src/blocks/header/header.css similarity index 98% rename from solutions/blocks/header/header.css rename to _src/blocks/header/header.css index 6e4924881..3077c98d4 100644 --- a/solutions/blocks/header/header.css +++ b/_src/blocks/header/header.css @@ -352,8 +352,8 @@ header a.button:hover span.button-text { width: 24px; height: 24px; /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask:url('/solutions/icons/arrow-right.svg'); - mask: url('/solutions/icons/arrow-right.svg'); + -webkit-mask:url('/_src/icons/arrow-right.svg'); + mask: url('/_src/icons/arrow-right.svg'); background-color: var(--button-link-color); display: inline-block; transition: all .2s cubic-bezier(.4,0,.2,1); @@ -901,8 +901,8 @@ header a.button:hover span.button-text { width: 24px; height: 24px; /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask:url('/solutions/icons/arrow-right.svg'); - mask: url('/solutions/icons/arrow-right.svg'); + -webkit-mask:url('/_src/icons/arrow-right.svg'); + mask: url('/_src/icons/arrow-right.svg'); background-color: var(--button-link-color); display: inline-block; transition: all .2s cubic-bezier(.4,0,.2,1); diff --git a/solutions/blocks/header/header.js b/_src/blocks/header/header.js similarity index 100% rename from solutions/blocks/header/header.js rename to _src/blocks/header/header.js diff --git a/solutions/blocks/hero/hero.css b/_src/blocks/hero/hero.css similarity index 100% rename from solutions/blocks/hero/hero.css rename to _src/blocks/hero/hero.css diff --git a/solutions/blocks/hero/hero.js b/_src/blocks/hero/hero.js similarity index 100% rename from solutions/blocks/hero/hero.js rename to _src/blocks/hero/hero.js diff --git a/solutions/blocks/image-columns/image-columns.css b/_src/blocks/image-columns/image-columns.css similarity index 100% rename from solutions/blocks/image-columns/image-columns.css rename to _src/blocks/image-columns/image-columns.css diff --git a/solutions/blocks/image-columns/image-columns.js b/_src/blocks/image-columns/image-columns.js similarity index 100% rename from solutions/blocks/image-columns/image-columns.js rename to _src/blocks/image-columns/image-columns.js diff --git a/solutions/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css similarity index 100% rename from solutions/blocks/product-comparison-table/product-comparison-table.css rename to _src/blocks/product-comparison-table/product-comparison-table.css diff --git a/solutions/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js similarity index 100% rename from solutions/blocks/product-comparison-table/product-comparison-table.js rename to _src/blocks/product-comparison-table/product-comparison-table.js diff --git a/solutions/blocks/products/products.css b/_src/blocks/products/products.css similarity index 100% rename from solutions/blocks/products/products.css rename to _src/blocks/products/products.css diff --git a/solutions/blocks/products/products.js b/_src/blocks/products/products.js similarity index 100% rename from solutions/blocks/products/products.js rename to _src/blocks/products/products.js diff --git a/solutions/blocks/quote-carousel/quote-carousel.css b/_src/blocks/quote-carousel/quote-carousel.css similarity index 100% rename from solutions/blocks/quote-carousel/quote-carousel.css rename to _src/blocks/quote-carousel/quote-carousel.css diff --git a/solutions/blocks/quote-carousel/quote-carousel.js b/_src/blocks/quote-carousel/quote-carousel.js similarity index 100% rename from solutions/blocks/quote-carousel/quote-carousel.js rename to _src/blocks/quote-carousel/quote-carousel.js diff --git a/solutions/blocks/quote/quote.css b/_src/blocks/quote/quote.css similarity index 100% rename from solutions/blocks/quote/quote.css rename to _src/blocks/quote/quote.css diff --git a/solutions/blocks/quote/quote.js b/_src/blocks/quote/quote.js similarity index 100% rename from solutions/blocks/quote/quote.js rename to _src/blocks/quote/quote.js diff --git a/solutions/blocks/round-card/round-card.css b/_src/blocks/round-card/round-card.css similarity index 100% rename from solutions/blocks/round-card/round-card.css rename to _src/blocks/round-card/round-card.css diff --git a/solutions/blocks/round-card/round-card.js b/_src/blocks/round-card/round-card.js similarity index 100% rename from solutions/blocks/round-card/round-card.js rename to _src/blocks/round-card/round-card.js diff --git a/solutions/blocks/sticky-navigation/sticky-navigation.css b/_src/blocks/sticky-navigation/sticky-navigation.css similarity index 100% rename from solutions/blocks/sticky-navigation/sticky-navigation.css rename to _src/blocks/sticky-navigation/sticky-navigation.css diff --git a/solutions/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js similarity index 100% rename from solutions/blocks/sticky-navigation/sticky-navigation.js rename to _src/blocks/sticky-navigation/sticky-navigation.js diff --git a/solutions/blocks/tabs/tabs.css b/_src/blocks/tabs/tabs.css similarity index 100% rename from solutions/blocks/tabs/tabs.css rename to _src/blocks/tabs/tabs.css diff --git a/solutions/blocks/tabs/tabs.js b/_src/blocks/tabs/tabs.js similarity index 100% rename from solutions/blocks/tabs/tabs.js rename to _src/blocks/tabs/tabs.js diff --git a/solutions/fonts/roboto-300.woff2 b/_src/fonts/roboto-300.woff2 similarity index 100% rename from solutions/fonts/roboto-300.woff2 rename to _src/fonts/roboto-300.woff2 diff --git a/solutions/fonts/roboto-400.woff2 b/_src/fonts/roboto-400.woff2 similarity index 100% rename from solutions/fonts/roboto-400.woff2 rename to _src/fonts/roboto-400.woff2 diff --git a/solutions/fonts/roboto-500.woff2 b/_src/fonts/roboto-500.woff2 similarity index 100% rename from solutions/fonts/roboto-500.woff2 rename to _src/fonts/roboto-500.woff2 diff --git a/solutions/icons/arrow-right.svg b/_src/icons/arrow-right.svg similarity index 100% rename from solutions/icons/arrow-right.svg rename to _src/icons/arrow-right.svg diff --git a/solutions/icons/blue-circle.svg b/_src/icons/blue-circle.svg similarity index 100% rename from solutions/icons/blue-circle.svg rename to _src/icons/blue-circle.svg diff --git a/solutions/icons/checkmark-solid-circle-white.svg b/_src/icons/checkmark-solid-circle-white.svg similarity index 100% rename from solutions/icons/checkmark-solid-circle-white.svg rename to _src/icons/checkmark-solid-circle-white.svg diff --git a/solutions/icons/checkmark_solid-circle.svg b/_src/icons/checkmark_solid-circle.svg similarity index 100% rename from solutions/icons/checkmark_solid-circle.svg rename to _src/icons/checkmark_solid-circle.svg diff --git a/solutions/icons/dark-blue-quote.svg b/_src/icons/dark-blue-quote.svg similarity index 100% rename from solutions/icons/dark-blue-quote.svg rename to _src/icons/dark-blue-quote.svg diff --git a/solutions/icons/search.svg b/_src/icons/search.svg similarity index 100% rename from solutions/icons/search.svg rename to _src/icons/search.svg diff --git a/solutions/icons/tabs_arrow.svg b/_src/icons/tabs_arrow.svg similarity index 100% rename from solutions/icons/tabs_arrow.svg rename to _src/icons/tabs_arrow.svg diff --git a/solutions/icons/user-guide.svg b/_src/icons/user-guide.svg similarity index 100% rename from solutions/icons/user-guide.svg rename to _src/icons/user-guide.svg diff --git a/solutions/images/b-red-mask.png b/_src/images/b-red-mask.png similarity index 100% rename from solutions/images/b-red-mask.png rename to _src/images/b-red-mask.png diff --git a/solutions/plugins/rum-conversion/.eslintignore b/_src/plugins/rum-conversion/.eslintignore similarity index 100% rename from solutions/plugins/rum-conversion/.eslintignore rename to _src/plugins/rum-conversion/.eslintignore diff --git a/solutions/plugins/rum-conversion/.eslintrc.js b/_src/plugins/rum-conversion/.eslintrc.js similarity index 100% rename from solutions/plugins/rum-conversion/.eslintrc.js rename to _src/plugins/rum-conversion/.eslintrc.js diff --git a/solutions/plugins/rum-conversion/.gitignore b/_src/plugins/rum-conversion/.gitignore similarity index 100% rename from solutions/plugins/rum-conversion/.gitignore rename to _src/plugins/rum-conversion/.gitignore diff --git a/solutions/plugins/rum-conversion/.npmignore b/_src/plugins/rum-conversion/.npmignore similarity index 100% rename from solutions/plugins/rum-conversion/.npmignore rename to _src/plugins/rum-conversion/.npmignore diff --git a/solutions/plugins/rum-conversion/.stylelintrc.json b/_src/plugins/rum-conversion/.stylelintrc.json similarity index 100% rename from solutions/plugins/rum-conversion/.stylelintrc.json rename to _src/plugins/rum-conversion/.stylelintrc.json diff --git a/solutions/plugins/rum-conversion/LICENSE b/_src/plugins/rum-conversion/LICENSE similarity index 100% rename from solutions/plugins/rum-conversion/LICENSE rename to _src/plugins/rum-conversion/LICENSE diff --git a/solutions/plugins/rum-conversion/README.md b/_src/plugins/rum-conversion/README.md similarity index 100% rename from solutions/plugins/rum-conversion/README.md rename to _src/plugins/rum-conversion/README.md diff --git a/solutions/plugins/rum-conversion/package-lock.json b/_src/plugins/rum-conversion/package-lock.json similarity index 100% rename from solutions/plugins/rum-conversion/package-lock.json rename to _src/plugins/rum-conversion/package-lock.json diff --git a/solutions/plugins/rum-conversion/package.json b/_src/plugins/rum-conversion/package.json similarity index 100% rename from solutions/plugins/rum-conversion/package.json rename to _src/plugins/rum-conversion/package.json diff --git a/solutions/plugins/rum-conversion/src/index.js b/_src/plugins/rum-conversion/src/index.js similarity index 100% rename from solutions/plugins/rum-conversion/src/index.js rename to _src/plugins/rum-conversion/src/index.js diff --git a/solutions/scripts/breadcrumbs.js b/_src/scripts/breadcrumbs.js similarity index 100% rename from solutions/scripts/breadcrumbs.js rename to _src/scripts/breadcrumbs.js diff --git a/solutions/scripts/delayed.js b/_src/scripts/delayed.js similarity index 100% rename from solutions/scripts/delayed.js rename to _src/scripts/delayed.js diff --git a/solutions/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js similarity index 99% rename from solutions/scripts/lib-franklin.js rename to _src/scripts/lib-franklin.js index 689861226..e99f0ab86 100644 --- a/solutions/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -299,7 +299,7 @@ export async function fetchPlaceholders(prefix = 'default') { const loaded = window.placeholders[`${prefix}-loaded`]; if (!loaded) { window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - fetch(`/${window.location.pathname.split('/')[1]}${prefix === 'default' ? '' : prefix}/solutions/placeholders.json`) + fetch(`/${window.location.pathname.split('/')[1]}${prefix === 'default' ? '' : prefix}/_src/placeholders.json`) .then((resp) => { if (resp.ok) { return resp.json(); @@ -908,7 +908,7 @@ export function setup() { window.hlx.plugins = new PluginsRegistry(); window.hlx.templates = new TemplatesRegistry(); - const scriptEl = document.querySelector('script[src$="/solutions/scripts/scripts.js"]'); + const scriptEl = document.querySelector('script[src$="/_src/scripts/scripts.js"]'); if (scriptEl) { try { [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split('/scripts/scripts.js'); diff --git a/solutions/scripts/lib-identity-exposed-onsubmit.js b/_src/scripts/lib-identity-exposed-onsubmit.js similarity index 100% rename from solutions/scripts/lib-identity-exposed-onsubmit.js rename to _src/scripts/lib-identity-exposed-onsubmit.js diff --git a/solutions/scripts/scripts.js b/_src/scripts/scripts.js similarity index 100% rename from solutions/scripts/scripts.js rename to _src/scripts/scripts.js diff --git a/solutions/scripts/utils/utils.js b/_src/scripts/utils/utils.js similarity index 98% rename from solutions/scripts/utils/utils.js rename to _src/scripts/utils/utils.js index 0737ad6ea..d70e68b1b 100644 --- a/solutions/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -208,7 +208,7 @@ export async function fetchIndex(indexFile, sheet, pageSize = 500) { const handleIndex = async (offset) => { const sheetParam = sheet ? `&sheet=${sheet}` : ''; - const resp = await fetch(`/${window.location.pathname.split('/')[1]}/solutions/${indexFile}.json?limit=${pageSize}&offset=${offset}${sheetParam}`); + const resp = await fetch(`/${window.location.pathname.split('/')[1]}/_src/${indexFile}.json?limit=${pageSize}&offset=${offset}${sheetParam}`); const json = await resp.json(); const newIndex = { diff --git a/solutions/styles/lazy-styles.css b/_src/styles/lazy-styles.css similarity index 100% rename from solutions/styles/lazy-styles.css rename to _src/styles/lazy-styles.css diff --git a/solutions/styles/styles.css b/_src/styles/styles.css similarity index 99% rename from solutions/styles/styles.css rename to _src/styles/styles.css index a7aca69a7..514a2d334 100644 --- a/solutions/styles/styles.css +++ b/_src/styles/styles.css @@ -759,7 +759,7 @@ a.info-button.modal { } a.info-button.modal::before { - content: url('/solutions/icons/user-guide.svg'); + content: url('/_src/icons/user-guide.svg'); display: flex; } @@ -779,8 +779,8 @@ a.button::after, input[type="submit"]::after, main .section.link-right a::after width: 24px; height: 24px; /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask:url('/solutions/icons/arrow-right.svg'); - mask: url('/solutions/icons/arrow-right.svg'); + -webkit-mask:url('/_src/icons/arrow-right.svg'); + mask: url('/_src/icons/arrow-right.svg'); background-color: var(--button-link-color); display: inline-block; transition: all .2s cubic-bezier(.4,0,.2,1); @@ -1179,7 +1179,7 @@ main .section.blue a.button.modal::after { @media (min-width: 992px) { main .section.circle { - background-image: url("/solutions/icons/blue-circle.svg"); + background-image: url("/_src/icons/blue-circle.svg"); background-position: top 0 right 60%; background-repeat: no-repeat; background-size: auto 100%; diff --git a/solutions/styles/thank-you.css b/_src/styles/thank-you.css similarity index 100% rename from solutions/styles/thank-you.css rename to _src/styles/thank-you.css diff --git a/head.html b/head.html index ab62f2d13..f0fd2c435 100644 --- a/head.html +++ b/head.html @@ -1,6 +1,6 @@ - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/helix-query.yaml b/helix-query.yaml index 3ffb31cd9..f59a3124c 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -2,9 +2,9 @@ version: 1 indices: default: include: - - /solutions/** + - /_src/** exclude: - - /solutions/fragments/** + - /_src/fragments/** target: /query-index.json properties: title: From 0e0937357b7244299c3c286dd001a1a7e237378f Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Wed, 15 Nov 2023 11:28:43 +0200 Subject: [PATCH 0050/1296] Fix route for placeholders --- _src/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index e99f0ab86..d29296e3b 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -299,7 +299,7 @@ export async function fetchPlaceholders(prefix = 'default') { const loaded = window.placeholders[`${prefix}-loaded`]; if (!loaded) { window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - fetch(`/${window.location.pathname.split('/')[1]}${prefix === 'default' ? '' : prefix}/_src/placeholders.json`) + fetch(`/${window.location.pathname.split('/')[1]}${prefix === 'default' ? '' : prefix}/solutions/placeholders.json`) .then((resp) => { if (resp.ok) { return resp.json(); From d8b984944119c135235727f090f91a400fb4b837 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Wed, 15 Nov 2023 11:41:09 +0200 Subject: [PATCH 0051/1296] Fix query idex --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index d70e68b1b..359b5de86 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -208,7 +208,7 @@ export async function fetchIndex(indexFile, sheet, pageSize = 500) { const handleIndex = async (offset) => { const sheetParam = sheet ? `&sheet=${sheet}` : ''; - const resp = await fetch(`/${window.location.pathname.split('/')[1]}/_src/${indexFile}.json?limit=${pageSize}&offset=${offset}${sheetParam}`); + const resp = await fetch(`/${window.location.pathname.split('/')[1]}/${indexFile}.json?limit=${pageSize}&offset=${offset}${sheetParam}`); const json = await resp.json(); const newIndex = { From 46d3610dad08972024bbfbd0ec17f8ff5090caea Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 15 Nov 2023 14:49:25 +0200 Subject: [PATCH 0052/1296] Fixed icons path url for sharepoint --- _src/scripts/lib-franklin.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index d29296e3b..ebe139de3 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -202,7 +202,8 @@ export async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - const response = await fetch(`/${window.location.pathname.split('/')[1]}${window.hlx.codeBasePath}/icons/${iconName}.svg`); + const dynamicIconsSharepointPath = `/${window.location.pathname.split('/')[1]}/solutions/icons/`; + const response = await fetch(`${dynamicIconsSharepointPath}${iconName}.svg`); if (!response.ok) { ICONS_CACHE[iconName] = false; return; From 8b435788624ab5e2e19384ad064016e18cf5da19 Mon Sep 17 00:00:00 2001 From: Manuel Enache Date: Thu, 23 Nov 2023 17:21:10 +0200 Subject: [PATCH 0053/1296] Fix environment Fixes environment variable for bitdefender.com --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 0eeb979e7..fa1739c97 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -172,7 +172,7 @@ export function getEnvironment(hostname, country) { if (hostname.includes('hlx.page') || hostname.includes('hlx.live')) { return 'stage'; } - if (hostname.includes(`.${country}`)) { + if (hostname.includes(`www.bitdefender`)) { return 'prod'; } return 'dev'; From 5092d6d5fa2661aff4cc13322008a73b275b867d Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 24 Nov 2023 14:45:31 +0200 Subject: [PATCH 0054/1296] fixed hreflangs --- _src/scripts/scripts.js | 78 +++++++++++++++++++++++++---------------- 1 file changed, 47 insertions(+), 31 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index fa1739c97..e73cbe574 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -28,24 +28,26 @@ export const DEFAULT_COUNTRY = getDefaultLanguage(); export const METADATA_ANAYTICS_TAGS = 'analytics-tags'; -const hreflangMap = { - 'en-ro': 'https://www.bitdefender.ro', - de: 'https://www.bitdefender.de', - sv: 'https://www.bitdefender.se', - pt: 'https://www.bitdefender.pt', - 'en-sv': 'https://www.bitdefender.se', - 'pt-BR': 'https://www.bitdefender.com.br', - en: 'https://www.bitdefender.com', - it: 'https://www.bitdefender.it', - fr: 'https://www.bitdefender.fr', - 'nl-BE': 'https://www.bitdefender.be', - es: 'https://www.bitdefender.es', - 'en-AU': 'https://www.bitdefender.com.au', - ro: 'https://www.bitdefender.ro', - hk: 'https://www.bitdefender.com/zh-hk', - tw: 'https://www.bitdefender.com/zh-tw', - 'x-default': 'https://www.bitdefender.com', -}; +const hreflangMap = new Map([ + ['en-ro', { baseUrl: 'https://www.bitdefender.ro', pageType: 'html' }], + ['de', { baseUrl: 'https://www.bitdefender.de', pageType: 'html' }], + ['sv', { baseUrl: 'https://www.bitdefender.se', pageType: 'html' }], + ['pt', { baseUrl: 'https://www.bitdefender.pt', pageType: 'html' }], + ['en-sv', { baseUrl: 'https://www.bitdefender.se', pageType: 'html' }], + ['pt-BR', { baseUrl: 'https://www.bitdefender.com.br', pageType: 'html' }], + ['en', { baseUrl: 'https://www.bitdefender.com', pageType: 'html' }], + ['it', { baseUrl: 'https://www.bitdefender.it', pageType: 'html' }], + ['fr', { baseUrl: 'https://www.bitdefender.fr', pageType: 'html' }], + ['nl-BE', { baseUrl: 'https://www.bitdefender.br', pageType: 'html' }], + ['es', { baseUrl: 'https://www.bitdefender.es', pageType: 'html' }], + ['en-AU', { baseUrl: 'https://www.bitdefender.com.au', pageType: '', hasIndexPages: true }], + ['ro', { baseUrl: 'https://www.bitdefender.ro', pageType: 'html' }], + ['nl', { baseUrl: 'https://www.bitdefender.nl', pageType: 'html' }], + ['en-GB', { baseUrl: 'https://www.bitdefender.co.uk', pageType: 'html' }], + ['zh-hk', { baseUrl: 'https://www.bitdefender.com/zh-hk', pageType: '', hasIndexPages: true }], + ['zh-tw', { baseUrl: 'https://www.bitdefender.com/zh-tw', pageType: '', hasIndexPages: true }], + ['x-default', { baseUrl: 'https://www.bitdefender.com', pageType: 'html' }], +]); window.hlx.plugins.add('rum-conversion', { load: 'lazy', @@ -483,6 +485,32 @@ async function loadEager(doc) { } } +// todo remove export after having a clear path for the overall unit testing strategy of the all page +export function generateHrefLang() { + hreflangMap.forEach(({ baseUrl, pageType, hasIndexPages }, key) => { + const link = document.createElement('link'); + link.setAttribute('rel', 'alternate'); + link.setAttribute('hreflang', key); + + const foundLanguage = localisationList.find((item) => baseUrl.indexOf(`/${item}/`) !== -1 || window.location.pathname.indexOf(`/${item}/`) !== -1); + const isHomePage = window.location.pathname === `/${foundLanguage}/`; + + let suffix = `${!isHomePage && pageType ? `.${pageType}` : ''}`; + const lastCharFromHref = window.location.pathname.slice(-1); + const isCurrentIndexPage = lastCharFromHref === '/'; + + // let href = `${baseUrl}${window.location.pathname.replace(/\/us\/en/, '')}${suffix}`; + let href = `${baseUrl}${window.location.pathname.replace(/\/us\/en/, '')}`; + href = isCurrentIndexPage && !hasIndexPages && !isHomePage ? href.slice(0, -1) : href; + href = `${href}${suffix}`; + + href = href.replace(`/${foundLanguage}`, ''); + + link.setAttribute('href', href); + document.head.appendChild(link); + }); +} + /** * Loads everything that doesn't need to be delayed. * @param {Element} doc The container element @@ -506,19 +534,7 @@ async function loadLazy(doc) { sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); sampleRUM.observe(main.querySelectorAll('picture > img')); - Object.entries(hreflangMap).forEach(([key, value]) => { - const link = document.createElement('link'); - link.setAttribute('rel', 'alternate'); - link.setAttribute('hreflang', key); - - let href = `${value}${window.location.pathname.replace(/\/us\/en/, '')}`; - const foundLanguage = localisationList.find((item) => value.indexOf(`/${item}/`) !== -1 || window.location.pathname.indexOf(`/${item}/`) !== -1); - - href = href.replace(`/${foundLanguage}`, ''); - - link.setAttribute('href', href); - document.head.appendChild(link); - }); + generateHrefLang(); } /** From 24ac33b9d4acadef8f9c580f34c6051e1171514c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 24 Nov 2023 14:56:28 +0200 Subject: [PATCH 0055/1296] fixed hreflangs --- _src/scripts/scripts.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index e73cbe574..d6fca381f 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -499,7 +499,6 @@ export function generateHrefLang() { const lastCharFromHref = window.location.pathname.slice(-1); const isCurrentIndexPage = lastCharFromHref === '/'; - // let href = `${baseUrl}${window.location.pathname.replace(/\/us\/en/, '')}${suffix}`; let href = `${baseUrl}${window.location.pathname.replace(/\/us\/en/, '')}`; href = isCurrentIndexPage && !hasIndexPages && !isHomePage ? href.slice(0, -1) : href; href = `${href}${suffix}`; From 77f5ca118851e4464788b75be7b1adc804754dd8 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 27 Nov 2023 11:43:45 +0200 Subject: [PATCH 0056/1296] hotfix-hreflang --- _src/scripts/scripts.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d6fca381f..5c2b800f4 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -487,7 +487,7 @@ async function loadEager(doc) { // todo remove export after having a clear path for the overall unit testing strategy of the all page export function generateHrefLang() { - hreflangMap.forEach(({ baseUrl, pageType, hasIndexPages }, key) => { + hreflangMap.forEach(({ baseUrl, pageType }, key) => { const link = document.createElement('link'); link.setAttribute('rel', 'alternate'); link.setAttribute('hreflang', key); @@ -495,12 +495,11 @@ export function generateHrefLang() { const foundLanguage = localisationList.find((item) => baseUrl.indexOf(`/${item}/`) !== -1 || window.location.pathname.indexOf(`/${item}/`) !== -1); const isHomePage = window.location.pathname === `/${foundLanguage}/`; - let suffix = `${!isHomePage && pageType ? `.${pageType}` : ''}`; const lastCharFromHref = window.location.pathname.slice(-1); const isCurrentIndexPage = lastCharFromHref === '/'; + const suffix = `${!isHomePage && pageType && !isCurrentIndexPage ? `.${pageType}` : ''}`; let href = `${baseUrl}${window.location.pathname.replace(/\/us\/en/, '')}`; - href = isCurrentIndexPage && !hasIndexPages && !isHomePage ? href.slice(0, -1) : href; href = `${href}${suffix}`; href = href.replace(`/${foundLanguage}`, ''); From a7aa907d20660897a91f679fb37c1c086aa8153c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 27 Nov 2023 11:45:25 +0200 Subject: [PATCH 0057/1296] hotfix-hreflang --- .github/pull_request_template.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c0e61f860..5dc84d4e3 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -3,5 +3,5 @@ Please always provide the [GitHub issue(s)](../issues) your PR is for, as well a Fix # Test URLs: -- Before: https://main--www-websites--bitdefender.hlx.page/zh-hk/_src/ -- After: https://--www-websites--bitdefender.hlx.page/zh-hk/_src/ +- Before: https://main--www-websites--bitdefender.hlx.page/zh-hk/ +- After: https://--www-websites--bitdefender.hlx.page/zh-hk/ From e5ad5b4da974896f17860f8737f0d08b6b1757b3 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Wed, 6 Dec 2023 12:49:35 +0200 Subject: [PATCH 0058/1296] Adds lib-franklin-api. It will be used to render franklin content outside franklin. --- _src/scripts/lib-franklin-api.js | 151 +++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 _src/scripts/lib-franklin-api.js diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js new file mode 100644 index 000000000..cf9456a84 --- /dev/null +++ b/_src/scripts/lib-franklin-api.js @@ -0,0 +1,151 @@ +let dataApiDomain = 'https://www.bitdefender.com/pages'; +if (import.meta && import.meta.url) { + const urlObj = new URL(import.meta.url); + dataApiDomain = urlObj.origin; +} + +/** + * @param {HTMLDivElement} plainHTMLContainer + * appends the dataApiDomain to the relative links + */ +const updateLinkSources = (plainHTMLContainer) => { + const allSources = plainHTMLContainer.querySelectorAll('source'); + allSources.forEach((source) => { + if (source.srcset.startsWith('./') || source.srcset.startsWith('/')) { + const srcSet = source.srcset.startsWith('.') ? source.srcset.slice(1) : source.srcset; + source.srcset = `${dataApiDomain}${srcSet}`; + } + }); + + const allImages = plainHTMLContainer.querySelectorAll('img'); + allImages.forEach((image) => { + if (image.src.startsWith('./') || image.src.startsWith('/')) { + const imgSrc = image.src.startsWith('.') ? image.src.slice(1) : image.src; + image.src = `${dataApiDomain}${imgSrc}`; + } + }); +}; + +/** + * @param {string} offer + * @returns {Promise} + * load the block HTML + */ +const loadBlock = async (offer) => { + const plainHTMLContainer = document.createElement('div'); + + // make a call to get all the plain HTML + const plainHTMLResponse = await fetch(offer); + const plainHTML = await plainHTMLResponse.text(); + + // fill the div node with HTML + plainHTMLContainer.innerHTML = plainHTML; + updateLinkSources(plainHTMLContainer); + + return plainHTMLContainer; +}; + +/** + * Loads a CSS file. + * @param {string} href The path to the CSS file + * @param {Element} shadowDom + */ +const loadCSS = async (href, shadowDom) => { + if (!shadowDom.querySelector(`head > link[href="${href}"]`)) { + const link = document.createElement('link'); + link.setAttribute('rel', 'stylesheet'); + link.setAttribute('href', href); + + shadowDom.querySelector('head').appendChild(link); + } +}; + +/** + * + * @param {string} block + * @param {Element} shadowDom + * Franklin decorator logic + */ +const decorateBlock = async (block, shadowDom) => { + const logicModule = await import(/* webpackIgnore: true */`${dataApiDomain}/_src-lp/blocks/${block}/${block}.js`); + const blockElement = shadowDom.querySelector(`.${block}`); + logicModule.default(blockElement); + + blockElement.classList.add('block'); + blockElement.dataset.blockName = block; + blockElement.dataset.blockStatus = 'initialized'; + const blockWrapper = blockElement.parentElement; + blockWrapper.classList.add(`${block}-wrapper`); + const section = blockWrapper.parentElement; + if (section) section.classList.add(`${block}-container`); +}; + +/** + * + * @param {string} selector -> css selector + * validates the selector + */ +function isValidSelector(selector) { + if (typeof selector !== 'string' || !selector.trim()) { + return false; + } + + try { + const element = document.querySelector(selector); + return !!element; + } catch (e) { + // Invalid selector syntax + return false; + } +} + +/** + * + * @param {string} offer -> url to the plain html + * @param {string} block -> the requested block (needed for css and js) + * @param {string} selector -> css selector + * adds the requested Franklin component in the container specified through its id + */ +export default async function addFranklinComponentToContainer(offer, block, selector) { + if (!isValidSelector(selector)) { + throw new Error('Invalid selector provided'); + } + const container = document.querySelector(selector); + // create a shadow DOM in the container + const shadowDom = container.attachShadow({ mode: 'open' }); + // load the Franklin block plain HTML + const plainHTMLContainer = await loadBlock(offer); + // add head section to the shadowDom and append the received HTML + shadowDom.appendChild(document.createElement('head')); + const shadowDomBody = document.createElement('body'); + shadowDomBody.appendChild(plainHTMLContainer); + shadowDom.appendChild(shadowDomBody); + // load the block CSS file + loadCSS(`${dataApiDomain}/_src-lp/blocks/${block}/${block}.css`, shadowDom, plainHTMLContainer); + // run the Franklin decorator logic for this block + await decorateBlock(block, shadowDom); +} +/** + * + * @param {string} offer -> url to the plain html + * @param {string} block -> the requested block (needed for css and js) + * @return {Promise} -> get a div element containing the Franklin component + */ +export async function getFranklinComponent(offer, block) { + const container = document.createElement('div'); + // create a shadow DOM in the container + const shadowDom = container.attachShadow({ mode: 'open' }); + // load the Franklin block plain HTML + const plainHTMLContainer = await loadBlock(offer); + // add head section to the shadowDom and append the received HTML + shadowDom.appendChild(document.createElement('head')); + const shadowDomBody = document.createElement('body'); + shadowDomBody.appendChild(plainHTMLContainer); + shadowDom.appendChild(shadowDomBody); + + // load the block CSS file + loadCSS(`${dataApiDomain}/_src-lp/blocks/${block}/${block}.css`, shadowDom, plainHTMLContainer); + // run the Franklin decorator logic for this block + await decorateBlock(block, shadowDom); + return container; +} From 6dfd0cfb1fdfd79cc51e2fca55952f19bd39ccca Mon Sep 17 00:00:00 2001 From: Manuel Enache Date: Fri, 8 Dec 2023 17:14:24 +0200 Subject: [PATCH 0059/1296] Create CODEOWNERS --- .github/CODEOWNERS | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .github/CODEOWNERS diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 000000000..3f4db9dbb --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,5 @@ +# These owners will be the default owners for everything in +# the repo. Unless a later match takes precedence, +# @global-owner1 and @global-owner2 will be requested for +# review when someone opens a pull request. +* @enake From 9220cb3510e9806cc93e6cf2818175d49c24f687 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Tue, 12 Dec 2023 17:26:46 +0200 Subject: [PATCH 0060/1296] DEX-16157 | create lib-franklin-api --- _src/scripts/lib-franklin-api.js | 164 ++++++++++--------------------- 1 file changed, 50 insertions(+), 114 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index cf9456a84..c3d88b26a 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -1,151 +1,87 @@ -let dataApiDomain = 'https://www.bitdefender.com/pages'; -if (import.meta && import.meta.url) { - const urlObj = new URL(import.meta.url); - dataApiDomain = urlObj.origin; +/** + * @param {HTMLDivElement} shadoRoot + */ +const parseMetadata = (shadowRoot) => { + const metadata = {}; + const sectionMetadata = shadowRoot.querySelector(".section-metadata"); + + for (const child of sectionMetadata.children) { + const [keyChild, valueChild] = child.children; + metadata[keyChild.textContent] = valueChild.textContent; + } + + sectionMetadata.remove(); + + return metadata; } /** - * @param {HTMLDivElement} plainHTMLContainer - * appends the dataApiDomain to the relative links + * @param {HTMLDivElement} shadoRoot + * @param {string} origin - prepends the origin to the relative links */ -const updateLinkSources = (plainHTMLContainer) => { - const allSources = plainHTMLContainer.querySelectorAll('source'); +const updateLinkSources = (shadoRoot, origin) => { + const allSources = shadoRoot.querySelectorAll('source'); allSources.forEach((source) => { if (source.srcset.startsWith('./') || source.srcset.startsWith('/')) { const srcSet = source.srcset.startsWith('.') ? source.srcset.slice(1) : source.srcset; - source.srcset = `${dataApiDomain}${srcSet}`; + source.srcset = `${origin}${srcSet}`; } }); - const allImages = plainHTMLContainer.querySelectorAll('img'); + const allImages = shadoRoot.querySelectorAll('img'); allImages.forEach((image) => { if (image.src.startsWith('./') || image.src.startsWith('/')) { const imgSrc = image.src.startsWith('.') ? image.src.slice(1) : image.src; - image.src = `${dataApiDomain}${imgSrc}`; + image.src = `${origin}${imgSrc}`; } }); }; /** + * @param {ShadowRoot} shadowRoot * @param {string} offer - * @returns {Promise} + * @returns {Promise} * load the block HTML */ -const loadBlock = async (offer) => { - const plainHTMLContainer = document.createElement('div'); - +const loadHTML = async (shadowRoot, offer) => { // make a call to get all the plain HTML - const plainHTMLResponse = await fetch(offer); - const plainHTML = await plainHTMLResponse.text(); + shadowRoot.innerHTML = await fetch(offer).then(r => r.text()) - // fill the div node with HTML - plainHTMLContainer.innerHTML = plainHTML; - updateLinkSources(plainHTMLContainer); - - return plainHTMLContainer; + updateLinkSources(shadowRoot); }; /** - * Loads a CSS file. - * @param {string} href The path to the CSS file - * @param {Element} shadowDom + * @param {ShadowRoot} shadowRoot + * @param {string} offer + * @returns {Promise} + * load the block HTML */ -const loadCSS = async (href, shadowDom) => { - if (!shadowDom.querySelector(`head > link[href="${href}"]`)) { - const link = document.createElement('link'); - link.setAttribute('rel', 'stylesheet'); - link.setAttribute('href', href); +const loadCSS = async (shadowRoot, offer) => { + const style = await import(offer, { + assert: { type: 'css' } + }); - shadowDom.querySelector('head').appendChild(link); - } + shadowRoot.adoptedStyleSheets = [style.default]; }; /** - * - * @param {string} block - * @param {Element} shadowDom - * Franklin decorator logic + * @param {ShadowRoot} shadowRoot + * @param {string} offer + * @returns {Promise} + * load the block HTML */ -const decorateBlock = async (block, shadowDom) => { - const logicModule = await import(/* webpackIgnore: true */`${dataApiDomain}/_src-lp/blocks/${block}/${block}.js`); - const blockElement = shadowDom.querySelector(`.${block}`); - logicModule.default(blockElement); - - blockElement.classList.add('block'); - blockElement.dataset.blockName = block; - blockElement.dataset.blockStatus = 'initialized'; - const blockWrapper = blockElement.parentElement; - blockWrapper.classList.add(`${block}-wrapper`); - const section = blockWrapper.parentElement; - if (section) section.classList.add(`${block}-container`); +const loadJS = async (shadowRoot, offer) => { + const logicModule = await import(offer); + logicModule.default(shadowRoot, parseMetadata(shadowRoot)); }; -/** - * - * @param {string} selector -> css selector - * validates the selector - */ -function isValidSelector(selector) { - if (typeof selector !== 'string' || !selector.trim()) { - return false; - } - - try { - const element = document.querySelector(selector); - return !!element; - } catch (e) { - // Invalid selector syntax - return false; - } -} - -/** - * - * @param {string} offer -> url to the plain html - * @param {string} block -> the requested block (needed for css and js) - * @param {string} selector -> css selector - * adds the requested Franklin component in the container specified through its id - */ -export default async function addFranklinComponentToContainer(offer, block, selector) { - if (!isValidSelector(selector)) { - throw new Error('Invalid selector provided'); - } - const container = document.querySelector(selector); - // create a shadow DOM in the container - const shadowDom = container.attachShadow({ mode: 'open' }); - // load the Franklin block plain HTML - const plainHTMLContainer = await loadBlock(offer); - // add head section to the shadowDom and append the received HTML - shadowDom.appendChild(document.createElement('head')); - const shadowDomBody = document.createElement('body'); - shadowDomBody.appendChild(plainHTMLContainer); - shadowDom.appendChild(shadowDomBody); - // load the block CSS file - loadCSS(`${dataApiDomain}/_src-lp/blocks/${block}/${block}.css`, shadowDom, plainHTMLContainer); - // run the Franklin decorator logic for this block - await decorateBlock(block, shadowDom); -} -/** - * - * @param {string} offer -> url to the plain html - * @param {string} block -> the requested block (needed for css and js) - * @return {Promise} -> get a div element containing the Franklin component - */ -export async function getFranklinComponent(offer, block) { - const container = document.createElement('div'); - // create a shadow DOM in the container - const shadowDom = container.attachShadow({ mode: 'open' }); - // load the Franklin block plain HTML - const plainHTMLContainer = await loadBlock(offer); - // add head section to the shadowDom and append the received HTML - shadowDom.appendChild(document.createElement('head')); - const shadowDomBody = document.createElement('body'); - shadowDomBody.appendChild(plainHTMLContainer); - shadowDom.appendChild(shadowDomBody); +export async function loadComponent(offer, block, selector) { + const origin = new URL(offer).origin; + const container = selector ? document.querySelector(selector) : document.createElement('div'); + const shadowRoot = container.attachShadow({ mode: 'open' }); - // load the block CSS file - loadCSS(`${dataApiDomain}/_src-lp/blocks/${block}/${block}.css`, shadowDom, plainHTMLContainer); - // run the Franklin decorator logic for this block - await decorateBlock(block, shadowDom); + loadHTML(shadowRoot, offer); + loadCSS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.css`); + loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`); return container; } From fdde91305a496472eded8e1df5ed3ed81c7e14bc Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Wed, 13 Dec 2023 11:04:37 +0200 Subject: [PATCH 0061/1296] Updates sidekick config to include AI Gen functionality --- tools/sidekick/config.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index 40dc34ee8..e6b790da0 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -8,6 +8,14 @@ "environments": [ "edit" ], "url": "/tools/sidekick/library.html", "includePaths": [ "**.docx**" ] + }, + { + "id": "generate-variations", + "title": "Generate Variations", + "url": "https://experience.adobe.com/aem/generate-variations", + "passConfig": true, + "environments": ["preview","live", "edit"], + "includePaths": ["**.docx**"] } ] } From a2be196d1ba2a186b0d14ed5f39387f1ab477a70 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 15:38:21 +0200 Subject: [PATCH 0062/1296] DEX-16157 | lib-frank-api options --- _src/scripts/lib-franklin-api.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index c3d88b26a..ed7e4fe3b 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -67,21 +67,22 @@ const loadCSS = async (shadowRoot, offer) => { /** * @param {ShadowRoot} shadowRoot * @param {string} offer + * @param {object} options * @returns {Promise} * load the block HTML */ const loadJS = async (shadowRoot, offer) => { const logicModule = await import(offer); - logicModule.default(shadowRoot, parseMetadata(shadowRoot)); + logicModule.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); }; -export async function loadComponent(offer, block, selector) { +export async function loadComponent(offer, block, options, selector) { const origin = new URL(offer).origin; const container = selector ? document.querySelector(selector) : document.createElement('div'); const shadowRoot = container.attachShadow({ mode: 'open' }); loadHTML(shadowRoot, offer); loadCSS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.css`); - loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`); + loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`, options); return container; } From e6ee2f2d146c939445fc9d5623028a2198d0f26d Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 13 Dec 2023 15:40:05 +0200 Subject: [PATCH 0063/1296] Add hero-aem block CSS and JavaScript files --- _src/blocks/hero-aem/hero-aem.css | 116 ++++++++++++++++++++++++++++++ _src/blocks/hero-aem/hero-aem.js | 104 +++++++++++++++++++++++++++ _src/scripts/utils/utils.js | 2 +- 3 files changed, 221 insertions(+), 1 deletion(-) create mode 100644 _src/blocks/hero-aem/hero-aem.css create mode 100644 _src/blocks/hero-aem/hero-aem.js diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css new file mode 100644 index 000000000..b358ddc1b --- /dev/null +++ b/_src/blocks/hero-aem/hero-aem.css @@ -0,0 +1,116 @@ +.hero-aem-container .hero-aem p:first-of-type { + margin: 0; + } + .hero-aem-container .hero-aem h1 { + color: #006DFF; + font-size: 40px; + font-weight: normal; + margin-top: 10px; + } + .hero-aem-container .hero-aem h2 { + margin-top: 0; + font-size: 24px; + font-weight: normal; + } + .hero-aem-container .hero-aem .hero-aem__mobile-image img { + border-top-left-radius: 20px; + border-top-right-radius: 20px; + width: 100%; + } + .hero-aem-container .hero-aem .hero-aem__desktop-image { + display: none; + } + .hero-aem-container .hero-aem .hero-aem__card-text { + padding: 27px; + background-color: #F7F7F7; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; + } + .hero-aem-container .hero-aem p.button-container { + text-align: center; + } + .hero-aem-container .hero-aem p.button-container .button.primary { + width: 100%; + } + .hero-aem-container .hero-aem .prod-oldprice { + font-size: 16px; + } + .hero-aem-container .hero-aem .prod-save { + color: #1C7928; + font-weight: bold; + } + .hero-aem-container .hero-aem .prod-newprice { + font-size: 40px; + } + .hero-aem-container .hero-aem .newprice-container { + line-height: 1; + } + .hero-aem-container .hero-aem .newprice-container sup { + position: relative; + top: -20px; + } + .hero-aem-container .aem-two-cards h1 { + font-size: 36px; + font-weight: bold; + } + .hero-aem-container .aem-two-cards h2 { + color: #006DFF; + font-size: 24px; + font-weight: normal; + margin: 0; + } + .hero-aem-container .aem-two-cards_card { + border-radius: 20px; + background-color: #F7F7F7; + padding: 1.5rem; + display: flex; + flex-direction: column; + height: 100%; + } + .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(span)) { + height: 100%; + } + + @media (width >= 768px) { + .hero-aem-container .hero-aem { + display: flex; + } + .hero-aem-container .hero-aem .hero-aem__mobile-image { + display: none; + } + .hero-aem-container .hero-aem .hero-aem__desktop-image { + display: block; + height: 100%; + } + .hero-aem-container .hero-aem .hero-aem__desktop-image img { + height: 100%; + object-fit: cover; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px; + } + .hero-aem-container .hero-aem .hero-aem__card-text { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: initial; + padding: 0; + } + .hero-aem-container .hero-aem .hero-aem__card__desktop { + padding: 4%; + background-color: #F7F7F7; + border-bottom-left-radius: 20px; + border-top-left-radius: 20px; + } + .hero-aem-container .hero-aem p.button-container { + text-align: left; + display: inline-block; + } + .hero-aem-container .hero-aem p.button-container .button.primary { + width: auto; + } + .hero-aem-container .aem-two-cards h1 { + font-size: 56px; + } + .hero-aem-container .aem-two-cards h1 + p { + font-size: 18px; + } + } \ No newline at end of file diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js new file mode 100644 index 000000000..5283ee7c0 --- /dev/null +++ b/_src/blocks/hero-aem/hero-aem.js @@ -0,0 +1,104 @@ +// const { loadPage } = await import('../../scripts/scripts.js'); +// import { updateProductsList } from '../../scripts/utils.js'; + +function productAliases(name) { + let newName = name.trim(); + if (newName === 'elite') { + newName = 'elite_1000'; + } else if (newName === 'bs') { + newName = 'bus-security'; + } + + return newName; +} + +function createPricesElement(onSelectorClass, conditionText, saveText) { + const priceElement = document.createElement('div'); + priceElement.classList.add('hero-aem__prices'); + priceElement.innerHTML = ` +
+
+ + ${saveText} +
+
+ + ${conditionText} +
+
`; + return priceElement; +} + +function createCardElementContainer(elements, mobileImage) { + const cardElementContainer = document.createElement('div'); + cardElementContainer.classList.add('hero-aem__card'); + + const cardElementText = document.createElement('div'); + cardElementText.classList.add('hero-aem__card-text'); + + elements.forEach((sibling) => { + if (sibling.contains(mobileImage)) { + cardElementContainer.appendChild(sibling); + } else { + cardElementText.appendChild(sibling); + } + }); + + cardElementContainer.appendChild(cardElementText); + + return cardElementContainer; +} + +function decorateBuyLink(buyLink, onSelectorClass) { + if (buyLink) { + buyLink.classList.add('button', 'primary', `buylink-${onSelectorClass}`); + buyLink.innerHTML = buyLink.innerHTML.replace(/0%/g, `10%`); + } +} + +export default function decorate(block, options) { + const metaData = block.closest('.section').dataset; + const { + product, conditionText, saveText, + } = metaData; + + const [richText, mainDesktopImage] = block.children; + + // Configuration for new elements + richText.classList.add('hero-aem__card__desktop', 'col-md-6'); + mainDesktopImage.classList.add('col-md-6'); + mainDesktopImage.children[0].classList.add('h-100'); + + const mobileImage = block.querySelector('.hero-aem > div > div picture'); + mobileImage.classList.add('hero-aem__mobile-image'); + + // Get all the siblings after h1 + const cardElements = Array.from(block.querySelectorAll('h1 ~ *')); + + // Put the siblings in a new div and append it to the block + const cardElementContainer = createCardElementContainer(cardElements, mobileImage); + + // Append the container after h1 + block.querySelector('h1').after(cardElementContainer); + + const desktopImage = block.querySelector('.hero-aem > div > div > picture'); + desktopImage.classList.add('hero-aem__desktop-image'); + + if (product) { + const [prodName, prodUsers, prodYears] = product.split('/'); + const onSelectorClass = `${productAliases(prodName)}-${prodUsers}${prodYears}`; + + // updateProductsList(product); + + const buyLink = block.querySelector('a[href*="#buylink"]'); + decorateBuyLink(buyLink, onSelectorClass); + + const pricesBox = createPricesElement(onSelectorClass, conditionText, saveText); + buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + } + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); +} diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 359b5de86..54b9597f4 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,4 +1,4 @@ -export const localisationList = ['zh-hk', 'zh-tw']; +export const localisationList = ['zh-hk', 'zh-tw', 'en-us']; export function getDefaultLanguage() { const currentPathUrl = window.location.pathname; const foundLanguage = localisationList.find((item) => currentPathUrl.indexOf(`/${item}/`) !== -1); From 2811fa31bf894c6eac96fb82654969c44422721e Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 15:50:42 +0200 Subject: [PATCH 0064/1296] DEX-16157 | add option to loadJS --- _src/scripts/lib-franklin-api.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index ed7e4fe3b..f0a289fe0 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -71,7 +71,7 @@ const loadCSS = async (shadowRoot, offer) => { * @returns {Promise} * load the block HTML */ -const loadJS = async (shadowRoot, offer) => { +const loadJS = async (shadowRoot, offer, options) => { const logicModule = await import(offer); logicModule.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); }; From d09c0666dc259121c7c4a65f23631f47c763b072 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 15:56:15 +0200 Subject: [PATCH 0065/1296] DEX-16157 | await html --- _src/scripts/lib-franklin-api.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index f0a289fe0..104b6d34e 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -81,8 +81,8 @@ export async function loadComponent(offer, block, options, selector) { const container = selector ? document.querySelector(selector) : document.createElement('div'); const shadowRoot = container.attachShadow({ mode: 'open' }); - loadHTML(shadowRoot, offer); + await loadHTML(shadowRoot, offer); loadCSS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.css`); - loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`, options); + await loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`, options); return container; } From f8b50412dde878bfbc3bbf4f45910efff7db15ab Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 16:15:27 +0200 Subject: [PATCH 0066/1296] DEX-16157 | Change metadata source --- _src/blocks/hero-aem/hero-aem.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 5283ee7c0..617646fcc 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -57,10 +57,9 @@ function decorateBuyLink(buyLink, onSelectorClass) { } export default function decorate(block, options) { - const metaData = block.closest('.section').dataset; const { product, conditionText, saveText, - } = metaData; + } = options.metadata; const [richText, mainDesktopImage] = block.children; From e33ed42f4b77be84184f100936ec9abb0c8413d4 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 16:17:01 +0200 Subject: [PATCH 0067/1296] DEX-16157 | Remove h-100 class --- _src/blocks/hero-aem/hero-aem.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 617646fcc..2c2831837 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -66,7 +66,6 @@ export default function decorate(block, options) { // Configuration for new elements richText.classList.add('hero-aem__card__desktop', 'col-md-6'); mainDesktopImage.classList.add('col-md-6'); - mainDesktopImage.children[0].classList.add('h-100'); const mobileImage = block.querySelector('.hero-aem > div > div picture'); mobileImage.classList.add('hero-aem__mobile-image'); From bfee35e352f3687b75ca007e870d2ab0e9b257ac Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 16:20:40 +0200 Subject: [PATCH 0068/1296] DEX-16157 | Update lib-franklin-api --- _src/scripts/lib-franklin-api.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 104b6d34e..a134b70fc 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -40,14 +40,15 @@ const updateLinkSources = (shadoRoot, origin) => { /** * @param {ShadowRoot} shadowRoot * @param {string} offer + * @param {string} origin * @returns {Promise} * load the block HTML */ -const loadHTML = async (shadowRoot, offer) => { +const loadHTML = async (shadowRoot, offer, origin) => { // make a call to get all the plain HTML shadowRoot.innerHTML = await fetch(offer).then(r => r.text()) - updateLinkSources(shadowRoot); + updateLinkSources(shadowRoot, origin); }; /** @@ -81,7 +82,7 @@ export async function loadComponent(offer, block, options, selector) { const container = selector ? document.querySelector(selector) : document.createElement('div'); const shadowRoot = container.attachShadow({ mode: 'open' }); - await loadHTML(shadowRoot, offer); + await loadHTML(shadowRoot, offer, origin); loadCSS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.css`); await loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`, options); return container; From c1fc87097c59c0beb03a34b94e44ded104bfb1c1 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 16:47:24 +0200 Subject: [PATCH 0069/1296] .1 --- _src/blocks/hero-aem/hero-aem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 2c2831837..f0a7ae30a 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -60,8 +60,8 @@ export default function decorate(block, options) { const { product, conditionText, saveText, } = options.metadata; - - const [richText, mainDesktopImage] = block.children; + const underShadow = block.children[0] + const [richText, mainDesktopImage] = underShadow.children; // Configuration for new elements richText.classList.add('hero-aem__card__desktop', 'col-md-6'); From 4a2c06a5807b4ec03bad4e0b4a45bba7fb9f1c71 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 16:49:11 +0200 Subject: [PATCH 0070/1296] .2 --- _src/blocks/hero-aem/hero-aem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index f0a7ae30a..1355efb53 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -60,7 +60,7 @@ export default function decorate(block, options) { const { product, conditionText, saveText, } = options.metadata; - const underShadow = block.children[0] + const underShadow = block.children[0].children[0]; const [richText, mainDesktopImage] = underShadow.children; // Configuration for new elements From 63f3292d45c746a7fcefe190ce8f3018ee4a554a Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 16:52:09 +0200 Subject: [PATCH 0071/1296] .3 --- _src/blocks/hero-aem/hero-aem.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 1355efb53..c4c8eb580 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -60,7 +60,10 @@ export default function decorate(block, options) { const { product, conditionText, saveText, } = options.metadata; - const underShadow = block.children[0].children[0]; + + const aemContainer = block.children[0]; + aemContainer.classList.add('hero-aem-container'); + const underShadow = aemContainer.children[0]; const [richText, mainDesktopImage] = underShadow.children; // Configuration for new elements From 6049d5874459682ab1d2df675b29a5b94fb35fea Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:22:50 +0200 Subject: [PATCH 0072/1296] .4 Try to add prices --- _src/blocks/hero-aem/hero-aem.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index c4c8eb580..3bb9c1823 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -12,17 +12,22 @@ function productAliases(name) { return newName; } -function createPricesElement(onSelectorClass, conditionText, saveText) { +async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears) { + let [storeProduct] = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); + let storeOption = storeProduct.getOption(prodUsers, prodYears); + let price = storeOption.getPrice(); + let discountedPrice = storeOption.getDiscountedPrice(); + const priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices'); priceElement.innerHTML = `
- + ${price} ${saveText}
- + ${discountedPrice} ${conditionText}
`; @@ -60,7 +65,7 @@ export default function decorate(block, options) { const { product, conditionText, saveText, } = options.metadata; - + const aemContainer = block.children[0]; aemContainer.classList.add('hero-aem-container'); const underShadow = aemContainer.children[0]; @@ -94,7 +99,7 @@ export default function decorate(block, options) { const buyLink = block.querySelector('a[href*="#buylink"]'); decorateBuyLink(buyLink, onSelectorClass); - const pricesBox = createPricesElement(onSelectorClass, conditionText, saveText); + const pricesBox = createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); } From 2223f755b9ff9cde5ebafc7f53da6cd24a8507d8 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:30:46 +0200 Subject: [PATCH 0073/1296] .5 crazy --- _src/blocks/hero-aem/hero-aem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 3bb9c1823..a5cbd530b 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -13,7 +13,7 @@ function productAliases(name) { } async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears) { - let [storeProduct] = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); + let storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); let storeOption = storeProduct.getOption(prodUsers, prodYears); let price = storeOption.getPrice(); let discountedPrice = storeOption.getDiscountedPrice(); From 20ceb69b05e4f8382dcb1dde2671802d2aa24af7 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:35:06 +0200 Subject: [PATCH 0074/1296] .6 problem-solved --- _src/blocks/hero-aem/hero-aem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index a5cbd530b..043ac42c1 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -14,7 +14,7 @@ function productAliases(name) { async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears) { let storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); - let storeOption = storeProduct.getOption(prodUsers, prodYears); + let storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); let price = storeOption.getPrice(); let discountedPrice = storeOption.getDiscountedPrice(); From fb087f00e07c4aaa0bb3c2b3b76bbd74cabd1331 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:39:45 +0200 Subject: [PATCH 0075/1296] .7 --- _src/blocks/hero-aem/hero-aem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 043ac42c1..31c8a031d 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -100,7 +100,7 @@ export default function decorate(block, options) { decorateBuyLink(buyLink, onSelectorClass); const pricesBox = createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); - buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + richText.appendChild(pricesBox); } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From 1e0e5aea32466b4f9c5af5950b9542892e34a551 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:41:21 +0200 Subject: [PATCH 0076/1296] .8 --- _src/blocks/hero-aem/hero-aem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 31c8a031d..d712f6627 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -100,7 +100,7 @@ export default function decorate(block, options) { decorateBuyLink(buyLink, onSelectorClass); const pricesBox = createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); - richText.appendChild(pricesBox); + block.appendChild(pricesBox) } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From a479dc0059dc83b87b96e267f6e39cd82d3b986a Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:42:02 +0200 Subject: [PATCH 0077/1296] .9 --- _src/blocks/hero-aem/hero-aem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index d712f6627..b0b942d72 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -100,7 +100,7 @@ export default function decorate(block, options) { decorateBuyLink(buyLink, onSelectorClass); const pricesBox = createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); - block.appendChild(pricesBox) + block.innerHTML.appendChild(pricesBox) } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From a101ba14cbb910a8e9ef26ca32b7879087e4afd5 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:44:18 +0200 Subject: [PATCH 0078/1296] .9 --- _src/blocks/hero-aem/hero-aem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index b0b942d72..95edf46d8 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -24,7 +24,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName,
${price} - ${saveText} + ${saveText}
${discountedPrice} @@ -100,7 +100,7 @@ export default function decorate(block, options) { decorateBuyLink(buyLink, onSelectorClass); const pricesBox = createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); - block.innerHTML.appendChild(pricesBox) + buyLink.appendChild(pricesBox); } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From c08eee5b6b273d3b720bb6d4e93abafd4754a555 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Wed, 13 Dec 2023 17:46:09 +0200 Subject: [PATCH 0079/1296] .10 --- _src/blocks/hero-aem/hero-aem.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 95edf46d8..ab4dbde55 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -61,7 +61,7 @@ function decorateBuyLink(buyLink, onSelectorClass) { } } -export default function decorate(block, options) { +export default async function decorate(block, options) { const { product, conditionText, saveText, } = options.metadata; @@ -99,7 +99,7 @@ export default function decorate(block, options) { const buyLink = block.querySelector('a[href*="#buylink"]'); decorateBuyLink(buyLink, onSelectorClass); - const pricesBox = createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); + const pricesBox = await createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); buyLink.appendChild(pricesBox); } From 897435e0d317c6853a0c650a88b6d872d70b9f45 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 14 Dec 2023 14:53:03 +0200 Subject: [PATCH 0080/1296] update sidekick --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 359b5de86..0c31eefb1 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -2,7 +2,7 @@ export const localisationList = ['zh-hk', 'zh-tw']; export function getDefaultLanguage() { const currentPathUrl = window.location.pathname; const foundLanguage = localisationList.find((item) => currentPathUrl.indexOf(`/${item}/`) !== -1); - return foundLanguage.replace('zh-','') || 'site'; + return foundLanguage?.replace('zh-','') || 'site'; } const cacheResponse = new Map(); From 5fd54bf8350bcfe6ad8b7e0ea79ee0c2c58d965b Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Thu, 14 Dec 2023 17:53:27 +0200 Subject: [PATCH 0081/1296] add almost final config --- _src/blocks/hero-aem/hero-aem.css | 124 ++++++++++++++++++++++++++++-- _src/blocks/hero-aem/hero-aem.js | 35 +++++++-- 2 files changed, 148 insertions(+), 11 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css index b358ddc1b..851bc03de 100644 --- a/_src/blocks/hero-aem/hero-aem.css +++ b/_src/blocks/hero-aem/hero-aem.css @@ -16,6 +16,9 @@ border-top-left-radius: 20px; border-top-right-radius: 20px; width: 100%; + height: fit-content; + position: relative; + top: 6px; } .hero-aem-container .hero-aem .hero-aem__desktop-image { display: none; @@ -49,6 +52,9 @@ position: relative; top: -20px; } + .hero-aem-container .aem-two-cards { + margin-top: 20px; + } .hero-aem-container .aem-two-cards h1 { font-size: 36px; font-weight: bold; @@ -65,15 +71,88 @@ padding: 1.5rem; display: flex; flex-direction: column; - height: 100%; } - .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(span)) { - height: 100%; + .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(a), :has(picture)) { + min-height: 120px; + } + .h-100 { + height: 100% !important; + } + + .hero-aem-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-left: auto; + margin-right: auto; + } + + .hero-aem-container .button.primary { + font-size: 16px; + font-style: normal; + font-weight: 500; + -webkit-font-smoothing: antialiased; + display: inline-flex; + align-items: center; + box-sizing: border-box; + text-decoration: none; + padding: 10px 26px 8px 28px; + text-align: center; + cursor: pointer; + color: #fff; + background-color: #eb0000; + border: 2px solid #eb0000; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 8px; + height: fit-content; + } + + .hero-aem-container .aem-two-cards p a { + font-size: 16px; + font-style: normal; + font-weight: 500; + -webkit-font-smoothing: antialiased; + display: inline-flex; + align-items: center; + box-sizing: border-box; + text-decoration: none; + padding: 10px 26px 8px 28px; + text-align: center; + cursor: pointer; + color: #fff; + background-color: #eb0000; + border: 2px solid #eb0000; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 8px; + height: fit-content; + } + + .hero-aem-container .aem-two-cards h1 { + font-size: 36px; + font-weight: bold; } + .hero-aem-container .aem-two-cards h2 { + color: #006DFF; + font-size: 24px; + font-weight: normal; + margin: 0; + } + .hero-aem-container .d-flex { + display: flex; + flex-wrap: wrap; + row-gap: 1rem; + justify-content: space-between; + } + @media (width >= 768px) { .hero-aem-container .hero-aem { display: flex; + flex-wrap: wrap; } .hero-aem-container .hero-aem .hero-aem__mobile-image { display: none; @@ -84,6 +163,7 @@ } .hero-aem-container .hero-aem .hero-aem__desktop-image img { height: 100%; + width: 100%; object-fit: cover; border-top-right-radius: 20px; border-bottom-right-radius: 20px; @@ -95,11 +175,13 @@ padding: 0; } .hero-aem-container .hero-aem .hero-aem__card__desktop { - padding: 4%; background-color: #F7F7F7; border-bottom-left-radius: 20px; border-top-left-radius: 20px; } + .hero-aem-container .hero-aem .hero-aem__card__desktop > div { + padding: 4%; + } .hero-aem-container .hero-aem p.button-container { text-align: left; display: inline-block; @@ -107,10 +189,40 @@ .hero-aem-container .hero-aem p.button-container .button.primary { width: auto; } - .hero-aem-container .aem-two-cards h1 { - font-size: 56px; + + .hero-aem-container .col-md-6 { + flex: 0 0 auto; + width: 50%; + } + + .hero-aem-container .col-md-3 { + flex: 0 0 auto; + width: 24%; } + .hero-aem-container .aem-two-cards h1 + p { font-size: 18px; } + + .hero-aem-container .hero-aem p:has(a) { + display: inline-block; + } + + .hero-aem-container .hero-aem p:has(em) { + margin-left: 10px; + } + } + @media (width >= 992px) { + .hero-aem-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } + } + @media (width >= 1600px) { + .hero-aem-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } } \ No newline at end of file diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index ab4dbde55..d181b3ea5 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -17,6 +17,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, let storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); let price = storeOption.getPrice(); let discountedPrice = storeOption.getDiscountedPrice(); + let discount = storeOption.getDiscount("valueWithCurrency"); const priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices'); @@ -24,7 +25,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName,
${price} - ${saveText} + ${saveText} ${discount}
${discountedPrice} @@ -68,14 +69,17 @@ export default async function decorate(block, options) { const aemContainer = block.children[0]; aemContainer.classList.add('hero-aem-container'); + aemContainer.classList.add('we-container'); const underShadow = aemContainer.children[0]; - const [richText, mainDesktopImage] = underShadow.children; + let [richText, mainDesktopImage, richTextCard, columnsCard] = underShadow.children; + console.log(options.metadata) // Configuration for new elements richText.classList.add('hero-aem__card__desktop', 'col-md-6'); mainDesktopImage.classList.add('col-md-6'); - - const mobileImage = block.querySelector('.hero-aem > div > div picture'); + mainDesktopImage.children[0].classList.add("h-100"); + + const mobileImage = block.querySelector('.hero-aem__card__desktop div > p > picture'); mobileImage.classList.add('hero-aem__mobile-image'); // Get all the siblings after h1 @@ -100,11 +104,32 @@ export default async function decorate(block, options) { decorateBuyLink(buyLink, onSelectorClass); const pricesBox = await createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); - buyLink.appendChild(pricesBox); + buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary }); + + columnsCard = [...columnsCard.children]; + const cardElement = document.createElement('div'); + cardElement.classList.add('aem-two-cards'); + cardElement.innerHTML = ` +
+
+ ${richTextCard.innerHTML} +
+ ${columnsCard.map((col) => ` +
+
+ ${col.innerHTML} +
+
`).join('')} +
+ `; + aemContainer.appendChild(cardElement); + richTextCard.innerHTML = ''; + columnsCard.forEach((col) => col.remove()); + } From baf0b9ac8736cacfc7238691572297f7a375b4e7 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Fri, 15 Dec 2023 15:02:46 +0200 Subject: [PATCH 0082/1296] Css and js modifications for personalization --- _src/blocks/hero-aem/hero-aem.css | 34 ++++++++++++++++++++++--------- _src/blocks/hero-aem/hero-aem.js | 9 ++++---- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css index 851bc03de..122219962 100644 --- a/_src/blocks/hero-aem/hero-aem.css +++ b/_src/blocks/hero-aem/hero-aem.css @@ -44,6 +44,7 @@ } .hero-aem-container .hero-aem .prod-newprice { font-size: 40px; + font-weight: bold; } .hero-aem-container .hero-aem .newprice-container { line-height: 1; @@ -55,16 +56,10 @@ .hero-aem-container .aem-two-cards { margin-top: 20px; } - .hero-aem-container .aem-two-cards h1 { + .hero-aem-container .aem-two-cards h2 { font-size: 36px; font-weight: bold; } - .hero-aem-container .aem-two-cards h2 { - color: #006DFF; - font-size: 24px; - font-weight: normal; - margin: 0; - } .hero-aem-container .aem-two-cards_card { border-radius: 20px; background-color: #F7F7F7; @@ -72,6 +67,12 @@ display: flex; flex-direction: column; } + .hero-aem-container .aem-two-cards .aem-two-cards_card h2 { + color: #006DFF; + font-size: 24px; + font-weight: normal; + margin: 0; + } .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(a), :has(picture)) { min-height: 120px; } @@ -109,6 +110,10 @@ height: fit-content; } + .hero-aem-container .hero-aem p em a { + color: black; + } + .hero-aem-container .aem-two-cards p a { font-size: 16px; font-style: normal; @@ -131,11 +136,11 @@ height: fit-content; } - .hero-aem-container .aem-two-cards h1 { + .hero-aem-container .aem-two-cards h2 { font-size: 36px; font-weight: bold; } - .hero-aem-container .aem-two-cards h2 { + .hero-aem-container .aem-two-cards .aem-two-cards_card h2 { color: #006DFF; font-size: 24px; font-weight: normal; @@ -192,7 +197,7 @@ .hero-aem-container .col-md-6 { flex: 0 0 auto; - width: 50%; + width: 49%; } .hero-aem-container .col-md-3 { @@ -218,6 +223,15 @@ padding-left: 50px; padding-right: 50px; } + + .hero-aem-container .col-lg-6 { + flex: 0 0 auto; + width: 49%; + } + .hero-aem-container .col-lg-3 { + flex: 0 0 auto; + width: 24%; + } } @media (width >= 1600px) { .hero-aem-container.we-container { diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index d181b3ea5..b899f85fa 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -83,8 +83,8 @@ export default async function decorate(block, options) { mobileImage.classList.add('hero-aem__mobile-image'); // Get all the siblings after h1 - const cardElements = Array.from(block.querySelectorAll('h1 ~ *')); - + const cardElements = Array.from(underShadow.querySelectorAll('h1 ~ *')); + console.log(underShadow.innerHTML) // Put the siblings in a new div and append it to the block const cardElementContainer = createCardElementContainer(cardElements, mobileImage); @@ -112,16 +112,17 @@ export default async function decorate(block, options) { composed: true, // This allows the event to cross the shadow DOM boundary }); + console.log(richTextCard.innerHTML); columnsCard = [...columnsCard.children]; const cardElement = document.createElement('div'); cardElement.classList.add('aem-two-cards'); cardElement.innerHTML = `
-
+
${richTextCard.innerHTML}
${columnsCard.map((col) => ` -
+
${col.innerHTML}
From d00e4771954553b4f88ca13d7a8f3e555a2c7053 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Fri, 15 Dec 2023 16:32:25 +0200 Subject: [PATCH 0083/1296] More config changes for personalization component. --- _src/blocks/hero-aem/hero-aem.css | 39 +++++++++++++++++++++---- _src/blocks/hero-aem/hero-aem.js | 48 +++++++++---------------------- 2 files changed, 48 insertions(+), 39 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css index 122219962..48bab727f 100644 --- a/_src/blocks/hero-aem/hero-aem.css +++ b/_src/blocks/hero-aem/hero-aem.css @@ -1,16 +1,23 @@ +/* stylelint-disable at-rule-empty-line-before */ +/* stylelint-disable no-duplicate-selectors */ +/* stylelint-disable no-descending-specificity */ +/* stylelint-disable selector-class-pattern */ +/* stylelint-disable rule-empty-line-before */ .hero-aem-container .hero-aem p:first-of-type { margin: 0; } .hero-aem-container .hero-aem h1 { color: #006DFF; - font-size: 40px; + font-size: 38px; font-weight: normal; margin-top: 10px; + line-height: 1.1; } .hero-aem-container .hero-aem h2 { margin-top: 0; font-size: 24px; font-weight: normal; + line-height: 1.1; } .hero-aem-container .hero-aem .hero-aem__mobile-image img { border-top-left-radius: 20px; @@ -37,6 +44,7 @@ } .hero-aem-container .hero-aem .prod-oldprice { font-size: 16px; + text-decoration: line-through; } .hero-aem-container .hero-aem .prod-save { color: #1C7928; @@ -59,6 +67,7 @@ .hero-aem-container .aem-two-cards h2 { font-size: 36px; font-weight: bold; + line-height: 1.1; } .hero-aem-container .aem-two-cards_card { border-radius: 20px; @@ -73,9 +82,7 @@ font-weight: normal; margin: 0; } - .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(a), :has(picture)) { - min-height: 120px; - } + .h-100 { height: 100% !important; } @@ -152,6 +159,10 @@ row-gap: 1rem; justify-content: space-between; } + .hero-aem-container .col-12 { + flex: 0 0 auto; + width: 100%; + } @media (width >= 768px) { @@ -205,7 +216,7 @@ width: 24%; } - .hero-aem-container .aem-two-cards h1 + p { + .hero-aem-container .aem-two-cards h2 + p { font-size: 18px; } @@ -216,6 +227,9 @@ .hero-aem-container .hero-aem p:has(em) { margin-left: 10px; } + .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(a), :has(picture)) { + min-height: 90px; + } } @media (width >= 992px) { .hero-aem-container.we-container { @@ -223,6 +237,9 @@ padding-left: 50px; padding-right: 50px; } + .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(a), :has(picture)) { + min-height: 165px; + } .hero-aem-container .col-lg-6 { flex: 0 0 auto; @@ -233,6 +250,18 @@ width: 24%; } } + @media (width >= 1200px) { + + .hero-aem-container .aem-two-cards_card p:not(.button-container, :has(a), :has(picture)) { + min-height: 120px; + } + + .hero-aem-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } + } @media (width >= 1600px) { .hero-aem-container.we-container { max-width: 1332px; diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index b899f85fa..6108333e6 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -1,23 +1,13 @@ -// const { loadPage } = await import('../../scripts/scripts.js'); -// import { updateProductsList } from '../../scripts/utils.js'; - -function productAliases(name) { - let newName = name.trim(); - if (newName === 'elite') { - newName = 'elite_1000'; - } else if (newName === 'bs') { - newName = 'bus-security'; - } - - return newName; -} - -async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears) { - let storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); - let storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); - let price = storeOption.getPrice(); - let discountedPrice = storeOption.getDiscountedPrice(); - let discount = storeOption.getDiscount("valueWithCurrency"); +/* eslint-disable prefer-const */ +/* eslint-disable no-undef */ +/* eslint-disable max-len */ +async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink) { + const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); + const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); + const price = storeOption.getPrice(); + const discountedPrice = storeOption.getDiscountedPrice(); + const discount = storeOption.getDiscount("valueWithCurrency"); + const buyLink = await storeOption.getStoreUrl(); const priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices'); @@ -32,6 +22,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, ${conditionText}
`; + buylink.href = buyLink; return priceElement; } @@ -55,13 +46,6 @@ function createCardElementContainer(elements, mobileImage) { return cardElementContainer; } -function decorateBuyLink(buyLink, onSelectorClass) { - if (buyLink) { - buyLink.classList.add('button', 'primary', `buylink-${onSelectorClass}`); - buyLink.innerHTML = buyLink.innerHTML.replace(/0%/g, `10%`); - } -} - export default async function decorate(block, options) { const { product, conditionText, saveText, @@ -96,14 +80,11 @@ export default async function decorate(block, options) { if (product) { const [prodName, prodUsers, prodYears] = product.split('/'); - const onSelectorClass = `${productAliases(prodName)}-${prodUsers}${prodYears}`; - - // updateProductsList(product); const buyLink = block.querySelector('a[href*="#buylink"]'); - decorateBuyLink(buyLink, onSelectorClass); + buyLink.classList.add('button', 'primary'); - const pricesBox = await createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears); + const pricesBox = await createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears, buyLink); buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); } @@ -112,7 +93,6 @@ export default async function decorate(block, options) { composed: true, // This allows the event to cross the shadow DOM boundary }); - console.log(richTextCard.innerHTML); columnsCard = [...columnsCard.children]; const cardElement = document.createElement('div'); cardElement.classList.add('aem-two-cards'); @@ -122,7 +102,7 @@ export default async function decorate(block, options) { ${richTextCard.innerHTML}
${columnsCard.map((col) => ` -
+
${col.innerHTML}
From 631ea462f6bdc4e02f7d0f6d0a62bf40d0533a66 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 15 Dec 2023 16:39:38 +0200 Subject: [PATCH 0084/1296] DEX-16157 | change style adding to work on all browsers --- _src/scripts/lib-franklin-api.js | 54 +++++++------------------------- 1 file changed, 11 insertions(+), 43 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index a134b70fc..cd1d5e799 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -37,53 +37,21 @@ const updateLinkSources = (shadoRoot, origin) => { }); }; -/** - * @param {ShadowRoot} shadowRoot - * @param {string} offer - * @param {string} origin - * @returns {Promise} - * load the block HTML - */ -const loadHTML = async (shadowRoot, offer, origin) => { - // make a call to get all the plain HTML - shadowRoot.innerHTML = await fetch(offer).then(r => r.text()) - - updateLinkSources(shadowRoot, origin); -}; - -/** - * @param {ShadowRoot} shadowRoot - * @param {string} offer - * @returns {Promise} - * load the block HTML - */ -const loadCSS = async (shadowRoot, offer) => { - const style = await import(offer, { - assert: { type: 'css' } - }); - - shadowRoot.adoptedStyleSheets = [style.default]; -}; - -/** - * @param {ShadowRoot} shadowRoot - * @param {string} offer - * @param {object} options - * @returns {Promise} - * load the block HTML - */ -const loadJS = async (shadowRoot, offer, options) => { - const logicModule = await import(offer); - logicModule.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); -}; - export async function loadComponent(offer, block, options, selector) { const origin = new URL(offer).origin; const container = selector ? document.querySelector(selector) : document.createElement('div'); const shadowRoot = container.attachShadow({ mode: 'open' }); - await loadHTML(shadowRoot, offer, origin); - loadCSS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.css`); - await loadJS(shadowRoot, `${origin}/_src/blocks/${block}/${block}.js`, options); + shadowRoot.innerHTML = ``; + + const [html, js] = await Promise.all([ + fetch(offer).then(r => r.text()), + import(`${origin}/_src/blocks/${block}/${block}.js`) + ]) + + shadowRoot.innerHTML += html; + updateLinkSources(shadowRoot, origin); + await js.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); + return container; } From b94b4ea229ccf3cfe1a6739e6cf8c810458aee0d Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Fri, 15 Dec 2023 16:43:16 +0200 Subject: [PATCH 0085/1296] Get console logs out --- _src/blocks/hero-aem/hero-aem.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 6108333e6..cad6038e6 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -51,12 +51,11 @@ export default async function decorate(block, options) { product, conditionText, saveText, } = options.metadata; - const aemContainer = block.children[0]; + const aemContainer = block.children[1]; aemContainer.classList.add('hero-aem-container'); aemContainer.classList.add('we-container'); const underShadow = aemContainer.children[0]; let [richText, mainDesktopImage, richTextCard, columnsCard] = underShadow.children; - console.log(options.metadata) // Configuration for new elements richText.classList.add('hero-aem__card__desktop', 'col-md-6'); @@ -68,7 +67,6 @@ export default async function decorate(block, options) { // Get all the siblings after h1 const cardElements = Array.from(underShadow.querySelectorAll('h1 ~ *')); - console.log(underShadow.innerHTML) // Put the siblings in a new div and append it to the block const cardElementContainer = createCardElementContainer(cardElements, mobileImage); From ce9969ec306670e48107c2b7a1f50f09d42fa5bf Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Fri, 15 Dec 2023 16:51:39 +0200 Subject: [PATCH 0086/1296] Css fix --- _src/blocks/hero-aem/hero-aem.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css index 48bab727f..987e9c7b9 100644 --- a/_src/blocks/hero-aem/hero-aem.css +++ b/_src/blocks/hero-aem/hero-aem.css @@ -5,6 +5,7 @@ /* stylelint-disable rule-empty-line-before */ .hero-aem-container .hero-aem p:first-of-type { margin: 0; + margin-bottom: 5px; } .hero-aem-container .hero-aem h1 { color: #006DFF; @@ -75,6 +76,7 @@ padding: 1.5rem; display: flex; flex-direction: column; + width: 80%; } .hero-aem-container .aem-two-cards .aem-two-cards_card h2 { color: #006DFF; @@ -208,7 +210,7 @@ .hero-aem-container .col-md-6 { flex: 0 0 auto; - width: 49%; + width: 50%; } .hero-aem-container .col-md-3 { From cb00f12795f5878fc6fa74e8fc5dfcdf6fe88464 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Fri, 15 Dec 2023 17:00:21 +0200 Subject: [PATCH 0087/1296] Add adobeDataLayer --- _src/blocks/hero-aem/hero-aem.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index cad6038e6..91f8a7502 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -8,7 +8,21 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, const discountedPrice = storeOption.getDiscountedPrice(); const discount = storeOption.getDiscount("valueWithCurrency"); const buyLink = await storeOption.getStoreUrl(); - + window.adobeDataLayer.push({ + event: "product loaded", + product: [{info : { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription("months"), + version: storeOption.getSubscription("months") === 1 ? "monthly" : "yearly", + basePrice: storeOption.getPrice("value"), + discountValue: storeOption.getDiscount("value"), + discountRate: storeOption.getDiscount("percentage"), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice("value") || storeOption.getPrice("value"), + }}] + }) const priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices'); priceElement.innerHTML = ` From 58341dd6ec96a3d4b38ef158359291b26ce1f52f Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Fri, 15 Dec 2023 17:03:39 +0200 Subject: [PATCH 0088/1296] Refactor logic with callbacks --- _src/blocks/hero-aem/hero-aem.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 91f8a7502..1b921c257 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -60,7 +60,7 @@ function createCardElementContainer(elements, mobileImage) { return cardElementContainer; } -export default async function decorate(block, options) { +export default function decorate(block, options) { const { product, conditionText, saveText, } = options.metadata; @@ -96,15 +96,16 @@ export default async function decorate(block, options) { const buyLink = block.querySelector('a[href*="#buylink"]'); buyLink.classList.add('button', 'primary'); - const pricesBox = await createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears, buyLink); - buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears, buyLink) + .then(pricesBox => { + buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); + }) } - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, // This allows the event to cross the shadow DOM boundary - }); - columnsCard = [...columnsCard.children]; const cardElement = document.createElement('div'); cardElement.classList.add('aem-two-cards'); From cff32804744af8472d9063ed9614bebb035692e2 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Mon, 18 Dec 2023 14:17:15 +0200 Subject: [PATCH 0089/1296] DEX-16157 | update link sources --- _src/scripts/lib-franklin-api.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index cd1d5e799..2b6d7eec9 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -20,21 +20,13 @@ const parseMetadata = (shadowRoot) => { * @param {string} origin - prepends the origin to the relative links */ const updateLinkSources = (shadoRoot, origin) => { - const allSources = shadoRoot.querySelectorAll('source'); - allSources.forEach((source) => { - if (source.srcset.startsWith('./') || source.srcset.startsWith('/')) { - const srcSet = source.srcset.startsWith('.') ? source.srcset.slice(1) : source.srcset; - source.srcset = `${origin}${srcSet}`; - } - }); - - const allImages = shadoRoot.querySelectorAll('img'); - allImages.forEach((image) => { - if (image.src.startsWith('./') || image.src.startsWith('/')) { - const imgSrc = image.src.startsWith('.') ? image.src.slice(1) : image.src; - image.src = `${origin}${imgSrc}`; - } - }); + shadoRoot + .querySelectorAll('source') + .forEach(source => source.srcset = new URL(source.getAttribute("srcset"), origin).href); + + shadoRoot + .querySelectorAll('img') + .forEach(image => image.src = new URL(image.getAttribute("src"), origin).href); }; export async function loadComponent(offer, block, options, selector) { From 8e4b7dc7bad0175664aa03d87d0326a73c1862f8 Mon Sep 17 00:00:00 2001 From: Buga Adrian Alexandru Date: Mon, 18 Dec 2023 14:49:31 +0200 Subject: [PATCH 0090/1296] DEX-16157 | update source to find same folder as offer --- _src/scripts/lib-franklin-api.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 2b6d7eec9..c3ff257cb 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -30,7 +30,9 @@ const updateLinkSources = (shadoRoot, origin) => { }; export async function loadComponent(offer, block, options, selector) { - const origin = new URL(offer).origin; + const offerURL = new URL(offer); + const origin = offerURL.origin; + const offerFolder = offerURL.pathname.split("/").slice(0,-1).join("/"); const container = selector ? document.querySelector(selector) : document.createElement('div'); const shadowRoot = container.attachShadow({ mode: 'open' }); @@ -42,7 +44,7 @@ export async function loadComponent(offer, block, options, selector) { ]) shadowRoot.innerHTML += html; - updateLinkSources(shadowRoot, origin); + updateLinkSources(shadowRoot, `${origin}${offerFolder}/`); await js.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); return container; From f24f15bfabad17a1f1e92f9f7b3c00ce943a5527 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 19 Dec 2023 13:48:51 +0200 Subject: [PATCH 0091/1296] DEX-16157 | Refine css based on designer's feedback --- _src/blocks/hero-aem/hero-aem.css | 25 +++++++++++++++++++++---- _src/blocks/hero-aem/hero-aem.js | 2 +- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css index 987e9c7b9..300dc6dba 100644 --- a/_src/blocks/hero-aem/hero-aem.css +++ b/_src/blocks/hero-aem/hero-aem.css @@ -76,7 +76,6 @@ padding: 1.5rem; display: flex; flex-direction: column; - width: 80%; } .hero-aem-container .aem-two-cards .aem-two-cards_card h2 { color: #006DFF; @@ -84,6 +83,9 @@ font-weight: normal; margin: 0; } + .hero-aem-container .aem-two-cards .justify-space-between { + justify-content: space-between; + } .h-100 { height: 100% !important; @@ -93,6 +95,7 @@ max-width: 100%; padding-left: 20px; padding-right: 20px; + margin-top: 15px; margin-left: auto; margin-right: auto; } @@ -155,12 +158,26 @@ font-weight: normal; margin: 0; } - .hero-aem-container .d-flex { + .hero-aem-container .row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; display: flex; flex-wrap: wrap; - row-gap: 1rem; - justify-content: space-between; + margin-top: calc(-1 * var(--bs-gutter-y)); + margin-right: calc(-.5 * var(--bs-gutter-x)); + margin-left: calc(-.5 * var(--bs-gutter-x)); } + .hero-aem-container .row>* { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) * .5); + padding-left: calc(var(--bs-gutter-x) * .5); + margin-top: var(--bs-gutter-y); + box-sizing: border-box; + } + + .hero-aem-container .col-12 { flex: 0 0 auto; width: 100%; diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 1b921c257..eba2deaed 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -110,7 +110,7 @@ export default function decorate(block, options) { const cardElement = document.createElement('div'); cardElement.classList.add('aem-two-cards'); cardElement.innerHTML = ` -
+
${richTextCard.innerHTML}
From 18f79847da67d399422d8235641bdb0752047cf9 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 8 Feb 2024 14:52:50 +0200 Subject: [PATCH 0092/1296] Add shadow DOM loaded event dispatch --- _src/blocks/hero-aem/hero-aem.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index eba2deaed..28348f454 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -104,6 +104,11 @@ export default function decorate(block, options) { composed: true, // This allows the event to cross the shadow DOM boundary }); }) + } else { + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } columnsCard = [...columnsCard.children]; From 8f79cda3d6c08ad88eb2758b7b33ab8390790af0 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 8 Feb 2024 15:09:22 +0200 Subject: [PATCH 0093/1296] Add button class to simple link in hero-aem block --- _src/blocks/hero-aem/hero-aem.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index 28348f454..c2a48e0a7 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -105,6 +105,9 @@ export default function decorate(block, options) { }); }) } else { + // If there is no product, just add the button class and dispatch the event + const simpleLink = block.querySelector('.hero-aem__card-text a'); + simpleLink.classList.add('button', 'primary'); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary From 43cdc73acc3ec1dc501a344b9deee00887bf884f Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 16 Feb 2024 14:24:52 +0200 Subject: [PATCH 0094/1296] Core updates --- _src/scripts/lib-franklin.js | 4 +++- _src/scripts/scripts.js | 24 +++++++++++++++++++----- _src/styles/trusted.css | 0 3 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 _src/styles/trusted.css diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index ebe139de3..414f04070 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -300,7 +300,9 @@ export async function fetchPlaceholders(prefix = 'default') { const loaded = window.placeholders[`${prefix}-loaded`]; if (!loaded) { window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - fetch(`/${window.location.pathname.split('/')[1]}${prefix === 'default' ? '' : prefix}/solutions/placeholders.json`) + const pages = window.location.pathname.split('/').filter((item) => item); + const [locale] = pages; + fetch(`/${locale}${prefix === 'default' ? '' : prefix}/placeholders.json`) .then((resp) => { if (resp.ok) { return resp.json(); diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 5c2b800f4..a13a8dd64 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -184,17 +184,31 @@ export function getDomain() { return window.location.pathname.split('/').filter(item => item)[0]; } +export function getLocalizedResourceUrl(resourceName) { + const { pathname } = window.location; + const lastCharFromUrl = pathname.charAt(pathname.length - 1); + const lpIsInFolder = lastCharFromUrl === '/'; + + let pathnameAsArray = pathname.split('/'); + + if (lpIsInFolder) { + return `${pathnameAsArray.join('/')}${resourceName}`; + } + + const basePathIndex = pathname.startsWith('/pages/') ? 3 : 2; + pathnameAsArray = pathnameAsArray.slice(0, basePathIndex + 1); // "/consumer/en"; + + return `${pathnameAsArray.join('/')}/${resourceName}`; +} + /** * Sets the page language. * @param {Object} param The language and country */ function setPageLanguage(param) { document.documentElement.lang = param.language; - const pages = window.location.pathname.split('/').filter(item => item); - const domain = pages[0]; - const basePath = pages.length > 1 ? `${domain}/solutions` : domain; - createMetadata('nav', `/${basePath}/nav`); - createMetadata('footer', `/${basePath}/footer`); + createMetadata('nav', `${getLocalizedResourceUrl('nav')}`); + createMetadata('footer', `${getLocalizedResourceUrl('footer')}`); } export function pushToDataLayer(event, payload) { diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css new file mode 100644 index 000000000..e69de29bb From a50af4445d5d33627cf464fb49339ccb6f0c4d64 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 16 Feb 2024 16:34:19 +0200 Subject: [PATCH 0095/1296] fluid header and footer --- _src/blocks/footer/footer.css | 7 ++----- _src/styles/styles.css | 4 +--- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/_src/blocks/footer/footer.css b/_src/blocks/footer/footer.css index b2a28d1de..3959c5242 100644 --- a/_src/blocks/footer/footer.css +++ b/_src/blocks/footer/footer.css @@ -2,7 +2,6 @@ footer { padding: 2.5rem 0 1.5rem; background-color: #000; font-size: var(--body-font-size-s); - max-width: 120rem; } footer .footer a { @@ -231,7 +230,7 @@ footer .footer a:hover { padding-bottom: 0.625rem; } -.footer > div > :nth-child(4) > p + ul { +.footer > div > :nth-child(4) > p + ul { display: none; } @@ -307,8 +306,6 @@ footer .footer a:hover { @media(min-width: 767px) { /* tablet */ footer { padding: 3.625rem 0 2.6875rem; - margin: 0 auto; - max-width: 120rem; } .footer > div > :nth-child(1) > ul li > a { @@ -425,7 +422,7 @@ footer .footer a:hover { margin-top: 0.9375rem; list-style: none; } - + .footer > div > :nth-child(3) ul { column-count: 2; } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 514a2d334..52f3b587c 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -159,8 +159,6 @@ body { line-height: 1.5; display: none; -webkit-font-smoothing: antialiased; - max-width: 1920px; - margin: 0 auto; } h1, h2, h3, @@ -549,7 +547,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b right: 0; } - header, main, footer { + main { max-width: var(--body-max-width); margin: 0 auto; } From 5f6ce30d712542ac4b2880eaaa3bf9798b3268dc Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 16 Feb 2024 19:14:29 +0200 Subject: [PATCH 0096/1296] fluid main --- _src/styles/styles.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 52f3b587c..0af6849b9 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -547,11 +547,6 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b right: 0; } - main { - max-width: var(--body-max-width); - margin: 0 auto; - } - main div.section.wide > * { /* apply to all children wrapper */ max-width: calc(var(--section-desktop-max-width) - 2 * var(--section-desktop-padding)); padding-top: 1px; /* hack to handle margin of child paragraphs */ From 7e07d8d0ed63de266efc9a164c6ba8c0d4e680e5 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 19 Feb 2024 13:05:57 +0200 Subject: [PATCH 0097/1296] My customisation - 1st part of lp --- _src/blocks/banner/banner.css | 106 ++++++++++++++++++++ _src/blocks/banner/banner.js | 98 ++++++++++++++++++ _src/blocks/carousel/carousel.css | 25 +++++ _src/blocks/carousel/carousel.js | 22 ++++ _src/blocks/columns/columns.js | 9 +- _src/blocks/image-columns/image-columns.css | 12 ++- _src/blocks/image-columns/image-columns.js | 8 +- _src/blocks/slider/slider.css | 21 ++++ _src/blocks/slider/slider.js | 22 ++++ _src/styles/trusted.css | 87 ++++++++++++++++ head.html | 6 +- 11 files changed, 410 insertions(+), 6 deletions(-) create mode 100644 _src/blocks/banner/banner.css create mode 100644 _src/blocks/banner/banner.js create mode 100644 _src/blocks/carousel/carousel.css create mode 100644 _src/blocks/carousel/carousel.js create mode 100644 _src/blocks/slider/slider.css create mode 100644 _src/blocks/slider/slider.js diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css new file mode 100644 index 000000000..9fca0c2c8 --- /dev/null +++ b/_src/blocks/banner/banner.css @@ -0,0 +1,106 @@ +@charset "UTF-8"; +.section.banner-container { + background-color: black; + color: white; + padding: 0; +} + +.section.banner-container .banner img { + width: 100%; +} + +.section.banner-container .banner .button-container { + display: none; +} + +.section.banner-container .banner ul { + padding-left: 0; +} + +.section.banner-container .banner ul li { + list-style-type: none; + padding-left: 0; + font-size: var(--body-font-size-xs); + line-height: 20px; + color: #000; + text-align: left; + margin-top: 6px; + display: flex; + align-items: flex-start; +} + +.section.banner-container .banner ul li::before { + content: "•"; + color: #4CA154; + font-weight: bold; + display: inline-block; + margin-left: 0; + margin-right: 10px; + font-size: 35px; +} + +@media screen and (width >= 991px) { + .section.banner-container .banner .button-container { + display: block; + } + .section.banner-container .banner img { + width: initial; + } +} +@media screen and (width <= 991px) { + .banner-container.bckimg-full-right { + background-position: right -19rem top !important; + } +} +@media screen and (width <= 768px) { + .section.banner-container .banner { + padding: 1em 0; + margin-bottom: 1rem !important; + } + .section.normal-padding-mobile .banner { + padding-bottom: 1rem; + } + .section.banner-container .banner h1 { + margin-top: 0; + font-size: 30px; + text-align: left; + } + .section.banner-container .banner h2 { + margin-bottom: 0; + font-size: var(--body-font-size-m); + } + .section.banner-container .banner p { + font-size: 13px; + line-height: 18px; + } + .section.banner-container .banner ul li { + font-size: 11px; + line-height: 16px; + } + .section.banner-container.block-hide-mobile { + display: none !important; + } + .section.banner-container.hide-mobile { + background-image: unset !important; + background-color: #000; + } + .section.banner-container.hide-mobile .bck-img { + display: none; + } +} + +.banner a.button { + border: 1px solid white; + color: white; + font-weight: 500; + background-color: transparent; + border-radius: 5px; + padding: 5px 3px 5px 16px; +} + +.banner em { + position: absolute; + bottom: 10px; + font-size: 15px; + font-style: unset; +} \ No newline at end of file diff --git a/_src/blocks/banner/banner.js b/_src/blocks/banner/banner.js new file mode 100644 index 000000000..c93e8c66f --- /dev/null +++ b/_src/blocks/banner/banner.js @@ -0,0 +1,98 @@ +export default function decorate(block) { + block.classList.add('default-content-wrapper'); + const parentBlock = block.closest('.section'); + const parentBlockStyle = block.closest('.section').style; + const blockStyle = block.style; + const metaData = block.closest('.section').dataset; + const { + contentSize, background_color, background_hide, banner_hide, text_color, underlinedInclinedTextColor, textAlignVertical, imageAlign, padding_top, padding_bottom, margin_top, margin_bottom, image_cover + } = metaData; + const [contentEl, pictureEl, contentRightEl] = [...block.children]; + + if (image_cover) { + parentBlock.classList.add(`bckimg-${image_cover}`); + } + + // tables from left content + [...contentEl.querySelectorAll('table')].forEach((table) => { + const aliasTr = table.querySelector('tr'); // 1st tr shoudlk have an identifier alias + }); + + if (background_color) parentBlockStyle.backgroundColor = background_color; + if (text_color) blockStyle.color = text_color; + if (underlinedInclinedTextColor) { + block.querySelectorAll('em u').forEach((element) => { + element.style.color = underlinedInclinedTextColor; + element.style.fontStyle = 'normal'; + element.style.textDecoration = 'none'; + }); + } + if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; + if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; + if (margin_top) blockStyle.marginTop = `${margin_top}rem`; + if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; + + if (background_hide) parentBlock.classList.add(`hide-${background_hide}`); + if (banner_hide) parentBlock.classList.add(`block-hide-${banner_hide}`); + + if (image_cover && image_cover === 'small') { + blockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat 0 0 / cover ${background_color || '#000'}`; + block.innerHTML = ` +
+
+
${contentEl.innerHTML}
+
+
+
${contentEl.innerHTML}
+
+ ${pictureEl.innerHTML} +
+
+
+ `; + } else if (image_cover) { + parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top center / 100% ${background_color || '#000'}`; + + if (image_cover === 'full-left') { + parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top left / auto 100% ${background_color || '#000'}`; + } else if (image_cover === 'full-center') { + parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top center / auto 100% ${background_color || '#000'}`; + } else if (image_cover === 'full-right') { + parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top right / auto 100% ${background_color || '#000'}`; + } + + block.innerHTML = ` +
+
+
${contentEl.innerHTML}
+ ${contentRightEl ? `
${contentRightEl.innerHTML}
` : ''} +
+
+ `; + } else { + block.innerHTML = ` +
+
+
${contentEl.innerHTML}
+
+ ${pictureEl.innerHTML} +
+
+
+
+ ${pictureEl.innerHTML} +
+
${contentEl.innerHTML}
+
+
+ `; + } + + if (textAlignVertical) { + block.querySelector('.row').classList.add(`align-items-${textAlignVertical}`); + } + + if (imageAlign) { + block.querySelector('.img-right').style.textAlign = imageAlign; + } +} diff --git a/_src/blocks/carousel/carousel.css b/_src/blocks/carousel/carousel.css new file mode 100644 index 000000000..df2a4cb33 --- /dev/null +++ b/_src/blocks/carousel/carousel.css @@ -0,0 +1,25 @@ +@charset "UTF-8"; +.section.carousel-container { + background-color: black; + color: white; + padding: 10px 0; +} + +.carousel-container .logo { + width: 90px; + margin: 0 1em; +} + +.carousel-container .logo img { + height: auto; + max-width: unset; + width: 90px; +} + +@media (width >= 768px) { + +} + +@media screen and (width >= 991px) { + +} diff --git a/_src/blocks/carousel/carousel.js b/_src/blocks/carousel/carousel.js new file mode 100644 index 000000000..2c6629753 --- /dev/null +++ b/_src/blocks/carousel/carousel.js @@ -0,0 +1,22 @@ +export default function decorate(block) { + const parentBlockStyle = block.closest('.section').style; + const blockStyle = block.style; + const metaData = block.closest('.section').dataset; + const { + contentSize, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom + } = metaData; + const allImages = [...block.children]; + + if (background_color) parentBlockStyle.backgroundColor = background_color; + if (text_color) blockStyle.color = text_color; + if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; + if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; + if (margin_top) blockStyle.marginTop = `${margin_top}rem`; + if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; + + block.innerHTML = ` +
+ ${allImages.length ? allImages.map(item => ``).join('') : ''} +
+ `; +} diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index 38b8862d3..fdd88ea4e 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -48,9 +48,12 @@ function showSlides(carousel, slideNumber) { const columnWidthPx = containerWidth / itemsToShow; for (let i = start; i < end && i < childDivs.length; i += 1) { - childDivs[i].style.opacity = '1'; - childDivs[i].style.position = 'relative'; - childDivs[i].style.width = `${columnWidthPx}px`; + if (childDivs[i]) { + childDivs[i].style.opacity = '1'; + childDivs[i].style.position = 'relative'; + childDivs[i].style.width = `${columnWidthPx}px`; + } + } } diff --git a/_src/blocks/image-columns/image-columns.css b/_src/blocks/image-columns/image-columns.css index 0bd5c01b4..58edf122b 100644 --- a/_src/blocks/image-columns/image-columns.css +++ b/_src/blocks/image-columns/image-columns.css @@ -35,7 +35,7 @@ justify-items: center; } -.image-columns > div > .image-columns-txt-col { +.image-columns.text_smaller > div > .image-columns-txt-col { flex: 0 1 45%; } @@ -91,6 +91,10 @@ margin-top: 0; } +.image-columns.trusted_lp > div > .image-columns-txt-col { + flex: 0 1 25%; +} + @media (min-width: 992px) { .image-columns > div > .image-columns-txt-col h3 { margin-bottom: 26px; @@ -143,4 +147,10 @@ .image-columns-wrapper { max-width: var(--section-large-desktop-max-width); } +} + +@media (width >= 768px) { + .image-columns-container.hide_img .img-container img { + display: none; + } } \ No newline at end of file diff --git a/_src/blocks/image-columns/image-columns.js b/_src/blocks/image-columns/image-columns.js index d36bb2c6e..1d73189cf 100644 --- a/_src/blocks/image-columns/image-columns.js +++ b/_src/blocks/image-columns/image-columns.js @@ -1,5 +1,8 @@ export default function decorate(block) { + const blockParent = block.closest('.image-columns-container'); + const { background_color, type } = blockParent.dataset; const cols = [...block.firstElementChild.children]; + block.classList.add(`columns-${cols.length}-cols`); // setup image columns @@ -14,8 +17,11 @@ export default function decorate(block) { imgContainer.append(picWrapper.children[0]); picWrapper.append(imgContainer); // picture is only content in column - picWrapper.classList.add('image-columns-img-col'); + picWrapper.classList.add('image-columns-img-coll'); } + + const backPosition = type.split('mg-full-')[1]; + blockParent.style.background = `url(${pic.querySelector('img').getAttribute('src').split('?')[0]}) ${backPosition} 0 / 50% auto no-repeat ${background_color || '#000'}`; } else { col.classList.add('image-columns-txt-col'); } diff --git a/_src/blocks/slider/slider.css b/_src/blocks/slider/slider.css new file mode 100644 index 000000000..d7a31deef --- /dev/null +++ b/_src/blocks/slider/slider.css @@ -0,0 +1,21 @@ +@charset "UTF-8"; +.section.slider-container { + color: white; + padding: 10px 0; +} + +.slider-container .logo { + +} + +.slider-container .logo img { + +} + +@media (width >= 768px) { + +} + +@media screen and (width >= 991px) { + +} diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js new file mode 100644 index 000000000..a2d8cc805 --- /dev/null +++ b/_src/blocks/slider/slider.js @@ -0,0 +1,22 @@ +export default function decorate(block) { + const parentBlockStyle = block.closest('.section').style; + const blockStyle = block.style; + const metaData = block.closest('.section').dataset; + const { + type, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom + } = metaData; + const allImages = [...block.children]; + + if (background_color) parentBlockStyle.backgroundColor = background_color; + if (text_color) blockStyle.color = text_color; + if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; + if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; + if (margin_top) blockStyle.marginTop = `${margin_top}rem`; + if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; + + block.innerHTML = ` +
+ ${allImages.length ? allImages.map(item => ``).join('') : ''} +
+ `; +} diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css index e69de29bb..37a9eb2d5 100644 --- a/_src/styles/trusted.css +++ b/_src/styles/trusted.css @@ -0,0 +1,87 @@ +/* tipography */ +.section.trusted_lp .banner h2 { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + text-align: left; +} + +.trusted_lp h1 { + font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; + text-align: left; +} + +.trusted_lp h2 { + font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; + text-align: left; +} + +.trusted_lp h3 { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + text-align: left; +} + +.trusted_lp p { + font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; + text-align: left; +} + +.d-flex { + display: flex; + } + + .justify-between { + justify-content: space-between; + } + + .align-center { + align-items: center; + } + + .d-flex div { + flex: 1; + } + + .blue_bck { + background-color: #006dff; + color: white; + } + +@media (width >= 768px) { + .section.trusted_lp .banner h2 { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + text-align: left; + } + + .trusted_lp h1 { + font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; + text-align: left; + } + + .trusted_lp h2 { + font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; + text-align: left; + } + + .trusted_lp h3 { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + text-align: left; + } + + .trusted_lp p { + font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; + text-align: left; + } +} + +/*@media (min-width: 1600px) { + .row { + max-width: var(--section-large-desktop-max-width); + } +} + +@media (min-width: 992px) { + .row { + max-width: var(--section-desktop-max-width); + padding: 36px 0; + margin: 0 auto; + } +}*/ \ No newline at end of file diff --git a/head.html b/head.html index f0fd2c435..121b0ef19 100644 --- a/head.html +++ b/head.html @@ -3,4 +3,8 @@ - \ No newline at end of file + + + + + \ No newline at end of file From 4716c6ae04b57dc3a3df86a7dc065e8d06690e78 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 19 Feb 2024 14:10:40 +0200 Subject: [PATCH 0098/1296] Adding more general styling + vars --- _src/blocks/banner/banner.css | 9 ++++- _src/styles/trusted.css | 68 +++++++++++++++++++++-------------- 2 files changed, 49 insertions(+), 28 deletions(-) diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index 9fca0c2c8..d98171761 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -103,4 +103,11 @@ bottom: 10px; font-size: 15px; font-style: unset; -} \ No newline at end of file +} + +@media (width >= 768px) { + .section.trusted_lp .banner h2 { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + text-align: left; + } + } \ No newline at end of file diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css index 37a9eb2d5..ddb088ca1 100644 --- a/_src/styles/trusted.css +++ b/_src/styles/trusted.css @@ -1,74 +1,88 @@ +:root { + --blue: #006dff; + --red: #ff2800; + --dark: #010f10; + --dark2: #0c0f14; + --darker: #06080a; + --font-ibm: "IBM Plex Sans", sans-serif; + } + /* tipography */ -.section.trusted_lp .banner h2 { - font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; - text-align: left; +.trusted_lp { + color: white; } .trusted_lp h1 { - font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; + font: normal normal bold 96px/82px var(--font-ibm); text-align: left; } .trusted_lp h2 { - font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; + font: normal normal bold 64px/61px var(--font-ibm); text-align: left; } .trusted_lp h3 { - font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + font: normal normal bold 40px/45px var(--font-ibm); text-align: left; } .trusted_lp p { - font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; + font: normal normal normal 24px/32px var(--font-ibm); text-align: left; } .d-flex { display: flex; - } +} - .justify-between { +.justify-between { justify-content: space-between; - } +} - .align-center { +.align-center { align-items: center; - } +} - .d-flex div { +.d-flex div { flex: 1; - } +} - .blue_bck { - background-color: #006dff; - color: white; - } +.blue_bck { + background-color: var(--blue); +} -@media (width >= 768px) { - .section.trusted_lp .banner h2 { - font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; - text-align: left; - } +.red_bck { + background-color: var(--red); +} +.dark_bck { + background-color: var(--dark); +} + +.dark2_bck { + background-color: var(--dark2); +} + +.darker_bck { + background-color: var(--darker); +} + +@media (width >= 768px) { .trusted_lp h1 { font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; - text-align: left; } .trusted_lp h2 { font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; - text-align: left; } .trusted_lp h3 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; - text-align: left; } .trusted_lp p { font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; - text-align: left; } } From fa832fc5e72bf29a38c4ec75d1ad464a7f35f52e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 19 Feb 2024 14:12:43 +0200 Subject: [PATCH 0099/1296] update --- _src/styles/trusted.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css index ddb088ca1..2a386e6f9 100644 --- a/_src/styles/trusted.css +++ b/_src/styles/trusted.css @@ -10,6 +10,7 @@ /* tipography */ .trusted_lp { color: white; + font-family: "IBM Plex Sans", sans-serif; } .trusted_lp h1 { From 59d831420040eb8d48e8f13c579d3493e0a56860 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 19 Feb 2024 15:35:07 +0200 Subject: [PATCH 0100/1296] update --- _src/blocks/slider/slider.css | 9 ++++----- _src/blocks/slider/slider.js | 12 +++++++++--- _src/styles/trusted.css | 4 ++++ 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/_src/blocks/slider/slider.css b/_src/blocks/slider/slider.css index d7a31deef..876152ee0 100644 --- a/_src/blocks/slider/slider.css +++ b/_src/blocks/slider/slider.css @@ -1,15 +1,14 @@ @charset "UTF-8"; .section.slider-container { - color: white; padding: 10px 0; } -.slider-container .logo { - +.slider-container .slider > div { + flex: 1; } -.slider-container .logo img { - +.slider-container .slider .slider-text img { + width: 275px; } @media (width >= 768px) { diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js index a2d8cc805..2da6b6f61 100644 --- a/_src/blocks/slider/slider.js +++ b/_src/blocks/slider/slider.js @@ -1,11 +1,12 @@ export default function decorate(block) { + block.classList.add('default-content-wrapper'); const parentBlockStyle = block.closest('.section').style; const blockStyle = block.style; const metaData = block.closest('.section').dataset; const { type, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom } = metaData; - const allImages = [...block.children]; + const allSliders = [...block.children]; if (background_color) parentBlockStyle.backgroundColor = background_color; if (text_color) blockStyle.color = text_color; @@ -14,9 +15,14 @@ export default function decorate(block) { if (margin_top) blockStyle.marginTop = `${margin_top}rem`; if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; - block.innerHTML = ` + block.innerHTML = `
- ${allImages.length ? allImages.map(item => ``).join('') : ''} + ${allSliders.length ? allSliders.map(item => { + const [ sliderText, sliderImage ] = [...item.children]; + return `
+
${sliderText.innerHTML}
+
${sliderImage.innerHTML}
`; + }).join('') : ''}
`; } diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css index 2a386e6f9..b62f92070 100644 --- a/_src/styles/trusted.css +++ b/_src/styles/trusted.css @@ -33,6 +33,10 @@ text-align: left; } +.trusted_lp u { + text-decoration: none; +} + .d-flex { display: flex; } From 76114087683aa2f5307de29a7dd246081cc22846 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 20 Feb 2024 10:48:13 +0200 Subject: [PATCH 0101/1296] Updates --- _src/blocks/banner/banner.css | 112 ++++------- _src/blocks/banner/banner.js | 89 ++++----- _src/blocks/carousel/carousel.css | 20 +- _src/blocks/carousel/carousel.js | 54 +++++- _src/blocks/image-columns/image-columns.css | 10 +- _src/blocks/image-columns/image-columns.js | 8 +- _src/blocks/slider/slider.css | 16 +- _src/blocks/slider/slider.js | 18 +- _src/icons/arow_down.png | Bin 0 -> 1050 bytes _src/styles/trusted.css | 200 +++++++++++++++++--- 10 files changed, 355 insertions(+), 172 deletions(-) create mode 100644 _src/icons/arow_down.png diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index d98171761..12e2ee76f 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -9,36 +9,6 @@ width: 100%; } -.section.banner-container .banner .button-container { - display: none; -} - -.section.banner-container .banner ul { - padding-left: 0; -} - -.section.banner-container .banner ul li { - list-style-type: none; - padding-left: 0; - font-size: var(--body-font-size-xs); - line-height: 20px; - color: #000; - text-align: left; - margin-top: 6px; - display: flex; - align-items: flex-start; -} - -.section.banner-container .banner ul li::before { - content: "•"; - color: #4CA154; - font-weight: bold; - display: inline-block; - margin-left: 0; - margin-right: 10px; - font-size: 35px; -} - @media screen and (width >= 991px) { .section.banner-container .banner .button-container { display: block; @@ -47,62 +17,32 @@ width: initial; } } -@media screen and (width <= 991px) { - .banner-container.bckimg-full-right { - background-position: right -19rem top !important; - } -} + @media screen and (width <= 768px) { - .section.banner-container .banner { - padding: 1em 0; - margin-bottom: 1rem !important; - } - .section.normal-padding-mobile .banner { - padding-bottom: 1rem; - } - .section.banner-container .banner h1 { - margin-top: 0; - font-size: 30px; - text-align: left; - } - .section.banner-container .banner h2 { - margin-bottom: 0; - font-size: var(--body-font-size-m); - } - .section.banner-container .banner p { - font-size: 13px; - line-height: 18px; - } - .section.banner-container .banner ul li { - font-size: 11px; - line-height: 16px; - } - .section.banner-container.block-hide-mobile { - display: none !important; - } .section.banner-container.hide-mobile { background-image: unset !important; background-color: #000; } + .section.banner-container.hide-mobile .bck-img { display: none; } -} -.banner a.button { - border: 1px solid white; - color: white; - font-weight: 500; - background-color: transparent; - border-radius: 5px; - padding: 5px 3px 5px 16px; + .section.banner-container em { + position: unset; + bottom: 10px; + font-size: 12px; + line-height: 15px!important; + font-style: unset; + display: block; + } } .banner em { - position: absolute; - bottom: 10px; - font-size: 15px; + font-size: 12px; + line-height: 15px; font-style: unset; + display: block; } @media (width >= 768px) { @@ -110,4 +50,28 @@ font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; text-align: left; } - } \ No newline at end of file + + .section.trusted_lp .banner .banner-left { + padding-right: 5em; + } + + .section.trusted_lp .banner .banner-right { + padding-left: 5em; + } + + .section.trusted_lp.content_right_diff .banner .banner-right img { + margin-left: -5em; + } +} + +@media (width <= 767px) { + .hide_bck_mobile { + background-image: unset!important; + } + + .banner em { + position: absolute; + bottom: 10px; + font-size: 15px; + } +} \ No newline at end of file diff --git a/_src/blocks/banner/banner.js b/_src/blocks/banner/banner.js index c93e8c66f..c0801fe98 100644 --- a/_src/blocks/banner/banner.js +++ b/_src/blocks/banner/banner.js @@ -7,7 +7,7 @@ export default function decorate(block) { const { contentSize, background_color, background_hide, banner_hide, text_color, underlinedInclinedTextColor, textAlignVertical, imageAlign, padding_top, padding_bottom, margin_top, margin_bottom, image_cover } = metaData; - const [contentEl, pictureEl, contentRightEl] = [...block.children]; + const [contentEl, pictureEl, contentRightEl, pictureMobileEl] = [...block.children]; if (image_cover) { parentBlock.classList.add(`bckimg-${image_cover}`); @@ -18,7 +18,7 @@ export default function decorate(block) { const aliasTr = table.querySelector('tr'); // 1st tr shoudlk have an identifier alias }); - if (background_color) parentBlockStyle.backgroundColor = background_color; + if (background_color) block.closest('div.section').style.backgroundColor = background_color; if (text_color) blockStyle.color = text_color; if (underlinedInclinedTextColor) { block.querySelectorAll('em u').forEach((element) => { @@ -35,58 +35,36 @@ export default function decorate(block) { if (background_hide) parentBlock.classList.add(`hide-${background_hide}`); if (banner_hide) parentBlock.classList.add(`block-hide-${banner_hide}`); - if (image_cover && image_cover === 'small') { - blockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat 0 0 / cover ${background_color || '#000'}`; - block.innerHTML = ` -
-
-
${contentEl.innerHTML}
-
-
-
${contentEl.innerHTML}
-
- ${pictureEl.innerHTML} -
-
-
- `; - } else if (image_cover) { - parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top center / 100% ${background_color || '#000'}`; + if (image_cover) { + parentBlockStyle.backgroundImage = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]})`; + parentBlockStyle.backgroundRepeat = 'no-repeat'; + parentBlockStyle.backgroundPosition = 'right 0'; + parentBlockStyle.backgroundColor = background_color || '#000'; - if (image_cover === 'full-left') { - parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top left / auto 100% ${background_color || '#000'}`; - } else if (image_cover === 'full-center') { - parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top center / auto 100% ${background_color || '#000'}`; - } else if (image_cover === 'full-right') { - parentBlockStyle.background = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]}) no-repeat top right / auto 100% ${background_color || '#000'}`; + if (image_cover === 'full-left-50') { + parentBlockStyle.backgroundPosition = 'left 0'; + parentBlockStyle.backgroundSize = '50% auto'; } - block.innerHTML = ` -
-
-
${contentEl.innerHTML}
- ${contentRightEl ? `
${contentRightEl.innerHTML}
` : ''} -
+ if (image_cover === 'full-right-50') { + parentBlockStyle.backgroundPosition = 'right 0'; + parentBlockStyle.backgroundSize = '50% auto'; + } + } + + block.innerHTML = ` +
+ - `; - } else { - block.innerHTML = ` -
-
-
${contentEl.innerHTML}
-
- ${pictureEl.innerHTML} -
-
-
-
- ${pictureEl.innerHTML} -
-
${contentEl.innerHTML}
+ - `; - } +
+ `; if (textAlignVertical) { block.querySelector('.row').classList.add(`align-items-${textAlignVertical}`); @@ -95,4 +73,19 @@ export default function decorate(block) { if (imageAlign) { block.querySelector('.img-right').style.textAlign = imageAlign; } + + // creating scroll down icon: + const mouseScrollDiv = `
+
+
+
+
+ + +
+
`; + + if (!block.querySelector('#mouse-scroll')) { + block.innerHTML += mouseScrollDiv; + } } diff --git a/_src/blocks/carousel/carousel.css b/_src/blocks/carousel/carousel.css index df2a4cb33..555cf9026 100644 --- a/_src/blocks/carousel/carousel.css +++ b/_src/blocks/carousel/carousel.css @@ -5,17 +5,31 @@ padding: 10px 0; } -.carousel-container .logo { - width: 90px; +.carousel-container .carousel-item { margin: 0 1em; } -.carousel-container .logo img { +.carousel-container .carousel-item img { height: auto; max-width: unset; width: 90px; } +#carousel-box { + width: 100%; + overflow: hidden; +} + +#carousel { + display: flex; + transition: transform 0.5s ease-in-out; +} + +.carousel-item { + flex: 0 0 auto; + box-sizing: border-box; +} + @media (width >= 768px) { } diff --git a/_src/blocks/carousel/carousel.js b/_src/blocks/carousel/carousel.js index 2c6629753..fc23982e7 100644 --- a/_src/blocks/carousel/carousel.js +++ b/_src/blocks/carousel/carousel.js @@ -15,8 +15,58 @@ export default function decorate(block) { if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; block.innerHTML = ` -
- ${allImages.length ? allImages.map(item => ``).join('') : ''} + `; + + const carousel = block.querySelector('#carousel'); + const container = block.querySelector('#carousel-box'); + const items = block.querySelectorAll('.carousel-item'); + const visibleItems = 13; + + // set item width + function setItemWidth() { + const itemWidth = window.screen.width / visibleItems; + items.forEach(item => { + item.style.minWidth = `${itemWidth}px`; + }); + } + setItemWidth(); // Set initial item width + window.addEventListener('resize', setItemWidth); + + // duplicate items in the carousel - for infinit loop + function duplicateItems() { + const clonedItems = Array.from(items).map(item => item.cloneNode(true)); + carousel.append(...clonedItems); + } + duplicateItems(); + + let currentIndex = 0; + function updateCarousel() { + const itemWidth = container.clientWidth / visibleItems; + carousel.style.transform = `translateX(${-currentIndex * itemWidth}px)`; + } + + function next() { + currentIndex++; + duplicateItems(); // Duplicate items when reaching the end + updateCarousel(); + } + + function prev() { + currentIndex = (currentIndex - 1 + items.length) % items.length; + updateCarousel(); + } + + // Set initial width and update on window resize + window.addEventListener('resize', updateCarousel); + updateCarousel(); + + // Duplicate items periodically + setInterval(duplicateItems, 4000); + // Continuous scroll + setInterval(next, 2000); } diff --git a/_src/blocks/image-columns/image-columns.css b/_src/blocks/image-columns/image-columns.css index 58edf122b..6322a6b49 100644 --- a/_src/blocks/image-columns/image-columns.css +++ b/_src/blocks/image-columns/image-columns.css @@ -39,6 +39,10 @@ flex: 0 1 45%; } +.image-columns > div > .image-columns-txt-col { + flex: 0 1 25%; +} + .image-columns > div > .image-columns-img-col .img-container { max-width: 645px; width: 100%; @@ -147,10 +151,4 @@ .image-columns-wrapper { max-width: var(--section-large-desktop-max-width); } -} - -@media (width >= 768px) { - .image-columns-container.hide_img .img-container img { - display: none; - } } \ No newline at end of file diff --git a/_src/blocks/image-columns/image-columns.js b/_src/blocks/image-columns/image-columns.js index 1d73189cf..d36bb2c6e 100644 --- a/_src/blocks/image-columns/image-columns.js +++ b/_src/blocks/image-columns/image-columns.js @@ -1,8 +1,5 @@ export default function decorate(block) { - const blockParent = block.closest('.image-columns-container'); - const { background_color, type } = blockParent.dataset; const cols = [...block.firstElementChild.children]; - block.classList.add(`columns-${cols.length}-cols`); // setup image columns @@ -17,11 +14,8 @@ export default function decorate(block) { imgContainer.append(picWrapper.children[0]); picWrapper.append(imgContainer); // picture is only content in column - picWrapper.classList.add('image-columns-img-coll'); + picWrapper.classList.add('image-columns-img-col'); } - - const backPosition = type.split('mg-full-')[1]; - blockParent.style.background = `url(${pic.querySelector('img').getAttribute('src').split('?')[0]}) ${backPosition} 0 / 50% auto no-repeat ${background_color || '#000'}`; } else { col.classList.add('image-columns-txt-col'); } diff --git a/_src/blocks/slider/slider.css b/_src/blocks/slider/slider.css index 876152ee0..654d3d878 100644 --- a/_src/blocks/slider/slider.css +++ b/_src/blocks/slider/slider.css @@ -11,10 +11,20 @@ width: 275px; } -@media (width >= 768px) { +.slider-container .container-fluid .slider-item { + overflow-x: hidden; + display: flex; +} +.slider-container .slider-item { + min-width: 50vw; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-size: 4ch; } -@media screen and (width >= 991px) { +@media (width >= 768px) { -} +} \ No newline at end of file diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js index 2da6b6f61..c0b442b83 100644 --- a/_src/blocks/slider/slider.js +++ b/_src/blocks/slider/slider.js @@ -1,8 +1,9 @@ export default function decorate(block) { block.classList.add('default-content-wrapper'); - const parentBlockStyle = block.closest('.section').style; + const parentBlock = block.closest('.section'); + const parentBlockStyle = parentBlock.style; const blockStyle = block.style; - const metaData = block.closest('.section').dataset; + const metaData = parentBlock.dataset; const { type, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom } = metaData; @@ -15,14 +16,21 @@ export default function decorate(block) { if (margin_top) blockStyle.marginTop = `${margin_top}rem`; if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; - block.innerHTML = ` + block.innerHTML = `
${allSliders.length ? allSliders.map(item => { const [ sliderText, sliderImage ] = [...item.children]; - return `
+ return `
${sliderText.innerHTML}
-
${sliderImage.innerHTML}
`; +
${sliderImage.innerHTML}
+
`; }).join('') : ''}
`; + + parentBlock.addEventListener("wheel", (evt) => { + evt.preventDefault(); + parentBlock.scrollLeft += evt.deltaY; + console.log(evt.deltaY) + }); } diff --git a/_src/icons/arow_down.png b/_src/icons/arow_down.png new file mode 100644 index 0000000000000000000000000000000000000000..194b19a3b3a88f0378b4c7e4335be76f4387e429 GIT binary patch literal 1050 zcmaJ=TSyd97#>?w5j8>xl&Hhl723J%#dU|>R(EGNw;GXkK_LQXXU@8#&YW@P*o;CK zl!AIGddyyW34#!*w~CVTMd~F&2*DR$dI`Eb6$N%ich?@;2F{#we*W+KZ{N8&IB=%5 zxwDy~sMc)1nDchB_BAz-f1)exkgWr!NAM6TVn?5T08Fs^PAG)2V{t|==M5Q737(~LO%<@qZbXlk4u4ojS5reI0ypS9r7 z>_A?bolv4Goj46*u0RNMh-KjFlZGw0aeA9qAZO3a(qP*KPsHh+q(-DckU|y&QHJ*` z92WqQC{qlEL$IhsxKkj&1%fQkvs~2A2LvuGgoB{`(IlXy7KNOcDTgDsI9wqX(rZ?0X#;zfTnSrCduwpp_^4& z!!CD<^o(_7ljRxCtE%ECN&k1%^{Tgxb8t7`e-hjI856QOXrpOMA+sxXd7(@pWkDGu zE054*rICXrgpplBCJ2O?5I8Zc87gw@liL7E60(MkWkZ2kF-{W-M$=TGJC#hOf~jyS z6H4-YI-L|Fp)@gOLXk+MM-(eq5h>F;G;js0?qa)ZVm&$NCW$OUOS=TsjD>WtU9+Io z&LvoruZ&e|=Mt)kWl1uuH`%`?T`>{)c*m-A$)zfOXb{C)MB4kE{ycdWx3Xei-d!*J z*xE|?4m|#Pcu&vLYLFjo+!$Oxv~Yxx-nFi z1y|Zuw)*b9?AyEXtyHg-=AV38F8us;wf%EE)syiw^1O47nJ^%m! literal 0 HcmV?d00001 diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css index b62f92070..1483c28f7 100644 --- a/_src/styles/trusted.css +++ b/_src/styles/trusted.css @@ -14,22 +14,22 @@ } .trusted_lp h1 { - font: normal normal bold 96px/82px var(--font-ibm); + font: normal normal bold 44px/42px var(--font-ibm); text-align: left; } .trusted_lp h2 { - font: normal normal bold 64px/61px var(--font-ibm); + font: normal normal bold 31px/33px var(--font-ibm); text-align: left; } .trusted_lp h3 { - font: normal normal bold 40px/45px var(--font-ibm); + font: normal normal bold 20px/24px var(--font-ibm); text-align: left; } .trusted_lp p { - font: normal normal normal 24px/32px var(--font-ibm); + font: normal normal normal 16px/22px var(--font-ibm); text-align: left; } @@ -37,42 +37,190 @@ text-decoration: none; } -.d-flex { - display: flex; +.trusted_lp .d-flex { + display: block; } -.justify-between { +.trusted_lp .justify-between { justify-content: space-between; } -.align-center { +.trusted_lp .align-top { + align-items: top; +} + +.trusted_lp .align-center { align-items: center; } -.d-flex div { +.trusted_lp .align-end { + align-items: end; +} + +.trusted_lp .d-flex div { flex: 1; } -.blue_bck { +.trusted_lp.blue_bck { background-color: var(--blue); } -.red_bck { +.trusted_lp.red_bck { background-color: var(--red); } -.dark_bck { +.trusted_lp.dark_bck { background-color: var(--dark); } -.dark2_bck { +.trusted_lp.dark2_bck { background-color: var(--dark2); } -.darker_bck { +.trusted_lp.darker_bck { background-color: var(--darker); } +.trusted_lp .only-desktop { + display: none; +} + +.trusted_lp .only-mobile { + display: block; +} + +.trusted_lp a.button { + border: 1px solid white; + color: white; + font-weight: 500; + background-color: transparent; + border-radius: 5px; + padding: 5px 3px 5px 16px; +} + +/* mouse-scroll */ +.trusted_lp #mouse-scroll { + display: block; +} + +.trusted_lp #mouse-scroll { + position: fixed; + margin: auto; + left: 20%; + top: 17em; + -webkit-transform: translateX(-20%); + z-index: 9999; +} + +.trusted_lp #mouse-scroll span { + display: block; + /*width: 5px; + height: 5px; + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + transform: rotate(45deg); + border-right: 2px solid #fff; + border-bottom: 2px solid #fff;*/ + width: 13px; + height: 15px; + background: url('../icons/arow_down.png') 0 0 no-repeat transparent; + margin: 3px auto; +} + +.trusted_lp #mouse-scroll .mouse { + height: 60px; + width: 38px; + border-radius: 30px; + -webkit-transform: none; + -ms-transform: none; + transform: none; + border: 2px solid #ffffff; + top: 170px; + margin-bottom: 9px; +} + +.trusted_lp #mouse-scroll .down-arrow-1 { + margin-top: 6px; +} + +.trusted_lp #mouse-scroll .down-arrow-1, .trusted_lp #mouse-scroll .down-arrow-2, .trusted_lp #mouse-scroll .down-arrow-3 { + -webkit-animation: mouse-scroll 1s infinite; + -moz-animation: mouse-scroll 1s infinite; +} + +.trusted_lp #mouse-croll .down-arrow-1 { + -webkit-animation-delay: .1s; + -moz-animation-delay: .1s; + -webkit-animation-direction: alternate; +} + +.trusted_lp #mouse-scroll .down-arrow-2 { + -webkit-animation-delay: .2s; + -moz-animation-delay: .2s; + -webkit-animation-direction: alternate; +} + +.trusted_lp #mouse-scroll .down-arrow-3 { + -webkit-animation-delay: .3s; + -moz-animation-dekay: .3s; + -webkit-animation-direction: alternate; +} + +.trusted_lp #mouse-scroll .mouse-in { + height: 10px; + width: 6px; + display: block; + border-radius: 5px; + margin: 5px auto; + background: transparent; + border: 1px solid white; +} + +.trusted_lp #mouse-scroll .mouse-in { + -webkit-animation: animated-mouse 1.2s ease infinite; + -moz-animation: mouse-animated 1.2s ease infinite; +} + +@-webkit-keyframes animated-mouse { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + 100% { + opacity: 0; + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + } +} + +@-webkit-keyframes mouse-scroll { + 0% { + opacity: 1; + } + 50% { + opacity: .5; + } + 100% { + opacity: 1; + } +} + +@keyframes mouse-scroll { + 0% { + opacity: 0; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} + @media (width >= 768px) { .trusted_lp h1 { font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; @@ -89,18 +237,22 @@ .trusted_lp p { font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; } -} -/*@media (min-width: 1600px) { - .row { - max-width: var(--section-large-desktop-max-width); + .trusted_lp .d-flex { + display: flex; + } + + .trusted_lp .only-desktop { + display: block; + } + + .trusted_lp .only-mobile { + display: none; } } -@media (min-width: 992px) { - .row { - max-width: var(--section-desktop-max-width); - padding: 36px 0; - margin: 0 auto; +@media (width <= 768px) { + .trusted_lp .default-content-wrapper { + padding: 1em!important; } -}*/ \ No newline at end of file +} \ No newline at end of file From fa5b7fb2a624258ed17bde39de8aeb87dd5878b6 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 20 Feb 2024 15:49:04 +0200 Subject: [PATCH 0102/1296] box-carousel --- _src/blocks/box-carousel/box-carousel.css | 116 +++++++++++++++++++++ _src/blocks/box-carousel/box-carousel.js | 119 ++++++++++++++++++++++ _src/blocks/features/features.css | 2 +- _src/scripts/lib-franklin.js | 8 +- 4 files changed, 240 insertions(+), 5 deletions(-) create mode 100644 _src/blocks/box-carousel/box-carousel.css create mode 100644 _src/blocks/box-carousel/box-carousel.js diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css new file mode 100644 index 000000000..89da3267d --- /dev/null +++ b/_src/blocks/box-carousel/box-carousel.css @@ -0,0 +1,116 @@ +main { + background: black; +} + +.box-carousel-container .box-carousel { +} + +.box-carousel-container .carousel-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.box-carousel-container .carousel-header .title { + color: white; +} + +.box-carousel-container .carousel-header .left-arrow, +.box-carousel-container .carousel-header .right-arrow { + /*font-size: 40px;*/ + color: white; +} + +.box-carousel-container .carousel-header .left-arrow { + /*margin-left: 40%;*/ +} + +.box-carousel-container .carousel-header .right-arrow { + /*margin-left: 50px;*/ +} + +.carousel-container { + /*overflow: hidden;*/ + width: 100%; /* Container width */ + position: relative; + display: flex; /* To center the carousel item */ + /*justify-content: center; !* Center carousel item *!*/ +} + +.carousel { + display: flex; + transition: transform 150ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; +} + +.carousel-item { + width: 290px; /* Square dimensions */ + height: 290px; /* Square dimensions */ + margin: 10px; /* Space between items */ + box-sizing: border-box; + padding: 20px; + // background-color: #0044CC; /* Example blue color */ + border: 3px solid #006dff; /* Blue border */ + border-radius: 15px; + color: white; + font-size: 1em; /* Adjust font size as needed */ +} + +.carousel-item:first-child { + margin-left: 0; +} + +.carousel-item.active { + background: #006dff; + box-shadow: 0px 0px 20px 0px #006dff; + color: black; +} + +.carousel-item .title { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + line-clamp: 1; + -webkit-box-orient: vertical; + margin: 15px 0; +} + +.carousel-item .subtitle { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; +} + +.left-arrow svg { + transform: rotate(180deg); +} + +.arrow { + width: 100px; +} + +.arrow svg { + width: 100%; + height: 50px; +} + +.arrow svg path { + fill: white; +} + +.arrow.disabled svg path { + fill: #a5a5a5; +} + +@media screen and (min-width: 768px) { + .box-carousel-container .carousel-header { + justify-content: flex-start; + margin-bottom: 20px; + } + + .box-carousel-container .carousel-header .left-arrow { + margin-left: auto; + } +} diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js new file mode 100644 index 000000000..6a8e5d1c7 --- /dev/null +++ b/_src/blocks/box-carousel/box-carousel.js @@ -0,0 +1,119 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; + +export default async function decorate(block) { + const [titleEl, ...slides] = [...block.children]; + let currentSlideIndex = 0; + + const carouselItemStyle = { + margin: 20, + width: 290, + }; + + block.classList.add('default-content-wrapper'); + + block.innerHTML = ` + + + + `; + + decorateIcons(block); + + const carousel = block.querySelector('.carousel'); + + function isFirstIndex() { + return currentSlideIndex === 0; + } + + function isLastIndex() { + return currentSlideIndex === slides.length; + } + + function scrollCarousel(offset) { + carousel.style.transform = `translateX(${-1 * offset * (carouselItemStyle.width + carouselItemStyle.margin)}px)`; + } + + function updateDisabledArrow() { + const leftArrowEl = block.querySelector('.left-arrow'); + const rightArrowEl = block.querySelector('.right-arrow'); + + leftArrowEl.classList.remove('disabled'); + rightArrowEl.classList.remove('disabled'); + + if (isLastIndex()) { + block.querySelector('.right-arrow').classList.add('disabled'); + return; + } + + if (isFirstIndex()) { + block.querySelector('.left-arrow').classList.add('disabled'); + } + } + + function updateActiveCard(slideIndex) { + block.querySelector('.carousel-item.active').classList.remove('active'); + block.querySelector(`.carousel-item:nth-child(${slideIndex + 1})`).classList.add('active'); + } + + block.querySelector('.left-arrow').addEventListener('click', (e) => { + e.preventDefault(); + if (isFirstIndex()) { + return; + } + currentSlideIndex -= 1; + scrollCarousel(currentSlideIndex); + updateDisabledArrow(currentSlideIndex); + updateActiveCard(currentSlideIndex); + }); + + block.querySelector('.right-arrow').addEventListener('click', (e) => { + e.preventDefault(); + if (isLastIndex()) { + return; + } + currentSlideIndex += 1; + scrollCarousel(currentSlideIndex); + updateDisabledArrow(currentSlideIndex); + updateActiveCard(currentSlideIndex); + }); +} diff --git a/_src/blocks/features/features.css b/_src/blocks/features/features.css index 968a59495..3c6946251 100644 --- a/_src/blocks/features/features.css +++ b/_src/blocks/features/features.css @@ -91,7 +91,7 @@ height: 8px; margin: 0 3px; background: url("/_src/icons/tabs_arrow.svg") no-repeat; - background-size: 100%;; + background-size: 100%; transform: rotate(180deg); transition: all .3s linear; } diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 414f04070..c532f8805 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -149,9 +149,9 @@ export function getMetadata(name) { export function toClassName(name) { return typeof name === 'string' ? name.toLowerCase() - .replace(/[^\w\u4e00-\u9fa5]/g, '-') // Include Chinese characters in the regular expression - .replace(/-+/g, '-') // Replace consecutive hyphens with a single hyphen - .replace(/^-|-$/g, '') // Remove leading and trailing hyphens + .replace(/[^\w\u4e00-\u9fa5]/g, '-') // Include Chinese characters in the regular expression + .replace(/-+/g, '-') // Replace consecutive hyphens with a single hyphen + .replace(/^-|-$/g, '') // Remove leading and trailing hyphens : ''; } @@ -202,7 +202,7 @@ export async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - const dynamicIconsSharepointPath = `/${window.location.pathname.split('/')[1]}/solutions/icons/`; + const dynamicIconsSharepointPath = `/${window.location.pathname.split('/')[1]}/icons/`; const response = await fetch(`${dynamicIconsSharepointPath}${iconName}.svg`); if (!response.ok) { ICONS_CACHE[iconName] = false; From 4f7715cc4cebd2877f6ba2884319a6ca64fabdaf Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 20 Feb 2024 15:54:19 +0200 Subject: [PATCH 0103/1296] Updates --- _src/blocks/banner/banner.js | 6 +- _src/blocks/slider/slider.js | 2 +- _src/blocks/video/video.css | 74 ++++++++++++++++++++++++ _src/blocks/video/video.js | 108 +++++++++++++++++++++++++++++++++++ _src/styles/trusted.css | 18 +++++- 5 files changed, 203 insertions(+), 5 deletions(-) create mode 100644 _src/blocks/video/video.css create mode 100644 _src/blocks/video/video.js diff --git a/_src/blocks/banner/banner.js b/_src/blocks/banner/banner.js index c0801fe98..c23d3d01a 100644 --- a/_src/blocks/banner/banner.js +++ b/_src/blocks/banner/banner.js @@ -30,7 +30,7 @@ export default function decorate(block) { if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; if (margin_top) blockStyle.marginTop = `${margin_top}rem`; - if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; + if (margin_bottom) blockStyle.marginBottom = `${margin_bottom}rem`; if (background_hide) parentBlock.classList.add(`hide-${background_hide}`); if (banner_hide) parentBlock.classList.add(`block-hide-${banner_hide}`); @@ -43,12 +43,12 @@ export default function decorate(block) { if (image_cover === 'full-left-50') { parentBlockStyle.backgroundPosition = 'left 0'; - parentBlockStyle.backgroundSize = '50% auto'; + parentBlockStyle.backgroundSize = '50% 100%'; } if (image_cover === 'full-right-50') { parentBlockStyle.backgroundPosition = 'right 0'; - parentBlockStyle.backgroundSize = '50% auto'; + parentBlockStyle.backgroundSize = '50% 100%'; } } diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js index c0b442b83..cf9e0e72c 100644 --- a/_src/blocks/slider/slider.js +++ b/_src/blocks/slider/slider.js @@ -29,7 +29,7 @@ export default function decorate(block) { `; parentBlock.addEventListener("wheel", (evt) => { - evt.preventDefault(); + // evt.preventDefault(); parentBlock.scrollLeft += evt.deltaY; console.log(evt.deltaY) }); diff --git a/_src/blocks/video/video.css b/_src/blocks/video/video.css new file mode 100644 index 000000000..f615ab1b2 --- /dev/null +++ b/_src/blocks/video/video.css @@ -0,0 +1,74 @@ +.video { + width: unset; + text-align: center; + max-width: 800px; + margin-top: 32px; + margin-bottom: 32px; +} +.video.lazy-loading { + /* reserve an approximate space to avoid extensive layout shifts */ + aspect-ratio: 16/9; +} +.video > div { + display: flex; + justify-content: center; +} +.video.left { + margin-right: auto; +} +.video.center { + margin-left: auto; + margin-right: auto; +} +.video.right { + margin-left: auto; +} +.video video { + max-width: 100%; +} +.video video[data-loading] { + /* reserve an approximate space to avoid extensive layout shifts */ + width: 100%; + aspect-ratio: 16/9; +} +.video .video-placeholder { + width: 100%; + aspect-ratio: 16/9; + position: relative; +} +.video .video-placeholder > * { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + inset: 0; +} +.video .video-placeholder picture img { + width: 100%; + height: 100%; + object-fit: cover; +} +.video .video-placeholder-play button { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(3); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 20px; + padding: 0; +} +.video .video-placeholder-play button::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 0; + height: 10px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 6px solid; + top: 4px; + left: 7px; +} \ No newline at end of file diff --git a/_src/blocks/video/video.js b/_src/blocks/video/video.js new file mode 100644 index 000000000..482179405 --- /dev/null +++ b/_src/blocks/video/video.js @@ -0,0 +1,108 @@ +/* + * Video Block + * Show a video referenced by a link + * https://www.hlx.live/developer/block-collection/video + */ +function embedYoutube(url, autoplay) { + const usp = new URLSearchParams(url.search); + const suffix = autoplay ? '&muted=1&autoplay=1' : ''; + let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : ''; + const embed = url.pathname; + if (url.origin.includes('youtu.be')) { + [, vid] = url.pathname.split('/'); + } + return `
+ +
`; +} + +function embedVimeo(url, autoplay) { + const [, video] = url.pathname.split('/'); + const suffix = autoplay ? '?muted=1&autoplay=1' : ''; + return `
+ +
`; +} + +function getVideoElement(source, autoplay) { + const video = document.createElement('video'); + video.setAttribute('controls', ''); + video.dataset.loading = 'true'; + video.addEventListener('loadedmetadata', () => delete video.dataset.loading); + if (autoplay) video.setAttribute('autoplay', ''); + + const sourceEl = document.createElement('source'); + sourceEl.setAttribute('src', source); + sourceEl.setAttribute('type', `video/${source.split('.').pop()}`); + video.append(sourceEl); + + return video; +} + +const loadVideoEmbed = (block, link, autoplay) => { + if (block.dataset.embedIsLoaded) { + return; + } + const url = new URL(link); + + const isYoutube = link.includes('youtube') || link.includes('youtu.be'); + const isVimeo = link.includes('vimeo'); + const isMp4 = link.includes('.mp4'); + + if (isYoutube) { + block.innerHTML = embedYoutube(url, autoplay); + } else if (isVimeo) { + block.innerHTML = embedVimeo(url, autoplay); + } else if (isMp4) { + block.textContent = ''; + block.append(getVideoElement(link, autoplay)); + } + + block.dataset.embedIsLoaded = true; +}; + +const DESKTOP_ALIGN_ENUM = { + left: 'left', + right: 'right', + center: 'center', +}; + +function positionVideoContainer(block, desktopAlign) { + block.classList.add(DESKTOP_ALIGN_ENUM[desktopAlign] || DESKTOP_ALIGN_ENUM.LEFT); +} + +export default async function decorate(block) { + block.classList.add('default-content-wrapper'); + block.closest('.section').style.padding = '0'; + const { desktopAlign } = block.closest('.section').dataset; // left / middle / right + const placeholder = block.querySelector('picture'); + const link = block.querySelector('a').href; + block.textContent = ''; + + positionVideoContainer(block, desktopAlign); + + if (placeholder) { + const wrapper = document.createElement('div'); + wrapper.className = 'video-placeholder'; + wrapper.innerHTML = '
'; + wrapper.prepend(placeholder); + wrapper.addEventListener('click', () => { + loadVideoEmbed(block, link, true); + }); + block.append(wrapper); + } else { + block.classList.add('lazy-loading'); + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + observer.disconnect(); + loadVideoEmbed(block, link, false); + block.classList.remove('lazy-loading'); + } + }); + observer.observe(block); + } +} diff --git a/_src/styles/trusted.css b/_src/styles/trusted.css index 1483c28f7..718fb5502 100644 --- a/_src/styles/trusted.css +++ b/_src/styles/trusted.css @@ -13,6 +13,18 @@ font-family: "IBM Plex Sans", sans-serif; } +.trusted_lp div[data-align="right"] { + text-align: right; +} + +.trusted_lp div[data-align="left"] { + text-align: left; +} + +.trusted_lp div[data-align="center"] { + text-align: center; +} + .trusted_lp h1 { font: normal normal bold 44px/42px var(--font-ibm); text-align: left; @@ -37,6 +49,10 @@ text-decoration: none; } +.trusted_lp.blue_tag u { + color: var(--blue); +} + .trusted_lp .d-flex { display: block; } @@ -106,7 +122,7 @@ .trusted_lp #mouse-scroll { position: fixed; margin: auto; - left: 20%; + left: 10%; top: 17em; -webkit-transform: translateX(-20%); z-index: 9999; From 806e0e9076678ef52e735f5536f5114c59f14747 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 20 Feb 2024 17:35:08 +0200 Subject: [PATCH 0104/1296] css incapsulation fixes --- _src/blocks/box-carousel/box-carousel.css | 49 ++++++++--------------- _src/scripts/vendor/particles.min.js | 9 +++++ 2 files changed, 26 insertions(+), 32 deletions(-) create mode 100644 _src/scripts/vendor/particles.min.js diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 89da3267d..07265c8ba 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -1,10 +1,7 @@ -main { +.box-carousel-container { background: black; } -.box-carousel-container .box-carousel { -} - .box-carousel-container .carousel-header { display: flex; align-items: center; @@ -17,55 +14,43 @@ main { .box-carousel-container .carousel-header .left-arrow, .box-carousel-container .carousel-header .right-arrow { - /*font-size: 40px;*/ color: white; } -.box-carousel-container .carousel-header .left-arrow { - /*margin-left: 40%;*/ -} - -.box-carousel-container .carousel-header .right-arrow { - /*margin-left: 50px;*/ -} - -.carousel-container { - /*overflow: hidden;*/ - width: 100%; /* Container width */ +.box-carousel-container .carousel-container { + width: 100%; position: relative; - display: flex; /* To center the carousel item */ - /*justify-content: center; !* Center carousel item *!*/ + display: flex; } -.carousel { +.box-carousel-container .carousel { display: flex; transition: transform 150ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; } -.carousel-item { +.box-carousel-container .carousel-item { width: 290px; /* Square dimensions */ height: 290px; /* Square dimensions */ margin: 10px; /* Space between items */ box-sizing: border-box; padding: 20px; - // background-color: #0044CC; /* Example blue color */ - border: 3px solid #006dff; /* Blue border */ + border: 3px solid #006dff; border-radius: 15px; color: white; - font-size: 1em; /* Adjust font size as needed */ + font-size: 1em; } -.carousel-item:first-child { +.box-carousel-container .carousel-item:first-child { margin-left: 0; } -.carousel-item.active { +.box-carousel-container .carousel-item.active { background: #006dff; box-shadow: 0px 0px 20px 0px #006dff; color: black; } -.carousel-item .title { +.box-carousel-container .carousel-item .title { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; overflow: hidden; display: -webkit-box; @@ -75,7 +60,7 @@ main { margin: 15px 0; } -.carousel-item .subtitle { +.box-carousel-container .carousel-item .subtitle { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; @@ -83,24 +68,24 @@ main { -webkit-box-orient: vertical; } -.left-arrow svg { +.box-carousel-container .left-arrow svg { transform: rotate(180deg); } -.arrow { +.box-carousel-container .arrow { width: 100px; } -.arrow svg { +.box-carousel-container .arrow svg { width: 100%; height: 50px; } -.arrow svg path { +.box-carousel-container .arrow svg path { fill: white; } -.arrow.disabled svg path { +.box-carousel-container .arrow.disabled svg path { fill: #a5a5a5; } diff --git a/_src/scripts/vendor/particles.min.js b/_src/scripts/vendor/particles.min.js new file mode 100644 index 000000000..b3d46d127 --- /dev/null +++ b/_src/scripts/vendor/particles.min.js @@ -0,0 +1,9 @@ +/* ----------------------------------------------- +/* Author : Vincent Garreau - vincentgarreau.com +/* MIT license: http://opensource.org/licenses/MIT +/* Demo / Generator : vincentgarreau.com/particles.js +/* GitHub : github.com/VincentGarreau/particles.js +/* How to use? : Check the GitHub README +/* v2.0.0 +/* ----------------------------------------------- */ +function hexToRgb(e){var a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,function(e,a,t,i){return a+a+t+t+i+i});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function clamp(e,a,t){return Math.min(Math.max(e,a),t)}function isInArray(e,a){return a.indexOf(e)>-1}var pJS=function(e,a){var t=document.querySelector("#"+e+" > .particles-js-canvas-el");this.pJS={canvas:{el:t,w:t.offsetWidth,h:t.offsetHeight},particles:{number:{value:400,density:{enable:!0,value_area:800}},color:{value:"#fff"},shape:{type:"circle",stroke:{width:0,color:"#ff0000"},polygon:{nb_sides:5},image:{src:"",width:100,height:100}},opacity:{value:1,random:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}},array:[]},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}},mouse:{}},retina_detect:!1,fn:{interact:{},modes:{},vendors:{}},tmp:{}};var i=this.pJS;a&&Object.deepExtend(i,a),i.tmp.obj={size_value:i.particles.size.value,size_anim_speed:i.particles.size.anim.speed,move_speed:i.particles.move.speed,line_linked_distance:i.particles.line_linked.distance,line_linked_width:i.particles.line_linked.width,mode_grab_distance:i.interactivity.modes.grab.distance,mode_bubble_distance:i.interactivity.modes.bubble.distance,mode_bubble_size:i.interactivity.modes.bubble.size,mode_repulse_distance:i.interactivity.modes.repulse.distance},i.fn.retinaInit=function(){i.retina_detect&&window.devicePixelRatio>1?(i.canvas.pxratio=window.devicePixelRatio,i.tmp.retina=!0):(i.canvas.pxratio=1,i.tmp.retina=!1),i.canvas.w=i.canvas.el.offsetWidth*i.canvas.pxratio,i.canvas.h=i.canvas.el.offsetHeight*i.canvas.pxratio,i.particles.size.value=i.tmp.obj.size_value*i.canvas.pxratio,i.particles.size.anim.speed=i.tmp.obj.size_anim_speed*i.canvas.pxratio,i.particles.move.speed=i.tmp.obj.move_speed*i.canvas.pxratio,i.particles.line_linked.distance=i.tmp.obj.line_linked_distance*i.canvas.pxratio,i.interactivity.modes.grab.distance=i.tmp.obj.mode_grab_distance*i.canvas.pxratio,i.interactivity.modes.bubble.distance=i.tmp.obj.mode_bubble_distance*i.canvas.pxratio,i.particles.line_linked.width=i.tmp.obj.line_linked_width*i.canvas.pxratio,i.interactivity.modes.bubble.size=i.tmp.obj.mode_bubble_size*i.canvas.pxratio,i.interactivity.modes.repulse.distance=i.tmp.obj.mode_repulse_distance*i.canvas.pxratio},i.fn.canvasInit=function(){i.canvas.ctx=i.canvas.el.getContext("2d")},i.fn.canvasSize=function(){i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i&&i.interactivity.events.resize&&window.addEventListener("resize",function(){i.canvas.w=i.canvas.el.offsetWidth,i.canvas.h=i.canvas.el.offsetHeight,i.tmp.retina&&(i.canvas.w*=i.canvas.pxratio,i.canvas.h*=i.canvas.pxratio),i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i.particles.move.enable||(i.fn.particlesEmpty(),i.fn.particlesCreate(),i.fn.particlesDraw(),i.fn.vendors.densityAutoParticles()),i.fn.vendors.densityAutoParticles()})},i.fn.canvasPaint=function(){i.canvas.ctx.fillRect(0,0,i.canvas.w,i.canvas.h)},i.fn.canvasClear=function(){i.canvas.ctx.clearRect(0,0,i.canvas.w,i.canvas.h)},i.fn.particle=function(e,a,t){if(this.radius=(i.particles.size.random?Math.random():1)*i.particles.size.value,i.particles.size.anim.enable&&(this.size_status=!1,this.vs=i.particles.size.anim.speed/100,i.particles.size.anim.sync||(this.vs=this.vs*Math.random())),this.x=t?t.x:Math.random()*i.canvas.w,this.y=t?t.y:Math.random()*i.canvas.h,this.x>i.canvas.w-2*this.radius?this.x=this.x-this.radius:this.x<2*this.radius&&(this.x=this.x+this.radius),this.y>i.canvas.h-2*this.radius?this.y=this.y-this.radius:this.y<2*this.radius&&(this.y=this.y+this.radius),i.particles.move.bounce&&i.fn.vendors.checkOverlap(this,t),this.color={},"object"==typeof e.value)if(e.value instanceof Array){var s=e.value[Math.floor(Math.random()*i.particles.color.value.length)];this.color.rgb=hexToRgb(s)}else void 0!=e.value.r&&void 0!=e.value.g&&void 0!=e.value.b&&(this.color.rgb={r:e.value.r,g:e.value.g,b:e.value.b}),void 0!=e.value.h&&void 0!=e.value.s&&void 0!=e.value.l&&(this.color.hsl={h:e.value.h,s:e.value.s,l:e.value.l});else"random"==e.value?this.color.rgb={r:Math.floor(256*Math.random())+0,g:Math.floor(256*Math.random())+0,b:Math.floor(256*Math.random())+0}:"string"==typeof e.value&&(this.color=e,this.color.rgb=hexToRgb(this.color.value));this.opacity=(i.particles.opacity.random?Math.random():1)*i.particles.opacity.value,i.particles.opacity.anim.enable&&(this.opacity_status=!1,this.vo=i.particles.opacity.anim.speed/100,i.particles.opacity.anim.sync||(this.vo=this.vo*Math.random()));var n={};switch(i.particles.move.direction){case"top":n={x:0,y:-1};break;case"top-right":n={x:.5,y:-.5};break;case"right":n={x:1,y:-0};break;case"bottom-right":n={x:.5,y:.5};break;case"bottom":n={x:0,y:1};break;case"bottom-left":n={x:-.5,y:1};break;case"left":n={x:-1,y:0};break;case"top-left":n={x:-.5,y:-.5};break;default:n={x:0,y:0}}i.particles.move.straight?(this.vx=n.x,this.vy=n.y,i.particles.move.random&&(this.vx=this.vx*Math.random(),this.vy=this.vy*Math.random())):(this.vx=n.x+Math.random()-.5,this.vy=n.y+Math.random()-.5),this.vx_i=this.vx,this.vy_i=this.vy;var r=i.particles.shape.type;if("object"==typeof r){if(r instanceof Array){var c=r[Math.floor(Math.random()*r.length)];this.shape=c}}else this.shape=r;if("image"==this.shape){var o=i.particles.shape;this.img={src:o.image.src,ratio:o.image.width/o.image.height},this.img.ratio||(this.img.ratio=1),"svg"==i.tmp.img_type&&void 0!=i.tmp.source_svg&&(i.fn.vendors.createSvgImg(this),i.tmp.pushing&&(this.img.loaded=!1))}},i.fn.particle.prototype.draw=function(){function e(){i.canvas.ctx.drawImage(r,a.x-t,a.y-t,2*t,2*t/a.img.ratio)}var a=this;if(void 0!=a.radius_bubble)var t=a.radius_bubble;else var t=a.radius;if(void 0!=a.opacity_bubble)var s=a.opacity_bubble;else var s=a.opacity;if(a.color.rgb)var n="rgba("+a.color.rgb.r+","+a.color.rgb.g+","+a.color.rgb.b+","+s+")";else var n="hsla("+a.color.hsl.h+","+a.color.hsl.s+"%,"+a.color.hsl.l+"%,"+s+")";switch(i.canvas.ctx.fillStyle=n,i.canvas.ctx.beginPath(),a.shape){case"circle":i.canvas.ctx.arc(a.x,a.y,t,0,2*Math.PI,!1);break;case"edge":i.canvas.ctx.rect(a.x-t,a.y-t,2*t,2*t);break;case"triangle":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t,a.y+t/1.66,2*t,3,2);break;case"polygon":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t/(i.particles.shape.polygon.nb_sides/3.5),a.y-t/.76,2.66*t/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,1);break;case"star":i.fn.vendors.drawShape(i.canvas.ctx,a.x-2*t/(i.particles.shape.polygon.nb_sides/4),a.y-t/1.52,2*t*2.66/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,2);break;case"image":if("svg"==i.tmp.img_type)var r=a.img.obj;else var r=i.tmp.img_obj;r&&e()}i.canvas.ctx.closePath(),i.particles.shape.stroke.width>0&&(i.canvas.ctx.strokeStyle=i.particles.shape.stroke.color,i.canvas.ctx.lineWidth=i.particles.shape.stroke.width,i.canvas.ctx.stroke()),i.canvas.ctx.fill()},i.fn.particlesCreate=function(){for(var e=0;e=i.particles.opacity.value&&(a.opacity_status=!1),a.opacity+=a.vo):(a.opacity<=i.particles.opacity.anim.opacity_min&&(a.opacity_status=!0),a.opacity-=a.vo),a.opacity<0&&(a.opacity=0)),i.particles.size.anim.enable&&(1==a.size_status?(a.radius>=i.particles.size.value&&(a.size_status=!1),a.radius+=a.vs):(a.radius<=i.particles.size.anim.size_min&&(a.size_status=!0),a.radius-=a.vs),a.radius<0&&(a.radius=0)),"bounce"==i.particles.move.out_mode)var s={x_left:a.radius,x_right:i.canvas.w,y_top:a.radius,y_bottom:i.canvas.h};else var s={x_left:-a.radius,x_right:i.canvas.w+a.radius,y_top:-a.radius,y_bottom:i.canvas.h+a.radius};switch(a.x-a.radius>i.canvas.w?(a.x=s.x_left,a.y=Math.random()*i.canvas.h):a.x+a.radius<0&&(a.x=s.x_right,a.y=Math.random()*i.canvas.h),a.y-a.radius>i.canvas.h?(a.y=s.y_top,a.x=Math.random()*i.canvas.w):a.y+a.radius<0&&(a.y=s.y_bottom,a.x=Math.random()*i.canvas.w),i.particles.move.out_mode){case"bounce":a.x+a.radius>i.canvas.w?a.vx=-a.vx:a.x-a.radius<0&&(a.vx=-a.vx),a.y+a.radius>i.canvas.h?a.vy=-a.vy:a.y-a.radius<0&&(a.vy=-a.vy)}if(isInArray("grab",i.interactivity.events.onhover.mode)&&i.fn.modes.grabParticle(a),(isInArray("bubble",i.interactivity.events.onhover.mode)||isInArray("bubble",i.interactivity.events.onclick.mode))&&i.fn.modes.bubbleParticle(a),(isInArray("repulse",i.interactivity.events.onhover.mode)||isInArray("repulse",i.interactivity.events.onclick.mode))&&i.fn.modes.repulseParticle(a),i.particles.line_linked.enable||i.particles.move.attract.enable)for(var n=e+1;n0){var c=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+c.r+","+c.g+","+c.b+","+r+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(a.x,a.y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}},i.fn.interact.attractParticles=function(e,a){var t=e.x-a.x,s=e.y-a.y,n=Math.sqrt(t*t+s*s);if(n<=i.particles.line_linked.distance){var r=t/(1e3*i.particles.move.attract.rotateX),c=s/(1e3*i.particles.move.attract.rotateY);e.vx-=r,e.vy-=c,a.vx+=r,a.vy+=c}},i.fn.interact.bounceParticles=function(e,a){var t=e.x-a.x,i=e.y-a.y,s=Math.sqrt(t*t+i*i),n=e.radius+a.radius;n>=s&&(e.vx=-e.vx,e.vy=-e.vy,a.vx=-a.vx,a.vy=-a.vy)},i.fn.modes.pushParticles=function(e,a){i.tmp.pushing=!0;for(var t=0;e>t;t++)i.particles.array.push(new i.fn.particle(i.particles.color,i.particles.opacity.value,{x:a?a.pos_x:Math.random()*i.canvas.w,y:a?a.pos_y:Math.random()*i.canvas.h})),t==e-1&&(i.particles.move.enable||i.fn.particlesDraw(),i.tmp.pushing=!1)},i.fn.modes.removeParticles=function(e){i.particles.array.splice(0,e),i.particles.move.enable||i.fn.particlesDraw()},i.fn.modes.bubbleParticle=function(e){function a(){e.opacity_bubble=e.opacity,e.radius_bubble=e.radius}function t(a,t,s,n,c){if(a!=t)if(i.tmp.bubble_duration_end){if(void 0!=s){var o=n-p*(n-a)/i.interactivity.modes.bubble.duration,l=a-o;d=a+l,"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else if(r<=i.interactivity.modes.bubble.distance){if(void 0!=s)var v=s;else var v=n;if(v!=a){var d=n-p*(n-a)/i.interactivity.modes.bubble.duration;"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else"size"==c&&(e.radius_bubble=void 0),"opacity"==c&&(e.opacity_bubble=void 0)}if(i.interactivity.events.onhover.enable&&isInArray("bubble",i.interactivity.events.onhover.mode)){var s=e.x-i.interactivity.mouse.pos_x,n=e.y-i.interactivity.mouse.pos_y,r=Math.sqrt(s*s+n*n),c=1-r/i.interactivity.modes.bubble.distance;if(r<=i.interactivity.modes.bubble.distance){if(c>=0&&"mousemove"==i.interactivity.status){if(i.interactivity.modes.bubble.size!=i.particles.size.value)if(i.interactivity.modes.bubble.size>i.particles.size.value){var o=e.radius+i.interactivity.modes.bubble.size*c;o>=0&&(e.radius_bubble=o)}else{var l=e.radius-i.interactivity.modes.bubble.size,o=e.radius-l*c;o>0?e.radius_bubble=o:e.radius_bubble=0}if(i.interactivity.modes.bubble.opacity!=i.particles.opacity.value)if(i.interactivity.modes.bubble.opacity>i.particles.opacity.value){var v=i.interactivity.modes.bubble.opacity*c;v>e.opacity&&v<=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}else{var v=e.opacity-(i.particles.opacity.value-i.interactivity.modes.bubble.opacity)*c;v=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}}}else a();"mouseleave"==i.interactivity.status&&a()}else if(i.interactivity.events.onclick.enable&&isInArray("bubble",i.interactivity.events.onclick.mode)){if(i.tmp.bubble_clicking){var s=e.x-i.interactivity.mouse.click_pos_x,n=e.y-i.interactivity.mouse.click_pos_y,r=Math.sqrt(s*s+n*n),p=((new Date).getTime()-i.interactivity.mouse.click_time)/1e3;p>i.interactivity.modes.bubble.duration&&(i.tmp.bubble_duration_end=!0),p>2*i.interactivity.modes.bubble.duration&&(i.tmp.bubble_clicking=!1,i.tmp.bubble_duration_end=!1)}i.tmp.bubble_clicking&&(t(i.interactivity.modes.bubble.size,i.particles.size.value,e.radius_bubble,e.radius,"size"),t(i.interactivity.modes.bubble.opacity,i.particles.opacity.value,e.opacity_bubble,e.opacity,"opacity"))}},i.fn.modes.repulseParticle=function(e){function a(){var a=Math.atan2(d,p);if(e.vx=u*Math.cos(a),e.vy=u*Math.sin(a),"bounce"==i.particles.move.out_mode){var t={x:e.x+e.vx,y:e.y+e.vy};t.x+e.radius>i.canvas.w?e.vx=-e.vx:t.x-e.radius<0&&(e.vx=-e.vx),t.y+e.radius>i.canvas.h?e.vy=-e.vy:t.y-e.radius<0&&(e.vy=-e.vy)}}if(i.interactivity.events.onhover.enable&&isInArray("repulse",i.interactivity.events.onhover.mode)&&"mousemove"==i.interactivity.status){var t=e.x-i.interactivity.mouse.pos_x,s=e.y-i.interactivity.mouse.pos_y,n=Math.sqrt(t*t+s*s),r={x:t/n,y:s/n},c=i.interactivity.modes.repulse.distance,o=100,l=clamp(1/c*(-1*Math.pow(n/c,2)+1)*c*o,0,50),v={x:e.x+r.x*l,y:e.y+r.y*l};"bounce"==i.particles.move.out_mode?(v.x-e.radius>0&&v.x+e.radius0&&v.y+e.radius=m&&a()}else 0==i.tmp.repulse_clicking&&(e.vx=e.vx_i,e.vy=e.vy_i)},i.fn.modes.grabParticle=function(e){if(i.interactivity.events.onhover.enable&&"mousemove"==i.interactivity.status){var a=e.x-i.interactivity.mouse.pos_x,t=e.y-i.interactivity.mouse.pos_y,s=Math.sqrt(a*a+t*t);if(s<=i.interactivity.modes.grab.distance){var n=i.interactivity.modes.grab.line_linked.opacity-s/(1/i.interactivity.modes.grab.line_linked.opacity)/i.interactivity.modes.grab.distance;if(n>0){var r=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+r.r+","+r.g+","+r.b+","+n+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(i.interactivity.mouse.pos_x,i.interactivity.mouse.pos_y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}}},i.fn.vendors.eventsListeners=function(){"window"==i.interactivity.detect_on?i.interactivity.el=window:i.interactivity.el=i.canvas.el,(i.interactivity.events.onhover.enable||i.interactivity.events.onclick.enable)&&(i.interactivity.el.addEventListener("mousemove",function(e){if(i.interactivity.el==window)var a=e.clientX,t=e.clientY;else var a=e.offsetX||e.clientX,t=e.offsetY||e.clientY;i.interactivity.mouse.pos_x=a,i.interactivity.mouse.pos_y=t,i.tmp.retina&&(i.interactivity.mouse.pos_x*=i.canvas.pxratio,i.interactivity.mouse.pos_y*=i.canvas.pxratio),i.interactivity.status="mousemove"}),i.interactivity.el.addEventListener("mouseleave",function(e){i.interactivity.mouse.pos_x=null,i.interactivity.mouse.pos_y=null,i.interactivity.status="mouseleave"})),i.interactivity.events.onclick.enable&&i.interactivity.el.addEventListener("click",function(){if(i.interactivity.mouse.click_pos_x=i.interactivity.mouse.pos_x,i.interactivity.mouse.click_pos_y=i.interactivity.mouse.pos_y,i.interactivity.mouse.click_time=(new Date).getTime(),i.interactivity.events.onclick.enable)switch(i.interactivity.events.onclick.mode){case"push":i.particles.move.enable?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):1==i.interactivity.modes.push.particles_nb?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):i.interactivity.modes.push.particles_nb>1&&i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb);break;case"remove":i.fn.modes.removeParticles(i.interactivity.modes.remove.particles_nb);break;case"bubble":i.tmp.bubble_clicking=!0;break;case"repulse":i.tmp.repulse_clicking=!0,i.tmp.repulse_count=0,i.tmp.repulse_finish=!1,setTimeout(function(){i.tmp.repulse_clicking=!1},1e3*i.interactivity.modes.repulse.duration)}})},i.fn.vendors.densityAutoParticles=function(){if(i.particles.number.density.enable){var e=i.canvas.el.width*i.canvas.el.height/1e3;i.tmp.retina&&(e/=2*i.canvas.pxratio);var a=e*i.particles.number.value/i.particles.number.density.value_area,t=i.particles.array.length-a;0>t?i.fn.modes.pushParticles(Math.abs(t)):i.fn.modes.removeParticles(t)}},i.fn.vendors.checkOverlap=function(e,a){for(var t=0;tv;v++)e.lineTo(i,0),e.translate(i,0),e.rotate(l);e.fill(),e.restore()},i.fn.vendors.exportImg=function(){window.open(i.canvas.el.toDataURL("image/png"),"_blank")},i.fn.vendors.loadImg=function(e){if(i.tmp.img_error=void 0,""!=i.particles.shape.image.src)if("svg"==e){var a=new XMLHttpRequest;a.open("GET",i.particles.shape.image.src),a.onreadystatechange=function(e){4==a.readyState&&(200==a.status?(i.tmp.source_svg=e.currentTarget.response,i.fn.vendors.checkBeforeDraw()):(console.log("Error pJS - Image not found"),i.tmp.img_error=!0))},a.send()}else{var t=new Image;t.addEventListener("load",function(){i.tmp.img_obj=t,i.fn.vendors.checkBeforeDraw()}),t.src=i.particles.shape.image.src}else console.log("Error pJS - No image.src"),i.tmp.img_error=!0},i.fn.vendors.draw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type?i.tmp.count_svg>=i.particles.number.value?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):void 0!=i.tmp.img_obj?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame))},i.fn.vendors.checkBeforeDraw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type&&void 0==i.tmp.source_svg?i.tmp.checkAnimFrame=requestAnimFrame(check):(cancelRequestAnimFrame(i.tmp.checkAnimFrame),i.tmp.img_error||(i.fn.vendors.init(),i.fn.vendors.draw())):(i.fn.vendors.init(),i.fn.vendors.draw())},i.fn.vendors.init=function(){i.fn.retinaInit(),i.fn.canvasInit(),i.fn.canvasSize(),i.fn.canvasPaint(),i.fn.particlesCreate(),i.fn.vendors.densityAutoParticles(),i.particles.line_linked.color_rgb_line=hexToRgb(i.particles.line_linked.color)},i.fn.vendors.start=function(){isInArray("image",i.particles.shape.type)?(i.tmp.img_type=i.particles.shape.image.src.substr(i.particles.shape.image.src.length-3),i.fn.vendors.loadImg(i.tmp.img_type)):i.fn.vendors.checkBeforeDraw()},i.fn.vendors.eventsListeners(),i.fn.vendors.start()};Object.deepExtend=function(e,a){for(var t in a)a[t]&&a[t].constructor&&a[t].constructor===Object?(e[t]=e[t]||{},arguments.callee(e[t],a[t])):e[t]=a[t];return e},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}(),window.pJSDom=[],window.particlesJS=function(e,a){"string"!=typeof e&&(a=e,e="particles-js"),e||(e="particles-js");var t=document.getElementById(e),i="particles-js-canvas-el",s=t.getElementsByClassName(i);if(s.length)for(;s.length>0;)t.removeChild(s[0]);var n=document.createElement("canvas");n.className=i,n.style.width="100%",n.style.height="100%";var r=document.getElementById(e).appendChild(n);null!=r&&pJSDom.push(new pJS(e,a))},window.particlesJS.load=function(e,a,t){var i=new XMLHttpRequest;i.open("GET",a),i.onreadystatechange=function(a){if(4==i.readyState)if(200==i.status){var s=JSON.parse(a.currentTarget.response);window.particlesJS(e,s),t&&t()}else console.log("Error pJS - XMLHttpRequest status: "+i.status),console.log("Error pJS - File config not found")},i.send()}; \ No newline at end of file From e2beccbadfa88592158754859db43d9baf2a28e7 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 20 Feb 2024 18:44:05 +0200 Subject: [PATCH 0105/1296] added particles --- _src/scripts/scripts.js | 7 +- .../template-factories}/trusted.css | 53 +- _src/scripts/template-factories/trusted.js | 123 ++ _src/scripts/vendor/particles.js | 1541 +++++++++++++++++ _src/scripts/vendor/particles.min.js | 9 - 5 files changed, 1719 insertions(+), 14 deletions(-) rename _src/{styles => scripts/template-factories}/trusted.css (83%) create mode 100644 _src/scripts/template-factories/trusted.js create mode 100644 _src/scripts/vendor/particles.js diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index a13a8dd64..13c3e7ad6 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -11,7 +11,7 @@ import { waitForLCP, loadBlocks, loadCSS, - getMetadata, + getMetadata, loadScript, } from './lib-franklin.js'; import { @@ -486,7 +486,10 @@ async function loadEager(doc) { setPageLanguage(getLanguageCountryFromPath(window.location.pathname)); decorateTemplateAndTheme(); if (getMetadata('template') !== '') { - loadCSS(`${window.hlx.codeBasePath}/styles/${getMetadata('template')}.css`); + loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${getMetadata('template')}.css`); + loadScript(`${window.hlx.codeBasePath}/scripts/template-factories/${getMetadata('template')}.js`, { + type: 'module', + }); } const main = doc.querySelector('main'); if (main) { diff --git a/_src/styles/trusted.css b/_src/scripts/template-factories/trusted.css similarity index 83% rename from _src/styles/trusted.css rename to _src/scripts/template-factories/trusted.css index 1483c28f7..497bff6b8 100644 --- a/_src/styles/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -124,7 +124,7 @@ border-bottom: 2px solid #fff;*/ width: 13px; height: 15px; - background: url('../icons/arow_down.png') 0 0 no-repeat transparent; + background: url('../../icons/arow_down.png') 0 0 no-repeat transparent; margin: 3px auto; } @@ -177,11 +177,58 @@ border: 1px solid white; } -.trusted_lp #mouse-scroll .mouse-in { +. #mouse-scroll .mouse-in { -webkit-animation: animated-mouse 1.2s ease infinite; -moz-animation: mouse-animated 1.2s ease infinite; } +/*!* ---- reset ---- *!*/ + +/*body {*/ +/* margin: 0;*/ +/* font:normal 75% Arial, Helvetica, sans-serif;*/ +/*}*/ + +trusted_lp canvas { + display: block; + vertical-align: bottom; +} + +/* ---- particles.js container ---- */ + +#particles-js { + position: absolute; + width: 100%; + height: 100%; + background-color: #006eff; + background-image: url(""); + background-repeat: no-repeat; + background-size: cover; + background-position: 50% 50%; +} + +/* ---- stats.js ---- */ + +.count-particles{ + background: #000022; + position: absolute; + top: 48px; + left: 0; + width: 80px; + color: #13E8E9; + font-size: .8em; + text-align: left; + text-indent: 4px; + line-height: 14px; + padding-bottom: 2px; + font-family: Helvetica, Arial, sans-serif; + font-weight: bold; +} + +.js-count-particles{ + font-size: 1.1em; +} + @-webkit-keyframes animated-mouse { 0% { opacity: 1; @@ -255,4 +302,4 @@ .trusted_lp .default-content-wrapper { padding: 1em!important; } -} \ No newline at end of file +} diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js new file mode 100644 index 000000000..6ef8ba6c6 --- /dev/null +++ b/_src/scripts/template-factories/trusted.js @@ -0,0 +1,123 @@ +import { loadScript } from '../lib-franklin.js'; + +await loadScript(`${window.hlx.codeBasePath}/scripts/vendor/particles.js`, { + type: 'module', +}); + +const particleIdSelector = 'particles-js'; + +const particleDiv = document.createElement('div'); +particleDiv.setAttribute('id', particleIdSelector); + +document.body.prepend(particleDiv); + +window.particlesJS(particleIdSelector, { + particles: { + number: { + value: 60, + density: { + enable: true, + value_area: 800, + }, + }, + color: { + value: '#ffffff', + }, + shape: { + type: 'circle', + stroke: { + width: 0, + color: '#000000', + }, + polygon: { + nb_sides: 5, + }, + image: { + src: 'img/github.svg', + width: 100, + height: 100, + }, + }, + opacity: { + value: 0.5, + random: false, + anim: { + enable: false, + speed: 1, + opacity_min: 0.1, + sync: false, + }, + }, + size: { + value: 3, + random: true, + anim: { + enable: false, + speed: 20, + size_min: 0.1, + sync: false, + }, + }, + line_linked: { + enable: true, + distance: 150, + color: '#ffffff', + opacity: 0.4, + width: 1, + }, + move: { + enable: true, + speed: 6, + direction: 'none', + random: false, + straight: false, + out_mode: 'out', + bounce: false, + attract: { + enable: false, + rotateX: 600, + rotateY: 1200, + }, + }, + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'grab', + }, + onclick: { + enable: true, + mode: 'push', + }, + resize: true, + }, + modes: { + grab: { + distance: 140, + line_linked: { + opacity: 1, + }, + }, + bubble: { + distance: 400, + size: 40, + duration: 2, + opacity: 8, + speed: 3, + }, + repulse: { + distance: 200, + duration: 0.4, + }, + push: { + particles_nb: 4, + }, + remove: { + particles_nb: 2, + }, + }, + }, + retina_detect: true, +}); diff --git a/_src/scripts/vendor/particles.js b/_src/scripts/vendor/particles.js new file mode 100644 index 000000000..592ab3e3f --- /dev/null +++ b/_src/scripts/vendor/particles.js @@ -0,0 +1,1541 @@ +/* ----------------------------------------------- +/* Author : Vincent Garreau - vincentgarreau.com +/* MIT license: http://opensource.org/licenses/MIT +/* Demo / Generator : vincentgarreau.com/particles.js +/* GitHub : github.com/VincentGarreau/particles.js +/* How to use? : Check the GitHub README +/* v2.0.0 +/* ----------------------------------------------- */ + +var pJS = function(tag_id, params){ + + var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el'); + + /* particles.js variables with default values */ + this.pJS = { + canvas: { + el: canvas_el, + w: canvas_el.offsetWidth, + h: canvas_el.offsetHeight + }, + particles: { + number: { + value: 400, + density: { + enable: true, + value_area: 800 + } + }, + color: { + value: '#fff' + }, + shape: { + type: 'circle', + stroke: { + width: 0, + color: '#ff0000' + }, + polygon: { + nb_sides: 5 + }, + image: { + src: '', + width: 100, + height: 100 + } + }, + opacity: { + value: 1, + random: false, + anim: { + enable: false, + speed: 2, + opacity_min: 0, + sync: false + } + }, + size: { + value: 20, + random: false, + anim: { + enable: false, + speed: 20, + size_min: 0, + sync: false + } + }, + line_linked: { + enable: true, + distance: 100, + color: '#fff', + opacity: 1, + width: 1 + }, + move: { + enable: true, + speed: 2, + direction: 'none', + random: false, + straight: false, + out_mode: 'out', + bounce: false, + attract: { + enable: false, + rotateX: 3000, + rotateY: 3000 + } + }, + array: [] + }, + interactivity: { + detect_on: 'canvas', + events: { + onhover: { + enable: true, + mode: 'grab' + }, + onclick: { + enable: true, + mode: 'push' + }, + resize: true + }, + modes: { + grab:{ + distance: 100, + line_linked:{ + opacity: 1 + } + }, + bubble:{ + distance: 200, + size: 80, + duration: 0.4 + }, + repulse:{ + distance: 200, + duration: 0.4 + }, + push:{ + particles_nb: 4 + }, + remove:{ + particles_nb: 2 + } + }, + mouse:{} + }, + retina_detect: false, + fn: { + interact: {}, + modes: {}, + vendors:{} + }, + tmp: {} + }; + + var pJS = this.pJS; + + /* params settings */ + if(params){ + Object.deepExtend(pJS, params); + } + + pJS.tmp.obj = { + size_value: pJS.particles.size.value, + size_anim_speed: pJS.particles.size.anim.speed, + move_speed: pJS.particles.move.speed, + line_linked_distance: pJS.particles.line_linked.distance, + line_linked_width: pJS.particles.line_linked.width, + mode_grab_distance: pJS.interactivity.modes.grab.distance, + mode_bubble_distance: pJS.interactivity.modes.bubble.distance, + mode_bubble_size: pJS.interactivity.modes.bubble.size, + mode_repulse_distance: pJS.interactivity.modes.repulse.distance + }; + + + pJS.fn.retinaInit = function(){ + + if(pJS.retina_detect && window.devicePixelRatio > 1){ + pJS.canvas.pxratio = window.devicePixelRatio; + pJS.tmp.retina = true; + } + else{ + pJS.canvas.pxratio = 1; + pJS.tmp.retina = false; + } + + pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio; + pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio; + + pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio; + pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio; + pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio; + pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio; + pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio; + pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio; + pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio; + pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio; + pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio; + + }; + + + + /* ---------- pJS functions - canvas ------------ */ + + pJS.fn.canvasInit = function(){ + pJS.canvas.ctx = pJS.canvas.el.getContext('2d'); + }; + + pJS.fn.canvasSize = function(){ + + pJS.canvas.el.width = pJS.canvas.w; + pJS.canvas.el.height = pJS.canvas.h; + + if(pJS && pJS.interactivity.events.resize){ + + window.addEventListener('resize', function(){ + + pJS.canvas.w = pJS.canvas.el.offsetWidth; + pJS.canvas.h = pJS.canvas.el.offsetHeight; + + /* resize canvas */ + if(pJS.tmp.retina){ + pJS.canvas.w *= pJS.canvas.pxratio; + pJS.canvas.h *= pJS.canvas.pxratio; + } + + pJS.canvas.el.width = pJS.canvas.w; + pJS.canvas.el.height = pJS.canvas.h; + + /* repaint canvas on anim disabled */ + if(!pJS.particles.move.enable){ + pJS.fn.particlesEmpty(); + pJS.fn.particlesCreate(); + pJS.fn.particlesDraw(); + pJS.fn.vendors.densityAutoParticles(); + } + + /* density particles enabled */ + pJS.fn.vendors.densityAutoParticles(); + + }); + + } + + }; + + + pJS.fn.canvasPaint = function(){ + pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h); + }; + + pJS.fn.canvasClear = function(){ + pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); + }; + + + /* --------- pJS functions - particles ----------- */ + + pJS.fn.particle = function(color, opacity, position){ + + /* size */ + this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value; + if(pJS.particles.size.anim.enable){ + this.size_status = false; + this.vs = pJS.particles.size.anim.speed / 100; + if(!pJS.particles.size.anim.sync){ + this.vs = this.vs * Math.random(); + } + } + + /* position */ + this.x = position ? position.x : Math.random() * pJS.canvas.w; + this.y = position ? position.y : Math.random() * pJS.canvas.h; + + /* check position - into the canvas */ + if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius; + else if(this.x < this.radius*2) this.x = this.x + this.radius; + if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius; + else if(this.y < this.radius*2) this.y = this.y + this.radius; + + /* check position - avoid overlap */ + if(pJS.particles.move.bounce){ + pJS.fn.vendors.checkOverlap(this, position); + } + + /* color */ + this.color = {}; + if(typeof(color.value) == 'object'){ + + if(color.value instanceof Array){ + var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)]; + this.color.rgb = hexToRgb(color_selected); + }else{ + if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){ + this.color.rgb = { + r: color.value.r, + g: color.value.g, + b: color.value.b + } + } + if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){ + this.color.hsl = { + h: color.value.h, + s: color.value.s, + l: color.value.l + } + } + } + + } + else if(color.value == 'random'){ + this.color.rgb = { + r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), + g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), + b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0) + } + } + else if(typeof(color.value) == 'string'){ + this.color = color; + this.color.rgb = hexToRgb(this.color.value); + } + + /* opacity */ + this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value; + if(pJS.particles.opacity.anim.enable){ + this.opacity_status = false; + this.vo = pJS.particles.opacity.anim.speed / 100; + if(!pJS.particles.opacity.anim.sync){ + this.vo = this.vo * Math.random(); + } + } + + /* animation - velocity for speed */ + var velbase = {} + switch(pJS.particles.move.direction){ + case 'top': + velbase = { x:0, y:-1 }; + break; + case 'top-right': + velbase = { x:0.5, y:-0.5 }; + break; + case 'right': + velbase = { x:1, y:-0 }; + break; + case 'bottom-right': + velbase = { x:0.5, y:0.5 }; + break; + case 'bottom': + velbase = { x:0, y:1 }; + break; + case 'bottom-left': + velbase = { x:-0.5, y:1 }; + break; + case 'left': + velbase = { x:-1, y:0 }; + break; + case 'top-left': + velbase = { x:-0.5, y:-0.5 }; + break; + default: + velbase = { x:0, y:0 }; + break; + } + + if(pJS.particles.move.straight){ + this.vx = velbase.x; + this.vy = velbase.y; + if(pJS.particles.move.random){ + this.vx = this.vx * (Math.random()); + this.vy = this.vy * (Math.random()); + } + }else{ + this.vx = velbase.x + Math.random()-0.5; + this.vy = velbase.y + Math.random()-0.5; + } + + // var theta = 2.0 * Math.PI * Math.random(); + // this.vx = Math.cos(theta); + // this.vy = Math.sin(theta); + + this.vx_i = this.vx; + this.vy_i = this.vy; + + + + /* if shape is image */ + + var shape_type = pJS.particles.shape.type; + if(typeof(shape_type) == 'object'){ + if(shape_type instanceof Array){ + var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)]; + this.shape = shape_selected; + } + }else{ + this.shape = shape_type; + } + + if(this.shape == 'image'){ + var sh = pJS.particles.shape; + this.img = { + src: sh.image.src, + ratio: sh.image.width / sh.image.height + } + if(!this.img.ratio) this.img.ratio = 1; + if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){ + pJS.fn.vendors.createSvgImg(this); + if(pJS.tmp.pushing){ + this.img.loaded = false; + } + } + } + + + + }; + + + pJS.fn.particle.prototype.draw = function() { + + var p = this; + + if(p.radius_bubble != undefined){ + var radius = p.radius_bubble; + }else{ + var radius = p.radius; + } + + if(p.opacity_bubble != undefined){ + var opacity = p.opacity_bubble; + }else{ + var opacity = p.opacity; + } + + if(p.color.rgb){ + var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')'; + }else{ + var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')'; + } + + pJS.canvas.ctx.fillStyle = color_value; + pJS.canvas.ctx.beginPath(); + + switch(p.shape){ + + case 'circle': + pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false); + break; + + case 'edge': + pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2); + break; + + case 'triangle': + pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2); + break; + + case 'polygon': + pJS.fn.vendors.drawShape( + pJS.canvas.ctx, + p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX + p.y - radius / (2.66/3.5), // startY + radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength + pJS.particles.shape.polygon.nb_sides, // sideCountNumerator + 1 // sideCountDenominator + ); + break; + + case 'star': + pJS.fn.vendors.drawShape( + pJS.canvas.ctx, + p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX + p.y - radius / (2*2.66/3.5), // startY + radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength + pJS.particles.shape.polygon.nb_sides, // sideCountNumerator + 2 // sideCountDenominator + ); + break; + + case 'image': + + function draw(){ + pJS.canvas.ctx.drawImage( + img_obj, + p.x-radius, + p.y-radius, + radius*2, + radius*2 / p.img.ratio + ); + } + + if(pJS.tmp.img_type == 'svg'){ + var img_obj = p.img.obj; + }else{ + var img_obj = pJS.tmp.img_obj; + } + + if(img_obj){ + draw(); + } + + break; + + } + + pJS.canvas.ctx.closePath(); + + if(pJS.particles.shape.stroke.width > 0){ + pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color; + pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width; + pJS.canvas.ctx.stroke(); + } + + pJS.canvas.ctx.fill(); + + }; + + + pJS.fn.particlesCreate = function(){ + for(var i = 0; i < pJS.particles.number.value; i++) { + pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value)); + } + }; + + pJS.fn.particlesUpdate = function(){ + + for(var i = 0; i < pJS.particles.array.length; i++){ + + /* the particle */ + var p = pJS.particles.array[i]; + + // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy; + // var f = -BANG_SIZE / d; + // if ( d < BANG_SIZE ) { + // var t = Math.atan2( dy, dx ); + // p.vx = f * Math.cos(t); + // p.vy = f * Math.sin(t); + // } + + /* move the particle */ + if(pJS.particles.move.enable){ + var ms = pJS.particles.move.speed/2; + p.x += p.vx * ms; + p.y += p.vy * ms; + } + + /* change opacity status */ + if(pJS.particles.opacity.anim.enable) { + if(p.opacity_status == true) { + if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false; + p.opacity += p.vo; + }else { + if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true; + p.opacity -= p.vo; + } + if(p.opacity < 0) p.opacity = 0; + } + + /* change size */ + if(pJS.particles.size.anim.enable){ + if(p.size_status == true){ + if(p.radius >= pJS.particles.size.value) p.size_status = false; + p.radius += p.vs; + }else{ + if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true; + p.radius -= p.vs; + } + if(p.radius < 0) p.radius = 0; + } + + /* change particle position if it is out of canvas */ + if(pJS.particles.move.out_mode == 'bounce'){ + var new_pos = { + x_left: p.radius, + x_right: pJS.canvas.w, + y_top: p.radius, + y_bottom: pJS.canvas.h + } + }else{ + var new_pos = { + x_left: -p.radius, + x_right: pJS.canvas.w + p.radius, + y_top: -p.radius, + y_bottom: pJS.canvas.h + p.radius + } + } + + if(p.x - p.radius > pJS.canvas.w){ + p.x = new_pos.x_left; + p.y = Math.random() * pJS.canvas.h; + } + else if(p.x + p.radius < 0){ + p.x = new_pos.x_right; + p.y = Math.random() * pJS.canvas.h; + } + if(p.y - p.radius > pJS.canvas.h){ + p.y = new_pos.y_top; + p.x = Math.random() * pJS.canvas.w; + } + else if(p.y + p.radius < 0){ + p.y = new_pos.y_bottom; + p.x = Math.random() * pJS.canvas.w; + } + + /* out of canvas modes */ + switch(pJS.particles.move.out_mode){ + case 'bounce': + if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx; + else if (p.x - p.radius < 0) p.vx = -p.vx; + if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy; + else if (p.y - p.radius < 0) p.vy = -p.vy; + break; + } + + /* events */ + if(isInArray('grab', pJS.interactivity.events.onhover.mode)){ + pJS.fn.modes.grabParticle(p); + } + + if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){ + pJS.fn.modes.bubbleParticle(p); + } + + if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){ + pJS.fn.modes.repulseParticle(p); + } + + /* interaction auto between particles */ + if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){ + for(var j = i + 1; j < pJS.particles.array.length; j++){ + var p2 = pJS.particles.array[j]; + + /* link particles */ + if(pJS.particles.line_linked.enable){ + pJS.fn.interact.linkParticles(p,p2); + } + + /* attract particles */ + if(pJS.particles.move.attract.enable){ + pJS.fn.interact.attractParticles(p,p2); + } + + /* bounce particles */ + if(pJS.particles.move.bounce){ + pJS.fn.interact.bounceParticles(p,p2); + } + + } + } + + + } + + }; + + pJS.fn.particlesDraw = function(){ + + /* clear canvas */ + pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); + + /* update each particles param */ + pJS.fn.particlesUpdate(); + + /* draw each particle */ + for(var i = 0; i < pJS.particles.array.length; i++){ + var p = pJS.particles.array[i]; + p.draw(); + } + + }; + + pJS.fn.particlesEmpty = function(){ + pJS.particles.array = []; + }; + + pJS.fn.particlesRefresh = function(){ + + /* init all */ + cancelRequestAnimFrame(pJS.fn.checkAnimFrame); + cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + pJS.tmp.source_svg = undefined; + pJS.tmp.img_obj = undefined; + pJS.tmp.count_svg = 0; + pJS.fn.particlesEmpty(); + pJS.fn.canvasClear(); + + /* restart */ + pJS.fn.vendors.start(); + + }; + + + /* ---------- pJS functions - particles interaction ------------ */ + + pJS.fn.interact.linkParticles = function(p1, p2){ + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + /* draw a line between p1 and p2 if the distance between them is under the config distance */ + if(dist <= pJS.particles.line_linked.distance){ + + var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance; + + if(opacity_line > 0){ + + /* style */ + var color_line = pJS.particles.line_linked.color_rgb_line; + pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; + pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; + //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ + + /* path */ + pJS.canvas.ctx.beginPath(); + pJS.canvas.ctx.moveTo(p1.x, p1.y); + pJS.canvas.ctx.lineTo(p2.x, p2.y); + pJS.canvas.ctx.stroke(); + pJS.canvas.ctx.closePath(); + + } + + } + + }; + + + pJS.fn.interact.attractParticles = function(p1, p2){ + + /* condensed particles */ + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + if(dist <= pJS.particles.line_linked.distance){ + + var ax = dx/(pJS.particles.move.attract.rotateX*1000), + ay = dy/(pJS.particles.move.attract.rotateY*1000); + + p1.vx -= ax; + p1.vy -= ay; + + p2.vx += ax; + p2.vy += ay; + + } + + + } + + + pJS.fn.interact.bounceParticles = function(p1, p2){ + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy), + dist_p = p1.radius+p2.radius; + + if(dist <= dist_p){ + p1.vx = -p1.vx; + p1.vy = -p1.vy; + + p2.vx = -p2.vx; + p2.vy = -p2.vy; + } + + } + + + /* ---------- pJS functions - modes events ------------ */ + + pJS.fn.modes.pushParticles = function(nb, pos){ + + pJS.tmp.pushing = true; + + for(var i = 0; i < nb; i++){ + pJS.particles.array.push( + new pJS.fn.particle( + pJS.particles.color, + pJS.particles.opacity.value, + { + 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w, + 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h + } + ) + ) + if(i == nb-1){ + if(!pJS.particles.move.enable){ + pJS.fn.particlesDraw(); + } + pJS.tmp.pushing = false; + } + } + + }; + + + pJS.fn.modes.removeParticles = function(nb){ + + pJS.particles.array.splice(0, nb); + if(!pJS.particles.move.enable){ + pJS.fn.particlesDraw(); + } + + }; + + + pJS.fn.modes.bubbleParticle = function(p){ + + /* on hover event */ + if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){ + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), + ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance; + + function init(){ + p.opacity_bubble = p.opacity; + p.radius_bubble = p.radius; + } + + /* mousemove - check ratio */ + if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ + + if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){ + + /* size */ + if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){ + + if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){ + var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio); + if(size >= 0){ + p.radius_bubble = size; + } + }else{ + var dif = p.radius - pJS.interactivity.modes.bubble.size, + size = p.radius - (dif*ratio); + if(size > 0){ + p.radius_bubble = size; + }else{ + p.radius_bubble = 0; + } + } + + } + + /* opacity */ + if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){ + + if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){ + var opacity = pJS.interactivity.modes.bubble.opacity*ratio; + if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){ + p.opacity_bubble = opacity; + } + }else{ + var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio; + if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){ + p.opacity_bubble = opacity; + } + } + + } + + } + + }else{ + init(); + } + + + /* mouseleave */ + if(pJS.interactivity.status == 'mouseleave'){ + init(); + } + + } + + /* on click event */ + else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){ + + + if(pJS.tmp.bubble_clicking){ + var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), + time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000; + + if(time_spent > pJS.interactivity.modes.bubble.duration){ + pJS.tmp.bubble_duration_end = true; + } + + if(time_spent > pJS.interactivity.modes.bubble.duration*2){ + pJS.tmp.bubble_clicking = false; + pJS.tmp.bubble_duration_end = false; + } + } + + + function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){ + + if(bubble_param != particles_param){ + + if(!pJS.tmp.bubble_duration_end){ + if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ + if(p_obj_bubble != undefined) var obj = p_obj_bubble; + else var obj = p_obj; + if(obj != bubble_param){ + var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration); + if(id == 'size') p.radius_bubble = value; + if(id == 'opacity') p.opacity_bubble = value; + } + }else{ + if(id == 'size') p.radius_bubble = undefined; + if(id == 'opacity') p.opacity_bubble = undefined; + } + }else{ + if(p_obj_bubble != undefined){ + var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration), + dif = bubble_param - value_tmp; + value = bubble_param + dif; + if(id == 'size') p.radius_bubble = value; + if(id == 'opacity') p.opacity_bubble = value; + } + } + + } + + } + + if(pJS.tmp.bubble_clicking){ + /* size */ + process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size'); + /* opacity */ + process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity'); + } + + } + + }; + + + pJS.fn.modes.repulseParticle = function(p){ + + if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') { + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); + + var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse}, + repulseRadius = pJS.interactivity.modes.repulse.distance, + velocity = 100, + repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50); + + var pos = { + x: p.x + normVec.x * repulseFactor, + y: p.y + normVec.y * repulseFactor + } + + if(pJS.particles.move.out_mode == 'bounce'){ + if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x; + if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y; + }else{ + p.x = pos.x; + p.y = pos.y; + } + + } + + + else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) { + + if(!pJS.tmp.repulse_finish){ + pJS.tmp.repulse_count++; + if(pJS.tmp.repulse_count == pJS.particles.array.length){ + pJS.tmp.repulse_finish = true; + } + } + + if(pJS.tmp.repulse_clicking){ + + var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3); + + var dx = pJS.interactivity.mouse.click_pos_x - p.x, + dy = pJS.interactivity.mouse.click_pos_y - p.y, + d = dx*dx + dy*dy; + + var force = -repulseRadius / d * 1; + + function process(){ + + var f = Math.atan2(dy,dx); + p.vx = force * Math.cos(f); + p.vy = force * Math.sin(f); + + if(pJS.particles.move.out_mode == 'bounce'){ + var pos = { + x: p.x + p.vx, + y: p.y + p.vy + } + if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx; + else if (pos.x - p.radius < 0) p.vx = -p.vx; + if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy; + else if (pos.y - p.radius < 0) p.vy = -p.vy; + } + + } + + // default + if(d <= repulseRadius){ + process(); + } + + // bang - slow motion mode + // if(!pJS.tmp.repulse_finish){ + // if(d <= repulseRadius){ + // process(); + // } + // }else{ + // process(); + // } + + + }else{ + + if(pJS.tmp.repulse_clicking == false){ + + p.vx = p.vx_i; + p.vy = p.vy_i; + + } + + } + + } + + } + + + pJS.fn.modes.grabParticle = function(p){ + + if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){ + + var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, + dy_mouse = p.y - pJS.interactivity.mouse.pos_y, + dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); + + /* draw a line between the cursor and the particle if the distance between them is under the config distance */ + if(dist_mouse <= pJS.interactivity.modes.grab.distance){ + + var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance; + + if(opacity_line > 0){ + + /* style */ + var color_line = pJS.particles.line_linked.color_rgb_line; + pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; + pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; + //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ + + /* path */ + pJS.canvas.ctx.beginPath(); + pJS.canvas.ctx.moveTo(p.x, p.y); + pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y); + pJS.canvas.ctx.stroke(); + pJS.canvas.ctx.closePath(); + + } + + } + + } + + }; + + + + /* ---------- pJS functions - vendors ------------ */ + + pJS.fn.vendors.eventsListeners = function(){ + + /* events target element */ + if(pJS.interactivity.detect_on == 'window'){ + pJS.interactivity.el = window; + }else{ + pJS.interactivity.el = pJS.canvas.el; + } + + + /* detect mouse pos - on hover / click event */ + if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){ + + /* el on mousemove */ + pJS.interactivity.el.addEventListener('mousemove', function(e){ + + if(pJS.interactivity.el == window){ + var pos_x = e.clientX, + pos_y = e.clientY; + } + else{ + var pos_x = e.offsetX || e.clientX, + pos_y = e.offsetY || e.clientY; + } + + pJS.interactivity.mouse.pos_x = pos_x; + pJS.interactivity.mouse.pos_y = pos_y; + + if(pJS.tmp.retina){ + pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio; + pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio; + } + + pJS.interactivity.status = 'mousemove'; + + }); + + /* el on onmouseleave */ + pJS.interactivity.el.addEventListener('mouseleave', function(e){ + + pJS.interactivity.mouse.pos_x = null; + pJS.interactivity.mouse.pos_y = null; + pJS.interactivity.status = 'mouseleave'; + + }); + + } + + /* on click event */ + if(pJS.interactivity.events.onclick.enable){ + + pJS.interactivity.el.addEventListener('click', function(){ + + pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x; + pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y; + pJS.interactivity.mouse.click_time = new Date().getTime(); + + if(pJS.interactivity.events.onclick.enable){ + + switch(pJS.interactivity.events.onclick.mode){ + + case 'push': + if(pJS.particles.move.enable){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); + }else{ + if(pJS.interactivity.modes.push.particles_nb == 1){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); + } + else if(pJS.interactivity.modes.push.particles_nb > 1){ + pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb); + } + } + break; + + case 'remove': + pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb); + break; + + case 'bubble': + pJS.tmp.bubble_clicking = true; + break; + + case 'repulse': + pJS.tmp.repulse_clicking = true; + pJS.tmp.repulse_count = 0; + pJS.tmp.repulse_finish = false; + setTimeout(function(){ + pJS.tmp.repulse_clicking = false; + }, pJS.interactivity.modes.repulse.duration*1000) + break; + + } + + } + + }); + + } + + + }; + + pJS.fn.vendors.densityAutoParticles = function(){ + + if(pJS.particles.number.density.enable){ + + /* calc area */ + var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000; + if(pJS.tmp.retina){ + area = area/(pJS.canvas.pxratio*2); + } + + /* calc number of particles based on density area */ + var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area; + + /* add or remove X particles */ + var missing_particles = pJS.particles.array.length - nb_particles; + if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles)); + else pJS.fn.modes.removeParticles(missing_particles); + + } + + }; + + + pJS.fn.vendors.checkOverlap = function(p1, position){ + for(var i = 0; i < pJS.particles.array.length; i++){ + var p2 = pJS.particles.array[i]; + + var dx = p1.x - p2.x, + dy = p1.y - p2.y, + dist = Math.sqrt(dx*dx + dy*dy); + + if(dist <= p1.radius + p2.radius){ + p1.x = position ? position.x : Math.random() * pJS.canvas.w; + p1.y = position ? position.y : Math.random() * pJS.canvas.h; + pJS.fn.vendors.checkOverlap(p1); + } + } + }; + + + pJS.fn.vendors.createSvgImg = function(p){ + + /* set color to svg element */ + var svgXml = pJS.tmp.source_svg, + rgbHex = /#([0-9A-F]{3,6})/gi, + coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) { + if(p.color.rgb){ + var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')'; + }else{ + var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')'; + } + return color_value; + }); + + /* prepare to create img with colored svg */ + var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}), + DOMURL = window.URL || window.webkitURL || window, + url = DOMURL.createObjectURL(svg); + + /* create particle img obj */ + var img = new Image(); + img.addEventListener('load', function(){ + p.img.obj = img; + p.img.loaded = true; + DOMURL.revokeObjectURL(url); + pJS.tmp.count_svg++; + }); + img.src = url; + + }; + + + pJS.fn.vendors.destroypJS = function(){ + cancelAnimationFrame(pJS.fn.drawAnimFrame); + canvas_el.remove(); + pJSDom = null; + }; + + + pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){ + + // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/ + var sideCount = sideCountNumerator * sideCountDenominator; + var decimalSides = sideCountNumerator / sideCountDenominator; + var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides; + var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians + c.save(); + c.beginPath(); + c.translate(startX, startY); + c.moveTo(0,0); + for (var i = 0; i < sideCount; i++) { + c.lineTo(sideLength,0); + c.translate(sideLength,0); + c.rotate(interiorAngle); + } + //c.stroke(); + c.fill(); + c.restore(); + + }; + + pJS.fn.vendors.exportImg = function(){ + window.open(pJS.canvas.el.toDataURL('image/png'), '_blank'); + }; + + + pJS.fn.vendors.loadImg = function(type){ + + pJS.tmp.img_error = undefined; + + if(pJS.particles.shape.image.src != ''){ + + if(type == 'svg'){ + + var xhr = new XMLHttpRequest(); + xhr.open('GET', pJS.particles.shape.image.src); + xhr.onreadystatechange = function (data) { + if(xhr.readyState == 4){ + if(xhr.status == 200){ + pJS.tmp.source_svg = data.currentTarget.response; + pJS.fn.vendors.checkBeforeDraw(); + }else{ + console.log('Error pJS - Image not found'); + pJS.tmp.img_error = true; + } + } + } + xhr.send(); + + }else{ + + var img = new Image(); + img.addEventListener('load', function(){ + pJS.tmp.img_obj = img; + pJS.fn.vendors.checkBeforeDraw(); + }); + img.src = pJS.particles.shape.image.src; + + } + + }else{ + console.log('Error pJS - No image.src'); + pJS.tmp.img_error = true; + } + + }; + + + pJS.fn.vendors.draw = function(){ + + if(pJS.particles.shape.type == 'image'){ + + if(pJS.tmp.img_type == 'svg'){ + + if(pJS.tmp.count_svg >= pJS.particles.number.value){ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + }else{ + //console.log('still loading...'); + if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + }else{ + + if(pJS.tmp.img_obj != undefined){ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + }else{ + if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + } + + }else{ + pJS.fn.particlesDraw(); + if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); + else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); + } + + }; + + + pJS.fn.vendors.checkBeforeDraw = function(){ + + // if shape is image + if(pJS.particles.shape.type == 'image'){ + + if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){ + pJS.tmp.checkAnimFrame = requestAnimFrame(check); + }else{ + //console.log('images loaded! cancel check'); + cancelRequestAnimFrame(pJS.tmp.checkAnimFrame); + if(!pJS.tmp.img_error){ + pJS.fn.vendors.init(); + pJS.fn.vendors.draw(); + } + + } + + }else{ + pJS.fn.vendors.init(); + pJS.fn.vendors.draw(); + } + + }; + + + pJS.fn.vendors.init = function(){ + + /* init canvas + particles */ + pJS.fn.retinaInit(); + pJS.fn.canvasInit(); + pJS.fn.canvasSize(); + pJS.fn.canvasPaint(); + pJS.fn.particlesCreate(); + pJS.fn.vendors.densityAutoParticles(); + + /* particles.line_linked - convert hex colors to rgb */ + pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color); + + }; + + + pJS.fn.vendors.start = function(){ + + if(isInArray('image', pJS.particles.shape.type)){ + pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3); + pJS.fn.vendors.loadImg(pJS.tmp.img_type); + }else{ + pJS.fn.vendors.checkBeforeDraw(); + } + + }; + + + + + /* ---------- pJS - start ------------ */ + + + pJS.fn.vendors.eventsListeners(); + + pJS.fn.vendors.start(); + + + +}; + +/* ---------- global functions - vendors ------------ */ + +Object.deepExtend = function deepExtendFunction(destination, source) { + for (var property in source) { + if (source[property] && source[property].constructor && + source[property].constructor === Object) { + destination[property] = destination[property] || {}; + deepExtendFunction(destination[property], source[property]); + } else { + destination[property] = source[property]; + } + } + return destination; +}; + +window.requestAnimFrame = (function(){ + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function(callback){ + window.setTimeout(callback, 1000 / 60); + }; +})(); + +window.cancelRequestAnimFrame = ( function() { + return window.cancelAnimationFrame || + window.webkitCancelRequestAnimationFrame || + window.mozCancelRequestAnimationFrame || + window.oCancelRequestAnimationFrame || + window.msCancelRequestAnimationFrame || + clearTimeout +} )(); + +function hexToRgb(hex){ + // By Tim Down - http://stackoverflow.com/a/5624139/3493650 + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function(m, r, g, b) { + return r + r + g + g + b + b; + }); + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; +}; + +function clamp(number, min, max) { + return Math.min(Math.max(number, min), max); +}; + +function isInArray(value, array) { + return array.indexOf(value) > -1; +} + + +/* ---------- particles.js functions - start ------------ */ + +window.pJSDom = []; + +window.particlesJS = function(tag_id, params){ + + //console.log(params); + + /* no string id? so it's object params, and set the id with default id */ + if(typeof(tag_id) != 'string'){ + params = tag_id; + tag_id = 'particles-js'; + } + + /* no id? set the id to default id */ + if(!tag_id){ + tag_id = 'particles-js'; + } + + /* pJS elements */ + var pJS_tag = document.getElementById(tag_id), + pJS_canvas_class = 'particles-js-canvas-el', + exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class); + + /* remove canvas if exists into the pJS target tag */ + if(exist_canvas.length){ + while(exist_canvas.length > 0){ + pJS_tag.removeChild(exist_canvas[0]); + } + } + + /* create canvas element */ + var canvas_el = document.createElement('canvas'); + canvas_el.className = pJS_canvas_class; + + /* set size canvas */ + canvas_el.style.width = "100%"; + canvas_el.style.height = "100%"; + + /* append canvas */ + var canvas = document.getElementById(tag_id).appendChild(canvas_el); + + /* launch particle.js */ + if(canvas != null){ + pJSDom.push(new pJS(tag_id, params)); + } + +}; + +window.particlesJS.load = function(tag_id, path_config_json, callback){ + + /* load json config */ + var xhr = new XMLHttpRequest(); + xhr.open('GET', path_config_json); + xhr.onreadystatechange = function (data) { + if(xhr.readyState == 4){ + if(xhr.status == 200){ + var params = JSON.parse(data.currentTarget.response); + window.particlesJS(tag_id, params); + if(callback) callback(); + }else{ + console.log('Error pJS - XMLHttpRequest status: '+xhr.status); + console.log('Error pJS - File config not found'); + } + } + }; + xhr.send(); + +}; diff --git a/_src/scripts/vendor/particles.min.js b/_src/scripts/vendor/particles.min.js index b3d46d127..e69de29bb 100644 --- a/_src/scripts/vendor/particles.min.js +++ b/_src/scripts/vendor/particles.min.js @@ -1,9 +0,0 @@ -/* ----------------------------------------------- -/* Author : Vincent Garreau - vincentgarreau.com -/* MIT license: http://opensource.org/licenses/MIT -/* Demo / Generator : vincentgarreau.com/particles.js -/* GitHub : github.com/VincentGarreau/particles.js -/* How to use? : Check the GitHub README -/* v2.0.0 -/* ----------------------------------------------- */ -function hexToRgb(e){var a=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;e=e.replace(a,function(e,a,t,i){return a+a+t+t+i+i});var t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function clamp(e,a,t){return Math.min(Math.max(e,a),t)}function isInArray(e,a){return a.indexOf(e)>-1}var pJS=function(e,a){var t=document.querySelector("#"+e+" > .particles-js-canvas-el");this.pJS={canvas:{el:t,w:t.offsetWidth,h:t.offsetHeight},particles:{number:{value:400,density:{enable:!0,value_area:800}},color:{value:"#fff"},shape:{type:"circle",stroke:{width:0,color:"#ff0000"},polygon:{nb_sides:5},image:{src:"",width:100,height:100}},opacity:{value:1,random:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}},array:[]},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}},mouse:{}},retina_detect:!1,fn:{interact:{},modes:{},vendors:{}},tmp:{}};var i=this.pJS;a&&Object.deepExtend(i,a),i.tmp.obj={size_value:i.particles.size.value,size_anim_speed:i.particles.size.anim.speed,move_speed:i.particles.move.speed,line_linked_distance:i.particles.line_linked.distance,line_linked_width:i.particles.line_linked.width,mode_grab_distance:i.interactivity.modes.grab.distance,mode_bubble_distance:i.interactivity.modes.bubble.distance,mode_bubble_size:i.interactivity.modes.bubble.size,mode_repulse_distance:i.interactivity.modes.repulse.distance},i.fn.retinaInit=function(){i.retina_detect&&window.devicePixelRatio>1?(i.canvas.pxratio=window.devicePixelRatio,i.tmp.retina=!0):(i.canvas.pxratio=1,i.tmp.retina=!1),i.canvas.w=i.canvas.el.offsetWidth*i.canvas.pxratio,i.canvas.h=i.canvas.el.offsetHeight*i.canvas.pxratio,i.particles.size.value=i.tmp.obj.size_value*i.canvas.pxratio,i.particles.size.anim.speed=i.tmp.obj.size_anim_speed*i.canvas.pxratio,i.particles.move.speed=i.tmp.obj.move_speed*i.canvas.pxratio,i.particles.line_linked.distance=i.tmp.obj.line_linked_distance*i.canvas.pxratio,i.interactivity.modes.grab.distance=i.tmp.obj.mode_grab_distance*i.canvas.pxratio,i.interactivity.modes.bubble.distance=i.tmp.obj.mode_bubble_distance*i.canvas.pxratio,i.particles.line_linked.width=i.tmp.obj.line_linked_width*i.canvas.pxratio,i.interactivity.modes.bubble.size=i.tmp.obj.mode_bubble_size*i.canvas.pxratio,i.interactivity.modes.repulse.distance=i.tmp.obj.mode_repulse_distance*i.canvas.pxratio},i.fn.canvasInit=function(){i.canvas.ctx=i.canvas.el.getContext("2d")},i.fn.canvasSize=function(){i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i&&i.interactivity.events.resize&&window.addEventListener("resize",function(){i.canvas.w=i.canvas.el.offsetWidth,i.canvas.h=i.canvas.el.offsetHeight,i.tmp.retina&&(i.canvas.w*=i.canvas.pxratio,i.canvas.h*=i.canvas.pxratio),i.canvas.el.width=i.canvas.w,i.canvas.el.height=i.canvas.h,i.particles.move.enable||(i.fn.particlesEmpty(),i.fn.particlesCreate(),i.fn.particlesDraw(),i.fn.vendors.densityAutoParticles()),i.fn.vendors.densityAutoParticles()})},i.fn.canvasPaint=function(){i.canvas.ctx.fillRect(0,0,i.canvas.w,i.canvas.h)},i.fn.canvasClear=function(){i.canvas.ctx.clearRect(0,0,i.canvas.w,i.canvas.h)},i.fn.particle=function(e,a,t){if(this.radius=(i.particles.size.random?Math.random():1)*i.particles.size.value,i.particles.size.anim.enable&&(this.size_status=!1,this.vs=i.particles.size.anim.speed/100,i.particles.size.anim.sync||(this.vs=this.vs*Math.random())),this.x=t?t.x:Math.random()*i.canvas.w,this.y=t?t.y:Math.random()*i.canvas.h,this.x>i.canvas.w-2*this.radius?this.x=this.x-this.radius:this.x<2*this.radius&&(this.x=this.x+this.radius),this.y>i.canvas.h-2*this.radius?this.y=this.y-this.radius:this.y<2*this.radius&&(this.y=this.y+this.radius),i.particles.move.bounce&&i.fn.vendors.checkOverlap(this,t),this.color={},"object"==typeof e.value)if(e.value instanceof Array){var s=e.value[Math.floor(Math.random()*i.particles.color.value.length)];this.color.rgb=hexToRgb(s)}else void 0!=e.value.r&&void 0!=e.value.g&&void 0!=e.value.b&&(this.color.rgb={r:e.value.r,g:e.value.g,b:e.value.b}),void 0!=e.value.h&&void 0!=e.value.s&&void 0!=e.value.l&&(this.color.hsl={h:e.value.h,s:e.value.s,l:e.value.l});else"random"==e.value?this.color.rgb={r:Math.floor(256*Math.random())+0,g:Math.floor(256*Math.random())+0,b:Math.floor(256*Math.random())+0}:"string"==typeof e.value&&(this.color=e,this.color.rgb=hexToRgb(this.color.value));this.opacity=(i.particles.opacity.random?Math.random():1)*i.particles.opacity.value,i.particles.opacity.anim.enable&&(this.opacity_status=!1,this.vo=i.particles.opacity.anim.speed/100,i.particles.opacity.anim.sync||(this.vo=this.vo*Math.random()));var n={};switch(i.particles.move.direction){case"top":n={x:0,y:-1};break;case"top-right":n={x:.5,y:-.5};break;case"right":n={x:1,y:-0};break;case"bottom-right":n={x:.5,y:.5};break;case"bottom":n={x:0,y:1};break;case"bottom-left":n={x:-.5,y:1};break;case"left":n={x:-1,y:0};break;case"top-left":n={x:-.5,y:-.5};break;default:n={x:0,y:0}}i.particles.move.straight?(this.vx=n.x,this.vy=n.y,i.particles.move.random&&(this.vx=this.vx*Math.random(),this.vy=this.vy*Math.random())):(this.vx=n.x+Math.random()-.5,this.vy=n.y+Math.random()-.5),this.vx_i=this.vx,this.vy_i=this.vy;var r=i.particles.shape.type;if("object"==typeof r){if(r instanceof Array){var c=r[Math.floor(Math.random()*r.length)];this.shape=c}}else this.shape=r;if("image"==this.shape){var o=i.particles.shape;this.img={src:o.image.src,ratio:o.image.width/o.image.height},this.img.ratio||(this.img.ratio=1),"svg"==i.tmp.img_type&&void 0!=i.tmp.source_svg&&(i.fn.vendors.createSvgImg(this),i.tmp.pushing&&(this.img.loaded=!1))}},i.fn.particle.prototype.draw=function(){function e(){i.canvas.ctx.drawImage(r,a.x-t,a.y-t,2*t,2*t/a.img.ratio)}var a=this;if(void 0!=a.radius_bubble)var t=a.radius_bubble;else var t=a.radius;if(void 0!=a.opacity_bubble)var s=a.opacity_bubble;else var s=a.opacity;if(a.color.rgb)var n="rgba("+a.color.rgb.r+","+a.color.rgb.g+","+a.color.rgb.b+","+s+")";else var n="hsla("+a.color.hsl.h+","+a.color.hsl.s+"%,"+a.color.hsl.l+"%,"+s+")";switch(i.canvas.ctx.fillStyle=n,i.canvas.ctx.beginPath(),a.shape){case"circle":i.canvas.ctx.arc(a.x,a.y,t,0,2*Math.PI,!1);break;case"edge":i.canvas.ctx.rect(a.x-t,a.y-t,2*t,2*t);break;case"triangle":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t,a.y+t/1.66,2*t,3,2);break;case"polygon":i.fn.vendors.drawShape(i.canvas.ctx,a.x-t/(i.particles.shape.polygon.nb_sides/3.5),a.y-t/.76,2.66*t/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,1);break;case"star":i.fn.vendors.drawShape(i.canvas.ctx,a.x-2*t/(i.particles.shape.polygon.nb_sides/4),a.y-t/1.52,2*t*2.66/(i.particles.shape.polygon.nb_sides/3),i.particles.shape.polygon.nb_sides,2);break;case"image":if("svg"==i.tmp.img_type)var r=a.img.obj;else var r=i.tmp.img_obj;r&&e()}i.canvas.ctx.closePath(),i.particles.shape.stroke.width>0&&(i.canvas.ctx.strokeStyle=i.particles.shape.stroke.color,i.canvas.ctx.lineWidth=i.particles.shape.stroke.width,i.canvas.ctx.stroke()),i.canvas.ctx.fill()},i.fn.particlesCreate=function(){for(var e=0;e=i.particles.opacity.value&&(a.opacity_status=!1),a.opacity+=a.vo):(a.opacity<=i.particles.opacity.anim.opacity_min&&(a.opacity_status=!0),a.opacity-=a.vo),a.opacity<0&&(a.opacity=0)),i.particles.size.anim.enable&&(1==a.size_status?(a.radius>=i.particles.size.value&&(a.size_status=!1),a.radius+=a.vs):(a.radius<=i.particles.size.anim.size_min&&(a.size_status=!0),a.radius-=a.vs),a.radius<0&&(a.radius=0)),"bounce"==i.particles.move.out_mode)var s={x_left:a.radius,x_right:i.canvas.w,y_top:a.radius,y_bottom:i.canvas.h};else var s={x_left:-a.radius,x_right:i.canvas.w+a.radius,y_top:-a.radius,y_bottom:i.canvas.h+a.radius};switch(a.x-a.radius>i.canvas.w?(a.x=s.x_left,a.y=Math.random()*i.canvas.h):a.x+a.radius<0&&(a.x=s.x_right,a.y=Math.random()*i.canvas.h),a.y-a.radius>i.canvas.h?(a.y=s.y_top,a.x=Math.random()*i.canvas.w):a.y+a.radius<0&&(a.y=s.y_bottom,a.x=Math.random()*i.canvas.w),i.particles.move.out_mode){case"bounce":a.x+a.radius>i.canvas.w?a.vx=-a.vx:a.x-a.radius<0&&(a.vx=-a.vx),a.y+a.radius>i.canvas.h?a.vy=-a.vy:a.y-a.radius<0&&(a.vy=-a.vy)}if(isInArray("grab",i.interactivity.events.onhover.mode)&&i.fn.modes.grabParticle(a),(isInArray("bubble",i.interactivity.events.onhover.mode)||isInArray("bubble",i.interactivity.events.onclick.mode))&&i.fn.modes.bubbleParticle(a),(isInArray("repulse",i.interactivity.events.onhover.mode)||isInArray("repulse",i.interactivity.events.onclick.mode))&&i.fn.modes.repulseParticle(a),i.particles.line_linked.enable||i.particles.move.attract.enable)for(var n=e+1;n0){var c=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+c.r+","+c.g+","+c.b+","+r+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(a.x,a.y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}},i.fn.interact.attractParticles=function(e,a){var t=e.x-a.x,s=e.y-a.y,n=Math.sqrt(t*t+s*s);if(n<=i.particles.line_linked.distance){var r=t/(1e3*i.particles.move.attract.rotateX),c=s/(1e3*i.particles.move.attract.rotateY);e.vx-=r,e.vy-=c,a.vx+=r,a.vy+=c}},i.fn.interact.bounceParticles=function(e,a){var t=e.x-a.x,i=e.y-a.y,s=Math.sqrt(t*t+i*i),n=e.radius+a.radius;n>=s&&(e.vx=-e.vx,e.vy=-e.vy,a.vx=-a.vx,a.vy=-a.vy)},i.fn.modes.pushParticles=function(e,a){i.tmp.pushing=!0;for(var t=0;e>t;t++)i.particles.array.push(new i.fn.particle(i.particles.color,i.particles.opacity.value,{x:a?a.pos_x:Math.random()*i.canvas.w,y:a?a.pos_y:Math.random()*i.canvas.h})),t==e-1&&(i.particles.move.enable||i.fn.particlesDraw(),i.tmp.pushing=!1)},i.fn.modes.removeParticles=function(e){i.particles.array.splice(0,e),i.particles.move.enable||i.fn.particlesDraw()},i.fn.modes.bubbleParticle=function(e){function a(){e.opacity_bubble=e.opacity,e.radius_bubble=e.radius}function t(a,t,s,n,c){if(a!=t)if(i.tmp.bubble_duration_end){if(void 0!=s){var o=n-p*(n-a)/i.interactivity.modes.bubble.duration,l=a-o;d=a+l,"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else if(r<=i.interactivity.modes.bubble.distance){if(void 0!=s)var v=s;else var v=n;if(v!=a){var d=n-p*(n-a)/i.interactivity.modes.bubble.duration;"size"==c&&(e.radius_bubble=d),"opacity"==c&&(e.opacity_bubble=d)}}else"size"==c&&(e.radius_bubble=void 0),"opacity"==c&&(e.opacity_bubble=void 0)}if(i.interactivity.events.onhover.enable&&isInArray("bubble",i.interactivity.events.onhover.mode)){var s=e.x-i.interactivity.mouse.pos_x,n=e.y-i.interactivity.mouse.pos_y,r=Math.sqrt(s*s+n*n),c=1-r/i.interactivity.modes.bubble.distance;if(r<=i.interactivity.modes.bubble.distance){if(c>=0&&"mousemove"==i.interactivity.status){if(i.interactivity.modes.bubble.size!=i.particles.size.value)if(i.interactivity.modes.bubble.size>i.particles.size.value){var o=e.radius+i.interactivity.modes.bubble.size*c;o>=0&&(e.radius_bubble=o)}else{var l=e.radius-i.interactivity.modes.bubble.size,o=e.radius-l*c;o>0?e.radius_bubble=o:e.radius_bubble=0}if(i.interactivity.modes.bubble.opacity!=i.particles.opacity.value)if(i.interactivity.modes.bubble.opacity>i.particles.opacity.value){var v=i.interactivity.modes.bubble.opacity*c;v>e.opacity&&v<=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}else{var v=e.opacity-(i.particles.opacity.value-i.interactivity.modes.bubble.opacity)*c;v=i.interactivity.modes.bubble.opacity&&(e.opacity_bubble=v)}}}else a();"mouseleave"==i.interactivity.status&&a()}else if(i.interactivity.events.onclick.enable&&isInArray("bubble",i.interactivity.events.onclick.mode)){if(i.tmp.bubble_clicking){var s=e.x-i.interactivity.mouse.click_pos_x,n=e.y-i.interactivity.mouse.click_pos_y,r=Math.sqrt(s*s+n*n),p=((new Date).getTime()-i.interactivity.mouse.click_time)/1e3;p>i.interactivity.modes.bubble.duration&&(i.tmp.bubble_duration_end=!0),p>2*i.interactivity.modes.bubble.duration&&(i.tmp.bubble_clicking=!1,i.tmp.bubble_duration_end=!1)}i.tmp.bubble_clicking&&(t(i.interactivity.modes.bubble.size,i.particles.size.value,e.radius_bubble,e.radius,"size"),t(i.interactivity.modes.bubble.opacity,i.particles.opacity.value,e.opacity_bubble,e.opacity,"opacity"))}},i.fn.modes.repulseParticle=function(e){function a(){var a=Math.atan2(d,p);if(e.vx=u*Math.cos(a),e.vy=u*Math.sin(a),"bounce"==i.particles.move.out_mode){var t={x:e.x+e.vx,y:e.y+e.vy};t.x+e.radius>i.canvas.w?e.vx=-e.vx:t.x-e.radius<0&&(e.vx=-e.vx),t.y+e.radius>i.canvas.h?e.vy=-e.vy:t.y-e.radius<0&&(e.vy=-e.vy)}}if(i.interactivity.events.onhover.enable&&isInArray("repulse",i.interactivity.events.onhover.mode)&&"mousemove"==i.interactivity.status){var t=e.x-i.interactivity.mouse.pos_x,s=e.y-i.interactivity.mouse.pos_y,n=Math.sqrt(t*t+s*s),r={x:t/n,y:s/n},c=i.interactivity.modes.repulse.distance,o=100,l=clamp(1/c*(-1*Math.pow(n/c,2)+1)*c*o,0,50),v={x:e.x+r.x*l,y:e.y+r.y*l};"bounce"==i.particles.move.out_mode?(v.x-e.radius>0&&v.x+e.radius0&&v.y+e.radius=m&&a()}else 0==i.tmp.repulse_clicking&&(e.vx=e.vx_i,e.vy=e.vy_i)},i.fn.modes.grabParticle=function(e){if(i.interactivity.events.onhover.enable&&"mousemove"==i.interactivity.status){var a=e.x-i.interactivity.mouse.pos_x,t=e.y-i.interactivity.mouse.pos_y,s=Math.sqrt(a*a+t*t);if(s<=i.interactivity.modes.grab.distance){var n=i.interactivity.modes.grab.line_linked.opacity-s/(1/i.interactivity.modes.grab.line_linked.opacity)/i.interactivity.modes.grab.distance;if(n>0){var r=i.particles.line_linked.color_rgb_line;i.canvas.ctx.strokeStyle="rgba("+r.r+","+r.g+","+r.b+","+n+")",i.canvas.ctx.lineWidth=i.particles.line_linked.width,i.canvas.ctx.beginPath(),i.canvas.ctx.moveTo(e.x,e.y),i.canvas.ctx.lineTo(i.interactivity.mouse.pos_x,i.interactivity.mouse.pos_y),i.canvas.ctx.stroke(),i.canvas.ctx.closePath()}}}},i.fn.vendors.eventsListeners=function(){"window"==i.interactivity.detect_on?i.interactivity.el=window:i.interactivity.el=i.canvas.el,(i.interactivity.events.onhover.enable||i.interactivity.events.onclick.enable)&&(i.interactivity.el.addEventListener("mousemove",function(e){if(i.interactivity.el==window)var a=e.clientX,t=e.clientY;else var a=e.offsetX||e.clientX,t=e.offsetY||e.clientY;i.interactivity.mouse.pos_x=a,i.interactivity.mouse.pos_y=t,i.tmp.retina&&(i.interactivity.mouse.pos_x*=i.canvas.pxratio,i.interactivity.mouse.pos_y*=i.canvas.pxratio),i.interactivity.status="mousemove"}),i.interactivity.el.addEventListener("mouseleave",function(e){i.interactivity.mouse.pos_x=null,i.interactivity.mouse.pos_y=null,i.interactivity.status="mouseleave"})),i.interactivity.events.onclick.enable&&i.interactivity.el.addEventListener("click",function(){if(i.interactivity.mouse.click_pos_x=i.interactivity.mouse.pos_x,i.interactivity.mouse.click_pos_y=i.interactivity.mouse.pos_y,i.interactivity.mouse.click_time=(new Date).getTime(),i.interactivity.events.onclick.enable)switch(i.interactivity.events.onclick.mode){case"push":i.particles.move.enable?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):1==i.interactivity.modes.push.particles_nb?i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb,i.interactivity.mouse):i.interactivity.modes.push.particles_nb>1&&i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb);break;case"remove":i.fn.modes.removeParticles(i.interactivity.modes.remove.particles_nb);break;case"bubble":i.tmp.bubble_clicking=!0;break;case"repulse":i.tmp.repulse_clicking=!0,i.tmp.repulse_count=0,i.tmp.repulse_finish=!1,setTimeout(function(){i.tmp.repulse_clicking=!1},1e3*i.interactivity.modes.repulse.duration)}})},i.fn.vendors.densityAutoParticles=function(){if(i.particles.number.density.enable){var e=i.canvas.el.width*i.canvas.el.height/1e3;i.tmp.retina&&(e/=2*i.canvas.pxratio);var a=e*i.particles.number.value/i.particles.number.density.value_area,t=i.particles.array.length-a;0>t?i.fn.modes.pushParticles(Math.abs(t)):i.fn.modes.removeParticles(t)}},i.fn.vendors.checkOverlap=function(e,a){for(var t=0;tv;v++)e.lineTo(i,0),e.translate(i,0),e.rotate(l);e.fill(),e.restore()},i.fn.vendors.exportImg=function(){window.open(i.canvas.el.toDataURL("image/png"),"_blank")},i.fn.vendors.loadImg=function(e){if(i.tmp.img_error=void 0,""!=i.particles.shape.image.src)if("svg"==e){var a=new XMLHttpRequest;a.open("GET",i.particles.shape.image.src),a.onreadystatechange=function(e){4==a.readyState&&(200==a.status?(i.tmp.source_svg=e.currentTarget.response,i.fn.vendors.checkBeforeDraw()):(console.log("Error pJS - Image not found"),i.tmp.img_error=!0))},a.send()}else{var t=new Image;t.addEventListener("load",function(){i.tmp.img_obj=t,i.fn.vendors.checkBeforeDraw()}),t.src=i.particles.shape.image.src}else console.log("Error pJS - No image.src"),i.tmp.img_error=!0},i.fn.vendors.draw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type?i.tmp.count_svg>=i.particles.number.value?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):void 0!=i.tmp.img_obj?(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame)):i.tmp.img_error||(i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw)):(i.fn.particlesDraw(),i.particles.move.enable?i.fn.drawAnimFrame=requestAnimFrame(i.fn.vendors.draw):cancelRequestAnimFrame(i.fn.drawAnimFrame))},i.fn.vendors.checkBeforeDraw=function(){"image"==i.particles.shape.type?"svg"==i.tmp.img_type&&void 0==i.tmp.source_svg?i.tmp.checkAnimFrame=requestAnimFrame(check):(cancelRequestAnimFrame(i.tmp.checkAnimFrame),i.tmp.img_error||(i.fn.vendors.init(),i.fn.vendors.draw())):(i.fn.vendors.init(),i.fn.vendors.draw())},i.fn.vendors.init=function(){i.fn.retinaInit(),i.fn.canvasInit(),i.fn.canvasSize(),i.fn.canvasPaint(),i.fn.particlesCreate(),i.fn.vendors.densityAutoParticles(),i.particles.line_linked.color_rgb_line=hexToRgb(i.particles.line_linked.color)},i.fn.vendors.start=function(){isInArray("image",i.particles.shape.type)?(i.tmp.img_type=i.particles.shape.image.src.substr(i.particles.shape.image.src.length-3),i.fn.vendors.loadImg(i.tmp.img_type)):i.fn.vendors.checkBeforeDraw()},i.fn.vendors.eventsListeners(),i.fn.vendors.start()};Object.deepExtend=function(e,a){for(var t in a)a[t]&&a[t].constructor&&a[t].constructor===Object?(e[t]=e[t]||{},arguments.callee(e[t],a[t])):e[t]=a[t];return e},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),window.cancelRequestAnimFrame=function(){return window.cancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelRequestAnimationFrame||window.oCancelRequestAnimationFrame||window.msCancelRequestAnimationFrame||clearTimeout}(),window.pJSDom=[],window.particlesJS=function(e,a){"string"!=typeof e&&(a=e,e="particles-js"),e||(e="particles-js");var t=document.getElementById(e),i="particles-js-canvas-el",s=t.getElementsByClassName(i);if(s.length)for(;s.length>0;)t.removeChild(s[0]);var n=document.createElement("canvas");n.className=i,n.style.width="100%",n.style.height="100%";var r=document.getElementById(e).appendChild(n);null!=r&&pJSDom.push(new pJS(e,a))},window.particlesJS.load=function(e,a,t){var i=new XMLHttpRequest;i.open("GET",a),i.onreadystatechange=function(a){if(4==i.readyState)if(200==i.status){var s=JSON.parse(a.currentTarget.response);window.particlesJS(e,s),t&&t()}else console.log("Error pJS - XMLHttpRequest status: "+i.status),console.log("Error pJS - File config not found")},i.send()}; \ No newline at end of file From 0ebf90fd4ff4001a6e942f5c79a57f7e1f7c0b95 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 20 Feb 2024 18:48:23 +0200 Subject: [PATCH 0106/1296] updates --- _src/blocks/banner/banner.css | 8 +++- _src/blocks/banner/banner.js | 1 + _src/blocks/slider/slider.js | 70 ++++++++++++++++++++++++++-- _src/blocks/video/video.css | 3 +- _src/icons/quote_bottom.png | Bin 0 -> 1935 bytes _src/icons/quote_top.png | Bin 0 -> 1905 bytes _src/styles/trusted.css | 83 +++++++++++++++++++++++++++++++++- 7 files changed, 156 insertions(+), 9 deletions(-) create mode 100644 _src/icons/quote_bottom.png create mode 100644 _src/icons/quote_top.png diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index 12e2ee76f..ad02eafaf 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -38,7 +38,7 @@ } } -.banner em { +.section.trusted_lp.banner em { font-size: 12px; line-height: 15px; font-style: unset; @@ -46,7 +46,7 @@ } @media (width >= 768px) { - .section.trusted_lp .banner h2 { + .section.trusted_lp.top_banner .banner h2 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; text-align: left; } @@ -55,6 +55,10 @@ padding-right: 5em; } + .section.trusted_lp.top_banner .banner .banner-left { + padding-right: 0; + } + .section.trusted_lp .banner .banner-right { padding-left: 5em; } diff --git a/_src/blocks/banner/banner.js b/_src/blocks/banner/banner.js index c23d3d01a..cc8b0826a 100644 --- a/_src/blocks/banner/banner.js +++ b/_src/blocks/banner/banner.js @@ -39,6 +39,7 @@ export default function decorate(block) { parentBlockStyle.backgroundImage = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]})`; parentBlockStyle.backgroundRepeat = 'no-repeat'; parentBlockStyle.backgroundPosition = 'right 0'; + parentBlockStyle.backgroundSize = 'auto 100%'; parentBlockStyle.backgroundColor = background_color || '#000'; if (image_cover === 'full-left-50') { diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js index cf9e0e72c..dadd9c29d 100644 --- a/_src/blocks/slider/slider.js +++ b/_src/blocks/slider/slider.js @@ -28,9 +28,71 @@ export default function decorate(block) {
`; - parentBlock.addEventListener("wheel", (evt) => { - // evt.preventDefault(); + const items = parentBlock.getElementsByClassName("slider-item"); + let allItemsSeen = false; + +parentBlock.addEventListener("wheel", handleWheel); + +function handleWheel(evt) { + if (!allItemsSeen) { + evt.preventDefault(); + const delta = evt.deltaY || evt.deltaX; + + if (delta !== 0) { + parentBlock.scrollLeft += delta; + } + + // Check if all items have been seen + const firstItem = items[0]; + const lastItem = items[items.length - 1]; + const parentLeft = parentBlock.getBoundingClientRect().left; + const parentRight = parentBlock.getBoundingClientRect().right; + + if (delta > 0 && lastItem.getBoundingClientRect().right <= parentRight) { + // Scrolling down and all items have been seen + allItemsSeen = true; + removePreventDefault(); + } else if (delta < 0 && firstItem.getBoundingClientRect().left >= parentLeft) { + // Scrolling up and reached the first item + allItemsSeen = true; + removePreventDefault(); + } + } +} + +function removePreventDefault() { + // Remove the event listener to stop preventing default behavior + parentBlock.removeEventListener("wheel", handleWheel); + // Enable scrolling again when scrolling back up or down + parentBlock.addEventListener("wheel", handleRevertScroll); + + function handleRevertScroll(evt) { + const delta = evt.deltaY || evt.deltaX; + + if (delta !== 0) { + parentBlock.scrollLeft += delta; + + // Check if scrolling down and all items have been seen + if (delta > 0 && allItemsSeen) { + allItemsSeen = false; + // Reattach the original event listener + parentBlock.addEventListener("wheel", handleWheel); + // Remove the revert scroll event listener + parentBlock.removeEventListener("wheel", handleRevertScroll); + } else if (delta < 0 && allItemsSeen) { + allItemsSeen = false; + // Reattach the original event listener + parentBlock.addEventListener("wheel", handleWheel); + // Remove the revert scroll event listener + parentBlock.removeEventListener("wheel", handleRevertScroll); + } + } + } +} + + /* parentBlock.addEventListener("wheel", (evt) => { + evt.preventDefault(); parentBlock.scrollLeft += evt.deltaY; - console.log(evt.deltaY) - }); + // console.log(evt.deltaY) + }); */ } diff --git a/_src/blocks/video/video.css b/_src/blocks/video/video.css index f615ab1b2..e92cf533c 100644 --- a/_src/blocks/video/video.css +++ b/_src/blocks/video/video.css @@ -1,7 +1,6 @@ .video { width: unset; text-align: center; - max-width: 800px; margin-top: 32px; margin-bottom: 32px; } @@ -12,6 +11,8 @@ .video > div { display: flex; justify-content: center; + border-radius: 13px; + overflow: hidden; } .video.left { margin-right: auto; diff --git a/_src/icons/quote_bottom.png b/_src/icons/quote_bottom.png new file mode 100644 index 0000000000000000000000000000000000000000..253ab209fe87a736577539550208c6740f9a0117 GIT binary patch literal 1935 zcmaJ?c~BEq9F9c+`4dDr~RfN61mXomWOq<+dY;i#Ov8V`6LNyWW`JeYDU#c5GtKQGi5afjEww$C!YW-GTC^R8cgc zHPPDbR8+{b%H_NHwvKbQiO8|jhb_)bB*d4C^`sdcQlt$K2&~g>&dx0qc`Vo-u{X>j zAbxZBGr-DLR;CryD_rm;4QskNZ}xfABib7`2kX0sd-rL&vq)1WtYtg%n8Fh_6j&OurpSNEwZRTa0H+)}t^}v$rrFuct)z;Agn`3#e&7e!hRg2fx z-8XhhiEUtSJ2&pS@eHG{X`p5FFLTK0*!n1cv&rq9Fxfqju-V&X)?z`<4D(=TcvfXr zF|qKE^=9~WzI4FeVymk!KWN*+Yt?&dU0d*_360rh7Ac#GY(gvBs_zsYJVbbWdP_%m z$`gmLOPtRa*pb)hMcdc5Ts%5awQNPsrGo1@di%{`X}Uda)r6%4sc&PU?5*`s2qw7LA^6}F^uq#1HdZhU#M!iy1}bfVwA5(FR|g^o&2urT3V^g-TXV=cBM1@ zwiOA3%DaO*iVkyx=}%7A?d&lgzRbEe{9=oyew|_1;BZBA;Vh{WZ~XvjU6`%@_NU1% zmbci^I%JSC;l~Zx)iLRqjk{YsA!}3D{$I;2=e786n_zg>AGc$l6aEd5TH|c*5`NflVm(mEf75aXkcIBb`#}A*Zy4w`|d`&JKXw`oC8p%ELl;h)f4$F9|ouCLUuWy{F5BF`qd#1QJq2Cn>QKwvgr4Kyt;%9&q-OsL4_|5Eqg5!C+{PL z!LX6GzrNAsj>~k1^ZJFBjyoQVNFw&uKhfXMIFOxaZ@b$iIQz^m4kt>l)#lHbEw|Cl zh_2gHnw~rJ-a)GkQ+~!5yt}Era6C4fMPT(^7;#O@8*DqUB6XV3+`l<4KlgIh)4IdZ z+|1IdoF?RPfBH(-xa;j2W3|JAnplf&1Dm|nYIN-vQ*hJztZLJogr;9EE|f3e9S>ZQ F^AG2Z5xD>W literal 0 HcmV?d00001 diff --git a/_src/icons/quote_top.png b/_src/icons/quote_top.png new file mode 100644 index 0000000000000000000000000000000000000000..c71e6bafc2e65723542229b9859b0a8f5798bb65 GIT binary patch literal 1905 zcmaJ?X;c$u6pbhZ5h_Ph6kHgC2rfw`n6|n3E$80*?t9<+&g3R6 zj`8sd@FEZhK5?-^2|g~v-w00+{2Sn#y#pWoF_8>ghAJ_GT!#?&3UnO;#Hr=Uhy;-< z(l<6C5d^~MSt_XvlZh8WFsi1?T^OoSt;N~67|*Dc!>I@ctV5Dj8ZNn~`XU)nDY)cB zwipy^1xSi2)}%w0nHEc7Q!30+ka-J$2qT0Gs1ZyK7}XmzddSEnzt)BDxoew723|w3 zR4)0ADVaC{5TH5);85ul7z7!>dmO5g$z~x+_&snQzyKLc8l6r9ITShr0@)Co3A}yC zctD*(2}y*}Z^Pj$E;$9mv=EJEFc_!?CKc5s)94%yhXyie39Q1s~y(8uLwJ7LP1MbgDE&5v@bj!0VhL)yQ6iBkH~7Dn|4o z6phHG;bv&All|984{hP?FPI3HefEdv|e7Dv3|3 zy+7UZS?J8N8?2UDo_>zw74M8Yc|vHPl~kIwd$+7?=fs(ZSASme{`^r{tie%~ zo60<=wik;lZ+MPkU+bTqKJL+h)oIG)-)cVE+$(cytNHnYEu9%&{bfsvV#}4zx!*T; zlxDV{2~%5|+hjfJ0QtsF8#}Z=Qn@|+Ixa){H=ELLlJDZ(<5P<6m_bHLjUli|% z_wKqn{t_@?y*_r#5#6UHGhR7}eBVN9rZfJ=&R4%@5_hhMh&V%NQtaoaW%+a!1V(Jd zCLf*`duVrL8fkLt6rPl@zfn+h%VRrX?Od?TVAhT~Mz1eyP_3|=gMV_%`o&PN$Spm` zbm>ep#;%MkePOp(u)?c$KpnE=GGcL(^Ik&oO24z2PH)G_LdZWqaB3^u zI>E*Y*2|wxpa1NrHNTlhWgMdwEexA;q_1wDhoQw@@!j6Pq`te!&KS{Ab!Np$8_8i2 zoHzN6|9%b4T4E!05SIi2pMN`l{qdlxNrQFyZKt}gF#5Nyoi+zNI+;h3Y(HiMbw?iROEx8MeE+^Nj%y-5sPv`vNHZzGf<+F*`sBGs}zw+RLThd3L&KkTi+ECd$h#euG;M+`Le)c@njppORo~VpFnn`UK6@ z)!vn>?R9OBHa-I$p3bfMefj8&lP`8zf1Kp@fLqspX?w=h?T(_72b1F;r|$jLHtmlF z%H2s9YBO2~d;QmPn{3l0XPuecwvM)(7vY@}=a-B_G#E5#MOP9EE_HXz-7Il75LAN~ b-Mk3}3p|UL div:nth-of-type(2) { + flex: 0; + margin-left: 0; +} + +.trusted_lp.has_quotes .d-flex > div:nth-of-type(2) { + margin-left: 0; +} + +.trusted_lp.has_quotes p { + margin: 0; +} + +.trusted_lp.has_quotes em { + font-style: normal; +} + +.trusted_lp.has_quotes blockquote { + margin: 0; +} + +.trusted_lp.has_quotes blockquote::before, .trusted_lp.has_quotes blockquote::after { + content: ""; + height: 40px; + width: 100%; + display: block; +} + +.trusted_lp.has_quotes blockquote::before { + margin-bottom: 1em; + background: url('../icons/quote_top.png') no-repeat 0 0 transparent; + background-size: auto 100%; +} + +.trusted_lp.has_quotes blockquote::after { + margin-top: 1em; + background: url('../icons/quote_top.png') no-repeat 0 0 transparent; + background-position: right; + background-size: auto 100%; +} + /* mouse-scroll */ .trusted_lp #mouse-scroll { - display: block; + display: none; } .trusted_lp #mouse-scroll { @@ -250,12 +303,17 @@ font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; } + .trusted_lp h4 { + font: normal normal normal 35px/38px "IBM Plex Sans", sans-serif; + } + .trusted_lp p { font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; } .trusted_lp .d-flex { display: flex; + flex-direction: row; } .trusted_lp .only-desktop { @@ -265,10 +323,31 @@ .trusted_lp .only-mobile { display: none; } + + .trusted_lp #mouse-scroll { + display: block; + } + + .trusted_lp.apartnership_box .d-flex > div:nth-of-type(2) { + margin-left: 14em; + } + + .trusted_lp.has_quotes .d-flex > div:nth-of-type(2) { + margin-left: 6em; + } + + .trusted_lp.has_quotes blockquote::before, .trusted_lp.has_quotes blockquote::after { + height: 60px; + } } @media (width <= 768px) { .trusted_lp .default-content-wrapper { padding: 1em!important; } + + .trusted_lp.top_banner .default-content-wrapper { + padding-bottom: 0!important; + + } } \ No newline at end of file From 58e7c54729c7d76c2ff1cc3bfe33b09c17c0a209 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 20 Feb 2024 20:09:26 +0200 Subject: [PATCH 0107/1296] general fixes --- _src/blocks/banner/banner.css | 14 +- _src/blocks/image-columns/image-columns.css | 4 +- _src/scripts/scripts.js | 8 +- _src/scripts/template-factories/trusted.css | 158 ++++++++------------ _src/styles/styles.css | 8 +- 5 files changed, 83 insertions(+), 109 deletions(-) diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index ad02eafaf..e27d45d37 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -38,7 +38,7 @@ } } -.section.trusted_lp.banner em { +.section.trusted.banner em { font-size: 12px; line-height: 15px; font-style: unset; @@ -46,24 +46,24 @@ } @media (width >= 768px) { - .section.trusted_lp.top_banner .banner h2 { + .section.trusted.top_banner .banner h2 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; text-align: left; } - .section.trusted_lp .banner .banner-left { + .section.trusted .banner .banner-left { padding-right: 5em; } - .section.trusted_lp.top_banner .banner .banner-left { + .section.trusted.top_banner .banner .banner-left { padding-right: 0; } - .section.trusted_lp .banner .banner-right { + .section.trusted .banner .banner-right { padding-left: 5em; } - .section.trusted_lp.content_right_diff .banner .banner-right img { + .section.trusted.content_right_diff .banner .banner-right img { margin-left: -5em; } } @@ -78,4 +78,4 @@ bottom: 10px; font-size: 15px; } -} \ No newline at end of file +} diff --git a/_src/blocks/image-columns/image-columns.css b/_src/blocks/image-columns/image-columns.css index 6322a6b49..31c811106 100644 --- a/_src/blocks/image-columns/image-columns.css +++ b/_src/blocks/image-columns/image-columns.css @@ -95,7 +95,7 @@ margin-top: 0; } -.image-columns.trusted_lp > div > .image-columns-txt-col { +.image-columns.trusted > div > .image-columns-txt-col { flex: 0 1 25%; } @@ -151,4 +151,4 @@ .image-columns-wrapper { max-width: var(--section-large-desktop-max-width); } -} \ No newline at end of file +} diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 13c3e7ad6..8059c1d2d 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -485,9 +485,11 @@ function pushPageLoadToDataLayer() { async function loadEager(doc) { setPageLanguage(getLanguageCountryFromPath(window.location.pathname)); decorateTemplateAndTheme(); - if (getMetadata('template') !== '') { - loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${getMetadata('template')}.css`); - loadScript(`${window.hlx.codeBasePath}/scripts/template-factories/${getMetadata('template')}.js`, { + const templateMetadata = getMetadata('template'); + const hasTemplate = getMetadata('template') !== ''; + if (hasTemplate) { + loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${templateMetadata}.css`); + loadScript(`${window.hlx.codeBasePath}/scripts/template-factories/${templateMetadata}.js`, { type: 'module', }); } diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 642fc3eb4..b537e9243 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -5,112 +5,113 @@ --dark2: #0c0f14; --darker: #06080a; --font-ibm: "IBM Plex Sans", sans-serif; - } +} /* tipography */ -.trusted_lp { +.trusted { color: white; font-family: "IBM Plex Sans", sans-serif; + position: relative; } -.trusted_lp div[data-align="right"] { +.trusted div[data-align="right"] { text-align: right; } -.trusted_lp div[data-align="left"] { +.trusted div[data-align="left"] { text-align: left; } -.trusted_lp div[data-align="center"] { +.trusted div[data-align="center"] { text-align: center; } -.trusted_lp h1 { +.trusted h1 { font: normal normal bold 44px/42px var(--font-ibm); text-align: left; } -.trusted_lp h2 { +.trusted h2 { font: normal normal bold 31px/33px var(--font-ibm); text-align: left; } -.trusted_lp h3 { +.trusted h3 { font: normal normal bold 20px/24px var(--font-ibm); text-align: left; } -.trusted_lp h4 { +.trusted h4 { font: normal normal normal 18px/20px var(--font-ibm); text-align: left; } -.trusted_lp p { +.trusted p { font: normal normal normal 16px/22px var(--font-ibm); text-align: left; } -.trusted_lp u { +.trusted u { text-decoration: none; } -.trusted_lp.blue_tag u { +.trusted.blue_tag u { color: var(--blue); } -.trusted_lp .d-flex { +.trusted .d-flex { flex-direction: column; } -.trusted_lp .justify-between { +.trusted .justify-between { justify-content: space-between; } -.trusted_lp .align-top { +.trusted .align-top { align-items: top; } -.trusted_lp .align-center { +.trusted .align-center { align-items: center; } -.trusted_lp .align-end { +.trusted .align-end { align-items: end; } -.trusted_lp .d-flex div { +.trusted .d-flex div { flex: 1; } -.trusted_lp.blue_bck { +.trusted.blue_bck { background-color: var(--blue); } -.trusted_lp.red_bck { +.trusted.red_bck { background-color: var(--red); } -.trusted_lp.dark_bck { +.trusted.dark_bck { background-color: var(--dark); } -.trusted_lp.dark2_bck { +.trusted.dark2_bck { background-color: var(--dark2); } -.trusted_lp.darker_bck { +.trusted.darker_bck { background-color: var(--darker); } -.trusted_lp .only-desktop { +.trusted .only-desktop { display: none; } -.trusted_lp .only-mobile { +.trusted .only-mobile { display: block; } -.trusted_lp a.button { +.trusted a.button { border: 1px solid white; color: white; font-weight: 500; @@ -119,48 +120,48 @@ padding: 5px 3px 5px 16px; } -.trusted_lp.video_up { +.trusted.video_up { z-index: 999; position: relative; margin-top: -15em; background: linear-gradient(to bottom, transparent 31%,var(--dark2) 31%); } -.trusted_lp.apartnership_box .d-flex > div:nth-of-type(2) { +.trusted.apartnership_box .d-flex > div:nth-of-type(2) { flex: 0; margin-left: 0; } -.trusted_lp.has_quotes .d-flex > div:nth-of-type(2) { +.trusted.has_quotes .d-flex > div:nth-of-type(2) { margin-left: 0; } -.trusted_lp.has_quotes p { +.trusted.has_quotes p { margin: 0; } -.trusted_lp.has_quotes em { +.trusted.has_quotes em { font-style: normal; } -.trusted_lp.has_quotes blockquote { +.trusted.has_quotes blockquote { margin: 0; } -.trusted_lp.has_quotes blockquote::before, .trusted_lp.has_quotes blockquote::after { +.trusted.has_quotes blockquote::before, .trusted.has_quotes blockquote::after { content: ""; height: 40px; width: 100%; display: block; } -.trusted_lp.has_quotes blockquote::before { +.trusted.has_quotes blockquote::before { margin-bottom: 1em; background: url('../icons/quote_top.png') no-repeat 0 0 transparent; background-size: auto 100%; } -.trusted_lp.has_quotes blockquote::after { +.trusted.has_quotes blockquote::after { margin-top: 1em; background: url('../icons/quote_top.png') no-repeat 0 0 transparent; background-position: right; @@ -168,11 +169,11 @@ } /* mouse-scroll */ -.trusted_lp #mouse-scroll { +.trusted #mouse-scroll { display: none; } -.trusted_lp #mouse-scroll { +.trusted #mouse-scroll { position: fixed; margin: auto; left: 10%; @@ -181,7 +182,7 @@ z-index: 9999; } -.trusted_lp #mouse-scroll span { +.trusted #mouse-scroll span { display: block; /*width: 5px; height: 5px; @@ -197,7 +198,7 @@ margin: 3px auto; } -.trusted_lp #mouse-scroll .mouse { +.trusted #mouse-scroll .mouse { height: 60px; width: 38px; border-radius: 30px; @@ -209,34 +210,34 @@ margin-bottom: 9px; } -.trusted_lp #mouse-scroll .down-arrow-1 { +.trusted #mouse-scroll .down-arrow-1 { margin-top: 6px; } -.trusted_lp #mouse-scroll .down-arrow-1, .trusted_lp #mouse-scroll .down-arrow-2, .trusted_lp #mouse-scroll .down-arrow-3 { +.trusted #mouse-scroll .down-arrow-1, .trusted #mouse-scroll .down-arrow-2, .trusted #mouse-scroll .down-arrow-3 { -webkit-animation: mouse-scroll 1s infinite; -moz-animation: mouse-scroll 1s infinite; } -.trusted_lp #mouse-croll .down-arrow-1 { +.trusted #mouse-croll .down-arrow-1 { -webkit-animation-delay: .1s; -moz-animation-delay: .1s; -webkit-animation-direction: alternate; } -.trusted_lp #mouse-scroll .down-arrow-2 { +.trusted #mouse-scroll .down-arrow-2 { -webkit-animation-delay: .2s; -moz-animation-delay: .2s; -webkit-animation-direction: alternate; } -.trusted_lp #mouse-scroll .down-arrow-3 { +.trusted #mouse-scroll .down-arrow-3 { -webkit-animation-delay: .3s; -moz-animation-dekay: .3s; -webkit-animation-direction: alternate; } -.trusted_lp #mouse-scroll .mouse-in { +.trusted #mouse-scroll .mouse-in { height: 10px; width: 6px; display: block; @@ -246,58 +247,29 @@ border: 1px solid white; } -.trusted_lp #mouse-scroll .mouse-in { +.trusted #mouse-scroll .mouse-in { -webkit-animation: animated-mouse 1.2s ease infinite; -moz-animation: mouse-animated 1.2s ease infinite; } -/*!* ---- reset ---- *!*/ - -/*body {*/ -/* margin: 0;*/ -/* font:normal 75% Arial, Helvetica, sans-serif;*/ -/*}*/ - -trusted_lp canvas { +.trusted canvas { display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ -#particles-js { +.trusted #particles-js { position: absolute; width: 100%; height: 100%; - background-color: #006eff; - background-image: url(""); + z-index: -1; + background-color: var(--blue); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } -/* ---- stats.js ---- */ - -.count-particles{ - background: #000022; - position: absolute; - top: 48px; - left: 0; - width: 80px; - color: #13E8E9; - font-size: .8em; - text-align: left; - text-indent: 4px; - line-height: 14px; - padding-bottom: 2px; - font-family: Helvetica, Arial, sans-serif; - font-weight: bold; -} - -.js-count-particles{ - font-size: 1.1em; -} - @-webkit-keyframes animated-mouse { 0% { opacity: 1; @@ -338,62 +310,62 @@ trusted_lp canvas { } @media (width >= 768px) { - .trusted_lp h1 { + .trusted h1 { font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; } - .trusted_lp h2 { + .trusted h2 { font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; } - .trusted_lp h3 { + .trusted h3 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; } - .trusted_lp h4 { + .trusted h4 { font: normal normal normal 35px/38px "IBM Plex Sans", sans-serif; } - .trusted_lp p { + .trusted p { font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; } - .trusted_lp .d-flex { + .trusted .d-flex { display: flex; flex-direction: row; } - .trusted_lp .only-desktop { + .trusted .only-desktop { display: block; } - .trusted_lp .only-mobile { + .trusted .only-mobile { display: none; } - .trusted_lp #mouse-scroll { + .trusted #mouse-scroll { display: block; } - .trusted_lp.apartnership_box .d-flex > div:nth-of-type(2) { + .trusted.apartnership_box .d-flex > div:nth-of-type(2) { margin-left: 14em; } - .trusted_lp.has_quotes .d-flex > div:nth-of-type(2) { + .trusted.has_quotes .d-flex > div:nth-of-type(2) { margin-left: 6em; } - .trusted_lp.has_quotes blockquote::before, .trusted_lp.has_quotes blockquote::after { + .trusted.has_quotes blockquote::before, .trusted.has_quotes blockquote::after { height: 60px; } } @media (width <= 768px) { - .trusted_lp .default-content-wrapper { + .trusted .default-content-wrapper { padding: 1em!important; } - .trusted_lp.top_banner .default-content-wrapper { + .trusted.top_banner .default-content-wrapper { padding-bottom: 0!important; } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 0af6849b9..2f7ec8d2f 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -136,10 +136,10 @@ table { border-spacing: 0; } -html, body { - width: 100%; - height: 100%; -} +/*html, body {*/ +/* width: 100%;*/ +/* height: 100%;*/ +/*}*/ * { box-sizing: border-box; From aa3967ac9c7211d0016e34168f607c443752e01c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 20 Feb 2024 21:00:05 +0200 Subject: [PATCH 0108/1296] update --- _src/blocks/banner/banner.css | 12 +++--- _src/blocks/carousel/carousel.css | 3 +- _src/blocks/custom-block/custom-block.css | 0 _src/blocks/custom-block/custom-block.js | 16 ++++++++ _src/scripts/template-factories/trusted.css | 42 ++++++++++----------- 5 files changed, 45 insertions(+), 28 deletions(-) create mode 100644 _src/blocks/custom-block/custom-block.css create mode 100644 _src/blocks/custom-block/custom-block.js diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index e27d45d37..f1a2629e2 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -38,7 +38,7 @@ } } -.section.trusted.banner em { +.trusted .section .banner em { font-size: 12px; line-height: 15px; font-style: unset; @@ -46,24 +46,24 @@ } @media (width >= 768px) { - .section.trusted.top_banner .banner h2 { + .trusted .section.top_banner .banner h2 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; text-align: left; } - .section.trusted .banner .banner-left { + .trusted.section .banner .banner-left { padding-right: 5em; } - .section.trusted.top_banner .banner .banner-left { + .trusted .section.top_banner .banner .banner-left { padding-right: 0; } - .section.trusted .banner .banner-right { + .trusted .section .banner .banner-right { padding-left: 5em; } - .section.trusted.content_right_diff .banner .banner-right img { + .trusted .section.content_right_diff .banner .banner-right img { margin-left: -5em; } } diff --git a/_src/blocks/carousel/carousel.css b/_src/blocks/carousel/carousel.css index 555cf9026..090746a23 100644 --- a/_src/blocks/carousel/carousel.css +++ b/_src/blocks/carousel/carousel.css @@ -6,7 +6,8 @@ } .carousel-container .carousel-item { - margin: 0 1em; + margin: 0; + text-align: center; } .carousel-container .carousel-item img { diff --git a/_src/blocks/custom-block/custom-block.css b/_src/blocks/custom-block/custom-block.css new file mode 100644 index 000000000..e69de29bb diff --git a/_src/blocks/custom-block/custom-block.js b/_src/blocks/custom-block/custom-block.js new file mode 100644 index 000000000..03d9147d2 --- /dev/null +++ b/_src/blocks/custom-block/custom-block.js @@ -0,0 +1,16 @@ +export default function decorate(block) { + const parentBlockStyle = block.closest('.section').style; + const blockStyle = block.style; + const metaData = block.closest('.section').dataset; + const { + contentSize, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom + } = metaData; + const allImages = [...block.children]; + + if (background_color) parentBlockStyle.backgroundColor = background_color; + if (text_color) blockStyle.color = text_color; + if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; + if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; + if (margin_top) blockStyle.marginTop = `${margin_top}rem`; + if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; +} diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index b537e9243..7e67717d5 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -55,7 +55,7 @@ text-decoration: none; } -.trusted.blue_tag u { +.trusted .blue_tag u { color: var(--blue); } @@ -83,23 +83,23 @@ flex: 1; } -.trusted.blue_bck { +.trusted .blue_bck { background-color: var(--blue); } -.trusted.red_bck { +.trusted .red_bck { background-color: var(--red); } -.trusted.dark_bck { +.trusted .dark_bck { background-color: var(--dark); } -.trusted.dark2_bck { +.trusted .dark2_bck { background-color: var(--dark2); } -.trusted.darker_bck { +.trusted .darker_bck { background-color: var(--darker); } @@ -120,50 +120,50 @@ padding: 5px 3px 5px 16px; } -.trusted.video_up { +.trusted .video_up { z-index: 999; position: relative; margin-top: -15em; background: linear-gradient(to bottom, transparent 31%,var(--dark2) 31%); } -.trusted.apartnership_box .d-flex > div:nth-of-type(2) { +.trusted .apartnership_box .d-flex > div:nth-of-type(2) { flex: 0; margin-left: 0; } -.trusted.has_quotes .d-flex > div:nth-of-type(2) { +.trusted .has_quotes .d-flex > div:nth-of-type(2) { margin-left: 0; } -.trusted.has_quotes p { +.trusted .has_quotes p { margin: 0; } -.trusted.has_quotes em { +.trusted .has_quotes em { font-style: normal; } -.trusted.has_quotes blockquote { +.trusted .has_quotes blockquote { margin: 0; } -.trusted.has_quotes blockquote::before, .trusted.has_quotes blockquote::after { +.trusted .has_quotes blockquote::before, .trusted .has_quotes blockquote::after { content: ""; height: 40px; width: 100%; display: block; } -.trusted.has_quotes blockquote::before { +.trusted .has_quotes blockquote::before { margin-bottom: 1em; - background: url('../icons/quote_top.png') no-repeat 0 0 transparent; + background: url('../../icons/quote_top.png') no-repeat 0 0 transparent; background-size: auto 100%; } -.trusted.has_quotes blockquote::after { +.trusted .has_quotes blockquote::after { margin-top: 1em; - background: url('../icons/quote_top.png') no-repeat 0 0 transparent; + background: url('../../icons/quote_top.png') no-repeat 0 0 transparent; background-position: right; background-size: auto 100%; } @@ -347,15 +347,15 @@ display: block; } - .trusted.apartnership_box .d-flex > div:nth-of-type(2) { + .trusted .apartnership_box .d-flex > div:nth-of-type(2) { margin-left: 14em; } - .trusted.has_quotes .d-flex > div:nth-of-type(2) { + .trusted .has_quotes .d-flex > div:nth-of-type(2) { margin-left: 6em; } - .trusted.has_quotes blockquote::before, .trusted.has_quotes blockquote::after { + .trusted .has_quotes blockquote::before, .trusted .has_quotes blockquote::after { height: 60px; } } @@ -365,7 +365,7 @@ padding: 1em!important; } - .trusted.top_banner .default-content-wrapper { + .trusted .top_banner .default-content-wrapper { padding-bottom: 0!important; } From 53de2ae97838f00f6f06310f3aa472411fbb6d78 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 20 Feb 2024 21:19:35 +0200 Subject: [PATCH 0109/1296] updates --- _src/blocks/banner/banner.css | 13 ++++++------- _src/blocks/banner/banner.js | 5 +++++ _src/blocks/slider/slider.css | 5 ++--- _src/blocks/slider/slider.js | 1 + 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index f1a2629e2..c00f32feb 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -39,7 +39,7 @@ } .trusted .section .banner em { - font-size: 12px; + font-size: 15px; line-height: 15px; font-style: unset; display: block; @@ -66,16 +66,15 @@ .trusted .section.content_right_diff .banner .banner-right img { margin-left: -5em; } + + .trusted .section .banner em { + position: absolute; + bottom: 10px; + } } @media (width <= 767px) { .hide_bck_mobile { background-image: unset!important; } - - .banner em { - position: absolute; - bottom: 10px; - font-size: 15px; - } } diff --git a/_src/blocks/banner/banner.js b/_src/blocks/banner/banner.js index cc8b0826a..636386262 100644 --- a/_src/blocks/banner/banner.js +++ b/_src/blocks/banner/banner.js @@ -51,6 +51,11 @@ export default function decorate(block) { parentBlockStyle.backgroundPosition = 'right 0'; parentBlockStyle.backgroundSize = '50% 100%'; } + + if (image_cover === 'full-right-52') { + parentBlockStyle.backgroundPosition = 'right 0'; + parentBlockStyle.backgroundSize = '52% 100%'; + } } block.innerHTML = ` diff --git a/_src/blocks/slider/slider.css b/_src/blocks/slider/slider.css index 654d3d878..87258ff3d 100644 --- a/_src/blocks/slider/slider.css +++ b/_src/blocks/slider/slider.css @@ -1,6 +1,7 @@ @charset "UTF-8"; .section.slider-container { padding: 10px 0; + height: 100vh; } .slider-container .slider > div { @@ -25,6 +26,4 @@ font-size: 4ch; } -@media (width >= 768px) { - -} \ No newline at end of file +@media (width >= 768px) {} \ No newline at end of file diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js index dadd9c29d..5261b0acb 100644 --- a/_src/blocks/slider/slider.js +++ b/_src/blocks/slider/slider.js @@ -1,6 +1,7 @@ export default function decorate(block) { block.classList.add('default-content-wrapper'); const parentBlock = block.closest('.section'); + parentBlock.id = 'TrustedAlways'; const parentBlockStyle = parentBlock.style; const blockStyle = block.style; const metaData = parentBlock.dataset; From 1aa07423455a47102160f01ac542d5aea68137c8 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 20 Feb 2024 21:38:37 +0200 Subject: [PATCH 0110/1296] particles load fix --- _src/scripts/template-factories/trusted.css | 3 --- _src/scripts/template-factories/trusted.js | 16 ++++++++++++++++ 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 7e67717d5..3e69df36f 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -265,9 +265,6 @@ height: 100%; z-index: -1; background-color: var(--blue); - background-repeat: no-repeat; - background-size: cover; - background-position: 50% 50%; } @-webkit-keyframes animated-mouse { diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index 6ef8ba6c6..e0a8d05c8 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -9,6 +9,14 @@ const particleIdSelector = 'particles-js'; const particleDiv = document.createElement('div'); particleDiv.setAttribute('id', particleIdSelector); +const headerHeight = 40; +const carouselHeight = 116; +const bannerHeight = 674; +const sliderHeight = window.innerHeight; + +const initialHeight = headerHeight + bannerHeight + carouselHeight + sliderHeight; +particleDiv.style.height = `${initialHeight}px`; + document.body.prepend(particleDiv); window.particlesJS(particleIdSelector, { @@ -121,3 +129,11 @@ window.particlesJS(particleIdSelector, { }, retina_detect: true, }); + +function rearangeParticles() { + window.dispatchEvent(new Event('resize')); +} +setTimeout(() => { + particleDiv.style = null; + rearangeParticles(); +}, 1000); From 68564f43cb0182e91a34f0583846ffef80bfe80e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 21 Feb 2024 02:16:39 +0200 Subject: [PATCH 0111/1296] dual teaser + buttons styles --- _src/blocks/dual-teaser/dual-teaser.css | 48 ++++++++++++++++ _src/blocks/dual-teaser/dual-teaser.js | 63 +++++++++++++++++++++ _src/scripts/scripts.js | 15 +++++ _src/scripts/template-factories/trusted.css | 15 ++++- _src/styles/styles.css | 32 ++++++++++- 5 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 _src/blocks/dual-teaser/dual-teaser.css create mode 100644 _src/blocks/dual-teaser/dual-teaser.js diff --git a/_src/blocks/dual-teaser/dual-teaser.css b/_src/blocks/dual-teaser/dual-teaser.css new file mode 100644 index 000000000..37909935a --- /dev/null +++ b/_src/blocks/dual-teaser/dual-teaser.css @@ -0,0 +1,48 @@ +.dual-teaser-container { + background-color: black; +} + +@media (min-width: 768px) { + .section.dual-teaser-container { + padding-top: 0; + } + + .dual-teaser-container .container { + display: flex; + height: 700px; + position: relative; + } + + .dual-teaser-container .col { + flex: 0 0 auto; + width: 50%; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .dual-teaser-container .col-container { + position: absolute; + width: 100%; + top: 0; + display: flex; + } + + .dual-teaser-container .col-container::before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: linear-gradient(180deg,#0000 35.21%,#000000b3 67.19%,#000); + } + + .dual-teaser-container .img-container { + width: 100%; + height: 700px; + } + + .dual-teaser-container .centered-wrapper { + gap: 30px; + } +} diff --git a/_src/blocks/dual-teaser/dual-teaser.js b/_src/blocks/dual-teaser/dual-teaser.js new file mode 100644 index 000000000..5b24597bb --- /dev/null +++ b/_src/blocks/dual-teaser/dual-teaser.js @@ -0,0 +1,63 @@ +import { isView } from '../../scripts/scripts.js'; + +export default async function decorate(block) { + const cols = [...block.children[0].children]; + let isMobileView = isView('mobile'); + + function render() { + block.innerHTML = ` +
+
+ ${cols.map((col) => { + const pictureEl = col.querySelector('picture'); + const richTextEls = [...col.children]; + richTextEls.shift(); + + return ` +
+
+ ${pictureEl.outerHTML} +
+ + ${isMobileView ? `
+ ${richTextEls.map((item) => item.outerHTML).join('')} +
` : ''} + +
+ `; + }).join('')} +
+ + ${!isMobileView ? `
+ ${cols.map((col) => { + const richTextEls = [...col.children]; + richTextEls.shift(); + + return ` +
+ ${richTextEls.map((item) => item.outerHTML).join('')} +
+ `; + }).join('')} +
` : ''} +
+ `; + + const resizeObserver = new ResizeObserver(() => { + const newViewportView = isView('mobile'); + + const viewHasChanged = isMobileView !== newViewportView; + + if (viewHasChanged) { + isMobileView = newViewportView; + + render(); + } + }); + + resizeObserver.observe(block); + } + + render(); +} + diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 8059c1d2d..6d7df7f61 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -54,6 +54,17 @@ window.hlx.plugins.add('rum-conversion', { url: '../plugins/rum-conversion/src/index.js', }); +function initMobileDetector(viewport) { + const mobileDetectorDiv = document.createElement('div'); + mobileDetectorDiv.setAttribute(`data-${viewport}-detector`, ''); + document.body.prepend(mobileDetectorDiv); +} + +export function isView(viewport) { + const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; + return !!(element && getComputedStyle(element).display !== 'none'); +} + /** * Creates a meta tag with the given name and value and appends it to the head. * @param {String} name The name of the meta tag @@ -577,4 +588,8 @@ async function loadPage() { loadDelayed(); } +initMobileDetector('mobile'); +initMobileDetector('tablet'); +initMobileDetector('desktop'); + loadPage(); diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 3e69df36f..a838f07cc 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -111,7 +111,8 @@ display: block; } -.trusted a.button { +.trusted a.button.primary, +.trusted button.primary { border: 1px solid white; color: white; font-weight: 500; @@ -120,6 +121,18 @@ padding: 5px 3px 5px 16px; } +.trusted a.button:any-link:not(.modal):not(.primary) { + background-color: var(--blue); + border: 2px solid var(--blue); +} + +/* long button css todo: maybe we shouldn't have this long text button from the start from UX perspective */ +.trusted a.button.modal, +main .section.link-right a { + white-space: unset; + text-align: unset; +} + .trusted .video_up { z-index: 999; position: relative; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 2f7ec8d2f..6af02a9b6 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -95,6 +95,36 @@ --cta-background-light-blue: var(--background-light-blue) } +body [data-mobile-detector] { + display: block; +} + +body [data-tablet-detector] { + display: none; +} + +body [data-desktop-detector] { + display: none; +} + +@media (width >= 768px) { + body [data-mobile-detector] { + display: none; + } +} + +@media (width >= 768px) { + body [data-tablet-detector] { + display: block; + } +} + +@media (width >= 992px) { + body [data-desktop-detector] { + display: block; + } +} + /* fallback font for Roboto (normal - 400) */ @font-face { font-family: "roboto-normal-400-fallback"; @@ -537,7 +567,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } } -@media (min-width: 992px) { /* desktop */ +@media screen and (min-width: 992px) { /* desktop */ header { height: var(--nav-height-desktop); position: absolute; From 27cc1c047c4e69bf4b6aa3a73232af47fd417a6c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 21 Feb 2024 10:46:29 +0200 Subject: [PATCH 0112/1296] update --- _src/blocks/banner/banner.css | 38 +++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css index c00f32feb..bf9e9d922 100644 --- a/_src/blocks/banner/banner.css +++ b/_src/blocks/banner/banner.css @@ -38,13 +38,47 @@ } } -.trusted .section .banner em { +.trusted .section.top_banner .banner em { font-size: 15px; line-height: 15px; font-style: unset; display: block; } +.trusted .custom-block a { + border: 1px solid white; + color: white; + font-weight: 500; + background-color: transparent; + border-radius: 5px; + padding: 5px 3px 5px 16px; + min-width: 116px; + display: flex; +} + +.trusted .custom-block a:hover { + text-decoration: none; +} + +.trusted .custom-block a::after { + content: ''; + width: 24px; + height: 24px; + -webkit-mask: url(/_src/icons/arrow-right.svg); + mask: url(/_src/icons/arrow-right.svg); + background-color: var(--button-link-color); + display: inline-block; + transition: all .2s cubic-bezier(.4,0,.2,1); + transform: translateX(0); + opacity: 0; + margin-left: -10px; +} + +.trusted .custom-block a:hover::after { + transform: translateX(5px); + opacity: 1; +} + @media (width >= 768px) { .trusted .section.top_banner .banner h2 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; @@ -67,7 +101,7 @@ margin-left: -5em; } - .trusted .section .banner em { + .trusted .section.top_banner .banner em { position: absolute; bottom: 10px; } From 0a45b48dcdda9d36d7c89ca30f53b30a921e4f28 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 21 Feb 2024 13:54:55 +0200 Subject: [PATCH 0113/1296] Update hero banner --- _src/scripts/template-factories/trusted.css | 86 ++++++++++++++++++--- 1 file changed, 76 insertions(+), 10 deletions(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index a838f07cc..a9bbf8cd7 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -1,15 +1,18 @@ :root { + --white: #fff; --blue: #006dff; --red: #ff2800; --dark: #010f10; --dark2: #0c0f14; --darker: #06080a; --font-ibm: "IBM Plex Sans", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } /* tipography */ .trusted { - color: white; + color: var(--white); font-family: "IBM Plex Sans", sans-serif; position: relative; } @@ -26,12 +29,12 @@ text-align: center; } -.trusted h1 { +.trusted h1, .trusted main .hero h1 { font: normal normal bold 44px/42px var(--font-ibm); text-align: left; } -.trusted h2 { +.trusted h2, .trusted main .hero h2 { font: normal normal bold 31px/33px var(--font-ibm); text-align: left; } @@ -46,7 +49,7 @@ text-align: left; } -.trusted p { +.trusted p, .trusted main .hero p { font: normal normal normal 16px/22px var(--font-ibm); text-align: left; } @@ -113,8 +116,8 @@ .trusted a.button.primary, .trusted button.primary { - border: 1px solid white; - color: white; + border: 1px solid var(--white); + color: var(--white); font-weight: 500; background-color: transparent; border-radius: 5px; @@ -218,7 +221,7 @@ main .section.link-right a { -webkit-transform: none; -ms-transform: none; transform: none; - border: 2px solid #ffffff; + border: 2px solid var(--white); top: 170px; margin-bottom: 9px; } @@ -257,7 +260,7 @@ main .section.link-right a { border-radius: 5px; margin: 5px auto; background: transparent; - border: 1px solid white; + border: 1px solid var(--white); } .trusted #mouse-scroll .mouse-in { @@ -270,6 +273,52 @@ main .section.link-right a { vertical-align: bottom; } +/* ---- hero banner ---- */ +.trusted main .hero::after { + display: none; +} + +.trusted main .hero a.button.primary { + min-width: auto; + padding: 5px 10px 5px 25px; +} + +.trusted main .hero h1, .trusted main .hero h2, .trusted main .hero p { + color: var(--white); +} + +.trusted main .hero em { + font-size: 15px; + line-height: 15px; + font-style: unset; + display: block; +} + +.trusted main .hero .hero-picture { + height: 100%; +} + +@media (min-width: 1600px) { + .trusted main .hero .hero-picture picture img { + display: block; + padding-left: 10%; + } +} + +@media (min-width: 1300px) { + .trusted main .hero .hero-picture picture img { + padding-left: 20%; + } +} + +@media (min-width: 990px) { + .trusted main .hero .hero-picture picture img { + display: block; + padding-left: 0; + } +} + + /* ---- particles.js container ---- */ .trusted #particles-js { @@ -320,7 +369,7 @@ main .section.link-right a { } @media (width >= 768px) { - .trusted h1 { + .trusted h1, .trusted main .hero h1 { font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; } @@ -328,6 +377,10 @@ main .section.link-right a { font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; } + .trusted main .hero h2 { + font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + } + .trusted h3 { font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; } @@ -336,7 +389,7 @@ main .section.link-right a { font: normal normal normal 35px/38px "IBM Plex Sans", sans-serif; } - .trusted p { + .trusted p, .trusted main .hero p { font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; } @@ -368,6 +421,19 @@ main .section.link-right a { .trusted .has_quotes blockquote::before, .trusted .has_quotes blockquote::after { height: 60px; } + + .trusted main .hero .hero-content { + min-height: auto; + } + + .trusted main .hero .hero-content > div { + width: 45%; + } + + .trusted main .hero em { + position: absolute; + bottom: 10px; + } } @media (width <= 768px) { From bb787d20d986f60d5ff24d1bd3e2971ab42bdd42 Mon Sep 17 00:00:00 2001 From: Ionut MANTESCU Date: Thu, 22 Feb 2024 12:13:05 +0200 Subject: [PATCH 0114/1296] test1 --- _src/blocks/accordion/accordion.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/accordion/accordion.js b/_src/blocks/accordion/accordion.js index 884ae4b42..31eec21cd 100644 --- a/_src/blocks/accordion/accordion.js +++ b/_src/blocks/accordion/accordion.js @@ -28,6 +28,7 @@ function handleAccordionItemClick(item, items) { } export default function decorate(block) { + console.log(block); const items = Array.from(block.querySelectorAll(':scope > div')); items.forEach((item) => { item.classList.add('accordion-item'); From 0a25be5e0cecb383f2439c16ebb6f3125902076b Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 22 Feb 2024 13:28:28 +0200 Subject: [PATCH 0115/1296] Addind trusted-columns --- _src/blocks/slider/slider.css | 43 ++++--- _src/blocks/slider/slider.js | 112 ++++++++++-------- .../trusted-columns/trusted-columns.css | 35 ++++++ .../blocks/trusted-columns/trusted-columns.js | 53 +++++++++ _src/scripts/template-factories/trusted.css | 40 +++++-- 5 files changed, 208 insertions(+), 75 deletions(-) create mode 100644 _src/blocks/trusted-columns/trusted-columns.css create mode 100644 _src/blocks/trusted-columns/trusted-columns.js diff --git a/_src/blocks/slider/slider.css b/_src/blocks/slider/slider.css index 87258ff3d..de40807e5 100644 --- a/_src/blocks/slider/slider.css +++ b/_src/blocks/slider/slider.css @@ -1,29 +1,42 @@ @charset "UTF-8"; .section.slider-container { padding: 10px 0; - height: 100vh; } .slider-container .slider > div { flex: 1; } -.slider-container .slider .slider-text img { - width: 275px; +.slider-container .slider .slider-image { + width: 230px; + text-align: center; + margin: 0 auto; } -.slider-container .container-fluid .slider-item { - overflow-x: hidden; - display: flex; +.slider-container .slider .slider-text img { + width: 130px; } -.slider-container .slider-item { - min-width: 50vw; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - font-size: 4ch; -} +@media (width >= 768px) { + .section.slider-container { + height: 100vh; + } + + .slider-container .slider-item { + overflow-x: hidden; + display: flex; + } + + .slider-container .slider-item { + min-width: 50vw; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-size: 4ch; + } -@media (width >= 768px) {} \ No newline at end of file + .slider-container .slider .slider-text img { + width: 275px; + } +} \ No newline at end of file diff --git a/_src/blocks/slider/slider.js b/_src/blocks/slider/slider.js index 5261b0acb..8909ba625 100644 --- a/_src/blocks/slider/slider.js +++ b/_src/blocks/slider/slider.js @@ -21,7 +21,7 @@ export default function decorate(block) {
${allSliders.length ? allSliders.map(item => { const [ sliderText, sliderImage ] = [...item.children]; - return `
+ return `
${sliderText.innerHTML}
${sliderImage.innerHTML}
`; @@ -30,67 +30,75 @@ export default function decorate(block) { `; const items = parentBlock.getElementsByClassName("slider-item"); - let allItemsSeen = false; +let allItemsSeen = false; -parentBlock.addEventListener("wheel", handleWheel); +// Check if the parentBlock is fully in the viewport +const observer = new IntersectionObserver((entries) => { + const parentBlockInViewport = entries[0].isIntersecting; + + if (parentBlockInViewport) { + // If the parentBlock is in the viewport, attach the wheel event listener + parentBlock.addEventListener("wheel", handleWheel); + // Stop observing once the block is in view + observer.disconnect(); + } +}); + +// Start observing the parentBlock +observer.observe(parentBlock); function handleWheel(evt) { - if (!allItemsSeen) { - evt.preventDefault(); - const delta = evt.deltaY || evt.deltaX; - - if (delta !== 0) { - parentBlock.scrollLeft += delta; - } - - // Check if all items have been seen - const firstItem = items[0]; - const lastItem = items[items.length - 1]; - const parentLeft = parentBlock.getBoundingClientRect().left; - const parentRight = parentBlock.getBoundingClientRect().right; - - if (delta > 0 && lastItem.getBoundingClientRect().right <= parentRight) { - // Scrolling down and all items have been seen - allItemsSeen = true; - removePreventDefault(); - } else if (delta < 0 && firstItem.getBoundingClientRect().left >= parentLeft) { - // Scrolling up and reached the first item - allItemsSeen = true; - removePreventDefault(); - } + if (!allItemsSeen) { + evt.preventDefault(); + const delta = evt.deltaY || evt.deltaX; + + if (delta !== 0) { + parentBlock.scrollLeft += delta; } + + // Check if all items have been seen + const firstItem = items[0]; + const lastItem = items[items.length - 1]; + const parentLeft = parentBlock.getBoundingClientRect().left; + const parentRight = parentBlock.getBoundingClientRect().right; + + if (delta > 0 && lastItem.getBoundingClientRect().right <= parentRight) { + // Scrolling down and all items have been seen + allItemsSeen = true; + removePreventDefault(); + } else if (delta < 0 && firstItem.getBoundingClientRect().left >= parentLeft) { + // Scrolling up and reached the first item + allItemsSeen = true; + removePreventDefault(); + } + } } function removePreventDefault() { - // Remove the event listener to stop preventing default behavior - parentBlock.removeEventListener("wheel", handleWheel); - // Enable scrolling again when scrolling back up or down - parentBlock.addEventListener("wheel", handleRevertScroll); - - function handleRevertScroll(evt) { - const delta = evt.deltaY || evt.deltaX; - - if (delta !== 0) { - parentBlock.scrollLeft += delta; - - // Check if scrolling down and all items have been seen - if (delta > 0 && allItemsSeen) { - allItemsSeen = false; - // Reattach the original event listener - parentBlock.addEventListener("wheel", handleWheel); - // Remove the revert scroll event listener - parentBlock.removeEventListener("wheel", handleRevertScroll); - } else if (delta < 0 && allItemsSeen) { - allItemsSeen = false; - // Reattach the original event listener - parentBlock.addEventListener("wheel", handleWheel); - // Remove the revert scroll event listener - parentBlock.removeEventListener("wheel", handleRevertScroll); - } - } + // Remove the event listener to stop preventing default behavior + parentBlock.removeEventListener("wheel", handleWheel); + // Enable scrolling again when scrolling back up or down + parentBlock.addEventListener("wheel", handleRevertScroll); + + function handleRevertScroll(evt) { + const delta = evt.deltaY || evt.deltaX; + + if (delta !== 0) { + parentBlock.scrollLeft += delta; + + // Check if scrolling down or up and all items have been seen + if ((delta > 0 || delta < 0) && allItemsSeen) { + allItemsSeen = false; + // Reattach the original event listener + parentBlock.addEventListener("wheel", handleWheel); + // Remove the revert scroll event listener + parentBlock.removeEventListener("wheel", handleRevertScroll); + } } + } } + /* parentBlock.addEventListener("wheel", (evt) => { evt.preventDefault(); parentBlock.scrollLeft += evt.deltaY; diff --git a/_src/blocks/trusted-columns/trusted-columns.css b/_src/blocks/trusted-columns/trusted-columns.css new file mode 100644 index 000000000..7c56a8e4e --- /dev/null +++ b/_src/blocks/trusted-columns/trusted-columns.css @@ -0,0 +1,35 @@ +.section.trusted-columns-container { + padding: 0; +} + +@media (min-width: 768px) { + .trusted-columns-container .container { + display: flex; + height: 700px; + position: relative; + } + + .trusted-columns-container .col { + flex: 0 0 auto; + width: 50%; + display: flex; + flex-direction: column; + justify-content: center; + } + + .trusted-columns-container .col-container { + position: absolute; + width: 100%; + top: 0; + display: flex; + } + + .trusted-columns-container .img-container { + width: 100%; + height: 700px; + } + + .trusted-columns-container .centered-wrapper { + gap: 30px; + } +} diff --git a/_src/blocks/trusted-columns/trusted-columns.js b/_src/blocks/trusted-columns/trusted-columns.js new file mode 100644 index 000000000..01d0627c7 --- /dev/null +++ b/_src/blocks/trusted-columns/trusted-columns.js @@ -0,0 +1,53 @@ +import { isView } from '../../scripts/scripts.js'; + +export default async function decorate(block) { + const cols = [...block.children[0].children]; + let isMobileView = isView('mobile'); + + function render() { + block.innerHTML = ` +
+
+ ${cols.map((col) => { + const pictureEl = col.querySelector('picture'); + const richTextEls = [...col.children]; + richTextEls.shift(); + + return ` +
+
+ ${pictureEl ? pictureEl.outerHTML : ''} +
+ + ${isMobileView ? `
+ ${richTextEls.map((item) => item.outerHTML).join('')} +
` : ''} +
`; + }).join('')} +
+ + ${!isMobileView ? `
+ ${cols.map((col) => { + const richTextEls = [...col.children]; + richTextEls.shift(); + + return `
${richTextEls.map((item) => item.outerHTML).join('')}
`; + }).join('')} +
` : ''} +
+ `; + + const resizeObserver = new ResizeObserver(() => { + const newViewportView = isView('mobile'); + const viewHasChanged = isMobileView !== newViewportView; + + if (viewHasChanged) { + isMobileView = newViewportView; + render(); + } + }); + resizeObserver.observe(block); +} + +render(); +} \ No newline at end of file diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index a9bbf8cd7..69737bd07 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -200,14 +200,6 @@ main .section.link-right a { .trusted #mouse-scroll span { display: block; - /*width: 5px; - height: 5px; - -ms-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - transform: rotate(45deg); - border-right: 2px solid #fff; - border-bottom: 2px solid #fff;*/ width: 13px; height: 15px; background: url('../../icons/arow_down.png') 0 0 no-repeat transparent; @@ -298,6 +290,33 @@ main .section.link-right a { height: 100%; } +.trusted .blue_red_section { + background: linear-gradient(to right, transparent 50%, var(--red) 50%); + padding-bottom: 12em; +} + +/*.trusted .blue_red_section::before { + content: ""; + position: absolute; + width: 200%; + height: 100%; + background-color: red; + transform: rotate(25deg); + transform-origin: top left; + right: 0; +}*/ + +.trusted .blue_red_section .default-content-wrapper { + display: flex; + align-items: center; + justify-content: center; +} + +.trusted .blue_red_section .default-content-wrapper img { + width: 150px; + margin: 0em 2em; +} + @media (min-width: 1600px) { .trusted main .hero .hero-picture picture img { display: block; @@ -316,6 +335,11 @@ main .section.link-right a { display: block; padding-left: 0; } + + .trusted .blue_red_section .default-content-wrapper img { + width: 280px; + margin: 1em 2em; + } } From d6b6fd8abe122c1e4586bfa32788a49ae0ff4985 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 22 Feb 2024 16:02:54 +0200 Subject: [PATCH 0116/1296] rework carosuel marquee --- _src/blocks/box-carousel/box-carousel.js | 4 +- _src/blocks/carousel/carousel.css | 40 ----------- _src/blocks/carousel/carousel.js | 72 -------------------- _src/blocks/columns/columns.js | 33 +++------ _src/blocks/marquee/marquee.css | 25 +++++++ _src/blocks/marquee/marquee.js | 65 ++++++++++++++++++ _src/blocks/quote-carousel/quote-carousel.js | 6 +- _src/scripts/template-factories/trusted.js | 4 +- _src/scripts/utils/utils.js | 12 ++++ 9 files changed, 120 insertions(+), 141 deletions(-) delete mode 100644 _src/blocks/carousel/carousel.css delete mode 100644 _src/blocks/carousel/carousel.js create mode 100644 _src/blocks/marquee/marquee.css create mode 100644 _src/blocks/marquee/marquee.js diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js index 6a8e5d1c7..a4dc8bfe6 100644 --- a/_src/blocks/box-carousel/box-carousel.js +++ b/_src/blocks/box-carousel/box-carousel.js @@ -59,7 +59,7 @@ export default async function decorate(block) { decorateIcons(block); - const carousel = block.querySelector('.carousel'); + const carousel = block.querySelector('.marquee'); function isFirstIndex() { return currentSlideIndex === 0; @@ -91,7 +91,7 @@ export default async function decorate(block) { } function updateActiveCard(slideIndex) { - block.querySelector('.carousel-item.active').classList.remove('active'); + block.querySelector('.marquee-item.active').classList.remove('active'); block.querySelector(`.carousel-item:nth-child(${slideIndex + 1})`).classList.add('active'); } diff --git a/_src/blocks/carousel/carousel.css b/_src/blocks/carousel/carousel.css deleted file mode 100644 index 090746a23..000000000 --- a/_src/blocks/carousel/carousel.css +++ /dev/null @@ -1,40 +0,0 @@ -@charset "UTF-8"; -.section.carousel-container { - background-color: black; - color: white; - padding: 10px 0; -} - -.carousel-container .carousel-item { - margin: 0; - text-align: center; -} - -.carousel-container .carousel-item img { - height: auto; - max-width: unset; - width: 90px; -} - -#carousel-box { - width: 100%; - overflow: hidden; -} - -#carousel { - display: flex; - transition: transform 0.5s ease-in-out; -} - -.carousel-item { - flex: 0 0 auto; - box-sizing: border-box; -} - -@media (width >= 768px) { - -} - -@media screen and (width >= 991px) { - -} diff --git a/_src/blocks/carousel/carousel.js b/_src/blocks/carousel/carousel.js deleted file mode 100644 index fc23982e7..000000000 --- a/_src/blocks/carousel/carousel.js +++ /dev/null @@ -1,72 +0,0 @@ -export default function decorate(block) { - const parentBlockStyle = block.closest('.section').style; - const blockStyle = block.style; - const metaData = block.closest('.section').dataset; - const { - contentSize, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom - } = metaData; - const allImages = [...block.children]; - - if (background_color) parentBlockStyle.backgroundColor = background_color; - if (text_color) blockStyle.color = text_color; - if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; - if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; - if (margin_top) blockStyle.marginTop = `${margin_top}rem`; - if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; - - block.innerHTML = ` - - `; - - const carousel = block.querySelector('#carousel'); - const container = block.querySelector('#carousel-box'); - const items = block.querySelectorAll('.carousel-item'); - const visibleItems = 13; - - // set item width - function setItemWidth() { - const itemWidth = window.screen.width / visibleItems; - items.forEach(item => { - item.style.minWidth = `${itemWidth}px`; - }); - } - setItemWidth(); // Set initial item width - window.addEventListener('resize', setItemWidth); - - // duplicate items in the carousel - for infinit loop - function duplicateItems() { - const clonedItems = Array.from(items).map(item => item.cloneNode(true)); - carousel.append(...clonedItems); - } - duplicateItems(); - - let currentIndex = 0; - function updateCarousel() { - const itemWidth = container.clientWidth / visibleItems; - carousel.style.transform = `translateX(${-currentIndex * itemWidth}px)`; - } - - function next() { - currentIndex++; - duplicateItems(); // Duplicate items when reaching the end - updateCarousel(); - } - - function prev() { - currentIndex = (currentIndex - 1 + items.length) % items.length; - updateCarousel(); - } - - // Set initial width and update on window resize - window.addEventListener('resize', updateCarousel); - updateCarousel(); - - // Duplicate items periodically - setInterval(duplicateItems, 4000); - // Continuous scroll - setInterval(next, 2000); -} diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index fdd88ea4e..ec338ad92 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -1,3 +1,5 @@ +import { debounce } from '../../scripts/utils/utils.js'; + function getItemsToShow() { if (window.innerWidth <= 676) { return 1; // Show 1 item for mobile screens @@ -13,7 +15,7 @@ function countSlides(carouselContent) { } function showSlides(carousel, slideNumber) { - const carouselContent = carousel.querySelector('.columns.carousel > div:nth-child(1)'); + const carouselContent = carousel.querySelector('.columns.marquee > div:nth-child(1)'); function handleSlideDisplay(childDivs) { // Hide all elements @@ -53,7 +55,6 @@ function showSlides(carousel, slideNumber) { childDivs[i].style.position = 'relative'; childDivs[i].style.width = `${columnWidthPx}px`; } - } } @@ -76,7 +77,7 @@ function setActiveButton(button, buttonsWrapper, carousel) { const activeButtonIndex = getButtonIndex(activeButton); const clickedButtonIndex = getButtonIndex(button); - const carouselContent = carousel.querySelector('.columns.carousel > div:nth-child(1)'); + const carouselContent = carousel.querySelector('.columns.marquee > div:nth-child(1)'); // Clear any previous slide classes carouselContent.classList.remove('slide-left'); @@ -97,7 +98,7 @@ function setActiveButton(button, buttonsWrapper, carousel) { function createNavigationButtons(numberOfSlides, carousel) { const buttonsWrapper = document.createElement('div'); - buttonsWrapper.className = 'carousel-buttons'; + buttonsWrapper.className = 'marquee-buttons'; for (let i = 0; i < numberOfSlides; i += 1) { const button = document.createElement('button'); @@ -125,7 +126,7 @@ function createNavigationButtons(numberOfSlides, carousel) { } function setupCarousel(carousel, resetSlidePosition = false) { - const carouselContent = carousel.querySelector('.columns.carousel > div'); + const carouselContent = carousel.querySelector('.columns.marquee > div'); // Remove the slide-left class if necessary if (resetSlidePosition) { @@ -133,7 +134,7 @@ function setupCarousel(carousel, resetSlidePosition = false) { } // Remove existing navigation buttons - const existingButtonsWrapper = carousel.querySelector('.carousel-buttons'); + const existingButtonsWrapper = carousel.querySelector('.marquee-buttons'); if (existingButtonsWrapper) { existingButtonsWrapper.remove(); } @@ -145,18 +146,6 @@ function setupCarousel(carousel, resetSlidePosition = false) { hideExcessElements(carousel); } -function debounce(func, wait) { - let timeout; - return function executedFunction(...args) { - const later = () => { - clearTimeout(timeout); - func(...args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; -} - function setImageAsBackgroundImage() { const columns = document.querySelectorAll('.columns.text-over-image > div > div'); @@ -199,14 +188,14 @@ export default function decorate(block) { setImageAsBackgroundImage(); } - // If it has the carousel class, then setup the carousel - if (block.classList.contains('carousel')) { + // If it has the marquee class, then setup the marquee + if (block.classList.contains('marquee')) { setupCarousel(block); } window.addEventListener('resize', debounce(() => { - // Check if the block still has the carousel class before resetting - if (block.classList.contains('carousel')) { + // Check if the block still has the marquee class before resetting + if (block.classList.contains('marquee')) { setupCarousel(block, true); // Pass true to reset the slide position } }, 250)); diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css new file mode 100644 index 000000000..7926bc4af --- /dev/null +++ b/_src/blocks/marquee/marquee.css @@ -0,0 +1,25 @@ +.marquee-container .marquee { + /* overflow: hidden; */ +} + +.marquee-container .marquee-content { + display: flex; + animation: scrolling 10s linear infinite; + --translateX: 100%; +} + +.marquee-container .marquee-item { + flex: 0 0 200px; + margin: 0 20px; +} + +.marquee-container .marquee-item img { + display: block; + width: 100%; + object-fit: contain; +} + +@keyframes scrolling { + from { transform: translateX(0); } + to { transform: translateX(calc(var(--translateX) * -1)); } +} diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js new file mode 100644 index 000000000..9a256b918 --- /dev/null +++ b/_src/blocks/marquee/marquee.js @@ -0,0 +1,65 @@ +import { debounce } from '../../scripts/utils/utils.js'; + +export default async function decorate(block) { + const SLIDE_SIZE = 240; + const initialSlideList = [...block.children]; + function calculateSlideListBasedOnScreenWidth() { + const result = { + duplicatedSlides: null, + slidesToShift: null, + }; + + const { clientWidth } = block; + const spaceToFillMore = clientWidth - initialSlideList.length * SLIDE_SIZE; // ok + if (spaceToFillMore < 0) { + result.duplicatedSlides = initialSlideList.concat(initialSlideList); + result.slidesToShift = initialSlideList; + + return result; + } + // fill space + const fullWidthSlidesToFill = parseInt(spaceToFillMore / SLIDE_SIZE, 10); + const hasPartialSlideToFill = clientWidth % SLIDE_SIZE !== 0; + + result.duplicatedSlides = Array(fullWidthSlidesToFill) + .fill(initialSlideList).flatMap((slide) => slide); + + if (!hasPartialSlideToFill) { + result.duplicatedSlides = result.duplicatedSlides.concat(result.duplicatedSlides); + result.slidesToShift = result.duplicatedSlides; + + return result; + } + + // need to apply the patch here + result.duplicatedSlides = result.duplicatedSlides.concat(initialSlideList); + result.slidesToShift = result.duplicatedSlides; + result.duplicatedSlides = result.duplicatedSlides.concat(result.duplicatedSlides); + + return result; + } + + function updateTranslation(slidesToShift) { + const content = block.querySelector('.marquee-content'); + content.style.setProperty('--translateX', `${SLIDE_SIZE * slidesToShift.length}px`); + } + + function render() { + const { duplicatedSlides, slidesToShift } = calculateSlideListBasedOnScreenWidth(); + + block.innerHTML = ` +
+
+ ${duplicatedSlides.map((slide) => `
${slide.querySelector('picture').outerHTML}
`).join('')} +
+
+ `; + + updateTranslation(slidesToShift); + } + + render(); + + // Optionally, update on window resize + window.addEventListener('resize', debounce(render, 250)); +} diff --git a/_src/blocks/quote-carousel/quote-carousel.js b/_src/blocks/quote-carousel/quote-carousel.js index 36ec87dd4..42d53222d 100644 --- a/_src/blocks/quote-carousel/quote-carousel.js +++ b/_src/blocks/quote-carousel/quote-carousel.js @@ -1,8 +1,8 @@ import { createTag } from '../../scripts/utils/utils.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; -const SLIDE_PREFIX = 'carousel-slide-'; -const CONTROL_PREFIX = 'carousel-control-'; +const SLIDE_PREFIX = 'marquee-slide-'; +const CONTROL_PREFIX = 'marquee-control-'; function createSlide(item, index) { const paragraphs = Array.from(item.querySelectorAll('p')); @@ -125,7 +125,7 @@ export default async function decorate(block) { const dotsControls = createDotsControls(slides, block); - /* Add carousel action button if it exists */ + /* Add marquee action button if it exists */ const controlsElements = [dotsControls]; const button = block.querySelector('.button-container'); if (button) { diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index e0a8d05c8..45ae921bd 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -15,7 +15,7 @@ const bannerHeight = 674; const sliderHeight = window.innerHeight; const initialHeight = headerHeight + bannerHeight + carouselHeight + sliderHeight; -particleDiv.style.height = `${initialHeight}px`; +// particleDiv.style.height = `${initialHeight}px`; document.body.prepend(particleDiv); @@ -134,6 +134,6 @@ function rearangeParticles() { window.dispatchEvent(new Event('resize')); } setTimeout(() => { - particleDiv.style = null; + // particleDiv.style = null; rearangeParticles(); }, 1000); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index c6022c2f5..0072d5f9b 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -248,3 +248,15 @@ export function getDatasetFromSection(block) { const parentSelector = block.closest('.section'); return parentSelector.dataset; } + +export function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} From 544b6c9e2cb7788312ae3713db5821750fdf8693 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 22 Feb 2024 16:03:15 +0200 Subject: [PATCH 0117/1296] update on trusted-columns --- _src/blocks/trusted-columns/trusted-columns.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_src/blocks/trusted-columns/trusted-columns.js b/_src/blocks/trusted-columns/trusted-columns.js index 01d0627c7..cb2de4db7 100644 --- a/_src/blocks/trusted-columns/trusted-columns.js +++ b/_src/blocks/trusted-columns/trusted-columns.js @@ -19,21 +19,21 @@ export default async function decorate(block) { ${pictureEl ? pictureEl.outerHTML : ''}
- ${isMobileView ? `
+ ${isMobileView ? `
${richTextEls.map((item) => item.outerHTML).join('')}
` : ''}
`; }).join('')}
- ${!isMobileView ? `
- ${cols.map((col) => { - const richTextEls = [...col.children]; - richTextEls.shift(); + ${!isMobileView ? `
+ ${cols.map((col) => { + const richTextEls = [...col.children]; + richTextEls.shift(); - return `
${richTextEls.map((item) => item.outerHTML).join('')}
`; - }).join('')} -
` : ''} + return `
${richTextEls.map((item) => item.outerHTML).join('')}
`; + }).join('')} +
` : ''}
`; From 78fd04dcfc224562289939400295ff921ea89da4 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 22 Feb 2024 17:09:16 +0200 Subject: [PATCH 0118/1296] Styling updates --- _src/icons/quotes-top.png | Bin 0 -> 8274 bytes _src/scripts/template-factories/trusted.css | 31 ++++++++++++-------- 2 files changed, 19 insertions(+), 12 deletions(-) create mode 100644 _src/icons/quotes-top.png diff --git a/_src/icons/quotes-top.png b/_src/icons/quotes-top.png new file mode 100644 index 0000000000000000000000000000000000000000..415c9b5b452afca851b0eecfd07a4143b554b3d6 GIT binary patch literal 8274 zcmbVxbySpJ*ES+0BGQP2!_Wc_LkJ8rbW3-`zziWZ44on+ozfvGof6WWA}NTJQqtZ1 z;V+)|`PO>Z_s4gyb>C;7v#)FKeRlkHho~sYJi>p9kAZ>lNKRH#?QRXdd#&*>@4hV8 z5oC7@m6Mc?le)dRlPesJ#1KQ+n<4>nwr~ri8WN6hcj!k#F);3DS!w7v=_o2d%K^dgWMUgMLNL&Zniddju1B(@GrZNJNeHs2nhHK;$#g2{vDK#q6$F5 z9*qPDz5sKYadB}2_yu2>^YHN^&CU3^H~`#S+&myK7{n#W3Fd}y@j>`_0RKF|JBMh5 zIYdoT`X6_9I~dT?$q5Akfm~f(U%2wTut!^fz=DE;ATDkYH#g@Ug45C6&I#_uY3IoB zuLVh@qZ!%?L4fPpgJEpyT~Du_GZq1=yH-U;N8g!gcSlJ1%AmZ2$qtN1Pk(j!BSFU z0%F{Pl6(@p;Fnxd0)i6%a^>tCo#1w6$bY$3|HBpke{vxbXe8Xp9<5<-Z}V@lRV?kD z>>VxbQGd$H3(&T*L)g1I{;9%0fg;gXE=Ytl+TIrMR~jK!|K;A<`OddF+?>x8f#Bmb zh4Uad!C(ZO6OP~kb0TEr%P%4JQb0-o2)c^`VFoe#JL-R0OC9O(k7Q#dtl(^B1qaB$P0?0J8#q8iPF+e& zNfQeC(=m5yz~9o}6wv==>MzKDHQB$|yUzV1{%30LHvgGBq}|=Hq3@vNkRn?0W~%7-B{wETTT* zbeN2{jJsmdi2$yHXlz+ifneepZldLa%eJ{^nZl=mQ&o`bK^RSsaSC}dVqng_g2HV_0^RPPUBI8B{chH?v+s7Q09U@Hvmx&Sl=&j_NMI<#84G_M1T8>^g9J%bkrz7%N8{U&pBuM_9{6na=j%51e34i6*qqj^Y zmPFcg2$=RE0Pk_pe%|#r;{>142kv|Fubu@A(}du2>~JL}<31L-!khg< zmXIK>wygX~6KN}rp<>_0D%@<1s4hOll)irY zTs4&J3@h`dy|%sleoH`ZZ&<(Syn&iLHCuLx7m6Kb{B)guuCzE6=|5B^Em@X;qcu^3 z^_h9;aYt}1x@6FA+~^d#o8AF4=C{`37KBZles zPM~9h82TRVPS_{xpF4y%Vl_{~Bt4OLC+aT9y7&xG+!5YyxSZX?u1u;?BH%s(ck5n) zg{~v+F+_s+B=| zPVbje3x1CQ0XvxQ4c;O-QHqB9uV2h>rHRQd0jKao*pwIbRc(-< z#^5VgP11ee+|@QpCA_FN;^-rP@Iv3B=x8)ANG{qJ z78>m+CqL-HE|&|B57XOaL(9mgXOd_pL!sH=UY;b2^LhEo`g0`*i<`={h;|tMx>(Hq zy#CfF*GJe=3+#T6#ecW#=?10fz?{v`x&muHC6>_jyD2(NRzvQ+W|gFr3HTm!F@`hI z3_oC;JW~8U~duOj^$+vjl{Ud=mS56nI$4z5iVxsVFo9Wj`~lTYr3AmrZFWkxHb;ZRuzPdG#ou2!Nxsn8c=#y_;@Ixn0Zu!oS%IPAzi$G zq4&nkd^NsRg6*8ibntTu=a!XGTc{C{s0tKom1e&{qAf(bD_j9CS!I_rVnx?qKf$xt z2*YY1d&l#Es&ewQu#hSkhnZoss`jKN@r_W#(D0HQcQWA3+YPnvFcEN`aEiJXkQ!q}Fe@!dCw!Lmwxn8d_N8DPvdOm9%t zDP12+nosNuWrOg<`T3B33##rJ1qd{ho>`ga_A}5A%^1gG873u$`$o1XKG`w{juFYJ z$({2rT)BR8{OOvQakCzJQ+Qk?3VC9UT-mdXinaNLVME@66JYgi<(5pb@kL>zf9QLK zC9=g+6kcCuvPm#Y=#rV8jC@q_13OzDQX(>p4$No0sCBj5Y5qm^L}nu>TI;rn^NErZ z0aZ42_S8UuzmOGLoJ5=^tD?P0 zOlTV{eii?OonNuLxH*5+4jk)Rl&sDiM%tbSC9gz5#mMP7n1u5l;pm`7!agf=9=RSg=al1@OlquHPlmEZO2UAEWRwUsiU za*S!i4hDFO8b{ct>aT`%@uQm7IEqU-rhqak$nMzwz9uE_*qqkb60uYAvy0tF8Qu$| zg43y|2v^DQh^b~u1qFKXu9tmS0|w=b=wYBlSpfrdiNf-iZz^*@$VZ?dS7b>wmoT@p zW&pv8j@Wth%9hB)($13}YYRPKNyyUx3BQm3hr9-vO ze>(9|fP#x0;>aKNeiQKv(=ZO(JtBEfrjcuUX!di(RdjGK_odf49r2=Sz)LJaeo%`5 z#Pg*bN$5(9KjuBd+YPL@RDG0z58IpVT#pyKEy|4|mY&GmcUPixYUGw<{T1syI!4N? zrI91dCYTb?IxG%UA$hys8Mn85h*}WZ>v*>Nqur>8m_t39Z57u^{G7lszF?1;nBv}` z$vyoqzIFu;?b_99wOIqS40TxaR}TWqM_uC!4Ane%Js~*PWHkD> zGpKXdUyILd2tl?&ljwk={bWNL?~nLvO0U8S`f`?MA7i`iP0;<`eXhUpdtjJtL^K4{ z68b7U+mu)NyNQo{u8$;JrJ$ZQO%Kh^D~}@65FE6wv2i0ByEpT~a5MtXAmurMz->G+ z9ieQz*;u}kVT%_P=i1H9`?i*%rpmPEywNo2KDQ4O=vYFhtrEB@f;BL2i>-D{I&3m> zPJMP(&K6Je{q6mpM#Iou61i`}#`aI7q#uvOE&~17dhgYC4KfO`&*zwFa~Yup(D^Ew z);%_9l*F1YSl8~>5w%38^tx|NS?cg+MpvqknB(7TP`#TKu{bxGo*1B|iZ|Dx=*D)-ZLBr- zqX@DLM+^CVxf0jjoS3*dKTMyP2$}prJRo^W;(xfSV3p^U z{Ci+b<8?XF*#m8$io7!(Tg>M%)u4#ugo0%Op80x{slM%B6{&8h`FD@>-~u%1!gI8Q zr?mM!kq-SnJc7zAdCCb40M{Hn~GRtTI1#k4OaU+m-6T3 zEjEJh&`aO6mktBerHF9MKqtaCLI|DWzTSb2^o%+2jKK+`j~~;tI#}3Vai?ouxTqG@ zbD(A@)fgF^e?N}ndBbhgoQD5kVmUitD8JB^rah?ItaC~X&gNhiaj4zBvJF-G$Gcb6L z8lAJRA4q!47yJp@IweLCZ_%oFeM9zbQ$!p9?5Lp@aa8yvO)bAB8nZ#$B za~!rs$j9I~@MqiPrDLJ>qows8T)W*I=uAMr?H(Tu10yaMff*G6(q)Nxc0Oo)eoKPZiloMgxme=Pomn z77kU_qsjXYOw6F$aJud6pPacA+Wk0wnm@kj(t_PxCL3NfhW}z-RC|n)@lzsOL0uF7iDcJ{I7DhH!}`W6cTTX^BI#kt@xyGkzl(%&vn!0OV(qmy(xuXlfP& z^V@e!;#M5qvw0Kn4YTzfQG;BD6n&$F`qrv!hLd!tROnO1H^TP$;`l7eWoeL!-P5`e zl1#1b-a$2)nGZys6qqt(IXy%4A6D1BZhNA92*#sKu7sCA_|9eyxT1&h={{QeePNX! zbl>!Q;uAhy-ls*aw{GF1Z;SBa z8$@!nzfXH4kT_GV<=x~1&WW9&4eB=wb}fzP{g1qIed{s1Ov;|A_T<9LB)%y-I_<1l zUO}pi&oHsUp?xIW%dD#dL4I|YcB?n9n>@q_S>hHY`m`{H)Q$vXRvrqw@PJo~(#Vm8 z;SumN3@I`8;NzeJ{_U;ObfNP0p3RC==0ST2u*_Ug++=A{zq*bE&yMUBK2~!9`TdtY zO6u_?K++;MZer~C=((sPqVbbUv@ItU!S8JRqGg$%^pts9T?qFKyV|=B<-30YIcPe`D8J^m^vGf$Dgvc;z z{$JbtCRZ;$vjqg_1N_+)4JR7=4&Tcab4xs@rsJDcPgkO%WVm61HOjwta+G7z1^Cb! zT{wQeIA-;ENphd@8d^l-JV2m_t=_N7jNWCEnFWsNxU~l^cW$M>X*rB*RZZnLXlVSl zb^PN*mqG*QdosD5Y9h_^FTp0U)*}N~aS{IQ2y6N&IrCQUh!KLJv>6$B*B9;O*HleM ziM;8=-2-_Q8E^3yRTgT>_bOF1%aW@`M#c}STQhvla`eluF@(=Q5YA@LI`zr+6>N~s z>!W%T9-?$lBC3nO2eaASb!!dUYN@jdry2px1uCW{vNMx2&>xXW@k^IYsl8tUJCfUZ}D)NZ_&`8 zb$tN8b6#+*{L7H&=RTYqpx|?)cuT-Qp8W0oW>ceHzh@aPt`L2Z8TUinM*A!EpI%rW zD!o=-*n;{Adn>N#nPfdCHNv}*8NYpv$ZABWD9AGnk>eAddIT9qS=bPo;W%!4v%LNI)^8E^h`KTeqW@azhkjFS5wkIO_yCoTIH}Rf3M*}# zpLJUlhc-<_=1=9=fZ0nukLAkn&}trYM@L6W@@h7WUt#3w9wtoNT3R^%?WRocK{Hvb za)&N7LLM(?Tz4|XGbQhH$m>6gInp5K!FEHgDI%aeOM68-87Hq1xd+ZL2U%;6wdrto zmaLQ!bT!J<#~QUM63TxgW`85phPB=P4OQ5IzCmaKMX4RmojX*ahMY`%n&b)aLu=Md zQP*TCUFi@Nd?E*F%xs!+-41!W`1B1m)YR0Cb#|lr^Z~x0CWl|F-+pWoUZ5OigPB4*=G`>y(hxR`xQNf~vG8qZ2Tg4H(bck${#-kw2o(mGtPwQf+Yf5a`#HOfHHG-uda-DMEru96$QGdWZ0g$f*xLt#?^(vaO3z~eGe-Kwv(DV+OGpkyPtSljG8@8P6jy;H&wAyrF-5m9;z zD|cY#1uy2Alqm9iKP-_D_uG9sA?^mL#wu3R*0e>w6lQwGFMf2Yd0bw3RPCGz0(=tB zzsQiO`0yg;GgY%J_zl@1reBI%ZFMd!ouiX(k4k&2f2)dtls%Z0DISYtql9^@rl zDy%|Wh&jrDyHY4IpEahbrk^d11O-UMUJh&HWOhF|ly4=kZt7HbCYY$n@gNV+@TxD+ zo(Uy)mo+HJLf21w{?@O!A<-H7PVwRZ-8Z^tSWi<+hZxLlXltj4^)G?47ewaForfT{ zn9GNaEn_1kSb0kO)l@}#VagkjW5V`PMRWw?D@^Y7xAy2)sB?lFOLC!9 z=jgcMG?39*R@`(T3PdR*Ytb1RInc+(U?%yl{RFQ*ZCfzzy6Hp9_0Fb9kns(kvzlG4 z%G-KVRccRVtHxoQPw7-__E`C{7r?v~Tlz&JnO8FvDWej>BED`9E8oxAeNQ0_fY2>O zg3!o^dYU!fANgu>KX81fbP($2U{Pi@}t!8|k^~m)w zjiZj8Qj!r&Mlb%ppG_(IxtlYi_jf6i)&zUIsGb6sJl#%xwHMNH%)NA}499T$dpA<1 zeBrxcgKB-pq zzcqJ&R~fZ6%T|AB{s8`^s*n6D{r?(i*-~_F4zt`9-~!t}ENC2Q<$C6GTsWc5@N@eI z{qg{nu)gXds0spEgI^P%iO03-DVjd1K_Kz+0cQ2F*H@;orCZG>qrLnlKDe=lDmaYx zlbfPHWJguw-TWt3PEMwb*H@kvSeUqN4_KnztI-lABHwO6mxme$lYr~t=BQe@P#)YZ z*I%w_`22E1#h1B%O(82Sl6oYCA18Ni!}77`e7UOdat?8a-Imi<2;ORRd@pdUl7pwO zYB2Edq1CP#_DNqleW!HG%6um=t)pP-*V?+emAJ*q*r;q)Oa5WIM3=!++W1jn&ts*O zK0E8kli@Vk?#8eK^R%kEoo+6r$$%Y;AvZ9tEkM3~dfw|e%Y}c7*;2#2QiR(^diGwT zY0Du~h;Bkn^Q?8PWTtNfJh~v+-H| z3&YD}FdP1)ZW1#-0d4r}S8V|HZX#K&-G!#>==QFWh$IQ-1SX8*)D^>XhV&$$)<{&a zWqqb?o&(u>3G~f#niJBea#7k7@PVpXi6=B4ly~x@DBZ6@gO?)bD4DmlJOdes&7n#6 zFKdAx`ZvNeF4ERIalZ*8CJZxX)o7n+WK=N7$}r@ESw;!JXU|Rx`FTPK6b^jpR{Awh zr_xS!6C~&~XO#JsQy(!9%;X%p-v_2u5bxJ3g}nRBUA=&Jt`Km&_$+(-L9H#O7iNF< zrzUDHTUlG3gyQiFNxBL|^a;wYj-Dyg(4B(fKBJ~>kpa}ar3*k(1}F&Wd;s~ncb;Q3 zYBBv?2*zI#=h^{+GCYWgyVoT_@yz&x0^n?_D+QWx-or;$CZzR#&M%;5>Xj;;?crH< z6RYxUbPJ6x$vE@eNA3?PEZrPr+J)bquBv_MPPUOdK{cjMKY#PftF1BJN7Kj7 zzl>sHrDNaa Date: Thu, 22 Feb 2024 18:13:06 +0200 Subject: [PATCH 0119/1296] Add particle background block and dependencies --- .../particle-background.css | 6 ++ .../particle-background.js | 59 +++++++++++++++++++ package-lock.json | 28 +++++++++ package.json | 9 ++- 4 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 _src/blocks/particle-background/particle-background.css create mode 100644 _src/blocks/particle-background/particle-background.js diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css new file mode 100644 index 000000000..f28be8f09 --- /dev/null +++ b/_src/blocks/particle-background/particle-background.css @@ -0,0 +1,6 @@ + +#tsparticles { + width: 100%; + height: 400px; + position: relative; /* This is important if you want to overlay other elements on top of the particles */ +} \ No newline at end of file diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js new file mode 100644 index 000000000..8a57128d3 --- /dev/null +++ b/_src/blocks/particle-background/particle-background.js @@ -0,0 +1,59 @@ +/* eslint-disable prefer-const */ +/* eslint-disable camelcase */ +// import '../../../node_modules/particles.js/particles'; +// import { tsParticles } from "../../../node_modules/@tsparticles/engine/tsparticles.engine.js"; +import { tsParticles } from 'https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm'; +import { loadAll } from 'https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm'; + +async function loadParticles(options) { + await loadAll(tsParticles); + + await tsParticles.load({ id: 'tsparticles', options }); +} + +export default async function decorate(block) { + console.log('Particle background block'); + + const canvas = document.createElement('div'); + canvas.setAttribute('id', 'tsparticles'); + block.append(canvas); + + const configs = { + particles: { + number: { + value: 100, + }, + color: { + value: '#ffffff', + }, + links: { + enable: true, + distance: 200, + }, + shape: { + type: 'circle', + }, + opacity: { + value: 1, + }, + size: { + value: { + min: 4, + max: 6, + }, + }, + move: { + enable: true, + speed: 2, + }, + }, + background: { + color: '#016DFF', + }, + poisson: { + enable: true, + }, + }; + + loadParticles(configs); +} diff --git a/package-lock.json b/package-lock.json index 6e7e32045..587d20df9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "@adobe/helix-project-boilerplate", "version": "1.0.0", "license": "Apache License 2.0", + "dependencies": { + "@tsparticles/engine": "^3.2.2" + }, "devDependencies": { "@babel/core": "7.21.0", "@babel/eslint-parser": "7.19.1", @@ -688,6 +691,26 @@ "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==", "dev": true }, + "node_modules/@tsparticles/engine": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.2.2.tgz", + "integrity": "sha512-iNLrt104r9CHuZORv+XgEYnfjv/1J6/OgoSCsGUJe2zUxT4ldltlSc+L+MAC68GFo+GVZfSmnPhMFeqtgZKpBw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/matteobruni" + }, + { + "type": "github", + "url": "https://github.com/sponsors/tsparticles" + }, + { + "type": "buymeacoffee", + "url": "https://www.buymeacoffee.com/matteobruni" + } + ], + "hasInstallScript": true + }, "node_modules/@types/accepts": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz", @@ -7447,6 +7470,11 @@ "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==", "dev": true }, + "@tsparticles/engine": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.2.2.tgz", + "integrity": "sha512-iNLrt104r9CHuZORv+XgEYnfjv/1J6/OgoSCsGUJe2zUxT4ldltlSc+L+MAC68GFo+GVZfSmnPhMFeqtgZKpBw==" + }, "@types/accepts": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz", diff --git a/package.json b/package.json index 74d17f0f3..03858fa50 100644 --- a/package.json +++ b/package.json @@ -21,15 +21,18 @@ "devDependencies": { "@babel/core": "7.21.0", "@babel/eslint-parser": "7.19.1", + "@esm-bundle/chai": "4.3.4-fix.0", + "@web/test-runner": "0.15.1", + "@web/test-runner-commands": "0.6.5", "chai": "4.3.7", "eslint": "8.35.0", "eslint-config-airbnb-base": "15.0.0", "eslint-plugin-import": "2.27.5", - "@esm-bundle/chai": "4.3.4-fix.0", - "@web/test-runner": "0.15.1", - "@web/test-runner-commands": "0.6.5", "sinon": "15.0.1", "stylelint": "15.2.0", "stylelint-config-standard": "30.0.1" + }, + "dependencies": { + "@tsparticles/engine": "^3.2.2" } } From 9e083e47637e85dd59d630b1d02f69b4f612ed27 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 22 Feb 2024 18:30:51 +0200 Subject: [PATCH 0120/1296] tsparticles --- _src/blocks/marquee/marquee.js | 1 - _src/scripts/template-factories/trusted.js | 135 +- _src/scripts/vendor/particles.js | 1541 -------------------- _src/scripts/vendor/particles.min.js | 0 4 files changed, 25 insertions(+), 1652 deletions(-) delete mode 100644 _src/scripts/vendor/particles.js delete mode 100644 _src/scripts/vendor/particles.min.js diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index 9a256b918..52d1623c4 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -60,6 +60,5 @@ export default async function decorate(block) { render(); - // Optionally, update on window resize window.addEventListener('resize', debounce(render, 250)); } diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index 45ae921bd..ad6be5730 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -1,139 +1,54 @@ -import { loadScript } from '../lib-franklin.js'; - -await loadScript(`${window.hlx.codeBasePath}/scripts/vendor/particles.js`, { - type: 'module', -}); +import { tsParticles } from 'https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm'; +import { loadAll } from 'https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm'; const particleIdSelector = 'particles-js'; const particleDiv = document.createElement('div'); particleDiv.setAttribute('id', particleIdSelector); -const headerHeight = 40; -const carouselHeight = 116; -const bannerHeight = 674; -const sliderHeight = window.innerHeight; +document.body.prepend(particleDiv); -const initialHeight = headerHeight + bannerHeight + carouselHeight + sliderHeight; -// particleDiv.style.height = `${initialHeight}px`; +async function loadParticles(options) { + await loadAll(tsParticles); -document.body.prepend(particleDiv); + await tsParticles.load({ id: particleIdSelector, options }); +} -window.particlesJS(particleIdSelector, { +const configs = { particles: { number: { - value: 60, - density: { - enable: true, - value_area: 800, - }, + value: 100, }, color: { value: '#ffffff', }, + links: { + enable: true, + distance: 200, + }, shape: { type: 'circle', - stroke: { - width: 0, - color: '#000000', - }, - polygon: { - nb_sides: 5, - }, - image: { - src: 'img/github.svg', - width: 100, - height: 100, - }, }, opacity: { - value: 0.5, - random: false, - anim: { - enable: false, - speed: 1, - opacity_min: 0.1, - sync: false, - }, + value: 1, }, size: { - value: 3, - random: true, - anim: { - enable: false, - speed: 20, - size_min: 0.1, - sync: false, + value: { + min: 4, + max: 6, }, }, - line_linked: { - enable: true, - distance: 150, - color: '#ffffff', - opacity: 0.4, - width: 1, - }, move: { enable: true, - speed: 6, - direction: 'none', - random: false, - straight: false, - out_mode: 'out', - bounce: false, - attract: { - enable: false, - rotateX: 600, - rotateY: 1200, - }, + speed: 2, }, }, - interactivity: { - detect_on: 'canvas', - events: { - onhover: { - enable: true, - mode: 'grab', - }, - onclick: { - enable: true, - mode: 'push', - }, - resize: true, - }, - modes: { - grab: { - distance: 140, - line_linked: { - opacity: 1, - }, - }, - bubble: { - distance: 400, - size: 40, - duration: 2, - opacity: 8, - speed: 3, - }, - repulse: { - distance: 200, - duration: 0.4, - }, - push: { - particles_nb: 4, - }, - remove: { - particles_nb: 2, - }, - }, + background: { + color: '#016DFF', + }, + poisson: { + enable: true, }, - retina_detect: true, -}); +}; -function rearangeParticles() { - window.dispatchEvent(new Event('resize')); -} -setTimeout(() => { - // particleDiv.style = null; - rearangeParticles(); -}, 1000); +loadParticles(configs); diff --git a/_src/scripts/vendor/particles.js b/_src/scripts/vendor/particles.js deleted file mode 100644 index 592ab3e3f..000000000 --- a/_src/scripts/vendor/particles.js +++ /dev/null @@ -1,1541 +0,0 @@ -/* ----------------------------------------------- -/* Author : Vincent Garreau - vincentgarreau.com -/* MIT license: http://opensource.org/licenses/MIT -/* Demo / Generator : vincentgarreau.com/particles.js -/* GitHub : github.com/VincentGarreau/particles.js -/* How to use? : Check the GitHub README -/* v2.0.0 -/* ----------------------------------------------- */ - -var pJS = function(tag_id, params){ - - var canvas_el = document.querySelector('#'+tag_id+' > .particles-js-canvas-el'); - - /* particles.js variables with default values */ - this.pJS = { - canvas: { - el: canvas_el, - w: canvas_el.offsetWidth, - h: canvas_el.offsetHeight - }, - particles: { - number: { - value: 400, - density: { - enable: true, - value_area: 800 - } - }, - color: { - value: '#fff' - }, - shape: { - type: 'circle', - stroke: { - width: 0, - color: '#ff0000' - }, - polygon: { - nb_sides: 5 - }, - image: { - src: '', - width: 100, - height: 100 - } - }, - opacity: { - value: 1, - random: false, - anim: { - enable: false, - speed: 2, - opacity_min: 0, - sync: false - } - }, - size: { - value: 20, - random: false, - anim: { - enable: false, - speed: 20, - size_min: 0, - sync: false - } - }, - line_linked: { - enable: true, - distance: 100, - color: '#fff', - opacity: 1, - width: 1 - }, - move: { - enable: true, - speed: 2, - direction: 'none', - random: false, - straight: false, - out_mode: 'out', - bounce: false, - attract: { - enable: false, - rotateX: 3000, - rotateY: 3000 - } - }, - array: [] - }, - interactivity: { - detect_on: 'canvas', - events: { - onhover: { - enable: true, - mode: 'grab' - }, - onclick: { - enable: true, - mode: 'push' - }, - resize: true - }, - modes: { - grab:{ - distance: 100, - line_linked:{ - opacity: 1 - } - }, - bubble:{ - distance: 200, - size: 80, - duration: 0.4 - }, - repulse:{ - distance: 200, - duration: 0.4 - }, - push:{ - particles_nb: 4 - }, - remove:{ - particles_nb: 2 - } - }, - mouse:{} - }, - retina_detect: false, - fn: { - interact: {}, - modes: {}, - vendors:{} - }, - tmp: {} - }; - - var pJS = this.pJS; - - /* params settings */ - if(params){ - Object.deepExtend(pJS, params); - } - - pJS.tmp.obj = { - size_value: pJS.particles.size.value, - size_anim_speed: pJS.particles.size.anim.speed, - move_speed: pJS.particles.move.speed, - line_linked_distance: pJS.particles.line_linked.distance, - line_linked_width: pJS.particles.line_linked.width, - mode_grab_distance: pJS.interactivity.modes.grab.distance, - mode_bubble_distance: pJS.interactivity.modes.bubble.distance, - mode_bubble_size: pJS.interactivity.modes.bubble.size, - mode_repulse_distance: pJS.interactivity.modes.repulse.distance - }; - - - pJS.fn.retinaInit = function(){ - - if(pJS.retina_detect && window.devicePixelRatio > 1){ - pJS.canvas.pxratio = window.devicePixelRatio; - pJS.tmp.retina = true; - } - else{ - pJS.canvas.pxratio = 1; - pJS.tmp.retina = false; - } - - pJS.canvas.w = pJS.canvas.el.offsetWidth * pJS.canvas.pxratio; - pJS.canvas.h = pJS.canvas.el.offsetHeight * pJS.canvas.pxratio; - - pJS.particles.size.value = pJS.tmp.obj.size_value * pJS.canvas.pxratio; - pJS.particles.size.anim.speed = pJS.tmp.obj.size_anim_speed * pJS.canvas.pxratio; - pJS.particles.move.speed = pJS.tmp.obj.move_speed * pJS.canvas.pxratio; - pJS.particles.line_linked.distance = pJS.tmp.obj.line_linked_distance * pJS.canvas.pxratio; - pJS.interactivity.modes.grab.distance = pJS.tmp.obj.mode_grab_distance * pJS.canvas.pxratio; - pJS.interactivity.modes.bubble.distance = pJS.tmp.obj.mode_bubble_distance * pJS.canvas.pxratio; - pJS.particles.line_linked.width = pJS.tmp.obj.line_linked_width * pJS.canvas.pxratio; - pJS.interactivity.modes.bubble.size = pJS.tmp.obj.mode_bubble_size * pJS.canvas.pxratio; - pJS.interactivity.modes.repulse.distance = pJS.tmp.obj.mode_repulse_distance * pJS.canvas.pxratio; - - }; - - - - /* ---------- pJS functions - canvas ------------ */ - - pJS.fn.canvasInit = function(){ - pJS.canvas.ctx = pJS.canvas.el.getContext('2d'); - }; - - pJS.fn.canvasSize = function(){ - - pJS.canvas.el.width = pJS.canvas.w; - pJS.canvas.el.height = pJS.canvas.h; - - if(pJS && pJS.interactivity.events.resize){ - - window.addEventListener('resize', function(){ - - pJS.canvas.w = pJS.canvas.el.offsetWidth; - pJS.canvas.h = pJS.canvas.el.offsetHeight; - - /* resize canvas */ - if(pJS.tmp.retina){ - pJS.canvas.w *= pJS.canvas.pxratio; - pJS.canvas.h *= pJS.canvas.pxratio; - } - - pJS.canvas.el.width = pJS.canvas.w; - pJS.canvas.el.height = pJS.canvas.h; - - /* repaint canvas on anim disabled */ - if(!pJS.particles.move.enable){ - pJS.fn.particlesEmpty(); - pJS.fn.particlesCreate(); - pJS.fn.particlesDraw(); - pJS.fn.vendors.densityAutoParticles(); - } - - /* density particles enabled */ - pJS.fn.vendors.densityAutoParticles(); - - }); - - } - - }; - - - pJS.fn.canvasPaint = function(){ - pJS.canvas.ctx.fillRect(0, 0, pJS.canvas.w, pJS.canvas.h); - }; - - pJS.fn.canvasClear = function(){ - pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); - }; - - - /* --------- pJS functions - particles ----------- */ - - pJS.fn.particle = function(color, opacity, position){ - - /* size */ - this.radius = (pJS.particles.size.random ? Math.random() : 1) * pJS.particles.size.value; - if(pJS.particles.size.anim.enable){ - this.size_status = false; - this.vs = pJS.particles.size.anim.speed / 100; - if(!pJS.particles.size.anim.sync){ - this.vs = this.vs * Math.random(); - } - } - - /* position */ - this.x = position ? position.x : Math.random() * pJS.canvas.w; - this.y = position ? position.y : Math.random() * pJS.canvas.h; - - /* check position - into the canvas */ - if(this.x > pJS.canvas.w - this.radius*2) this.x = this.x - this.radius; - else if(this.x < this.radius*2) this.x = this.x + this.radius; - if(this.y > pJS.canvas.h - this.radius*2) this.y = this.y - this.radius; - else if(this.y < this.radius*2) this.y = this.y + this.radius; - - /* check position - avoid overlap */ - if(pJS.particles.move.bounce){ - pJS.fn.vendors.checkOverlap(this, position); - } - - /* color */ - this.color = {}; - if(typeof(color.value) == 'object'){ - - if(color.value instanceof Array){ - var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)]; - this.color.rgb = hexToRgb(color_selected); - }else{ - if(color.value.r != undefined && color.value.g != undefined && color.value.b != undefined){ - this.color.rgb = { - r: color.value.r, - g: color.value.g, - b: color.value.b - } - } - if(color.value.h != undefined && color.value.s != undefined && color.value.l != undefined){ - this.color.hsl = { - h: color.value.h, - s: color.value.s, - l: color.value.l - } - } - } - - } - else if(color.value == 'random'){ - this.color.rgb = { - r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), - g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0), - b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0) - } - } - else if(typeof(color.value) == 'string'){ - this.color = color; - this.color.rgb = hexToRgb(this.color.value); - } - - /* opacity */ - this.opacity = (pJS.particles.opacity.random ? Math.random() : 1) * pJS.particles.opacity.value; - if(pJS.particles.opacity.anim.enable){ - this.opacity_status = false; - this.vo = pJS.particles.opacity.anim.speed / 100; - if(!pJS.particles.opacity.anim.sync){ - this.vo = this.vo * Math.random(); - } - } - - /* animation - velocity for speed */ - var velbase = {} - switch(pJS.particles.move.direction){ - case 'top': - velbase = { x:0, y:-1 }; - break; - case 'top-right': - velbase = { x:0.5, y:-0.5 }; - break; - case 'right': - velbase = { x:1, y:-0 }; - break; - case 'bottom-right': - velbase = { x:0.5, y:0.5 }; - break; - case 'bottom': - velbase = { x:0, y:1 }; - break; - case 'bottom-left': - velbase = { x:-0.5, y:1 }; - break; - case 'left': - velbase = { x:-1, y:0 }; - break; - case 'top-left': - velbase = { x:-0.5, y:-0.5 }; - break; - default: - velbase = { x:0, y:0 }; - break; - } - - if(pJS.particles.move.straight){ - this.vx = velbase.x; - this.vy = velbase.y; - if(pJS.particles.move.random){ - this.vx = this.vx * (Math.random()); - this.vy = this.vy * (Math.random()); - } - }else{ - this.vx = velbase.x + Math.random()-0.5; - this.vy = velbase.y + Math.random()-0.5; - } - - // var theta = 2.0 * Math.PI * Math.random(); - // this.vx = Math.cos(theta); - // this.vy = Math.sin(theta); - - this.vx_i = this.vx; - this.vy_i = this.vy; - - - - /* if shape is image */ - - var shape_type = pJS.particles.shape.type; - if(typeof(shape_type) == 'object'){ - if(shape_type instanceof Array){ - var shape_selected = shape_type[Math.floor(Math.random() * shape_type.length)]; - this.shape = shape_selected; - } - }else{ - this.shape = shape_type; - } - - if(this.shape == 'image'){ - var sh = pJS.particles.shape; - this.img = { - src: sh.image.src, - ratio: sh.image.width / sh.image.height - } - if(!this.img.ratio) this.img.ratio = 1; - if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg != undefined){ - pJS.fn.vendors.createSvgImg(this); - if(pJS.tmp.pushing){ - this.img.loaded = false; - } - } - } - - - - }; - - - pJS.fn.particle.prototype.draw = function() { - - var p = this; - - if(p.radius_bubble != undefined){ - var radius = p.radius_bubble; - }else{ - var radius = p.radius; - } - - if(p.opacity_bubble != undefined){ - var opacity = p.opacity_bubble; - }else{ - var opacity = p.opacity; - } - - if(p.color.rgb){ - var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+opacity+')'; - }else{ - var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+opacity+')'; - } - - pJS.canvas.ctx.fillStyle = color_value; - pJS.canvas.ctx.beginPath(); - - switch(p.shape){ - - case 'circle': - pJS.canvas.ctx.arc(p.x, p.y, radius, 0, Math.PI * 2, false); - break; - - case 'edge': - pJS.canvas.ctx.rect(p.x-radius, p.y-radius, radius*2, radius*2); - break; - - case 'triangle': - pJS.fn.vendors.drawShape(pJS.canvas.ctx, p.x-radius, p.y+radius / 1.66, radius*2, 3, 2); - break; - - case 'polygon': - pJS.fn.vendors.drawShape( - pJS.canvas.ctx, - p.x - radius / (pJS.particles.shape.polygon.nb_sides/3.5), // startX - p.y - radius / (2.66/3.5), // startY - radius*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength - pJS.particles.shape.polygon.nb_sides, // sideCountNumerator - 1 // sideCountDenominator - ); - break; - - case 'star': - pJS.fn.vendors.drawShape( - pJS.canvas.ctx, - p.x - radius*2 / (pJS.particles.shape.polygon.nb_sides/4), // startX - p.y - radius / (2*2.66/3.5), // startY - radius*2*2.66 / (pJS.particles.shape.polygon.nb_sides/3), // sideLength - pJS.particles.shape.polygon.nb_sides, // sideCountNumerator - 2 // sideCountDenominator - ); - break; - - case 'image': - - function draw(){ - pJS.canvas.ctx.drawImage( - img_obj, - p.x-radius, - p.y-radius, - radius*2, - radius*2 / p.img.ratio - ); - } - - if(pJS.tmp.img_type == 'svg'){ - var img_obj = p.img.obj; - }else{ - var img_obj = pJS.tmp.img_obj; - } - - if(img_obj){ - draw(); - } - - break; - - } - - pJS.canvas.ctx.closePath(); - - if(pJS.particles.shape.stroke.width > 0){ - pJS.canvas.ctx.strokeStyle = pJS.particles.shape.stroke.color; - pJS.canvas.ctx.lineWidth = pJS.particles.shape.stroke.width; - pJS.canvas.ctx.stroke(); - } - - pJS.canvas.ctx.fill(); - - }; - - - pJS.fn.particlesCreate = function(){ - for(var i = 0; i < pJS.particles.number.value; i++) { - pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.value)); - } - }; - - pJS.fn.particlesUpdate = function(){ - - for(var i = 0; i < pJS.particles.array.length; i++){ - - /* the particle */ - var p = pJS.particles.array[i]; - - // var d = ( dx = pJS.interactivity.mouse.click_pos_x - p.x ) * dx + ( dy = pJS.interactivity.mouse.click_pos_y - p.y ) * dy; - // var f = -BANG_SIZE / d; - // if ( d < BANG_SIZE ) { - // var t = Math.atan2( dy, dx ); - // p.vx = f * Math.cos(t); - // p.vy = f * Math.sin(t); - // } - - /* move the particle */ - if(pJS.particles.move.enable){ - var ms = pJS.particles.move.speed/2; - p.x += p.vx * ms; - p.y += p.vy * ms; - } - - /* change opacity status */ - if(pJS.particles.opacity.anim.enable) { - if(p.opacity_status == true) { - if(p.opacity >= pJS.particles.opacity.value) p.opacity_status = false; - p.opacity += p.vo; - }else { - if(p.opacity <= pJS.particles.opacity.anim.opacity_min) p.opacity_status = true; - p.opacity -= p.vo; - } - if(p.opacity < 0) p.opacity = 0; - } - - /* change size */ - if(pJS.particles.size.anim.enable){ - if(p.size_status == true){ - if(p.radius >= pJS.particles.size.value) p.size_status = false; - p.radius += p.vs; - }else{ - if(p.radius <= pJS.particles.size.anim.size_min) p.size_status = true; - p.radius -= p.vs; - } - if(p.radius < 0) p.radius = 0; - } - - /* change particle position if it is out of canvas */ - if(pJS.particles.move.out_mode == 'bounce'){ - var new_pos = { - x_left: p.radius, - x_right: pJS.canvas.w, - y_top: p.radius, - y_bottom: pJS.canvas.h - } - }else{ - var new_pos = { - x_left: -p.radius, - x_right: pJS.canvas.w + p.radius, - y_top: -p.radius, - y_bottom: pJS.canvas.h + p.radius - } - } - - if(p.x - p.radius > pJS.canvas.w){ - p.x = new_pos.x_left; - p.y = Math.random() * pJS.canvas.h; - } - else if(p.x + p.radius < 0){ - p.x = new_pos.x_right; - p.y = Math.random() * pJS.canvas.h; - } - if(p.y - p.radius > pJS.canvas.h){ - p.y = new_pos.y_top; - p.x = Math.random() * pJS.canvas.w; - } - else if(p.y + p.radius < 0){ - p.y = new_pos.y_bottom; - p.x = Math.random() * pJS.canvas.w; - } - - /* out of canvas modes */ - switch(pJS.particles.move.out_mode){ - case 'bounce': - if (p.x + p.radius > pJS.canvas.w) p.vx = -p.vx; - else if (p.x - p.radius < 0) p.vx = -p.vx; - if (p.y + p.radius > pJS.canvas.h) p.vy = -p.vy; - else if (p.y - p.radius < 0) p.vy = -p.vy; - break; - } - - /* events */ - if(isInArray('grab', pJS.interactivity.events.onhover.mode)){ - pJS.fn.modes.grabParticle(p); - } - - if(isInArray('bubble', pJS.interactivity.events.onhover.mode) || isInArray('bubble', pJS.interactivity.events.onclick.mode)){ - pJS.fn.modes.bubbleParticle(p); - } - - if(isInArray('repulse', pJS.interactivity.events.onhover.mode) || isInArray('repulse', pJS.interactivity.events.onclick.mode)){ - pJS.fn.modes.repulseParticle(p); - } - - /* interaction auto between particles */ - if(pJS.particles.line_linked.enable || pJS.particles.move.attract.enable){ - for(var j = i + 1; j < pJS.particles.array.length; j++){ - var p2 = pJS.particles.array[j]; - - /* link particles */ - if(pJS.particles.line_linked.enable){ - pJS.fn.interact.linkParticles(p,p2); - } - - /* attract particles */ - if(pJS.particles.move.attract.enable){ - pJS.fn.interact.attractParticles(p,p2); - } - - /* bounce particles */ - if(pJS.particles.move.bounce){ - pJS.fn.interact.bounceParticles(p,p2); - } - - } - } - - - } - - }; - - pJS.fn.particlesDraw = function(){ - - /* clear canvas */ - pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h); - - /* update each particles param */ - pJS.fn.particlesUpdate(); - - /* draw each particle */ - for(var i = 0; i < pJS.particles.array.length; i++){ - var p = pJS.particles.array[i]; - p.draw(); - } - - }; - - pJS.fn.particlesEmpty = function(){ - pJS.particles.array = []; - }; - - pJS.fn.particlesRefresh = function(){ - - /* init all */ - cancelRequestAnimFrame(pJS.fn.checkAnimFrame); - cancelRequestAnimFrame(pJS.fn.drawAnimFrame); - pJS.tmp.source_svg = undefined; - pJS.tmp.img_obj = undefined; - pJS.tmp.count_svg = 0; - pJS.fn.particlesEmpty(); - pJS.fn.canvasClear(); - - /* restart */ - pJS.fn.vendors.start(); - - }; - - - /* ---------- pJS functions - particles interaction ------------ */ - - pJS.fn.interact.linkParticles = function(p1, p2){ - - var dx = p1.x - p2.x, - dy = p1.y - p2.y, - dist = Math.sqrt(dx*dx + dy*dy); - - /* draw a line between p1 and p2 if the distance between them is under the config distance */ - if(dist <= pJS.particles.line_linked.distance){ - - var opacity_line = pJS.particles.line_linked.opacity - (dist / (1/pJS.particles.line_linked.opacity)) / pJS.particles.line_linked.distance; - - if(opacity_line > 0){ - - /* style */ - var color_line = pJS.particles.line_linked.color_rgb_line; - pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; - pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; - //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ - - /* path */ - pJS.canvas.ctx.beginPath(); - pJS.canvas.ctx.moveTo(p1.x, p1.y); - pJS.canvas.ctx.lineTo(p2.x, p2.y); - pJS.canvas.ctx.stroke(); - pJS.canvas.ctx.closePath(); - - } - - } - - }; - - - pJS.fn.interact.attractParticles = function(p1, p2){ - - /* condensed particles */ - var dx = p1.x - p2.x, - dy = p1.y - p2.y, - dist = Math.sqrt(dx*dx + dy*dy); - - if(dist <= pJS.particles.line_linked.distance){ - - var ax = dx/(pJS.particles.move.attract.rotateX*1000), - ay = dy/(pJS.particles.move.attract.rotateY*1000); - - p1.vx -= ax; - p1.vy -= ay; - - p2.vx += ax; - p2.vy += ay; - - } - - - } - - - pJS.fn.interact.bounceParticles = function(p1, p2){ - - var dx = p1.x - p2.x, - dy = p1.y - p2.y, - dist = Math.sqrt(dx*dx + dy*dy), - dist_p = p1.radius+p2.radius; - - if(dist <= dist_p){ - p1.vx = -p1.vx; - p1.vy = -p1.vy; - - p2.vx = -p2.vx; - p2.vy = -p2.vy; - } - - } - - - /* ---------- pJS functions - modes events ------------ */ - - pJS.fn.modes.pushParticles = function(nb, pos){ - - pJS.tmp.pushing = true; - - for(var i = 0; i < nb; i++){ - pJS.particles.array.push( - new pJS.fn.particle( - pJS.particles.color, - pJS.particles.opacity.value, - { - 'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w, - 'y': pos ? pos.pos_y : Math.random() * pJS.canvas.h - } - ) - ) - if(i == nb-1){ - if(!pJS.particles.move.enable){ - pJS.fn.particlesDraw(); - } - pJS.tmp.pushing = false; - } - } - - }; - - - pJS.fn.modes.removeParticles = function(nb){ - - pJS.particles.array.splice(0, nb); - if(!pJS.particles.move.enable){ - pJS.fn.particlesDraw(); - } - - }; - - - pJS.fn.modes.bubbleParticle = function(p){ - - /* on hover event */ - if(pJS.interactivity.events.onhover.enable && isInArray('bubble', pJS.interactivity.events.onhover.mode)){ - - var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, - dy_mouse = p.y - pJS.interactivity.mouse.pos_y, - dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), - ratio = 1 - dist_mouse / pJS.interactivity.modes.bubble.distance; - - function init(){ - p.opacity_bubble = p.opacity; - p.radius_bubble = p.radius; - } - - /* mousemove - check ratio */ - if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ - - if(ratio >= 0 && pJS.interactivity.status == 'mousemove'){ - - /* size */ - if(pJS.interactivity.modes.bubble.size != pJS.particles.size.value){ - - if(pJS.interactivity.modes.bubble.size > pJS.particles.size.value){ - var size = p.radius + (pJS.interactivity.modes.bubble.size*ratio); - if(size >= 0){ - p.radius_bubble = size; - } - }else{ - var dif = p.radius - pJS.interactivity.modes.bubble.size, - size = p.radius - (dif*ratio); - if(size > 0){ - p.radius_bubble = size; - }else{ - p.radius_bubble = 0; - } - } - - } - - /* opacity */ - if(pJS.interactivity.modes.bubble.opacity != pJS.particles.opacity.value){ - - if(pJS.interactivity.modes.bubble.opacity > pJS.particles.opacity.value){ - var opacity = pJS.interactivity.modes.bubble.opacity*ratio; - if(opacity > p.opacity && opacity <= pJS.interactivity.modes.bubble.opacity){ - p.opacity_bubble = opacity; - } - }else{ - var opacity = p.opacity - (pJS.particles.opacity.value-pJS.interactivity.modes.bubble.opacity)*ratio; - if(opacity < p.opacity && opacity >= pJS.interactivity.modes.bubble.opacity){ - p.opacity_bubble = opacity; - } - } - - } - - } - - }else{ - init(); - } - - - /* mouseleave */ - if(pJS.interactivity.status == 'mouseleave'){ - init(); - } - - } - - /* on click event */ - else if(pJS.interactivity.events.onclick.enable && isInArray('bubble', pJS.interactivity.events.onclick.mode)){ - - - if(pJS.tmp.bubble_clicking){ - var dx_mouse = p.x - pJS.interactivity.mouse.click_pos_x, - dy_mouse = p.y - pJS.interactivity.mouse.click_pos_y, - dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse), - time_spent = (new Date().getTime() - pJS.interactivity.mouse.click_time)/1000; - - if(time_spent > pJS.interactivity.modes.bubble.duration){ - pJS.tmp.bubble_duration_end = true; - } - - if(time_spent > pJS.interactivity.modes.bubble.duration*2){ - pJS.tmp.bubble_clicking = false; - pJS.tmp.bubble_duration_end = false; - } - } - - - function process(bubble_param, particles_param, p_obj_bubble, p_obj, id){ - - if(bubble_param != particles_param){ - - if(!pJS.tmp.bubble_duration_end){ - if(dist_mouse <= pJS.interactivity.modes.bubble.distance){ - if(p_obj_bubble != undefined) var obj = p_obj_bubble; - else var obj = p_obj; - if(obj != bubble_param){ - var value = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration); - if(id == 'size') p.radius_bubble = value; - if(id == 'opacity') p.opacity_bubble = value; - } - }else{ - if(id == 'size') p.radius_bubble = undefined; - if(id == 'opacity') p.opacity_bubble = undefined; - } - }else{ - if(p_obj_bubble != undefined){ - var value_tmp = p_obj - (time_spent * (p_obj - bubble_param) / pJS.interactivity.modes.bubble.duration), - dif = bubble_param - value_tmp; - value = bubble_param + dif; - if(id == 'size') p.radius_bubble = value; - if(id == 'opacity') p.opacity_bubble = value; - } - } - - } - - } - - if(pJS.tmp.bubble_clicking){ - /* size */ - process(pJS.interactivity.modes.bubble.size, pJS.particles.size.value, p.radius_bubble, p.radius, 'size'); - /* opacity */ - process(pJS.interactivity.modes.bubble.opacity, pJS.particles.opacity.value, p.opacity_bubble, p.opacity, 'opacity'); - } - - } - - }; - - - pJS.fn.modes.repulseParticle = function(p){ - - if(pJS.interactivity.events.onhover.enable && isInArray('repulse', pJS.interactivity.events.onhover.mode) && pJS.interactivity.status == 'mousemove') { - - var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, - dy_mouse = p.y - pJS.interactivity.mouse.pos_y, - dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); - - var normVec = {x: dx_mouse/dist_mouse, y: dy_mouse/dist_mouse}, - repulseRadius = pJS.interactivity.modes.repulse.distance, - velocity = 100, - repulseFactor = clamp((1/repulseRadius)*(-1*Math.pow(dist_mouse/repulseRadius,2)+1)*repulseRadius*velocity, 0, 50); - - var pos = { - x: p.x + normVec.x * repulseFactor, - y: p.y + normVec.y * repulseFactor - } - - if(pJS.particles.move.out_mode == 'bounce'){ - if(pos.x - p.radius > 0 && pos.x + p.radius < pJS.canvas.w) p.x = pos.x; - if(pos.y - p.radius > 0 && pos.y + p.radius < pJS.canvas.h) p.y = pos.y; - }else{ - p.x = pos.x; - p.y = pos.y; - } - - } - - - else if(pJS.interactivity.events.onclick.enable && isInArray('repulse', pJS.interactivity.events.onclick.mode)) { - - if(!pJS.tmp.repulse_finish){ - pJS.tmp.repulse_count++; - if(pJS.tmp.repulse_count == pJS.particles.array.length){ - pJS.tmp.repulse_finish = true; - } - } - - if(pJS.tmp.repulse_clicking){ - - var repulseRadius = Math.pow(pJS.interactivity.modes.repulse.distance/6, 3); - - var dx = pJS.interactivity.mouse.click_pos_x - p.x, - dy = pJS.interactivity.mouse.click_pos_y - p.y, - d = dx*dx + dy*dy; - - var force = -repulseRadius / d * 1; - - function process(){ - - var f = Math.atan2(dy,dx); - p.vx = force * Math.cos(f); - p.vy = force * Math.sin(f); - - if(pJS.particles.move.out_mode == 'bounce'){ - var pos = { - x: p.x + p.vx, - y: p.y + p.vy - } - if (pos.x + p.radius > pJS.canvas.w) p.vx = -p.vx; - else if (pos.x - p.radius < 0) p.vx = -p.vx; - if (pos.y + p.radius > pJS.canvas.h) p.vy = -p.vy; - else if (pos.y - p.radius < 0) p.vy = -p.vy; - } - - } - - // default - if(d <= repulseRadius){ - process(); - } - - // bang - slow motion mode - // if(!pJS.tmp.repulse_finish){ - // if(d <= repulseRadius){ - // process(); - // } - // }else{ - // process(); - // } - - - }else{ - - if(pJS.tmp.repulse_clicking == false){ - - p.vx = p.vx_i; - p.vy = p.vy_i; - - } - - } - - } - - } - - - pJS.fn.modes.grabParticle = function(p){ - - if(pJS.interactivity.events.onhover.enable && pJS.interactivity.status == 'mousemove'){ - - var dx_mouse = p.x - pJS.interactivity.mouse.pos_x, - dy_mouse = p.y - pJS.interactivity.mouse.pos_y, - dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse); - - /* draw a line between the cursor and the particle if the distance between them is under the config distance */ - if(dist_mouse <= pJS.interactivity.modes.grab.distance){ - - var opacity_line = pJS.interactivity.modes.grab.line_linked.opacity - (dist_mouse / (1/pJS.interactivity.modes.grab.line_linked.opacity)) / pJS.interactivity.modes.grab.distance; - - if(opacity_line > 0){ - - /* style */ - var color_line = pJS.particles.line_linked.color_rgb_line; - pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+opacity_line+')'; - pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width; - //pJS.canvas.ctx.lineCap = 'round'; /* performance issue */ - - /* path */ - pJS.canvas.ctx.beginPath(); - pJS.canvas.ctx.moveTo(p.x, p.y); - pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y); - pJS.canvas.ctx.stroke(); - pJS.canvas.ctx.closePath(); - - } - - } - - } - - }; - - - - /* ---------- pJS functions - vendors ------------ */ - - pJS.fn.vendors.eventsListeners = function(){ - - /* events target element */ - if(pJS.interactivity.detect_on == 'window'){ - pJS.interactivity.el = window; - }else{ - pJS.interactivity.el = pJS.canvas.el; - } - - - /* detect mouse pos - on hover / click event */ - if(pJS.interactivity.events.onhover.enable || pJS.interactivity.events.onclick.enable){ - - /* el on mousemove */ - pJS.interactivity.el.addEventListener('mousemove', function(e){ - - if(pJS.interactivity.el == window){ - var pos_x = e.clientX, - pos_y = e.clientY; - } - else{ - var pos_x = e.offsetX || e.clientX, - pos_y = e.offsetY || e.clientY; - } - - pJS.interactivity.mouse.pos_x = pos_x; - pJS.interactivity.mouse.pos_y = pos_y; - - if(pJS.tmp.retina){ - pJS.interactivity.mouse.pos_x *= pJS.canvas.pxratio; - pJS.interactivity.mouse.pos_y *= pJS.canvas.pxratio; - } - - pJS.interactivity.status = 'mousemove'; - - }); - - /* el on onmouseleave */ - pJS.interactivity.el.addEventListener('mouseleave', function(e){ - - pJS.interactivity.mouse.pos_x = null; - pJS.interactivity.mouse.pos_y = null; - pJS.interactivity.status = 'mouseleave'; - - }); - - } - - /* on click event */ - if(pJS.interactivity.events.onclick.enable){ - - pJS.interactivity.el.addEventListener('click', function(){ - - pJS.interactivity.mouse.click_pos_x = pJS.interactivity.mouse.pos_x; - pJS.interactivity.mouse.click_pos_y = pJS.interactivity.mouse.pos_y; - pJS.interactivity.mouse.click_time = new Date().getTime(); - - if(pJS.interactivity.events.onclick.enable){ - - switch(pJS.interactivity.events.onclick.mode){ - - case 'push': - if(pJS.particles.move.enable){ - pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); - }else{ - if(pJS.interactivity.modes.push.particles_nb == 1){ - pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb, pJS.interactivity.mouse); - } - else if(pJS.interactivity.modes.push.particles_nb > 1){ - pJS.fn.modes.pushParticles(pJS.interactivity.modes.push.particles_nb); - } - } - break; - - case 'remove': - pJS.fn.modes.removeParticles(pJS.interactivity.modes.remove.particles_nb); - break; - - case 'bubble': - pJS.tmp.bubble_clicking = true; - break; - - case 'repulse': - pJS.tmp.repulse_clicking = true; - pJS.tmp.repulse_count = 0; - pJS.tmp.repulse_finish = false; - setTimeout(function(){ - pJS.tmp.repulse_clicking = false; - }, pJS.interactivity.modes.repulse.duration*1000) - break; - - } - - } - - }); - - } - - - }; - - pJS.fn.vendors.densityAutoParticles = function(){ - - if(pJS.particles.number.density.enable){ - - /* calc area */ - var area = pJS.canvas.el.width * pJS.canvas.el.height / 1000; - if(pJS.tmp.retina){ - area = area/(pJS.canvas.pxratio*2); - } - - /* calc number of particles based on density area */ - var nb_particles = area * pJS.particles.number.value / pJS.particles.number.density.value_area; - - /* add or remove X particles */ - var missing_particles = pJS.particles.array.length - nb_particles; - if(missing_particles < 0) pJS.fn.modes.pushParticles(Math.abs(missing_particles)); - else pJS.fn.modes.removeParticles(missing_particles); - - } - - }; - - - pJS.fn.vendors.checkOverlap = function(p1, position){ - for(var i = 0; i < pJS.particles.array.length; i++){ - var p2 = pJS.particles.array[i]; - - var dx = p1.x - p2.x, - dy = p1.y - p2.y, - dist = Math.sqrt(dx*dx + dy*dy); - - if(dist <= p1.radius + p2.radius){ - p1.x = position ? position.x : Math.random() * pJS.canvas.w; - p1.y = position ? position.y : Math.random() * pJS.canvas.h; - pJS.fn.vendors.checkOverlap(p1); - } - } - }; - - - pJS.fn.vendors.createSvgImg = function(p){ - - /* set color to svg element */ - var svgXml = pJS.tmp.source_svg, - rgbHex = /#([0-9A-F]{3,6})/gi, - coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) { - if(p.color.rgb){ - var color_value = 'rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')'; - }else{ - var color_value = 'hsla('+p.color.hsl.h+','+p.color.hsl.s+'%,'+p.color.hsl.l+'%,'+p.opacity+')'; - } - return color_value; - }); - - /* prepare to create img with colored svg */ - var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}), - DOMURL = window.URL || window.webkitURL || window, - url = DOMURL.createObjectURL(svg); - - /* create particle img obj */ - var img = new Image(); - img.addEventListener('load', function(){ - p.img.obj = img; - p.img.loaded = true; - DOMURL.revokeObjectURL(url); - pJS.tmp.count_svg++; - }); - img.src = url; - - }; - - - pJS.fn.vendors.destroypJS = function(){ - cancelAnimationFrame(pJS.fn.drawAnimFrame); - canvas_el.remove(); - pJSDom = null; - }; - - - pJS.fn.vendors.drawShape = function(c, startX, startY, sideLength, sideCountNumerator, sideCountDenominator){ - - // By Programming Thomas - https://programmingthomas.wordpress.com/2013/04/03/n-sided-shapes/ - var sideCount = sideCountNumerator * sideCountDenominator; - var decimalSides = sideCountNumerator / sideCountDenominator; - var interiorAngleDegrees = (180 * (decimalSides - 2)) / decimalSides; - var interiorAngle = Math.PI - Math.PI * interiorAngleDegrees / 180; // convert to radians - c.save(); - c.beginPath(); - c.translate(startX, startY); - c.moveTo(0,0); - for (var i = 0; i < sideCount; i++) { - c.lineTo(sideLength,0); - c.translate(sideLength,0); - c.rotate(interiorAngle); - } - //c.stroke(); - c.fill(); - c.restore(); - - }; - - pJS.fn.vendors.exportImg = function(){ - window.open(pJS.canvas.el.toDataURL('image/png'), '_blank'); - }; - - - pJS.fn.vendors.loadImg = function(type){ - - pJS.tmp.img_error = undefined; - - if(pJS.particles.shape.image.src != ''){ - - if(type == 'svg'){ - - var xhr = new XMLHttpRequest(); - xhr.open('GET', pJS.particles.shape.image.src); - xhr.onreadystatechange = function (data) { - if(xhr.readyState == 4){ - if(xhr.status == 200){ - pJS.tmp.source_svg = data.currentTarget.response; - pJS.fn.vendors.checkBeforeDraw(); - }else{ - console.log('Error pJS - Image not found'); - pJS.tmp.img_error = true; - } - } - } - xhr.send(); - - }else{ - - var img = new Image(); - img.addEventListener('load', function(){ - pJS.tmp.img_obj = img; - pJS.fn.vendors.checkBeforeDraw(); - }); - img.src = pJS.particles.shape.image.src; - - } - - }else{ - console.log('Error pJS - No image.src'); - pJS.tmp.img_error = true; - } - - }; - - - pJS.fn.vendors.draw = function(){ - - if(pJS.particles.shape.type == 'image'){ - - if(pJS.tmp.img_type == 'svg'){ - - if(pJS.tmp.count_svg >= pJS.particles.number.value){ - pJS.fn.particlesDraw(); - if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); - else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); - }else{ - //console.log('still loading...'); - if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); - } - - }else{ - - if(pJS.tmp.img_obj != undefined){ - pJS.fn.particlesDraw(); - if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); - else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); - }else{ - if(!pJS.tmp.img_error) pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); - } - - } - - }else{ - pJS.fn.particlesDraw(); - if(!pJS.particles.move.enable) cancelRequestAnimFrame(pJS.fn.drawAnimFrame); - else pJS.fn.drawAnimFrame = requestAnimFrame(pJS.fn.vendors.draw); - } - - }; - - - pJS.fn.vendors.checkBeforeDraw = function(){ - - // if shape is image - if(pJS.particles.shape.type == 'image'){ - - if(pJS.tmp.img_type == 'svg' && pJS.tmp.source_svg == undefined){ - pJS.tmp.checkAnimFrame = requestAnimFrame(check); - }else{ - //console.log('images loaded! cancel check'); - cancelRequestAnimFrame(pJS.tmp.checkAnimFrame); - if(!pJS.tmp.img_error){ - pJS.fn.vendors.init(); - pJS.fn.vendors.draw(); - } - - } - - }else{ - pJS.fn.vendors.init(); - pJS.fn.vendors.draw(); - } - - }; - - - pJS.fn.vendors.init = function(){ - - /* init canvas + particles */ - pJS.fn.retinaInit(); - pJS.fn.canvasInit(); - pJS.fn.canvasSize(); - pJS.fn.canvasPaint(); - pJS.fn.particlesCreate(); - pJS.fn.vendors.densityAutoParticles(); - - /* particles.line_linked - convert hex colors to rgb */ - pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color); - - }; - - - pJS.fn.vendors.start = function(){ - - if(isInArray('image', pJS.particles.shape.type)){ - pJS.tmp.img_type = pJS.particles.shape.image.src.substr(pJS.particles.shape.image.src.length - 3); - pJS.fn.vendors.loadImg(pJS.tmp.img_type); - }else{ - pJS.fn.vendors.checkBeforeDraw(); - } - - }; - - - - - /* ---------- pJS - start ------------ */ - - - pJS.fn.vendors.eventsListeners(); - - pJS.fn.vendors.start(); - - - -}; - -/* ---------- global functions - vendors ------------ */ - -Object.deepExtend = function deepExtendFunction(destination, source) { - for (var property in source) { - if (source[property] && source[property].constructor && - source[property].constructor === Object) { - destination[property] = destination[property] || {}; - deepExtendFunction(destination[property], source[property]); - } else { - destination[property] = source[property]; - } - } - return destination; -}; - -window.requestAnimFrame = (function(){ - return window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - function(callback){ - window.setTimeout(callback, 1000 / 60); - }; -})(); - -window.cancelRequestAnimFrame = ( function() { - return window.cancelAnimationFrame || - window.webkitCancelRequestAnimationFrame || - window.mozCancelRequestAnimationFrame || - window.oCancelRequestAnimationFrame || - window.msCancelRequestAnimationFrame || - clearTimeout -} )(); - -function hexToRgb(hex){ - // By Tim Down - http://stackoverflow.com/a/5624139/3493650 - // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") - var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - hex = hex.replace(shorthandRegex, function(m, r, g, b) { - return r + r + g + g + b + b; - }); - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result ? { - r: parseInt(result[1], 16), - g: parseInt(result[2], 16), - b: parseInt(result[3], 16) - } : null; -}; - -function clamp(number, min, max) { - return Math.min(Math.max(number, min), max); -}; - -function isInArray(value, array) { - return array.indexOf(value) > -1; -} - - -/* ---------- particles.js functions - start ------------ */ - -window.pJSDom = []; - -window.particlesJS = function(tag_id, params){ - - //console.log(params); - - /* no string id? so it's object params, and set the id with default id */ - if(typeof(tag_id) != 'string'){ - params = tag_id; - tag_id = 'particles-js'; - } - - /* no id? set the id to default id */ - if(!tag_id){ - tag_id = 'particles-js'; - } - - /* pJS elements */ - var pJS_tag = document.getElementById(tag_id), - pJS_canvas_class = 'particles-js-canvas-el', - exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class); - - /* remove canvas if exists into the pJS target tag */ - if(exist_canvas.length){ - while(exist_canvas.length > 0){ - pJS_tag.removeChild(exist_canvas[0]); - } - } - - /* create canvas element */ - var canvas_el = document.createElement('canvas'); - canvas_el.className = pJS_canvas_class; - - /* set size canvas */ - canvas_el.style.width = "100%"; - canvas_el.style.height = "100%"; - - /* append canvas */ - var canvas = document.getElementById(tag_id).appendChild(canvas_el); - - /* launch particle.js */ - if(canvas != null){ - pJSDom.push(new pJS(tag_id, params)); - } - -}; - -window.particlesJS.load = function(tag_id, path_config_json, callback){ - - /* load json config */ - var xhr = new XMLHttpRequest(); - xhr.open('GET', path_config_json); - xhr.onreadystatechange = function (data) { - if(xhr.readyState == 4){ - if(xhr.status == 200){ - var params = JSON.parse(data.currentTarget.response); - window.particlesJS(tag_id, params); - if(callback) callback(); - }else{ - console.log('Error pJS - XMLHttpRequest status: '+xhr.status); - console.log('Error pJS - File config not found'); - } - } - }; - xhr.send(); - -}; diff --git a/_src/scripts/vendor/particles.min.js b/_src/scripts/vendor/particles.min.js deleted file mode 100644 index e69de29bb..000000000 From e859373cfbb6ef415f3409f290427ad0ae2db5f4 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 22 Feb 2024 19:56:45 +0200 Subject: [PATCH 0121/1296] box-carousel css fixes --- _src/blocks/box-carousel/box-carousel.css | 27 +++++++++++++++++------ _src/blocks/box-carousel/box-carousel.js | 4 ++-- 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 07265c8ba..85e2e0087 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -29,9 +29,9 @@ } .box-carousel-container .carousel-item { - width: 290px; /* Square dimensions */ - height: 290px; /* Square dimensions */ - margin: 10px; /* Space between items */ + width: 220px; + height: 220px; + margin: 10px; box-sizing: border-box; padding: 20px; border: 3px solid #006dff; @@ -46,21 +46,23 @@ .box-carousel-container .carousel-item.active { background: #006dff; - box-shadow: 0px 0px 20px 0px #006dff; - color: black; + box-shadow: 0 3px 24px 0 #006dff; } .box-carousel-container .carousel-item .title { - font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + font: normal normal bold 32px/82px IBM Plex Sans; + letter-spacing: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; - margin: 15px 0; + margin: 8px 0; } .box-carousel-container .carousel-item .subtitle { + font: normal normal normal 12px/15px IBM Plex Sans; + letter-spacing: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; @@ -89,6 +91,12 @@ fill: #a5a5a5; } +.box-carousel-container .carousel-item .icon { + width: 45px; + height: 45px; + margin: 0; +} + @media screen and (min-width: 768px) { .box-carousel-container .carousel-header { justify-content: flex-start; @@ -98,4 +106,9 @@ .box-carousel-container .carousel-header .left-arrow { margin-left: auto; } + + .box-carousel-container .carousel-item { + width: 300px; + height: 300px; + } } diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js index a4dc8bfe6..6a8e5d1c7 100644 --- a/_src/blocks/box-carousel/box-carousel.js +++ b/_src/blocks/box-carousel/box-carousel.js @@ -59,7 +59,7 @@ export default async function decorate(block) { decorateIcons(block); - const carousel = block.querySelector('.marquee'); + const carousel = block.querySelector('.carousel'); function isFirstIndex() { return currentSlideIndex === 0; @@ -91,7 +91,7 @@ export default async function decorate(block) { } function updateActiveCard(slideIndex) { - block.querySelector('.marquee-item.active').classList.remove('active'); + block.querySelector('.carousel-item.active').classList.remove('active'); block.querySelector(`.carousel-item:nth-child(${slideIndex + 1})`).classList.add('active'); } From 1c8e7e51e36f7017bf4c6f3ef839c5d5152bcb73 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 23 Feb 2024 00:15:37 +0200 Subject: [PATCH 0122/1296] finishes --- _src/blocks/dual-teaser/dual-teaser.css | 150 +++++++++++++++++++----- _src/blocks/dual-teaser/dual-teaser.js | 71 +++-------- _src/blocks/marquee/marquee.css | 4 - 3 files changed, 138 insertions(+), 87 deletions(-) diff --git a/_src/blocks/dual-teaser/dual-teaser.css b/_src/blocks/dual-teaser/dual-teaser.css index 37909935a..3b32200ef 100644 --- a/_src/blocks/dual-teaser/dual-teaser.css +++ b/_src/blocks/dual-teaser/dual-teaser.css @@ -1,48 +1,136 @@ -.dual-teaser-container { - background-color: black; +.dual-teaser-container.section { + background: transparent linear-gradient(180deg, #006EFF 0%, #000000 100%) 0 0 no-repeat padding-box; + overflow: unset; + padding-top: 0; +} + +.dual-teaser-container.section::before { + content: ''; + display: block; + width: 100%; + height: 200px; + background: var(--dark2); + position: relative; + top: -1px; +} + +.dual-teaser-container .col-container { + width: 100%; +} + +.dual-teaser-container .col-container .card { + width: 100%; + height: 350px; + position: relative; + display: flex; + flex-direction: column; + justify-content: flex-end; + border-radius: 10px; + margin-bottom: 20px; + overflow: hidden; +} + +.dual-teaser-container .default-content-wrapper { + margin-top: -120px; +} + +.dual-teaser-container .img-container { + width: 100%; + height: 100%; + position: absolute; + overflow: hidden; + border-radius: inherit; +} + +.dual-teaser-container .col-container .box { + height: 190px; + padding: 10px; + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); + display: flex; + flex-direction: column; +} + +.dual-teaser-container .col-container .box h2, +.dual-teaser-container .col-container .box h3, +.dual-teaser-container .col-container .box h4, +.dual-teaser-container .col-container .box h5 { + font: normal normal normal 20px/27px IBM Plex Sans; + letter-spacing: 0; +} + +.dual-teaser-container .col-container .box p, +.dual-teaser-container .col-container .box div { + font: normal normal normal 14px/18px IBM Plex Sans; + letter-spacing: 0; + margin: 0; +} + +.dual-teaser-container .col-container .box .button-container { + margin-top: auto; +} + +.dual-teaser-container .col-container .box a { + width: 100%; + justify-content: center; +} + +.dual-teaser-container .col-container .offer { + margin: 0 0 20px 5px; +} + +.dual-teaser-container .col-container .offer p { + margin: 0; } @media (min-width: 768px) { - .section.dual-teaser-container { - padding-top: 0; + .dual-teaser-container .default-content-wrapper { + width: 100%; + display: flex; + margin-top: -180px; } - .dual-teaser-container .container { - display: flex; - height: 700px; - position: relative; + .dual-teaser-container .col-container:first-child { + margin-top: unset; } - .dual-teaser-container .col { - flex: 0 0 auto; - width: 50%; - display: flex; - flex-direction: column; - justify-content: flex-end; + .dual-teaser-container .col-container:first-child .card { + border-radius: 20px 0 0 20px; } - .dual-teaser-container .col-container { - position: absolute; - width: 100%; - top: 0; - display: flex; + .dual-teaser-container .col-container:last-child .card { + border-radius: 0 20px 20px 0; } - .dual-teaser-container .col-container::before { - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - background: linear-gradient(180deg,#0000 35.21%,#000000b3 67.19%,#000); + .dual-teaser-container .col-container .card { + height: 600px; } - .dual-teaser-container .img-container { - width: 100%; - height: 700px; + .dual-teaser-container .col-container .box { + padding: 33px 7% 33px 33px; + height: 245px; + } + + .dual-teaser-container .col-container .box a { + width: unset; + } + + .dual-teaser-container .col-container .box p, + .dual-teaser-container .col-container .box div { + font: normal normal normal 18px/23px IBM Plex Sans; + letter-spacing: 0; + } + + .dual-teaser-container .col-container .box h2, + .dual-teaser-container .col-container .box h3, + .dual-teaser-container .col-container .box h4, + .dual-teaser-container .col-container .box h5 { + font: normal normal normal 40px/52px IBM Plex Sans; + margin-bottom: 16px; } - .dual-teaser-container .centered-wrapper { - gap: 30px; + .dual-teaser-container .col-container .offer p { + font: normal normal normal 18px/23px IBM Plex Sans; + margin-left: 30px; } } diff --git a/_src/blocks/dual-teaser/dual-teaser.js b/_src/blocks/dual-teaser/dual-teaser.js index 5b24597bb..030ec36c1 100644 --- a/_src/blocks/dual-teaser/dual-teaser.js +++ b/_src/blocks/dual-teaser/dual-teaser.js @@ -1,63 +1,30 @@ -import { isView } from '../../scripts/scripts.js'; - export default async function decorate(block) { const cols = [...block.children[0].children]; - let isMobileView = isView('mobile'); - function render() { - block.innerHTML = ` -
-
- ${cols.map((col) => { + block.innerHTML = ` +
+ ${cols.map((col) => { const pictureEl = col.querySelector('picture'); const richTextEls = [...col.children]; richTextEls.shift(); + const [titleEl, subtitleEl, buttonEl, offerEl] = richTextEls; return ` -
-
- ${pictureEl.outerHTML} -
- - ${isMobileView ? `
- ${richTextEls.map((item) => item.outerHTML).join('')} -
` : ''} - -
- `; - }).join('')} +
+
+
+ ${pictureEl.outerHTML} +
+
+ ${titleEl.outerHTML} +
${subtitleEl.innerHTML}
+ ${buttonEl.outerHTML} +
+
+ +
${offerEl.outerHTML}
- - ${!isMobileView ? `
- ${cols.map((col) => { - const richTextEls = [...col.children]; - richTextEls.shift(); - - return ` -
- ${richTextEls.map((item) => item.outerHTML).join('')} -
- `; - }).join('')} -
` : ''} -
+ `; + }).join('')} `; - - const resizeObserver = new ResizeObserver(() => { - const newViewportView = isView('mobile'); - - const viewHasChanged = isMobileView !== newViewportView; - - if (viewHasChanged) { - isMobileView = newViewportView; - - render(); - } - }); - - resizeObserver.observe(block); - } - - render(); } - diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index 7926bc4af..70b8834ed 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -1,7 +1,3 @@ -.marquee-container .marquee { - /* overflow: hidden; */ -} - .marquee-container .marquee-content { display: flex; animation: scrolling 10s linear infinite; From bc1dd4b2462cf5990a60166030074da5fa199f3c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 23 Feb 2024 02:03:33 +0200 Subject: [PATCH 0123/1296] finishes --- _src/blocks/marquee/marquee.css | 9 +- _src/blocks/marquee/marquee.js | 37 +++-- _src/scripts/template-factories/trusted.css | 1 + _src/scripts/template-factories/trusted.js | 144 +++++++++++++------- 4 files changed, 124 insertions(+), 67 deletions(-) diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index 70b8834ed..bd3ded829 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -5,7 +5,7 @@ } .marquee-container .marquee-item { - flex: 0 0 200px; + flex: 0 0 100px; margin: 0 20px; } @@ -19,3 +19,10 @@ from { transform: translateX(0); } to { transform: translateX(calc(var(--translateX) * -1)); } } + +@media screen and (min-width: 768px) { + .marquee-container .marquee-item { + flex: 0 0 200px; + margin: 0 20px; + } +} diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index 52d1623c4..34ecbe260 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -1,39 +1,51 @@ import { debounce } from '../../scripts/utils/utils.js'; +import { isView } from '../../scripts/scripts.js'; export default async function decorate(block) { - const SLIDE_SIZE = 240; + const SLIDE_SIZE_ENUM = { + MOBILE: 100 + 20 * 2, + DESKTOP: 200 + 20 * 2, + }; + + const SPEED_ANIMATION = 0.8; + const initialSlideList = [...block.children]; + + function getCurrentViewportSlideSize() { + return isView('mobile') ? SLIDE_SIZE_ENUM.MOBILE : SLIDE_SIZE_ENUM.DESKTOP; + } function calculateSlideListBasedOnScreenWidth() { const result = { duplicatedSlides: null, slidesToShift: null, }; + const currentViewportSlideSize = getCurrentViewportSlideSize(); const { clientWidth } = block; - const spaceToFillMore = clientWidth - initialSlideList.length * SLIDE_SIZE; // ok + const spaceToFillMore = clientWidth - initialSlideList.length * currentViewportSlideSize; // ok if (spaceToFillMore < 0) { result.duplicatedSlides = initialSlideList.concat(initialSlideList); - result.slidesToShift = initialSlideList; + result.slidesToShift = initialSlideList.length; return result; } // fill space - const fullWidthSlidesToFill = parseInt(spaceToFillMore / SLIDE_SIZE, 10); - const hasPartialSlideToFill = clientWidth % SLIDE_SIZE !== 0; + const fullWidthSlidesToFill = parseInt(spaceToFillMore / currentViewportSlideSize, 10); + const hasPartialSlideToFill = clientWidth % currentViewportSlideSize !== 0; result.duplicatedSlides = Array(fullWidthSlidesToFill) .fill(initialSlideList).flatMap((slide) => slide); if (!hasPartialSlideToFill) { result.duplicatedSlides = result.duplicatedSlides.concat(result.duplicatedSlides); - result.slidesToShift = result.duplicatedSlides; + result.slidesToShift = result.duplicatedSlides.length; return result; } // need to apply the patch here result.duplicatedSlides = result.duplicatedSlides.concat(initialSlideList); - result.slidesToShift = result.duplicatedSlides; + result.slidesToShift = result.duplicatedSlides.length; result.duplicatedSlides = result.duplicatedSlides.concat(result.duplicatedSlides); return result; @@ -41,18 +53,17 @@ export default async function decorate(block) { function updateTranslation(slidesToShift) { const content = block.querySelector('.marquee-content'); - content.style.setProperty('--translateX', `${SLIDE_SIZE * slidesToShift.length}px`); + content.style.animationDuration = `${slidesToShift / SPEED_ANIMATION}s`; + content.style.setProperty('--translateX', `${getCurrentViewportSlideSize() * slidesToShift}px`); } function render() { const { duplicatedSlides, slidesToShift } = calculateSlideListBasedOnScreenWidth(); block.innerHTML = ` -
-
- ${duplicatedSlides.map((slide) => `
${slide.querySelector('picture').outerHTML}
`).join('')} -
-
+
+ ${duplicatedSlides.map((slide) => `
${slide.querySelector('picture').outerHTML}
`).join('')} +
`; updateTranslation(slidesToShift); diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 3878dbe0a..19118f5d0 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -16,6 +16,7 @@ color: var(--white); font-family: "IBM Plex Sans", sans-serif; position: relative; + background: var(--blue); } .trusted div[data-align="right"] { diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index ad6be5730..e86fd7893 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -1,54 +1,92 @@ -import { tsParticles } from 'https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm'; -import { loadAll } from 'https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm'; - -const particleIdSelector = 'particles-js'; - -const particleDiv = document.createElement('div'); -particleDiv.setAttribute('id', particleIdSelector); - -document.body.prepend(particleDiv); - -async function loadParticles(options) { - await loadAll(tsParticles); - - await tsParticles.load({ id: particleIdSelector, options }); -} - -const configs = { - particles: { - number: { - value: 100, - }, - color: { - value: '#ffffff', - }, - links: { - enable: true, - distance: 200, - }, - shape: { - type: 'circle', - }, - opacity: { - value: 1, - }, - size: { - value: { - min: 4, - max: 6, +import { isView } from '../scripts.js'; +import { debounce } from '../utils/utils.js'; + +(async () => { + let tsParticles; + let loadAll; + async function init() { + if (isView('mobile')) { + return; + } + + tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; + loadAll = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm')).loadAll; + + const particleIdSelector = 'particles-js'; + + const particleDiv = document.createElement('div'); + particleDiv.setAttribute('id', particleIdSelector); + + document.body.prepend(particleDiv); + + async function loadParticles(options) { + await loadAll(tsParticles); + + await tsParticles.load({ id: particleIdSelector, options }); + } + + const configs = { + particles: { + number: { + value: 100, + }, + color: { + value: '#ffffff', + }, + links: { + enable: true, + distance: 200, + }, + shape: { + type: 'circle', + }, + opacity: { + value: 1, + }, + size: { + value: { + min: 4, + max: 6, + }, + }, + move: { + enable: true, + speed: 2, + }, + }, + background: { + color: '#016DFF', }, - }, - move: { - enable: true, - speed: 2, - }, - }, - background: { - color: '#016DFF', - }, - poisson: { - enable: true, - }, -}; - -loadParticles(configs); + poisson: { + enable: true, + }, + }; + + loadParticles(configs); + } + + async function checkForMobile() { + const isMobileView = isView('mobile'); + if (isMobileView && (!tsParticles && !loadAll)) { + return; + } + + if (isMobileView && tsParticles) { + const particles = tsParticles.domItem(0); + particles.pause(); + return; + } + + if (!isMobileView && (!tsParticles && !loadAll)) { + await init(); + return; + } + + const particles = tsParticles.domItem(0); + particles.play(); + } + + await init(); + + window.addEventListener('resize', debounce(checkForMobile, 250)); +})(); From c3bd9011c3a8f0cb93f9fcf5699d5a702e04d54a Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 23 Feb 2024 02:21:08 +0200 Subject: [PATCH 0124/1296] finishes --- _src/scripts/template-factories/trusted.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index e86fd7893..dc87e5b3a 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -1,7 +1,8 @@ import { isView } from '../scripts.js'; import { debounce } from '../utils/utils.js'; -(async () => { +// init logic to avoid big layout shifts +setTimeout(async () => { let tsParticles; let loadAll; async function init() { @@ -89,4 +90,4 @@ import { debounce } from '../utils/utils.js'; await init(); window.addEventListener('resize', debounce(checkForMobile, 250)); -})(); +}, 3000); From a512ff92dd28065fecc05a9d6672188b653f0104 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Fri, 23 Feb 2024 09:55:20 +0200 Subject: [PATCH 0125/1296] Responsive udpates --- _src/icons/quot.png | Bin 0 -> 1218 bytes _src/icons/quote_bottom.png | Bin 1935 -> 0 bytes _src/icons/quote_top.png | Bin 1905 -> 0 bytes _src/icons/quotes-top.png | Bin 8274 -> 0 bytes _src/scripts/template-factories/trusted.css | 144 +++++++++++++------- 5 files changed, 96 insertions(+), 48 deletions(-) create mode 100644 _src/icons/quot.png delete mode 100644 _src/icons/quote_bottom.png delete mode 100644 _src/icons/quote_top.png delete mode 100644 _src/icons/quotes-top.png diff --git a/_src/icons/quot.png b/_src/icons/quot.png new file mode 100644 index 0000000000000000000000000000000000000000..c5d74ede47933f8e919fb59eb81d3259e0a986c9 GIT binary patch literal 1218 zcmeAS@N?(olHy`uVBq!ia0vp^DL`Dn!3HE>EWLUYNU;<Eakt z5%+eMZH7po!146t0LKl657^DNIR!;T-r!W~P%zU{inyV1(|h66h!qLTH5O&+uyi-H zawM@>S08k8%vsYC62-yz@$siQ=|b-&SsUknFZ*xJ{l8iD=$`GLpMBq5x&6D|%nwhy z9G+#F#`FYqY&K_X4d^gtIydbw-$H?OmN~lZvQCQUI4q+1tXrJs2o`LUDdT9hP=1hO z`9^@N(Cxs@q8o}Lk9rz5Ki%N0aYT|a{d8hG#DHM`_889FPqxcURkd93^RTX$joB6YoWg)zw?XB++uIa%m2;r*@D&%Zo=I=%lMxc{#HiNkNAji-fgvRa=X z;34-+h#>vj|O{jmF2G zPKcJ=xI*m8bz!0UX@4~1z5iYkw>RFk>Hbr*t-s!7dDhx0R$8nynm6?o-^ABdPSuN_ z#GKhO?aFn1m47_dTMg#^$hdtqI3eFZ_%-)QXYE(7#Xm)~&e7L#N%7nLIH$AnhGu1k zYwcgBxYZMsTQzlG248J{llidn1t&!K-s%Y_56zjD;?-KCVZ(2$$iH^Q`go6;L!170 z=GvZE=VMYQGfBxDB&xnd*vTuFIr)_xhtAd&ij$*)I)~7giV+z!gO%XycVZRk&bRb94y6ELR_BdtdgEoP+ZTrEAg!bYxc(1z(R?^)78&q Iol`;+0J*Xfe*gdg literal 0 HcmV?d00001 diff --git a/_src/icons/quote_bottom.png b/_src/icons/quote_bottom.png deleted file mode 100644 index 253ab209fe87a736577539550208c6740f9a0117..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1935 zcmaJ?c~BEq9F9c+`4dDr~RfN61mXomWOq<+dY;i#Ov8V`6LNyWW`JeYDU#c5GtKQGi5afjEww$C!YW-GTC^R8cgc zHPPDbR8+{b%H_NHwvKbQiO8|jhb_)bB*d4C^`sdcQlt$K2&~g>&dx0qc`Vo-u{X>j zAbxZBGr-DLR;CryD_rm;4QskNZ}xfABib7`2kX0sd-rL&vq)1WtYtg%n8Fh_6j&OurpSNEwZRTa0H+)}t^}v$rrFuct)z;Agn`3#e&7e!hRg2fx z-8XhhiEUtSJ2&pS@eHG{X`p5FFLTK0*!n1cv&rq9Fxfqju-V&X)?z`<4D(=TcvfXr zF|qKE^=9~WzI4FeVymk!KWN*+Yt?&dU0d*_360rh7Ac#GY(gvBs_zsYJVbbWdP_%m z$`gmLOPtRa*pb)hMcdc5Ts%5awQNPsrGo1@di%{`X}Uda)r6%4sc&PU?5*`s2qw7LA^6}F^uq#1HdZhU#M!iy1}bfVwA5(FR|g^o&2urT3V^g-TXV=cBM1@ zwiOA3%DaO*iVkyx=}%7A?d&lgzRbEe{9=oyew|_1;BZBA;Vh{WZ~XvjU6`%@_NU1% zmbci^I%JSC;l~Zx)iLRqjk{YsA!}3D{$I;2=e786n_zg>AGc$l6aEd5TH|c*5`NflVm(mEf75aXkcIBb`#}A*Zy4w`|d`&JKXw`oC8p%ELl;h)f4$F9|ouCLUuWy{F5BF`qd#1QJq2Cn>QKwvgr4Kyt;%9&q-OsL4_|5Eqg5!C+{PL z!LX6GzrNAsj>~k1^ZJFBjyoQVNFw&uKhfXMIFOxaZ@b$iIQz^m4kt>l)#lHbEw|Cl zh_2gHnw~rJ-a)GkQ+~!5yt}Era6C4fMPT(^7;#O@8*DqUB6XV3+`l<4KlgIh)4IdZ z+|1IdoF?RPfBH(-xa;j2W3|JAnplf&1Dm|nYIN-vQ*hJztZLJogr;9EE|f3e9S>ZQ F^AG2Z5xD>W diff --git a/_src/icons/quote_top.png b/_src/icons/quote_top.png deleted file mode 100644 index c71e6bafc2e65723542229b9859b0a8f5798bb65..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1905 zcmaJ?X;c$u6pbhZ5h_Ph6kHgC2rfw`n6|n3E$80*?t9<+&g3R6 zj`8sd@FEZhK5?-^2|g~v-w00+{2Sn#y#pWoF_8>ghAJ_GT!#?&3UnO;#Hr=Uhy;-< z(l<6C5d^~MSt_XvlZh8WFsi1?T^OoSt;N~67|*Dc!>I@ctV5Dj8ZNn~`XU)nDY)cB zwipy^1xSi2)}%w0nHEc7Q!30+ka-J$2qT0Gs1ZyK7}XmzddSEnzt)BDxoew723|w3 zR4)0ADVaC{5TH5);85ul7z7!>dmO5g$z~x+_&snQzyKLc8l6r9ITShr0@)Co3A}yC zctD*(2}y*}Z^Pj$E;$9mv=EJEFc_!?CKc5s)94%yhXyie39Q1s~y(8uLwJ7LP1MbgDE&5v@bj!0VhL)yQ6iBkH~7Dn|4o z6phHG;bv&All|984{hP?FPI3HefEdv|e7Dv3|3 zy+7UZS?J8N8?2UDo_>zw74M8Yc|vHPl~kIwd$+7?=fs(ZSASme{`^r{tie%~ zo60<=wik;lZ+MPkU+bTqKJL+h)oIG)-)cVE+$(cytNHnYEu9%&{bfsvV#}4zx!*T; zlxDV{2~%5|+hjfJ0QtsF8#}Z=Qn@|+Ixa){H=ELLlJDZ(<5P<6m_bHLjUli|% z_wKqn{t_@?y*_r#5#6UHGhR7}eBVN9rZfJ=&R4%@5_hhMh&V%NQtaoaW%+a!1V(Jd zCLf*`duVrL8fkLt6rPl@zfn+h%VRrX?Od?TVAhT~Mz1eyP_3|=gMV_%`o&PN$Spm` zbm>ep#;%MkePOp(u)?c$KpnE=GGcL(^Ik&oO24z2PH)G_LdZWqaB3^u zI>E*Y*2|wxpa1NrHNTlhWgMdwEexA;q_1wDhoQw@@!j6Pq`te!&KS{Ab!Np$8_8i2 zoHzN6|9%b4T4E!05SIi2pMN`l{qdlxNrQFyZKt}gF#5Nyoi+zNI+;h3Y(HiMbw?iROEx8MeE+^Nj%y-5sPv`vNHZzGf<+F*`sBGs}zw+RLThd3L&KkTi+ECd$h#euG;M+`Le)c@njppORo~VpFnn`UK6@ z)!vn>?R9OBHa-I$p3bfMefj8&lP`8zf1Kp@fLqspX?w=h?T(_72b1F;r|$jLHtmlF z%H2s9YBO2~d;QmPn{3l0XPuecwvM)(7vY@}=a-B_G#E5#MOP9EE_HXz-7Il75LAN~ b-Mk3}3p|ULZ_s4gyb>C;7v#)FKeRlkHho~sYJi>p9kAZ>lNKRH#?QRXdd#&*>@4hV8 z5oC7@m6Mc?le)dRlPesJ#1KQ+n<4>nwr~ri8WN6hcj!k#F);3DS!w7v=_o2d%K^dgWMUgMLNL&Zniddju1B(@GrZNJNeHs2nhHK;$#g2{vDK#q6$F5 z9*qPDz5sKYadB}2_yu2>^YHN^&CU3^H~`#S+&myK7{n#W3Fd}y@j>`_0RKF|JBMh5 zIYdoT`X6_9I~dT?$q5Akfm~f(U%2wTut!^fz=DE;ATDkYH#g@Ug45C6&I#_uY3IoB zuLVh@qZ!%?L4fPpgJEpyT~Du_GZq1=yH-U;N8g!gcSlJ1%AmZ2$qtN1Pk(j!BSFU z0%F{Pl6(@p;Fnxd0)i6%a^>tCo#1w6$bY$3|HBpke{vxbXe8Xp9<5<-Z}V@lRV?kD z>>VxbQGd$H3(&T*L)g1I{;9%0fg;gXE=Ytl+TIrMR~jK!|K;A<`OddF+?>x8f#Bmb zh4Uad!C(ZO6OP~kb0TEr%P%4JQb0-o2)c^`VFoe#JL-R0OC9O(k7Q#dtl(^B1qaB$P0?0J8#q8iPF+e& zNfQeC(=m5yz~9o}6wv==>MzKDHQB$|yUzV1{%30LHvgGBq}|=Hq3@vNkRn?0W~%7-B{wETTT* zbeN2{jJsmdi2$yHXlz+ifneepZldLa%eJ{^nZl=mQ&o`bK^RSsaSC}dVqng_g2HV_0^RPPUBI8B{chH?v+s7Q09U@Hvmx&Sl=&j_NMI<#84G_M1T8>^g9J%bkrz7%N8{U&pBuM_9{6na=j%51e34i6*qqj^Y zmPFcg2$=RE0Pk_pe%|#r;{>142kv|Fubu@A(}du2>~JL}<31L-!khg< zmXIK>wygX~6KN}rp<>_0D%@<1s4hOll)irY zTs4&J3@h`dy|%sleoH`ZZ&<(Syn&iLHCuLx7m6Kb{B)guuCzE6=|5B^Em@X;qcu^3 z^_h9;aYt}1x@6FA+~^d#o8AF4=C{`37KBZles zPM~9h82TRVPS_{xpF4y%Vl_{~Bt4OLC+aT9y7&xG+!5YyxSZX?u1u;?BH%s(ck5n) zg{~v+F+_s+B=| zPVbje3x1CQ0XvxQ4c;O-QHqB9uV2h>rHRQd0jKao*pwIbRc(-< z#^5VgP11ee+|@QpCA_FN;^-rP@Iv3B=x8)ANG{qJ z78>m+CqL-HE|&|B57XOaL(9mgXOd_pL!sH=UY;b2^LhEo`g0`*i<`={h;|tMx>(Hq zy#CfF*GJe=3+#T6#ecW#=?10fz?{v`x&muHC6>_jyD2(NRzvQ+W|gFr3HTm!F@`hI z3_oC;JW~8U~duOj^$+vjl{Ud=mS56nI$4z5iVxsVFo9Wj`~lTYr3AmrZFWkxHb;ZRuzPdG#ou2!Nxsn8c=#y_;@Ixn0Zu!oS%IPAzi$G zq4&nkd^NsRg6*8ibntTu=a!XGTc{C{s0tKom1e&{qAf(bD_j9CS!I_rVnx?qKf$xt z2*YY1d&l#Es&ewQu#hSkhnZoss`jKN@r_W#(D0HQcQWA3+YPnvFcEN`aEiJXkQ!q}Fe@!dCw!Lmwxn8d_N8DPvdOm9%t zDP12+nosNuWrOg<`T3B33##rJ1qd{ho>`ga_A}5A%^1gG873u$`$o1XKG`w{juFYJ z$({2rT)BR8{OOvQakCzJQ+Qk?3VC9UT-mdXinaNLVME@66JYgi<(5pb@kL>zf9QLK zC9=g+6kcCuvPm#Y=#rV8jC@q_13OzDQX(>p4$No0sCBj5Y5qm^L}nu>TI;rn^NErZ z0aZ42_S8UuzmOGLoJ5=^tD?P0 zOlTV{eii?OonNuLxH*5+4jk)Rl&sDiM%tbSC9gz5#mMP7n1u5l;pm`7!agf=9=RSg=al1@OlquHPlmEZO2UAEWRwUsiU za*S!i4hDFO8b{ct>aT`%@uQm7IEqU-rhqak$nMzwz9uE_*qqkb60uYAvy0tF8Qu$| zg43y|2v^DQh^b~u1qFKXu9tmS0|w=b=wYBlSpfrdiNf-iZz^*@$VZ?dS7b>wmoT@p zW&pv8j@Wth%9hB)($13}YYRPKNyyUx3BQm3hr9-vO ze>(9|fP#x0;>aKNeiQKv(=ZO(JtBEfrjcuUX!di(RdjGK_odf49r2=Sz)LJaeo%`5 z#Pg*bN$5(9KjuBd+YPL@RDG0z58IpVT#pyKEy|4|mY&GmcUPixYUGw<{T1syI!4N? zrI91dCYTb?IxG%UA$hys8Mn85h*}WZ>v*>Nqur>8m_t39Z57u^{G7lszF?1;nBv}` z$vyoqzIFu;?b_99wOIqS40TxaR}TWqM_uC!4Ane%Js~*PWHkD> zGpKXdUyILd2tl?&ljwk={bWNL?~nLvO0U8S`f`?MA7i`iP0;<`eXhUpdtjJtL^K4{ z68b7U+mu)NyNQo{u8$;JrJ$ZQO%Kh^D~}@65FE6wv2i0ByEpT~a5MtXAmurMz->G+ z9ieQz*;u}kVT%_P=i1H9`?i*%rpmPEywNo2KDQ4O=vYFhtrEB@f;BL2i>-D{I&3m> zPJMP(&K6Je{q6mpM#Iou61i`}#`aI7q#uvOE&~17dhgYC4KfO`&*zwFa~Yup(D^Ew z);%_9l*F1YSl8~>5w%38^tx|NS?cg+MpvqknB(7TP`#TKu{bxGo*1B|iZ|Dx=*D)-ZLBr- zqX@DLM+^CVxf0jjoS3*dKTMyP2$}prJRo^W;(xfSV3p^U z{Ci+b<8?XF*#m8$io7!(Tg>M%)u4#ugo0%Op80x{slM%B6{&8h`FD@>-~u%1!gI8Q zr?mM!kq-SnJc7zAdCCb40M{Hn~GRtTI1#k4OaU+m-6T3 zEjEJh&`aO6mktBerHF9MKqtaCLI|DWzTSb2^o%+2jKK+`j~~;tI#}3Vai?ouxTqG@ zbD(A@)fgF^e?N}ndBbhgoQD5kVmUitD8JB^rah?ItaC~X&gNhiaj4zBvJF-G$Gcb6L z8lAJRA4q!47yJp@IweLCZ_%oFeM9zbQ$!p9?5Lp@aa8yvO)bAB8nZ#$B za~!rs$j9I~@MqiPrDLJ>qows8T)W*I=uAMr?H(Tu10yaMff*G6(q)Nxc0Oo)eoKPZiloMgxme=Pomn z77kU_qsjXYOw6F$aJud6pPacA+Wk0wnm@kj(t_PxCL3NfhW}z-RC|n)@lzsOL0uF7iDcJ{I7DhH!}`W6cTTX^BI#kt@xyGkzl(%&vn!0OV(qmy(xuXlfP& z^V@e!;#M5qvw0Kn4YTzfQG;BD6n&$F`qrv!hLd!tROnO1H^TP$;`l7eWoeL!-P5`e zl1#1b-a$2)nGZys6qqt(IXy%4A6D1BZhNA92*#sKu7sCA_|9eyxT1&h={{QeePNX! zbl>!Q;uAhy-ls*aw{GF1Z;SBa z8$@!nzfXH4kT_GV<=x~1&WW9&4eB=wb}fzP{g1qIed{s1Ov;|A_T<9LB)%y-I_<1l zUO}pi&oHsUp?xIW%dD#dL4I|YcB?n9n>@q_S>hHY`m`{H)Q$vXRvrqw@PJo~(#Vm8 z;SumN3@I`8;NzeJ{_U;ObfNP0p3RC==0ST2u*_Ug++=A{zq*bE&yMUBK2~!9`TdtY zO6u_?K++;MZer~C=((sPqVbbUv@ItU!S8JRqGg$%^pts9T?qFKyV|=B<-30YIcPe`D8J^m^vGf$Dgvc;z z{$JbtCRZ;$vjqg_1N_+)4JR7=4&Tcab4xs@rsJDcPgkO%WVm61HOjwta+G7z1^Cb! zT{wQeIA-;ENphd@8d^l-JV2m_t=_N7jNWCEnFWsNxU~l^cW$M>X*rB*RZZnLXlVSl zb^PN*mqG*QdosD5Y9h_^FTp0U)*}N~aS{IQ2y6N&IrCQUh!KLJv>6$B*B9;O*HleM ziM;8=-2-_Q8E^3yRTgT>_bOF1%aW@`M#c}STQhvla`eluF@(=Q5YA@LI`zr+6>N~s z>!W%T9-?$lBC3nO2eaASb!!dUYN@jdry2px1uCW{vNMx2&>xXW@k^IYsl8tUJCfUZ}D)NZ_&`8 zb$tN8b6#+*{L7H&=RTYqpx|?)cuT-Qp8W0oW>ceHzh@aPt`L2Z8TUinM*A!EpI%rW zD!o=-*n;{Adn>N#nPfdCHNv}*8NYpv$ZABWD9AGnk>eAddIT9qS=bPo;W%!4v%LNI)^8E^h`KTeqW@azhkjFS5wkIO_yCoTIH}Rf3M*}# zpLJUlhc-<_=1=9=fZ0nukLAkn&}trYM@L6W@@h7WUt#3w9wtoNT3R^%?WRocK{Hvb za)&N7LLM(?Tz4|XGbQhH$m>6gInp5K!FEHgDI%aeOM68-87Hq1xd+ZL2U%;6wdrto zmaLQ!bT!J<#~QUM63TxgW`85phPB=P4OQ5IzCmaKMX4RmojX*ahMY`%n&b)aLu=Md zQP*TCUFi@Nd?E*F%xs!+-41!W`1B1m)YR0Cb#|lr^Z~x0CWl|F-+pWoUZ5OigPB4*=G`>y(hxR`xQNf~vG8qZ2Tg4H(bck${#-kw2o(mGtPwQf+Yf5a`#HOfHHG-uda-DMEru96$QGdWZ0g$f*xLt#?^(vaO3z~eGe-Kwv(DV+OGpkyPtSljG8@8P6jy;H&wAyrF-5m9;z zD|cY#1uy2Alqm9iKP-_D_uG9sA?^mL#wu3R*0e>w6lQwGFMf2Yd0bw3RPCGz0(=tB zzsQiO`0yg;GgY%J_zl@1reBI%ZFMd!ouiX(k4k&2f2)dtls%Z0DISYtql9^@rl zDy%|Wh&jrDyHY4IpEahbrk^d11O-UMUJh&HWOhF|ly4=kZt7HbCYY$n@gNV+@TxD+ zo(Uy)mo+HJLf21w{?@O!A<-H7PVwRZ-8Z^tSWi<+hZxLlXltj4^)G?47ewaForfT{ zn9GNaEn_1kSb0kO)l@}#VagkjW5V`PMRWw?D@^Y7xAy2)sB?lFOLC!9 z=jgcMG?39*R@`(T3PdR*Ytb1RInc+(U?%yl{RFQ*ZCfzzy6Hp9_0Fb9kns(kvzlG4 z%G-KVRccRVtHxoQPw7-__E`C{7r?v~Tlz&JnO8FvDWej>BED`9E8oxAeNQ0_fY2>O zg3!o^dYU!fANgu>KX81fbP($2U{Pi@}t!8|k^~m)w zjiZj8Qj!r&Mlb%ppG_(IxtlYi_jf6i)&zUIsGb6sJl#%xwHMNH%)NA}499T$dpA<1 zeBrxcgKB-pq zzcqJ&R~fZ6%T|AB{s8`^s*n6D{r?(i*-~_F4zt`9-~!t}ENC2Q<$C6GTsWc5@N@eI z{qg{nu)gXds0spEgI^P%iO03-DVjd1K_Kz+0cQ2F*H@;orCZG>qrLnlKDe=lDmaYx zlbfPHWJguw-TWt3PEMwb*H@kvSeUqN4_KnztI-lABHwO6mxme$lYr~t=BQe@P#)YZ z*I%w_`22E1#h1B%O(82Sl6oYCA18Ni!}77`e7UOdat?8a-Imi<2;ORRd@pdUl7pwO zYB2Edq1CP#_DNqleW!HG%6um=t)pP-*V?+emAJ*q*r;q)Oa5WIM3=!++W1jn&ts*O zK0E8kli@Vk?#8eK^R%kEoo+6r$$%Y;AvZ9tEkM3~dfw|e%Y}c7*;2#2QiR(^diGwT zY0Du~h;Bkn^Q?8PWTtNfJh~v+-H| z3&YD}FdP1)ZW1#-0d4r}S8V|HZX#K&-G!#>==QFWh$IQ-1SX8*)D^>XhV&$$)<{&a zWqqb?o&(u>3G~f#niJBea#7k7@PVpXi6=B4ly~x@DBZ6@gO?)bD4DmlJOdes&7n#6 zFKdAx`ZvNeF4ERIalZ*8CJZxX)o7n+WK=N7$}r@ESw;!JXU|Rx`FTPK6b^jpR{Awh zr_xS!6C~&~XO#JsQy(!9%;X%p-v_2u5bxJ3g}nRBUA=&Jt`Km&_$+(-L9H#O7iNF< zrzUDHTUlG3gyQiFNxBL|^a;wYj-Dyg(4B(fKBJ~>kpa}ar3*k(1}F&Wd;s~ncb;Q3 zYBBv?2*zI#=h^{+GCYWgyVoT_@yz&x0^n?_D+QWx-or;$CZzR#&M%;5>Xj;;?crH< z6RYxUbPJ6x$vE@eNA3?PEZrPr+J)bquBv_MPPUOdK{cjMKY#PftF1BJN7Kj7 zzl>sHrDNaa div > h2 { + color: var(--black); +} + /* ---- hero banner ---- */ .trusted main .hero::after { display: none; } -.trusted main .hero a.button.primary { - min-width: auto; - padding: 5px 10px 5px 25px; -} - .trusted main .hero h1, .trusted main .hero h2, .trusted main .hero p { color: var(--white); } @@ -320,34 +329,16 @@ main .section.link-right a { margin: 0em 2em; } -@media (min-width: 1600px) { - .trusted main .hero .hero-picture picture img { - display: block; - padding-left: 10%; - } -} - -@media (min-width: 1300px) { - .trusted main .hero .hero-picture picture img { - padding-left: 20%; - } +.trusted .hero-container .default-content-wrapper { + display: block; + padding: 0 !important; } -@media (min-width: 990px) { - .trusted main .hero .hero-picture picture img { - display: block; - padding-left: 0; - } - - .trusted .blue_red_section .default-content-wrapper img { - width: 280px; - margin: 1em 2em; - } +.trusted main .hero .hero-content { + padding: 1em var(--body-padding); } - /* ---- particles.js container ---- */ - .trusted #particles-js { position: absolute; width: 100%; @@ -395,29 +386,54 @@ main .section.link-right a { } } +@media (min-width: 1600px) { + .trusted main .hero .hero-picture picture img { + display: block; + padding-left: 10%; + } +} + +@media (min-width: 1300px) { + .trusted main .hero .hero-picture picture img { + padding-left: 20%; + } +} + +@media (min-width: 990px) { + .trusted main .hero .hero-picture picture img { + display: block; + padding-left: 0; + } + + .trusted .blue_red_section .default-content-wrapper img { + width: 280px; + margin: 1em 2em; + } +} + @media (width >= 768px) { .trusted h1, .trusted main .hero h1 { - font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; + font: normal normal bold 96px/82px var(--font-ibm); } .trusted h2 { - font: normal normal bold 64px/61px "IBM Plex Sans", sans-serif; + font: normal normal bold 64px/61px var(--font-ibm); } .trusted main .hero h2 { - font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; + font: normal normal bold 40px/45px var(--font-ibm); } .trusted h3 { - font: normal normal normal 40px/45px "IBM Plex Sans", sans-serif; + font: normal normal normal 40px/45px var(--font-ibm); } .trusted h4 { - font: normal normal normal 35px/38px "IBM Plex Sans", sans-serif; + font: normal normal normal 35px/38px var(--font-ibm); } .trusted p, .trusted main .hero p { - font: normal normal normal 24px/32px "IBM Plex Sans", sans-serif; + font: normal normal normal 24px/32px var(--font-ibm); } .trusted .d-flex { @@ -446,7 +462,7 @@ main .section.link-right a { } .trusted .has_quotes blockquote::before, .trusted .has_quotes blockquote::after { - height: 49px; + height: 50px; } .trusted main .hero .hero-content { @@ -457,9 +473,14 @@ main .section.link-right a { width: 45%; } + .trusted .hero-container .default-content-wrapper { + display: none; + } + .trusted main .hero em { position: absolute; bottom: 10px; + font: normal normal 600 18px/23px var(--font-ibm); } .trusted .has_quotes blockquote { @@ -468,12 +489,39 @@ main .section.link-right a { } @media (width <= 768px) { + .trusted main .hero a.button.primary { + width: 100%; + } + + .trusted main .hero a.button span.button-text { + text-align: center; + display: block; + width: 100%; + font: normal normal bold 16px/18px Arial; + } + .trusted .default-content-wrapper { padding: 1em!important; } .trusted .top_banner .default-content-wrapper { padding-bottom: 0!important; + width: 100%; + overflow: hidden; + } + + .trusted main .hero em { + display: none; + } + + .trusted .top_banner .default-content-wrapper em { + display: block; + font: normal normal 600 12px/15px var(--font-ibm); + padding: 1em var(--body-padding); + } + .trusted main .hero .hero-content .breadcrumb { + padding: 14px 0; + margin-bottom: 0; } } From 13b29b3be7522a37be46c46fb88bb490197aee74 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 23 Feb 2024 10:45:57 +0200 Subject: [PATCH 0126/1296] finishes --- _src/scripts/template-factories/trusted.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index dc87e5b3a..aa0a6c37a 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -29,7 +29,7 @@ setTimeout(async () => { const configs = { particles: { number: { - value: 100, + value: 200, }, color: { value: '#ffffff', @@ -42,12 +42,12 @@ setTimeout(async () => { type: 'circle', }, opacity: { - value: 1, + value: 0.6, }, size: { value: { - min: 4, - max: 6, + min: 2, + max: 4, }, }, move: { From 6983b47725db6a45eedced3536e252c190eca9d2 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Fri, 23 Feb 2024 10:54:58 +0200 Subject: [PATCH 0127/1296] update --- _src/scripts/template-factories/trusted.css | 74 ++++++++++++--------- 1 file changed, 44 insertions(+), 30 deletions(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 203d6ece3..b68652d8e 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -42,12 +42,12 @@ } .trusted h2 { - font: normal normal bold 32px/32px var(--font-ibm); + font: normal normal bold 32px/37px var(--font-ibm); text-align: left; } .trusted h3 { - font: normal normal bold 20px/24px var(--font-ibm); + font: normal normal normal 20px/27px var(--font-ibm); text-align: left; } @@ -57,14 +57,18 @@ } .trusted p, .trusted main .hero p { - font: normal normal normal 12px/15px var(--font-ibm); + font: normal normal normal 14px/18px var(--font-ibm); text-align: left; } +.trusted p strong { + font-weight: 600; +} + .trusted u { text-decoration: none; color: var(--teal); - font: normal normal normal 14px/82px var(--font-ibm); + font: normal normal normal 14px/18px var(--font-ibm); } .trusted .d-flex { @@ -119,18 +123,21 @@ display: block; } -.trusted a.button.primary, -.trusted button.primary { +.trusted a.button.primary, .trusted button.primary { border: 1px solid var(--white); color: var(--white); background-color: transparent; border-radius: 10px; - min-width: 195px !important; - padding: 10px 10px; + min-width: 100%; + padding: 10px; margin: 1.5em 0 2em; font: normal normal bold 16px / 18px Arial; } +.trusted a.button.primary span, .trusted button.primary span { + margin: 0 auto; +} + .trusted main a.button:any-link:not(.modal):not(.primary) { background-color: var(--blue); border: 2px solid var(--blue); @@ -279,6 +286,10 @@ main .section.link-right a { color: var(--white); } +.trusted main .hero .hero-content .breadcrumb a:last-of-type:after { + display: none; +} + .trusted .other-options > div > h2 { color: var(--black); } @@ -308,17 +319,6 @@ main .section.link-right a { padding-bottom: 12em; } -/*.trusted .blue_red_section::before { - content: ""; - position: absolute; - width: 200%; - height: 100%; - background-color: red; - transform: rotate(25deg); - transform-origin: top left; - right: 0; -}*/ - .trusted .blue_red_section .default-content-wrapper { display: flex; align-items: center; @@ -339,6 +339,15 @@ main .section.link-right a { padding: 1em var(--body-padding); } +.trusted .default-header { + padding-bottom: 0; + padding-top: 0; +} + +.trusted .default-header p { + margin: 0; +} + /* ---- particles.js container ---- */ .trusted #particles-js { position: absolute; @@ -437,6 +446,14 @@ main .section.link-right a { font: normal normal normal 24px/32px var(--font-ibm); } + .trusted main .hero .hero-content .breadcrumb { + margin-top: 6em; + } + + .trusted .logo-container { + padding-left: 1em !important; + } + .trusted .d-flex { display: flex; flex-direction: row; @@ -450,10 +467,18 @@ main .section.link-right a { display: none; } + .trusted u { + font: normal normal normal 24px/24px var(--font-ibm); + } + .trusted #mouse-scroll { display: block; } + .trusted a.button.primary, .trusted button.primary { + min-width: 190px!important; + } + .trusted .apartnership_box .d-flex > div:nth-of-type(2) { margin-left: 14em; } @@ -490,17 +515,6 @@ main .section.link-right a { } @media (width <= 768px) { - .trusted main .hero a.button.primary { - width: 100%; - } - - .trusted main .hero a.button span.button-text { - text-align: center; - display: block; - width: 100%; - font: normal normal bold 16px/18px Arial; - } - .trusted .default-content-wrapper { padding: 1em!important; } From 17c994829683efb0cdbb8eb536e72535efcda716 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 23 Feb 2024 11:48:21 +0200 Subject: [PATCH 0128/1296] finishes --- _src/blocks/marquee/marquee.js | 2 +- _src/scripts/template-factories/trusted.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index 34ecbe260..aeb978aba 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -7,7 +7,7 @@ export default async function decorate(block) { DESKTOP: 200 + 20 * 2, }; - const SPEED_ANIMATION = 0.8; + const SPEED_ANIMATION = 0.2; const initialSlideList = [...block.children]; diff --git a/_src/scripts/template-factories/trusted.js b/_src/scripts/template-factories/trusted.js index aa0a6c37a..ff769fe8b 100644 --- a/_src/scripts/template-factories/trusted.js +++ b/_src/scripts/template-factories/trusted.js @@ -29,7 +29,7 @@ setTimeout(async () => { const configs = { particles: { number: { - value: 200, + value: 130, }, color: { value: '#ffffff', From f506afc856a2cb03611f5269bf79ef3631923a63 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 26 Feb 2024 14:41:14 +0200 Subject: [PATCH 0129/1296] teaser-logos and big-teaser-section --- .../big-teaser-section/big-teaser-section.css | 71 +++++++++++++++++++ .../big-teaser-section/big-teaser-section.js | 20 ++++++ _src/blocks/box-carousel/box-carousel.css | 17 ++++- _src/blocks/teaser-logos/teaser-logos.css | 54 ++++++++++++++ _src/blocks/teaser-logos/teaser-logos.js | 22 ++++++ _src/scripts/template-factories/trusted.css | 51 +++++-------- 6 files changed, 200 insertions(+), 35 deletions(-) create mode 100644 _src/blocks/big-teaser-section/big-teaser-section.css create mode 100644 _src/blocks/big-teaser-section/big-teaser-section.js create mode 100644 _src/blocks/teaser-logos/teaser-logos.css create mode 100644 _src/blocks/teaser-logos/teaser-logos.js diff --git a/_src/blocks/big-teaser-section/big-teaser-section.css b/_src/blocks/big-teaser-section/big-teaser-section.css new file mode 100644 index 000000000..52744a25d --- /dev/null +++ b/_src/blocks/big-teaser-section/big-teaser-section.css @@ -0,0 +1,71 @@ +.big-teaser-section-container { + background: var(--dark); +} + +.big-teaser-section-container .imgs-wrapper { + position: relative; + height: 200px; + width: calc(100% + 2em); + margin-left: -1em; +} + +.big-teaser-section-container .main-img { + width: 100%; + height: 100%; +} + + +.big-teaser-section-container .second-img { + position: absolute; + top: 0; + right: 0; + height: 100%; +} + +@media screen and (min-width: 768px) { + .big-teaser-section.block { + position: relative; + } + + .big-teaser-section-container .rte > * { + width: 50%; + } + + .big-teaser-section-container h2 { + width: 70% !important; + } + + .big-teaser-section-container p, + .big-teaser-section-container div { + font: normal normal normal 18px/23px IBM Plex Sans; + } + + .big-teaser-section-container .wrapper { + position: relative; + height: 750px; + display: flex; + align-items: center; + } + + .big-teaser-section-container .rte { + position: relative; + z-index: 1; + } + + .big-teaser-section-container .imgs-wrapper { + position: absolute; + width: 100%; + height: 100%; + top: 0; + margin: 0; + } + + .big-teaser-section-container .imgs-wrapper::before { + content: ''; + width: 100%; + height: 100%; + display: block; + position: absolute; + background: linear-gradient(90deg, rgba(2,0,36,1) 10%, rgba(1,188,239,0) 72%); + } +} diff --git a/_src/blocks/big-teaser-section/big-teaser-section.js b/_src/blocks/big-teaser-section/big-teaser-section.js new file mode 100644 index 000000000..d9fdf30cf --- /dev/null +++ b/_src/blocks/big-teaser-section/big-teaser-section.js @@ -0,0 +1,20 @@ +export default async function decorate(block) { + console.log(block); + const [richTextEl, firstPictureEl, secondPictureEl] = [...block.children]; + + block.innerHTML = ` +
+
${richTextEl.children[0].innerHTML}
+
+ +
+
+ ${firstPictureEl.querySelector('picture').innerHTML} +
+ +
+ ${secondPictureEl.querySelector('picture').innerHTML} +
+
+ `; +} diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 85e2e0087..48d30f838 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -46,7 +46,14 @@ .box-carousel-container .carousel-item.active { background: #006dff; - box-shadow: 0 3px 24px 0 #006dff; + box-shadow: 0px 3px 12px 1px rgba(0,0,0,1), + 0px 0px 100px 0px rgba(0,110,255,1); +} + +.box-carousel-container .carousel-item:hover { + background: #006dff; + box-shadow: 0px 3px 12px 1px rgba(0,0,0,1), + 0px 0px 100px 0px rgba(0,110,255,1); } .box-carousel-container .carousel-item .title { @@ -111,4 +118,12 @@ width: 300px; height: 300px; } + + .box-carousel-container .carousel-item .title { + font: normal normal bold 64px/82px IBM Plex Sans; + } + + .box-carousel-container .carousel-item .subtitle { + font: normal normal normal 18px/23px IBM Plex Sans; + } } diff --git a/_src/blocks/teaser-logos/teaser-logos.css b/_src/blocks/teaser-logos/teaser-logos.css new file mode 100644 index 000000000..8013c5226 --- /dev/null +++ b/_src/blocks/teaser-logos/teaser-logos.css @@ -0,0 +1,54 @@ +.teaser-logos-container.section { + padding: 0; +} + +.teaser-logos-container .main-wrapper { + display: flex; + height: 360px; +} + +.teaser-logos-container .main-wrapper .col { + width: 100%; + display: flex; + justify-content: center; + position: relative; + --backgroundColor: red; + background: var(--backgroundColor); +} + +.teaser-logos-container .main-wrapper .col:last-child::before { + content: ''; + display: block; + width: 0; + height: 0; + border-left: 50px solid transparent; + border-right: 50px solid transparent; + border-bottom: 170px solid var(--backgroundColor); + transform: rotate(0deg); + position: absolute; + left: -50px; + top: 0; +} + +.teaser-logos-container .main-wrapper .col .img-wrapper { + width: 150px; + padding-top: 30px; +} + +@media screen and (min-width: 768px) { + .teaser-logos-container .main-wrapper { + height: 400px; + } + + .teaser-logos-container .main-wrapper .col:last-child::before { + border-bottom-width: 235px; + } + + .teaser-logos-container .main-wrapper .col .img-wrapper { + width: 50%; + height: 180px; + display: flex; + align-items: center; + } +} + diff --git a/_src/blocks/teaser-logos/teaser-logos.js b/_src/blocks/teaser-logos/teaser-logos.js new file mode 100644 index 000000000..c14d1bbca --- /dev/null +++ b/_src/blocks/teaser-logos/teaser-logos.js @@ -0,0 +1,22 @@ +import { getDatasetFromSection } from '../../scripts/utils/utils.js'; + +export default async function decorate(block) { + const blockDataset = getDatasetFromSection(block); + const backgrounds = blockDataset.backgrounds.split(','); + + const boxes = [...block.children[0].children]; + + block.innerHTML = ` +
+ ${boxes.map((box) => ` +
${box.innerHTML}
+ `).join('')} +
+ `; + + const cols = [...block.querySelectorAll('.col')]; + + backgrounds.forEach((bg, index) => { + cols[index].style.setProperty('--backgroundColor', bg); + }); +} diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index b68652d8e..57c96e563 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -153,7 +153,7 @@ main .section.link-right a { .trusted .video_up { z-index: 999; position: relative; - margin-top: -15em; + margin-top: -19.5em; background: linear-gradient(to bottom, transparent 31%,var(--dark2) 31%); } @@ -314,26 +314,10 @@ main .section.link-right a { height: 100%; } -.trusted .blue_red_section { - background: linear-gradient(to right, transparent 50%, var(--red) 50%); - padding-bottom: 12em; -} - -.trusted .blue_red_section .default-content-wrapper { - display: flex; - align-items: center; - justify-content: center; -} - -.trusted .blue_red_section .default-content-wrapper img { - width: 150px; - margin: 0em 2em; -} - -.trusted .hero-container .default-content-wrapper { - display: block; - padding: 0 !important; -} +/*.trusted .hero-container .default-content-wrapper {*/ +/* display: block;*/ +/* padding: 0 !important;*/ +/*}*/ .trusted main .hero .hero-content { padding: 1em var(--body-padding); @@ -414,11 +398,6 @@ main .section.link-right a { display: block; padding-left: 0; } - - .trusted .blue_red_section .default-content-wrapper img { - width: 280px; - margin: 1em 2em; - } } @media (width >= 768px) { @@ -499,9 +478,9 @@ main .section.link-right a { width: 45%; } - .trusted .hero-container .default-content-wrapper { - display: none; - } + /*.trusted .hero-container .default-content-wrapper {*/ + /* display: none;*/ + /*}*/ .trusted main .hero em { position: absolute; @@ -512,6 +491,10 @@ main .section.link-right a { .trusted .has_quotes blockquote { width: 410px; } + + .trusted .video_up { + margin-top: -12.5em; + } } @media (width <= 768px) { @@ -529,11 +512,11 @@ main .section.link-right a { display: none; } - .trusted .top_banner .default-content-wrapper em { - display: block; - font: normal normal 600 12px/15px var(--font-ibm); - padding: 1em var(--body-padding); - } + /*.trusted .top_banner .default-content-wrapper em {*/ + /* display: block;*/ + /* font: normal normal 600 12px/15px var(--font-ibm);*/ + /* padding: 1em var(--body-padding);*/ + /*}*/ .trusted main .hero .hero-content .breadcrumb { padding: 14px 0; From b8a51155cdcee87f2119e71a1b7c64734ce4ee1e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 26 Feb 2024 16:01:22 +0200 Subject: [PATCH 0130/1296] hero fixes --- _src/blocks/banner/banner.css | 114 ------------------ _src/blocks/banner/banner.js | 97 --------------- .../big-teaser-section/big-teaser-section.js | 1 - _src/blocks/columns/columns.js | 18 +-- _src/blocks/hero/hero.css | 27 +++-- _src/blocks/hero/hero.js | 13 +- _src/blocks/marquee/marquee.css | 10 ++ _src/blocks/quote-carousel/quote-carousel.js | 6 +- _src/scripts/template-factories/trusted.css | 21 ---- 9 files changed, 52 insertions(+), 255 deletions(-) delete mode 100644 _src/blocks/banner/banner.css delete mode 100644 _src/blocks/banner/banner.js diff --git a/_src/blocks/banner/banner.css b/_src/blocks/banner/banner.css deleted file mode 100644 index bf9e9d922..000000000 --- a/_src/blocks/banner/banner.css +++ /dev/null @@ -1,114 +0,0 @@ -@charset "UTF-8"; -.section.banner-container { - background-color: black; - color: white; - padding: 0; -} - -.section.banner-container .banner img { - width: 100%; -} - -@media screen and (width >= 991px) { - .section.banner-container .banner .button-container { - display: block; - } - .section.banner-container .banner img { - width: initial; - } -} - -@media screen and (width <= 768px) { - .section.banner-container.hide-mobile { - background-image: unset !important; - background-color: #000; - } - - .section.banner-container.hide-mobile .bck-img { - display: none; - } - - .section.banner-container em { - position: unset; - bottom: 10px; - font-size: 12px; - line-height: 15px!important; - font-style: unset; - display: block; - } -} - -.trusted .section.top_banner .banner em { - font-size: 15px; - line-height: 15px; - font-style: unset; - display: block; -} - -.trusted .custom-block a { - border: 1px solid white; - color: white; - font-weight: 500; - background-color: transparent; - border-radius: 5px; - padding: 5px 3px 5px 16px; - min-width: 116px; - display: flex; -} - -.trusted .custom-block a:hover { - text-decoration: none; -} - -.trusted .custom-block a::after { - content: ''; - width: 24px; - height: 24px; - -webkit-mask: url(/_src/icons/arrow-right.svg); - mask: url(/_src/icons/arrow-right.svg); - background-color: var(--button-link-color); - display: inline-block; - transition: all .2s cubic-bezier(.4,0,.2,1); - transform: translateX(0); - opacity: 0; - margin-left: -10px; -} - -.trusted .custom-block a:hover::after { - transform: translateX(5px); - opacity: 1; -} - -@media (width >= 768px) { - .trusted .section.top_banner .banner h2 { - font: normal normal bold 40px/45px "IBM Plex Sans", sans-serif; - text-align: left; - } - - .trusted.section .banner .banner-left { - padding-right: 5em; - } - - .trusted .section.top_banner .banner .banner-left { - padding-right: 0; - } - - .trusted .section .banner .banner-right { - padding-left: 5em; - } - - .trusted .section.content_right_diff .banner .banner-right img { - margin-left: -5em; - } - - .trusted .section.top_banner .banner em { - position: absolute; - bottom: 10px; - } -} - -@media (width <= 767px) { - .hide_bck_mobile { - background-image: unset!important; - } -} diff --git a/_src/blocks/banner/banner.js b/_src/blocks/banner/banner.js deleted file mode 100644 index 636386262..000000000 --- a/_src/blocks/banner/banner.js +++ /dev/null @@ -1,97 +0,0 @@ -export default function decorate(block) { - block.classList.add('default-content-wrapper'); - const parentBlock = block.closest('.section'); - const parentBlockStyle = block.closest('.section').style; - const blockStyle = block.style; - const metaData = block.closest('.section').dataset; - const { - contentSize, background_color, background_hide, banner_hide, text_color, underlinedInclinedTextColor, textAlignVertical, imageAlign, padding_top, padding_bottom, margin_top, margin_bottom, image_cover - } = metaData; - const [contentEl, pictureEl, contentRightEl, pictureMobileEl] = [...block.children]; - - if (image_cover) { - parentBlock.classList.add(`bckimg-${image_cover}`); - } - - // tables from left content - [...contentEl.querySelectorAll('table')].forEach((table) => { - const aliasTr = table.querySelector('tr'); // 1st tr shoudlk have an identifier alias - }); - - if (background_color) block.closest('div.section').style.backgroundColor = background_color; - if (text_color) blockStyle.color = text_color; - if (underlinedInclinedTextColor) { - block.querySelectorAll('em u').forEach((element) => { - element.style.color = underlinedInclinedTextColor; - element.style.fontStyle = 'normal'; - element.style.textDecoration = 'none'; - }); - } - if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; - if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; - if (margin_top) blockStyle.marginTop = `${margin_top}rem`; - if (margin_bottom) blockStyle.marginBottom = `${margin_bottom}rem`; - - if (background_hide) parentBlock.classList.add(`hide-${background_hide}`); - if (banner_hide) parentBlock.classList.add(`block-hide-${banner_hide}`); - - if (image_cover) { - parentBlockStyle.backgroundImage = `url(${pictureEl.querySelector('img').getAttribute('src').split('?')[0]})`; - parentBlockStyle.backgroundRepeat = 'no-repeat'; - parentBlockStyle.backgroundPosition = 'right 0'; - parentBlockStyle.backgroundSize = 'auto 100%'; - parentBlockStyle.backgroundColor = background_color || '#000'; - - if (image_cover === 'full-left-50') { - parentBlockStyle.backgroundPosition = 'left 0'; - parentBlockStyle.backgroundSize = '50% 100%'; - } - - if (image_cover === 'full-right-50') { - parentBlockStyle.backgroundPosition = 'right 0'; - parentBlockStyle.backgroundSize = '50% 100%'; - } - - if (image_cover === 'full-right-52') { - parentBlockStyle.backgroundPosition = 'right 0'; - parentBlockStyle.backgroundSize = '52% 100%'; - } - } - - block.innerHTML = ` -
- - -
- `; - - if (textAlignVertical) { - block.querySelector('.row').classList.add(`align-items-${textAlignVertical}`); - } - - if (imageAlign) { - block.querySelector('.img-right').style.textAlign = imageAlign; - } - - // creating scroll down icon: - const mouseScrollDiv = `
-
-
-
-
- - -
-
`; - - if (!block.querySelector('#mouse-scroll')) { - block.innerHTML += mouseScrollDiv; - } -} diff --git a/_src/blocks/big-teaser-section/big-teaser-section.js b/_src/blocks/big-teaser-section/big-teaser-section.js index d9fdf30cf..b12614382 100644 --- a/_src/blocks/big-teaser-section/big-teaser-section.js +++ b/_src/blocks/big-teaser-section/big-teaser-section.js @@ -1,5 +1,4 @@ export default async function decorate(block) { - console.log(block); const [richTextEl, firstPictureEl, secondPictureEl] = [...block.children]; block.innerHTML = ` diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index ec338ad92..de1fb32b9 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -15,7 +15,7 @@ function countSlides(carouselContent) { } function showSlides(carousel, slideNumber) { - const carouselContent = carousel.querySelector('.columns.marquee > div:nth-child(1)'); + const carouselContent = carousel.querySelector('.columns.carousel > div:nth-child(1)'); function handleSlideDisplay(childDivs) { // Hide all elements @@ -77,7 +77,7 @@ function setActiveButton(button, buttonsWrapper, carousel) { const activeButtonIndex = getButtonIndex(activeButton); const clickedButtonIndex = getButtonIndex(button); - const carouselContent = carousel.querySelector('.columns.marquee > div:nth-child(1)'); + const carouselContent = carousel.querySelector('.columns.carousel > div:nth-child(1)'); // Clear any previous slide classes carouselContent.classList.remove('slide-left'); @@ -98,7 +98,7 @@ function setActiveButton(button, buttonsWrapper, carousel) { function createNavigationButtons(numberOfSlides, carousel) { const buttonsWrapper = document.createElement('div'); - buttonsWrapper.className = 'marquee-buttons'; + buttonsWrapper.className = 'carousel-buttons'; for (let i = 0; i < numberOfSlides; i += 1) { const button = document.createElement('button'); @@ -126,7 +126,7 @@ function createNavigationButtons(numberOfSlides, carousel) { } function setupCarousel(carousel, resetSlidePosition = false) { - const carouselContent = carousel.querySelector('.columns.marquee > div'); + const carouselContent = carousel.querySelector('.columns.carousel > div'); // Remove the slide-left class if necessary if (resetSlidePosition) { @@ -134,7 +134,7 @@ function setupCarousel(carousel, resetSlidePosition = false) { } // Remove existing navigation buttons - const existingButtonsWrapper = carousel.querySelector('.marquee-buttons'); + const existingButtonsWrapper = carousel.querySelector('.carousel-buttons'); if (existingButtonsWrapper) { existingButtonsWrapper.remove(); } @@ -188,14 +188,14 @@ export default function decorate(block) { setImageAsBackgroundImage(); } - // If it has the marquee class, then setup the marquee - if (block.classList.contains('marquee')) { + // If it has the carousel class, then setup the carousel + if (block.classList.contains('carousel')) { setupCarousel(block); } window.addEventListener('resize', debounce(() => { - // Check if the block still has the marquee class before resetting - if (block.classList.contains('marquee')) { + // Check if the block still has the carousel class before resetting + if (block.classList.contains('carousel')) { setupCarousel(block, true); // Pass true to reset the slide position } }, 250)); diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 5f18d0721..6c12228f9 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -15,7 +15,7 @@ --hero-botton-border-color: #616161; --hero-p-color: #3c3c3c; - /* breadcrumbs font size */ + /* breadcrumbs font size */ --breadcrumb-text-color-dark: #c5c5c5; --breadcrumb-text-color-dark-hover: #616161; --breadcrumbs-font-size-s: 12px; @@ -82,7 +82,7 @@ main .hero.black-background .hero-content .breadcrumb a:hover { main .hero-container > div { max-width: unset; } - + main .hero-container { padding: 0; margin: 0 auto; @@ -177,10 +177,10 @@ main .hero h2 { main .hero.black-background h1 { font-size: var(--hero-h1-font-size); - margin: 0 0 25px; + margin: 0 0 25px; } -main .hero.black-background h1, +main .hero.black-background h1, main .hero.black-background h2, main .hero.black-background h4 { color: var(--text-dark-color); @@ -257,7 +257,7 @@ main .hero .hero-picture picture img { main .hero a.button { margin: 8px 13px 0 0; -} +} main .hero a.button.modal { padding: 0 28px 0 0; @@ -348,7 +348,7 @@ main .hero .hero-content ul li { main .hero .hero-content ul li:first-child { margin: 9px 0 0; } - + main .hero ul li::before { content: ""; position: absolute; @@ -406,6 +406,12 @@ main .hero .hero-awards li::after { content: none; } + +.hero .mobile-picture-wrapper { + height: 280px; + margin-top: -25px; +} + @media(min-width: 767px) { /* tablet */ :root { --hero-h1-font-size: 42px; @@ -424,6 +430,9 @@ main .hero .hero-awards li::after { margin: 0 9px; } + div.hero div:nth-child(3) { + display: none; + } } @media (min-width: 990px) { /* desktop */ @@ -507,7 +516,7 @@ main .hero .hero-awards li::after { line-height: 1; letter-spacing: .96px; } - + main .hero.black-background ul.hero-awards { display: flex; flex-direction: row; @@ -534,7 +543,7 @@ main .hero .hero-awards li::after { } @media (min-width: 1600px) { /* large desktop */ - + main .hero.black-background .hero-content .breadcrumb { padding: 9px 0; @@ -583,5 +592,5 @@ main .hero .hero-awards li::after { padding-left: var(--section-large-desktop-padding); padding-right: var(--section-large-desktop-padding); } - + } diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index 86144e491..e219ede4e 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -5,6 +5,7 @@ import { renderNanoBlocks, fetchProduct, } from '../../scripts/utils/utils.js'; +import { isView } from '../../scripts/scripts.js'; /** * Builds hero block and prepends to main in a new section. @@ -20,7 +21,7 @@ function buildHeroBlock(element) { const subSection = document.querySelector('div.hero div'); subSection.classList.add('hero-content'); - const isHomePage = window.location.pathname.split('/').filter(item => item).length === 1; + const isHomePage = window.location.pathname.split('/').filter((item) => item).length === 1; if (!isHomePage) { const breadcrumb = createTag('div', { class: 'breadcrumb' }); @@ -33,6 +34,16 @@ function buildHeroBlock(element) { section.prepend(pictureEl); + const isMobileView = isView('mobile'); + // eslint-disable-next-line max-len + const mobilePictureWrapper = !section.lastElementChild.classList.value && section.lastElementChild; + if (isMobileView && mobilePictureWrapper) { + mobilePictureWrapper.classList.add('mobile-picture-wrapper', 'img-container'); + mobilePictureWrapper.replaceChild(mobilePictureWrapper.querySelector('picture'), mobilePictureWrapper.firstElementChild); + } else if (!isMobileView && mobilePictureWrapper) { + section.removeChild(mobilePictureWrapper); + } + pictureParent.remove(); } } diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index bd3ded829..536b599a0 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -1,3 +1,9 @@ +.marquee-container .marquee.block { + background: #004299; + height: 150px; + display: flex; +} + .marquee-container .marquee-content { display: flex; animation: scrolling 10s linear infinite; @@ -25,4 +31,8 @@ flex: 0 0 200px; margin: 0 20px; } + + .marquee-container .marquee.block { + height: 250px; + } } diff --git a/_src/blocks/quote-carousel/quote-carousel.js b/_src/blocks/quote-carousel/quote-carousel.js index 42d53222d..36ec87dd4 100644 --- a/_src/blocks/quote-carousel/quote-carousel.js +++ b/_src/blocks/quote-carousel/quote-carousel.js @@ -1,8 +1,8 @@ import { createTag } from '../../scripts/utils/utils.js'; import { decorateIcons } from '../../scripts/lib-franklin.js'; -const SLIDE_PREFIX = 'marquee-slide-'; -const CONTROL_PREFIX = 'marquee-control-'; +const SLIDE_PREFIX = 'carousel-slide-'; +const CONTROL_PREFIX = 'carousel-control-'; function createSlide(item, index) { const paragraphs = Array.from(item.querySelectorAll('p')); @@ -125,7 +125,7 @@ export default async function decorate(block) { const dotsControls = createDotsControls(slides, block); - /* Add marquee action button if it exists */ + /* Add carousel action button if it exists */ const controlsElements = [dotsControls]; const button = block.querySelector('.button-container'); if (button) { diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 57c96e563..a65c20ee1 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -314,11 +314,6 @@ main .section.link-right a { height: 100%; } -/*.trusted .hero-container .default-content-wrapper {*/ -/* display: block;*/ -/* padding: 0 !important;*/ -/*}*/ - .trusted main .hero .hero-content { padding: 1em var(--body-padding); } @@ -478,10 +473,6 @@ main .section.link-right a { width: 45%; } - /*.trusted .hero-container .default-content-wrapper {*/ - /* display: none;*/ - /*}*/ - .trusted main .hero em { position: absolute; bottom: 10px; @@ -502,22 +493,10 @@ main .section.link-right a { padding: 1em!important; } - .trusted .top_banner .default-content-wrapper { - padding-bottom: 0!important; - width: 100%; - overflow: hidden; - } - .trusted main .hero em { display: none; } - /*.trusted .top_banner .default-content-wrapper em {*/ - /* display: block;*/ - /* font: normal normal 600 12px/15px var(--font-ibm);*/ - /* padding: 1em var(--body-padding);*/ - /*}*/ - .trusted main .hero .hero-content .breadcrumb { padding: 14px 0; margin-bottom: 0; From 857eb95067de3734324cffbaa04ca184408c4860 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 26 Feb 2024 16:12:30 +0200 Subject: [PATCH 0131/1296] hero fixes --- _src/blocks/marquee/marquee.css | 1 - _src/blocks/marquee/marquee.js | 7 ++++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index 536b599a0..af5e6768d 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -1,5 +1,4 @@ .marquee-container .marquee.block { - background: #004299; height: 150px; display: flex; } diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index aeb978aba..52e725956 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -1,7 +1,8 @@ -import { debounce } from '../../scripts/utils/utils.js'; +import {debounce, getDatasetFromSection} from '../../scripts/utils/utils.js'; import { isView } from '../../scripts/scripts.js'; export default async function decorate(block) { + const defaultBackgroundColor = '#004299'; const SLIDE_SIZE_ENUM = { MOBILE: 100 + 20 * 2, DESKTOP: 200 + 20 * 2, @@ -58,6 +59,10 @@ export default async function decorate(block) { } function render() { + const blockDataset = getDatasetFromSection(block); + const { background_color: backgroundColor } = blockDataset; + block.style.background = backgroundColor || defaultBackgroundColor; + const { duplicatedSlides, slidesToShift } = calculateSlideListBasedOnScreenWidth(); block.innerHTML = ` From 84ea0addcc596fbff13212941c3a939492ec664e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 26 Feb 2024 16:15:15 +0200 Subject: [PATCH 0132/1296] hero fixes --- _src/blocks/teaser-logos/teaser-logos.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/teaser-logos/teaser-logos.css b/_src/blocks/teaser-logos/teaser-logos.css index 8013c5226..181484a54 100644 --- a/_src/blocks/teaser-logos/teaser-logos.css +++ b/_src/blocks/teaser-logos/teaser-logos.css @@ -41,7 +41,7 @@ } .teaser-logos-container .main-wrapper .col:last-child::before { - border-bottom-width: 235px; + border-bottom-width: 400px; } .teaser-logos-container .main-wrapper .col .img-wrapper { From 58f5d80b21fca28e16b95330e0ff7d02273b4c8d Mon Sep 17 00:00:00 2001 From: miordache Date: Mon, 26 Feb 2024 20:37:04 +0200 Subject: [PATCH 0133/1296] Update CSS and JavaScript for header selection --- _src/blocks/header/header.css | 1767 ++++++++++--------- _src/blocks/header/header.js | 38 +- _src/scripts/template-factories/trusted.css | 2 +- _src/styles/styles.css | 6 +- 4 files changed, 921 insertions(+), 892 deletions(-) diff --git a/_src/blocks/header/header.css b/_src/blocks/header/header.css index 3077c98d4..cecacb5cd 100644 --- a/_src/blocks/header/header.css +++ b/_src/blocks/header/header.css @@ -3,900 +3,342 @@ --dark-header-icon-color: #000; } -header { +header.header-wrapper{ z-index: 100; -} - - -header p { - margin: 0; -} - -.header-wrapper { - position: sticky; - top: 0; - transition: height 0.3s ease-in-out; - background-color: var(--white-color); -} - -nav { - display: none; -} - -.nav-wrapper { - display: none; -} - -.nav-brand, -.nav-sections { - display: inline-flex; - align-items: flex-start; - width: 49.5%; -} - -.nav-brand { - flex-wrap: nowrap; - justify-content: flex-start; -} - -.nav-sections { - flex-wrap: nowrap; - justify-content: flex-end; -} - -.nav-brand p, -.nav-sections p { - display: inline-block; -} - -.bottom-links div, .bottom-links p{ - display: inline-block; -} - -.login-modal > p { - position: relative; - width: 100%; - display: block; - text-align: center; - margin-top: 45px; -} - -.header-wrapper > p { - margin-top: 0; - padding: 15px; - text-align: center; - font-size: var(--body-font-size-s); - color: var(--horizontal-separator-color); - text-decoration: none; - cursor: pointer; - width: 175px; - height: 50px; -} - -@keyframes animate-bottom-border { - 0% { - transform: scaleX(0); - transform-origin: left; + + p { + margin: 0; } - - 100% { - transform: scaleX(1); - transform-origin: left; + + nav { + display: none; } -} - -.home-button-border { - position: absolute; - margin-top: 12px; - width: 70px; - height: 3px; - background-color: var(--color-highlight-blue); -} - -.nav-divider { - display: flex; - flex-wrap: nowrap; - justify-content: flex-end; - min-width: 2px; - width: 2px; - background-color: var(--color-dark-gray); - height: 20px; - margin-right: 15px; - margin-top: 7.5px; -} - -.login-modal { - display: none; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - position: absolute; - right: min(15px, calc(100vw - 880px)); - width: 375px; - height: 275px; - top: 80px; - background-color: var(--background-color); - border-radius: 5px; - opacity: 0; - transition: all 0.3s ease-in-out; - box-shadow: 0 10px 10px #0003; - z-index: 0; - transform: translateY(20px); -} - -.login-modal.show { - opacity: 1; - top: 60px; - z-index: 5; - transform: translateY(0); -} - - -.login-modal h2 { - position: relative; - white-space: nowrap; - color: var(--text-color); - font-size: var(--body-font-size-s); - width: 100%; - margin-left: 25px; - top: 15px; - text-align: left; -} - -.divider { - position: absolute; - margin-top: 45px; - width: 100%; - height: 1px; - background-color: var(--color-dark-gray); -} - -.login-modal a { - text-decoration: none; - color: var(--color-highlight-blue) !important; - width: 330px; - height: 55px; - border-radius: 9px; - border: 2px solid var(--color-highlight-blue) !important; - background-color: transparent !important; - margin: -70px; - padding: 5px; - display: inline-block; - font-size: var(--body-font-size-xs); - font-weight: 500; -} - -header a.button:any-link { - padding: 0; -} - -.login-modal a.button:any-link { - height: 50px; - padding-right: 15px; -} - -header a.button::after { - margin-left: 0; -} - -.login-modal a.button::after { - position: relative; - margin-left: 220px; -} - -.login-modal a.button:any-link span { - margin-left: 25%; - position: absolute; - font-weight: 500; -} - -.login-modal.show p.button-container:nth-child(3) span { - margin-left: 13%; -} - -.login-modal.show p.button-container:nth-child(3) a.button::after { - margin-left: 280px; -} - -.login-modal.show p.button-container:nth-child(4) span { - margin-left: 33%; -} - -.login-modal.show p.button-container:nth-child(4) a.button::after { - margin-left: 200px; -} - -.logo-container { - height: 100%; - display: flex; - justify-content: start; - align-items: center; - max-width: var(--section-desktop-max-width); - margin: 0 auto; - padding: 0 var(--body-padding); -} - -header.expanded .logo-container { - height: var(--nav-height); - position: absolute; - top: 0; - left: 0; -} - -.logo-container > p { - display: none; -} - -.login-buttons a p { - text-align: center; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); - margin-top: 5px; - transition: all 0.3s ease-in-out; - height: 100%; -} - -header .icon { - position: absolute; - margin: 0; - z-index: 1000; - top: 15px; - width: 103px; - height: 30px; - filter: none; - left: 20px; - color: var(--dark-background-color); -} - -.bottom-links p > a { - text-decoration: none; - font-size: var(--body-font-size-xxs) !important; - font-weight: 500 !important; -} - -.login-modal a:hover { - background-color: var(--color-highlight-blue) !important; - color: var(--background-color) !important; -} - -header a.button span.button-text { - display: flex; - font-size: var(--body-font-size-xs); - font-weight: 400; -} - -header a.button:hover span.button-text { - transform: none; -} - -.options-wrapper.show a { - display: block; - margin-left: 40px; - color: var(--text-color); - font-size: var(--body-font-size-xs); - margin-top: 10px; - text-decoration: none; - animation: slide-in 0.2s 0.075s forwards; - background-color: transparent !important; - border: transparent !important; -} - -.bottom-links p:hover > a { - color: var(--color-highlight-blue) !important; -} - -.header-wrapper > p a:hover{ - color: var(--background-color); -} - -.options-wrapper.show > a:first-child { - margin-top: 40px; -} - -.login-modal.show.button-container a:hover{ - background-color: var(--color-highlight-blue); - color: var(--background-color); -} - -.triangle { - position: absolute; - width: 0; - height: 0; - top: -13px; - left: 320px; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - border-bottom: 20px solid white; -} - -.mega-menu div h2 { - position: relative; - font-size: var(--body-font-size-s); - font-weight: 600; - margin-left: 25px; -} - - - -.mega-menu > div:first-child { - display: grid; - grid-template-rows: auto auto; - grid-template-columns: 1fr 1fr 1fr; - align-items: start; - border-bottom: 2px solid #f5f6f7; -} - -.mega-menu > div:first-child h2 { - grid-column: span 3; -} - -.mega-menu > div:first-child p { - width: 250px; - margin-top: 5px; - border-radius: 5px; - padding: 10px; - height: 85px; -} - - -.mega-menu > div:first-child p:hover { - background-color: var(--highlight-light-blue); -} - -.mega-menu > div:first-child > p:first-child { - grid-column: 1; -} - -.mega-menu > div:first-child p a > span::after { - content: ''; - width: 24px; - height: 24px; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask:url('/_src/icons/arrow-right.svg'); - mask: url('/_src/icons/arrow-right.svg'); - background-color: var(--button-link-color); - display: inline-block; - transition: all .2s cubic-bezier(.4,0,.2,1); - opacity: 0; -} - -.mega-menu > div:first-child p a:hover span::after { - opacity: 1; - background-color: var(--color-highlight-blue); -} - -.mega-menu > div:first-child p a::after { - display: none; -} - -.options-wrapper.show div { - font-weight: var(--font-weight-bold); - font-size: var(--body-font-size-s); - margin: 25px 13px 25px 20px; - position: relative; -} - -.options-wrapper.show div::before { - border-color: black; - border-style: solid; - border-width: 0 2px 2px 0; - content: ""; - width: 0.5rem; - height: 0.5rem; - display: inline-block; - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%) rotate(-45deg); -} - -@media (max-width: 992px) { + .nav-wrapper { display: none; } - - header p { - margin: 0; + + .nav-brand, + .nav-sections { + display: inline-flex; + align-items: flex-start; + width: 49.5%; } - - .header-wrapper > p{ - display: none; + + .nav-brand { + flex-wrap: nowrap; + justify-content: flex-start; } -} - -.icon.icon-arrow-right { - position: absolute; - width: 10px; - height: 10px; - margin-left: 1px; - z-index: 5; -} - -.bottom-links div:nth-child(2) { - margin-left: 120px; -} - -.menu-bar { - display: block; - width: 100%; - height: 3px; - background-color: var(--text-color); - transition: transform 0.3s ease, opacity 0.3s ease; - will-change: transform, opacity; -} - -.menu-wrapper { - position: absolute; - top: 17px; - right: 20px; - width: 25px; - height: 25px; - cursor: pointer; - display: flex; - flex-direction: column; - justify-content: space-around; - z-index: 100; -} - -.menu-wrapper.change .menu-bar:first-child { - transform: rotate(-45deg) translate(-5px, 5px); -} - -.menu-wrapper.change .menu-bar:nth-child(2) { - opacity: 0; -} - -.menu-wrapper.change .menu-bar:last-child { - transform: rotate(45deg) translate(-6px,-7px); -} - -.header-wrapper.expanded { - height: 100vh; - width: 100vw; - z-index: 2; -} - -.options-wrapper { - position: relative; - top: var(--nav-height); - width: 100vw; - height: 0; - display: none; -} - -.options-wrapper.show{ - width: 100vw; - height: 100vh; - box-shadow: 0 10px 10px #0003; - z-index: 3; - border-top: 1px solid #cecccc; - display: block; -} - -.sub-menu { - display: none; -} - -.sub-menu.show { - display: block; -} - -.options-wrapper.show .sub-menu-title { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); - margin-left: 20px; - padding-left: 20px; - position: relative; -} - -.options-wrapper.show .sub-menu-title::before { - border-color: black; - border-style: solid; - border-width: 0 2px 2px 0; - content: ""; - width: 0.5rem; - height: 0.5rem; - display: inline-block; - position: absolute; - left: 0; - top: 50%; - transform: translate(0, -50%) rotate(135deg); -} - -@keyframes slide-in { - from { - transform: translateX(100%); + .nav-sections { + flex-wrap: nowrap; + justify-content: flex-end; } - - to { - transform: translateX(0); + + .nav-brand p, + .nav-sections p { + display: inline-block; } -} - -#icons-sprite-bitdefender-logo path { - fill: currentcolor -} - -@media(min-width: 767px) { /* tablet */ - .logo-container .icon { - width: 180px; + + .bottom-links div, .bottom-links p{ + display: inline-block; } - -} - -@media(min-width: 992px) { - header.header-wrapper::after { - content: ""; - position: absolute; - top: 39px; - left: 0; - right: 0; - width: 100%; - height: 2px; - background-color: #3c3c3c; - margin: 0 auto; + + .login-modal > p { + position: relative; + width: 100%; + display: block; + text-align: center; + margin-top: 45px; } - - header .icon { - color: var(--text-color); - position: static; + + .header-wrapper > p { + margin-top: 0; + padding: 15px; + text-align: center; + font-size: var(--body-font-size-s); + color: var(--horizontal-separator-color); + text-decoration: none; + cursor: pointer; + width: 175px; + height: 50px; } - - header.black-background .icon { - color: var(--text-dark-color); + + @keyframes animate-bottom-border { + 0% { + transform: scaleX(0); + transform-origin: left; + } + + 100% { + transform: scaleX(1); + transform-origin: left; + } } - - .header-wrapper { - height: var(--nav-height-desktop); - position: fixed; - z-index: 999; - margin: auto; - left: 0; - right: 0; + + .home-button-border { + position: absolute; + margin-top: 12px; + width: 70px; + height: 3px; + background-color: var(--color-highlight-blue); } - - .menu-wrapper { + + .nav-divider { + display: flex; + flex-wrap: nowrap; + justify-content: flex-end; + min-width: 2px; + width: 2px; + background-color: var(--color-dark-gray); + height: 20px; + margin-right: 15px; + margin-top: 7.5px; + } + + .login-modal { display: none; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + position: absolute; + right: min(15px, calc(100vw - 880px)); + width: 375px; + height: 275px; + top: 80px; + background-color: var(--background-color); + border-radius: 5px; + opacity: 0; + transition: all 0.3s ease-in-out; + box-shadow: 0 10px 10px #0003; + z-index: 0; + transform: translateY(20px); } - - .nav-wrapper { - width: 100%; - background-color: var(--text-color); - z-index: 100; - display: block; - margin: 0 auto; + + .login-modal.show { + opacity: 1; + top: 60px; + z-index: 5; + transform: translateY(0); } - nav { - display: block; - max-width: var(--section-desktop-max-width); - height: 100%; - margin: 0 auto; - padding: 6px var(--section-desktop-padding) 10px; + + .login-modal h2 { position: relative; + white-space: nowrap; + color: var(--text-color); + font-size: var(--body-font-size-s); + width: 100%; + margin-left: 25px; + top: 15px; + text-align: left; } - - nav p { - line-height: 1.4; - font-size: var(--body-font-size-xxs); - font-weight: var(--font-weight-bold); - } - - .nav-sections { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - } - - - .nav-brand a, - .nav-sections a { - color: var(--horizontal-separator-color); - text-decoration: none; - text-transform: uppercase; - font-size: var(--body-font-size-xxs); - font-weight: var(--font-weight-bold); - margin-right: 0; - letter-spacing: 0.96px; - cursor: pointer; - line-height: 1.4; - display: inline-block; - position: relative; - } - - .nav-sections a { - margin: 0 15.5px; - } - - .logo a { - display: block; - } - - .nav-brand p a { - margin: 0 12px; + + .divider { + position: absolute; + margin-top: 45px; + width: 100%; + height: 1px; + background-color: var(--color-dark-gray); } - - .mega-menu div h2 > a { - transition: all 0.2s ease-in-out; - border-radius: 3px; + + .login-modal a { text-decoration: none; - padding: 7px 10px; - color: var(--link-color); + color: var(--color-highlight-blue) !important; + width: 330px; + height: 55px; + border-radius: 9px; + border: 2px solid var(--color-highlight-blue) !important; + background-color: transparent !important; + margin: -70px; + padding: 5px; + display: inline-block; font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); + font-weight: 500; } - - .mega-menu div p a{ - position: relative; - font-size: var(--body-font-size-xs); - font-weight: 400; - color: var(--text-color); + + a.button:any-link { + padding: 0; } - - .nav-sections a:first-child{ - margin-right: 16px; + + .login-modal a.button:any-link { + height: 50px; + padding-right: 15px; } - - .nav-brand p:first-child a{ + + a.button::after { margin-left: 0; } - -.nav-sections p a::before, -.nav-brand p a::before { - content: ""; - position: absolute; - top: 25px; - height: 3px; - background: var(--color-highlight-blue); - transition: all .3s ease; - width: 100%; - transform: scaleX(0); - transform-origin: left; - left: 0; -} - -.nav-sections p a:hover::before, -.nav-brand p a.active::before, -.nav-brand p a:hover::before, -.nav-sections p.clicked a::before { - transform: scaleX(1); - transform-origin: left; -} - -/* Other existing styles */ -.mega-menu div h2 > a:hover { - background-color: var(--highlight-light-blue); -} - -.nav-sections p:last-child:hover::after { - width: 50px; -} - -.nav-sections p, -.nav-brand p { - position: relative; -} - -.nav-sections p::before, -.nav-brand p:not(:first-child)::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 16px; - width: 2px; - background-color: #616161; -} - .logo-container { - padding: 20px var(--section-desktop-padding); - margin: 21px auto 0; - gap: 10px; + .login-modal a.button::after { + position: relative; + margin-left: 220px; } - .logo-container > p { - display: block; - font-weight: var(--font-weight-bold); - line-height: 1.63; - font-size: 15px; + .login-modal a.button:any-link span { + margin-left: 25%; + position: absolute; + font-weight: 500; } - - .home-solutions-link-hover { - color: #FFF; + + .login-modal.show p.button-container:nth-child(3) span { + margin-left: 13%; } - .home-solutions-link-default { - display: block; - color: var(--text-color); - cursor: pointer; - padding: 0 27px 31px; - position: relative; - margin-top: 35px; + .login-modal.show p.button-container:nth-child(3) a.button::after { + margin-left: 280px; } - - header.black-background .home-solutions-link-default { - color: #dedede; + + .login-modal.show p.button-container:nth-child(4) span { + margin-left: 33%; } - .home-solutions-link-default::before { - content: ""; - position: absolute; - bottom: 3px; - height: 4px; - background: #006eff; - transition: all .3s ease; - width: 100%; - transform: scaleX(0); - transform-origin: left; - left: 0; + .login-modal.show p.button-container:nth-child(4) a.button::after { + margin-left: 200px; } - - .home-solutions-link-hover::before { - transform: scaleX(1); - transform-origin: left; + + .logo-container { + height: 100%; + display: flex; + justify-content: start; + align-items: center; + max-width: var(--section-desktop-max-width); + margin: 0 auto; + padding: 0 var(--body-padding); } - - .mega-menu { - flex-direction: column; + + expanded .logo-container { + height: var(--nav-height); position: absolute; - left: 80px; - top: 123px; - max-width: 920px; - width: 100%; - background-color: var(--background-color); - z-index: 3; - transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - box-shadow: 0 10px 10px #0003; - visibility: hidden; - display: none; - opacity: 0; + top: 0; + left: 0; } - .mega-menu-show { - opacity: 1; - visibility: visible; - display: flex; - } - - .mega-menu div h2 { - position: relative; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-boldest); - line-height: 18px; - padding: 7px 10px; - margin: 10px 25px 0 15px; - } - - .other-options > div:nth-child(5) { - grid-area: 2 / 3 / 3 / 4; + .logo-container > p { + display: none; } - .other-options > div:nth-child(4) { - grid-area: 2 / 2 / 3 / 3; + .login-buttons a p { + text-align: center; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + margin-top: 5px; + transition: all 0.3s ease-in-out; + height: 100%; } - .other-options > div:nth-child(3) { - grid-area: 1 / 3 / 2 / 4; + .icon { + position: absolute; + margin: 0; + z-index: 1000; + top: 15px; + width: 103px; + height: 30px; + filter: none; + left: 20px; + color: var(--dark-background-color); } - .other-options > div:nth-child(2) { - grid-area: 1 / 2 / 2 / 3; + .bottom-links p > a { + text-decoration: none; + font-size: var(--body-font-size-xxs) !important; + font-weight: 500 !important; } - .other-options > div:nth-child(1) { - grid-area: 1 / 1 / 3 / 2; + .login-modal a:hover { + background-color: var(--color-highlight-blue) !important; + color: var(--background-color) !important; } - .other-options > div > p { - position: relative; - top: 0; - margin-left: 20px; + a.button span.button-text { + display: flex; font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: 18px; + font-weight: 400; } - - .other-options > div > h2 { - margin-top: 0; + + a.button:hover span.button-text { + transform: none; } - - header .other-options > div > p a.button { + + .options-wrapper.show a { + display: block; + margin-left: 40px; + color: var(--text-color); font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: 18px; + margin-top: 10px; text-decoration: none; - padding: 1px 10px; - background-color: transparent; - border-radius: 4px; - border: none; + animation: slide-in 0.2s 0.075s forwards; + background-color: transparent !important; + border: transparent !important; } - - header .other-options > div > p a.button:hover { - background-color: var(--highlight-light-blue); - transition: none; - transform: none; + + .bottom-links p:hover > a { + color: var(--color-highlight-blue) !important; } - .mega-menu > div:first-child p a::after { - display: none; + .header-wrapper > p a:hover{ + color: var(--background-color); } - - header .other-options > div > p a:hover::after { - background-color: var(--color-highlight-blue); + + .options-wrapper.show > a:first-child { + margin-top: 40px; } - - header .other-options > div > p a.button > span { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: 18px; - position: relative; - color: var(--text-color); + + .login-modal.show.button-container a:hover{ + background-color: var(--color-highlight-blue); + color: var(--background-color); } - - .mega-menu > div:first-child p a > span:first-child { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-boldest); - line-height: 18px; - align-items: center; + + .triangle { + position: absolute; + width: 0; + height: 0; + top: -13px; + left: 320px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid white; } - .mega-menu .button-container:hover a.button::after { - transform: none; - opacity: 1; + .mega-menu-franklin div h2 { + position: relative; + font-size: var(--body-font-size-s); + font-weight: 600; + margin-left: 25px; } - - .mega-menu > div:first-child { + + + + .mega-menu-franklin > div:first-child { display: grid; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr 1fr; align-items: start; border-bottom: 2px solid #f5f6f7; - padding-bottom: 14px; - } - - .mega-menu > div:first-child > p > a > div { - margin-top: 5px; - line-height: 18px; - font-size: 13px; - font-weight: 400; - color: var(--color-dark-gray); - white-space: break-spaces; - text-align: left; } - - .mega-menu > div:first-child h2 { + + .mega-menu-franklin > div:first-child h2 { grid-column: span 3; } - .mega-menu div p { - margin-left: 15px; - } - - .bottom-links div p { - height: fit-content; - margin-left: 20px; - } - - .mega-menu > div:first-child p { + .mega-menu-franklin > div:first-child p { width: 250px; - margin-top: 0; + margin-top: 5px; border-radius: 5px; - padding: 0; - height: auto; + padding: 10px; + height: 85px; } - - .mega-menu > div:first-child p:hover { + + + .mega-menu-franklin > div:first-child p:hover { background-color: var(--highlight-light-blue); } - - .mega-menu > div:first-child > p:first-child { + + .mega-menu-franklin > div:first-child > p:first-child { grid-column: 1; } - - .mega-menu > div:first-child p a > span::after { + + .mega-menu-franklin > div:first-child p a > span::after { content: ''; width: 24px; height: 24px; @@ -908,97 +350,658 @@ header a.button:hover span.button-text { transition: all .2s cubic-bezier(.4,0,.2,1); opacity: 0; } - - .mega-menu > div:first-child p a:hover > span::after { + + .mega-menu-franklin > div:first-child p a:hover span::after { opacity: 1; background-color: var(--color-highlight-blue); } - - - .mega-menu > div:first-child p a { - padding: 7px 10px; - display: block; - color: var(--text-color) !important; - text-decoration: none; + + .mega-menu-franklin > div:first-child p a::after { + display: none; + } + + .options-wrapper.show div { + font-weight: var(--font-weight-bold); font-size: var(--body-font-size-s); - background-color: transparent; - border: none; + margin: 25px 13px 25px 20px; + position: relative; } - .mega-menu > div:first-child p:hover a { - color: var(--color-highlight-blue) !important; + .options-wrapper.show div::before { + border-color: black; + border-style: solid; + border-width: 0 2px 2px 0; + content: ""; + width: 0.5rem; + height: 0.5rem; + display: inline-block; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%) rotate(-45deg); } - .other-options { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - grid-gap: 0; - padding-top: 14px; + @media (max-width: 992px) { + .nav-wrapper { + display: none; + } + + p { + margin: 0; + } + + .header-wrapper > p{ + display: none; + } + + } + + .icon.icon-arrow-right { + position: absolute; + width: 10px; + height: 10px; + margin-left: 1px; + z-index: 5; + } + + .bottom-links div:nth-child(2) { + margin-left: 120px; + } + + .menu-bar { + display: block; + width: 100%; + height: 3px; + background-color: var(--text-color); + transition: transform 0.3s ease, opacity 0.3s ease; + will-change: transform, opacity; + } + + .menu-wrapper { + position: absolute; + top: 17px; + right: 20px; + width: 25px; + height: 25px; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: space-around; + z-index: 100; + } + + .menu-wrapper.change .menu-bar:first-child { + transform: rotate(-45deg) translate(-5px, 5px); + } + + .menu-wrapper.change .menu-bar:nth-child(2) { + opacity: 0; + } + + .menu-wrapper.change .menu-bar:last-child { + transform: rotate(45deg) translate(-6px,-7px); + } + + .header-wrapper.expanded { + height: 100vh; + width: 100vw; + z-index: 2; + } + + .options-wrapper { + position: relative; + top: var(--nav-height); + width: 100vw; + height: 0; + display: none; + } + + .options-wrapper.show{ + width: 100vw; + height: 100vh; + box-shadow: 0 10px 10px #0003; + z-index: 3; + border-top: 1px solid #cecccc; + display: block; + } + + .sub-menu { + display: none; } - #new, #evolved { + .sub-menu.show { + display: block; + } + + .options-wrapper.show .sub-menu-title { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + margin-left: 20px; + padding-left: 20px; position: relative; + } + + .options-wrapper.show .sub-menu-title::before { + border-color: black; + border-style: solid; + border-width: 0 2px 2px 0; + content: ""; + width: 0.5rem; + height: 0.5rem; + display: inline-block; + position: absolute; + left: 0; + top: 50%; + transform: translate(0, -50%) rotate(135deg); + } + + @keyframes slide-in { + from { + transform: translateX(100%); + } + + to { + transform: translateX(0); + } + } + + #icons-sprite-bitdefender-logo path { + fill: currentcolor + } + + @media(min-width: 767px) { /* tablet */ + .logo-container .icon { + width: 180px; + } + + } + + @media(min-width: 992px) { + header-wrapper::after { + content: ""; + position: absolute; + top: 39px; + left: 0; + right: 0; + width: 100%; + height: 2px; + background-color: #3c3c3c; + margin: 0 auto; + } + + .icon { + color: var(--text-color); + position: static; + } + + black-background .icon { + color: var(--text-dark-color); + } + + .header-wrapper { + height: var(--nav-height-desktop); + position: fixed; + z-index: 999; + margin: auto; + left: 0; + right: 0; + } + + .menu-wrapper { + display: none; + } + + .nav-wrapper { + width: 100%; + background-color: var(--text-color); + z-index: 100; + display: block; + margin: 0 auto; + } + + nav { + display: block; + max-width: var(--section-desktop-max-width); + height: 100%; + margin: 0 auto; + padding: 6px var(--section-desktop-padding) 10px; + position: relative; + } + + nav p { + line-height: 1.4; + font-size: var(--body-font-size-xxs); + font-weight: var(--font-weight-bold); + } + + .nav-sections { + display: inline-flex; + flex-wrap: wrap; + gap: 0; + } + + + .nav-brand a, + .nav-sections a { + color: var(--horizontal-separator-color); + text-decoration: none; + text-transform: uppercase; font-size: var(--body-font-size-xxs); - font-weight: 600; - color: var(--background-color); - background-color: var(--color-highlight-blue); - padding: 2px; - border-radius: 3px; - margin-left: 5px; + font-weight: var(--font-weight-bold); + margin-right: 0; + letter-spacing: 0.96px; + cursor: pointer; + line-height: 1.4; + display: inline-block; + position: relative; + } + + .nav-sections a { + margin: 0 15.5px; + } + + .logo a { + display: block; + } + + .nav-brand p a { + margin: 0 12px; + } + + .mega-menu-franklin div h2 > a { + transition: all 0.2s ease-in-out; + border-radius: 3px; + text-decoration: none; + padding: 7px 10px; + color: var(--link-color); + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + } + + .mega-menu-franklin div p a{ + position: relative; + font-size: var(--body-font-size-xs); + font-weight: 400; + color: var(--text-color); + } + + .nav-sections a:first-child{ + margin-right: 16px; + } + + .nav-brand p:first-child a{ + margin-left: 0; + } + + .nav-sections p a::before, + .nav-brand p a::before { + content: ""; + position: absolute; + top: 25px; + height: 3px; + background: var(--color-highlight-blue); + transition: all .3s ease; + width: 100%; + transform: scaleX(0); + transform-origin: left; + left: 0; } - - .bottom-links { - background-color: rgb(158 164 177 / 10%); - padding: 8px 11px; - margin-top: 20px; + + .nav-sections p a:hover::before, + .nav-brand p a.active::before, + .nav-brand p a:hover::before, + .nav-sections p.clicked a::before { + transform: scaleX(1); + transform-origin: left; } - -} - -@media (min-width: 1200px) { - .mega-menu { - left: 80px; - transform: translateX(0); + + /* Other existing styles */ + .mega-menu-franklin div h2 > a:hover { + background-color: var(--highlight-light-blue); } -} - -@media (min-width: 1400px) { - .mega-menu { - left: 210px; - transform: translateX(0); + + .nav-sections p:last-child:hover::after { + width: 50px; } -} - -@media (min-width: 1600px) { - .mega-menu { - left: 240px; - transform: translateX(0); + + .nav-sections p, + .nav-brand p { + position: relative; } -} - -@media (min-width: 1600px) { - nav { - max-width: var(--section-large-desktop-max-width); - padding-left: var(--section-large-desktop-padding); - padding-right: var(--section-large-desktop-padding); + + .nav-sections p::before, + .nav-brand p:not(:first-child)::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 16px; + width: 2px; + background-color: #616161; + } + + .logo-container { + padding: 20px var(--section-desktop-padding); + margin: 21px auto 0; + gap: 10px; + } + + .logo-container > p { + display: block; + font-weight: var(--font-weight-bold); + line-height: 1.63; + font-size: 15px; + } + + .home-solutions-link-hover { + color: #FFF; + } + + .home-solutions-link-default { + display: block; + color: var(--text-color); + cursor: pointer; + padding: 0 27px 31px; + position: relative; + margin-top: 35px; + } + + black-background .home-solutions-link-default { + color: #dedede; + } + + .home-solutions-link-default::before { + content: ""; + position: absolute; + bottom: 3px; + height: 4px; + background: #006eff; + transition: all .3s ease; + width: 100%; + transform: scaleX(0); + transform-origin: left; + left: 0; + } + + .home-solutions-link-hover::before { + transform: scaleX(1); + transform-origin: left; + } + + .mega-menu-franklin { + flex-direction: column; + position: absolute; + left: 80px; + top: 123px; + max-width: 920px; + width: 100%; + background-color: var(--background-color); + z-index: 3; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + box-shadow: 0 10px 10px #0003; + visibility: hidden; + display: none; + opacity: 0; + } + + .mega-menu-franklin-show { + opacity: 1; + visibility: visible; + display: flex; + } + + .mega-menu-franklin div h2 { + position: relative; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-boldest); + line-height: 18px; + padding: 7px 10px; + margin: 10px 25px 0 15px; + } + + .other-options > div:nth-child(5) { + grid-area: 2 / 3 / 3 / 4; + } + + .other-options > div:nth-child(4) { + grid-area: 2 / 2 / 3 / 3; + } + + .other-options > div:nth-child(3) { + grid-area: 1 / 3 / 2 / 4; + } + + .other-options > div:nth-child(2) { + grid-area: 1 / 2 / 2 / 3; + } + + .other-options > div:nth-child(1) { + grid-area: 1 / 1 / 3 / 2; + } + + .other-options > div > p { + position: relative; + top: 0; + margin-left: 20px; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-regular); + line-height: 18px; + } + + .other-options > div > h2 { + margin-top: 0; + } + + .other-options > div > p a.button { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-regular); + line-height: 18px; + text-decoration: none; + padding: 1px 10px; + background-color: transparent; + border-radius: 4px; + border: none; + } + + .other-options > div > p a.button:hover { + background-color: var(--highlight-light-blue); + transition: none; + transform: none; + } + + .mega-menu-franklin > div:first-child p a::after { + display: none; + } + + .other-options > div > p a:hover::after { + background-color: var(--color-highlight-blue); + } + + .other-options > div > p a.button > span { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-regular); + line-height: 18px; + position: relative; + color: var(--text-color); + } + + .mega-menu-franklin > div:first-child p a > span:first-child { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-boldest); + line-height: 18px; + align-items: center; + } + + .mega-menu-franklin .button-container:hover a.button::after { + transform: none; + opacity: 1; + } + + .mega-menu-franklin > div:first-child { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr 1fr; + align-items: start; + border-bottom: 2px solid #f5f6f7; + padding-bottom: 14px; + } + + .mega-menu-franklin > div:first-child > p > a > div { + margin-top: 5px; + line-height: 18px; + font-size: 13px; + font-weight: 400; + color: var(--color-dark-gray); + white-space: break-spaces; + text-align: left; + } + + .mega-menu-franklin > div:first-child h2 { + grid-column: span 3; + } + + .mega-menu-franklin div p { + margin-left: 15px; + } + + .bottom-links div p { + height: fit-content; + margin-left: 20px; + } + + .mega-menu-franklin > div:first-child p { + width: 250px; + margin-top: 0; + border-radius: 5px; + padding: 0; + height: auto; + } + + .mega-menu-franklin > div:first-child p:hover { + background-color: var(--highlight-light-blue); + } + + .mega-menu-franklin > div:first-child > p:first-child { + grid-column: 1; + } + + .mega-menu-franklin > div:first-child p a > span::after { + content: ''; + width: 24px; + height: 24px; + /* stylelint-disable-next-line property-no-vendor-prefix */ + -webkit-mask:url('/_src/icons/arrow-right.svg'); + mask: url('/_src/icons/arrow-right.svg'); + background-color: var(--button-link-color); + display: inline-block; + transition: all .2s cubic-bezier(.4,0,.2,1); + opacity: 0; + } + + .mega-menu-franklin > div:first-child p a:hover > span::after { + opacity: 1; + background-color: var(--color-highlight-blue); + } + + + .mega-menu-franklin > div:first-child p a { + padding: 7px 10px; + display: block; + color: var(--text-color) !important; + text-decoration: none; + font-size: var(--body-font-size-s); + background-color: transparent; + border: none; + } + + .mega-menu-franklin > div:first-child p:hover a { + color: var(--color-highlight-blue) !important; + } + + .other-options { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 0; + padding-top: 14px; + } + + #new, #evolved { + position: relative; + font-size: var(--body-font-size-xxs); + font-weight: 600; + color: var(--background-color); + background-color: var(--color-highlight-blue); + padding: 2px; + border-radius: 3px; + margin-left: 5px; + } + + .bottom-links { + background-color: rgb(158 164 177 / 10%); + padding: 8px 11px; + margin-top: 20px; + } + } - - .nav-brand p a { - margin: 0 19px; + + @media (min-width: 1200px) { + .mega-menu-franklin { + left: 80px; + transform: translateX(0); + } } - - .logo-container { - max-width: var(--section-large-desktop-max-width); - padding-left: var(--section-large-desktop-padding); - padding-right: var(--section-large-desktop-padding); + + @media (min-width: 1400px) { + .mega-menu-franklin { + left: 210px; + transform: translateX(0); + } } - - .logo-container > p { - font-size: 16px; + + @media (min-width: 1600px) { + .mega-menu-franklin { + left: 240px; + transform: translateX(0); + } } - - .home-solutions-link-default { - padding-left: 20px; + + @media (min-width: 1600px) { + nav { + max-width: var(--section-large-desktop-max-width); + padding-left: var(--section-large-desktop-padding); + padding-right: var(--section-large-desktop-padding); + } + + .nav-brand p a { + margin: 0 19px; + } + + .logo-container { + max-width: var(--section-large-desktop-max-width); + padding-left: var(--section-large-desktop-padding); + padding-right: var(--section-large-desktop-padding); + } + + .logo-container > p { + font-size: 16px; + } + + .home-solutions-link-default { + padding-left: 20px; + } } -} \ No newline at end of file +} + +.header-wrapper { + position: sticky; + top: 0; + transition: height 0.3s ease-in-out; + background-color: var(--white-color); +} + +.mega-menu a { + color: black; +} diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 5ecdee7b5..c34583e9c 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -33,7 +33,7 @@ function handleLoginClick() { } function appendUlToP() { - const divs = document.querySelectorAll('.mega-menu > div'); + const divs = document.querySelectorAll('.mega-menu-franklin > div'); divs.forEach((div) => { const uls = div.querySelectorAll('ul'); @@ -59,7 +59,7 @@ function wrapDivsInMegaMenu() { const divs = Array.from(nav.children).filter((node) => node.tagName.toLowerCase() === 'div'); const navSectionsIndex = divs.findIndex((div) => div.classList.contains('nav-sections')); const megaMenuDiv = document.createElement('div'); - megaMenuDiv.className = 'mega-menu'; + megaMenuDiv.className = 'mega-menu-franklin'; decorateBlockWithRegionId(megaMenuDiv, 'Main Menu|Home Solutions'); const otherOptionsDiv = document.createElement('div'); @@ -95,7 +95,7 @@ function wrapDivsInMegaMenu() { otherOptionsDiv.appendChild(bottomLinks.firstElementChild); } - const loginModal = document.querySelector('.mega-menu > div:first-child'); + const loginModal = document.querySelector('.mega-menu-franklin > div:first-child'); nav.appendChild(loginModal); } @@ -173,7 +173,7 @@ function renderDesktopHeader(block, nav) { const bottomLinks = document.querySelector('.bottom-links'); bottomLinks.removeChild(bottomLinks.lastElementChild); - const megaMenu = document.querySelector('.mega-menu'); + const megaMenu = document.querySelector('.mega-menu-franklin'); let isOverHomeSolutions = false; let isOverMegaMenu = false; @@ -242,8 +242,8 @@ function handleMenuClick() { } }); - // Select the first child of mega-menu and all div children of other-options - const megaMenuFirstChild = document.querySelector('.mega-menu').firstElementChild; + // Select the first child of mega-menu-franklin and all div children of other-options + const megaMenuFirstChild = document.querySelector('.mega-menu-franklin').firstElementChild; const otherOptionsChildren = Array.from(document.querySelector('.other-options').children); const navDivs = [megaMenuFirstChild].concat(otherOptionsChildren); @@ -384,6 +384,32 @@ export default async function decorate(block) { if (resp.ok) { const html = await resp.text(); + if (html.includes('aem-banner')) { + const aemHeaderFetch = await fetch('https://www.bitdefender.com/content/experience-fragments/bitdefender/language_master/en/header-navigation/mega-menu/master/jcr:content/root/mega_menu.styled.html'); + const aemHeaderHtml = await aemHeaderFetch.text(); + const nav = document.createElement('div'); + nav.classList.add('mega-menu'); + nav.innerHTML = aemHeaderHtml; + + const cssFile = nav.querySelector('link[rel="stylesheet"]'); + cssFile.href = `https://www.bitdefender.com${cssFile.getAttribute('href')}`; + + const scriptFile = nav.querySelector('script'); + const newScriptFile = document.createElement('script'); + newScriptFile.src = `https://www.bitdefender.com${scriptFile.getAttribute('src')}`; + nav.appendChild(newScriptFile); + + const navHeader = nav.querySelector('header'); + navHeader.style.height = 'auto'; + + const body = document.querySelector('body'); + body.style.maxWidth = 'initial'; + + const header = document.querySelector('header'); + header.replaceWith(nav); + return; + } + const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = html; diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 57c96e563..06d2f7e81 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -337,7 +337,7 @@ main .section.link-right a { position: absolute; width: 100%; height: 100%; - z-index: -1; + z-index: 0; background-color: var(--blue); } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 6af02a9b6..afae1783f 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -323,7 +323,7 @@ body.no-scroll { overflow: hidden; } -header { +header.header-wrapper { height: var(--nav-height); } @@ -568,7 +568,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } @media screen and (min-width: 992px) { /* desktop */ - header { + header.header-wrapper { height: var(--nav-height-desktop); position: absolute; z-index: 999; @@ -637,7 +637,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } @media (min-width: 1000px) { - header { + header.header-wrapper { height: var(--nav-height-desktop); } } From eb4f04e2fd8c8352ff70d207031735d6bf3f9eaa Mon Sep 17 00:00:00 2001 From: Ionut MANTESCU Date: Tue, 27 Feb 2024 11:35:51 +0200 Subject: [PATCH 0134/1296] terms and conditions section --- _src/blocks/terms/terms.css | 31 +++++++++++++++++++++++++++++++ _src/blocks/terms/terms.js | 5 +++++ 2 files changed, 36 insertions(+) create mode 100644 _src/blocks/terms/terms.css create mode 100644 _src/blocks/terms/terms.js diff --git a/_src/blocks/terms/terms.css b/_src/blocks/terms/terms.css new file mode 100644 index 000000000..23e31d876 --- /dev/null +++ b/_src/blocks/terms/terms.css @@ -0,0 +1,31 @@ +@media (min-width: 992px) { /* desktop */ + .terms-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (min-width: 1600px) { /* large desktop */ + .terms-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} + +.terms-container { + background-color: #f2f2f2; +} + +.terms-container h6 { + font-size: 16px; + font-weight: bold; +} +.terms-container .terms div, +.terms-container .terms div p { + font-size: 12px; +} +.terms-container .terms div p strong { + font-weight: bold; + margin-top: 15px; +} \ No newline at end of file diff --git a/_src/blocks/terms/terms.js b/_src/blocks/terms/terms.js new file mode 100644 index 000000000..143ed8687 --- /dev/null +++ b/_src/blocks/terms/terms.js @@ -0,0 +1,5 @@ +import { createTag } from '../../scripts/utils/utils.js'; + +export default function decorate(block) { + +} \ No newline at end of file From 9934bc201b373a7bdf3bb9e7c6ca783ae611a526 Mon Sep 17 00:00:00 2001 From: vradulescu-bd <140399829+vradulescu-bd@users.noreply.github.com> Date: Tue, 27 Feb 2024 11:53:43 +0200 Subject: [PATCH 0135/1296] Revert "Update CSS and JavaScript for header selection" --- _src/blocks/header/header.css | 1767 +++++++++---------- _src/blocks/header/header.js | 38 +- _src/scripts/template-factories/trusted.css | 2 +- _src/styles/styles.css | 6 +- 4 files changed, 892 insertions(+), 921 deletions(-) diff --git a/_src/blocks/header/header.css b/_src/blocks/header/header.css index cecacb5cd..3077c98d4 100644 --- a/_src/blocks/header/header.css +++ b/_src/blocks/header/header.css @@ -3,342 +3,900 @@ --dark-header-icon-color: #000; } -header.header-wrapper{ +header { z-index: 100; - - p { - margin: 0; +} + + +header p { + margin: 0; +} + +.header-wrapper { + position: sticky; + top: 0; + transition: height 0.3s ease-in-out; + background-color: var(--white-color); +} + +nav { + display: none; +} + +.nav-wrapper { + display: none; +} + +.nav-brand, +.nav-sections { + display: inline-flex; + align-items: flex-start; + width: 49.5%; +} + +.nav-brand { + flex-wrap: nowrap; + justify-content: flex-start; +} + +.nav-sections { + flex-wrap: nowrap; + justify-content: flex-end; +} + +.nav-brand p, +.nav-sections p { + display: inline-block; +} + +.bottom-links div, .bottom-links p{ + display: inline-block; +} + +.login-modal > p { + position: relative; + width: 100%; + display: block; + text-align: center; + margin-top: 45px; +} + +.header-wrapper > p { + margin-top: 0; + padding: 15px; + text-align: center; + font-size: var(--body-font-size-s); + color: var(--horizontal-separator-color); + text-decoration: none; + cursor: pointer; + width: 175px; + height: 50px; +} + +@keyframes animate-bottom-border { + 0% { + transform: scaleX(0); + transform-origin: left; } - - nav { - display: none; + + 100% { + transform: scaleX(1); + transform-origin: left; } - +} + +.home-button-border { + position: absolute; + margin-top: 12px; + width: 70px; + height: 3px; + background-color: var(--color-highlight-blue); +} + +.nav-divider { + display: flex; + flex-wrap: nowrap; + justify-content: flex-end; + min-width: 2px; + width: 2px; + background-color: var(--color-dark-gray); + height: 20px; + margin-right: 15px; + margin-top: 7.5px; +} + +.login-modal { + display: none; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + position: absolute; + right: min(15px, calc(100vw - 880px)); + width: 375px; + height: 275px; + top: 80px; + background-color: var(--background-color); + border-radius: 5px; + opacity: 0; + transition: all 0.3s ease-in-out; + box-shadow: 0 10px 10px #0003; + z-index: 0; + transform: translateY(20px); +} + +.login-modal.show { + opacity: 1; + top: 60px; + z-index: 5; + transform: translateY(0); +} + + +.login-modal h2 { + position: relative; + white-space: nowrap; + color: var(--text-color); + font-size: var(--body-font-size-s); + width: 100%; + margin-left: 25px; + top: 15px; + text-align: left; +} + +.divider { + position: absolute; + margin-top: 45px; + width: 100%; + height: 1px; + background-color: var(--color-dark-gray); +} + +.login-modal a { + text-decoration: none; + color: var(--color-highlight-blue) !important; + width: 330px; + height: 55px; + border-radius: 9px; + border: 2px solid var(--color-highlight-blue) !important; + background-color: transparent !important; + margin: -70px; + padding: 5px; + display: inline-block; + font-size: var(--body-font-size-xs); + font-weight: 500; +} + +header a.button:any-link { + padding: 0; +} + +.login-modal a.button:any-link { + height: 50px; + padding-right: 15px; +} + +header a.button::after { + margin-left: 0; +} + +.login-modal a.button::after { + position: relative; + margin-left: 220px; +} + +.login-modal a.button:any-link span { + margin-left: 25%; + position: absolute; + font-weight: 500; +} + +.login-modal.show p.button-container:nth-child(3) span { + margin-left: 13%; +} + +.login-modal.show p.button-container:nth-child(3) a.button::after { + margin-left: 280px; +} + +.login-modal.show p.button-container:nth-child(4) span { + margin-left: 33%; +} + +.login-modal.show p.button-container:nth-child(4) a.button::after { + margin-left: 200px; +} + +.logo-container { + height: 100%; + display: flex; + justify-content: start; + align-items: center; + max-width: var(--section-desktop-max-width); + margin: 0 auto; + padding: 0 var(--body-padding); +} + +header.expanded .logo-container { + height: var(--nav-height); + position: absolute; + top: 0; + left: 0; +} + +.logo-container > p { + display: none; +} + +.login-buttons a p { + text-align: center; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + margin-top: 5px; + transition: all 0.3s ease-in-out; + height: 100%; +} + +header .icon { + position: absolute; + margin: 0; + z-index: 1000; + top: 15px; + width: 103px; + height: 30px; + filter: none; + left: 20px; + color: var(--dark-background-color); +} + +.bottom-links p > a { + text-decoration: none; + font-size: var(--body-font-size-xxs) !important; + font-weight: 500 !important; +} + +.login-modal a:hover { + background-color: var(--color-highlight-blue) !important; + color: var(--background-color) !important; +} + +header a.button span.button-text { + display: flex; + font-size: var(--body-font-size-xs); + font-weight: 400; +} + +header a.button:hover span.button-text { + transform: none; +} + +.options-wrapper.show a { + display: block; + margin-left: 40px; + color: var(--text-color); + font-size: var(--body-font-size-xs); + margin-top: 10px; + text-decoration: none; + animation: slide-in 0.2s 0.075s forwards; + background-color: transparent !important; + border: transparent !important; +} + +.bottom-links p:hover > a { + color: var(--color-highlight-blue) !important; +} + +.header-wrapper > p a:hover{ + color: var(--background-color); +} + +.options-wrapper.show > a:first-child { + margin-top: 40px; +} + +.login-modal.show.button-container a:hover{ + background-color: var(--color-highlight-blue); + color: var(--background-color); +} + +.triangle { + position: absolute; + width: 0; + height: 0; + top: -13px; + left: 320px; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 20px solid white; +} + +.mega-menu div h2 { + position: relative; + font-size: var(--body-font-size-s); + font-weight: 600; + margin-left: 25px; +} + + + +.mega-menu > div:first-child { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: 1fr 1fr 1fr; + align-items: start; + border-bottom: 2px solid #f5f6f7; +} + +.mega-menu > div:first-child h2 { + grid-column: span 3; +} + +.mega-menu > div:first-child p { + width: 250px; + margin-top: 5px; + border-radius: 5px; + padding: 10px; + height: 85px; +} + + +.mega-menu > div:first-child p:hover { + background-color: var(--highlight-light-blue); +} + +.mega-menu > div:first-child > p:first-child { + grid-column: 1; +} + +.mega-menu > div:first-child p a > span::after { + content: ''; + width: 24px; + height: 24px; + /* stylelint-disable-next-line property-no-vendor-prefix */ + -webkit-mask:url('/_src/icons/arrow-right.svg'); + mask: url('/_src/icons/arrow-right.svg'); + background-color: var(--button-link-color); + display: inline-block; + transition: all .2s cubic-bezier(.4,0,.2,1); + opacity: 0; +} + +.mega-menu > div:first-child p a:hover span::after { + opacity: 1; + background-color: var(--color-highlight-blue); +} + +.mega-menu > div:first-child p a::after { + display: none; +} + +.options-wrapper.show div { + font-weight: var(--font-weight-bold); + font-size: var(--body-font-size-s); + margin: 25px 13px 25px 20px; + position: relative; +} + +.options-wrapper.show div::before { + border-color: black; + border-style: solid; + border-width: 0 2px 2px 0; + content: ""; + width: 0.5rem; + height: 0.5rem; + display: inline-block; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%) rotate(-45deg); +} + +@media (max-width: 992px) { .nav-wrapper { display: none; } - - .nav-brand, - .nav-sections { - display: inline-flex; - align-items: flex-start; - width: 49.5%; - } - - .nav-brand { - flex-wrap: nowrap; - justify-content: flex-start; + + header p { + margin: 0; } - - .nav-sections { - flex-wrap: nowrap; - justify-content: flex-end; + + .header-wrapper > p{ + display: none; } - .nav-brand p, - .nav-sections p { - display: inline-block; +} + +.icon.icon-arrow-right { + position: absolute; + width: 10px; + height: 10px; + margin-left: 1px; + z-index: 5; +} + +.bottom-links div:nth-child(2) { + margin-left: 120px; +} + +.menu-bar { + display: block; + width: 100%; + height: 3px; + background-color: var(--text-color); + transition: transform 0.3s ease, opacity 0.3s ease; + will-change: transform, opacity; +} + +.menu-wrapper { + position: absolute; + top: 17px; + right: 20px; + width: 25px; + height: 25px; + cursor: pointer; + display: flex; + flex-direction: column; + justify-content: space-around; + z-index: 100; +} + +.menu-wrapper.change .menu-bar:first-child { + transform: rotate(-45deg) translate(-5px, 5px); +} + +.menu-wrapper.change .menu-bar:nth-child(2) { + opacity: 0; +} + +.menu-wrapper.change .menu-bar:last-child { + transform: rotate(45deg) translate(-6px,-7px); +} + +.header-wrapper.expanded { + height: 100vh; + width: 100vw; + z-index: 2; +} + +.options-wrapper { + position: relative; + top: var(--nav-height); + width: 100vw; + height: 0; + display: none; +} + +.options-wrapper.show{ + width: 100vw; + height: 100vh; + box-shadow: 0 10px 10px #0003; + z-index: 3; + border-top: 1px solid #cecccc; + display: block; +} + +.sub-menu { + display: none; +} + +.sub-menu.show { + display: block; +} + +.options-wrapper.show .sub-menu-title { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + margin-left: 20px; + padding-left: 20px; + position: relative; +} + +.options-wrapper.show .sub-menu-title::before { + border-color: black; + border-style: solid; + border-width: 0 2px 2px 0; + content: ""; + width: 0.5rem; + height: 0.5rem; + display: inline-block; + position: absolute; + left: 0; + top: 50%; + transform: translate(0, -50%) rotate(135deg); +} + +@keyframes slide-in { + from { + transform: translateX(100%); } - - .bottom-links div, .bottom-links p{ - display: inline-block; + + to { + transform: translateX(0); } - - .login-modal > p { - position: relative; - width: 100%; - display: block; - text-align: center; - margin-top: 45px; +} + +#icons-sprite-bitdefender-logo path { + fill: currentcolor +} + +@media(min-width: 767px) { /* tablet */ + .logo-container .icon { + width: 180px; } - - .header-wrapper > p { - margin-top: 0; - padding: 15px; - text-align: center; - font-size: var(--body-font-size-s); - color: var(--horizontal-separator-color); - text-decoration: none; - cursor: pointer; - width: 175px; - height: 50px; + +} + +@media(min-width: 992px) { + header.header-wrapper::after { + content: ""; + position: absolute; + top: 39px; + left: 0; + right: 0; + width: 100%; + height: 2px; + background-color: #3c3c3c; + margin: 0 auto; } - - @keyframes animate-bottom-border { - 0% { - transform: scaleX(0); - transform-origin: left; - } - - 100% { - transform: scaleX(1); - transform-origin: left; - } + + header .icon { + color: var(--text-color); + position: static; } - - .home-button-border { - position: absolute; - margin-top: 12px; - width: 70px; - height: 3px; - background-color: var(--color-highlight-blue); + + header.black-background .icon { + color: var(--text-dark-color); } - - .nav-divider { - display: flex; - flex-wrap: nowrap; - justify-content: flex-end; - min-width: 2px; - width: 2px; - background-color: var(--color-dark-gray); - height: 20px; - margin-right: 15px; - margin-top: 7.5px; + + .header-wrapper { + height: var(--nav-height-desktop); + position: fixed; + z-index: 999; + margin: auto; + left: 0; + right: 0; } - - .login-modal { + + .menu-wrapper { display: none; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - position: absolute; - right: min(15px, calc(100vw - 880px)); - width: 375px; - height: 275px; - top: 80px; - background-color: var(--background-color); - border-radius: 5px; - opacity: 0; - transition: all 0.3s ease-in-out; - box-shadow: 0 10px 10px #0003; - z-index: 0; - transform: translateY(20px); } - - .login-modal.show { - opacity: 1; - top: 60px; - z-index: 5; - transform: translateY(0); + + .nav-wrapper { + width: 100%; + background-color: var(--text-color); + z-index: 100; + display: block; + margin: 0 auto; } - - .login-modal h2 { + nav { + display: block; + max-width: var(--section-desktop-max-width); + height: 100%; + margin: 0 auto; + padding: 6px var(--section-desktop-padding) 10px; position: relative; - white-space: nowrap; - color: var(--text-color); - font-size: var(--body-font-size-s); - width: 100%; - margin-left: 25px; - top: 15px; - text-align: left; } - - .divider { - position: absolute; - margin-top: 45px; - width: 100%; - height: 1px; - background-color: var(--color-dark-gray); + + nav p { + line-height: 1.4; + font-size: var(--body-font-size-xxs); + font-weight: var(--font-weight-bold); } - - .login-modal a { + + .nav-sections { + display: inline-flex; + flex-wrap: wrap; + gap: 0; + } + + + .nav-brand a, + .nav-sections a { + color: var(--horizontal-separator-color); + text-decoration: none; + text-transform: uppercase; + font-size: var(--body-font-size-xxs); + font-weight: var(--font-weight-bold); + margin-right: 0; + letter-spacing: 0.96px; + cursor: pointer; + line-height: 1.4; + display: inline-block; + position: relative; + } + + .nav-sections a { + margin: 0 15.5px; + } + + .logo a { + display: block; + } + + .nav-brand p a { + margin: 0 12px; + } + + .mega-menu div h2 > a { + transition: all 0.2s ease-in-out; + border-radius: 3px; text-decoration: none; - color: var(--color-highlight-blue) !important; - width: 330px; - height: 55px; - border-radius: 9px; - border: 2px solid var(--color-highlight-blue) !important; - background-color: transparent !important; - margin: -70px; - padding: 5px; - display: inline-block; + padding: 7px 10px; + color: var(--link-color); font-size: var(--body-font-size-xs); - font-weight: 500; + font-weight: var(--font-weight-bold); } - - a.button:any-link { - padding: 0; + + .mega-menu div p a{ + position: relative; + font-size: var(--body-font-size-xs); + font-weight: 400; + color: var(--text-color); } - - .login-modal a.button:any-link { - height: 50px; - padding-right: 15px; + + .nav-sections a:first-child{ + margin-right: 16px; } - - a.button::after { + + .nav-brand p:first-child a{ margin-left: 0; } + +.nav-sections p a::before, +.nav-brand p a::before { + content: ""; + position: absolute; + top: 25px; + height: 3px; + background: var(--color-highlight-blue); + transition: all .3s ease; + width: 100%; + transform: scaleX(0); + transform-origin: left; + left: 0; +} + +.nav-sections p a:hover::before, +.nav-brand p a.active::before, +.nav-brand p a:hover::before, +.nav-sections p.clicked a::before { + transform: scaleX(1); + transform-origin: left; +} + +/* Other existing styles */ +.mega-menu div h2 > a:hover { + background-color: var(--highlight-light-blue); +} + +.nav-sections p:last-child:hover::after { + width: 50px; +} + +.nav-sections p, +.nav-brand p { + position: relative; +} + +.nav-sections p::before, +.nav-brand p:not(:first-child)::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 16px; + width: 2px; + background-color: #616161; +} - .login-modal a.button::after { - position: relative; - margin-left: 220px; + .logo-container { + padding: 20px var(--section-desktop-padding); + margin: 21px auto 0; + gap: 10px; } - .login-modal a.button:any-link span { - margin-left: 25%; - position: absolute; - font-weight: 500; + .logo-container > p { + display: block; + font-weight: var(--font-weight-bold); + line-height: 1.63; + font-size: 15px; } - - .login-modal.show p.button-container:nth-child(3) span { - margin-left: 13%; + + .home-solutions-link-hover { + color: #FFF; } - .login-modal.show p.button-container:nth-child(3) a.button::after { - margin-left: 280px; + .home-solutions-link-default { + display: block; + color: var(--text-color); + cursor: pointer; + padding: 0 27px 31px; + position: relative; + margin-top: 35px; } - - .login-modal.show p.button-container:nth-child(4) span { - margin-left: 33%; + + header.black-background .home-solutions-link-default { + color: #dedede; } - .login-modal.show p.button-container:nth-child(4) a.button::after { - margin-left: 200px; + .home-solutions-link-default::before { + content: ""; + position: absolute; + bottom: 3px; + height: 4px; + background: #006eff; + transition: all .3s ease; + width: 100%; + transform: scaleX(0); + transform-origin: left; + left: 0; } - - .logo-container { - height: 100%; - display: flex; - justify-content: start; - align-items: center; - max-width: var(--section-desktop-max-width); - margin: 0 auto; - padding: 0 var(--body-padding); + + .home-solutions-link-hover::before { + transform: scaleX(1); + transform-origin: left; } - - expanded .logo-container { - height: var(--nav-height); + + .mega-menu { + flex-direction: column; position: absolute; - top: 0; - left: 0; + left: 80px; + top: 123px; + max-width: 920px; + width: 100%; + background-color: var(--background-color); + z-index: 3; + transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + box-shadow: 0 10px 10px #0003; + visibility: hidden; + display: none; + opacity: 0; } - .logo-container > p { - display: none; + .mega-menu-show { + opacity: 1; + visibility: visible; + display: flex; + } + + .mega-menu div h2 { + position: relative; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-boldest); + line-height: 18px; + padding: 7px 10px; + margin: 10px 25px 0 15px; + } + + .other-options > div:nth-child(5) { + grid-area: 2 / 3 / 3 / 4; } - .login-buttons a p { - text-align: center; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); - margin-top: 5px; - transition: all 0.3s ease-in-out; - height: 100%; + .other-options > div:nth-child(4) { + grid-area: 2 / 2 / 3 / 3; } - .icon { - position: absolute; - margin: 0; - z-index: 1000; - top: 15px; - width: 103px; - height: 30px; - filter: none; - left: 20px; - color: var(--dark-background-color); + .other-options > div:nth-child(3) { + grid-area: 1 / 3 / 2 / 4; } - .bottom-links p > a { - text-decoration: none; - font-size: var(--body-font-size-xxs) !important; - font-weight: 500 !important; + .other-options > div:nth-child(2) { + grid-area: 1 / 2 / 2 / 3; } - .login-modal a:hover { - background-color: var(--color-highlight-blue) !important; - color: var(--background-color) !important; + .other-options > div:nth-child(1) { + grid-area: 1 / 1 / 3 / 2; } - a.button span.button-text { - display: flex; + .other-options > div > p { + position: relative; + top: 0; + margin-left: 20px; font-size: var(--body-font-size-xs); - font-weight: 400; + font-weight: var(--font-weight-regular); + line-height: 18px; } - - a.button:hover span.button-text { - transform: none; + + .other-options > div > h2 { + margin-top: 0; } - - .options-wrapper.show a { - display: block; - margin-left: 40px; - color: var(--text-color); + + header .other-options > div > p a.button { font-size: var(--body-font-size-xs); - margin-top: 10px; + font-weight: var(--font-weight-regular); + line-height: 18px; text-decoration: none; - animation: slide-in 0.2s 0.075s forwards; - background-color: transparent !important; - border: transparent !important; + padding: 1px 10px; + background-color: transparent; + border-radius: 4px; + border: none; } - - .bottom-links p:hover > a { - color: var(--color-highlight-blue) !important; - } - - .header-wrapper > p a:hover{ - color: var(--background-color); + + header .other-options > div > p a.button:hover { + background-color: var(--highlight-light-blue); + transition: none; + transform: none; } - .options-wrapper.show > a:first-child { - margin-top: 40px; + .mega-menu > div:first-child p a::after { + display: none; } - - .login-modal.show.button-container a:hover{ + + header .other-options > div > p a:hover::after { background-color: var(--color-highlight-blue); - color: var(--background-color); } - - .triangle { - position: absolute; - width: 0; - height: 0; - top: -13px; - left: 320px; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - border-bottom: 20px solid white; - } - - .mega-menu-franklin div h2 { + + header .other-options > div > p a.button > span { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-regular); + line-height: 18px; position: relative; - font-size: var(--body-font-size-s); - font-weight: 600; - margin-left: 25px; + color: var(--text-color); + } + + .mega-menu > div:first-child p a > span:first-child { + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-boldest); + line-height: 18px; + align-items: center; } - - - .mega-menu-franklin > div:first-child { + .mega-menu .button-container:hover a.button::after { + transform: none; + opacity: 1; + } + + .mega-menu > div:first-child { display: grid; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr 1fr; align-items: start; border-bottom: 2px solid #f5f6f7; + padding-bottom: 14px; } - - .mega-menu-franklin > div:first-child h2 { + + .mega-menu > div:first-child > p > a > div { + margin-top: 5px; + line-height: 18px; + font-size: 13px; + font-weight: 400; + color: var(--color-dark-gray); + white-space: break-spaces; + text-align: left; + } + + .mega-menu > div:first-child h2 { grid-column: span 3; } - .mega-menu-franklin > div:first-child p { + .mega-menu div p { + margin-left: 15px; + } + + .bottom-links div p { + height: fit-content; + margin-left: 20px; + } + + .mega-menu > div:first-child p { width: 250px; - margin-top: 5px; + margin-top: 0; border-radius: 5px; - padding: 10px; - height: 85px; + padding: 0; + height: auto; } - - - .mega-menu-franklin > div:first-child p:hover { + + .mega-menu > div:first-child p:hover { background-color: var(--highlight-light-blue); } - - .mega-menu-franklin > div:first-child > p:first-child { + + .mega-menu > div:first-child > p:first-child { grid-column: 1; } - - .mega-menu-franklin > div:first-child p a > span::after { + + .mega-menu > div:first-child p a > span::after { content: ''; width: 24px; height: 24px; @@ -350,658 +908,97 @@ header.header-wrapper{ transition: all .2s cubic-bezier(.4,0,.2,1); opacity: 0; } - - .mega-menu-franklin > div:first-child p a:hover span::after { + + .mega-menu > div:first-child p a:hover > span::after { opacity: 1; background-color: var(--color-highlight-blue); } - - .mega-menu-franklin > div:first-child p a::after { - display: none; - } - - .options-wrapper.show div { - font-weight: var(--font-weight-bold); - font-size: var(--body-font-size-s); - margin: 25px 13px 25px 20px; - position: relative; - } - - .options-wrapper.show div::before { - border-color: black; - border-style: solid; - border-width: 0 2px 2px 0; - content: ""; - width: 0.5rem; - height: 0.5rem; - display: inline-block; - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%) rotate(-45deg); - } - - @media (max-width: 992px) { - .nav-wrapper { - display: none; - } - - p { - margin: 0; - } - - .header-wrapper > p{ - display: none; - } - - } - - .icon.icon-arrow-right { - position: absolute; - width: 10px; - height: 10px; - margin-left: 1px; - z-index: 5; - } - - .bottom-links div:nth-child(2) { - margin-left: 120px; - } - - .menu-bar { - display: block; - width: 100%; - height: 3px; - background-color: var(--text-color); - transition: transform 0.3s ease, opacity 0.3s ease; - will-change: transform, opacity; - } - - .menu-wrapper { - position: absolute; - top: 17px; - right: 20px; - width: 25px; - height: 25px; - cursor: pointer; - display: flex; - flex-direction: column; - justify-content: space-around; - z-index: 100; - } - - .menu-wrapper.change .menu-bar:first-child { - transform: rotate(-45deg) translate(-5px, 5px); - } - - .menu-wrapper.change .menu-bar:nth-child(2) { - opacity: 0; - } - - .menu-wrapper.change .menu-bar:last-child { - transform: rotate(45deg) translate(-6px,-7px); - } - - .header-wrapper.expanded { - height: 100vh; - width: 100vw; - z-index: 2; - } - - .options-wrapper { - position: relative; - top: var(--nav-height); - width: 100vw; - height: 0; - display: none; - } - - .options-wrapper.show{ - width: 100vw; - height: 100vh; - box-shadow: 0 10px 10px #0003; - z-index: 3; - border-top: 1px solid #cecccc; + + + .mega-menu > div:first-child p a { + padding: 7px 10px; display: block; + color: var(--text-color) !important; + text-decoration: none; + font-size: var(--body-font-size-s); + background-color: transparent; + border: none; } - .sub-menu { - display: none; + .mega-menu > div:first-child p:hover a { + color: var(--color-highlight-blue) !important; } - .sub-menu.show { - display: block; + .other-options { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 0; + padding-top: 14px; } - .options-wrapper.show .sub-menu-title { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); - margin-left: 20px; - padding-left: 20px; + #new, #evolved { position: relative; - } - - .options-wrapper.show .sub-menu-title::before { - border-color: black; - border-style: solid; - border-width: 0 2px 2px 0; - content: ""; - width: 0.5rem; - height: 0.5rem; - display: inline-block; - position: absolute; - left: 0; - top: 50%; - transform: translate(0, -50%) rotate(135deg); - } - - @keyframes slide-in { - from { - transform: translateX(100%); - } - - to { - transform: translateX(0); - } - } - - #icons-sprite-bitdefender-logo path { - fill: currentcolor - } - - @media(min-width: 767px) { /* tablet */ - .logo-container .icon { - width: 180px; - } - - } - - @media(min-width: 992px) { - header-wrapper::after { - content: ""; - position: absolute; - top: 39px; - left: 0; - right: 0; - width: 100%; - height: 2px; - background-color: #3c3c3c; - margin: 0 auto; - } - - .icon { - color: var(--text-color); - position: static; - } - - black-background .icon { - color: var(--text-dark-color); - } - - .header-wrapper { - height: var(--nav-height-desktop); - position: fixed; - z-index: 999; - margin: auto; - left: 0; - right: 0; - } - - .menu-wrapper { - display: none; - } - - .nav-wrapper { - width: 100%; - background-color: var(--text-color); - z-index: 100; - display: block; - margin: 0 auto; - } - - nav { - display: block; - max-width: var(--section-desktop-max-width); - height: 100%; - margin: 0 auto; - padding: 6px var(--section-desktop-padding) 10px; - position: relative; - } - - nav p { - line-height: 1.4; - font-size: var(--body-font-size-xxs); - font-weight: var(--font-weight-bold); - } - - .nav-sections { - display: inline-flex; - flex-wrap: wrap; - gap: 0; - } - - - .nav-brand a, - .nav-sections a { - color: var(--horizontal-separator-color); - text-decoration: none; - text-transform: uppercase; font-size: var(--body-font-size-xxs); - font-weight: var(--font-weight-bold); - margin-right: 0; - letter-spacing: 0.96px; - cursor: pointer; - line-height: 1.4; - display: inline-block; - position: relative; - } - - .nav-sections a { - margin: 0 15.5px; - } - - .logo a { - display: block; - } - - .nav-brand p a { - margin: 0 12px; - } - - .mega-menu-franklin div h2 > a { - transition: all 0.2s ease-in-out; - border-radius: 3px; - text-decoration: none; - padding: 7px 10px; - color: var(--link-color); - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); - } - - .mega-menu-franklin div p a{ - position: relative; - font-size: var(--body-font-size-xs); - font-weight: 400; - color: var(--text-color); - } - - .nav-sections a:first-child{ - margin-right: 16px; - } - - .nav-brand p:first-child a{ - margin-left: 0; - } - - .nav-sections p a::before, - .nav-brand p a::before { - content: ""; - position: absolute; - top: 25px; - height: 3px; - background: var(--color-highlight-blue); - transition: all .3s ease; - width: 100%; - transform: scaleX(0); - transform-origin: left; - left: 0; - } - - .nav-sections p a:hover::before, - .nav-brand p a.active::before, - .nav-brand p a:hover::before, - .nav-sections p.clicked a::before { - transform: scaleX(1); - transform-origin: left; - } - - /* Other existing styles */ - .mega-menu-franklin div h2 > a:hover { - background-color: var(--highlight-light-blue); + font-weight: 600; + color: var(--background-color); + background-color: var(--color-highlight-blue); + padding: 2px; + border-radius: 3px; + margin-left: 5px; } - - .nav-sections p:last-child:hover::after { - width: 50px; + + .bottom-links { + background-color: rgb(158 164 177 / 10%); + padding: 8px 11px; + margin-top: 20px; } - - .nav-sections p, - .nav-brand p { - position: relative; + +} + +@media (min-width: 1200px) { + .mega-menu { + left: 80px; + transform: translateX(0); } - - .nav-sections p::before, - .nav-brand p:not(:first-child)::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 16px; - width: 2px; - background-color: #616161; - } - - .logo-container { - padding: 20px var(--section-desktop-padding); - margin: 21px auto 0; - gap: 10px; - } - - .logo-container > p { - display: block; - font-weight: var(--font-weight-bold); - line-height: 1.63; - font-size: 15px; - } - - .home-solutions-link-hover { - color: #FFF; - } - - .home-solutions-link-default { - display: block; - color: var(--text-color); - cursor: pointer; - padding: 0 27px 31px; - position: relative; - margin-top: 35px; - } - - black-background .home-solutions-link-default { - color: #dedede; - } - - .home-solutions-link-default::before { - content: ""; - position: absolute; - bottom: 3px; - height: 4px; - background: #006eff; - transition: all .3s ease; - width: 100%; - transform: scaleX(0); - transform-origin: left; - left: 0; - } - - .home-solutions-link-hover::before { - transform: scaleX(1); - transform-origin: left; - } - - .mega-menu-franklin { - flex-direction: column; - position: absolute; - left: 80px; - top: 123px; - max-width: 920px; - width: 100%; - background-color: var(--background-color); - z-index: 3; - transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; - box-shadow: 0 10px 10px #0003; - visibility: hidden; - display: none; - opacity: 0; - } - - .mega-menu-franklin-show { - opacity: 1; - visibility: visible; - display: flex; - } - - .mega-menu-franklin div h2 { - position: relative; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-boldest); - line-height: 18px; - padding: 7px 10px; - margin: 10px 25px 0 15px; - } - - .other-options > div:nth-child(5) { - grid-area: 2 / 3 / 3 / 4; - } - - .other-options > div:nth-child(4) { - grid-area: 2 / 2 / 3 / 3; - } - - .other-options > div:nth-child(3) { - grid-area: 1 / 3 / 2 / 4; - } - - .other-options > div:nth-child(2) { - grid-area: 1 / 2 / 2 / 3; - } - - .other-options > div:nth-child(1) { - grid-area: 1 / 1 / 3 / 2; - } - - .other-options > div > p { - position: relative; - top: 0; - margin-left: 20px; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: 18px; - } - - .other-options > div > h2 { - margin-top: 0; - } - - .other-options > div > p a.button { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: 18px; - text-decoration: none; - padding: 1px 10px; - background-color: transparent; - border-radius: 4px; - border: none; - } - - .other-options > div > p a.button:hover { - background-color: var(--highlight-light-blue); - transition: none; - transform: none; - } - - .mega-menu-franklin > div:first-child p a::after { - display: none; - } - - .other-options > div > p a:hover::after { - background-color: var(--color-highlight-blue); - } - - .other-options > div > p a.button > span { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: 18px; - position: relative; - color: var(--text-color); - } - - .mega-menu-franklin > div:first-child p a > span:first-child { - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-boldest); - line-height: 18px; - align-items: center; - } - - .mega-menu-franklin .button-container:hover a.button::after { - transform: none; - opacity: 1; - } - - .mega-menu-franklin > div:first-child { - display: grid; - grid-template-rows: auto auto; - grid-template-columns: 1fr 1fr 1fr; - align-items: start; - border-bottom: 2px solid #f5f6f7; - padding-bottom: 14px; - } - - .mega-menu-franklin > div:first-child > p > a > div { - margin-top: 5px; - line-height: 18px; - font-size: 13px; - font-weight: 400; - color: var(--color-dark-gray); - white-space: break-spaces; - text-align: left; - } - - .mega-menu-franklin > div:first-child h2 { - grid-column: span 3; - } - - .mega-menu-franklin div p { - margin-left: 15px; - } - - .bottom-links div p { - height: fit-content; - margin-left: 20px; - } - - .mega-menu-franklin > div:first-child p { - width: 250px; - margin-top: 0; - border-radius: 5px; - padding: 0; - height: auto; - } - - .mega-menu-franklin > div:first-child p:hover { - background-color: var(--highlight-light-blue); - } - - .mega-menu-franklin > div:first-child > p:first-child { - grid-column: 1; - } - - .mega-menu-franklin > div:first-child p a > span::after { - content: ''; - width: 24px; - height: 24px; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask:url('/_src/icons/arrow-right.svg'); - mask: url('/_src/icons/arrow-right.svg'); - background-color: var(--button-link-color); - display: inline-block; - transition: all .2s cubic-bezier(.4,0,.2,1); - opacity: 0; - } - - .mega-menu-franklin > div:first-child p a:hover > span::after { - opacity: 1; - background-color: var(--color-highlight-blue); - } - - - .mega-menu-franklin > div:first-child p a { - padding: 7px 10px; - display: block; - color: var(--text-color) !important; - text-decoration: none; - font-size: var(--body-font-size-s); - background-color: transparent; - border: none; - } - - .mega-menu-franklin > div:first-child p:hover a { - color: var(--color-highlight-blue) !important; - } - - .other-options { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, 1fr); - grid-gap: 0; - padding-top: 14px; - } - - #new, #evolved { - position: relative; - font-size: var(--body-font-size-xxs); - font-weight: 600; - color: var(--background-color); - background-color: var(--color-highlight-blue); - padding: 2px; - border-radius: 3px; - margin-left: 5px; - } - - .bottom-links { - background-color: rgb(158 164 177 / 10%); - padding: 8px 11px; - margin-top: 20px; - } - +} + +@media (min-width: 1400px) { + .mega-menu { + left: 210px; + transform: translateX(0); } - - @media (min-width: 1200px) { - .mega-menu-franklin { - left: 80px; - transform: translateX(0); - } +} + +@media (min-width: 1600px) { + .mega-menu { + left: 240px; + transform: translateX(0); } - - @media (min-width: 1400px) { - .mega-menu-franklin { - left: 210px; - transform: translateX(0); - } +} + +@media (min-width: 1600px) { + nav { + max-width: var(--section-large-desktop-max-width); + padding-left: var(--section-large-desktop-padding); + padding-right: var(--section-large-desktop-padding); } - - @media (min-width: 1600px) { - .mega-menu-franklin { - left: 240px; - transform: translateX(0); - } + + .nav-brand p a { + margin: 0 19px; } - - @media (min-width: 1600px) { - nav { - max-width: var(--section-large-desktop-max-width); - padding-left: var(--section-large-desktop-padding); - padding-right: var(--section-large-desktop-padding); - } - - .nav-brand p a { - margin: 0 19px; - } - - .logo-container { - max-width: var(--section-large-desktop-max-width); - padding-left: var(--section-large-desktop-padding); - padding-right: var(--section-large-desktop-padding); - } - - .logo-container > p { - font-size: 16px; - } - - .home-solutions-link-default { - padding-left: 20px; - } + + .logo-container { + max-width: var(--section-large-desktop-max-width); + padding-left: var(--section-large-desktop-padding); + padding-right: var(--section-large-desktop-padding); } -} -.header-wrapper { - position: sticky; - top: 0; - transition: height 0.3s ease-in-out; - background-color: var(--white-color); -} + .logo-container > p { + font-size: 16px; + } -.mega-menu a { - color: black; -} + .home-solutions-link-default { + padding-left: 20px; + } +} \ No newline at end of file diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index c34583e9c..5ecdee7b5 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -33,7 +33,7 @@ function handleLoginClick() { } function appendUlToP() { - const divs = document.querySelectorAll('.mega-menu-franklin > div'); + const divs = document.querySelectorAll('.mega-menu > div'); divs.forEach((div) => { const uls = div.querySelectorAll('ul'); @@ -59,7 +59,7 @@ function wrapDivsInMegaMenu() { const divs = Array.from(nav.children).filter((node) => node.tagName.toLowerCase() === 'div'); const navSectionsIndex = divs.findIndex((div) => div.classList.contains('nav-sections')); const megaMenuDiv = document.createElement('div'); - megaMenuDiv.className = 'mega-menu-franklin'; + megaMenuDiv.className = 'mega-menu'; decorateBlockWithRegionId(megaMenuDiv, 'Main Menu|Home Solutions'); const otherOptionsDiv = document.createElement('div'); @@ -95,7 +95,7 @@ function wrapDivsInMegaMenu() { otherOptionsDiv.appendChild(bottomLinks.firstElementChild); } - const loginModal = document.querySelector('.mega-menu-franklin > div:first-child'); + const loginModal = document.querySelector('.mega-menu > div:first-child'); nav.appendChild(loginModal); } @@ -173,7 +173,7 @@ function renderDesktopHeader(block, nav) { const bottomLinks = document.querySelector('.bottom-links'); bottomLinks.removeChild(bottomLinks.lastElementChild); - const megaMenu = document.querySelector('.mega-menu-franklin'); + const megaMenu = document.querySelector('.mega-menu'); let isOverHomeSolutions = false; let isOverMegaMenu = false; @@ -242,8 +242,8 @@ function handleMenuClick() { } }); - // Select the first child of mega-menu-franklin and all div children of other-options - const megaMenuFirstChild = document.querySelector('.mega-menu-franklin').firstElementChild; + // Select the first child of mega-menu and all div children of other-options + const megaMenuFirstChild = document.querySelector('.mega-menu').firstElementChild; const otherOptionsChildren = Array.from(document.querySelector('.other-options').children); const navDivs = [megaMenuFirstChild].concat(otherOptionsChildren); @@ -384,32 +384,6 @@ export default async function decorate(block) { if (resp.ok) { const html = await resp.text(); - if (html.includes('aem-banner')) { - const aemHeaderFetch = await fetch('https://www.bitdefender.com/content/experience-fragments/bitdefender/language_master/en/header-navigation/mega-menu/master/jcr:content/root/mega_menu.styled.html'); - const aemHeaderHtml = await aemHeaderFetch.text(); - const nav = document.createElement('div'); - nav.classList.add('mega-menu'); - nav.innerHTML = aemHeaderHtml; - - const cssFile = nav.querySelector('link[rel="stylesheet"]'); - cssFile.href = `https://www.bitdefender.com${cssFile.getAttribute('href')}`; - - const scriptFile = nav.querySelector('script'); - const newScriptFile = document.createElement('script'); - newScriptFile.src = `https://www.bitdefender.com${scriptFile.getAttribute('src')}`; - nav.appendChild(newScriptFile); - - const navHeader = nav.querySelector('header'); - navHeader.style.height = 'auto'; - - const body = document.querySelector('body'); - body.style.maxWidth = 'initial'; - - const header = document.querySelector('header'); - header.replaceWith(nav); - return; - } - const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = html; diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 059b790c1..a65c20ee1 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -332,7 +332,7 @@ main .section.link-right a { position: absolute; width: 100%; height: 100%; - z-index: 0; + z-index: -1; background-color: var(--blue); } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index afae1783f..6af02a9b6 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -323,7 +323,7 @@ body.no-scroll { overflow: hidden; } -header.header-wrapper { +header { height: var(--nav-height); } @@ -568,7 +568,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } @media screen and (min-width: 992px) { /* desktop */ - header.header-wrapper { + header { height: var(--nav-height-desktop); position: absolute; z-index: 999; @@ -637,7 +637,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } @media (min-width: 1000px) { - header.header-wrapper { + header { height: var(--nav-height-desktop); } } From 385c26714a0aae2dadc076c19b26c24453f1318b Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 27 Feb 2024 12:01:06 +0200 Subject: [PATCH 0136/1296] video section height fix --- _src/scripts/template-factories/trusted.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index a65c20ee1..4f1106034 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -484,7 +484,7 @@ main .section.link-right a { } .trusted .video_up { - margin-top: -12.5em; + margin-top: -235px; } } From 90c2c1986c3a94972bba83d1fa9a4671ccaae1c9 Mon Sep 17 00:00:00 2001 From: andserban Date: Tue, 27 Feb 2024 14:01:10 +0200 Subject: [PATCH 0137/1296] Awards Component --- _src/blocks/awards/awards.css | 133 ++++++++++++++++++++++++++++++++++ _src/blocks/awards/awards.js | 9 +++ 2 files changed, 142 insertions(+) create mode 100644 _src/blocks/awards/awards.css create mode 100644 _src/blocks/awards/awards.js diff --git a/_src/blocks/awards/awards.css b/_src/blocks/awards/awards.css new file mode 100644 index 000000000..cc51b59c1 --- /dev/null +++ b/_src/blocks/awards/awards.css @@ -0,0 +1,133 @@ +@media (min-width: 1199px) { + .clasa-generala { + display: flex; + justify-content: center; + align-items: center; + padding-top: 32px; + padding-bottom: 24px; + } + + div[data-align="center"][data-valign="middle"] img { + width: 80px; + } + + .awards-container .block.clasa-generala > div { + text-align: center; + display: flex; + align-items: center; + } + + .clasa-generala > div:nth-child(1) { + display: flex; + flex-direction: column; + align-items: center; + width: 55%; + } + .clasa-generala > div:nth-child(2) { + display: flex; + flex-direction: column; + align-items: center; + width: 50% !important; + } + .clasa-generala > div:nth-child(3) { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 70%; + } + + h3 { + font-size: 32px !important; + } + + h4 { + font: normal normal normal 18px/21px Arial; + font-size: 18px; + } +} +@media (min-width: 990px) { + .clasa-generala > div:nth-child(3) { + flex-wrap: nowrap; + justify-content: space-around; + width: 90%; + } + .awards-wrapper .awards > div:nth-child(3) > div[data-valign="middle"] { + width: 100%; + display: flex; + justify-content: space-around; + align-items: center; + } + .clasa-generala > div:nth-child(1) img { + width: 80px !important; + } + main .section.wide img { + height: auto; + object-fit: contain; + width: 80%; + } +} + +@media (min-width: 768px) { +} +.clasa-parinte { + display: flex; + justify-content: center; +} + +.awards-wrapper { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.awards-container .block.clasa-generala { + background-color: #edf9ff; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 20px; +} + +.clasa-generala { + display: flex; + justify-content: center; + align-items: center; + padding-top: 32px; + padding-bottom: 24px; + width: 100%; +} + +.awards-container .block.clasa-generala > div { + text-align: center; + display: flex; + align-items: center; + width: 80%; +} + +h3 { + font-size: 30px; +} + +h4 { + margin-bottom: 16px; + font-weight: normal; +} +.clasa-generala > div:nth-child(1) { + display: flex; + flex-direction: column; + align-items: center; + width: 55%; +} +.clasa-generala > div:nth-child(2) { + display: flex; + flex-direction: column; + align-items: center; + width: 50%; +} +.clasa-generala > div:nth-child(3) { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 70%; +} diff --git a/_src/blocks/awards/awards.js b/_src/blocks/awards/awards.js new file mode 100644 index 000000000..5a5dea8e9 --- /dev/null +++ b/_src/blocks/awards/awards.js @@ -0,0 +1,9 @@ +export default function decorate(block) { + const parentSelector = block.closest(".section"); + const metaData = parentSelector.dataset; + const [texte, logouri] = block.children; + console.log(metaData.pipi); + console.log(logouri); + console.log(texte); + console.log(parentSelector); +} From 66faf858adbc62d2b1c88647da6f80fdb35903fe Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 27 Feb 2024 14:12:37 +0200 Subject: [PATCH 0138/1296] added local mega-menu --- _src/blocks/header/header.css | 514 +-- _src/blocks/header/header.js | 42 +- _src/scripts/vendor/mega-menu/mega-menu.css | 4163 +++++++++++++++++++ _src/scripts/vendor/mega-menu/mega-menu.js | 380 ++ _src/styles/styles.css | 6 +- 5 files changed, 4838 insertions(+), 267 deletions(-) create mode 100644 _src/scripts/vendor/mega-menu/mega-menu.css create mode 100644 _src/scripts/vendor/mega-menu/mega-menu.js diff --git a/_src/blocks/header/header.css b/_src/blocks/header/header.css index 3077c98d4..8cb71245d 100644 --- a/_src/blocks/header/header.css +++ b/_src/blocks/header/header.css @@ -1,76 +1,78 @@ /* header and nav layout */ -:root { - --dark-header-icon-color: #000; +header.header-wrapper { + position: sticky; + top: 0; + transition: height 0.3s ease-in-out; + background-color: var(--white-color); + z-index: 100; } -header { - z-index: 100; +header.header-wrapper nav { + display: none; } -header p { - margin: 0; +:root { + --dark-header-icon-color: #000; } -.header-wrapper { - position: sticky; - top: 0; - transition: height 0.3s ease-in-out; - background-color: var(--white-color); +header.header-wrapper p { + margin: 0; } -nav { - display: none; +header.header-wrapper > p { + margin-top: 0; + padding: 15px; + text-align: center; + font-size: var(--body-font-size-s); + color: var(--horizontal-separator-color); + text-decoration: none; + cursor: pointer; + width: 175px; + height: 50px; } -.nav-wrapper { + + + + + +header.header-wrapper .nav-wrapper { display: none; } -.nav-brand, -.nav-sections { +header.header-wrapper .nav-brand, +header.header-wrapper .nav-sections { display: inline-flex; align-items: flex-start; width: 49.5%; } -.nav-brand { +header.header-wrapper .nav-brand { flex-wrap: nowrap; justify-content: flex-start; } -.nav-sections { +header.header-wrapper .nav-sections { flex-wrap: nowrap; - justify-content: flex-end; + justify-content: flex-end; } -.nav-brand p, -.nav-sections p { +header.header-wrapper .nav-brand p, +header.header-wrapper .nav-sections p { display: inline-block; } -.bottom-links div, .bottom-links p{ +header.header-wrapper .bottom-links div, .bottom-links p{ display: inline-block; } -.login-modal > p { +header.header-wrapper .login-modal > p { position: relative; - width: 100%; + width: 100%; display: block; - text-align: center; - margin-top: 45px; -} - -.header-wrapper > p { - margin-top: 0; - padding: 15px; text-align: center; - font-size: var(--body-font-size-s); - color: var(--horizontal-separator-color); - text-decoration: none; - cursor: pointer; - width: 175px; - height: 50px; + margin-top: 45px; } @keyframes animate-bottom-border { @@ -85,7 +87,7 @@ nav { } } -.home-button-border { +header.header-wrapper .home-button-border { position: absolute; margin-top: 12px; width: 70px; @@ -93,10 +95,10 @@ nav { background-color: var(--color-highlight-blue); } -.nav-divider { +header.header-wrapper .nav-divider { display: flex; flex-wrap: nowrap; - justify-content: flex-end; + justify-content: flex-end; min-width: 2px; width: 2px; background-color: var(--color-dark-gray); @@ -105,7 +107,7 @@ nav { margin-top: 7.5px; } -.login-modal { +header.header-wrapper .login-modal { display: none; flex-direction: column; align-items: flex-start; @@ -117,14 +119,14 @@ nav { top: 80px; background-color: var(--background-color); border-radius: 5px; - opacity: 0; + opacity: 0; transition: all 0.3s ease-in-out; box-shadow: 0 10px 10px #0003; z-index: 0; transform: translateY(20px); } -.login-modal.show { +header.header-wrapper .login-modal.show { opacity: 1; top: 60px; z-index: 5; @@ -132,7 +134,7 @@ nav { } -.login-modal h2 { +header.header-wrapper .login-modal h2 { position: relative; white-space: nowrap; color: var(--text-color); @@ -140,10 +142,10 @@ nav { width: 100%; margin-left: 25px; top: 15px; - text-align: left; + text-align: left; } -.divider { +header.header-wrapper .divider { position: absolute; margin-top: 45px; width: 100%; @@ -151,7 +153,7 @@ nav { background-color: var(--color-dark-gray); } -.login-modal a { +header.header-wrapper .login-modal a { text-decoration: none; color: var(--color-highlight-blue) !important; width: 330px; @@ -161,52 +163,52 @@ nav { background-color: transparent !important; margin: -70px; padding: 5px; - display: inline-block; + display: inline-block; font-size: var(--body-font-size-xs); font-weight: 500; } -header a.button:any-link { +header.header-wrapper a.button:any-link { padding: 0; } -.login-modal a.button:any-link { +header.header-wrapper .login-modal a.button:any-link { height: 50px; padding-right: 15px; } -header a.button::after { +header.header-wrapper a.button::after { margin-left: 0; } -.login-modal a.button::after { +header.header-wrapper .login-modal a.button::after { position: relative; margin-left: 220px; } -.login-modal a.button:any-link span { +header.header-wrapper .login-modal a.button:any-link span { margin-left: 25%; position: absolute; font-weight: 500; } -.login-modal.show p.button-container:nth-child(3) span { +header.header-wrapper .login-modal.show p.button-container:nth-child(3) span { margin-left: 13%; } -.login-modal.show p.button-container:nth-child(3) a.button::after { +header.header-wrapper .login-modal.show p.button-container:nth-child(3) a.button::after { margin-left: 280px; } -.login-modal.show p.button-container:nth-child(4) span { +header.header-wrapper .login-modal.show p.button-container:nth-child(4) span { margin-left: 33%; } -.login-modal.show p.button-container:nth-child(4) a.button::after { +header.header-wrapper .login-modal.show p.button-container:nth-child(4) a.button::after { margin-left: 200px; } -.logo-container { +header.header-wrapper .logo-container { height: 100%; display: flex; justify-content: start; @@ -216,27 +218,27 @@ header a.button::after { padding: 0 var(--body-padding); } -header.expanded .logo-container { +header.header-wrapper.expanded .logo-container { height: var(--nav-height); position: absolute; top: 0; left: 0; } -.logo-container > p { +header.header-wrapper .logo-container > p { display: none; } -.login-buttons a p { +header.header-wrapper .login-buttons a p { text-align: center; font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); margin-top: 5px; transition: all 0.3s ease-in-out; height: 100%; } -header .icon { +header.header-wrapper .icon { position: absolute; margin: 0; z-index: 1000; @@ -248,28 +250,28 @@ header .icon { color: var(--dark-background-color); } -.bottom-links p > a { +header.header-wrapper .bottom-links p > a { text-decoration: none; font-size: var(--body-font-size-xxs) !important; font-weight: 500 !important; } -.login-modal a:hover { +header.header-wrapper .login-modal a:hover { background-color: var(--color-highlight-blue) !important; color: var(--background-color) !important; } -header a.button span.button-text { +header.header-wrapper a.button span.button-text { display: flex; font-size: var(--body-font-size-xs); font-weight: 400; } -header a.button:hover span.button-text { +header.header-wrapper a.button:hover span.button-text { transform: none; } -.options-wrapper.show a { +header.header-wrapper .options-wrapper.show a { display: block; margin-left: 40px; color: var(--text-color); @@ -281,24 +283,24 @@ header a.button:hover span.button-text { border: transparent !important; } -.bottom-links p:hover > a { +header.header-wrapper .bottom-links p:hover > a { color: var(--color-highlight-blue) !important; } -.header-wrapper > p a:hover{ +header.header-wrapper > p a:hover{ color: var(--background-color); } -.options-wrapper.show > a:first-child { +header.header-wrapper .options-wrapper.show > a:first-child { margin-top: 40px; } -.login-modal.show.button-container a:hover{ +header.header-wrapper .login-modal.show.button-container a:hover{ background-color: var(--color-highlight-blue); color: var(--background-color); } -.triangle { +header.header-wrapper .triangle { position: absolute; width: 0; height: 0; @@ -309,28 +311,26 @@ header a.button:hover span.button-text { border-bottom: 20px solid white; } -.mega-menu div h2 { +header.header-wrapper .mega-menu-websites div h2 { position: relative; font-size: var(--body-font-size-s); font-weight: 600; margin-left: 25px; } - - -.mega-menu > div:first-child { +header.header-wrapper .mega-menu-websites > div:first-child { display: grid; grid-template-rows: auto auto; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; align-items: start; border-bottom: 2px solid #f5f6f7; } -.mega-menu > div:first-child h2 { - grid-column: span 3; +header.header-wrapper .mega-menu-websites > div:first-child h2 { + grid-column: span 3; } -.mega-menu > div:first-child p { +header.header-wrapper .mega-menu-websites > div:first-child p { width: 250px; margin-top: 5px; border-radius: 5px; @@ -339,15 +339,15 @@ header a.button:hover span.button-text { } -.mega-menu > div:first-child p:hover { +header.header-wrapper .mega-menu-websites > div:first-child p:hover { background-color: var(--highlight-light-blue); } -.mega-menu > div:first-child > p:first-child { +header.header-wrapper .mega-menu-websites > div:first-child > p:first-child { grid-column: 1; } -.mega-menu > div:first-child p a > span::after { +header.header-wrapper .mega-menu-websites > div:first-child p a > span::after { content: ''; width: 24px; height: 24px; @@ -360,24 +360,24 @@ header a.button:hover span.button-text { opacity: 0; } -.mega-menu > div:first-child p a:hover span::after { +header.header-wrapper .mega-menu-websites > div:first-child p a:hover span::after { opacity: 1; background-color: var(--color-highlight-blue); } -.mega-menu > div:first-child p a::after { +header.header-wrapper .mega-menu-websites > div:first-child p a::after { display: none; } -.options-wrapper.show div { +header.header-wrapper .options-wrapper.show div { font-weight: var(--font-weight-bold); font-size: var(--body-font-size-s); margin: 25px 13px 25px 20px; - position: relative; + position: relative; } -.options-wrapper.show div::before { - border-color: black; +header.header-wrapper .options-wrapper.show div::before { + border-color: black; border-style: solid; border-width: 0 2px 2px 0; content: ""; @@ -385,27 +385,27 @@ header a.button:hover span.button-text { height: 0.5rem; display: inline-block; position: absolute; - right: 10px; + right: 10px; top: 50%; transform: translateY(-50%) rotate(-45deg); } @media (max-width: 992px) { - .nav-wrapper { + header.header-wrapper .nav-wrapper { display: none; } - header p { + header.header-wrapper p { margin: 0; } - .header-wrapper > p{ + header.header-wrapper > p{ display: none; } - + } -.icon.icon-arrow-right { +header.header-wrapper .icon.icon-arrow-right { position: absolute; width: 10px; height: 10px; @@ -413,11 +413,11 @@ header a.button:hover span.button-text { z-index: 5; } -.bottom-links div:nth-child(2) { +header.header-wrapper .bottom-links div:nth-child(2) { margin-left: 120px; } -.menu-bar { +header.header-wrapper .menu-bar { display: block; width: 100%; height: 3px; @@ -426,7 +426,7 @@ header a.button:hover span.button-text { will-change: transform, opacity; } -.menu-wrapper { +header.header-wrapper .menu-wrapper { position: absolute; top: 17px; right: 20px; @@ -439,25 +439,25 @@ header a.button:hover span.button-text { z-index: 100; } -.menu-wrapper.change .menu-bar:first-child { +header.header-wrapper .menu-wrapper.change .menu-bar:first-child { transform: rotate(-45deg) translate(-5px, 5px); } -.menu-wrapper.change .menu-bar:nth-child(2) { - opacity: 0; +header.header-wrapper .menu-wrapper.change .menu-bar:nth-child(2) { + opacity: 0; } -.menu-wrapper.change .menu-bar:last-child { +header.header-wrapper .menu-wrapper.change .menu-bar:last-child { transform: rotate(45deg) translate(-6px,-7px); } -.header-wrapper.expanded { +header.header-wrapper.expanded { height: 100vh; width: 100vw; z-index: 2; } -.options-wrapper { +header.header-wrapper .options-wrapper { position: relative; top: var(--nav-height); width: 100vw; @@ -465,7 +465,7 @@ header a.button:hover span.button-text { display: none; } -.options-wrapper.show{ +header.header-wrapper .options-wrapper.show{ width: 100vw; height: 100vh; box-shadow: 0 10px 10px #0003; @@ -474,24 +474,24 @@ header a.button:hover span.button-text { display: block; } -.sub-menu { +header.header-wrapper .sub-menu { display: none; } -.sub-menu.show { +header.header-wrapper .sub-menu.show { display: block; } -.options-wrapper.show .sub-menu-title { +header.header-wrapper .options-wrapper.show .sub-menu-title { font-size: var(--body-font-size-xs); font-weight: var(--font-weight-bold); margin-left: 20px; - padding-left: 20px; + padding-left: 20px; position: relative; } -.options-wrapper.show .sub-menu-title::before { - border-color: black; +header.header-wrapper .options-wrapper.show .sub-menu-title::before { + border-color: black; border-style: solid; border-width: 0 2px 2px 0; content: ""; @@ -501,7 +501,7 @@ header a.button:hover span.button-text { position: absolute; left: 0; top: 50%; - transform: translate(0, -50%) rotate(135deg); + transform: translate(0, -50%) rotate(135deg); } @keyframes slide-in { @@ -514,12 +514,12 @@ header a.button:hover span.button-text { } } -#icons-sprite-bitdefender-logo path { +header.header-wrapper #icons-sprite-bitdefender-logo path { fill: currentcolor } @media(min-width: 767px) { /* tablet */ - .logo-container .icon { + header.header-wrapper .logo-container .icon { width: 180px; } @@ -538,16 +538,16 @@ header a.button:hover span.button-text { margin: 0 auto; } - header .icon { + header.header-wrapper .icon { color: var(--text-color); position: static; } - header.black-background .icon { + header.header-wrapper.black-background .icon { color: var(--text-dark-color); } - .header-wrapper { + header.header-wrapper { height: var(--nav-height-desktop); position: fixed; z-index: 999; @@ -556,19 +556,19 @@ header a.button:hover span.button-text { right: 0; } - .menu-wrapper { + header.header-wrapper .menu-wrapper { display: none; } - .nav-wrapper { + header.header-wrapper .nav-wrapper { width: 100%; background-color: var(--text-color); z-index: 100; display: block; margin: 0 auto; } - - nav { + + header.header-wrapper nav { display: block; max-width: var(--section-desktop-max-width); height: 100%; @@ -577,47 +577,47 @@ header a.button:hover span.button-text { position: relative; } - nav p { + header.header-wrapper nav p { line-height: 1.4; font-size: var(--body-font-size-xxs); font-weight: var(--font-weight-bold); } - .nav-sections { + header.header-wrapper .nav-sections { display: inline-flex; flex-wrap: wrap; gap: 0; } - .nav-brand a, - .nav-sections a { - color: var(--horizontal-separator-color); - text-decoration: none; - text-transform: uppercase; - font-size: var(--body-font-size-xxs); - font-weight: var(--font-weight-bold); - margin-right: 0; - letter-spacing: 0.96px; - cursor: pointer; - line-height: 1.4; - display: inline-block; - position: relative; + header.header-wrapper .nav-brand a, + header.header-wrapper .nav-sections a { + color: var(--horizontal-separator-color); + text-decoration: none; + text-transform: uppercase; + font-size: var(--body-font-size-xxs); + font-weight: var(--font-weight-bold); + margin-right: 0; + letter-spacing: 0.96px; + cursor: pointer; + line-height: 1.4; + display: inline-block; + position: relative; } - .nav-sections a { + header.header-wrapper .nav-sections a { margin: 0 15.5px; } - .logo a { + header.header-wrapper .logo a { display: block; } - .nav-brand p a { + header.header-wrapper .nav-brand p a { margin: 0 12px; } - .mega-menu div h2 > a { + header.header-wrapper .mega-menu-websites div h2 > a { transition: all 0.2s ease-in-out; border-radius: 3px; text-decoration: none; @@ -627,86 +627,86 @@ header a.button:hover span.button-text { font-weight: var(--font-weight-bold); } - .mega-menu div p a{ + header.header-wrapper .mega-menu-websites div p a{ position: relative; font-size: var(--body-font-size-xs); font-weight: 400; color: var(--text-color); } - .nav-sections a:first-child{ + header.header-wrapper .nav-sections a:first-child{ margin-right: 16px; } - .nav-brand p:first-child a{ + header.header-wrapper .nav-brand p:first-child a{ margin-left: 0; } -.nav-sections p a::before, -.nav-brand p a::before { - content: ""; - position: absolute; - top: 25px; - height: 3px; - background: var(--color-highlight-blue); - transition: all .3s ease; - width: 100%; - transform: scaleX(0); - transform-origin: left; - left: 0; -} + header.header-wrapper .nav-sections p a::before, + header.header-wrapper .nav-brand p a::before { + content: ""; + position: absolute; + top: 25px; + height: 3px; + background: var(--color-highlight-blue); + transition: all .3s ease; + width: 100%; + transform: scaleX(0); + transform-origin: left; + left: 0; + } -.nav-sections p a:hover::before, -.nav-brand p a.active::before, -.nav-brand p a:hover::before, -.nav-sections p.clicked a::before { - transform: scaleX(1); - transform-origin: left; -} + header.header-wrapper .nav-sections p a:hover::before, + header.header-wrapper .nav-brand p a.active::before, + header.header-wrapper .nav-brand p a:hover::before, + header.header-wrapper .nav-sections p.clicked a::before { + transform: scaleX(1); + transform-origin: left; + } -/* Other existing styles */ -.mega-menu div h2 > a:hover { - background-color: var(--highlight-light-blue); -} + /* Other existing styles */ + header.header-wrapper .mega-menu-websites div h2 > a:hover { + background-color: var(--highlight-light-blue); + } -.nav-sections p:last-child:hover::after { - width: 50px; -} + header.header-wrapper .nav-sections p:last-child:hover::after { + width: 50px; + } -.nav-sections p, -.nav-brand p { - position: relative; -} + header.header-wrapper .nav-sections p, + header.header-wrapper .nav-brand p { + position: relative; + } -.nav-sections p::before, -.nav-brand p:not(:first-child)::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 16px; - width: 2px; - background-color: #616161; -} - - .logo-container { + header.header-wrapper .nav-sections p::before, + header.header-wrapper .nav-brand p:not(:first-child)::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 16px; + width: 2px; + background-color: #616161; + } + + header.header-wrapper .logo-container { padding: 20px var(--section-desktop-padding); margin: 21px auto 0; gap: 10px; } - - .logo-container > p { + + header.header-wrapper .logo-container > p { display: block; font-weight: var(--font-weight-bold); line-height: 1.63; font-size: 15px; } - .home-solutions-link-hover { + header.header-wrapper .home-solutions-link-hover { color: #FFF; } - - .home-solutions-link-default { + + header.header-wrapper .home-solutions-link-default { display: block; color: var(--text-color); cursor: pointer; @@ -715,11 +715,11 @@ header a.button:hover span.button-text { margin-top: 35px; } - header.black-background .home-solutions-link-default { + header.header-wrapper.black-background .home-solutions-link-default { color: #dedede; } - - .home-solutions-link-default::before { + + header.header-wrapper .home-solutions-link-default::before { content: ""; position: absolute; bottom: 3px; @@ -732,12 +732,12 @@ header a.button:hover span.button-text { left: 0; } - .home-solutions-link-hover::before { - transform: scaleX(1); + header.header-wrapper .home-solutions-link-hover::before { + transform: scaleX(1); transform-origin: left; } - .mega-menu { + header.header-wrapper .mega-menu-websites { flex-direction: column; position: absolute; left: 80px; @@ -754,14 +754,14 @@ header a.button:hover span.button-text { display: none; opacity: 0; } - - .mega-menu-show { + + header.header-wrapper .mega-menu-websites-show { opacity: 1; visibility: visible; display: flex; - } + } - .mega-menu div h2 { + header.header-wrapper .mega-menu-websites div h2 { position: relative; font-size: var(--body-font-size-xs); font-weight: var(--font-weight-boldest); @@ -770,27 +770,27 @@ header a.button:hover span.button-text { margin: 10px 25px 0 15px; } - .other-options > div:nth-child(5) { + header.header-wrapper .other-options > div:nth-child(5) { grid-area: 2 / 3 / 3 / 4; } - - .other-options > div:nth-child(4) { + + header.header-wrapper .other-options > div:nth-child(4) { grid-area: 2 / 2 / 3 / 3; } - - .other-options > div:nth-child(3) { + + header.header-wrapper .other-options > div:nth-child(3) { grid-area: 1 / 3 / 2 / 4; } - - .other-options > div:nth-child(2) { + + header.header-wrapper .other-options > div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; } - - .other-options > div:nth-child(1) { + + header.header-wrapper .other-options > div:nth-child(1) { grid-area: 1 / 1 / 3 / 2; } - - .other-options > div > p { + + header.header-wrapper .other-options > div > p { position: relative; top: 0; margin-left: 20px; @@ -799,11 +799,11 @@ header a.button:hover span.button-text { line-height: 18px; } - .other-options > div > h2 { + header.header-wrapper .other-options > div > h2 { margin-top: 0; } - header .other-options > div > p a.button { + header.header-wrapper .other-options > div > p a.button { font-size: var(--body-font-size-xs); font-weight: var(--font-weight-regular); line-height: 18px; @@ -814,21 +814,21 @@ header a.button:hover span.button-text { border: none; } - header .other-options > div > p a.button:hover { + header.header-wrapper .other-options > div > p a.button:hover { background-color: var(--highlight-light-blue); transition: none; transform: none; } - - .mega-menu > div:first-child p a::after { + + header.header-wrapper .mega-menu-websites > div:first-child p a::after { display: none; } - header .other-options > div > p a:hover::after { + header.header-wrapper .other-options > div > p a:hover::after { background-color: var(--color-highlight-blue); } - header .other-options > div > p a.button > span { + header.header-wrapper .other-options > div > p a.button > span { font-size: var(--body-font-size-xs); font-weight: var(--font-weight-regular); line-height: 18px; @@ -836,28 +836,28 @@ header a.button:hover span.button-text { color: var(--text-color); } - .mega-menu > div:first-child p a > span:first-child { + header.header-wrapper .mega-menu-websites > div:first-child p a > span:first-child { font-size: var(--body-font-size-xs); font-weight: var(--font-weight-boldest); line-height: 18px; align-items: center; } - - .mega-menu .button-container:hover a.button::after { + + header.header-wrapper .mega-menu-websites .button-container:hover a.button::after { transform: none; opacity: 1; } - .mega-menu > div:first-child { + header.header-wrapper .mega-menu-websites > div:first-child { display: grid; grid-template-rows: auto auto; - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 1fr 1fr 1fr; align-items: start; border-bottom: 2px solid #f5f6f7; padding-bottom: 14px; } - .mega-menu > div:first-child > p > a > div { + header.header-wrapper.mega-menu-websites > div:first-child > p > a > div { margin-top: 5px; line-height: 18px; font-size: 13px; @@ -867,20 +867,20 @@ header a.button:hover span.button-text { text-align: left; } - .mega-menu > div:first-child h2 { - grid-column: span 3; + header.header-wrapper .mega-menu-websites > div:first-child h2 { + grid-column: span 3; } - - .mega-menu div p { + + header.header-wrapper .mega-menu-websites div p { margin-left: 15px; } - .bottom-links div p { + header.header-wrapper.bottom-links div p { height: fit-content; margin-left: 20px; } - .mega-menu > div:first-child p { + header.header-wrapper .mega-menu-websites > div:first-child p { width: 250px; margin-top: 0; border-radius: 5px; @@ -888,15 +888,15 @@ header a.button:hover span.button-text { height: auto; } - .mega-menu > div:first-child p:hover { + header.header-wrapper .mega-menu-websites > div:first-child p:hover { background-color: var(--highlight-light-blue); } - .mega-menu > div:first-child > p:first-child { + header.header-wrapper .mega-menu-websites > div:first-child > p:first-child { grid-column: 1; } - .mega-menu > div:first-child p a > span::after { + header.header-wrapper .mega-menu-websites > div:first-child p a > span::after { content: ''; width: 24px; height: 24px; @@ -909,13 +909,13 @@ header a.button:hover span.button-text { opacity: 0; } - .mega-menu > div:first-child p a:hover > span::after { + header.header-wrapper .mega-menu-websites > div:first-child p a:hover > span::after { opacity: 1; background-color: var(--color-highlight-blue); } - .mega-menu > div:first-child p a { + header.header-wrapper .mega-menu-websites > div:first-child p a { padding: 7px 10px; display: block; color: var(--text-color) !important; @@ -924,20 +924,21 @@ header a.button:hover span.button-text { background-color: transparent; border: none; } - - .mega-menu > div:first-child p:hover a { + + header.header-wrapper .mega-menu-websites > div:first-child p:hover a { color: var(--color-highlight-blue) !important; } - - .other-options { + + header.header-wrapper .other-options { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-gap: 0; padding-top: 14px; } - - #new, #evolved { + + header.header-wrapper #new, + header.header-wrapper #evolved { position: relative; font-size: var(--body-font-size-xxs); font-weight: 600; @@ -948,57 +949,56 @@ header a.button:hover span.button-text { margin-left: 5px; } - .bottom-links { + header.header-wrapper .bottom-links { background-color: rgb(158 164 177 / 10%); padding: 8px 11px; margin-top: 20px; } - } -@media (min-width: 1200px) { - .mega-menu { +@media (min-width: 1200px) { + header.header-wrapper .mega-menu-websites { left: 80px; transform: translateX(0); } } -@media (min-width: 1400px) { - .mega-menu { +@media (min-width: 1400px) { + header.header-wrapper .mega-menu-websites { left: 210px; transform: translateX(0); } } -@media (min-width: 1600px) { - .mega-menu { +@media (min-width: 1600px) { + header.header-wrapper .mega-menu-websites { left: 240px; transform: translateX(0); } } @media (min-width: 1600px) { - nav { + header.header-wrapper nav { max-width: var(--section-large-desktop-max-width); padding-left: var(--section-large-desktop-padding); padding-right: var(--section-large-desktop-padding); } - .nav-brand p a { + header.header-wrapper .nav-brand p a { margin: 0 19px; } - .logo-container { + header.header-wrapper .logo-container { max-width: var(--section-large-desktop-max-width); padding-left: var(--section-large-desktop-padding); padding-right: var(--section-large-desktop-padding); } - .logo-container > p { + header.header-wrapper .logo-container > p { font-size: 16px; } - .home-solutions-link-default { + header.header-wrapper .home-solutions-link-default { padding-left: 20px; } -} \ No newline at end of file +} diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 5ecdee7b5..fdada0f3b 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -33,7 +33,7 @@ function handleLoginClick() { } function appendUlToP() { - const divs = document.querySelectorAll('.mega-menu > div'); + const divs = document.querySelectorAll('.mega-menu-websites > div'); divs.forEach((div) => { const uls = div.querySelectorAll('ul'); @@ -59,7 +59,7 @@ function wrapDivsInMegaMenu() { const divs = Array.from(nav.children).filter((node) => node.tagName.toLowerCase() === 'div'); const navSectionsIndex = divs.findIndex((div) => div.classList.contains('nav-sections')); const megaMenuDiv = document.createElement('div'); - megaMenuDiv.className = 'mega-menu'; + megaMenuDiv.className = 'mega-menu-websites'; decorateBlockWithRegionId(megaMenuDiv, 'Main Menu|Home Solutions'); const otherOptionsDiv = document.createElement('div'); @@ -95,7 +95,7 @@ function wrapDivsInMegaMenu() { otherOptionsDiv.appendChild(bottomLinks.firstElementChild); } - const loginModal = document.querySelector('.mega-menu > div:first-child'); + const loginModal = document.querySelector('.mega-menu-websites > div:first-child'); nav.appendChild(loginModal); } @@ -173,20 +173,20 @@ function renderDesktopHeader(block, nav) { const bottomLinks = document.querySelector('.bottom-links'); bottomLinks.removeChild(bottomLinks.lastElementChild); - const megaMenu = document.querySelector('.mega-menu'); + const megaMenu = document.querySelector('.mega-menu-websites'); let isOverHomeSolutions = false; let isOverMegaMenu = false; const showMegaMenu = () => { megaMenu.style.display = 'flex'; setTimeout(() => { - megaMenu.classList.add('mega-menu-show'); + megaMenu.classList.add('mega-menu-websites-show'); }, 10); }; const hideMegaMenu = () => { if (!isOverHomeSolutions && !isOverMegaMenu) { - megaMenu.classList.remove('mega-menu-show'); + megaMenu.classList.remove('mega-menu-websites-show'); homeSolutions.classList.remove('home-solutions-link-hover'); } }; @@ -243,7 +243,7 @@ function handleMenuClick() { }); // Select the first child of mega-menu and all div children of other-options - const megaMenuFirstChild = document.querySelector('.mega-menu').firstElementChild; + const megaMenuFirstChild = document.querySelector('.mega-menu-websites').firstElementChild; const otherOptionsChildren = Array.from(document.querySelector('.other-options').children); const navDivs = [megaMenuFirstChild].concat(otherOptionsChildren); @@ -384,6 +384,34 @@ export default async function decorate(block) { if (resp.ok) { const html = await resp.text(); + if (html.includes('aem-banner')) { + const aemHeaderFetch = await fetch('https://www.bitdefender.com/content/experience-fragments/bitdefender/language_master/en/header-navigation/mega-menu/master/jcr:content/root/mega_menu.styled.html'); + const aemHeaderHtml = await aemHeaderFetch.text(); + const nav = document.createElement('div'); + nav.classList.add('mega-menu'); + nav.innerHTML = aemHeaderHtml; + + const cssFile = nav.querySelector('link[rel="stylesheet"]'); + // cssFile.href = `https://www.bitdefender.com${cssFile.getAttribute('href')}`; + cssFile.href = '/_src/scripts/vendor/mega-menu/mega-menu.css'; + + const scriptFile = nav.querySelector('script'); + const newScriptFile = document.createElement('script'); + // newScriptFile.src = `https://www.bitdefender.com${scriptFile.getAttribute('src')}`; + newScriptFile.src = '/_src/scripts/vendor/mega-menu/mega-menu.js'; + nav.appendChild(newScriptFile); + + const navHeader = nav.querySelector('header'); + navHeader.style.height = 'auto'; + + const body = document.querySelector('body'); + body.style.maxWidth = 'initial'; + + const header = document.querySelector('header'); + header.replaceWith(nav); + return; + } + const nav = document.createElement('nav'); nav.id = 'nav'; nav.innerHTML = html; diff --git a/_src/scripts/vendor/mega-menu/mega-menu.css b/_src/scripts/vendor/mega-menu/mega-menu.css new file mode 100644 index 000000000..783adea07 --- /dev/null +++ b/_src/scripts/vendor/mega-menu/mega-menu.css @@ -0,0 +1,4163 @@ +.mega-menu * { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + box-sizing: border-box; + margin: 0; + padding: 0; +} +.mega-menu .we-align-items-start { + align-items: flex-start !important; +} +.mega-menu .we-align-items-center { + align-items: center !important; +} +.mega-menu .we-align-items-end { + align-items: flex-end !important; +} +.mega-menu .we-align-self-start { + align-self: flex-start !important; +} +.mega-menu .we-align-self-center { + align-self: center !important; +} +.mega-menu .we-align-self-end { + align-self: flex-end !important; +} +.mega-menu .we-justify-content-start { + justify-content: flex-start !important; +} +.mega-menu .we-justify-content-center { + justify-content: center !important; +} +.mega-menu .we-justify-content-end { + justify-content: flex-end !important; +} +.mega-menu .we-justify-content-left { + justify-content: left !important; +} +.mega-menu .we-align-right { + text-align: right !important; +} +.mega-menu .we-align-left { + text-align: left !important; +} +.mega-menu .we-align-center { + text-align: center !important; +} +.mega-menu .we-align-justify { + text-align: justify !important; +} +.mega-menu .we-text-uppercase { + text-transform: uppercase !important; +} +.mega-menu .we-text-lowercase { + text-transform: lowercase !important; +} +.mega-menu .we-row { + display: flex; +} +.mega-menu .we-flex-wrap { + flex-wrap: wrap; +} +.mega-menu .we-row-inline { + font-size: 0; +} +.mega-menu .we-row-inline .we-col, .mega-menu .we-row-inline .we-col-five, .mega-menu .we-row-inline .we-col-four, .mega-menu .we-row-inline .we-col-seven, .mega-menu .we-row-inline .we-col-six, .mega-menu .we-row-inline .we-col-three, .mega-menu .we-row-inline .we-col-two { + display: inline-block; + vertical-align: top; +} +.mega-menu .mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} +.mega-menu .d-block { + display: block !important; +} +@media (max-width: 1399px) { + .mega-menu .d-xl-block { + display: block !important; + } +} +@media (max-width: 1270px) { + .mega-menu .d-lg-block { + display: block !important; + } +} +@media (max-width: 991px) { + .mega-menu .d-md-block { + display: block !important; + } +} +@media (max-width: 767px) { + .mega-menu .d-sm-block { + display: block !important; + } +} +@media (max-width: 595px) { + .mega-menu .d-xs-block { + display: block !important; + } +} +.mega-menu .d-inline-block { + display: inline-block !important; +} +@media (max-width: 1399px) { + .mega-menu .d-xl-inline-block { + display: inline-block !important; + } +} +@media (max-width: 1270px) { + .mega-menu .d-lg-inline-block { + display: inline-block !important; + } +} +@media (max-width: 991px) { + .mega-menu .d-md-inline-block { + display: inline-block !important; + } +} +@media (max-width: 767px) { + .mega-menu .d-sm-inline-block { + display: inline-block !important; + } +} +@media (max-width: 595px) { + .mega-menu .d-xs-inline-block { + display: inline-block !important; + } +} +.mega-menu .d-inline { + display: inline !important; +} +@media (max-width: 1399px) { + .mega-menu .d-xl-inline { + display: inline !important; + } +} +@media (max-width: 1270px) { + .mega-menu .d-lg-inline { + display: inline !important; + } +} +@media (max-width: 991px) { + .mega-menu .d-md-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .mega-menu .d-sm-inline { + display: inline !important; + } +} +@media (max-width: 595px) { + .mega-menu .d-xs-inline { + display: inline !important; + } +} +.mega-menu .d-none { + display: none !important; +} +@media (max-width: 1399px) { + .mega-menu .d-xl-none { + display: none !important; + } +} +@media (max-width: 1270px) { + .mega-menu .d-lg-none { + display: none !important; + } +} +@media (max-width: 991px) { + .mega-menu .d-md-none { + display: none !important; + } +} +@media (max-width: 767px) { + .mega-menu .d-sm-none { + display: none !important; + } +} +@media (max-width: 595px) { + .mega-menu .d-xs-none { + display: none !important; + } +} +.mega-menu .d-flex { + display: flex !important; +} +@media (max-width: 1399px) { + .mega-menu .d-xl-flex { + display: flex !important; + } +} +@media (max-width: 767px) { + .mega-menu .d-sm-flex { + display: flex !important; + } +} +@media (max-width: 595px) { + .mega-menu .d-xs-flex { + display: flex !important; + } +} +.mega-menu a.we-btn-black, .mega-menu button.we-btn-black { + align-items: center; + background-color: #000; + border: 2px solid #000; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-black, .mega-menu button.we-btn-black { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-black span, .mega-menu button.we-btn-black span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-black span:after, .mega-menu button.we-btn-black span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-black span:after, .mega-menu button.we-btn-black span:after { + top: 6px; + } +} +.mega-menu a.we-btn-black:hover span, .mega-menu button.we-btn-black:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-black:hover span:after, .mega-menu button.we-btn-black:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-red, .mega-menu button.we-btn-red { + align-items: center; + background-color: #eb0000; + border: 2px solid #eb0000; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-red, .mega-menu button.we-btn-red { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-red span, .mega-menu button.we-btn-red span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-red span:after, .mega-menu button.we-btn-red span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-red span:after, .mega-menu button.we-btn-red span:after { + top: 6px; + } +} +.mega-menu a.we-btn-red:hover span, .mega-menu button.we-btn-red:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-red:hover span:after, .mega-menu button.we-btn-red:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-red:hover, .mega-menu button.we-btn-red:hover { + background-color: #d80000; + border: 2px solid #d80000; +} +.mega-menu a.we-btn-green, .mega-menu button.we-btn-green { + align-items: center; + background-color: #51a71d; + border: 2px solid #51a71d; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-green, .mega-menu button.we-btn-green { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-green span, .mega-menu button.we-btn-green span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-green span:after, .mega-menu button.we-btn-green span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-green span:after, .mega-menu button.we-btn-green span:after { + top: 6px; + } +} +.mega-menu a.we-btn-green:hover span, .mega-menu button.we-btn-green:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-green:hover span:after, .mega-menu button.we-btn-green:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-green:hover, .mega-menu button.we-btn-green:hover { + background-color: #469c12; + border: 2px solid #469c12; +} +.mega-menu a.we-btn-blue, .mega-menu button.we-btn-blue { + align-items: center; + background-color: #006eff; + border: 2px solid #006eff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-blue, .mega-menu button.we-btn-blue { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-blue span, .mega-menu button.we-btn-blue span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-blue span:after, .mega-menu button.we-btn-blue span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-blue span:after, .mega-menu button.we-btn-blue span:after { + top: 6px; + } +} +.mega-menu a.we-btn-blue:hover span, .mega-menu button.we-btn-blue:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-blue:hover span:after, .mega-menu button.we-btn-blue:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-blue:hover, .mega-menu button.we-btn-blue:hover { + background-color: #0080ff; + border: 2px solid #0080ff; +} +.mega-menu a.we-btn-blue span, .mega-menu button.we-btn-blue span { + pointer-events: none; +} +.mega-menu a.we-app-store, .mega-menu button.we-app-store { + align-items: center; + background-color: transparent; + border: 0; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + overflow: hidden; + padding: 0; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + vertical-align: top; +} +@media (max-width: 767px) { + .mega-menu a.we-app-store, .mega-menu button.we-app-store { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-app-store span, .mega-menu button.we-app-store span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-app-store span:after, .mega-menu button.we-app-store span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-app-store span:after, .mega-menu button.we-app-store span:after { + top: 6px; + } +} +.mega-menu a.we-app-store:hover span, .mega-menu button.we-app-store:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-app-store:hover span:after, .mega-menu button.we-app-store:hover span:after { + opacity: 1; + right: -22px; +} +@media (max-width: 767px) { + .mega-menu a.we-app-store, .mega-menu button.we-app-store { + width: 123px; + } +} +.mega-menu a.we-app-store img, .mega-menu button.we-app-store img { + height: 100%; + left: 0; + right: auto !important; + top: 0; + width: 100%; +} +.mega-menu a.we-app-store:hover, .mega-menu button.we-app-store:hover { + background-color: transparent; + border: 0; +} +.mega-menu a.we-btn-white, .mega-menu button.we-btn-white { + align-items: center; + background-color: #fff; + border: 2px solid #fff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-white, .mega-menu button.we-btn-white { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-white span, .mega-menu button.we-btn-white span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-white span:after, .mega-menu button.we-btn-white span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-white span:after, .mega-menu button.we-btn-white span:after { + top: 6px; + } +} +.mega-menu a.we-btn-white:hover span, .mega-menu button.we-btn-white:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-white:hover span:after, .mega-menu button.we-btn-white:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-white span, .mega-menu button.we-btn-white span { + color: #000; +} +.mega-menu a.we-btn-white span:after, .mega-menu button.we-btn-white span:after { + background: url(../../../content/dam/bitdefender/blue-arrow.svg) no-repeat; + background-size: cover; +} +.mega-menu a.we-btn-transparent, .mega-menu button.we-btn-transparent { + align-items: center; + background-color: transparent; + border: 2px solid #fff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-transparent, .mega-menu button.we-btn-transparent { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-transparent span, .mega-menu button.we-btn-transparent span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-transparent span:after, .mega-menu button.we-btn-transparent span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-transparent span:after, .mega-menu button.we-btn-transparent span:after { + top: 6px; + } +} +.mega-menu a.we-btn-transparent:hover span, .mega-menu button.we-btn-transparent:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-transparent:hover span:after, .mega-menu button.we-btn-transparent:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-transparent span:after, .mega-menu button.we-btn-transparent span:after { + background: url(../../../content/dam/bitdefender/blue-arrow.svg) no-repeat; + background-size: cover; +} +.mega-menu a.we-btn-transparent:hover, .mega-menu button.we-btn-transparent:hover { + background-color: #fff; +} +.mega-menu a.we-btn-transparent:hover span, .mega-menu button.we-btn-transparent:hover span { + color: #000; +} +.mega-menu a.we-btn-black-border, .mega-menu button.we-btn-black-border { + align-items: center; + background-color: transparent; + border: 2px solid #000; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-black-border, .mega-menu button.we-btn-black-border { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-black-border span, .mega-menu button.we-btn-black-border span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-black-border span:after, .mega-menu button.we-btn-black-border span:after { + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-black-border span:after, .mega-menu button.we-btn-black-border span:after { + top: 6px; + } +} +.mega-menu a.we-btn-black-border:hover span, .mega-menu button.we-btn-black-border:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-black-border:hover span:after, .mega-menu button.we-btn-black-border:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-black-border span, .mega-menu button.we-btn-black-border span { + color: #000; +} +.mega-menu a.we-btn-black-border span:after, .mega-menu button.we-btn-black-border span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; +} +.mega-menu a.we-btn-black-border:hover, .mega-menu button.we-btn-black-border:hover { + background-color: #000; +} +.mega-menu a.we-btn-black-border:hover span, .mega-menu button.we-btn-black-border:hover span { + color: #fff; +} +.mega-menu .button.we-btn-search, .mega-menu a.we-btn-search, .mega-menu button.we-btn-search { + align-items: center; + background-color: #fff; + border: 2px solid #fff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + height: 55px; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 5px 31px 8px 67px; + position: relative; + text-align: center; + text-align: left; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu .button.we-btn-search, .mega-menu a.we-btn-search, .mega-menu button.we-btn-search { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu .button.we-btn-search span, .mega-menu a.we-btn-search span, .mega-menu button.we-btn-search span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu .button.we-btn-search span:after, .mega-menu a.we-btn-search span:after, .mega-menu button.we-btn-search span:after { + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu .button.we-btn-search span:after, .mega-menu a.we-btn-search span:after, .mega-menu button.we-btn-search span:after { + top: 6px; + } +} +.mega-menu .button.we-btn-search:hover span, .mega-menu a.we-btn-search:hover span, .mega-menu button.we-btn-search:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu .button.we-btn-search:hover span:after, .mega-menu a.we-btn-search:hover span:after, .mega-menu button.we-btn-search:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu .button.we-btn-search:before, .mega-menu a.we-btn-search:before, .mega-menu button.we-btn-search:before { + background: url(../../../content/dam/bitdefender/search-icon.svg) no-repeat; + background-size: cover; + content: ""; + height: 30px; + left: 21px; + position: absolute; + top: 10px; + width: 30px; +} +@media (max-width: 595px) { + .mega-menu .button.we-btn-search:before, .mega-menu a.we-btn-search:before, .mega-menu button.we-btn-search:before { + top: calc(50% - 16px); + } +} +.mega-menu .button.we-btn-search span, .mega-menu a.we-btn-search span, .mega-menu button.we-btn-search span { + color: #000; +} +.mega-menu .button.we-btn-search span:after, .mega-menu a.we-btn-search span:after, .mega-menu button.we-btn-search span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; +} +.mega-menu .button.we-btn-search small, .mega-menu a.we-btn-search small, .mega-menu button.we-btn-search small { + display: block; + font-weight: 400; + letter-spacing: 0.022em; +} +.mega-menu .button.we-btn-search:hover, .mega-menu a.we-btn-search:hover, .mega-menu button.we-btn-search:hover { + background-color: #fff; + height: 55px; + padding: 5px 31px 8px 67px; + text-align: left; +} +.mega-menu .button.we-btn-search:hover:before, .mega-menu a.we-btn-search:hover:before, .mega-menu button.we-btn-search:hover:before { + background: url(../../../content/dam/bitdefender/search-icon.svg) no-repeat; + background-size: cover; + content: ""; + height: 30px; + left: 21px; + position: absolute; + top: 10px; + width: 30px; +} +.mega-menu .button.we-btn-search:hover span, .mega-menu a.we-btn-search:hover span, .mega-menu button.we-btn-search:hover span { + color: #000; +} +.mega-menu .button.we-btn-search:hover span:after, .mega-menu a.we-btn-search:hover span:after, .mega-menu button.we-btn-search:hover span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; +} +.mega-menu .button.we-btn-search:hover small, .mega-menu a.we-btn-search:hover small, .mega-menu button.we-btn-search:hover small { + display: block; + font-weight: 400; + letter-spacing: 0.022em; +} +.mega-menu .button.we-btn-search:hover:hover, .mega-menu a.we-btn-search:hover:hover, .mega-menu button.we-btn-search:hover:hover { + background-color: #fff; + padding: 5px 31px 8px 67px; +} +.mega-menu .button.we-btn-search:hover:hover span, .mega-menu a.we-btn-search:hover:hover span, .mega-menu button.we-btn-search:hover:hover span { + color: #000; +} +.mega-menu .button.we-btn-search:hover:hover span:after, .mega-menu a.we-btn-search:hover:hover span:after, .mega-menu button.we-btn-search:hover:hover span:after { + display: none; +} +.mega-menu a.we-btn-blue-border, .mega-menu button.we-btn-blue-border { + align-items: center; + background-color: transparent; + border: 2px solid #006eff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu a.we-btn-blue-border, .mega-menu button.we-btn-blue-border { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu a.we-btn-blue-border span, .mega-menu button.we-btn-blue-border span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu a.we-btn-blue-border span:after, .mega-menu button.we-btn-blue-border span:after { + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu a.we-btn-blue-border span:after, .mega-menu button.we-btn-blue-border span:after { + top: 6px; + } +} +.mega-menu a.we-btn-blue-border:hover span, .mega-menu button.we-btn-blue-border:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu a.we-btn-blue-border:hover span:after, .mega-menu button.we-btn-blue-border:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu a.we-btn-blue-border span, .mega-menu button.we-btn-blue-border span { + color: #006eff; +} +.mega-menu a.we-btn-blue-border span:after, .mega-menu button.we-btn-blue-border span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; +} +.mega-menu a.we-btn-blue-border:hover, .mega-menu button.we-btn-blue-border:hover { + background-color: #006eff; +} +.mega-menu a.we-btn-blue-border:hover span, .mega-menu button.we-btn-blue-border:hover span { + color: #fff; +} +.mega-menu .we-link-with-white { + color: #fff; + display: inline-block; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + position: relative; + z-index: 1; +} +@media (max-width: 767px) { + .mega-menu .we-link-with-white { + font-size: 16px; + } +} +.mega-menu .we-link-with-white:first-letter { + text-transform: uppercase; +} +.mega-menu .we-link-with-white span { + position: relative; +} +.mega-menu .we-link-with-white span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + margin-left: 5px; + position: relative; + top: 0; + transform: translateX(0); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; +} +.mega-menu .we-link-with-white:hover span:after { + transform: translateX(4px); +} +.mega-menu .we-link-with-blue { + color: #005ed9; + cursor: pinter; + display: inline-block; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + position: relative; + z-index: 1; +} +@media (max-width: 767px) { + .mega-menu .we-link-with-blue { + font-size: 16px; + } +} +.mega-menu .we-link-with-blue:first-letter { + text-transform: uppercase; +} +.mega-menu .we-link-with-blue span { + position: relative; +} +.mega-menu .we-link-with-blue span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + margin-left: 5px; + position: relative; + top: 0; + transform: translateX(0); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; +} +.mega-menu .we-link-with-blue:hover span:after { + transform: translateX(4px); +} +.mega-menu .we-link-with-blue span:after { + background: url(../../../content/dam/bitdefender/blue-arrow.svg) no-repeat; +} +.mega-menu .we-link-with-blue:hover { + color: #00439c; +} +.mega-menu .we-link-with-blue:hover span:after { + background: url(../../../content/dam/bitdefender/dark-blue-arrow.svg) no-repeat; +} +.mega-menu .we-link-with-blue.download { + padding-left: 20px; +} +.mega-menu .we-link-with-blue.download:before { + background: url(../../../content/dam/bitdefender/download.svg) no-repeat; + content: ""; + display: inline-block; + height: 14px; + left: -20px; + position: relative; + width: 16px; +} +.mega-menu .we-link-with-blue.download span:after { + display: none; +} +.mega-menu .we-link-with-blue.see-more span:after { + background: none; + border-bottom: 2px solid #006eff; + border-right: 2px solid #006eff; + height: 7px; + top: -2px; + transform: rotate(45deg); + width: 7px; +} +.mega-menu .we-link-with-blue.see-more.close-it span:after { + top: 3px; + transform: rotate(-135deg); +} +.mega-menu .we-link-download { + color: #006eff; + margin-right: 13px; + padding-left: 8px; + position: relative; +} +.mega-menu .we-link-download:hover { + opacity: 0.8; +} +.mega-menu .we-link-download:before { + background: url(../../../content/dam/bitdefender/download_icon.svg) no-repeat; + content: ""; + display: inline-block; + height: 14px; + left: -8px; + position: relative; + width: 16px; +} +.mega-menu .we-link-user-guide { + color: #006eff; + margin-right: 13px; + padding-left: 8px; + position: relative; +} +.mega-menu .we-link-user-guide:hover { + opacity: 0.8; +} +.mega-menu .we-link-user-guide:before { + background: url(../../../content/dam/bitdefender/mannual_icon.svg) no-repeat; + content: ""; + display: inline-block; + height: 16px; + left: -8px; + position: relative; + width: 16px; +} +.mega-menu html { + scroll-behavior: smooth; +} +.mega-menu .global-display-none { + display: none !important; +} +.mega-menu .global-opacity-zero { + opacity: 0 !important; +} +.mega-menu .global-visibility-hidden { + visibility: hidden !important; +} +.mega-menu .product-not-available { + font-size: 0.875rem !important; + line-height: 1.25rem !important; + text-align: inherit !important; +} +.mega-menu body { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + background-color: #fff; + box-sizing: border-box; + margin: 0 auto; + max-width: 1920px; + position: relative; +} +.mega-menu body.service-overlay-open { + overflow-y: hidden; +} +.mega-menu body main.container, .mega-menu body > section { + padding: 0 !important; +} +.mega-menu li, .mega-menu ol, .mega-menu ul { + font-family: roboto, sans-serif; + margin: 0; + padding: 0; +} +.mega-menu html { + background-color: #fff; +} +.mega-menu ol, .mega-menu ul { + padding-left: 15px; +} +.mega-menu li { + font-size: 16px; + line-height: 1.63; + margin-bottom: 14px; + padding-left: 22px; +} +.mega-menu section ul { + text-align: left; +} +.mega-menu section ul li { + font-family: roboto, sans-serif; + font-size: 18px; + font-stretch: normal; + font-style: normal; + font-weight: 400; + letter-spacing: normal; + line-height: 1.67; + margin: 15px 0; + padding-left: 20px; + position: relative; +} +@media (min-width: 768px) and (max-width: 991px) { + .mega-menu section ul li { + font-size: 16px; + } +} +@media (max-width: 767px) { + .mega-menu section ul li { + font-size: 16px; + } +} +.mega-menu section ul li:before { + content: ""; + height: 8px; + left: 0; + position: absolute; + top: 11px; + width: 8px; +} +@media (max-width: 767px) { + .mega-menu section ul li:before { + top: 8px; + } +} +.mega-menu a { + cursor: pointer; + font-family: roboto, sans-serif; +} +.mega-menu a, .mega-menu a:hover { + outline: 0; + text-decoration: none; +} +.mega-menu audio, .mega-menu button, .mega-menu fieldset, .mega-menu figure, .mega-menu footer, .mega-menu form, .mega-menu h1, .mega-menu h3, .mega-menu h4, .mega-menu h5, .mega-menu h6, .mega-menu header, .mega-menu label, .mega-menu menu, .mega-menu nav, .mega-menu p, .mega-menu section, .mega-menu table, .mega-menu tbody, .mega-menu td, .mega-menu th, .mega-menu tr, .mega-menu video { + border: 0; + margin: 0; +} +.mega-menu img { + border: 0; + height: auto; + max-width: 100%; + vertical-align: top; + width: 100%; +} +.mega-menu .we-container { + margin: 0 auto; + max-width: 1332px; + padding: 0 20px; + position: relative; + width: 100%; +} +@media (max-width: 1599px) { + .mega-menu .we-container { + max-width: 1300px; + padding: 0 50px; + } +} +@media (max-width: 991px) { + .mega-menu .we-container { + padding: 0 20px; + } +} +.mega-menu .we-container:after { + clear: both; + content: ""; + display: block; +} +.mega-menu .we-container-fluid { + max-width: 100%; +} +.mega-menu .section, .mega-menu footer, .mega-menu section { + position: relative; + width: 100%; +} +.mega-menu .section, .mega-menu section { + overflow: hidden; + padding: 120px 0; +} +@media (max-width: 1399px) { + .mega-menu .section, .mega-menu section { + padding: 96px 0; + } +} +@media (max-width: 1199px) { + .mega-menu .section, .mega-menu section { + padding: 96px 0; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .mega-menu .section, .mega-menu section { + padding: 64px 0; + } +} +@media (max-width: 767px) { + .mega-menu .section, .mega-menu section { + padding: 64px 0; + } + .mega-menu .section:after, .mega-menu section:after { + display: none; + } +} +.mega-menu .default-padding { + padding: 120px 0; +} +@media (max-width: 1399px) { + .mega-menu .default-padding { + padding: 96px 0; + } +} +@media (max-width: 1199px) { + .mega-menu .default-padding { + padding: 96px 0; + } +} +@media (max-width: 991px) { + .mega-menu .default-padding { + padding: 64px 0; + } +} +@media (max-width: 767px) { + .mega-menu .default-padding { + padding: 64px 0; + } +} +.mega-menu .margin-top-103 { + margin-top: 103px; +} +@media (max-width: 991px) { + .mega-menu .margin-top-103 { + margin-top: 63px; + } +} +.mega-menu .padding-top-extra-large { + padding-top: 150px; +} +@media (max-width: 1199px) { + .mega-menu .padding-top-extra-large { + padding-top: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-top-extra-large { + padding-top: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .padding-top-extra-large { + padding-top: 64px; + } +} +.mega-menu .padding-medium { + padding: 96px 0; +} +@media (max-width: 1199px) { + .mega-menu .padding-medium { + padding: 96px 0; + } +} +@media (max-width: 991px) { + .mega-menu .padding-medium { + padding: 64px 0; + } +} +@media (max-width: 767px) { + .mega-menu .padding-medium { + padding: 64px 0; + } +} +.mega-menu .padding-medium-top { + padding-top: 96px; +} +@media (max-width: 1199px) { + .mega-menu .padding-medium-top { + padding-top: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-medium-top { + padding-top: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .padding-medium-top { + padding-top: 64px; + } +} +.mega-menu .padding-medium-bottom { + padding-bottom: 96px; +} +@media (max-width: 1199px) { + .mega-menu .padding-medium-bottom { + padding-bottom: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-medium-bottom { + padding-bottom: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .padding-medium-bottom { + padding-bottom: 64px; + } +} +.mega-menu .padding-generic-container-quote-with-logo { + padding: 0 0 47px; +} +@media (max-width: 1199px) { + .mega-menu .padding-generic-container-quote-with-logo { + padding: 29px 0 47px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-generic-container-quote-with-logo { + padding: 24px 0 47px; + } +} +@media (max-width: 767px) { + .mega-menu .padding-generic-container-quote-with-logo { + padding: 30px 0; + } +} +.mega-menu .padding-large { + padding: 120px 0; +} +@media (max-width: 1199px) { + .mega-menu .padding-large { + padding: 96px 0; + } +} +@media (max-width: 991px) { + .mega-menu .padding-large { + padding: 64px 0; + } +} +@media (max-width: 767px) { + .mega-menu .padding-large { + padding: 64px 0; + } +} +.mega-menu .padding-large-top { + padding-top: 120px; +} +@media (max-width: 1199px) { + .mega-menu .padding-large-top { + padding-top: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-large-top { + padding-top: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .padding-large-top { + padding-top: 64px; + } +} +.mega-menu .padding-large-bottom { + padding-bottom: 120px; +} +@media (max-width: 1199px) { + .mega-menu .padding-large-bottom { + padding-bottom: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-large-bottom { + padding-bottom: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .padding-large-bottom { + padding-bottom: 64px; + } +} +.mega-menu .padding-small { + padding: 64px 0; +} +.mega-menu .overflow-padding { + margin-top: -150px; + padding: 0; +} +.mega-menu .padding-60 { + padding: 40px 0; +} +@media (max-width: 991px) { + .mega-menu .padding-60 { + padding: 64px 0; + } +} +@media (min-width: 992px) { + .mega-menu .padding-small-top { + padding-top: 64px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-small-top { + padding-top: 64px; + } +} +@media (min-width: 992px) { + .mega-menu .padding-small-bottom { + padding-bottom: 64px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-small-bottom { + padding-bottom: 64px !important; + } +} +@media (min-width: 992px) { + .mega-menu .padding-extra-small-top { + padding-top: 25px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-extra-small-top { + padding-top: 64px; + } +} +@media (min-width: 992px) { + .mega-menu .padding-extra-small-bottom { + padding-bottom: 25px; + } +} +@media (max-width: 991px) { + .mega-menu .padding-extra-small-bottom { + padding-bottom: 64px; + } +} +.mega-menu .margin-large { + margin: 120px 0; +} +@media (max-width: 1199px) { + .mega-menu .margin-large { + margin: 96px 0; + } +} +@media (max-width: 991px) { + .mega-menu .margin-large { + margin: 64px 0; + } +} +@media (max-width: 767px) { + .mega-menu .margin-large { + margin: 64px 0; + } +} +@media (min-width: 1332px) { + .mega-menu .margin-large-top { + margin-top: 120px; + } +} +@media (max-width: 1199px) { + .mega-menu .margin-large-top { + marign-top: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .margin-large-top { + margin-top: 64px; + } +} +@media (min-width: 1332px) { + .mega-menu .margin-large-bottom { + margin-bottom: 120px; + } +} +@media (max-width: 1199px) { + .mega-menu .margin-large-bottom { + marign-bottom: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .margin-large-bottom { + margin-bottom: 64px; + } +} +@media (min-width: 1332px) { + .mega-menu .margin-medium { + margin: 96px 0; + } + .mega-menu .margin-medium-top { + margin-top: 96px; + } + .mega-menu .margin-medium-bottom { + margin-bottom: 96px; + } +} +@media (min-width: 992px) { + .mega-menu .margin-small { + margin: 64px 0; + } + .mega-menu .margin-small-top { + margin-top: 64px; + } + .mega-menu .margin-small-bottom { + margin-bottom: 64px; + } +} +.mega-menu .no-margin-top { + margin-top: 0 !important; +} +.mega-menu .no-margin-bottom { + margin-bottom: 0 !important; +} +.mega-menu .we-zindex-dropdown { + z-index: 1000; +} +.mega-menu .we-zindex-sticky { + z-index: 1020; +} +.mega-menu .we-zindex-fixed { + z-index: 1030; +} +.mega-menu .we-zindex-modal-backdrop { + z-index: 1040; +} +.mega-menu .we-zindex-modal { + z-index: 1050; +} +.mega-menu .we-zindex-popover { + z-index: 1060; +} +.mega-menu .we-zindex-tooltip { + z-index: 1070; +} +.mega-menu input:-webkit-autofill { + -webkit-box-shadow: inset 0 0 0 30px #fff; +} +.mega-menu input::-webkit-inner-spin-button, .mega-menu input::-webkit-outer-spin-button { + -webkit-appearance: none; +} +.mega-menu input[type=number] { + -moz-appearance: textfield; +} +.mega-menu .v-middle-wrapper { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +.mega-menu .v-middle-inner { + display: table; + height: 100%; + width: 100%; +} +.mega-menu .v-middle { + display: table-cell; + vertical-align: middle; +} +.mega-menu .col-wrapper:after, .mega-menu .column-wrapper:after, .mega-menu .container:after, .mega-menu .content-wrapper:after, .mega-menu .grid-wrapper:after, .mega-menu .two-third:after, .mega-menu .v-middle-wrapper:after, .mega-menu .wrapper:after, .mega-menu header:after { + clear: both; + content: ""; + display: block; +} +.mega-menu .we-col-two { + position: relative; + width: 50%; +} +.mega-menu .we-col { + width: 100%; +} +.mega-menu .we-col-three { + width: 33.33%; +} +@media (max-width: 767px) { + .mega-menu .we-col-three { + width: 100%; + } +} +.mega-menu .we-col-four { + width: 25%; +} +@media (max-width: 767px) { + .mega-menu .we-col-four { + width: 100%; + } +} +.mega-menu .we-col-five { + width: 20%; +} +@media (max-width: 767px) { + .mega-menu .we-col-five { + width: 100%; + } +} +.mega-menu .we-col-six { + width: 16.66%; +} +@media (max-width: 767px) { + .mega-menu .we-col-six { + width: 100%; + } +} +.mega-menu .we-col-seven { + width: 66.66%; +} +@media (max-width: 767px) { + .mega-menu .we-col-seven { + width: 100%; + } +} +.mega-menu h1 { + color: #000; + font-family: roboto, sans-serif; + font-size: 56px; + font-weight: 700; + line-height: 1.21; + margin-bottom: 25px; +} +@media (min-width: 1200px) and (max-width: 1599px) { + .mega-menu h1 { + font-size: 50px; + letter-spacing: -0.013em; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .mega-menu h1 { + font-size: 50px; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .mega-menu h1 { + font-size: 42px; + } +} +@media (min-width: 596px) and (max-width: 767px) { + .mega-menu h1 { + font-size: 38px; + } +} +@media (min-width: 481px) and (max-width: 595px) { + .mega-menu h1 { + font-size: 34px; + } +} +@media (max-width: 480px) { + .mega-menu h1 { + font-size: 32px; + } +} +.mega-menu h1 span { + color: #fff; + display: inline-block; + font-size: 56px; + font-weight: 700; + line-height: 1.21; +} +@media (max-width: 1399px) { + .mega-menu h1 span { + font-size: 50px; + } +} +@media (max-width: 1199px) { + .mega-menu h1 span { + font-size: 50px; + } +} +@media (max-width: 991px) { + .mega-menu h1 span { + font-size: 42px; + } +} +@media (max-width: 767px) { + .mega-menu h1 span { + font-size: 38px; + } +} +@media (max-width: 595px) { + .mega-menu h1 span { + font-size: 34px; + } +} +.mega-menu h2 { + color: #000; + font-family: roboto, sans-serif; + font-size: 40px; + font-weight: 500; + line-height: 1.2; + margin-bottom: 22px; +} +@media (max-width: 1399px) { + .mega-menu h2 { + font-size: 38px; + } +} +@media (max-width: 1199px) { + .mega-menu h2 { + font-size: 38px; + } +} +@media (max-width: 991px) { + .mega-menu h2 { + font-size: 34px; + margin-bottom: 15px; + } +} +@media (max-width: 767px) { + .mega-menu h2 { + font-size: 32px; + } +} +.mega-menu h2 span { + color: #fff; + display: inline-block; + font-size: 40px; + font-weight: 500; + line-height: 1.2; +} +@media (max-width: 1399px) { + .mega-menu h2 span { + font-size: 38px; + } +} +@media (max-width: 1199px) { + .mega-menu h2 span { + font-size: 38px; + } +} +@media (max-width: 991px) { + .mega-menu h2 span { + font-size: 34px; + } +} +@media (max-width: 767px) { + .mega-menu h2 span { + font-size: 32px; + } +} +.mega-menu h3 { + color: #000; + font-family: roboto, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 1.15; + margin-bottom: 24px; +} +@media (max-width: 1399px) { + .mega-menu h3 { + font-size: 30px; + } +} +@media (max-width: 1199px) { + .mega-menu h3 { + font-size: 26px; + } +} +@media (max-width: 991px) { + .mega-menu h3 { + font-size: 24px; + margin-bottom: 15px; + } +} +@media (max-width: 767px) { + .mega-menu h3 { + font-size: 22px; + } +} +@media (max-width: 595px) { + .mega-menu h3 { + font-size: 20px; + } +} +.mega-menu h4 { + color: #000; + font-family: roboto, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 1.25; + margin-bottom: 9px; +} +@media (max-width: 1399px) { + .mega-menu h4 { + font-size: 22px; + } +} +@media (max-width: 1199px) { + .mega-menu h4 { + font-size: 22px; + } +} +@media (max-width: 991px) { + .mega-menu h4 { + font-size: 20px; + } +} +@media (max-width: 767px) { + .mega-menu h4 { + font-size: 18px; + } +} +@media (max-width: 595px) { + .mega-menu h4 { + font-size: 18px; + } +} +.mega-menu h5 { + color: #3c3c3c; + font-family: roboto, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5; +} +@media (max-width: 767px) { + .mega-menu h5 { + font-size: 16px; + } +} +.mega-menu h6 { + color: #000; + font-size: 16px; + font-weight: 500; +} +.mega-menu .para-18, .mega-menu h6 { + font-family: roboto, sans-serif; + line-height: 1.5; +} +.mega-menu .para-18 { + color: #3c3c3c; + font-size: 18px; + font-weight: 400; +} +@media (max-width: 767px) { + .mega-menu .para-18 { + font-size: 16px; + } +} +.mega-menu p { + color: #000; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.006em; + line-height: 1.31; +} +@media (max-width: 1399px) { + .mega-menu p { + font-size: 14px; + } +} +.mega-menu p a { + color: #006eff; +} +.mega-menu .small-font { + color: #000; + font-size: 12px; + font-weight: 400; + line-height: 1.31; +} +.mega-menu .heading-1, .mega-menu .small-font, .mega-menu span { + font-family: roboto, sans-serif; +} +.mega-menu .heading-1 { + color: #000; + font-size: 56px; + font-weight: 700; + line-height: 1.21; + margin-bottom: 25px; +} +@media (max-width: 1399px) { + .mega-menu .heading-1 { + font-size: 50px; + letter-spacing: -0.013em; + } +} +@media (max-width: 1199px) { + .mega-menu .heading-1 { + font-size: 50px; + } +} +@media (max-width: 991px) { + .mega-menu .heading-1 { + font-size: 42px; + } +} +@media (max-width: 767px) { + .mega-menu .heading-1 { + font-size: 38px; + } +} +@media (max-width: 595px) { + .mega-menu .heading-1 { + font-size: 34px; + } +} +.mega-menu .heading-1 .bolder-text { + color: #fff; + display: inline-block; + font-size: 56px; + font-weight: 700; + line-height: 1.21; +} +@media (max-width: 1399px) { + .mega-menu .heading-1 .bolder-text { + font-size: 50px; + } +} +@media (max-width: 1199px) { + .mega-menu .heading-1 .bolder-text { + font-size: 50px; + } +} +@media (max-width: 991px) { + .mega-menu .heading-1 .bolder-text { + font-size: 42px; + } +} +@media (max-width: 767px) { + .mega-menu .heading-1 .bolder-text { + font-size: 38px; + } +} +@media (max-width: 595px) { + .mega-menu .heading-1 .bolder-text { + font-size: 34px; + } +} +.mega-menu .heading-2 { + color: #000; + font-family: roboto, sans-serif; + font-size: 40px; + font-weight: 500; + line-height: 1.2; + margin-bottom: 22px; +} +@media (max-width: 1399px) { + .mega-menu .heading-2 { + font-size: 38px; + } +} +@media (max-width: 1199px) { + .mega-menu .heading-2 { + font-size: 38px; + } +} +@media (max-width: 991px) { + .mega-menu .heading-2 { + font-size: 34px; + margin-bottom: 15px; + } +} +@media (max-width: 767px) { + .mega-menu .heading-2 { + font-size: 32px; + } +} +.mega-menu .heading-2 .bolder-text { + color: #fff; + display: inline-block; + font-size: 40px; + font-weight: 500; + line-height: 1.2; +} +@media (max-width: 1399px) { + .mega-menu .heading-2 .bolder-text { + font-size: 38px; + } +} +@media (max-width: 1199px) { + .mega-menu .heading-2 .bolder-text { + font-size: 38px; + } +} +@media (max-width: 991px) { + .mega-menu .heading-2 .bolder-text { + font-size: 34px; + } +} +@media (max-width: 767px) { + .mega-menu .heading-2 .bolder-text { + font-size: 32px; + } +} +.mega-menu .heading-3 { + color: #000; + font-family: roboto, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 1.15; + margin-bottom: 24px; +} +@media (max-width: 1399px) { + .mega-menu .heading-3 { + font-size: 30px; + } +} +@media (max-width: 1199px) { + .mega-menu .heading-3 { + font-size: 26px; + } +} +@media (max-width: 991px) { + .mega-menu .heading-3 { + font-size: 24px; + margin-bottom: 15px; + } +} +@media (max-width: 767px) { + .mega-menu .heading-3 { + font-size: 22px; + } +} +@media (max-width: 595px) { + .mega-menu .heading-3 { + font-size: 20px; + } +} +.mega-menu .heading-4 { + color: #000; + font-family: roboto, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 1.25; + margin-bottom: 9px; +} +@media (max-width: 1399px) { + .mega-menu .heading-4 { + font-size: 22px; + } +} +@media (max-width: 1199px) { + .mega-menu .heading-4 { + font-size: 22px; + } +} +@media (max-width: 991px) { + .mega-menu .heading-4 { + font-size: 20px; + } +} +@media (max-width: 767px) { + .mega-menu .heading-4 { + font-size: 18px; + } +} +@media (max-width: 595px) { + .mega-menu .heading-4 { + font-size: 18px; + } +} +.mega-menu .heading-5 { + color: #3c3c3c; + font-family: roboto, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5; +} +@media (max-width: 767px) { + .mega-menu .heading-5 { + font-size: 16px; + } +} +.mega-menu .heading-6 { + font-size: 16px; + font-weight: 500; + line-height: 1.5; +} +.mega-menu .h1, .mega-menu .heading-6 { + color: #000; + font-family: roboto, sans-serif; +} +.mega-menu .h1 { + font-size: 56px; + font-weight: 700; + line-height: 1.21; +} +@media (max-width: 1399px) { + .mega-menu .h1 { + font-size: 50px; + letter-spacing: -0.013em; + } +} +@media (max-width: 1199px) { + .mega-menu .h1 { + font-size: 50px; + } +} +@media (max-width: 991px) { + .mega-menu .h1 { + font-size: 42px; + } +} +@media (max-width: 767px) { + .mega-menu .h1 { + font-size: 38px; + } +} +@media (max-width: 595px) { + .mega-menu .h1 { + font-size: 34px; + } +} +.mega-menu .h2 { + color: #000; + font-family: roboto, sans-serif; + font-size: 40px; + font-weight: 500; + line-height: 1.2; +} +@media (max-width: 1399px) { + .mega-menu .h2 { + font-size: 38px; + } +} +@media (max-width: 1199px) { + .mega-menu .h2 { + font-size: 38px; + } +} +@media (max-width: 991px) { + .mega-menu .h2 { + font-size: 34px; + margin-bottom: 15px; + } +} +@media (max-width: 767px) { + .mega-menu .h2 { + font-size: 32px; + } +} +.mega-menu .h3 { + color: #000; + font-family: roboto, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 1.15; +} +@media (max-width: 1399px) { + .mega-menu .h3 { + font-size: 30px; + } +} +@media (max-width: 1199px) { + .mega-menu .h3 { + font-size: 26px; + } +} +@media (max-width: 991px) { + .mega-menu .h3 { + font-size: 24px; + margin-bottom: 15px; + } +} +@media (max-width: 767px) { + .mega-menu .h3 { + font-size: 22px; + } +} +@media (max-width: 595px) { + .mega-menu .h3 { + font-size: 20px; + } +} +.mega-menu .h4 { + color: #000; + font-family: roboto, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 1.25; +} +@media (max-width: 1399px) { + .mega-menu .h4 { + font-size: 22px; + } +} +@media (max-width: 1199px) { + .mega-menu .h4 { + font-size: 22px; + } +} +@media (max-width: 991px) { + .mega-menu .h4 { + font-size: 20px; + } +} +@media (max-width: 767px) { + .mega-menu .h4 { + font-size: 18px; + } +} +@media (max-width: 595px) { + .mega-menu .h4 { + font-size: 18px; + } +} +.mega-menu .h5 { + color: #3c3c3c; + font-family: roboto, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5; +} +@media (max-width: 767px) { + .mega-menu .h5 { + font-size: 16px; + } +} +.mega-menu .h6 { + font-weight: 500; + line-height: 1.5; +} +.mega-menu .h6, .mega-menu .paragraph { + color: #000; + font-family: roboto, sans-serif; + font-size: 16px; +} +.mega-menu .paragraph { + font-weight: 400; + letter-spacing: 0.006em; + line-height: 1.31; +} +@media (max-width: 1399px) { + .mega-menu .paragraph { + font-size: 14px; + } +} +.mega-menu .paragraph .anchor { + color: #006eff; +} +.mega-menu h1.mb-20, .mega-menu h2.mb-20, .mega-menu h3.mb-20, .mega-menu h4.mb-20, .mega-menu h5.mb-20, .mega-menu h6.mb-20 { + margin-bottom: 20px; +} +@media (max-width: 991px) { + .mega-menu h1.mb-20, .mega-menu h2.mb-20, .mega-menu h3.mb-20, .mega-menu h4.mb-20, .mega-menu h5.mb-20, .mega-menu h6.mb-20 { + margin-bottom: 10px; + } +} +.mega-menu h1.mb-10, .mega-menu h2.mb-10, .mega-menu h3.mb-10, .mega-menu h4.mb-10, .mega-menu h5.mb-10, .mega-menu h6.mb-10 { + margin-bottom: 10px !important; +} +@media (max-width: 767px) { + .mega-menu h1.mb-10, .mega-menu h2.mb-10, .mega-menu h3.mb-10, .mega-menu h4.mb-10, .mega-menu h5.mb-10, .mega-menu h6.mb-10 { + margin-bottom: 5px; + } +} +.mega-menu h1.mb-15, .mega-menu h2.mb-15, .mega-menu h3.mb-15, .mega-menu h4.mb-15, .mega-menu h5.mb-15, .mega-menu h6.mb-15 { + margin-bottom: 15px; +} +@media (max-width: 767px) { + .mega-menu h1.mb-15, .mega-menu h2.mb-15, .mega-menu h3.mb-15, .mega-menu h4.mb-15, .mega-menu h5.mb-15, .mega-menu h6.mb-15 { + margin-bottom: 10px; + } +} +.mega-menu .bg-img { + overflow: hidden; +} +.mega-menu .bg-img img { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: inherit; + object-position: inherit; +} +.mega-menu .bg-img .cmp-image { + height: 100%; + width: 100%; +} +.mega-menu .bg-white { + background-color: #fff !important; +} +.mega-menu .bg-black { + background-color: #000 !important; +} +.mega-menu .bg-light-black { + background-color: #3c3c3c !important; +} +.mega-menu .bg-gray { + background-color: #fff !important; +} +.mega-menu .bg-dark-blue { + background-color: #00338a !important; +} +.mega-menu .bg-blue { + background-color: #006eff !important; +} +.mega-menu .bg-smalt { + background-color: #00439c !important; +} +.mega-menu .bg-red { + background-color: red !important; +} +.mega-menu .bg-green { + background-color: #1cb6ad !important; +} +.mega-menu .bg-gray { + background-color: #616161 !important; +} +.mega-menu .bg-mid-gray { + background-color: #7e7e7e !important; +} +.mega-menu .bg-light-gray { + background-color: #c5c5c5 !important; +} +.mega-menu .bg-alto { + background-color: #dedede !important; +} +.mega-menu .bg-gallery { + background-color: #eee !important; +} +.mega-menu .bg-yellow { + background-color: #ffe522 !important; +} +.mega-menu .bg-skyblue { + background-color: #008cff !important; +} +.mega-menu .bg-blue1 { + background-color: #005ed9 !important; +} +.mega-menu .bg-darkish-blue { + background-color: #00439c !important; +} +.mega-menu .bg-ice-blue, .mega-menu .bg-light-sky-blue { + background-color: #e4f2ff !important; +} +.mega-menu .text-left { + text-align: left; +} +.mega-menu .text-right { + text-align: right; +} +.mega-menu .text-center { + text-align: center; +} +.mega-menu .no-padding { + padding: 0 !important; +} +.mega-menu .no-padding-top { + padding-top: 0 !important; +} +.mega-menu .xs-padding-top { + padding-top: 10px; +} +.mega-menu .sm-padding-top { + padding-top: 20px; +} +.mega-menu .md-padding-top { + padding-top: 40px; +} +.mega-menu .lg-padding-top { + padding-top: 80px; +} +@media (max-width: 1399px) { + .mega-menu .lg-padding-top { + padding-top: 60px; + } +} +@media (max-width: 991px) { + .mega-menu .lg-padding-top { + padding-top: 40px; + } +} +@media (max-width: 767px) { + .mega-menu .lg-padding-top { + padding-top: 40px; + } +} +.mega-menu .xl-padding-top { + padding-top: 120px; +} +@media (max-width: 1399px) { + .mega-menu .xl-padding-top { + padding-top: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .xl-padding-top { + padding-top: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .xl-padding-top { + padding-top: 64px; + } +} +.mega-menu .no-padding-bottom { + padding-bottom: 0 !important; +} +.mega-menu .xs-padding-bottom { + padding-bottom: 10px; +} +.mega-menu .sm-padding-bottom { + padding-bottom: 20px; +} +.mega-menu .md-padding-bottom { + padding-bottom: 40px; +} +.mega-menu .lg-padding-bottom { + padding-bottom: 80px; +} +@media (max-width: 1399px) { + .mega-menu .lg-padding-bottom { + padding-bottom: 60px; + } +} +@media (max-width: 991px) { + .mega-menu .lg-padding-bottom { + padding-bottom: 40px; + } +} +@media (max-width: 767px) { + .mega-menu .lg-padding-bottom { + padding-bottom: 40px; + } +} +.mega-menu .xl-padding-bottom { + padding-bottom: 120px; +} +@media (max-width: 1399px) { + .mega-menu .xl-padding-bottom { + padding-bottom: 96px; + } +} +@media (max-width: 991px) { + .mega-menu .xl-padding-bottom { + padding-bottom: 64px; + } +} +@media (max-width: 767px) { + .mega-menu .xl-padding-bottom { + padding-bottom: 64px; + } +} +.mega-menu .no-padding-bottom-very-small-top { + padding-bottom: 0 !important; + padding-top: 40px !important; +} +.mega-menu .no-padding-top-very-small-bottom { + padding-bottom: 40px; + padding-top: 0; +} +@media (max-width: 767px) { + .mega-menu .no-padding-top-very-small-bottom { + padding-bottom: 20px; + } +} +.mega-menu .no-padding-top-small-bottom { + padding-bottom: 60px !important; + padding-top: 0 !important; +} +@media (max-width: 991px) { + .mega-menu .no-padding-top-small-bottom { + padding-bottom: 35px !important; + } +} +@media (max-width: 595px) { + .mega-menu .no-padding-top-small-bottom { + padding-bottom: 25px !important; + } +} +.mega-menu .no-padding-top-large-bottom { + padding-bottom: 64px !important; + padding-top: 0 !important; +} +@media (max-width: 767px) { + .mega-menu .no-padding-top-large-bottom { + padding-bottom: 84px !important; + } +} +@media (max-width: 595px) { + .mega-menu .no-padding-top-large-bottom { + padding-bottom: 64px !important; + } +} +.mega-menu .no-margin { + margin: 0 !important; +} +.mega-menu .zoom-in img { + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.mega-menu .zoom-in:hover img { + transform: scale(1.06); +} +.mega-menu .zoom-bg .bg-img img { + transform: scale(1); + transition: transform 0.4s ease-in-out; +} +.mega-menu .zoom-bg:hover .bg-img img { + transform: scale(1.06); +} +.mega-menu .blend-mode { + height: 100%; + left: 0; + mix-blend-mode: multiply; + position: absolute; + top: 0; + width: 100%; + z-index: 1; +} +.mega-menu ::-webkit-input-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1; +} +.mega-menu ::-moz-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1; +} +.mega-menu :-ms-input-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1; +} +.mega-menu :-moz-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1; +} +.mega-menu ::-ms-clear { + display: none; + height: 0; + width: 0; +} +.mega-menu body.stop-scroll { + overflow: hidden; +} +.mega-menu .o-visible { + overflow: visible; +} +.mega-menu .o-hidden, .mega-menu .popup-open { + overflow: hidden; +} +.mega-menu .popup-open { + width: 100%; +} +.mega-menu .popup-open:after { + background: rgba(0, 0, 0, 0.5); + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 2; +} +.mega-menu .index .container > ul > li { + margin-bottom: 30px; +} +.mega-menu .index .container > ul > li h3 { + margin-bottom: 20px; +} +.mega-menu .index .container > ul > li a { + color: #000; +} +.mega-menu .index .container > ul > li ul { + padding-left: 40px; +} +.mega-menu .pattern-top-right { + position: absolute; + right: -27px; + top: -38px; +} +@media (max-width: 1199px) { + .mega-menu .pattern-top-right { + top: -30px; + } +} +@media (max-width: 991px) { + .mega-menu .pattern-top-right { + top: -25px; + } +} +.mega-menu section.intro-block { + margin-bottom: 50px; + text-align: left; + width: 100%; +} +@media (max-width: 1399px) { + .mega-menu section.intro-block { + margin-bottom: 40px; + } +} +@media (max-width: 1199px) { + .mega-menu section.intro-block { + margin-bottom: 40px; + } +} +@media (max-width: 991px) { + .mega-menu section.intro-block { + margin-bottom: 30px; + } +} +.mega-menu section.intro-block:after { + clear: both; + content: ""; + display: block; +} +.mega-menu section.intro-block h4 a { + color: #006eff; + transition: color 0.3s ease-in-out; +} +.mega-menu section.intro-block h4 a:hover { + color: #005ed9; +} +@media (max-width: 595px) { + .mega-menu section.intro-block p { + word-break: break-word; + } +} +.mega-menu section.intro-block p a { + transition: color 0.3s ease-in-out; +} +@media (max-width: 595px) { + .mega-menu section.intro-block p a { + word-break: break-word; + } +} +.mega-menu section.intro-block p a:hover { + color: #005ed9; + text-decoration: underline; +} +.mega-menu section.intro-block .paragraph a { + transition: color 0.3s ease-in-out; +} +.mega-menu section.intro-block .paragraph a:hover { + color: #005ed9; + text-decoration: underline; +} +.mega-menu section.intro-block.with-link { + font-size: 0; +} +.mega-menu section.intro-block.with-link .text-wrap { + display: inline-block; + padding-right: 40px; + width: calc(100% - 176px); +} +@media (max-width: 595px) { + .mega-menu section.intro-block.with-link .text-wrap { + margin-bottom: 20px; + padding-right: 0; + width: 100%; + } +} +.mega-menu section.intro-block.with-link p { + color: #000; + font-size: 16px; + line-height: 1.5; + max-width: 765px; +} +@media (max-width: 1399px) { + .mega-menu section.intro-block.with-link p { + font-size: 16px; + } +} +.mega-menu section.intro-block.with-link .btn-wrap { + display: inline-block; + position: relative; + vertical-align: bottom; + width: 176px; +} +.mega-menu section.intro-block.with-link .btn-wrap a { + bottom: 30px; + margin-right: 0; + position: absolute; + right: 0; +} +@media (max-width: 595px) { + .mega-menu section.intro-block.with-link .btn-wrap a { + position: static; + } +} +@media (max-width: 320px) { + .mega-menu section.intro-block a:last-of-type { + margin-right: 0; + } +} +.mega-menu section.intro-block .text-wrap a.hidden { + display: none; +} +.mega-menu section.intro-block.dark { + background-color: #000; +} +.mega-menu section.intro-block.dark h1, .mega-menu section.intro-block.dark h2, .mega-menu section.intro-block.dark h3, .mega-menu section.intro-block.dark h4, .mega-menu section.intro-block.dark h5, .mega-menu section.intro-block.dark h6, .mega-menu section.intro-block.dark p { + color: #fff; +} +.mega-menu section.intro-block.oem-intro.dark { + background-color: #000; +} +.mega-menu section.intro-block.oem-intro.dark h1, .mega-menu section.intro-block.oem-intro.dark h2, .mega-menu section.intro-block.oem-intro.dark h3, .mega-menu section.intro-block.oem-intro.dark h4, .mega-menu section.intro-block.oem-intro.dark h5, .mega-menu section.intro-block.oem-intro.dark h6, .mega-menu section.intro-block.oem-intro.dark p { + color: #fff; +} +@media (min-width: 992px) and (max-width: 1200px) { + .mega-menu section.intro-block.oem-intro { + padding: 120px 0; + } +} +.mega-menu section.intro-block.oem-intro ul { + margin: 15px 0; + padding-left: 21px; +} +.mega-menu section.intro-block.oem-intro ul li { + font-size: 16px; + margin: 5px 0; + padding-left: 0; +} +@media (max-width: 1399px) { + .mega-menu section.intro-block.oem-intro ul li { + font-size: 14px; + } +} +.mega-menu section.intro-block.oem-intro table { + margin: 20px 0; + width: 100%; +} +@media (max-width: 480px) { + .mega-menu section.intro-block.oem-intro table p { + font-size: 12px; + } +} +@media (max-width: 320px) { + .mega-menu section.intro-block.oem-intro table p { + font-size: 11px; + } +} +@media (max-width: 595px) { + .mega-menu section.intro-block.oem-intro table.more-cols td, .mega-menu section.intro-block.oem-intro table.more-cols th { + font-size: 11px !important; + max-width: 90px !important; + } +} +@media (max-width: 320px) { + .mega-menu section.intro-block.oem-intro table.more-cols td, .mega-menu section.intro-block.oem-intro table.more-cols th { + font-size: 10px !important; + } +} +@media (max-width: 595px) { + .mega-menu section.intro-block.oem-intro table.more-cols li { + font-size: 11px !important; + } +} +@media (max-width: 320px) { + .mega-menu section.intro-block.oem-intro table.more-cols li { + font-size: 10px !important; + } +} +.mega-menu section.intro-block.oem-intro td, .mega-menu section.intro-block.oem-intro th { + border: 1px solid #616161; + font-family: roboto, sans-serif; + font-size: 16px; + line-height: 1.67; + padding: 10px; + vertical-align: top; +} +@media (max-width: 480px) { + .mega-menu section.intro-block.oem-intro td, .mega-menu section.intro-block.oem-intro th { + font-size: 12px; + padding: 10px 7px; + } +} +@media (max-width: 320px) { + .mega-menu section.intro-block.oem-intro td, .mega-menu section.intro-block.oem-intro th { + font-size: 11px; + padding: 10px 5px; + } +} +.mega-menu section.intro-block.oem-intro td ul, .mega-menu section.intro-block.oem-intro th ul { + margin: 0; +} +@media (max-width: 480px) { + .mega-menu section.intro-block.oem-intro td ul, .mega-menu section.intro-block.oem-intro th ul { + list-style-type: none; + padding-left: 13px; + } + .mega-menu section.intro-block.oem-intro td ul li, .mega-menu section.intro-block.oem-intro th ul li { + font-size: 12px; + } +} +@media (max-width: 320px) { + .mega-menu section.intro-block.oem-intro td ul li, .mega-menu section.intro-block.oem-intro th ul li { + font-size: 11px; + } +} +.mega-menu section.intro-block.oem-intro td ul li:first-of-type, .mega-menu section.intro-block.oem-intro th ul li:first-of-type { + margin-top: 0 !important; +} +@media (max-width: 480px) { + .mega-menu section.intro-block.oem-intro td ul li:before, .mega-menu section.intro-block.oem-intro th ul li:before { + background-color: #000; + border-radius: 50%; + height: 4px; + left: -12px; + width: 4px; + } +} +.mega-menu section.intro-block.oem-intro p { + margin-bottom: 17px; +} +.mega-menu section.intro-block.oem-intro h3 img { + height: 30px; + max-width: 30px; +} +@media (max-width: 1024px) { + .mega-menu section.intro-block.oem-intro h3 img { + height: 23px; + max-width: 23px; + } +} +@media (max-width: 767px) { + .mega-menu section.intro-block.oem-intro h3 img { + height: 20px; + max-width: 20px; + } +} +.mega-menu section.intro-block.full-width-intro .text-wrap { + max-width: 100%; +} +.mega-menu .breadcrumb { + margin-bottom: 12px; + padding: 12px 0; +} +.mega-menu .breadcrumb a { + color: #c5c5c5; + font-size: 12px; + font-weight: 500; + letter-spacing: 0.96px; + position: relative; + transition: all 0.4s ease; + z-index: 4; +} +@media (max-width: 595px) { + .mega-menu .breadcrumb a { + line-height: 1.7; + } +} +.mega-menu .breadcrumb a:hover { + color: #fff; +} +.mega-menu .breadcrumb a:after { + color: #dedede; + content: "/"; + display: inline-block; + font-size: 12px; + margin: 0 8px; +} +@media (max-width: 595px) { + .mega-menu .breadcrumb a:after { + margin: 0 3px; + } +} +@media (max-width: 320px) { + .mega-menu .breadcrumb a:after { + margin: 0 2px; + } +} +.mega-menu .breadcrumb a:first-child { + pointer-events: auto !important; +} +.mega-menu .breadcrumb a:last-child { + margin: 0; + padding: 0; + pointer-events: none; +} +.mega-menu .breadcrumb a:last-child:after { + margin-right: 0; +} +.mega-menu .breadcrumb.oem-breadcrumb { + background: transparent; + padding: 128px 0 0; +} +.mega-menu .breadcrumb.oem-breadcrumb a { + color: #616161; +} +.mega-menu .breadcrumb.oem-breadcrumb a:hover { + color: #000; +} +@media (max-width: 767px) { + .mega-menu .breadcrumb.bg-white { + padding: 130px 0 0; + } +} +.mega-menu .breadcrumb.bg-white a.active { + color: #000; +} +.mega-menu .breadcrumb.hover-black a, .mega-menu .breadcrumb.hover-black a:after { + color: #616161; +} +.mega-menu .breadcrumb.hover-black a:hover { + color: #000; +} +.mega-menu .breadcrumb.gray-color a { + color: #dedede; +} +.mega-menu .hs-form p { + color: #000; +} +.mega-menu section.blue-bar { + background-color: #e4f2ff; + height: 40px; + padding: 0; +} +.mega-menu section.blue-bar.height-32 { + height: 32px; +} +.mega-menu section.blue-bar.height-24 { + height: 24px; +} +.mega-menu .play-video:after { + background: #006eff url(../../../content/dam/bitdefender/play_icon_blue.png) no-repeat 50%; + background-size: 100%; + border-radius: 50%; + content: ""; + cursor: pointer; + display: block; + height: 80px; + left: 50%; + opacity: 0.8; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity 0.3s ease-in-out; + width: 80px; +} +@media (max-width: 1199px) { + .mega-menu .play-video:after { + height: 60px; + width: 60px; + } +} +@media (max-width: 991px) { + .mega-menu .play-video:after { + height: 50px; + width: 50px; + } +} +@media (max-width: 480px) { + .mega-menu .play-video:after { + height: 40px; + width: 40px; + } +} +.mega-menu .play-video:hover:after { + opacity: 1; +} +.mega-menu .popup-form { + background: #fff; + border-radius: 8px; + box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1); + display: none; + left: 50%; + max-height: 100%; + max-width: 950px; + overflow-y: scroll; + padding: 30px; + position: fixed; + top: 50%; + transform: translate(-50%, -50%); + width: 95%; +} +.mega-menu .popup-form.active { + display: block; + z-index: 15; +} +.mega-menu .popup-form .form-columns-2 { + display: flex; + flex-wrap: wrap; + width: 100%; +} +.mega-menu .popup-form input, .mega-menu .popup-form textarea { + background-color: #f5f8fa; + border: 1px solid #cbd6e2; + border-radius: 4px; + color: #616161; + display: block; + font-family: roboto, sans-serif; + font-size: 16px; + height: 40px; + margin: 0; + padding: 0 15px; + resize: none; + transition: all 0.1s ease; + width: 100%; +} +.mega-menu .popup-form #fname { + padding-right: 15px; +} +@media (max-width: 767px) { + .mega-menu .popup-form #fname { + padding-right: 0; + } +} +.mega-menu .popup-form textarea { + height: auto; + line-height: 22px; + padding: 15px; + resize: both; +} +.mega-menu .popup-form li { + list-style-type: none; +} +.mega-menu .popup-form li, .mega-menu .popup-form ul { + padding-left: 0; +} +.mega-menu .popup-form label { + display: inline-block; + font-family: roboto, sans-serif; + font-size: 16px; + margin: 0 0 10px; +} +.mega-menu .popup-form label.hidden { + display: none; +} +.mega-menu .popup-form .wrap { + display: flex; + flex-wrap: wrap; + margin-bottom: 20px; + width: 100%; +} +.mega-menu .popup-form .fname, .mega-menu .popup-form .lname { + width: 50%; +} +@media (max-width: 767px) { + .mega-menu .popup-form .fname, .mega-menu .popup-form .lname { + width: 100%; + } +} +.mega-menu .popup-form .lname { + padding-left: 15px; +} +@media (max-width: 767px) { + .mega-menu .popup-form .lname { + margin: 20px 0 0; + padding-left: 0; + } +} +.mega-menu .popup-form .field { + margin-bottom: 20px; +} +@media (max-width: 767px) { + .mega-menu .popup-form .field { + margin-bottom: 10px; + } +} +.mega-menu .popup-form span { + color: red; + display: inline; +} +.mega-menu .popup-form .condition { + display: flex; +} +.mega-menu .popup-form .condition p { + display: inline; + padding-top: 4px; +} +.mega-menu .popup-form .check-box { + background-color: #f5f8fa; + display: inline; + height: 13px; + margin-right: 10px; + position: relative; + top: 7px; + width: -moz-fit-content; + width: fit-content; +} +.mega-menu .popup-form h6 { + font-size: 14px; + font-weight: 300; + margin: 12px 0; +} +.mega-menu .popup-form .legal-consent-container { + margin-bottom: 30px; +} +.mega-menu .popup-form input[type=submit] { + align-items: center; + background-color: #eb0000; + border: 2px solid #eb0000; + border-radius: 8px; + color: #fff; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +@media (max-width: 767px) { + .mega-menu .popup-form input[type=submit] { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px; + } +} +.mega-menu .popup-form input[type=submit] span { + color: #fff; + display: inline-block; + position: relative; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu .popup-form input[type=submit] span:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: right, opacity; +} +@media (max-width: 767px) { + .mega-menu .popup-form input[type=submit] span:after { + top: 6px; + } +} +.mega-menu .popup-form input[type=submit]:hover span { + transform: translate3d(-11px, 0, 0); +} +.mega-menu .popup-form input[type=submit]:hover span:after { + opacity: 1; + right: -22px; +} +.mega-menu .popup-form input[type=submit]:hover { + background-color: #d80000; + border: 2px solid #d80000; +} +.mega-menu .popup-form .close-btn { + background: url(../../../content/dam/bitdefender/close-icon.svg) no-repeat; + background-size: 40px; + cursor: pointer; + height: 32px; + overflow: hidden; + position: absolute; + right: 12px; + top: 0; + width: 32px; +} +.mega-menu .popup-form .form-message-wrapper { + margin: 0 0 20px; + text-align: center; +} +.mega-menu input[type=text]::-ms-clear, .mega-menu input[type=text]::-ms-reveal { + display: none; + height: 0; + width: 0; +} +.mega-menu input[type=search]::-webkit-search-cancel-button, .mega-menu input[type=search]::-webkit-search-decoration, .mega-menu input[type=search]::-webkit-search-results-button, .mega-menu input[type=search]::-webkit-search-results-decoration { + display: none; +} +.mega-menu .we-interactive .op-interactive { + background: #000; + padding-top: 130px; +} +.mega-menu .we-loader { + animation: loader2 0.8s linear infinite; + background: linear-gradient(-60deg, transparent, transparent 50%, #eee 0, #eee 75%, transparent 0, transparent); + background-position: 0 0; + background-size: 1em 2em; + border: 0.05em solid #eee; + border-radius: 0.1em; + color: transparent !important; + display: inline-block; + height: 0.66em; + vertical-align: middle; + width: 2em; +} +@keyframes loader2 { + 0% { + background-position: 0 0; + } + to { + background-position: -2em 0; + } +} +.mega-menu .strikethrough { + text-decoration: line-through; +} +.mega-menu .newpar.section { + padding: 0; +} +.mega-menu .mega-menu { + position: relative; + z-index: 5; +} +.mega-menu .mega-menu__container { + background: #fff; + position: relative; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__container { + padding-bottom: 66px; + } +} +.mega-menu .mega-menu__container:after { + background: #f0f0f0; + content: ""; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + width: 100%; + z-index: 2; +} +.mega-menu .mega-menu__content { + align-items: center; + display: flex; + height: 64px; + justify-content: space-between; + position: static; + width: 100%; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__content { + justify-content: flex-start; + } +} +.mega-menu .mega-menu a, .mega-menu .mega-menu span { + font-family: Arial, sans-serif; +} +.mega-menu .mega-menu__l2-link, .mega-menu .mega-menu__link, .mega-menu .mega-menu__right-link { + color: #000; +} +.mega-menu .mega-menu__category-links { + display: none; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__category-links { + display: block; + } +} +.mega-menu .mega-menu__category-link { + color: #006dff; + display: inline-block; + font-size: 0.875rem; + margin-bottom: 12px; + margin-right: 20px; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__category-link { + font-size: 1rem; + } +} +.mega-menu .mega-menu ul { + list-style: none; + padding-left: 0; +} +.mega-menu .mega-menu li { + margin-bottom: 0; + padding-left: 0; +} +.mega-menu .mega-menu__logo { + display: block; + margin-right: 20px; + width: 164px; +} +.mega-menu .mega-menu__button-wrap { + display: flex; + flex-grow: 1; + justify-content: flex-end; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__button-wrap { + display: none; + } +} +.mega-menu .mega-menu__button { + cursor: pointer; + display: block; + position: relative; +} +.mega-menu .mega-menu__button-bar { + background-color: #000; + display: block; + height: 3px; + margin: 5px 0; + opacity: 1; + transition: transform 0.3s ease-in-out, opacity 0.3s; + width: 25px; +} +.mega-menu .mega-menu__button-bar:last-child { + margin-bottom: 0; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__left-container { + flex-grow: 1; + } +} +.mega-menu .mega-menu__left, .mega-menu .mega-menu__right { + display: none; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__left, .mega-menu .mega-menu__right { + display: flex; + } +} +@media (max-width: 991px) { + .mega-menu .mega-menu__left { + background: #fff; + left: 0; + min-height: 100vh; + position: absolute; + top: 100%; + width: 100%; + } +} +@media (min-width: 992px) { + .mega-menu .mega-menu__left { + flex-grow: 1; + } +} +@media (max-width: 991px) { + .mega-menu .mega-menu__right { + background: #fff; + left: 0; + min-height: calc(100vh - var(--right-links-offset, 193px)); + position: absolute; + top: calc(100% + var(--right-links-offset, 193px)); + width: 100%; + } +} +.mega-menu .mega-menu__link, .mega-menu .mega-menu__right-link { + border-bottom: 4px solid transparent; + color: #000; + cursor: pointer; + display: block; + font-size: 0.875rem; + line-height: 1; + margin-top: 15px; + padding: 16px 0; +} +.mega-menu .mega-menu__link:hover, .mega-menu .mega-menu__right-link:hover { + color: #006dff; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__link, .mega-menu .mega-menu__right-link { + font-size: 1rem; + } + .mega-menu .mega-menu__right-link { + border-bottom: none; + margin-top: 0; + } + .mega-menu .mega-menu__right-item:before { + content: none; + } + .mega-menu .mega-menu__right-item:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + margin-left: -20px; + margin-right: -20px; + position: absolute; + width: calc(100% + 40px); + } + .mega-menu .mega-menu__right-item .navigation__heading + .navigation__links { + display: block; + } +} +.mega-menu .mega-menu__item, .mega-menu .mega-menu__right-item { + margin: 0 20px; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__item:after { + background: #f0f0f0; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + .mega-menu .mega-menu__link { + border-bottom: none; + font-weight: 900; + margin-top: 0; + position: relative; + } + .mega-menu .mega-menu__link:after { + background: url(../../../content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat; + background-size: 100%; + content: ""; + height: 16px; + position: absolute; + right: 5px; + top: 16px; + transform: rotate(90deg); + width: 16px; + } +} +.mega-menu .mega-menu__right-item { + position: relative; +} +.mega-menu .mega-menu__right-item:before { + background: #f0f0f0; + content: ""; + display: block; + height: 22px; + left: -20px; + position: absolute; + top: 28px; + width: 1px; +} +.mega-menu .mega-menu__first-level { + display: flex; + width: 100%; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__first-level { + flex-direction: column; + } +} +.mega-menu .mega-menu__back-button, .mega-menu .mega-menu__back-button-l2 { + background: url(../../../content/dam/bitdefender/black-arrow.svg) 50% 50%/contain no-repeat; + background-size: 20px; + cursor: pointer; + display: inline-block; + height: 50px; + margin-left: -14px; + padding: 10px; + position: absolute; + top: 7px; + transform: rotate(180deg); + width: 50px; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__back-button, .mega-menu .mega-menu__back-button-l2 { + display: none; + } +} +.mega-menu .mega-menu__second-level { + background: #fff; + display: none; + left: 0; + position: absolute; + width: 100%; + z-index: 1; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__second-level { + background: #fff; + min-height: 100vh; + top: 0; + } +} +.mega-menu .mega-menu__second-level-content { + align-items: center; + display: flex; + justify-content: space-between; + position: static; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__second-level-content { + align-items: flex-start; + flex-direction: column; + } +} +.mega-menu .mega-menu__second-level:after { + background: #f0f0f0; + bottom: -1px; + content: ""; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + width: 100%; + z-index: 2; +} +.mega-menu .mega-menu__list { + align-items: center; + display: flex; + height: 64px; + padding-left: 0; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__list { + align-items: flex-start; + flex-direction: column; + height: 100%; + padding-top: 66px; + width: 100%; + } + .mega-menu .mega-menu__list:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } +} +@media (min-width: 1025px) { + .mega-menu .mega-menu ul.mega-menu__list { + padding-left: 204px; + } +} +.mega-menu .mega-menu__l2-link { + color: #000; + font-size: 0.875rem; + line-height: 1; + padding-right: 18px; + position: relative; +} +.mega-menu .mega-menu__l2-link:after { + background: url(../../../content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat; + background-size: 100%; + content: ""; + height: 10px; + position: absolute; + right: 0; + top: 3px; + transform: rotate(180deg); + width: 10px; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__l2-link { + display: block; + font-size: 1rem; + font-weight: 900; + padding: 13px 0; + width: 100%; + } + .mega-menu .mega-menu__l2-link:after { + height: 16px; + top: 12px; + transform: rotate(90deg); + width: 16px; + } +} +.mega-menu .mega-menu__l2-item { + cursor: pointer; + margin-bottom: 0; + padding-left: 0; + padding-right: 24px; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__l2-item { + padding-bottom: 20px; + padding-top: 20px; + } +} +@media (max-width: 991px) { + .mega-menu .mega-menu__l2-item { + padding-right: 0; + width: 100%; + } + .mega-menu .mega-menu__l2-item:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } +} +@media (min-width: 992px) { + .mega-menu .mega-menu__l2-item:hover .mega-menu__third-level { + display: block; + } + .mega-menu .mega-menu__l2-item:hover .mega-menu__l2-link { + color: #006dff; + } + .mega-menu .mega-menu__l2-item:hover .mega-menu__l2-link:after { + transform: rotate(0deg); + } +} +.mega-menu .mega-menu__l2-item.active .mega-menu__third-level { + display: block; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__item.active .mega-menu__link, .mega-menu .mega-menu__item.mega-menu--item-opened .mega-menu__link { + border-bottom: 4px solid #006dff; + } + .mega-menu .mega-menu__item.active .mega-menu__second-level, .mega-menu .mega-menu__item.mega-menu--item-opened .mega-menu__second-level { + display: block; + } +} +@media (max-width: 991px) { + .mega-menu .mega-menu--item-opened .mega-menu__second-level { + display: block; + } +} +.mega-menu .mega-menu__right-top-link { + margin-bottom: 15px; + margin-top: 15px; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__right-top-link { + display: flex; + flex-grow: 1; + justify-content: flex-end; + margin-right: 20px; + text-align: right; + } +} +.mega-menu .mega-menu__right-top-link-target { + color: #006dff; + font-size: 0.875rem; +} +.mega-menu .mega-menu__right-top-link-target:hover { + text-decoration: underline; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__right-top-link-target { + font-size: 1rem; + } +} +.mega-menu .mega-menu__view-all { + color: #006dff; + font-size: 1rem; + margin-bottom: 10px; +} +.mega-menu .mega-menu__third-level { + background: #fafafa; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); + display: none; + left: 0; + position: absolute; + top: 100%; + width: 100%; + z-index: 2; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__third-level { + background: #fff; + min-height: 100vh; + top: 0; + z-index: 3; + } +} +.mega-menu .mega-menu__third-level-content { + padding-bottom: 46px; + padding-top: 66px; + width: 100%; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__third-level-content { + padding-top: 40px; + } +} +@media (min-width: 1025px) { + .mega-menu .mega-menu__third-level-content { + padding-left: 254px; + } +} +@media (min-width: 1601px) { + .mega-menu .mega-menu__third-level-content { + padding-left: 224px; + } +} +.mega-menu .mega-menu__row { + display: flex; + margin-bottom: 34px; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__row { + flex-direction: column; + margin-bottom: 0; + } + .mega-menu .mega-menu__row:before { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + .mega-menu .mega-menu__row:last-child:before { + content: none; + } +} +@media (min-width: 992px) { + .mega-menu .mega-menu__col { + margin-right: 40px; + } +} +.mega-menu .mega-menu__second-level-right { + background: #fff; + border-radius: 6px; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); + display: none; + min-width: 370px; + padding: 20px; + position: absolute; + right: 0; + text-align: center; + transform: translateY(-4px); + z-index: 3; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__second-level-right { + min-width: none; + top: calc(100% + 8px); + width: 100%; + } +} +.mega-menu .mega-menu__right .navigation__header-link { + color: #3c3c3c; + font-size: 18px; + font-weight: 900; + line-height: 1.5; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__right .navigation__header-link:after { + content: none; + } +} +.mega-menu .mega-menu__right .navigation__header-link:hover { + color: #3c3c3c; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__right .navigation__container:after { + content: none; + } + .mega-menu .mega-menu__right .navigation__links { + display: block; + } +} +.mega-menu .mega-menu__right .navigation__link { + color: #006dff; + font-size: 18px; + font-weight: 500; + line-height: 10px; + position: relative; + text-align: center; + transform: translateZ(0); + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; +} +.mega-menu .mega-menu__right .navigation__link:after { + background: url(../../../content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-5px); + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + width: 15px; + will-change: transform, opacity; +} +@media (max-width: 991px) { + .mega-menu .mega-menu__right .navigation__link { + padding-bottom: 0; + padding-top: 0; + } +} +.mega-menu .mega-menu__right .navigation__item { + background-color: transparent; + border: 2px solid #006dff; + border-radius: 8px; + cursor: pointer; + display: block; + height: -moz-fit-content; + height: fit-content; + margin-right: 0; + margin-top: 10px; + min-width: 140px; + padding: 10px 26px 8px 28px; + position: relative; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); +} +.mega-menu .mega-menu__right .navigation__item:hover { + background-color: #006dff; +} +.mega-menu .mega-menu__right .navigation__item:hover .navigation__link { + color: #fff; + transform: translate3d(-11px, 0, 0); +} +.mega-menu .mega-menu__right .navigation__item:hover .navigation__link:after { + opacity: 1; + transform: translate(22px, -5px); +} +.mega-menu .mega-menu__popup-container.popup-active .mega-menu__right-link { + color: #006dff; +} +.mega-menu .mega-menu--active .mega-menu__left, .mega-menu .mega-menu--active .mega-menu__right, .mega-menu .mega-menu__popup-container.popup-active .mega-menu__second-level-right { + display: block; +} +.mega-menu .mega-menu--active .mega-menu__button-bar:first-child { + transform: rotate(-45deg) translate(-5px, 5px); +} +.mega-menu .mega-menu--active .mega-menu__button-bar:nth-child(2) { + opacity: 0; +} +.mega-menu .mega-menu--active .mega-menu__button-bar:nth-child(3) { + transform: rotate(45deg) translate(-6px, -6px); +} +.mega-menu .mega-menu__quick-links-mobile .navigation__link { + color: #006dff; +} +.mega-menu .mega-menu__quick-links-mobile .navigation__item:first-child .navigation__link { + border: 2px solid #006dff; + border-radius: 6px; + display: block; + line-height: 1; + margin-bottom: 1pc; + margin-top: 23px; + padding: 14px; + text-align: center; +} +.mega-menu .mega-menu__quick-links-mobile .navigation__item:nth-child(2) .navigation__link { + background: #006dff; + border-radius: 6px; + color: #fff; + display: block; + line-height: 1; + margin-bottom: 15px; + padding: 14px; + text-align: center; +} +.mega-menu .mega-menu__quick-links-mobile .navigation__item:nth-child(2) .navigation__link:hover { + color: #fff; +} +.mega-menu .mega-menu__quick-links-mobile .mega-menu__category-links { + display: block; +} +@media (min-width: 992px) { + .mega-menu .mega-menu__quick-links-mobile { + display: none; + } +} +.mega-menu .mega-menu__login-container .mega-menu__login.mega-menu__right-link { + --tw-bg-opacity: 1; + --tw-text-opacity: 1; + align-items: center; + background-color: rgb(0 109 255/var(--tw-bg-opacity)); + border-radius: 9999px; + color: rgb(255 255 255/var(--tw-text-opacity)); + display: flex; + font-weight: 700; + height: 43px; + justify-content: center; + margin-bottom: 0.25rem; + margin-top: 0.25rem; + text-align: center; + width: 43px; +} +.mega-menu .mega-menu__login-container .mega-menu__login.mega-menu__right-link:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255/var(--tw-text-opacity)); +} +@media (min-width: 992px) { + .mega-menu .mega-menu__login-container .mega-menu__login.mega-menu__right-link { + display: block; + height: 45px; + margin-bottom: 0.25rem; + margin-top: 1rem; + width: 45px; + } +} +.mega-menu .mega-menu__login-container.popup-active .mega-menu__login.mega-menu__right-link { + --tw-text-opacity: 1; + color: rgb(255 255 255/var(--tw-text-opacity)); +} +@media (min-width: 992px) { + .mega-menu .mega-menu--no-active.mega-menu__container { + padding-bottom: 0; + } + .mega-menu .mega-menu--no-active .mega-menu__link:hover { + border-bottom: 4px solid #006dff; + } + .mega-menu .mega-menu--no-active .mega-menu__link:hover + .mega-menu__second-level, .mega-menu .mega-menu--no-active .mega-menu__second-level:hover { + display: block; + } + .mega-menu .mega-menu--no-active .mega-menu__second-level:hover ~ .mega-menu__link { + border-bottom: 4px solid #006dff; + } + .mega-menu .mega-menu--right { + display: flex; + flex-grow: 1; + justify-content: flex-end; + } + .mega-menu .mega-menu--right .mega-menu__second-level { + top: 64px; + } + .mega-menu .mega-menu--right .mega-menu__link { + position: relative; + } + .mega-menu .mega-menu--right .mega-menu__link:before { + background: #f0f0f0; + content: ""; + display: block; + height: 22px; + left: -20px; + position: absolute; + top: 12px; + width: 1px; + } +} +.mega-menu .mega-menu__no-l3 .mega-menu__l2-link { + padding-right: 0; +} +.mega-menu .mega-menu__no-l3 .mega-menu__l2-link:after { + content: none; +} +@media (min-width: 992px) { + .mega-menu .navigation ~ .navigation { + margin-top: 20px; + } +} +.mega-menu .navigation__header-link, .mega-menu .navigation__link { + color: #000; +} +.mega-menu .navigation__header-link:hover, .mega-menu .navigation__link:hover { + color: #006dff; +} +.mega-menu .navigation__header-link { + display: block; + font-size: 1rem; + font-weight: 900; +} +@media (max-width: 991px) { + .mega-menu .navigation__header-link:after { + background: url(../../../content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat; + background-size: 100%; + content: ""; + height: 16px; + position: absolute; + right: 5px; + top: 12px; + transform: rotate(180deg); + width: 16px; + } +} +@media (min-width: 992px) { + .mega-menu .navigation__header-link { + font-size: 0.75rem; + margin-bottom: 12px; + } + .mega-menu .navigation a.navigation__header-link:after { + background: url(../../../content/dam/bitdefender/black-arrow.svg) 50% 50%/contain no-repeat; + background-size: contain; + content: ""; + display: inline-block; + height: 10px; + margin-left: 4px; + width: 9px; + } + .mega-menu .navigation a.navigation__header-link:hover:after { + background: url(../../../content/dam/bitdefender/blue-arrow.svg) 50% 50%/contain no-repeat; + } +} +@media (max-width: 991px) { + .mega-menu .navigation__heading + .navigation__links .navigation__item:nth-child(n+4) { + display: none; + } +} +.mega-menu .navigation__link { + display: inline-block; + font-size: 1rem; + padding-bottom: 12px; + padding-top: 12px; + white-space: nowrap; +} +@media (min-width: 992px) { + .mega-menu .navigation__link { + font-size: 0.75rem; + line-height: 1; + margin-right: 5px; + margin-top: 4px; + padding-bottom: 0; + padding-top: 0; + } +} +.mega-menu .navigation__anchor { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} +.mega-menu .navigation__anchor + li.navigation__link { + font-family: Arial, sans-serif; + pointer-events: none; +} +@media (max-width: 991px) { + .mega-menu .navigation__anchor + li.navigation__link { + line-height: 18px; + white-space: normal; + } +} +.mega-menu .navigation__view-all { + display: none; +} +.mega-menu .navigation__heading + .navigation__links .navigation__view-all { + color: #006dff; + cursor: pointer; + display: block; + font-size: 1rem; + margin-bottom: 10px; +} +@media (min-width: 992px) { + .mega-menu .navigation__heading + .navigation__links .navigation__view-all { + display: none; + } +} +.mega-menu .navigation__tag { + background-color: #006dff; + border-radius: 50px; + color: #fff; + display: inline-block; + font-size: 14px; + font-style: normal; + font-weight: 600; + margin-left: 4px; + margin-top: 4px; + padding: 1px 8px; + white-space: nowrap; +} +@media (min-width: 992px) { + .mega-menu .navigation__tag { + font-size: 8px; + margin-left: -3px; + margin-top: 0; + padding: 0 4px; + vertical-align: middle; + } +} +@media (max-width: 991px) { + .mega-menu .navigation__heading { + display: block; + line-height: 1; + margin-bottom: 0; + padding-bottom: 12px; + padding-top: 12px; + position: relative; + } + .mega-menu .navigation__heading + .navigation__links { + display: none; + } + .mega-menu .navigation__container:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100%; + } + .mega-menu .navigation__container.active .navigation__links { + display: block; + } + .mega-menu .navigation__container.active .navigation__header-link:after { + transform: rotate(0deg); + } + .mega-menu .navigation__quick-links { + display: none; + } + .mega-menu .navigation__heading + .navigation__links.navigation--view-all .navigation__item:nth-child(n+4) { + display: block; + } +} +.mega-menu .navigation__heading + .navigation__links.navigation--view-all .navigation__view-all { + display: none; +} +.mega-menu .xfpage-styled .xf-content-height { + margin: 0; +} diff --git a/_src/scripts/vendor/mega-menu/mega-menu.js b/_src/scripts/vendor/mega-menu/mega-menu.js new file mode 100644 index 000000000..40675b4e7 --- /dev/null +++ b/_src/scripts/vendor/mega-menu/mega-menu.js @@ -0,0 +1,380 @@ +/** Throttle */ +const throttle = (cb, delay = 250) => { + let shouldWait = false; + + return (...args) => { + if (shouldWait) { + return; + } + shouldWait = true; + setTimeout(() => { + cb(...args); + shouldWait = false; + }, delay); + }; +}; + +const isHoverableDevice = window.matchMedia( + '(hover: hover) and (pointer: fine)' +).matches; + +const Config = { + selectors: { + container: '.mega-menu__container', + viewAllButtons: '.navigation__view-all', + popupContainer: '.mega-menu__popup-container', + popupLink: '.mega-menu__popup-container .mega-menu__right-link', + popupActive: '.popup-active', + menuLink: '.mega-menu__l2-link', + menuItem: '.mega-menu__l2-item', + mobileBack: '.mega-menu__back-button', + mobileBackL2: '.mega-menu__back-button-l2', + mobileTrigger: '.mega-menu__button', + l2active: '.mega-menu__l2-item.active', + l2item: '.mega-menu__l2-item', + viewAll: '.navigation--view-all', + navLinks: '.navigation__links', + menuItemFirst: '.mega-menu__item', + navHeaderLink: '.navigation__header-link', + navContainer: '.navigation__container', + itemOpened: '.mega-menu--item-opened', + quickLinks: '.navigation__quick-links .navigation__list', + qucikLinksMobileContainer: '.mega-menu__quick-links-mobile', + thirdLevelContent: '.mega-menu__third-level-content', + categoryLinks: '.mega-menu__category-links', + navigationHeader: '.navigation__heading', + menuLinkRoot: '.mega-menu__link', + navigation: '.navigation', + menuLinkText: '.mega-menu__l2-link-text', + firstLevel: '.mega-menu__first-level', + navigationItems: '.navigation__list .navigation__item' + }, + classes: { + popupActive: 'popup-active', + menuOpened: 'mega-menu--active', + viewAll: 'navigation--view-all', + itemOpened: 'mega-menu--item-opened', + navigationHeader: 'navigation__heading', + navHeaderLink: 'navigation__header-link', + navHeaderText: 'navigation__header-text', + menuItemFirst: 'mega-menu__item', + menuLinkText: 'mega-menu__l2-link-text', + navigation: 'navigation', + megamenuNoL3: 'mega-menu__no-l3' + } +} + +const isMobile = () => {return window.innerWidth < 991}; + +function initMegaMenu (container) { + let prevWidth = window.innerWidth; + + const setMobileRightLinksOffset = () => { + const firstLevelEl = container.querySelector(Config.selectors.firstLevel); + const firstLevelHeight = firstLevelEl.getBoundingClientRect().height + 1; // add 1px border bottom + + container.style.setProperty('--right-links-offset', `${firstLevelHeight}px` ); + } + + const closeViewAllLinks = () => { + const viewAllLinks = container.querySelectorAll(Config.selectors.viewAll); + + Array.from(viewAllLinks).forEach((el) => { + el.classList.remove(Config.classes.viewAll); + }); + } + + const closeOpenedItems = () => { + const activeElement = container.querySelector(Config.selectors.l2active); + + if (activeElement) { + activeElement.classList.remove('active'); + return activeElement; + } + } + + const closePopUps = (currentTarget) => { + container.querySelectorAll(Config.selectors.popupContainer) + .forEach(popUpMenu => { + if (popUpMenu !== currentTarget) { + popUpMenu.classList.remove('popup-active') + } + }); + } + + const toggleMobileMenu = () => { + if (!container.classList.contains(Config.classes.menuOpened)) { + window.addEventListener('resize', this.windowResizeEvent = throttle(() => { + const curentWidth = window.innerWidth; + if (curentWidth !== prevWidth) { + container.classList.remove(Config.classes.menuOpened); + closeOpenedItems(); + closeViewAllLinks(); + window.removeEventListener('resize', this.windowResizeEvent); + prevWidth = curentWidth; + } + })) + } else { + window.removeEventListener('resize', this.windowResizeEvent); + } + + container.classList.toggle(Config.classes.menuOpened); + closeOpenedItems(); + closeViewAllLinks(); + } + + + const viewAllHandler = (viewAllButtons) => { + Array.from(viewAllButtons).forEach((el) => { + el.addEventListener('click', (event) => { + const target = event.target; + const subMenuTarget = target.closest(Config.selectors.navLinks); + subMenuTarget.classList.add(Config.classes.viewAll); + }); + }); + } + + const addQuickLinksToMobile = () => { + const thirdLevelContainers = container.querySelectorAll(Config.selectors.thirdLevelContent); + + Array.from(thirdLevelContainers).forEach((el) => { + const quickLinksMobileContainer = el.querySelector(Config.selectors.qucikLinksMobileContainer); + // get quick links + const quickLinks = el.querySelector(Config.selectors.quickLinks); + // get category link + const categoryLinks = el.querySelector(Config.selectors.categoryLinks); + + if (quickLinks) { + quickLinksMobileContainer.appendChild(quickLinks.cloneNode(true)); + } + + if (categoryLinks) { + quickLinksMobileContainer.appendChild(categoryLinks.cloneNode(true)); + } + }); + } + + const getMenuItem = (el) => { + const target = el.closest(Config.selectors.menuItem); + if (target) { + return target; + } else { + return el; + } + } + + const closeMenu = (el) => { + el.classList.remove('active'); + this.isClosed = true; + } + + const openMenu = (el) => { + el.classList.add('active'); + this.isClosed = false; + } + + this.isClosed = true; + + const addEvents = () => { + // Menu Trigger Mobile Bind + const hambugerButton = container.querySelector(Config.selectors.mobileTrigger); + hambugerButton.addEventListener('click', ()=>{ toggleMobileMenu() }) + + // L2 Navigation Bind + const menuElements = container.querySelectorAll(Config.selectors.menuLink); + + Array.from(menuElements).forEach((el) => { + el.addEventListener('click', (event) => { + if(isHoverableDevice && window.innerWidth > 991) { + return; + } + + event.stopPropagation(); + const targetEl = event.target; + + if (!targetEl.classList.contains(Config.classes.menuLinkText)) { + event.preventDefault(); + const targetMenu = getMenuItem(targetEl); + + closePopUps(); + if (this.isClosed || closeOpenedItems() !== targetMenu) { + openMenu(targetMenu); + } else { + closeMenu(targetMenu); + } + } + }); + }); + + // Mobile Back Bind + const mobileBackButtonSecondLevel = container.querySelectorAll(Config.selectors.mobileBackL2); + + if (mobileBackButtonSecondLevel) { + Array.from(mobileBackButtonSecondLevel).forEach((el) => { + el.addEventListener('click', (event) => { + const targetMenu = getMenuItem(event.target); + + closeMenu(targetMenu); + }); + }); + } + + + // Mobile Back to First Level Bind + const mobileBackButtonFirstLevel = container.querySelectorAll(Config.selectors.mobileBack); + + Array.from(mobileBackButtonFirstLevel).forEach((el) => { + el.addEventListener('click', (event) => { + const backButton = event.target; + const menu = backButton.closest(Config.selectors.menuItemFirst); + menu.classList.remove(Config.classes.itemOpened); + event.stopPropagation(); + const noProperty = !container.style.getPropertyValue('--right-links-offset'); + if (noProperty) { + setMobileRightLinksOffset(); + } + }); + }); + + + // Root top Navigation on Mobile + const activeTopLink = container.querySelector(Config.selectors.itemOpened); + + if (activeTopLink) { + activeTopLink.addEventListener('click', (event) => { + const targetEl = event.target; + const menuLink = activeTopLink.querySelector(Config.selectors.menuLinkRoot); + + if(isMobile() && (menuLink === targetEl || menuLink.contains(targetEl))) { + event.preventDefault(); + closePopUps(); + } + const topItem = activeTopLink.closest(Config.selectors.menuItemFirst); + topItem.classList.add(Config.classes.itemOpened); + }); + } else { + const menuItemsFirstLevel = container.querySelectorAll(Config.selectors.menuItemFirst); + + Array.from(menuItemsFirstLevel).forEach((el) => { + el.addEventListener('click', (event) => { + const target = event.target; + let menuItem = null; + + if (target.classList.contains(Config.classes.menuItemFirst)) { + menuItem = target; + } else { + menuItem = target.closest(Config.selectors.menuItemFirst) + } + + const menuLink = menuItem.querySelector(Config.selectors.menuLinkRoot); + + + if (isMobile() && (menuLink === target || menuLink.contains(target))) { + event.preventDefault(); + menuItem.classList.add(Config.classes.itemOpened); + } + }); + }); + } + + // Accordion Mobile + + const acordeonLinks = container.querySelectorAll(Config.selectors.navHeaderLink); + + Array.from(acordeonLinks).forEach((el) => { + el.addEventListener('click', (event) => { + const target = event.target; + if (!target.classList.contains(Config.selectors.navHeaderText) && isMobile()) { + event.preventDefault(); + const targetAcordion = target.closest(Config.selectors.navContainer); + targetAcordion.classList.toggle('active'); + } + }); + }); + + //viewAllButtons Mobile + const viewAllButtons = container.querySelectorAll(Config.selectors.viewAllButtons); + viewAllHandler(viewAllButtons); + + // popup Menu right + const popupMenus = container.querySelectorAll(Config.selectors.popupLink); + + Array.from(popupMenus).forEach((el) => { + el.addEventListener('click', (event) => { + event.stopPropagation(); + const target = event.target; + const popupContainer = target.closest(Config.selectors.popupContainer); + closePopUps(popupContainer); + popupContainer.classList.toggle(Config.classes.popupActive); + // toggleWindowEvent(); + }); + }); + + document.addEventListener('click', window.toggleGlobal = () => { + if(isMobile()) { + return; + } + closePopUps(); + closeOpenedItems(); + }); + } + + const addAnalytics = () => { + + // Set correct 'id' attribute structure at Navigation subcomponents + const navigationComponents = megamenuEl.querySelectorAll(".navigation__links") + + Array.from(navigationComponents).forEach((el) => { + const headingId = el.getAttribute("id"); + const parentNavigationContainer = el.closest(".navigation"); + const parentId = el.closest(".mega-menu__third-level")?.getAttribute("id") || + el.closest(".mega-menu__second-level-right").getAttribute("id"); + + if (headingId && parentId && parentNavigationContainer) { + parentNavigationContainer.setAttribute("id", parentId); + el.setAttribute("id", parentId + "|" + headingId); + } + }); + + } + + const adjustPopupStructure = () => { + // Modifies the structure for links inside a Popup Container > the
  • and tags are siblings + const topRightPopupElements = document.querySelectorAll( + Config.selectors.popupContainer + ); + + topRightPopupElements.forEach((rightElement) => { + const navigationItems = rightElement.querySelectorAll( + Config.selectors.navigationItems + ); + navigationItems.forEach(function (item, index) { + const newDiv = document.createElement("div"); + newDiv.className = "navigation__item"; + + const anchor = item.querySelector(".navigation__link"); + anchor.className = "navigation__anchor"; + newDiv.appendChild(anchor); + + const liElement = document.createElement("li"); + liElement.className = "navigation__link link-" + index; + liElement.innerHTML = anchor.innerHTML; + anchor.innerHTML = ""; + newDiv.appendChild(liElement); + + item.parentNode.replaceChild(newDiv, item); + }); + }); + }; + + adjustPopupStructure(); + addEvents(); + addAnalytics(); + addQuickLinksToMobile(); +} + +const megamenuEl = document.querySelector('.mega-menu__container'); + +if (megamenuEl) { + new initMegaMenu(megamenuEl); +} diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 6af02a9b6..afae1783f 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -323,7 +323,7 @@ body.no-scroll { overflow: hidden; } -header { +header.header-wrapper { height: var(--nav-height); } @@ -568,7 +568,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } @media screen and (min-width: 992px) { /* desktop */ - header { + header.header-wrapper { height: var(--nav-height-desktop); position: absolute; z-index: 999; @@ -637,7 +637,7 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b } @media (min-width: 1000px) { - header { + header.header-wrapper { height: var(--nav-height-desktop); } } From 49736b771f1a07016cc46f5704987e8e163ea1a7 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 27 Feb 2024 14:20:06 +0200 Subject: [PATCH 0139/1296] marquee padding top 0 fix --- _src/blocks/marquee/marquee.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index af5e6768d..003253979 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -1,3 +1,7 @@ +.marquee-container.section { + padding-top: 0; +} + .marquee-container .marquee.block { height: 150px; display: flex; From 0bf9a36e2283194c329806fae0c1360fa79445ca Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 15:53:53 +0200 Subject: [PATCH 0140/1296] Update particle background block to support mobile view --- .../particle-background.js | 71 ++++++++++++++----- 1 file changed, 54 insertions(+), 17 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 8a57128d3..bef24a9c0 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -1,27 +1,35 @@ /* eslint-disable prefer-const */ /* eslint-disable camelcase */ -// import '../../../node_modules/particles.js/particles'; -// import { tsParticles } from "../../../node_modules/@tsparticles/engine/tsparticles.engine.js"; -import { tsParticles } from 'https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm'; -import { loadAll } from 'https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm'; +import { isView } from '../../scripts/scripts.js'; +import { debounce } from '../../scripts/utils/utils.js'; -async function loadParticles(options) { - await loadAll(tsParticles); +let tsParticles; +let loadAll; +async function init(block) { + if (isView('mobile')) { + return; + } - await tsParticles.load({ id: 'tsparticles', options }); -} + tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; + loadAll = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm')).loadAll; -export default async function decorate(block) { - console.log('Particle background block'); + const particleIdSelector = 'particles-js'; + + const particleDiv = document.createElement('div'); + particleDiv.setAttribute('id', particleIdSelector); + + block.prepend(particleDiv); - const canvas = document.createElement('div'); - canvas.setAttribute('id', 'tsparticles'); - block.append(canvas); + async function loadParticles(options) { + await loadAll(tsParticles); + + await tsParticles.load({ id: particleIdSelector, options }); + } const configs = { particles: { number: { - value: 100, + value: 130, }, color: { value: '#ffffff', @@ -34,12 +42,12 @@ export default async function decorate(block) { type: 'circle', }, opacity: { - value: 1, + value: 0.6, }, size: { value: { - min: 4, - max: 6, + min: 2, + max: 4, }, }, move: { @@ -57,3 +65,32 @@ export default async function decorate(block) { loadParticles(configs); } + +async function checkForMobile() { + const isMobileView = isView('mobile'); + if (isMobileView && (!tsParticles && !loadAll)) { + return; + } + + if (isMobileView && tsParticles) { + const particles = tsParticles.domItem(0); + particles.pause(); + return; + } + + if (!isMobileView && (!tsParticles && !loadAll)) { + await init(); + return; + } + + const particles = tsParticles.domItem(0); + particles.play(); +} + +export default async function decorate(block) { + console.log('Particle background block'); + + await init(block); + + window.addEventListener('resize', debounce(checkForMobile, 250)); +} From d1617352848770f0708b6ce16935cc4af9185ac3 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 15:56:49 +0200 Subject: [PATCH 0141/1296] Refactor debounce function in particle-background.js --- .../particle-background/particle-background.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index bef24a9c0..31e936d55 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -1,7 +1,18 @@ /* eslint-disable prefer-const */ /* eslint-disable camelcase */ import { isView } from '../../scripts/scripts.js'; -import { debounce } from '../../scripts/utils/utils.js'; + +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} let tsParticles; let loadAll; From ca39e6974e043008cdec436a39f1cf3ec2282cf9 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 16:18:49 +0200 Subject: [PATCH 0142/1296] ceapa --- _src/blocks/particle-background/particle-background.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 31e936d55..ae18bc5f8 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -1,6 +1,5 @@ /* eslint-disable prefer-const */ /* eslint-disable camelcase */ -import { isView } from '../../scripts/scripts.js'; function debounce(func, wait) { let timeout; @@ -14,8 +13,14 @@ function debounce(func, wait) { }; } +function isView(viewport) { + const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; + return !!(element && getComputedStyle(element).display !== 'none'); +} + let tsParticles; let loadAll; + async function init(block) { if (isView('mobile')) { return; @@ -72,6 +77,7 @@ async function init(block) { poisson: { enable: true, }, + fullScreen: { enable: false }, }; loadParticles(configs); From a706b2ba7c5c098d631329b5a9786c463ceb9196 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 16:36:39 +0200 Subject: [PATCH 0143/1296] Add Dunga block CSS and JS files --- _src/blocks/dunga/dunga.css | 17 +++++++++++++++++ _src/blocks/dunga/dunga.js | 3 +++ 2 files changed, 20 insertions(+) create mode 100644 _src/blocks/dunga/dunga.css create mode 100644 _src/blocks/dunga/dunga.js diff --git a/_src/blocks/dunga/dunga.css b/_src/blocks/dunga/dunga.css new file mode 100644 index 000000000..d05f8ec07 --- /dev/null +++ b/_src/blocks/dunga/dunga.css @@ -0,0 +1,17 @@ +.dunga { + text-align: center; + background-color: #006DFF; + color: white; + display: flex; + align-items: center; + + a { + color: white; + } +} + +@media screen and (min-width: 991px) { + .dunga { + height: 44px; + } +} \ No newline at end of file diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js new file mode 100644 index 000000000..cba26f536 --- /dev/null +++ b/_src/blocks/dunga/dunga.js @@ -0,0 +1,3 @@ +export default function decorate(block) { + +} \ No newline at end of file From 9930bbbcf48b858775f11661336dd31436081cbf Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 16:59:21 +0200 Subject: [PATCH 0144/1296] Update background color and add padding in dunga block --- _src/blocks/dunga/dunga.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/dunga/dunga.css b/_src/blocks/dunga/dunga.css index d05f8ec07..0597d59e9 100644 --- a/_src/blocks/dunga/dunga.css +++ b/_src/blocks/dunga/dunga.css @@ -1,8 +1,10 @@ .dunga { text-align: center; - background-color: #006DFF; + background-color: #006EFF; color: white; display: flex; + line-height: 1.2; + padding: 8px 0; align-items: center; a { From 8aac57cac3b3b8d544e65cc5428578bbd66ec78c Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 16:59:57 +0200 Subject: [PATCH 0145/1296] Add justify-content property to .dunga --- _src/blocks/dunga/dunga.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/dunga/dunga.css b/_src/blocks/dunga/dunga.css index 0597d59e9..6b5ce9ad7 100644 --- a/_src/blocks/dunga/dunga.css +++ b/_src/blocks/dunga/dunga.css @@ -1,5 +1,6 @@ .dunga { text-align: center; + justify-content: center; background-color: #006EFF; color: white; display: flex; From b801af5a703629ae331738b37180c5bc8cff3101 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:08:44 +0200 Subject: [PATCH 0146/1296] Add transition effect to anchor tags and update styling in Dunga block --- _src/blocks/dunga/dunga.css | 3 +++ _src/blocks/dunga/dunga.js | 10 ++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/_src/blocks/dunga/dunga.css b/_src/blocks/dunga/dunga.css index 6b5ce9ad7..72088c647 100644 --- a/_src/blocks/dunga/dunga.css +++ b/_src/blocks/dunga/dunga.css @@ -10,7 +10,10 @@ a { color: white; + transition: all 1s ease; } + + transition: all 1s ease; } @media screen and (min-width: 991px) { diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index cba26f536..801d9920b 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -1,3 +1,9 @@ export default function decorate(block) { - -} \ No newline at end of file + setTimeout(() => { + const element = document.querySelector('.dunga'); + const elementLink = document.querySelector('.dunga a'); + element.style.backgroundColor = '#E4F2FF'; + element.style.color = '#006EFF'; + elementLink.style.color = '#006EFF'; + }, 1000); +} From 2173808b63ca6090c9d61741fc5e0e870133a381 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:17:15 +0200 Subject: [PATCH 0147/1296] Add underline to links in dunga.css --- _src/blocks/dunga/dunga.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/dunga/dunga.css b/_src/blocks/dunga/dunga.css index 72088c647..8d95011e5 100644 --- a/_src/blocks/dunga/dunga.css +++ b/_src/blocks/dunga/dunga.css @@ -11,6 +11,7 @@ a { color: white; transition: all 1s ease; + text-decoration: underline; } transition: all 1s ease; From b544eb27309b95a3385513a5ed18deeca6742a36 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:22:17 +0200 Subject: [PATCH 0148/1296] Add shadow DOM loaded event dispatch --- _src/blocks/dunga/dunga.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 801d9920b..ab7f246ab 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -1,4 +1,9 @@ export default function decorate(block) { + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, + }); + setTimeout(() => { const element = document.querySelector('.dunga'); const elementLink = document.querySelector('.dunga a'); From df2924d0559a6e74850a3a55de3938842f5b045c Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:22:58 +0200 Subject: [PATCH 0149/1296] Increase timeout for background color change in dunga.js --- _src/blocks/dunga/dunga.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index ab7f246ab..310bf3130 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -10,5 +10,5 @@ export default function decorate(block) { element.style.backgroundColor = '#E4F2FF'; element.style.color = '#006EFF'; elementLink.style.color = '#006EFF'; - }, 1000); + }, 3000); } From cc78f6add0a2141b9ab04db9a5eb37e733cf1fae Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:25:36 +0200 Subject: [PATCH 0150/1296] Refactor querySelector in dunga.js --- _src/blocks/dunga/dunga.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 310bf3130..6bfe66bd6 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -5,8 +5,8 @@ export default function decorate(block) { }); setTimeout(() => { - const element = document.querySelector('.dunga'); - const elementLink = document.querySelector('.dunga a'); + const element = block.querySelector('.dunga'); + const elementLink = block.querySelector('.dunga a'); element.style.backgroundColor = '#E4F2FF'; element.style.color = '#006EFF'; elementLink.style.color = '#006EFF'; From 0a90971d488b91595e12a0a3ac5b9b8c9bf33573 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:26:30 +0200 Subject: [PATCH 0151/1296] Update timeout duration in dunga.js --- _src/blocks/dunga/dunga.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 6bfe66bd6..48aeb3b79 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -10,5 +10,5 @@ export default function decorate(block) { element.style.backgroundColor = '#E4F2FF'; element.style.color = '#006EFF'; elementLink.style.color = '#006EFF'; - }, 3000); + }, 1500); } From 438309fea53c6c74c61a3f42d69a9a387625c1dd Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:27:37 +0200 Subject: [PATCH 0152/1296] Increase timeout for background color change in dunga.js --- _src/blocks/dunga/dunga.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 48aeb3b79..2532d0265 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -10,5 +10,5 @@ export default function decorate(block) { element.style.backgroundColor = '#E4F2FF'; element.style.color = '#006EFF'; elementLink.style.color = '#006EFF'; - }, 1500); + }, 2000); } From 3d787d6823d2b5904d04f0c3739d796dfab8df35 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:30:10 +0200 Subject: [PATCH 0153/1296] Update shadowDomLoaded event dispatch timeout in dunga.js --- _src/blocks/dunga/dunga.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 2532d0265..b5fb37bb1 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -1,8 +1,10 @@ export default function decorate(block) { - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, - }); + setTimeout(() => { + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, + }); + }, 500); setTimeout(() => { const element = block.querySelector('.dunga'); From 221a3cc205c621967a545c6f589076ba07a3cd99 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:31:24 +0200 Subject: [PATCH 0154/1296] Increase delay in setTimeout function --- _src/blocks/dunga/dunga.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index b5fb37bb1..2541e9118 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -4,7 +4,7 @@ export default function decorate(block) { bubbles: true, composed: true, }); - }, 500); + }, 1000); setTimeout(() => { const element = block.querySelector('.dunga'); From 0c01eac1eececceec085ffbd87f3661276c7545d Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:31:55 +0200 Subject: [PATCH 0155/1296] Refactor dunga.js to improve performance and fix event dispatching --- _src/blocks/dunga/dunga.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 2541e9118..7f7c6b690 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -1,11 +1,4 @@ export default function decorate(block) { - setTimeout(() => { - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, - }); - }, 1000); - setTimeout(() => { const element = block.querySelector('.dunga'); const elementLink = block.querySelector('.dunga a'); @@ -13,4 +6,11 @@ export default function decorate(block) { element.style.color = '#006EFF'; elementLink.style.color = '#006EFF'; }, 2000); + + setTimeout(() => { + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, + }); + }, 1000); } From f0b3790f6e2e9aff835233e31a91a762634c6163 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:33:17 +0200 Subject: [PATCH 0156/1296] Refactor shadowDomLoaded event dispatch in dunga.js --- _src/blocks/dunga/dunga.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 7f7c6b690..7d5e88be4 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -7,10 +7,8 @@ export default function decorate(block) { elementLink.style.color = '#006EFF'; }, 2000); - setTimeout(() => { - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, - }); - }, 1000); + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, + }); } From 6d4dab752695621729a695b24bcebf9453440820 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 27 Feb 2024 17:33:49 +0200 Subject: [PATCH 0157/1296] Update shadowDomLoaded event dispatch timeout --- _src/blocks/dunga/dunga.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/dunga/dunga.js index 7d5e88be4..957ccbd65 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/dunga/dunga.js @@ -7,8 +7,10 @@ export default function decorate(block) { elementLink.style.color = '#006EFF'; }, 2000); - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, - }); + setTimeout(() => { + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, + }); + }, 700); } From 6702d852d090fc608cb9abe532128e62a4f2f2aa Mon Sep 17 00:00:00 2001 From: miordache Date: Wed, 28 Feb 2024 11:52:15 +0200 Subject: [PATCH 0158/1296] rename component to news-bar --- _src/blocks/{dunga/dunga.css => news-bar/news-bar.css} | 4 ++-- _src/blocks/{dunga/dunga.js => news-bar/news-bar.js} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename _src/blocks/{dunga/dunga.css => news-bar/news-bar.css} (93%) rename _src/blocks/{dunga/dunga.js => news-bar/news-bar.js} (75%) diff --git a/_src/blocks/dunga/dunga.css b/_src/blocks/news-bar/news-bar.css similarity index 93% rename from _src/blocks/dunga/dunga.css rename to _src/blocks/news-bar/news-bar.css index 8d95011e5..263f7641b 100644 --- a/_src/blocks/dunga/dunga.css +++ b/_src/blocks/news-bar/news-bar.css @@ -1,4 +1,4 @@ -.dunga { +.news-bar { text-align: center; justify-content: center; background-color: #006EFF; @@ -18,7 +18,7 @@ } @media screen and (min-width: 991px) { - .dunga { + .news-bar { height: 44px; } } \ No newline at end of file diff --git a/_src/blocks/dunga/dunga.js b/_src/blocks/news-bar/news-bar.js similarity index 75% rename from _src/blocks/dunga/dunga.js rename to _src/blocks/news-bar/news-bar.js index 957ccbd65..200ae52dc 100644 --- a/_src/blocks/dunga/dunga.js +++ b/_src/blocks/news-bar/news-bar.js @@ -1,7 +1,7 @@ export default function decorate(block) { setTimeout(() => { - const element = block.querySelector('.dunga'); - const elementLink = block.querySelector('.dunga a'); + const element = block.querySelector('.news-bar'); + const elementLink = block.querySelector('.news-bar a'); element.style.backgroundColor = '#E4F2FF'; element.style.color = '#006EFF'; elementLink.style.color = '#006EFF'; From 1fe67e965eb13919f21d3536454eb9193d66c7d8 Mon Sep 17 00:00:00 2001 From: miordache Date: Wed, 28 Feb 2024 14:02:10 +0200 Subject: [PATCH 0159/1296] Fix linter errors --- .eslintignore | 3 +- .../box-image-round-card.js | 6 +-- _src/blocks/hero-aem/hero-aem.js | 51 ++++++++++--------- _src/blocks/hero/hero.js | 2 +- .../product-comparison-table.js | 2 - _src/blocks/products/products.js | 2 +- _src/scripts/breadcrumbs.js | 8 +-- _src/scripts/lib-franklin.js | 6 +-- _src/scripts/scripts.js | 11 ++-- _src/scripts/utils/utils.js | 7 +-- 10 files changed, 50 insertions(+), 48 deletions(-) diff --git a/.eslintignore b/.eslintignore index 644bc2e31..d09d930b1 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ -helix-importer-ui \ No newline at end of file +helix-importer-ui +_src/scripts/lib-franklin-api.js \ No newline at end of file diff --git a/_src/blocks/box-image-round-card/box-image-round-card.js b/_src/blocks/box-image-round-card/box-image-round-card.js index 7071de284..19b12d4d0 100644 --- a/_src/blocks/box-image-round-card/box-image-round-card.js +++ b/_src/blocks/box-image-round-card/box-image-round-card.js @@ -1,6 +1,6 @@ -import * as ceva from '../round-card/round-card.js'; -import {createOptimizedPicture} from '../../scripts/lib-franklin.js'; -import {getDatasetFromSection} from '../../scripts/utils/utils.js'; +import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; +import { getDatasetFromSection } from '../../scripts/utils/utils.js'; + export default function decorate(block) { const innerWrapper = block.children[0]; innerWrapper.classList = 'inner-wrapper'; diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index c2a48e0a7..73f203eb9 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -2,27 +2,29 @@ /* eslint-disable no-undef */ /* eslint-disable max-len */ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink) { - const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, "consumer")]); + const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, 'consumer')]); const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); const price = storeOption.getPrice(); const discountedPrice = storeOption.getDiscountedPrice(); - const discount = storeOption.getDiscount("valueWithCurrency"); + const discount = storeOption.getDiscount('valueWithCurrency'); const buyLink = await storeOption.getStoreUrl(); window.adobeDataLayer.push({ - event: "product loaded", - product: [{info : { - ID: storeOption.getAvangateId(), - name: storeOption.getName(), - devices: storeOption.getDevices(), - subscription: storeOption.getSubscription("months"), - version: storeOption.getSubscription("months") === 1 ? "monthly" : "yearly", - basePrice: storeOption.getPrice("value"), - discountValue: storeOption.getDiscount("value"), - discountRate: storeOption.getDiscount("percentage"), - currency: storeOption.getCurrency(), - priceWithTax: storeOption.getDiscountedPrice("value") || storeOption.getPrice("value"), - }}] - }) + event: 'product loaded', + product: [{ + info: { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription('months'), + version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', + basePrice: storeOption.getPrice('value'), + discountValue: storeOption.getDiscount('value'), + discountRate: storeOption.getDiscount('percentage'), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), + }, + }], + }); const priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices'); priceElement.innerHTML = ` @@ -74,8 +76,8 @@ export default function decorate(block, options) { // Configuration for new elements richText.classList.add('hero-aem__card__desktop', 'col-md-6'); mainDesktopImage.classList.add('col-md-6'); - mainDesktopImage.children[0].classList.add("h-100"); - + mainDesktopImage.children[0].classList.add('h-100'); + const mobileImage = block.querySelector('.hero-aem__card__desktop div > p > picture'); mobileImage.classList.add('hero-aem__mobile-image'); @@ -97,13 +99,13 @@ export default function decorate(block, options) { buyLink.classList.add('button', 'primary'); createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears, buyLink) - .then(pricesBox => { - buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, // This allows the event to cross the shadow DOM boundary + .then((pricesBox) => { + buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); }); - }) } else { // If there is no product, just add the button class and dispatch the event const simpleLink = block.querySelector('.hero-aem__card-text a'); @@ -133,5 +135,4 @@ export default function decorate(block, options) { aemContainer.appendChild(cardElement); richTextCard.innerHTML = ''; columnsCard.forEach((col) => col.remove()); - } diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index 86144e491..d2e982feb 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -20,7 +20,7 @@ function buildHeroBlock(element) { const subSection = document.querySelector('div.hero div'); subSection.classList.add('hero-content'); - const isHomePage = window.location.pathname.split('/').filter(item => item).length === 1; + const isHomePage = window.location.pathname.split('/').filter((item) => item).length === 1; if (!isHomePage) { const breadcrumb = createTag('div', { class: 'breadcrumb' }); diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 2199b7098..fc75ad32b 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -266,9 +266,7 @@ export default function decorate(block) { } extractTextFromStrongTagToParent(block); - console.log(block); [...block.children[0].children].slice(1).forEach((item, idx) => { renderNanoBlocks(item, undefined, idx); }); - } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 47c505cb2..4c2edc483 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -365,7 +365,7 @@ createNanoBlock('lowestPrice', renderLowestPrice); */ export default function decorate(block) { [...block.children].forEach((row, idxParent) => { - [...(row.children)].forEach((col, idxChild) => { + [...(row.children)].forEach((col) => { col.classList.add('product-card'); block.appendChild(col); diff --git a/_src/scripts/breadcrumbs.js b/_src/scripts/breadcrumbs.js index 6fa10b190..62612218e 100644 --- a/_src/scripts/breadcrumbs.js +++ b/_src/scripts/breadcrumbs.js @@ -5,14 +5,14 @@ import { } from './utils/utils.js'; // eslint-disable-next-line import/no-cycle -import {decorateBlockWithRegionId, getDomain} from './scripts.js'; +import { decorateBlockWithRegionId, getDomain } from './scripts.js'; function prependSlash(path) { return path.startsWith('/') ? path : `/${path}`; } -function getName(pageIndex, path, part, current, domain) { - const pg = pageIndex.find((page) => page.path === path); +function getName(pageIndex, path, part, current) { + const pg = pageIndex.find((page) => page.path === path); if (pg && pg.breadcrumbtitle && pg.breadcrumbtitle !== '0') { return pg.breadcrumbtitle; } @@ -41,7 +41,7 @@ async function createBreadcrumbs(container) { const pathSeparator = '/'; // split pathname into parts add / at the end and remove empty parts const domain = getDomain(); - const pathSplit = pathname.split('/').filter(item => item !== domain).reduce((acc, curr, index, array) => { + const pathSplit = pathname.split('/').filter((item) => item !== domain).reduce((acc, curr, index, array) => { if (index < array.length - 1) { acc.push(`${curr}/`); } else if (curr !== '') { diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index ebe139de3..1de7a922e 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -149,9 +149,9 @@ export function getMetadata(name) { export function toClassName(name) { return typeof name === 'string' ? name.toLowerCase() - .replace(/[^\w\u4e00-\u9fa5]/g, '-') // Include Chinese characters in the regular expression - .replace(/-+/g, '-') // Replace consecutive hyphens with a single hyphen - .replace(/^-|-$/g, '') // Remove leading and trailing hyphens + .replace(/[^\w\u4e00-\u9fa5]/g, '-') // Include Chinese characters in the regular expression + .replace(/-+/g, '-') // Replace consecutive hyphens with a single hyphen + .replace(/^-|-$/g, '') // Remove leading and trailing hyphens : ''; } diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 5c2b800f4..cb3a67764 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -170,18 +170,18 @@ function getCurrentDate() { * Returns the environment name based on the hostname * @returns {String} */ -export function getEnvironment(hostname, country) { +export function getEnvironment(hostname) { if (hostname.includes('hlx.page') || hostname.includes('hlx.live')) { return 'stage'; } - if (hostname.includes(`www.bitdefender`)) { + if (hostname.includes('www.bitdefender')) { return 'prod'; } return 'dev'; } export function getDomain() { - return window.location.pathname.split('/').filter(item => item)[0]; + return window.location.pathname.split('/').filter((item) => item)[0]; } /** @@ -190,7 +190,7 @@ export function getDomain() { */ function setPageLanguage(param) { document.documentElement.lang = param.language; - const pages = window.location.pathname.split('/').filter(item => item); + const pages = window.location.pathname.split('/').filter((item) => item); const domain = pages[0]; const basePath = pages.length > 1 ? `${domain}/solutions` : domain; createMetadata('nav', `/${basePath}/nav`); @@ -485,7 +485,8 @@ async function loadEager(doc) { } } -// todo remove export after having a clear path for the overall unit testing strategy of the all page +// todo remove export after having a clear path for the +// overall unit testing strategy of the all page export function generateHrefLang() { hreflangMap.forEach(({ baseUrl, pageType }, key) => { const link = document.createElement('link'); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index c6022c2f5..6b0537089 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,13 +1,14 @@ +/* eslint-disable no-use-before-define */ export const localisationList = ['zh-hk', 'zh-tw', 'en-us']; export function getDefaultLanguage() { const currentPathUrl = window.location.pathname; const foundLanguage = localisationList.find((item) => currentPathUrl.indexOf(`/${item}/`) !== -1); - return foundLanguage?.replace('zh-','') || 'site'; + return foundLanguage?.replace('zh-', '') || 'site'; } const cacheResponse = new Map(); const siteName = getDefaultLanguage(); -const FETCH_URL = `https://www.bitdefender.com/site/Store/ajax`; +const FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; // eslint-disable-next-line import/prefer-default-export export function createTag(tag, attributes, html) { @@ -168,7 +169,7 @@ export function renderNanoBlocks(parent = document.body, mv = undefined, index = matches.forEach((match) => { const [name] = parseParams(match.slice(1, -1)); const datasetValue = getDatasetFromSection(parent); - const datasetEntryValue = (index !== undefined ? datasetValue[`${name.toLowerCase()}${index + 1}`] : datasetValue[name.toLowerCase()]) || '' + const datasetEntryValue = (index !== undefined ? datasetValue[`${name.toLowerCase()}${index + 1}`] : datasetValue[name.toLowerCase()]) || ''; const newMatch = [match, datasetEntryValue.split(',')].join(',').replace(/[{}]/g, ''); const [newName, ...params] = parseParams(newMatch); From cf79b7f389917a4c265032273d0e29af91e456c8 Mon Sep 17 00:00:00 2001 From: miordache Date: Wed, 28 Feb 2024 14:08:10 +0200 Subject: [PATCH 0160/1296] Fix css linting styles --- .../box-image-round-card.css | 49 ++++++++++++------- _src/blocks/hero-aem/hero-aem.css | 1 + _src/blocks/round-card/round-card.css | 5 +- package.json | 2 +- 4 files changed, 38 insertions(+), 19 deletions(-) diff --git a/_src/blocks/box-image-round-card/box-image-round-card.css b/_src/blocks/box-image-round-card/box-image-round-card.css index 96b39c691..5ac577997 100644 --- a/_src/blocks/box-image-round-card/box-image-round-card.css +++ b/_src/blocks/box-image-round-card/box-image-round-card.css @@ -2,7 +2,7 @@ display: flex; background-color: #fff; border-radius: 8px; - box-shadow: 0 3px 6px 0 rgba(0,0,0,.08); + box-shadow: 0 3px 6px 0 rgb(0 0 0 / 8%); position: relative; overflow: hidden; z-index: 2; @@ -11,19 +11,29 @@ padding: 40px 23px 2pc; } -/*.box-image-round-card-container .inner-wrapper > div:nth-child(1) {*/ -/* width: 50%;*/ -/*}*/ +/* .box-image-round-card-container .inner-wrapper > div:nth-child(1) { */ -/*.box-image-round-card-container .inner-wrapper > div:last-child {*/ -/* border-radius: 50%;*/ -/* position: absolute;*/ -/* right: -35px;*/ -/* top: -60px;*/ -/* width: 225px;*/ -/* height: 225px;*/ -/* overflow: hidden;*/ -/*}*/ +/* width: 50%; */ + +/* } */ + +/* .box-image-round-card-container .inner-wrapper > div:last-child { */ + +/* border-radius: 50%; */ + +/* position: absolute; */ + +/* right: -35px; */ + +/* top: -60px; */ + +/* width: 225px; */ + +/* height: 225px; */ + +/* overflow: hidden; */ + +/* } */ .box-image-round-card-container .icon-apple { width: 60px; @@ -58,14 +68,19 @@ .box-image-round-card-container .inner-wrapper p { font-size: 18px; } - /*.box-image-round-card-container .inner-wrapper > div:last-child {*/ - /* width: 325px;*/ - /* height: 325px;*/ - /*}*/ + + /* .box-image-round-card-container .inner-wrapper > div:last-child { */ + + /* width: 325px; */ + + /* height: 325px; */ + + /* } */ .box-image-round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a::after { transform: translateX(5px); opacity: 1; } + .box-image-round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a span.button-text { transform: translate(-10px, 0); } diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css index 300dc6dba..6a39dd69c 100644 --- a/_src/blocks/hero-aem/hero-aem.css +++ b/_src/blocks/hero-aem/hero-aem.css @@ -161,6 +161,7 @@ .hero-aem-container .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; + display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); diff --git a/_src/blocks/round-card/round-card.css b/_src/blocks/round-card/round-card.css index efdeff4ee..a5806dfb9 100644 --- a/_src/blocks/round-card/round-card.css +++ b/_src/blocks/round-card/round-card.css @@ -7,7 +7,7 @@ main .section.round-card-container.mt-n60 { display: flex; background-color: #fff; border-radius: 8px; - box-shadow: 0 3px 6px 0 rgba(0,0,0,.08); + box-shadow: 0 3px 6px 0 rgb(0 0 0 / 8%); position: relative; overflow: hidden; z-index: 2; @@ -66,14 +66,17 @@ main .section.round-card-container.mt-n60 { .round-card-container .inner-wrapper p { font-size: 18px; } + .round-card-container .inner-wrapper > div:last-child { width: 285px; height: 285px; } + .round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a::after { transform: translateX(5px); opacity: 1; } + .round-card-container .inner-wrapper > a:first-child:hover ~ div p.button-container > a span.button-text { transform: translate(-10px, 0); } diff --git a/package.json b/package.json index 74d17f0f3..a59b1ef23 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "description": "Starter project for Adobe Helix", "scripts": { "lint:js": "eslint .", - "lint:css": "stylelint solutions/blocks/**/*.css solutions/styles/*.css", + "lint:css": "stylelint _src/blocks/**/*.css --fix", "lint": "npm run lint:js && npm run lint:css" }, "repository": { From 2d9869ea5b44ccaf4a335d5fb2926392a8a12f88 Mon Sep 17 00:00:00 2001 From: Ionut MANTESCU Date: Wed, 28 Feb 2024 15:21:16 +0200 Subject: [PATCH 0161/1296] four-cards component + terms component --- _src/blocks/four-cards/four-cards.css | 100 ++++++++++++++++++++++++++ _src/blocks/four-cards/four-cards.js | 12 ++++ _src/blocks/terms/terms.css | 6 ++ _src/blocks/terms/terms.js | 2 - 4 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 _src/blocks/four-cards/four-cards.css create mode 100644 _src/blocks/four-cards/four-cards.js diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css new file mode 100644 index 000000000..f28a824f9 --- /dev/null +++ b/_src/blocks/four-cards/four-cards.css @@ -0,0 +1,100 @@ +@media (min-width: 992px) { /* desktop */ + .four-cards-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (min-width: 1600px) { /* large desktop */ + .four-cards-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} + +.four-cards h3 { + font: normal normal bold 32px/37px var(--body-font-family); + text-align: center; + margin-bottom: 56px; +} + +.four-cards > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + grid-gap: 24px; + } + + .four-cards > ul > li { + display: inline-block; + background-color: #f6f6f6; + padding: 25px; + margin: 0px; + border-radius: 20px; + text-align: left; + font-size: 16px; + } + + .four-cards .default-content-wrapper { + text-align: center; + } + .four-cards a.button { + font: normal normal bold 16px/20px var(--body-font-family); + margin-top: 48px; + padding: 14px 28px; + color: #006EFF; + background: white; + border: 2px solid #006EFF; + border-radius: 10px; + display: inline-block; + position: relative; + } + .four-cards a.button:focus { + outline: 2px solid #48C1FF; + border-radius: 13px; + outline-offset: 2px; + } + .four-cards a.button:hover { + margin-top: 48px; + padding: 14px 28px; + background: #006EFF; + color: #ffffff; + } + .four-cards a.button:active { + background: #0D499B; + order: 2px solid #0D499B; + } + .four-cards a.button:disabled { + background: white; + order: 2px solid #B7B7B7; + color: #B7B7B7; + } + .four-cards a.button span.button-text { + transition: none; + } + .four-cards a.button:hover span.button-text { + transform: none; + } + .four-cards a.button::after { + content: ''; + width: 0px; + height: 0px; + margin: 0px; + transition: none; + } + +@media (max-width: 991px) { /* mobile/tablet */ + .four-cards-wrapper { + padding: var(--body-padding); + } + .four-cards > ul { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 14px; + } + .four-cards > ul > li { + margin: 0px; + } +} \ No newline at end of file diff --git a/_src/blocks/four-cards/four-cards.js b/_src/blocks/four-cards/four-cards.js new file mode 100644 index 000000000..52e521642 --- /dev/null +++ b/_src/blocks/four-cards/four-cards.js @@ -0,0 +1,12 @@ +export default function decorate(block) { + const ul = document.createElement('ul'); + [...block.children].forEach((row) => { + const li = document.createElement('li'); + li.innerHTML = row.innerHTML; + + ul.append(li); + }); + + block.textContent = ''; + block.append(ul); +} \ No newline at end of file diff --git a/_src/blocks/terms/terms.css b/_src/blocks/terms/terms.css index 23e31d876..430f19ff0 100644 --- a/_src/blocks/terms/terms.css +++ b/_src/blocks/terms/terms.css @@ -28,4 +28,10 @@ .terms-container .terms div p strong { font-weight: bold; margin-top: 15px; +} + +@media (max-width: 991px) { /* mobile/tablet */ + .terms-wrapper { + padding: var(--body-padding); + } } \ No newline at end of file diff --git a/_src/blocks/terms/terms.js b/_src/blocks/terms/terms.js index 143ed8687..cba26f536 100644 --- a/_src/blocks/terms/terms.js +++ b/_src/blocks/terms/terms.js @@ -1,5 +1,3 @@ -import { createTag } from '../../scripts/utils/utils.js'; - export default function decorate(block) { } \ No newline at end of file From 74ed3e51bb7138f46007f546cd9e26aa023a87ae Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 16:12:23 +0200 Subject: [PATCH 0162/1296] general fixes --- _src/blocks/dual-teaser/dual-teaser.css | 1 + _src/blocks/marquee/marquee.css | 35 ++++++++++++++----- _src/blocks/marquee/marquee.js | 19 +++++----- .../trusted-columns/trusted-columns.css | 12 ++++++- .../blocks/trusted-columns/trusted-columns.js | 14 ++++++-- 5 files changed, 61 insertions(+), 20 deletions(-) diff --git a/_src/blocks/dual-teaser/dual-teaser.css b/_src/blocks/dual-teaser/dual-teaser.css index 3b32200ef..d7bbbb70d 100644 --- a/_src/blocks/dual-teaser/dual-teaser.css +++ b/_src/blocks/dual-teaser/dual-teaser.css @@ -45,6 +45,7 @@ .dual-teaser-container .col-container .box { height: 190px; padding: 10px; + background: #003b89a3 0 0 no-repeat padding-box;; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); display: flex; diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index 003253979..1407432f7 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -1,20 +1,31 @@ .marquee-container.section { - padding-top: 0; + padding: 0; + position: relative; + overflow: unset; + max-width: 100%; } .marquee-container .marquee.block { height: 150px; display: flex; + flex-direction: column; + width: 100%; +} + +.marquee-container .title { + font: normal normal 600 12px/15px IBM Plex Sans; + letter-spacing: 0; } .marquee-container .marquee-content { display: flex; animation: scrolling 10s linear infinite; --translateX: 100%; + height: 100%; } .marquee-container .marquee-item { - flex: 0 0 100px; + flex: 0 0 85px; margin: 0 20px; } @@ -24,18 +35,26 @@ object-fit: contain; } +.marquee-container .outer-wrapper { + width: 100%; + height: 100%; + overflow: hidden; +} + @keyframes scrolling { from { transform: translateX(0); } to { transform: translateX(calc(var(--translateX) * -1)); } } -@media screen and (min-width: 768px) { - .marquee-container .marquee-item { - flex: 0 0 200px; - margin: 0 20px; +@media (min-width: 990px) { + .marquee-container .marquee.block { + height: 120px; } - .marquee-container .marquee.block { - height: 250px; + .marquee-container .title { + font: normal normal 600 18px/23px IBM Plex Sans; + position: absolute; + top: -45px; + z-index: 1; } } diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index 52e725956..683ca68e5 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -1,19 +1,19 @@ -import {debounce, getDatasetFromSection} from '../../scripts/utils/utils.js'; +import { debounce, getDatasetFromSection } from '../../scripts/utils/utils.js'; import { isView } from '../../scripts/scripts.js'; export default async function decorate(block) { const defaultBackgroundColor = '#004299'; const SLIDE_SIZE_ENUM = { - MOBILE: 100 + 20 * 2, - DESKTOP: 200 + 20 * 2, + MOBILE: 85 + 20 * 2, + TABLET_UP: 85 + 20 * 2, }; - const SPEED_ANIMATION = 0.2; + const SPEED_ANIMATION = 0.6; - const initialSlideList = [...block.children]; + const [title, ...initialSlideList] = [...block.children]; function getCurrentViewportSlideSize() { - return isView('mobile') ? SLIDE_SIZE_ENUM.MOBILE : SLIDE_SIZE_ENUM.DESKTOP; + return isView('mobile') ? SLIDE_SIZE_ENUM.MOBILE : SLIDE_SIZE_ENUM.TABLET_UP; } function calculateSlideListBasedOnScreenWidth() { const result = { @@ -66,8 +66,11 @@ export default async function decorate(block) { const { duplicatedSlides, slidesToShift } = calculateSlideListBasedOnScreenWidth(); block.innerHTML = ` -
    - ${duplicatedSlides.map((slide) => `
    ${slide.querySelector('picture').outerHTML}
    `).join('')} +
    ${title.textContent}
    +
    +
    + ${duplicatedSlides.map((slide) => `
    ${slide.querySelector('picture').outerHTML}
    `).join('')} +
    `; diff --git a/_src/blocks/trusted-columns/trusted-columns.css b/_src/blocks/trusted-columns/trusted-columns.css index 7c56a8e4e..73216ce97 100644 --- a/_src/blocks/trusted-columns/trusted-columns.css +++ b/_src/blocks/trusted-columns/trusted-columns.css @@ -3,6 +3,16 @@ } @media (min-width: 768px) { + .trusted-columns-container .col-text h2, + .trusted-columns-container .col-text h3 { + font: normal normal bold 32px/32px IBM Plex Sans; + } + + .trusted-columns-container .col-text p, + .trusted-columns-container .col-text div { + font: normal normal normal 14px/18px IBM Plex Sans; + } + .trusted-columns-container .container { display: flex; height: 700px; @@ -30,6 +40,6 @@ } .trusted-columns-container .centered-wrapper { - gap: 30px; + gap: 60px; } } diff --git a/_src/blocks/trusted-columns/trusted-columns.js b/_src/blocks/trusted-columns/trusted-columns.js index cb2de4db7..ac8c86db3 100644 --- a/_src/blocks/trusted-columns/trusted-columns.js +++ b/_src/blocks/trusted-columns/trusted-columns.js @@ -11,7 +11,11 @@ export default async function decorate(block) { ${cols.map((col) => { const pictureEl = col.querySelector('picture'); const richTextEls = [...col.children]; - richTextEls.shift(); + if (richTextEls.length === 1) { + richTextEls.shift(); + } + + return `
    @@ -28,8 +32,12 @@ export default async function decorate(block) { ${!isMobileView ? `
    ${cols.map((col) => { + const richTextEls = [...col.children]; - richTextEls.shift(); + if (richTextEls.length === 1) { + richTextEls.shift(); + } + return `
    ${richTextEls.map((item) => item.outerHTML).join('')}
    `; }).join('')} @@ -50,4 +58,4 @@ export default async function decorate(block) { } render(); -} \ No newline at end of file +} From 01d593be5b2c4104ba9a1a0388a58e76cafa2ab8 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 16:24:17 +0200 Subject: [PATCH 0163/1296] general fixes --- _src/blocks/marquee/marquee.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index 1407432f7..f9cf8816c 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -58,3 +58,9 @@ z-index: 1; } } + +@media (min-width: 1600px) { + .marquee-container .title { + margin-left: -25px + } +} From 01dcaa4dcff2f48e0a303ffddc7af5ca62c16da3 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 16:29:56 +0200 Subject: [PATCH 0164/1296] general fixes --- _src/blocks/marquee/marquee.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index 683ca68e5..8bacc8c1e 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -22,7 +22,7 @@ export default async function decorate(block) { }; const currentViewportSlideSize = getCurrentViewportSlideSize(); - const { clientWidth } = block; + const clientWidth = window.innerWidth; const spaceToFillMore = clientWidth - initialSlideList.length * currentViewportSlideSize; // ok if (spaceToFillMore < 0) { result.duplicatedSlides = initialSlideList.concat(initialSlideList); From 94ea32801b36177b6693bede8a3a9c49c0f29fd9 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 17:19:11 +0200 Subject: [PATCH 0165/1296] general fixes --- _src/blocks/custom-block/custom-block.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/_src/blocks/custom-block/custom-block.js b/_src/blocks/custom-block/custom-block.js index 03d9147d2..4e9bf9ea6 100644 --- a/_src/blocks/custom-block/custom-block.js +++ b/_src/blocks/custom-block/custom-block.js @@ -1,16 +1,20 @@ export default function decorate(block) { + const buttonEl = block.children[0].children[0].lastElementChild; + const newDiv = document.createElement('div'); + newDiv.append(buttonEl); + block.append(newDiv); + const parentBlockStyle = block.closest('.section').style; const blockStyle = block.style; const metaData = block.closest('.section').dataset; const { - contentSize, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom + background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom, } = metaData; - const allImages = [...block.children]; if (background_color) parentBlockStyle.backgroundColor = background_color; if (text_color) blockStyle.color = text_color; if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; if (padding_bottom) blockStyle.paddingBottom = `${padding_bottom}rem`; if (margin_top) blockStyle.marginTop = `${margin_top}rem`; - if (margin_bottom) blockStyle.marginBottom = `${margimargin_bottomnBottom}rem`; + if (margin_bottom) blockStyle.marginBottom = `${margin_bottom}rem`; } From 17db8bdb994990bcfdfb12a14561bbe98ebfbe01 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 17:29:47 +0200 Subject: [PATCH 0166/1296] general fixes --- _src/blocks/custom-block/custom-block.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/_src/blocks/custom-block/custom-block.js b/_src/blocks/custom-block/custom-block.js index 4e9bf9ea6..3c8fc694c 100644 --- a/_src/blocks/custom-block/custom-block.js +++ b/_src/blocks/custom-block/custom-block.js @@ -1,16 +1,18 @@ export default function decorate(block) { - const buttonEl = block.children[0].children[0].lastElementChild; - const newDiv = document.createElement('div'); - newDiv.append(buttonEl); - block.append(newDiv); - const parentBlockStyle = block.closest('.section').style; const blockStyle = block.style; const metaData = block.closest('.section').dataset; const { - background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom, + has_button, background_color, text_color, padding_top, padding_bottom, margin_top, margin_bottom, } = metaData; + if(has_button) { + const buttonEl = block.children[0].children[0].lastElementChild; + const newDiv = document.createElement('div'); + newDiv.append(buttonEl); + block.append(newDiv); + } + if (background_color) parentBlockStyle.backgroundColor = background_color; if (text_color) blockStyle.color = text_color; if (padding_top) blockStyle.paddingTop = `${padding_top}rem`; From 9dacad129da13df05981fd4f608901fa910872dd Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 18:04:22 +0200 Subject: [PATCH 0167/1296] law enforcement padding section removal --- _src/blocks/big-teaser-section/big-teaser-section.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/big-teaser-section/big-teaser-section.css b/_src/blocks/big-teaser-section/big-teaser-section.css index 52744a25d..c096f75ac 100644 --- a/_src/blocks/big-teaser-section/big-teaser-section.css +++ b/_src/blocks/big-teaser-section/big-teaser-section.css @@ -1,3 +1,7 @@ +.big-teaser-section-container.section { + padding: 0; +} + .big-teaser-section-container { background: var(--dark); } From e5c2bda6ae19ab96fa3e8e7ac65410c9cc333e5c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Feb 2024 19:04:16 +0200 Subject: [PATCH 0168/1296] triangle borders improvement --- _src/blocks/teaser-logos/teaser-logos.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/_src/blocks/teaser-logos/teaser-logos.css b/_src/blocks/teaser-logos/teaser-logos.css index 181484a54..c7eef3c31 100644 --- a/_src/blocks/teaser-logos/teaser-logos.css +++ b/_src/blocks/teaser-logos/teaser-logos.css @@ -16,6 +16,21 @@ background: var(--backgroundColor); } +.teaser-logos-container .main-wrapper .col:first-child::before { + content: ''; + display: block; + width: 0; + height: 0; + border-left: 50px solid transparent; + border-right: 50px solid transparent; + border-bottom: 170px solid var(--backgroundColor); + transform: rotate(180deg); + position: absolute; + right: -20px; + top: 0; + z-index: 2; +} + .teaser-logos-container .main-wrapper .col:last-child::before { content: ''; display: block; @@ -26,8 +41,9 @@ border-bottom: 170px solid var(--backgroundColor); transform: rotate(0deg); position: absolute; - left: -50px; + left: -37.5px; top: 0; + z-index: 1; } .teaser-logos-container .main-wrapper .col .img-wrapper { @@ -40,6 +56,7 @@ height: 400px; } + .teaser-logos-container .main-wrapper .col:first-child::before, .teaser-logos-container .main-wrapper .col:last-child::before { border-bottom-width: 400px; } From ac34282c65c605b0a4e360f4702a986d5c1bd4f7 Mon Sep 17 00:00:00 2001 From: Ionut MANTESCU Date: Thu, 29 Feb 2024 10:37:48 +0200 Subject: [PATCH 0169/1296] questions-answers component --- .../questions-answers/questions-answers.css | 104 ++++++++++++++++++ .../questions-answers/questions-answers.js | 61 ++++++++++ 2 files changed, 165 insertions(+) create mode 100644 _src/blocks/questions-answers/questions-answers.css create mode 100644 _src/blocks/questions-answers/questions-answers.js diff --git a/_src/blocks/questions-answers/questions-answers.css b/_src/blocks/questions-answers/questions-answers.css new file mode 100644 index 000000000..c95f054a9 --- /dev/null +++ b/_src/blocks/questions-answers/questions-answers.css @@ -0,0 +1,104 @@ +.questions-answers-wrapper { + padding: var(--body-padding); +} + +@media (min-width: 992px) { /* desktop */ + .questions-answers-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (min-width: 1600px) { /* large desktop */ + .questions-answers-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} + +.questions-answers h4 { + text-align: center; + font: normal normal bold 32px/28px var(--body-font-family); + margin-bottom: 32px; +} + + +.questions-answers { + cursor: pointer; +} + +.questions-answers .default-content-wrapper p { + font: italic normal normal 14px/16px var(--body-font-family); +} + +.questions-answers .questions-answers-item { + margin: 16px 0; + padding: 17px 16px 17px 40px; + background-color: #F4F8FF; + border-radius: 10px; + border-color: rgb(229 231 235); + border-width: 0; + display: flex; + flex-direction: column; +} +.questions-answers .questions-answers-item.expanded { + box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%); +} + +.questions-answers-item .question { + position: relative; + font: normal normal bold 18px/21px var(--body-font-family); + color: #000; + display: flex; + justify-content: space-between; + align-items: center; + padding-right: 25px; +} + +.questions-answers-item .question::after { + position: absolute; + font: normal normal normal 24px/21px var(--body-font-family); + content: "+"; + width: 10px; + height: 10px; + display: block; + left: -22px; + bottom:0; + top:0; + color: #006EFF; +} + +.questions-answers-item.expanded .question { + color: #006EFF; +} + +.questions-answers-item.expanded .question::after { + font: normal normal normal 24px/21px var(--body-font-family); + top: -10px; + content: "_"; + width: 10px; + height: 10px; + display: inline-block; + color: #006EFF; +} + +.questions-answers-item .answer { + opacity: 0; + height: 0; + overflow: hidden; + transition: all 0.3s ease-in-out; +} +.questions-answers-item .answer p { + font: normal normal normal 14px/16px var(--body-font-family); +} + +.questions-answers-item.expanded .answer { + opacity: 1; + height: auto; + transition: all 0.3s ease-in-out; +} + + .accordion-item.accordion-item-open .answer { + display: block; +} \ No newline at end of file diff --git a/_src/blocks/questions-answers/questions-answers.js b/_src/blocks/questions-answers/questions-answers.js new file mode 100644 index 000000000..24c99fe52 --- /dev/null +++ b/_src/blocks/questions-answers/questions-answers.js @@ -0,0 +1,61 @@ +function expandItem(item) { + const [, content] = item.children; + content.style.height = `${content.scrollHeight}px`; + const transitionEndCallback = () => { + content.removeEventListener('transitionend', transitionEndCallback); + content.style.height = 'auto'; + }; + content.addEventListener('transitionend', transitionEndCallback); + item.classList.add('expanded'); + } + + function collapseItem(item) { + const [, content] = item.children; + content.style.height = `${content.scrollHeight}px`; + requestAnimationFrame(() => { + item.classList.remove('expanded'); + content.style.height = 0; + }); + } + + function handleAccordionItemClick(item, items) { + if (!item.classList.contains('expanded')) { + items.filter((i) => i.classList.contains('expanded')).forEach((i) => collapseItem(i)); + expandItem(item); + } else { + collapseItem(item); + } + } + + export default function decorate(block) { + console.log(block); + const items = Array.from(block.querySelectorAll(':scope > div')); + items.forEach((item) => { + item.classList.add('questions-answers-item'); + const [header, content] = item.children; + header.classList.add('question'); + + if (content) { + content.classList.add('answer'); + // check if .accordion-item-content has a

    + const p = content.querySelector('p'); + // if it doesn't, add a

    and move the content inside + if (!p) { + const newP = document.createElement('p'); + newP.innerHTML = content.innerHTML; + content.innerHTML = ''; + content.appendChild(newP); + } + } + + if ([...block.classList].includes('action-only-on-header')) { + header.addEventListener('click', handleAccordionItemClick.bind(null, header.parentElement, items)); + } else { + item.addEventListener('click', handleAccordionItemClick.bind(null, item, items)); + } + }); + + if (block.classList.contains('first-open')) { + items[0].classList.add('expanded'); + } + } \ No newline at end of file From 1072d88db8f5b2d40bef7057aadc531b37a928cb Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 12:40:41 +0200 Subject: [PATCH 0170/1296] Refactor particle background CSS and JS files --- .../particle-background.css | 27 ++++++++++++++++--- .../particle-background.js | 8 +++--- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index f28be8f09..f142c7caa 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -1,6 +1,25 @@ -#tsparticles { - width: 100%; - height: 400px; - position: relative; /* This is important if you want to overlay other elements on top of the particles */ +.particle-background { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 400px; + border-radius: 8px; + color: white; + text-align: center; + overflow: hidden; + border-radius: 25px; +} + +#ts-particles { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + padding: 0; + margin: 0; + z-index: -1; } \ No newline at end of file diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index ae18bc5f8..9e2bae7b1 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -26,15 +26,17 @@ async function init(block) { return; } + // eslint-disable-next-line import/no-unresolved tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; + // eslint-disable-next-line import/no-unresolved loadAll = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm')).loadAll; - const particleIdSelector = 'particles-js'; + const particleIdSelector = 'ts-particles'; const particleDiv = document.createElement('div'); particleDiv.setAttribute('id', particleIdSelector); - block.prepend(particleDiv); + // block.children[0].setAttribute('id', particleIdSelector); async function loadParticles(options) { await loadAll(tsParticles); @@ -45,7 +47,7 @@ async function init(block) { const configs = { particles: { number: { - value: 130, + value: 50, }, color: { value: '#ffffff', From 6c299396fdc56639c8113565e2c13fc05eb2807e Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 12:41:26 +0200 Subject: [PATCH 0171/1296] Update particle background border radius --- _src/blocks/particle-background/particle-background.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index f142c7caa..7c605c5c6 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -6,14 +6,13 @@ justify-content: center; align-items: center; min-height: 400px; - border-radius: 8px; + border-radius: 25px; color: white; text-align: center; overflow: hidden; - border-radius: 25px; } -#ts-particles { +.particle-background #ts-particles { position: absolute; top: 0; left: 0; From b934fc4df53ba0b3297ee25e40739be8b1ce95a3 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 12:51:19 +0200 Subject: [PATCH 0172/1296] Update particle-background.js to dispatch shadowDomLoaded event --- _src/blocks/particle-background/particle-background.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 9e2bae7b1..4cc48f35d 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -107,9 +107,12 @@ async function checkForMobile() { } export default async function decorate(block) { - console.log('Particle background block'); - await init(block); window.addEventListener('resize', debounce(checkForMobile, 250)); + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } From 0f209f282ff48e985522ae04ba9c29b4869d4425 Mon Sep 17 00:00:00 2001 From: andserban Date: Thu, 29 Feb 2024 13:33:11 +0200 Subject: [PATCH 0173/1296] Comparison component --- _src/blocks/awards/awards.js | 10 +- .../bitdef-vs-brands/bitdef-vs-brands.css | 144 ++++++++++++++++++ .../bitdef-vs-brands/bitdef-vs-brands.js | 71 +++++++++ 3 files changed, 216 insertions(+), 9 deletions(-) create mode 100644 _src/blocks/bitdef-vs-brands/bitdef-vs-brands.css create mode 100644 _src/blocks/bitdef-vs-brands/bitdef-vs-brands.js diff --git a/_src/blocks/awards/awards.js b/_src/blocks/awards/awards.js index 5a5dea8e9..8b1378917 100644 --- a/_src/blocks/awards/awards.js +++ b/_src/blocks/awards/awards.js @@ -1,9 +1 @@ -export default function decorate(block) { - const parentSelector = block.closest(".section"); - const metaData = parentSelector.dataset; - const [texte, logouri] = block.children; - console.log(metaData.pipi); - console.log(logouri); - console.log(texte); - console.log(parentSelector); -} + diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css new file mode 100644 index 000000000..499ec0fcd --- /dev/null +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css @@ -0,0 +1,144 @@ +.bitdef-vs-brands { + display: flex; + flex-direction: column; + align-items: center; +} + +.heading-container { + text-align: center; + width: 410px; +} + +.new-container { + display: flex; + flex-direction: column; + align-items: center; +} +.bitdef-vs-brands-wrapper h2 { + margin-top: 72px; + margin-bottom: 57px; + font-size: 32px; +} +.bitdef-vs-brands-wrapper h3 { + margin-bottom: 6px; + font-size: 24px; +} +.bitdef-vs-brands-wrapper .row-2 { + margin-bottom: 22px; + font-size: 14px; +} + +.bitdef-vs-brands-wrapper .table-container { + padding: 20px; + background-color: #f8f8f8; + border-radius: 16px; + width: 410px; + margin-bottom: 50px; +} + +.bitdef-vs-brands-wrapper table .blue-background p { + background-color: #005bd5; + color: white; + padding: 9px; + margin-top: 8px; + margin-bottom: 8px; +} +.bitdef-vs-brands-wrapper table .grey-background p { + background-color: #dedede; + padding: 9px; + margin-top: 8px; + margin-bottom: 8px; +} +.bitdef-vs-brands-wrapper table .blue-background p:nth-child(1) { + width: 100%; + border-radius: 8px 0px 0px 8px; +} +.bitdef-vs-brands-wrapper table .blue-background p:nth-child(2) { + border-radius: 0px 8px 8px 0px; +} +.bitdef-vs-brands-wrapper table .grey-background p:nth-child(1) { + width: 100%; + border-radius: 8px 0px 0px 8px; +} +.bitdef-vs-brands-wrapper table .grey-background p:nth-child(2) { + border-radius: 0px 8px 8px 0px; +} +.bitdef-vs-brands-wrapper table .same-line { + display: flex; +} + +.bitdef-vs-brands-wrapper table .same-line:nth-child(1) { + margin-right: auto; +} +.bitdef-vs-brands-wrapper table .same-line { + animation: increaseWidth 1s forwards; + width: 0; +} + +.same-line { + animation: none; /* Initially disable animation */ +} +.same-line.animate { + animation: increaseWidth 1s forwards; +} + +@keyframes increaseWidth-row1 { + from { + width: 0; + } + to { + width: 95%; + } +} + +/* Keyframes for the second row animation */ +@keyframes increaseWidth-row2 { + from { + width: 0; + } + to { + width: 90%; + } +} + +/* Keyframes for the third row animation */ +@keyframes increaseWidth-row3 { + from { + width: 0; + } + to { + width: 85%; + } +} + +/* Apply different animations to each row */ +.bitdef-vs-brands-wrapper table .row-3 .same-line.animate-row1 { + animation: increaseWidth-row1 1s forwards; +} + +.bitdef-vs-brands-wrapper table .row-4 .same-line.animate-row2 { + animation: increaseWidth-row2 1s forwards; +} + +.bitdef-vs-brands-wrapper table .row-5 .same-line.animate-row3 { + animation: increaseWidth-row3 1s forwards; +} + +.bitdef-vs-brands-wrapper img { + max-width: 32px; /* Adjust as needed */ + height: auto; /* Maintain aspect ratio */ +} + +@media (min-width: 768px) { + .heading-container { + width: 610px; + } +} + +@media (min-width: 990px) { + .new-container { + flex-direction: row; + gap: 3%; + justify-content: center; + } +} diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js new file mode 100644 index 000000000..939da98b9 --- /dev/null +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js @@ -0,0 +1,71 @@ +export default function decorate(block) { + const tables = document.querySelectorAll(".bitdef-vs-brands-wrapper table"); + + tables.forEach((table) => { + const parentDiv = table.closest("div"); + + parentDiv.classList.add("table-container"); + + table.querySelectorAll("tr").forEach((row, rowIndex) => { + row.classList.add(`row-${rowIndex}`); + + if (rowIndex >= 3 && rowIndex <= 5) { + if (rowIndex === 3) row.classList.add("blue-background"); + else row.classList.add("grey-background"); + row.querySelectorAll("td").forEach((td) => { + td.classList.add("same-line"); + }); + } + + row.querySelectorAll("td").forEach((cell, cellIndex) => { + cell.classList.add(`column-${cellIndex}`); + }); + }); + }); + // Select the first div within the .bitdef-vs-brands container + const firstDiv = document.querySelector(".bitdef-vs-brands > div"); + + // Add class 'heading-container' to the first div + firstDiv.classList.add("heading-container"); + + // Create a new container div + const newContainerDiv = document.createElement("div"); + newContainerDiv.classList.add("new-container"); + + // Move the second and third divs into the new container + while (firstDiv.nextSibling) { + newContainerDiv.appendChild(firstDiv.nextSibling); + } + + // Insert the new container after the first div + const bitdefContainer = document.querySelector(".bitdef-vs-brands"); + bitdefContainer.insertBefore(newContainerDiv, firstDiv.nextSibling); + + //Animation + const sections = document.querySelectorAll(".bitdef-vs-brands"); + + const options = { + threshold: 0.5, // Trigger animation when 50% of the section is visible + }; + + const observer = new IntersectionObserver(function (entries, observer) { + entries.forEach((entry) => { + if (entry.isIntersecting && !entry.target.dataset.animationTriggered) { + // Add animation class to each row based on its index + const tables = entry.target.querySelectorAll("table"); + tables.forEach((table) => { + const rows = table.querySelectorAll(".same-line"); + rows.forEach((row, index) => { + row.classList.add(`animate-row${index + 1}`); + }); + }); + // Set dataset attribute to indicate animation has been triggered + entry.target.dataset.animationTriggered = true; + } + }); + }, options); + + sections.forEach((section) => { + observer.observe(section); + }); +} From 837c8990ce6bf27178b52601977959d3e20e48f8 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 14:12:10 +0200 Subject: [PATCH 0174/1296] Update particle background script and resize event debounce --- _src/blocks/particle-background/particle-background.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 4cc48f35d..0a6c542e5 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -28,6 +28,7 @@ async function init(block) { // eslint-disable-next-line import/no-unresolved tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; + console.log(tsParticles); // eslint-disable-next-line import/no-unresolved loadAll = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm')).loadAll; @@ -109,7 +110,7 @@ async function checkForMobile() { export default async function decorate(block) { await init(block); - window.addEventListener('resize', debounce(checkForMobile, 250)); + window.addEventListener('resize', debounce(checkForMobile, 50)); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, From ae6187fd5f69145b1dede67eeed5b95707f0d7b9 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 14:17:08 +0200 Subject: [PATCH 0175/1296] Move particleDiv inside particleBackground element --- _src/blocks/particle-background/particle-background.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 0a6c542e5..bc92eb41d 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -36,7 +36,8 @@ async function init(block) { const particleDiv = document.createElement('div'); particleDiv.setAttribute('id', particleIdSelector); - block.prepend(particleDiv); + const particleBackground = block.querySelector('.particle-background'); + particleBackground.prepend(particleDiv); // block.children[0].setAttribute('id', particleIdSelector); async function loadParticles(options) { From 2dc372f8f85194a2051a382bb8bb4305c7ccf1df Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 14:22:33 +0200 Subject: [PATCH 0176/1296] Comment out window resize event listener in particle-background.js --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index bc92eb41d..2529c6da7 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -111,7 +111,7 @@ async function checkForMobile() { export default async function decorate(block) { await init(block); - window.addEventListener('resize', debounce(checkForMobile, 50)); + // window.addEventListener('resize', debounce(checkForMobile, 50)); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, From b702ff04bc1a5ca2253986c4618c3db1ee3a4cbe Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 14:24:23 +0200 Subject: [PATCH 0177/1296] Refactor particle-background.js --- .../particle-background.js | 78 +++++++++---------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 2529c6da7..2404e8a7e 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -1,30 +1,30 @@ /* eslint-disable prefer-const */ /* eslint-disable camelcase */ -function debounce(func, wait) { - let timeout; - return function executedFunction(...args) { - const later = () => { - clearTimeout(timeout); - func(...args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; -} - -function isView(viewport) { - const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; - return !!(element && getComputedStyle(element).display !== 'none'); -} +// function debounce(func, wait) { +// let timeout; +// return function executedFunction(...args) { +// const later = () => { +// clearTimeout(timeout); +// func(...args); +// }; +// clearTimeout(timeout); +// timeout = setTimeout(later, wait); +// }; +// } + +// function isView(viewport) { +// const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; +// return !!(element && getComputedStyle(element).display !== 'none'); +// } let tsParticles; let loadAll; async function init(block) { - if (isView('mobile')) { - return; - } + // if (isView('mobile')) { + // return; + // } // eslint-disable-next-line import/no-unresolved tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; @@ -87,26 +87,26 @@ async function init(block) { loadParticles(configs); } -async function checkForMobile() { - const isMobileView = isView('mobile'); - if (isMobileView && (!tsParticles && !loadAll)) { - return; - } - - if (isMobileView && tsParticles) { - const particles = tsParticles.domItem(0); - particles.pause(); - return; - } - - if (!isMobileView && (!tsParticles && !loadAll)) { - await init(); - return; - } - - const particles = tsParticles.domItem(0); - particles.play(); -} +// async function checkForMobile() { +// const isMobileView = isView('mobile'); +// if (isMobileView && (!tsParticles && !loadAll)) { +// return; +// } + +// if (isMobileView && tsParticles) { +// const particles = tsParticles.domItem(0); +// particles.pause(); +// return; +// } + +// if (!isMobileView && (!tsParticles && !loadAll)) { +// await init(); +// return; +// } + +// const particles = tsParticles.domItem(0); +// particles.play(); +// } export default async function decorate(block) { await init(block); From 91c2334e60871361742333ad6bd8a5004eee86e3 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 14:53:53 +0200 Subject: [PATCH 0178/1296] Add console.log for debugging --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 2404e8a7e..f7170b363 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -39,7 +39,7 @@ async function init(block) { const particleBackground = block.querySelector('.particle-background'); particleBackground.prepend(particleDiv); // block.children[0].setAttribute('id', particleIdSelector); - + console.log(block); async function loadParticles(options) { await loadAll(tsParticles); From 573e15f65d7af4bc31d327b968c03cfe5cee789f Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 15:39:19 +0200 Subject: [PATCH 0179/1296] Fix particle background rendering issue --- _src/blocks/particle-background/particle-background.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index f7170b363..1a18d57d5 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -39,7 +39,6 @@ async function init(block) { const particleBackground = block.querySelector('.particle-background'); particleBackground.prepend(particleDiv); // block.children[0].setAttribute('id', particleIdSelector); - console.log(block); async function loadParticles(options) { await loadAll(tsParticles); @@ -113,6 +112,9 @@ export default async function decorate(block) { // window.addEventListener('resize', debounce(checkForMobile, 50)); + let test = block.querySelectorAll('#ts-particles'); + console.log(test); + test[0].replaceWith(test[1]); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary From 52ea7d11db844a4407448b230331aba069d911b2 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 15:40:14 +0200 Subject: [PATCH 0180/1296] Replace querySelectorAll with document.querySelectorAll --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 1a18d57d5..ec1664ef4 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -112,7 +112,7 @@ export default async function decorate(block) { // window.addEventListener('resize', debounce(checkForMobile, 50)); - let test = block.querySelectorAll('#ts-particles'); + let test = document.querySelectorAll('#ts-particles'); console.log(test); test[0].replaceWith(test[1]); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From 2c1bfde1bd959fb47bba617718571cac05ffe836 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 15:45:47 +0200 Subject: [PATCH 0181/1296] test --- _src/blocks/particle-background/particle-background.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index ec1664ef4..e0a50c7d7 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -114,7 +114,9 @@ export default async function decorate(block) { let test = document.querySelectorAll('#ts-particles'); console.log(test); - test[0].replaceWith(test[1]); + let test2 = block.querySelectorAll('#ts-particles'); + console.log(test2); + test2[0].replaceWith(test2[1]); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary From 9fb6c65795f90d0ee9615d806592fd7c336c60c3 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:09:24 +0200 Subject: [PATCH 0182/1296] Refactor loadComponent function to improve performance --- .../particle-background/particle-background.js | 5 ----- _src/scripts/lib-franklin-api.js | 12 ++++++++---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index e0a50c7d7..1f111ed8f 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -112,11 +112,6 @@ export default async function decorate(block) { // window.addEventListener('resize', debounce(checkForMobile, 50)); - let test = document.querySelectorAll('#ts-particles'); - console.log(test); - let test2 = block.querySelectorAll('#ts-particles'); - console.log(test2); - test2[0].replaceWith(test2[1]); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index c3ff257cb..cd35b8ceb 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -43,9 +43,13 @@ export async function loadComponent(offer, block, options, selector) { import(`${origin}/_src/blocks/${block}/${block}.js`) ]) - shadowRoot.innerHTML += html; - updateLinkSources(shadowRoot, `${origin}${offerFolder}/`); - await js.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); - + const newDiv = document.createElement('div'); + newDiv.style.display = "none"; + newDiv.innerHTML += html; + updateLinkSources(newDiv, `${origin}${offerFolder}/`); + await js.default(newDiv, {...options, metadata: parseMetadata(newDiv)}); + + shadowRoot.appendChild(newDiv); + newDiv.style.display = "block"; return container; } From 5fce364ecc61dc9ed3adc43241f3ca13511c1512 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:15:05 +0200 Subject: [PATCH 0183/1296] Add console.log statement to loadComponent function --- _src/scripts/lib-franklin-api.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index cd35b8ceb..b74bf3d56 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -48,7 +48,7 @@ export async function loadComponent(offer, block, options, selector) { newDiv.innerHTML += html; updateLinkSources(newDiv, `${origin}${offerFolder}/`); await js.default(newDiv, {...options, metadata: parseMetadata(newDiv)}); - + console.log(newDiv); shadowRoot.appendChild(newDiv); newDiv.style.display = "block"; return container; From 1fc4ac5b4b4c4c8be310487a9400839e83f88e8f Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:16:33 +0200 Subject: [PATCH 0184/1296] adsasdasd --- _src/scripts/lib-franklin-api.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index b74bf3d56..16a061649 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -49,7 +49,7 @@ export async function loadComponent(offer, block, options, selector) { updateLinkSources(newDiv, `${origin}${offerFolder}/`); await js.default(newDiv, {...options, metadata: parseMetadata(newDiv)}); console.log(newDiv); - shadowRoot.appendChild(newDiv); + // shadowRoot.appendChild(newDiv); newDiv.style.display = "block"; return container; } From 3ed1f368de184e0b47f6d1f0c142a0a2cf8eaf85 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:20:36 +0200 Subject: [PATCH 0185/1296] Remove console.log and add particleIdSelector logging --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 1f111ed8f..aa90b225b 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -28,7 +28,6 @@ async function init(block) { // eslint-disable-next-line import/no-unresolved tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; - console.log(tsParticles); // eslint-disable-next-line import/no-unresolved loadAll = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/all@3.1.0/+esm')).loadAll; @@ -83,6 +82,7 @@ async function init(block) { fullScreen: { enable: false }, }; + console.log(document.getElementById(particleIdSelector)); loadParticles(configs); } From 45c6b45383dcc92acf61f64e4a065d45789057d1 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:22:41 +0200 Subject: [PATCH 0186/1296] Fix async loading of particles --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index aa90b225b..178918bf2 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -83,7 +83,7 @@ async function init(block) { }; console.log(document.getElementById(particleIdSelector)); - loadParticles(configs); + await loadParticles(configs); } // async function checkForMobile() { From d4d0fbdcc8692c8a56bbfb4f7a089de5ebfe6afa Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:27:41 +0200 Subject: [PATCH 0187/1296] sdadasdas --- _src/scripts/lib-franklin-api.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 16a061649..c32aabb55 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -47,6 +47,7 @@ export async function loadComponent(offer, block, options, selector) { newDiv.style.display = "none"; newDiv.innerHTML += html; updateLinkSources(newDiv, `${origin}${offerFolder}/`); + document.body.appendChild(newDiv); await js.default(newDiv, {...options, metadata: parseMetadata(newDiv)}); console.log(newDiv); // shadowRoot.appendChild(newDiv); From 19ea6770e76abbefe3db72f814d793c653289a47 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:28:28 +0200 Subject: [PATCH 0188/1296] Fix appending newDiv to shadowRoot --- _src/scripts/lib-franklin-api.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index c32aabb55..f95dcf5c9 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -50,7 +50,7 @@ export async function loadComponent(offer, block, options, selector) { document.body.appendChild(newDiv); await js.default(newDiv, {...options, metadata: parseMetadata(newDiv)}); console.log(newDiv); - // shadowRoot.appendChild(newDiv); + shadowRoot.appendChild(newDiv); newDiv.style.display = "block"; return container; } From caaad1cd4b40ea456a4e7fee40844f371e937b4d Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:45:54 +0200 Subject: [PATCH 0189/1296] Fix particle background initialization --- _src/blocks/particle-background/particle-background.js | 3 +-- _src/scripts/lib-franklin-api.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 178918bf2..547934c45 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -35,7 +35,7 @@ async function init(block) { const particleDiv = document.createElement('div'); particleDiv.setAttribute('id', particleIdSelector); - const particleBackground = block.querySelector('.particle-background'); + const particleBackground = block.parentElement.querySelector('.particle-background'); particleBackground.prepend(particleDiv); // block.children[0].setAttribute('id', particleIdSelector); async function loadParticles(options) { @@ -82,7 +82,6 @@ async function init(block) { fullScreen: { enable: false }, }; - console.log(document.getElementById(particleIdSelector)); await loadParticles(configs); } diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index f95dcf5c9..b7e959524 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -49,7 +49,6 @@ export async function loadComponent(offer, block, options, selector) { updateLinkSources(newDiv, `${origin}${offerFolder}/`); document.body.appendChild(newDiv); await js.default(newDiv, {...options, metadata: parseMetadata(newDiv)}); - console.log(newDiv); shadowRoot.appendChild(newDiv); newDiv.style.display = "block"; return container; From 003f73228b307ffd37eee159984377db94da257c Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:47:33 +0200 Subject: [PATCH 0190/1296] Add max-width to particle background container --- _src/blocks/particle-background/particle-background.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index 7c605c5c6..3cc6b5fc6 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -10,6 +10,7 @@ color: white; text-align: center; overflow: hidden; + max-width: 1332px; } .particle-background #ts-particles { From da7a255b119ffd074fa4bc358005cf1be960cf96 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:52:36 +0200 Subject: [PATCH 0191/1296] Add z-index and we-container class to particle background --- .../particle-background/particle-background.css | 11 ++++++++++- .../blocks/particle-background/particle-background.js | 2 ++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index 3cc6b5fc6..4fe1dec7f 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -11,6 +11,15 @@ text-align: center; overflow: hidden; max-width: 1332px; + z-index: 1; +} + +.we-container { + width: 100%; + margin: 0 auto; + padding: 0 20px; + max-width: 1332px; + position: relative; } .particle-background #ts-particles { @@ -21,5 +30,5 @@ right: 0; padding: 0; margin: 0; - z-index: -1; + z-index: 0; } \ No newline at end of file diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 547934c45..9cb87a692 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -35,6 +35,8 @@ async function init(block) { const particleDiv = document.createElement('div'); particleDiv.setAttribute('id', particleIdSelector); + + block.parentElement.classList.add('we-container'); const particleBackground = block.parentElement.querySelector('.particle-background'); particleBackground.prepend(particleDiv); // block.children[0].setAttribute('id', particleIdSelector); From a6a00fe21da005c0cac20f62e175500a0d7d5b6d Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 16:52:44 +0200 Subject: [PATCH 0192/1296] Remove unnecessary z-index property --- _src/blocks/particle-background/particle-background.css | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index 4fe1dec7f..b27836b64 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -30,5 +30,4 @@ right: 0; padding: 0; margin: 0; - z-index: 0; } \ No newline at end of file From a5dee890f1751ede8b3d6c8dfed8cf8006c3c630 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 17:07:24 +0200 Subject: [PATCH 0193/1296] Add styles for h2 and div in particle-background.css --- _src/blocks/particle-background/particle-background.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index b27836b64..c0d8cb006 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -30,4 +30,12 @@ right: 0; padding: 0; margin: 0; +} + +.particle-background h2 { + font-size: 40px; +} + +.particle-background div { + z-index: 1; } \ No newline at end of file From 9d53b0673a70b5bf97d4a5f6ecaabb58901d25d4 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 17:08:27 +0200 Subject: [PATCH 0194/1296] Fix margin for h2 element in particle-background.css --- _src/blocks/particle-background/particle-background.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index c0d8cb006..4a54cb389 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -34,6 +34,7 @@ .particle-background h2 { font-size: 40px; + margin: 0; } .particle-background div { From 4d0a838ecb00384ef57d7511163bdd746db69b17 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 17:09:12 +0200 Subject: [PATCH 0195/1296] Refactor particle-background.js --- .../particle-background.js | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 9cb87a692..720506a62 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -1,30 +1,30 @@ /* eslint-disable prefer-const */ /* eslint-disable camelcase */ -// function debounce(func, wait) { -// let timeout; -// return function executedFunction(...args) { -// const later = () => { -// clearTimeout(timeout); -// func(...args); -// }; -// clearTimeout(timeout); -// timeout = setTimeout(later, wait); -// }; -// } - -// function isView(viewport) { -// const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; -// return !!(element && getComputedStyle(element).display !== 'none'); -// } +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +function isView(viewport) { + const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; + return !!(element && getComputedStyle(element).display !== 'none'); +} let tsParticles; let loadAll; async function init(block) { - // if (isView('mobile')) { - // return; - // } + if (isView('mobile')) { + return; + } // eslint-disable-next-line import/no-unresolved tsParticles = (await import('https://cdn.jsdelivr.net/npm/@tsparticles/engine@3.1.0/+esm')).tsParticles; @@ -39,7 +39,7 @@ async function init(block) { block.parentElement.classList.add('we-container'); const particleBackground = block.parentElement.querySelector('.particle-background'); particleBackground.prepend(particleDiv); - // block.children[0].setAttribute('id', particleIdSelector); + async function loadParticles(options) { await loadAll(tsParticles); @@ -87,31 +87,31 @@ async function init(block) { await loadParticles(configs); } -// async function checkForMobile() { -// const isMobileView = isView('mobile'); -// if (isMobileView && (!tsParticles && !loadAll)) { -// return; -// } +async function checkForMobile() { + const isMobileView = isView('mobile'); + if (isMobileView && (!tsParticles && !loadAll)) { + return; + } -// if (isMobileView && tsParticles) { -// const particles = tsParticles.domItem(0); -// particles.pause(); -// return; -// } + if (isMobileView && tsParticles) { + const particles = tsParticles.domItem(0); + particles.pause(); + return; + } -// if (!isMobileView && (!tsParticles && !loadAll)) { -// await init(); -// return; -// } + if (!isMobileView && (!tsParticles && !loadAll)) { + await init(); + return; + } -// const particles = tsParticles.domItem(0); -// particles.play(); -// } + const particles = tsParticles.domItem(0); + particles.play(); +} export default async function decorate(block) { await init(block); - // window.addEventListener('resize', debounce(checkForMobile, 50)); + window.addEventListener('resize', debounce(checkForMobile, 50)); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, From 621690f51c8bda392bd64019255c0b02fd7cc284 Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 17:11:19 +0200 Subject: [PATCH 0196/1296] Update debounce delay for window resize event --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index 720506a62..b844a3071 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -111,7 +111,7 @@ async function checkForMobile() { export default async function decorate(block) { await init(block); - window.addEventListener('resize', debounce(checkForMobile, 50)); + window.addEventListener('resize', debounce(checkForMobile, 250)); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, From 6d4627138e9c55f7a08c7e7100e9831f7d0de69a Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 17:12:45 +0200 Subject: [PATCH 0197/1296] Update particle background value to 30 --- _src/blocks/particle-background/particle-background.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index b844a3071..e04f0f4fc 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -49,7 +49,7 @@ async function init(block) { const configs = { particles: { number: { - value: 50, + value: 30, }, color: { value: '#ffffff', From 0ccbec1688f09481ea44e8762014bf660f02667e Mon Sep 17 00:00:00 2001 From: miordache Date: Thu, 29 Feb 2024 17:15:03 +0200 Subject: [PATCH 0198/1296] Add new div to load component outside shadowRoot --- _src/scripts/lib-franklin-api.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index b7e959524..09047822f 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -43,6 +43,8 @@ export async function loadComponent(offer, block, options, selector) { import(`${origin}/_src/blocks/${block}/${block}.js`) ]) + // create a new div to load the component outside the shadowRoot + // in order to corretly run the javascript const newDiv = document.createElement('div'); newDiv.style.display = "none"; newDiv.innerHTML += html; From 080338239ae53048d0611891841d4da568f6bd85 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 1 Mar 2024 11:44:45 +0200 Subject: [PATCH 0199/1296] box-carousel fixes --- _src/blocks/box-carousel/box-carousel.css | 23 ++++++++++++++--------- _src/blocks/box-carousel/box-carousel.js | 11 ++--------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 48d30f838..10885b33f 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -1,5 +1,5 @@ .box-carousel-container { - background: black; + background: white; } .box-carousel-container .carousel-header { @@ -9,12 +9,12 @@ } .box-carousel-container .carousel-header .title { - color: white; + color: black; } .box-carousel-container .carousel-header .left-arrow, .box-carousel-container .carousel-header .right-arrow { - color: white; + color: black; } .box-carousel-container .carousel-container { @@ -36,24 +36,24 @@ padding: 20px; border: 3px solid #006dff; border-radius: 15px; - color: white; + color: black; font-size: 1em; + background: #eaf2ff; } .box-carousel-container .carousel-item:first-child { margin-left: 0; } -.box-carousel-container .carousel-item.active { +.box-carousel-container .carousel-item:hover { + color: white; background: #006dff; box-shadow: 0px 3px 12px 1px rgba(0,0,0,1), 0px 0px 100px 0px rgba(0,110,255,1); } -.box-carousel-container .carousel-item:hover { - background: #006dff; - box-shadow: 0px 3px 12px 1px rgba(0,0,0,1), - 0px 0px 100px 0px rgba(0,110,255,1); +.box-carousel-container .carousel-item:hover svg path { + fill: white !important; } .box-carousel-container .carousel-item .title { @@ -104,6 +104,11 @@ margin: 0; } +.box-carousel-container svg path { + fill: var(--blue) !important; +} + + @media screen and (min-width: 768px) { .box-carousel-container .carousel-header { justify-content: flex-start; diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js index 6a8e5d1c7..c1e3ab211 100644 --- a/_src/blocks/box-carousel/box-carousel.js +++ b/_src/blocks/box-carousel/box-carousel.js @@ -42,8 +42,8 @@ export default async function decorate(block) {

  • + let firstTdContent = tdList.length > 0 && tdList[0].textContent.trim() !== '' ? `${tdList[0].innerHTML}` : ''; + + // Extract the content of the second (if present) inside a + const secondTdContent = tdList.length > 1 && tdList[1].textContent.trim() !== '' ? `${tdList[1].innerHTML}` : ''; + + // Create the
  • combining the first and second td content + let liClass = ''; + if (firstTdContent === '') { + liClass += 'd-none'; + } + + // < reffers to '<' character + if (firstTdContent.indexOf('<-') !== -1 || firstTdContent.indexOf('<') !== -1) { + liClass += ' has_arrow'; + firstTdContent = firstTdContent.replace('<-', ''); + } + + // > reffers to '>' character + if (firstTdContent.indexOf('->') !== -1 || firstTdContent.indexOf('>') !== -1) { + liClass += ' has_arrow_right'; + firstTdContent = firstTdContent.replace('->', ''); + } + + const liContent = `
  • ${firstTdContent}${secondTdContent}
  • `; + + return liContent; + }).join(''); + + return `
      ${liString}
    `; + }); + + if (title.innerHTML.indexOf('href') !== -1) { + title.innerHTML = `${title.querySelector('tr a').innerHTML}`; + } + + block.innerHTML += ` +
    +
    + ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} + ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} +
    + + ${saveOldPrice.innerText.trim() && `
    + + + ${Array.from(saveOldPrice.querySelectorAll('td'))[1].innerText.replace('0%', ``)} + +
    `} + + ${price.innerText.trim() && `
    + + ${price.innerText.trim().replace('0', '')} +
    `} + + ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} + + ${buyLink.innerText.trim() && ``} + + ${undeBuyLink.innerText.trim() ? `` : ''} +
    + ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} +
    +
    `; + }); + } else { + block.innerHTML = ` +
    + add some products +
    `; + } +} From c7ceb5f3f43badd99183ff01d0a66d7e1082d5f6 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 5 Mar 2024 18:18:54 +0200 Subject: [PATCH 0255/1296] new updates regarding section buttons --- _src/scripts/template-factories/trusted.css | 28 ++++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index d3c0e4961..7db0a7550 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -408,10 +408,6 @@ main .section.link-right a { flex-direction: column; } -.trusted .section.columns-container .columns > div > div:not(.columns-img-col) p:last-child { - order: -1; -} - .trusted .section.columns-container .columns > div > div:not(.columns-img-col) img { width: 160px; } @@ -450,6 +446,24 @@ main .section.link-right a { text-decoration: underline; } +.trusted .columns-container a.button:any-link:not(.modal):not(.primary) { + border: solid white 2px; + width: 100%; + justify-content: center; +} + +.trusted .columns-container.bg-white a.button:any-link:not(.modal):not(.primary) { + border: solid black 2px; + background: white; + color: black; + width: 100%; + justify-content: center; +} + +.trusted .columns-container.bg-white a.button:any-link:not(.modal):not(.primary)::after { + background: black; +} + .trusted header, .trusted main, .trusted footer { @@ -707,6 +721,12 @@ main .section.link-right a { .trusted .video_up { margin-top: -240px; } + + .trusted .columns-container a.button:any-link:not(.modal):not(.primary), + .trusted .columns-container.bg-white a.button:any-link:not(.modal):not(.primary) { + width: unset; + justify-content: unset; + } } @media (width <= 768px) { From eaac11d7b7eac6207c524fd556c9c2d97bbe0bac Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 5 Mar 2024 18:22:48 +0200 Subject: [PATCH 0256/1296] andreis new change requests --- _src/blocks/trusted-hero/trusted-hero.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/trusted-hero/trusted-hero.css b/_src/blocks/trusted-hero/trusted-hero.css index 0efd75969..1043b2a09 100644 --- a/_src/blocks/trusted-hero/trusted-hero.css +++ b/_src/blocks/trusted-hero/trusted-hero.css @@ -23,13 +23,12 @@ } .trusted-hero-container .rte-wrapper { - padding: 30px; position: relative; z-index: 4; } .trusted-hero-container .video-wrapper { - height: 200px; + height: 300px; position: relative; } From 5d4bb4713b50d860171ecc037d6da8ea92ce7f72 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 6 Mar 2024 10:42:57 +0200 Subject: [PATCH 0257/1296] columns links new tab --- _src/blocks/columns/columns.js | 11 ++++++++++- _src/scripts/scripts.js | 2 -- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index de1fb32b9..f9624d91f 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -1,4 +1,4 @@ -import { debounce } from '../../scripts/utils/utils.js'; +import {debounce, getDatasetFromSection} from '../../scripts/utils/utils.js'; function getItemsToShow() { if (window.innerWidth <= 676) { @@ -167,6 +167,8 @@ function setImageAsBackgroundImage() { } export default function decorate(block) { + const blockDataset = getDatasetFromSection(block); + const {linksOpenInNewTab} = blockDataset; const cols = [...block.firstElementChild.children]; block.classList.add(`columns-${cols.length}-cols`); @@ -184,6 +186,13 @@ export default function decorate(block) { }); }); + if (linksOpenInNewTab === 'true') { + block.querySelectorAll('.button-container > a').forEach((anchorEl) => { + anchorEl.target = '_blank'; + anchorEl.rel = 'noopener noreferrer'; + }); + } + if (block.classList.contains('text-over-image')) { setImageAsBackgroundImage(); } diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index a33ccb871..6395acbe3 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -316,8 +316,6 @@ export default function decorateLinkedPictures(main) { if (a && link.startsWith('https://')) { a.innerHTML = ''; a.className = 'linked-image'; - a.target = '_blank'; - a.rel = 'noopener noreferrer'; const pictureParent = picture.parentNode; a.append(picture); if (pictureParent.children.length === 0) { From 34b316c76f97955288f091937dfc1e44d023f593 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 6 Mar 2024 10:44:03 +0200 Subject: [PATCH 0258/1296] columns links new tab --- _src/blocks/columns/columns.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index f9624d91f..6397bcb67 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -1,4 +1,4 @@ -import {debounce, getDatasetFromSection} from '../../scripts/utils/utils.js'; +import { debounce, getDatasetFromSection } from '../../scripts/utils/utils.js'; function getItemsToShow() { if (window.innerWidth <= 676) { @@ -168,7 +168,7 @@ function setImageAsBackgroundImage() { export default function decorate(block) { const blockDataset = getDatasetFromSection(block); - const {linksOpenInNewTab} = blockDataset; + const { linksOpenInNewTab } = blockDataset; const cols = [...block.firstElementChild.children]; block.classList.add(`columns-${cols.length}-cols`); From 0328294ba240db3a0530f22dc8f3adab2ae0323e Mon Sep 17 00:00:00 2001 From: miordache Date: Wed, 6 Mar 2024 12:08:49 +0200 Subject: [PATCH 0259/1296] Update URLs for background images and icons --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 8 ++++---- _src/blocks/new-prod-boxes/new-prod-boxes.js | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index a903d4ec2..6e5de8f94 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -163,14 +163,14 @@ .new-prod-boxes-container .block .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow::before { content: ""; margin: 0 5px 20px 0; - background: url("../../icons/arrow-left-blue.png") no-repeat center transparent; + background: url("bitdefender.com/pages/icons/arrow-left-blue.png") no-repeat center transparent; width: 20px; height: 20px; background-size: 15px 12px; float: left; } .new-prod-boxes-container .block .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow_right .arrow-right { - background: url("../../icons/arrow-right-solid.svg") no-repeat center transparent; + background: url("bitdefender.com/pages/icons/arrow-right-solid.svg") no-repeat center transparent; width: 20px; height: 20px; background-size: 15px 12px; @@ -183,7 +183,7 @@ line-height: 17px; margin-bottom: 8px; list-style-type: none; - background: url("../../images/icons/ok.png") top 2px left no-repeat transparent; + background: url("https://bitdefender.com/pages/images/icons/ok.png") top 2px left no-repeat transparent; padding-left: 22px; background-size: 13px; position: relative; @@ -219,7 +219,7 @@ color: white; border-radius: 20px; padding: 2px 21px 2px 7px; - background: url("../../images/icons/individual.svg") center right 6px no-repeat #026DFF; + background: url("bitdefender.com/pages/images/icons/individual.svg") center right 6px no-repeat #026DFF; background-size: auto 12px; } .new-prod-boxes-container .block .prod_box .inner_prod_box .benefitsLists ul:nth-of-type(2) { diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index e4e193cb4..fbe24e84f 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,17 +1,25 @@ // import { productAliases } from '../../scripts/scripts.js'; // import { updateProductsList } from '../../scripts/utils.js'; -export default function decorate(block) { - const metaData = block.closest('.section').dataset; +export default function decorate(block, options) { const { products, priceType, - } = metaData; + } = options ? options.metadata : block.closest('.section').dataset; + + console.log(block); + const aemContainer = block.children[1]; + console.log(aemContainer); + aemContainer.classList.add('hero-aem-container'); + aemContainer.classList.add('we-container'); + const underShadow = aemContainer.children[0]; + console.log(underShadow); const productsAsList = products && products.split(','); if (productsAsList.length) { // productsAsList.forEach((prod) => updateProductsList(prod)); - [...block.children].forEach((prod, key) => { + [...underShadow.children].forEach((prod, key) => { + console.log('prod', prod, key); const [greenTag, title, blueTag, subtitle, saveOldPrice, price, billed, buyLink, undeBuyLink, benefitsLists] = [...prod.querySelectorAll('tr')]; // const [prodName, prodUsers, prodYears] = productsAsList[key].split('/'); const onSelectorClass = `tsmd-10-1`; @@ -19,6 +27,7 @@ export default function decorate(block) { [...block.children][key].innerHTML = ''; const featuresSet = benefitsLists.querySelectorAll('table'); + console.log('featuresSet', featuresSet); const featureList = Array.from(featuresSet).map((table) => { const trList = Array.from(table.querySelectorAll('tr')); From 0c68877d03032cec7f3cc261ddf071c3f1766027 Mon Sep 17 00:00:00 2001 From: miordache Date: Wed, 6 Mar 2024 12:29:41 +0200 Subject: [PATCH 0260/1296] Fix CSS styles in multiple blocks --- .../big-teaser-section/big-teaser-section.css | 15 ++++++--------- _src/blocks/box-carousel/box-carousel.css | 13 +++++++------ _src/blocks/dual-teaser/dual-teaser.css | 12 ++++++------ _src/blocks/header/header.css | 2 ++ _src/blocks/header/header.js | 4 +++- _src/blocks/image-columns/image-columns.css | 2 ++ _src/blocks/marquee/marquee.css | 5 +++-- _src/blocks/teaser-logos/teaser-logos.css | 1 + _src/blocks/trusted-hero/trusted-hero.css | 12 ++++++------ 9 files changed, 36 insertions(+), 30 deletions(-) diff --git a/_src/blocks/big-teaser-section/big-teaser-section.css b/_src/blocks/big-teaser-section/big-teaser-section.css index bf7cdfcc6..4ae52dd71 100644 --- a/_src/blocks/big-teaser-section/big-teaser-section.css +++ b/_src/blocks/big-teaser-section/big-teaser-section.css @@ -30,12 +30,12 @@ .big-teaser-section-container h2, .big-teaser-section-container h3, .big-teaser-section-container h4 { - font: normal normal 600 20px/24px "IBM Plex Sans"; + font: normal normal 600 20px/24px "IBM Plex Sans", sans-serif; } .big-teaser-section-container p, .big-teaser-section-container div { - font: normal normal normal 14px/21px "IBM Plex Sans"; + font: normal normal normal 14px/21px "IBM Plex Sans", sans-serif; } @media screen and (min-width: 768px) { @@ -49,17 +49,19 @@ .big-teaser-section-container .rte { width: 50%; + position: relative; + z-index: 1; } .big-teaser-section-container h2, .big-teaser-section-container h3, .big-teaser-section-container h4 { - font: normal normal 600 40px/48px "IBM Plex Sans"; + font: normal normal 600 40px/48px "IBM Plex Sans", sans-serif; } .big-teaser-section-container p, .big-teaser-section-container div { - font: normal normal normal 18px/27px "IBM Plex Sans"; + font: normal normal normal 18px/27px "IBM Plex Sans", sans-serif; } .big-teaser-section-container .wrapper { @@ -69,11 +71,6 @@ align-items: center; } - .big-teaser-section-container .rte { - position: relative; - z-index: 1; - } - .big-teaser-section-container .imgs-wrapper { position: absolute; width: 100%; diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 5d4e0edb6..c93590000 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ .box-carousel-container { background: #EFF6FF; } @@ -15,7 +16,7 @@ .box-carousel-container .carousel-header .title h2, .box-carousel-container .carousel-header .title h3, .box-carousel-container .carousel-header .title h4 { - font: normal normal 600 20px/24px "IBM Plex Sans"; + font: normal normal 600 20px/24px "IBM Plex Sans", sans-serif; } .box-carousel-container .carousel-header .title p { @@ -65,7 +66,7 @@ } .box-carousel-container .carousel-item .title { - font: normal normal bold 32px/82px "IBM Plex Sans"; + font: normal normal bold 32px/82px "IBM Plex Sans", sans-serif; letter-spacing: 0; overflow: hidden; display: -webkit-box; @@ -76,7 +77,7 @@ } .box-carousel-container .carousel-item .subtitle { - font: normal normal normal 12px/15px "IBM Plex Sans"; + font: normal normal normal 12px/15px "IBM Plex Sans", sans-serif; letter-spacing: 0; overflow: hidden; display: -webkit-box; @@ -133,17 +134,17 @@ } .box-carousel-container .carousel-item .title { - font: normal normal bold 64px/82px "IBM Plex Sans"; + font: normal normal bold 64px/82px "IBM Plex Sans", sans-serif; } .box-carousel-container .carousel-item .subtitle { - font: normal normal normal 18px/23px "IBM Plex Sans"; + font: normal normal normal 18px/23px "IBM Plex Sans", sans-serif; } .box-carousel-container .carousel-header .title h2, .box-carousel-container .carousel-header .title h3, .box-carousel-container .carousel-header .title h4 { - font: normal normal 600 40px/48px "IBM Plex Sans"; + font: normal normal 600 40px/48px "IBM Plex Sans", sans-serif; } } diff --git a/_src/blocks/dual-teaser/dual-teaser.css b/_src/blocks/dual-teaser/dual-teaser.css index 20aefd0c7..4b924ef6c 100644 --- a/_src/blocks/dual-teaser/dual-teaser.css +++ b/_src/blocks/dual-teaser/dual-teaser.css @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ .dual-teaser-container.section { background: transparent linear-gradient(180deg, #006EFF 0%, #000 100%) 0 0 no-repeat padding-box; overflow: unset; @@ -48,9 +49,8 @@ .dual-teaser-container .col-container .box { height: 190px; padding: 10px; - background: #003b89a3 0 0 no-repeat padding-box;; + background: #003b89a3 0 0 no-repeat padding-box; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); display: flex; flex-direction: column; border-bottom-right-radius: 10px; @@ -61,13 +61,13 @@ .dual-teaser-container .col-container .box h3, .dual-teaser-container .col-container .box h4, .dual-teaser-container .col-container .box h5 { - font: normal normal normal 20px/27px "IBM Plex Sans"; + font: normal normal normal 20px/27px "IBM Plex Sans", sans-serif; letter-spacing: 0; } .dual-teaser-container .col-container .box p, .dual-teaser-container .col-container .box div { - font: normal normal normal 14px/18px "IBM Plex Sans"; + font: normal normal normal 14px/18px "IBM Plex Sans", sans-serif; letter-spacing: 0; margin: 0; } @@ -126,7 +126,7 @@ .dual-teaser-container .col-container .box p, .dual-teaser-container .col-container .box div { - font: normal normal normal 18px/23px "IBM Plex Sans"; + font: normal normal normal 18px/23px "IBM Plex Sans", sans-serif; letter-spacing: 0; } @@ -134,7 +134,7 @@ .dual-teaser-container .col-container .box h3, .dual-teaser-container .col-container .box h4, .dual-teaser-container .col-container .box h5 { - font: normal normal normal 40px/52px "IBM Plex Sans"; + font: normal normal normal 40px/52px "IBM Plex Sans", sans-serif; margin-bottom: 16px; } diff --git a/_src/blocks/header/header.css b/_src/blocks/header/header.css index 8cb71245d..0a93fd553 100644 --- a/_src/blocks/header/header.css +++ b/_src/blocks/header/header.css @@ -1,3 +1,5 @@ +/* stylelint-disable no-descending-specificity */ + /* header and nav layout */ header.header-wrapper { position: sticky; diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 552e444df..97dc5a745 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -364,7 +364,9 @@ function renderMobileHeader(nav) { export default async function decorate(block) { const hero = document.querySelector('.hero'); - const isErrorPage = window.isErrorPage || false; + + // commented out because it's not being used, might be used in the future + // const isErrorPage = window.isErrorPage || false; // Check if the page isn't an error page and if the hero doesn't exist // if (!hero && !isErrorPage) return; diff --git a/_src/blocks/image-columns/image-columns.css b/_src/blocks/image-columns/image-columns.css index 31c811106..4586cf77d 100644 --- a/_src/blocks/image-columns/image-columns.css +++ b/_src/blocks/image-columns/image-columns.css @@ -1,3 +1,5 @@ +/* stylelint-disable no-descending-specificity */ +/* stylelint-disable selector-class-pattern */ .image-columns-wrapper { padding: 0; } diff --git a/_src/blocks/marquee/marquee.css b/_src/blocks/marquee/marquee.css index b7e468a4f..01ed88103 100644 --- a/_src/blocks/marquee/marquee.css +++ b/_src/blocks/marquee/marquee.css @@ -1,3 +1,4 @@ +/* stylelint-disable custom-property-pattern */ .marquee-container.section { padding: 0; position: relative; @@ -13,7 +14,7 @@ } .marquee-container .title { - font: normal normal 600 12px/15px "IBM Plex Sans"; + font: normal normal 600 12px/15px "IBM Plex Sans", sans-serif; letter-spacing: 0; } @@ -54,7 +55,7 @@ } .marquee-container .title { - font: normal normal 600 18px/23px "IBM Plex Sans"; + font: normal normal 600 18px/23px "IBM Plex Sans", sans-serif; position: absolute; top: -45px; z-index: 1; diff --git a/_src/blocks/teaser-logos/teaser-logos.css b/_src/blocks/teaser-logos/teaser-logos.css index 145880eb9..c81415c42 100644 --- a/_src/blocks/teaser-logos/teaser-logos.css +++ b/_src/blocks/teaser-logos/teaser-logos.css @@ -1,3 +1,4 @@ +/* stylelint-disable custom-property-pattern */ .teaser-logos-container.section { padding: 0; } diff --git a/_src/blocks/trusted-hero/trusted-hero.css b/_src/blocks/trusted-hero/trusted-hero.css index 0efd75969..81757f14e 100644 --- a/_src/blocks/trusted-hero/trusted-hero.css +++ b/_src/blocks/trusted-hero/trusted-hero.css @@ -8,18 +8,18 @@ } .trusted-hero-container h1 { - font: normal normal bold 48px/42px "IBM Plex Sans"; + font: normal normal bold 48px/42px "IBM Plex Sans", sans-serif; } .trusted-hero-container h2, .trusted-hero-container h3, .trusted-hero-container h4 { - font: normal normal bold 20px/24px "IBM Plex Sans"; + font: normal normal bold 20px/24px "IBM Plex Sans", sans-serif; } .trusted-hero-container p, .trusted-hero-container div { - font: normal normal normal 14px/18px "IBM Plex Sans"; + font: normal normal normal 14px/18px "IBM Plex Sans", sans-serif; } .trusted-hero-container .rte-wrapper { @@ -73,18 +73,18 @@ @media (min-width: 992px) { .trusted-hero-container h1 { - font: normal normal bold 96px/82px "IBM Plex Sans"; + font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; } .trusted-hero-container h2, .trusted-hero-container h3, .trusted-hero-container h4 { - font: normal normal bold 40px/52px "IBM Plex Sans"; + font: normal normal bold 40px/52px "IBM Plex Sans", sans-serif; } .trusted-hero-container p, .trusted-hero-container div { - font: normal normal normal 18px/23px "IBM Plex Sans"; + font: normal normal normal 18px/23px "IBM Plex Sans", sans-serif; } .trusted-hero-container { From 0f60733c8ec7fac3b95b34741fc93ce41af877f4 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 7 Mar 2024 11:00:02 +0200 Subject: [PATCH 0261/1296] aem_fix --- _src/blocks/four-cards/four-cards.js | 5 +++++ _src/blocks/money-back/money-back.js | 5 +++++ _src/blocks/questions-answers/questions-answers.js | 5 +++++ _src/blocks/system-requirements/system-requirements.js | 5 +++++ 4 files changed, 20 insertions(+) diff --git a/_src/blocks/four-cards/four-cards.js b/_src/blocks/four-cards/four-cards.js index ef3b569fc..19b7308ce 100644 --- a/_src/blocks/four-cards/four-cards.js +++ b/_src/blocks/four-cards/four-cards.js @@ -12,4 +12,9 @@ export default function decorate(block) { block.textContent = ''; block.append(ul); decorateIcons(block); + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } diff --git a/_src/blocks/money-back/money-back.js b/_src/blocks/money-back/money-back.js index ef3b569fc..19b7308ce 100644 --- a/_src/blocks/money-back/money-back.js +++ b/_src/blocks/money-back/money-back.js @@ -12,4 +12,9 @@ export default function decorate(block) { block.textContent = ''; block.append(ul); decorateIcons(block); + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } diff --git a/_src/blocks/questions-answers/questions-answers.js b/_src/blocks/questions-answers/questions-answers.js index 8a07b67a6..5c0e82f52 100644 --- a/_src/blocks/questions-answers/questions-answers.js +++ b/_src/blocks/questions-answers/questions-answers.js @@ -57,4 +57,9 @@ export default function decorate(block) { if (block.classList.contains('first-open')) { items[0].classList.add('expanded'); } + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } diff --git a/_src/blocks/system-requirements/system-requirements.js b/_src/blocks/system-requirements/system-requirements.js index 6571b0f4f..320677e59 100644 --- a/_src/blocks/system-requirements/system-requirements.js +++ b/_src/blocks/system-requirements/system-requirements.js @@ -60,4 +60,9 @@ export default function decorate(block) { const paragraph = document.querySelector('.system-requirements .default-content-wrapper p'); paragraph.innerHTML = paragraph.innerHTML.replace(/\|/g, ''); + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } From 65e66aaefd77ecd56f6b4a42b088699fac53c2a7 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 7 Mar 2024 12:40:32 +0200 Subject: [PATCH 0262/1296] Parital revert from previous PR --- _src/blocks/dual-teaser/dual-teaser.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/dual-teaser/dual-teaser.css b/_src/blocks/dual-teaser/dual-teaser.css index 4b924ef6c..f0974c4ed 100644 --- a/_src/blocks/dual-teaser/dual-teaser.css +++ b/_src/blocks/dual-teaser/dual-teaser.css @@ -51,6 +51,7 @@ padding: 10px; background: #003b89a3 0 0 no-repeat padding-box; backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); display: flex; flex-direction: column; border-bottom-right-radius: 10px; From e6c747cc57b22f3f7d8a59ed7f85d7b42b67de39 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 7 Mar 2024 14:44:08 +0200 Subject: [PATCH 0263/1296] hero trusted buttons --- _src/blocks/trusted-hero/trusted-hero.css | 15 +++++++++++++++ _src/blocks/trusted-hero/trusted-hero.js | 5 +++++ 2 files changed, 20 insertions(+) diff --git a/_src/blocks/trusted-hero/trusted-hero.css b/_src/blocks/trusted-hero/trusted-hero.css index eafd0da63..5b1c814f0 100644 --- a/_src/blocks/trusted-hero/trusted-hero.css +++ b/_src/blocks/trusted-hero/trusted-hero.css @@ -70,6 +70,21 @@ order: -1; } +.trusted-hero-container a.button:any-link:not(.modal):not(.primary) { + border: solid white 2px !important; + width: 100%; + justify-content: center; +} + +@media (min-width: 768px) { + .trusted-hero-container a.button:any-link:not(.modal):not(.primary) { + width: unset; + justify-content: unset; + display: inline-flex; + margin-right: 15px; + } +} + @media (min-width: 992px) { .trusted-hero-container h1 { font: normal normal bold 96px/82px "IBM Plex Sans", sans-serif; diff --git a/_src/blocks/trusted-hero/trusted-hero.js b/_src/blocks/trusted-hero/trusted-hero.js index 83b470d7e..5535ebf14 100644 --- a/_src/blocks/trusted-hero/trusted-hero.js +++ b/_src/blocks/trusted-hero/trusted-hero.js @@ -38,4 +38,9 @@ export default async function decorate(block) { ${rte.innerHTML}
    `; + + block.querySelectorAll('.button-container > a').forEach((anchorEl) => { + anchorEl.target = '_blank'; + anchorEl.rel = 'noopener noreferrer'; + }); } From a4093f090a198ae8dcbb86028dcdd6467745944c Mon Sep 17 00:00:00 2001 From: andserban Date: Thu, 7 Mar 2024 14:52:35 +0200 Subject: [PATCH 0264/1296] awards,tabs,testimonials,bitdefender vs changes --- _src/blocks/awards/awards.css | 208 ++++++++++-------- _src/blocks/awards/awards.js | 7 +- .../bitdef-vs-brands/bitdef-vs-brands.css | 34 ++- .../bitdef-vs-brands/bitdef-vs-brands.js | 4 + _src/blocks/tabs-component/tabs-component.css | 124 +++++++++++ _src/blocks/tabs-component/tabs-component.js | 65 ++++++ .../testimonials-component.css | 126 +++++++++++ .../testimonials-component.js | 101 +++++++++ 8 files changed, 568 insertions(+), 101 deletions(-) create mode 100644 _src/blocks/tabs-component/tabs-component.css create mode 100644 _src/blocks/tabs-component/tabs-component.js create mode 100644 _src/blocks/testimonials-component/testimonials-component.css create mode 100644 _src/blocks/testimonials-component/testimonials-component.js diff --git a/_src/blocks/awards/awards.css b/_src/blocks/awards/awards.css index cc51b59c1..1a7209d40 100644 --- a/_src/blocks/awards/awards.css +++ b/_src/blocks/awards/awards.css @@ -1,75 +1,4 @@ -@media (min-width: 1199px) { - .clasa-generala { - display: flex; - justify-content: center; - align-items: center; - padding-top: 32px; - padding-bottom: 24px; - } - - div[data-align="center"][data-valign="middle"] img { - width: 80px; - } - - .awards-container .block.clasa-generala > div { - text-align: center; - display: flex; - align-items: center; - } - - .clasa-generala > div:nth-child(1) { - display: flex; - flex-direction: column; - align-items: center; - width: 55%; - } - .clasa-generala > div:nth-child(2) { - display: flex; - flex-direction: column; - align-items: center; - width: 50% !important; - } - .clasa-generala > div:nth-child(3) { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 70%; - } - - h3 { - font-size: 32px !important; - } - - h4 { - font: normal normal normal 18px/21px Arial; - font-size: 18px; - } -} -@media (min-width: 990px) { - .clasa-generala > div:nth-child(3) { - flex-wrap: nowrap; - justify-content: space-around; - width: 90%; - } - .awards-wrapper .awards > div:nth-child(3) > div[data-valign="middle"] { - width: 100%; - display: flex; - justify-content: space-around; - align-items: center; - } - .clasa-generala > div:nth-child(1) img { - width: 80px !important; - } - main .section.wide img { - height: auto; - object-fit: contain; - width: 80%; - } -} - -@media (min-width: 768px) { -} -.clasa-parinte { +.awards-container { display: flex; justify-content: center; } @@ -81,7 +10,7 @@ align-items: center; } -.awards-container .block.clasa-generala { +.awards-container .block.awards-component { background-color: #edf9ff; display: flex; flex-direction: column; @@ -89,45 +18,138 @@ border-radius: 20px; } -.clasa-generala { +.awards-component { display: flex; justify-content: center; align-items: center; - padding-top: 32px; + padding-top: 22px; padding-bottom: 24px; width: 100%; } -.awards-container .block.clasa-generala > div { - text-align: center; - display: flex; - align-items: center; - width: 80%; +.awards-container h3 { + font-size: 32px; } -h3 { - font-size: 30px; +.awards-container h4 { + margin-bottom: 18px; + font-weight: normal; } -h4 { - margin-bottom: 16px; - font-weight: normal; +.awards-container .block.awards-component > div { + text-align: center; + display: flex; + align-items: center; + justify-content: center; } -.clasa-generala > div:nth-child(1) { + +.awards-component > div:nth-child(1) { display: flex; flex-direction: column; align-items: center; - width: 55%; + width: 85% !important; } -.clasa-generala > div:nth-child(2) { +.awards-component > div:nth-child(2) { display: flex; flex-direction: column; align-items: center; - width: 50%; + width: 90%; } -.clasa-generala > div:nth-child(3) { +.awards-component > div:nth-child(3) div { display: flex; - flex-direction: row; - justify-content: space-around; - width: 70%; + flex-wrap: wrap; + justify-content: space-evenly; + width: 90%; + align-items: center; + gap: 4.5%; +} + +@media (min-width: 580px) { + .awards-component > div:nth-child(3) div { + width: 85%; + flex-wrap: nowrap; + gap: 3%; + } +} + +@media (min-width: 768px) { + .awards-component > div:nth-child(3) { + width: 95% !important; + } +} + +@media (min-width: 990px) { + .awards-component > div:nth-child(3) { + flex-wrap: nowrap; + justify-content: space-around; + width: 90%; + } + .awards-wrapper .awards > div:nth-child(3) > div[data-valign="middle"] { + width: 100%; + display: flex; + justify-content: space-around; + align-items: center; + } + .awards-component > div:nth-child(1) img { + width: 80px !important; + } + .awards-component main .section.wide img { + height: auto; + object-fit: contain; + width: 70%; + } + .awards-container .block.awards-component { + padding-bottom: 40px; + } +} + +@media (min-width: 1199px) { + .awards-component { + display: flex; + justify-content: center; + align-items: center; + padding-top: 32px; + padding-bottom: 24px; + } + .awards-container .block.awards-component { + padding-bottom: 50px; + } + .awards-component div[data-align="center"][data-valign="middle"] img { + width: 80px; + } + + .awards-container .block.awards-component > div { + text-align: center; + display: flex; + align-items: center; + } + + .awards-component > div:nth-child(1) { + display: flex; + flex-direction: column; + align-items: center; + width: 55%; + } + .awards-component > div:nth-child(2) { + display: flex; + flex-direction: column; + align-items: center; + width: 50% !important; + } + .awards-component > div:nth-child(3) { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 70%; + } + + .awards-component h3 { + font-size: 32px !important; + } + + .awards-component h4 { + font: normal normal normal 18px/21px Arial; + font-size: 18px; + margin-bottom: 35px; + } } diff --git a/_src/blocks/awards/awards.js b/_src/blocks/awards/awards.js index 8b1378917..3ef85c320 100644 --- a/_src/blocks/awards/awards.js +++ b/_src/blocks/awards/awards.js @@ -1 +1,6 @@ - +export default function decorate(block) { + window.dispatchEvent(new CustomEvent("shadowDomLoaded"), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); +} diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css index 499ec0fcd..439ee7fe0 100644 --- a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css @@ -4,12 +4,12 @@ align-items: center; } -.heading-container { +.bitdef-vs-brands .heading-container { text-align: center; width: 410px; } -.new-container { +.bitdef-vs-brands .new-container { display: flex; flex-direction: column; align-items: center; @@ -75,13 +75,22 @@ width: 0; } -.same-line { - animation: none; /* Initially disable animation */ +.bitdef-vs-brands-wrapper .same-line { + animation: none; } -.same-line.animate { +.bitdef-vs-brands-wrapper .same-line.animate { animation: increaseWidth 1s forwards; } +.bitdef-vs-brands .row-2 > .column-0 { + padding-bottom: 14px; +} + +.bitdef-vs-brands .row-6 > .column-0 { + padding-top: 14px; + font-size: 12px; +} + @keyframes increaseWidth-row1 { from { width: 0; @@ -130,15 +139,26 @@ } @media (min-width: 768px) { - .heading-container { + .bitdef-vs-brands-wrapper .heading-container { width: 610px; } + .bitdef-vs-brands-wrapper .new-container { + flex-direction: row; + gap: 3%; + justify-content: center; + } + .bitdef-vs-brands-wrapper .table-container { + width: 340px; + } } @media (min-width: 990px) { - .new-container { + .bitdef-vs-brands-wrapper .new-container { flex-direction: row; gap: 3%; justify-content: center; } + .bitdef-vs-brands-wrapper .table-container { + width: 410px; + } } diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js index 939da98b9..2a000a0e9 100644 --- a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js @@ -68,4 +68,8 @@ export default function decorate(block) { sections.forEach((section) => { observer.observe(section); }); + window.dispatchEvent(new CustomEvent("shadowDomLoaded"), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } diff --git a/_src/blocks/tabs-component/tabs-component.css b/_src/blocks/tabs-component/tabs-component.css new file mode 100644 index 000000000..1a288fb0c --- /dev/null +++ b/_src/blocks/tabs-component/tabs-component.css @@ -0,0 +1,124 @@ +.tabs-component-container .tabs-component { + display: flex; + flex-direction: column; + align-items: center; +} +.tabs-component-container .title-class div { + max-width: 630px; + text-align: center; + margin-bottom: 27px; + font: normal normal bold 32px/37px Arial; +} +.tabs-component-container .subtitle-class div { + max-width: 630px; + text-align: center; + margin-bottom: 67px; + font: normal normal normal 18px/26px Arial; +} +.tabs-component-container .tabs-container { + display: flex; + justify-content: center; + gap: 12%; + width: 100%; + margin-bottom: 40px; + flex-wrap: wrap; +} +.tabs-component-container .tabs-container button { + margin-bottom: 10px; +} +.tabs-component-container .card-container { + display: flex; + flex-direction: column-reverse; + align-items: center; + gap: 3%; +} +.tabs-component-container .hide { + display: none; +} +.tabs-component-container .tabs-container button { + background-color: white; + border: 0px; + font-size: 18px; + font: normal normal bold 18px/21px Arial; + padding: 9px; +} +.tabs-component-container .tabs-container button.selected { + border-bottom: #006dff solid 4px; +} +.tabs-component-container .left { + width: 80%; +} +.tabs-component-container .left img { + border-radius: 20px; +} +.tabs-component-container .right { + width: 80%; + display: flex; + flex-direction: column; + justify-content: center; +} +.tabs-component-container .right p { + font-size: 16px; +} +.tabs-component-container .tabs-container button picture img { + width: 50px; +} +.tabs-component-container .tabs-container button { + display: flex; + gap: 10px; + align-items: center; +} +.tabs-component-container button strong { + display: none; +} +.tabs-component-container .tabs-container picture { + display: flex; + align-items: center; +} +.tabs-component-container { + align-items: normal !important; +} +.tabs-component-container a { + color: #006dff !important; + background-color: #fff !important; + border: 0px !important; +} +.tabs-component-container a::after { + background-color: #006dff !important; + opacity: 1; + margin-left: 0px; +} +@media (min-width: 768px) { + .tabs-component-container .tabs-container { + flex-wrap: nowrap; + } + .tabs-component-container .left { + width: 60%; + } + .tabs-component-container .right { + width: 60%; + } +} +@media (min-width: 990px) { + .tabs-component-container .card-container { + flex-direction: row; + } + .tabs-component-container button strong { + display: block; + } + .tabs-component-container .tabs-container button picture img { + width: 30px; + } + .tabs-component-container .left { + width: 50%; + } + .tabs-component-container .right { + width: 50%; + } + .tabs-component-container .card-container { + width: 830px; + } + .tabs-component-container .tabs-container { + gap: 5%; + } +} diff --git a/_src/blocks/tabs-component/tabs-component.js b/_src/blocks/tabs-component/tabs-component.js new file mode 100644 index 000000000..732bb6f35 --- /dev/null +++ b/_src/blocks/tabs-component/tabs-component.js @@ -0,0 +1,65 @@ +export default function decorate(block) { + const parentSelector = block.closest(".section"); + const metaData = parentSelector.dataset; + const [title, subtitle, tabsTitle, ...sections] = block.children; + + title.classList.add("title-class"); + subtitle.classList.add("subtitle-class"); + // Add class 'tabs-container' to the first div + tabsTitle.classList.add("tabs-container"); + + // Get the container for the buttons + const container = document.querySelector(".tabs-container"); + + // Check if the container exists + if (container) { + const divs = container.querySelectorAll("div"); + + // Loop through each div to create buttons + divs.forEach((div, index) => { + const button = document.createElement("button"); + if (index === 0) button.classList.add("selected"); + button.innerHTML = div.innerHTML; // Use innerHTML instead of textContent + button.addEventListener("click", () => { + // Remove 'selected' class from all buttons + const buttons = document.querySelectorAll(".tabs-container button"); + buttons.forEach((btn) => btn.classList.remove("selected")); + + // Add 'selected' class to the clicked button + button.classList.add("selected"); + + // Hide all card-container elements + const cardContainers = document.querySelectorAll(".card-container"); + cardContainers.forEach((card) => card.classList.add("hide")); + + // Show the corresponding card-container element based on the index + sections[index].classList.remove("hide"); + }); + + div.parentNode.replaceChild(button, div); + }); + } else { + console.error("Container not found"); + } + + // Add classes to each card-container and hide all but the first one + sections.forEach((element, index) => { + element.classList.add("card-container"); + if (index === 0) { + element.classList.add("show"); + } + if (index !== 0) { + element.classList.add("hide"); + } + + // Add classes to children divs + const photoDiv = element.querySelector("div:nth-child(1)"); + const textDiv = element.querySelector("div:nth-child(2)"); + photoDiv.classList.add("left"); + textDiv.classList.add("right"); + }); + window.dispatchEvent(new CustomEvent("shadowDomLoaded"), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); +} diff --git a/_src/blocks/testimonials-component/testimonials-component.css b/_src/blocks/testimonials-component/testimonials-component.css new file mode 100644 index 000000000..e4fd0e7b4 --- /dev/null +++ b/_src/blocks/testimonials-component/testimonials-component.css @@ -0,0 +1,126 @@ +.testimonials-component-container { + display: flex; + flex-direction: column; + align-items: center; + font: italic normal normal 14px/19px Arial; +} +.testimonials-component-container .testimonials-component { + display: flex; + flex-direction: column; + align-items: center; + gap: 3%; +} +.testimonials-component-container .title-class { + text-align: center; + font: normal normal bold 32px/37px Arial; + margin-bottom: 20px; +} +.testimonials-component-container .subtitle-class { + font: normal normal normal 18px/21px Arial; + margin-bottom: 40px; + text-align: center; + max-width: 90%; +} +.testimonials-component-container .reviews-container { + width: 90%; +} +.testimonials-component-container .review-container { + display: flex; + align-items: flex-start; + gap: 2%; +} + +.testimonials-component-container .review-container { + display: flex; + background: #edf9ff; + padding: 26px 23px; + border-radius: 16px; +} +.testimonials-component-container hr { + margin-left: 0; + width: 24px; + margin-bottom: 8px; + border: 1px solid #00439c; +} +.testimonials-component-container .review { + width: 90%; +} +.testimonials-component-container .review p { + width: 90%; + margin-top: 0px; +} +.testimonials-component-container .hide { + display: none; +} +.testimonials-component-container .show { + display: flex; +} +.testimonials-component-container .navigation-container { + display: flex; + justify-content: space-between; + gap: 3%; + max-width: 90%; + width: 100%; + margin-top: 20px; + align-items: center; +} +.testimonials-component-container .buttons-container { + display: flex; + gap: 3%; +} +.testimonials-component-container .next-button, +.testimonials-component-container .prev-button { + width: 45px; + height: 45px; + border: 0px; + background-color: #edf9ff; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.testimonials-component-container .prev-button { + margin-right: 10px; +} +.testimonials-component-container .next-button:hover, +.prev-button:hover { + border: 1px solid #006eff; +} +@media (min-width: 768px) { + .testimonials-component-container .title-class { + width: 715px; + } + .testimonials-component-container .reviews-container { + display: flex; + flex-direction: column; + max-width: 90%; + } +} +@media (min-width: 990px) { + .testimonials-component-container .testimonials-component { + } + .testimonials-component-container .reviews-container { + display: flex; + flex-direction: row; + gap: 3%; + } + .testimonials-component-container .hide { + display: flex; + } + .testimonials-component-container .show { + display: flex; + } + .testimonials-component-container .buttons-container { + display: none; + } + .testimonials-component-container .navigation-container { + justify-content: center; + } +} + +@media (min-width: 1199px) { + .testimonials-component-container .testimonials-component { + max-width: 1294px; + } +} diff --git a/_src/blocks/testimonials-component/testimonials-component.js b/_src/blocks/testimonials-component/testimonials-component.js new file mode 100644 index 000000000..3f086a763 --- /dev/null +++ b/_src/blocks/testimonials-component/testimonials-component.js @@ -0,0 +1,101 @@ +export default function decorate(block) { + const parentSelector = block.closest(".section"); + const metaData = parentSelector.dataset; + const [title, subtitle, source, ...reviews] = block.children; + + title.classList.add("title-class"); + subtitle.classList.add("subtitle-class"); + source.classList.add("source-class"); + + // Create a new div for reviews + const reviewsContainer = document.createElement("div"); + reviewsContainer.classList.add("reviews-container"); + + // Iterate over each review element + reviews.forEach((review, index) => { + review.classList.add("review"); + + // Create SVG element + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); + svg.setAttribute("viewBox", "0 0 448 512"); + svg.setAttribute("width", "32px"); // Set width to 32 pixels + svg.setAttribute("height", "32px"); // Set height to 32 pixels + svg.style.fill = "#006EFF"; // Set the SVG color to blue + svg.innerHTML = + ''; + + // Create a container for the SVG and review content + const reviewContainer = document.createElement("div"); + reviewContainer.classList.add("review-container"); + if (index === 0) { + reviewContainer.classList.add("show"); + } else { + reviewContainer.classList.add("hide"); + } + + // Append SVG and review to the review container + reviewContainer.appendChild(svg); + reviewContainer.appendChild(review); + + // Append review container to the reviews container + reviewsContainer.appendChild(reviewContainer); + }); + + // Append the reviews container to the block + block.appendChild(reviewsContainer); + + // Create navigation buttons for the slider + const prevButton = document.createElement("button"); + // Set SVG icon for previous button with color #006EFF + prevButton.innerHTML = ``; + prevButton.classList.add("prev-button"); + prevButton.addEventListener("click", () => { + navigateSlider(-1); + }); + + const nextButton = document.createElement("button"); + // Set SVG icon for next button with color #006EFF + nextButton.innerHTML = ` + +`; + nextButton.classList.add("next-button"); + nextButton.addEventListener("click", () => { + navigateSlider(1); + }); + + // Create navigation container + const navigationContainer = document.createElement("div"); + navigationContainer.classList.add("navigation-container"); + block.appendChild(navigationContainer); + navigationContainer.appendChild(source); + // create buttons container + const buttonsContainer = document.createElement("div"); + buttonsContainer.classList.add("buttons-container"); + navigationContainer.appendChild(buttonsContainer); + // Append navigation buttons to the block + buttonsContainer.appendChild(prevButton); + buttonsContainer.appendChild(nextButton); + + // Slider navigation function + let currentIndex = 0; + const reviewsCount = reviews.length; + + function navigateSlider(direction) { + const currentReview = block.querySelector(".show"); + const nextIndex = (currentIndex + direction + reviewsCount) % reviewsCount; + const nextReview = reviewsContainer.children[nextIndex]; + + currentReview.classList.remove("show"); + currentReview.classList.add("hide"); + + nextReview.classList.remove("hide"); + nextReview.classList.add("show"); + + currentIndex = nextIndex; + } + window.dispatchEvent(new CustomEvent("shadowDomLoaded"), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); +} From be6eedace7244368695df7547c0fda6a08789b6d Mon Sep 17 00:00:00 2001 From: andserban Date: Thu, 7 Mar 2024 18:05:00 +0200 Subject: [PATCH 0265/1296] add Arial --- _src/blocks/awards/awards.css | 2 +- _src/blocks/bitdef-vs-brands/bitdef-vs-brands.css | 9 ++++++--- _src/blocks/tabs-component/tabs-component.css | 10 ++++++++++ .../testimonials-component/testimonials-component.css | 5 +++++ 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/_src/blocks/awards/awards.css b/_src/blocks/awards/awards.css index 1a7209d40..268c68997 100644 --- a/_src/blocks/awards/awards.css +++ b/_src/blocks/awards/awards.css @@ -144,7 +144,7 @@ } .awards-component h3 { - font-size: 32px !important; + font: normal normal bold 32px/38px Arial; } .awards-component h4 { diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css index 439ee7fe0..477d5e0e1 100644 --- a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css @@ -17,11 +17,11 @@ .bitdef-vs-brands-wrapper h2 { margin-top: 72px; margin-bottom: 57px; - font-size: 32px; + font: normal normal bold 32px/37px Arial; } .bitdef-vs-brands-wrapper h3 { margin-bottom: 6px; - font-size: 24px; + font: normal normal bold 24px Arial; } .bitdef-vs-brands-wrapper .row-2 { margin-bottom: 22px; @@ -42,12 +42,14 @@ padding: 9px; margin-top: 8px; margin-bottom: 8px; + font: normal normal bold 14px/14px Arial; } .bitdef-vs-brands-wrapper table .grey-background p { background-color: #dedede; padding: 9px; margin-top: 8px; margin-bottom: 8px; + font: normal normal normal 14px/14px Arial; } .bitdef-vs-brands-wrapper table .blue-background p:nth-child(1) { width: 100%; @@ -84,11 +86,12 @@ .bitdef-vs-brands .row-2 > .column-0 { padding-bottom: 14px; + font: normal normal normal 14px/18px Arial; } .bitdef-vs-brands .row-6 > .column-0 { padding-top: 14px; - font-size: 12px; + font: normal normal normal 12px/14px Arial; } @keyframes increaseWidth-row1 { diff --git a/_src/blocks/tabs-component/tabs-component.css b/_src/blocks/tabs-component/tabs-component.css index 1a288fb0c..ab949c63c 100644 --- a/_src/blocks/tabs-component/tabs-component.css +++ b/_src/blocks/tabs-component/tabs-component.css @@ -3,6 +3,16 @@ flex-direction: column; align-items: center; } +.tabs-component-container h3 { + font: normal normal bold 24px/28px Arial; +} +.tabs-component-container p { + font: normal normal normal 16px/24px Arial; +} +.tabs-component-container span { + font: normal normal bold 16px/18px Arial; +} + .tabs-component-container .title-class div { max-width: 630px; text-align: center; diff --git a/_src/blocks/testimonials-component/testimonials-component.css b/_src/blocks/testimonials-component/testimonials-component.css index e4fd0e7b4..79cdbcba9 100644 --- a/_src/blocks/testimonials-component/testimonials-component.css +++ b/_src/blocks/testimonials-component/testimonials-component.css @@ -4,6 +4,11 @@ align-items: center; font: italic normal normal 14px/19px Arial; } + +.testimonials-component-container h2 { + font: normal normal bold 32px/37px Arial; +} + .testimonials-component-container .testimonials-component { display: flex; flex-direction: column; From fa94bcd359ffe6df32aa3ae516e7a51d244c44de Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 7 Mar 2024 18:11:02 +0200 Subject: [PATCH 0266/1296] update --- .../blocks/testimonials-component/testimonials-component.css | 5 +---- _src/styles/styles.css | 4 ++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/_src/blocks/testimonials-component/testimonials-component.css b/_src/blocks/testimonials-component/testimonials-component.css index e4fd0e7b4..effb72a41 100644 --- a/_src/blocks/testimonials-component/testimonials-component.css +++ b/_src/blocks/testimonials-component/testimonials-component.css @@ -27,11 +27,8 @@ .testimonials-component-container .review-container { display: flex; align-items: flex-start; + flex: 1; gap: 2%; -} - -.testimonials-component-container .review-container { - display: flex; background: #edf9ff; padding: 26px 23px; border-radius: 16px; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 514a2d334..28a225295 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -611,6 +611,10 @@ main .section.bitdefender-ferrari .default-content-wrapper .button-container a.b padding: 60px 0; } + main .section.less-padding { + padding: 1em 0; + } + } @media (min-width: 1000px) { From dcbfeb534a9143c9e24cdd8d930dcc992c3b7eb7 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 7 Mar 2024 18:44:47 +0200 Subject: [PATCH 0267/1296] New change requests + testimonials --- _src/blocks/box-carousel/box-carousel.css | 66 ++++++++++++++++++++- _src/blocks/box-carousel/box-carousel.js | 24 +++++++- _src/icons/quote-left.svg | 1 + _src/scripts/template-factories/trusted.css | 2 +- 4 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 _src/icons/quote-left.svg diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index c93590000..270b5f220 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -61,6 +61,19 @@ flex-shrink: 0; } +.box-carousel-container.testimonials .carousel-item { + width: 300px; + height: 300px; + display: flex; + flex-direction: column; + padding-left: 40px; +} + +.box-carousel-container.testimonials .carousel-item { + border: white; + background: white; +} + .box-carousel-container .carousel-item:first-child { margin-left: 0; } @@ -76,6 +89,28 @@ margin: 8px 0; } +.box-carousel-container.testimonials .carousel-item { + position: relative; +} + +.box-carousel-container.testimonials .carousel-item .title { + font: italic normal normal 14px/21px "IBM Plex Sans", sans-serif; + -webkit-line-clamp: 6; + line-clamp: 6; +} + +.box-carousel-container.testimonials .carousel-item:before { + content: ''; + position: absolute; + display: block; + background: url(../../icons/quote-left.svg) no-repeat; + background-size: cover; + width: 20px; + height: 20px; + top: 85px; + left: 15px; +} + .box-carousel-container .carousel-item .subtitle { font: normal normal normal 12px/15px "IBM Plex Sans", sans-serif; letter-spacing: 0; @@ -86,6 +121,22 @@ -webkit-box-orient: vertical; } +.box-carousel-container.testimonials .carousel-item .subtitle-secondary { + font: normal normal bold 14px/21px "IBM Plex Sans", sans-serif; + margin-top: auto; + position: relative; +} + +.box-carousel-container.testimonials .carousel-item .subtitle-secondary:before { + content: ''; + display: block; + position: absolute; + width: 40px; + height: 1px; + background: black; + top: -5px; +} + .box-carousel-container .left-arrow svg { transform: rotate(180deg); } @@ -117,6 +168,15 @@ fill: var(--blue) !important; } +.box-carousel-container.testimonials .img-container { + height: 60px; + width: 100%; +} + +.box-carousel-container.testimonials .img-container img { + object-fit: contain; +} + @media screen and (min-width: 768px) { .box-carousel-container .carousel-header { @@ -141,6 +201,10 @@ font: normal normal normal 18px/23px "IBM Plex Sans", sans-serif; } + .box-carousel-container.testimonials .carousel-item .subtitle { + font: normal normal normal 12px/15px "IBM Plex Sans", sans-serif; + } + .box-carousel-container .carousel-header .title h2, .box-carousel-container .carousel-header .title h3, .box-carousel-container .carousel-header .title h4 { @@ -149,7 +213,7 @@ } @media screen and (min-width: 992px) { - .box-carousel-container .carousel-item:hover { + .box-carousel-container:not(.testimonials) .carousel-item:hover { color: white; background: #006dff; box-shadow: 0 3px 40px #006EFFF2; diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js index 47a775ad0..6cea12482 100644 --- a/_src/blocks/box-carousel/box-carousel.js +++ b/_src/blocks/box-carousel/box-carousel.js @@ -6,6 +6,8 @@ export default async function decorate(block) { const [titleEl, ...slides] = [...block.children]; let currentSlideIndex = 0; + const isTestimonials = block.closest('.section').classList.contains('testimonials'); + const carouselItemStyle = { margin: 20, }; @@ -114,13 +116,29 @@ export default async function decorate(block) { diff --git a/_src/icons/quote-left.svg b/_src/icons/quote-left.svg new file mode 100644 index 000000000..a98b2aa46 --- /dev/null +++ b/_src/icons/quote-left.svg @@ -0,0 +1 @@ + diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 7db0a7550..f4681938f 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -362,7 +362,7 @@ main .section.link-right a { .trusted .section.static-awards .default-content-wrapper > * { margin: 0; - width: calc((100% - 99px) / 4); + width: calc((100% - 66px) / 3); height: calc((100% / 2) - 16px); } From 2edd2d5da590e1ceb14d72f0d6850f9ad842c072 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 7 Mar 2024 18:50:51 +0200 Subject: [PATCH 0268/1296] New change requests + testimonials --- _src/blocks/box-carousel/box-carousel.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 270b5f220..190edb340 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -72,6 +72,7 @@ .box-carousel-container.testimonials .carousel-item { border: white; background: white; + position: relative; } .box-carousel-container .carousel-item:first-child { @@ -89,10 +90,6 @@ margin: 8px 0; } -.box-carousel-container.testimonials .carousel-item { - position: relative; -} - .box-carousel-container.testimonials .carousel-item .title { font: italic normal normal 14px/21px "IBM Plex Sans", sans-serif; -webkit-line-clamp: 6; From 9861cc5484fd157aa633b53ed06757553988e3c8 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 7 Mar 2024 18:52:20 +0200 Subject: [PATCH 0269/1296] New change requests + testimonials --- _src/blocks/box-carousel/box-carousel.css | 9 +++------ _src/blocks/dual-teaser/dual-teaser.css | 2 +- _src/blocks/trusted-hero/trusted-hero.css | 4 ++-- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/_src/blocks/box-carousel/box-carousel.css b/_src/blocks/box-carousel/box-carousel.css index 190edb340..b8d9b6afd 100644 --- a/_src/blocks/box-carousel/box-carousel.css +++ b/_src/blocks/box-carousel/box-carousel.css @@ -67,9 +67,6 @@ display: flex; flex-direction: column; padding-left: 40px; -} - -.box-carousel-container.testimonials .carousel-item { border: white; background: white; position: relative; @@ -96,11 +93,11 @@ line-clamp: 6; } -.box-carousel-container.testimonials .carousel-item:before { +.box-carousel-container.testimonials .carousel-item::before { content: ''; position: absolute; display: block; - background: url(../../icons/quote-left.svg) no-repeat; + background: url("../../icons/quote-left.svg") no-repeat; background-size: cover; width: 20px; height: 20px; @@ -124,7 +121,7 @@ position: relative; } -.box-carousel-container.testimonials .carousel-item .subtitle-secondary:before { +.box-carousel-container.testimonials .carousel-item .subtitle-secondary::before { content: ''; display: block; position: absolute; diff --git a/_src/blocks/dual-teaser/dual-teaser.css b/_src/blocks/dual-teaser/dual-teaser.css index f0974c4ed..23a27d624 100644 --- a/_src/blocks/dual-teaser/dual-teaser.css +++ b/_src/blocks/dual-teaser/dual-teaser.css @@ -51,7 +51,7 @@ padding: 10px; background: #003b89a3 0 0 no-repeat padding-box; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); + backdrop-filter: blur(30px); display: flex; flex-direction: column; border-bottom-right-radius: 10px; diff --git a/_src/blocks/trusted-hero/trusted-hero.css b/_src/blocks/trusted-hero/trusted-hero.css index 5b1c814f0..ee5296581 100644 --- a/_src/blocks/trusted-hero/trusted-hero.css +++ b/_src/blocks/trusted-hero/trusted-hero.css @@ -70,14 +70,14 @@ order: -1; } -.trusted-hero-container a.button:any-link:not(.modal):not(.primary) { +.trusted-hero-container a.button:any-link:not(.modal, .primary) { border: solid white 2px !important; width: 100%; justify-content: center; } @media (min-width: 768px) { - .trusted-hero-container a.button:any-link:not(.modal):not(.primary) { + .trusted-hero-container a.button:any-link:not(.modal, .primary) { width: unset; justify-content: unset; display: inline-flex; From 2cd4f1916db509dc4b750a75b6e8f1bc5955ee9c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 7 Mar 2024 19:43:09 +0200 Subject: [PATCH 0270/1296] Updates --- _src/blocks/awards/awards.css | 13 +++++++++---- _src/blocks/money-back/money-back.css | 12 ++++++++++-- .../testimonials-component.css | 7 +++++++ _src/styles/styles.css | 4 ++++ 4 files changed, 30 insertions(+), 6 deletions(-) diff --git a/_src/blocks/awards/awards.css b/_src/blocks/awards/awards.css index 268c68997..255efd795 100644 --- a/_src/blocks/awards/awards.css +++ b/_src/blocks/awards/awards.css @@ -64,11 +64,15 @@ gap: 4.5%; } +.awards-component > div:nth-child(3) div img { + min-height: 56px; + height: auto; +} + @media (min-width: 580px) { .awards-component > div:nth-child(3) div { - width: 85%; + width: 768px; flex-wrap: nowrap; - gap: 3%; } } @@ -148,8 +152,9 @@ } .awards-component h4 { - font: normal normal normal 18px/21px Arial; - font-size: 18px; + font-size: 20px; + font-weight: normal; + line-height: 25px; margin-bottom: 35px; } } diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index 45a04dfa2..06a26fd1f 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -27,9 +27,11 @@ list-style: none; margin: 0; padding: 0; - display: inline-block; + display: flex; + align-items: center; + justify-content: center; } - + .money-back > ul > li { display: inline-block; padding: 8px; @@ -95,6 +97,12 @@ fill: #006EFF; } + .money-back img { + height: 55px; + margin-bottom: 9px; + fill: #006EFF; + } + @media (max-width: 991px) { /* mobile/tablet */ .money-back-wrapper { padding: var(--body-padding); diff --git a/_src/blocks/testimonials-component/testimonials-component.css b/_src/blocks/testimonials-component/testimonials-component.css index 2a812fef2..def3d03fc 100644 --- a/_src/blocks/testimonials-component/testimonials-component.css +++ b/_src/blocks/testimonials-component/testimonials-component.css @@ -38,6 +38,9 @@ padding: 26px 23px; border-radius: 16px; } +.testimonials-component-container.grey-bck .review-container { + background-color: #F6F6F6;; +} .testimonials-component-container hr { margin-left: 0; width: 24px; @@ -51,6 +54,10 @@ width: 90%; margin-top: 0px; } +.testimonials-component-container.grey-bck .review p { + font-size: 14px; + font-style: normal; +} .testimonials-component-container .hide { display: none; } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index e95acb19a..2e274d5c0 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -95,6 +95,10 @@ --cta-background-light-blue: var(--background-light-blue) } +.font-arial { + font-family: "Arial", sans-serif; +} + body [data-mobile-detector] { display: block; } From 7d7128a576a3b6c9ed22e7348fca2a21b0412939 Mon Sep 17 00:00:00 2001 From: miordache Date: Fri, 8 Mar 2024 13:19:50 +0200 Subject: [PATCH 0271/1296] Update new-prod-boxes CSS styles --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 112 +++++++++++++++++- _src/blocks/new-prod-boxes/new-prod-boxes.js | 92 +++++++++----- 2 files changed, 170 insertions(+), 34 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 6e5de8f94..e048ebb83 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -2,6 +2,15 @@ .new-prod-boxes-container { padding-bottom: 0; } + +.new-prod-boxes-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} .new-prod-boxes-container .block { margin: 0 auto; padding: 0 15px; @@ -14,7 +23,6 @@ } .new-prod-boxes-container .block .prod_box .inner_prod_box { position: relative; - width: 100%; height: 100%; background-color: #F6F6F6; border-radius: 20px; @@ -163,14 +171,14 @@ .new-prod-boxes-container .block .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow::before { content: ""; margin: 0 5px 20px 0; - background: url("bitdefender.com/pages/icons/arrow-left-blue.png") no-repeat center transparent; + background: url("https://bitdefender.com/pages/icons/arrow-left-blue.png") no-repeat center transparent; width: 20px; height: 20px; background-size: 15px 12px; float: left; } .new-prod-boxes-container .block .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow_right .arrow-right { - background: url("bitdefender.com/pages/icons/arrow-right-solid.svg") no-repeat center transparent; + background: url("https://bitdefender.com/pages/icons/arrow-right-solid.svg") no-repeat center transparent; width: 20px; height: 20px; background-size: 15px 12px; @@ -219,7 +227,7 @@ color: white; border-radius: 20px; padding: 2px 21px 2px 7px; - background: url("bitdefender.com/pages/images/icons/individual.svg") center right 6px no-repeat #026DFF; + background: url("https://bitdefender.com/pages/images/icons/individual.svg") center right 6px no-repeat #026DFF; background-size: auto 12px; } .new-prod-boxes-container .block .prod_box .inner_prod_box .benefitsLists ul:nth-of-type(2) { @@ -232,15 +240,107 @@ box-shadow: 0 3px 7px 0 #C1C1C1; } +.new-prod-boxes-container .prod-oldprice { + font-size: 16px; + text-decoration: line-through; +} +.new-prod-boxes-container .prod-save { + color: #1C7928; + font-weight: bold; +} +.new-prod-boxes-container .prod-newprice { + font-size: 40px; + font-weight: bold; +} +.new-prod-boxes-container .newprice-container { + line-height: 1; +} +.new-prod-boxes-container .newprice-container sup { + position: relative; + top: -20px; +} + +.new-prod-boxes-container .button.primary { + font-size: 16px; + font-style: normal; + font-weight: 500; + -webkit-font-smoothing: antialiased; + display: block; + align-items: center; + box-sizing: border-box; + text-decoration: none; + padding: 10px 26px 8px 28px; + text-align: center; + cursor: pointer; + color: #fff; + background-color: #eb0000; + border: 2px solid #eb0000; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 8px; + height: fit-content; +} + +.new-prod-boxes-container p em a { + font-size: 16px; + font-style: normal; + font-weight: 500; + -webkit-font-smoothing: antialiased; + display: block; + align-items: center; + box-sizing: border-box; + text-decoration: none; + padding: 10px 26px 8px 28px; + text-align: center; + cursor: pointer; + color: #006EFF; + background-color: transparent; + border: 2px solid #006EFF; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 8px; + height: fit-content; +} + @media (width >= 768px) { .new-prod-boxes-container .block { flex-direction: row; - padding: 0; + padding: 60px 0; } .new-prod-boxes-container .block .prod_box.hasGreenTag { margin-top: 1em; } .new-prod-boxes-container .block .prod_box .inner_prod_box { - width: 92%; + width: 74%; + } +} + +@media (width >= 992px) { + .new-prod-boxes-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } +} + +@media (width >= 1200px) { + .new-prod-boxes-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } + + .new-prod-boxes-container .block .prod_box .inner_prod_box { + width: 84%; + } +} + +@media (width >= 1600px) { + .new-prod-boxes-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; } } \ No newline at end of file diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index fbe24e84f..75b63fddb 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,33 +1,69 @@ -// import { productAliases } from '../../scripts/scripts.js'; -// import { updateProductsList } from '../../scripts/utils.js'; +/* eslint-disable prefer-const */ +/* eslint-disable no-undef */ +/* eslint-disable max-len */ +async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink) { + const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, 'consumer')]); + const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); + const price = storeOption.getPrice(); + const discountedPrice = storeOption.getDiscountedPrice(); + const discount = storeOption.getDiscount('valueWithCurrency'); + const buyLink = await storeOption.getStoreUrl(); + window.adobeDataLayer.push({ + event: 'product loaded', + product: [{ + info: { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription('months'), + version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', + basePrice: storeOption.getPrice('value'), + discountValue: storeOption.getDiscount('value'), + discountRate: storeOption.getDiscount('percentage'), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), + }, + }], + }); + const priceElement = document.createElement('div'); + priceElement.classList.add('hero-aem__prices'); + priceElement.innerHTML = ` +
    +
    + ${price} + ${saveText} ${discount} +
    +
    + ${discountedPrice} + ${conditionText} +
    +
    `; + buylink.href = buyLink; + return priceElement; +} export default function decorate(block, options) { const { products, priceType, } = options ? options.metadata : block.closest('.section').dataset; - console.log(block); const aemContainer = block.children[1]; - console.log(aemContainer); - aemContainer.classList.add('hero-aem-container'); + aemContainer.classList.add('new-prod-boxes-container'); aemContainer.classList.add('we-container'); const underShadow = aemContainer.children[0]; - console.log(underShadow); + underShadow.classList.add('block'); const productsAsList = products && products.split(','); if (productsAsList.length) { // productsAsList.forEach((prod) => updateProductsList(prod)); - [...underShadow.children].forEach((prod, key) => { - console.log('prod', prod, key); + [...underShadow.children].forEach(async (prod, key) => { const [greenTag, title, blueTag, subtitle, saveOldPrice, price, billed, buyLink, undeBuyLink, benefitsLists] = [...prod.querySelectorAll('tr')]; // const [prodName, prodUsers, prodYears] = productsAsList[key].split('/'); - const onSelectorClass = `tsmd-10-1`; - - [...block.children][key].innerHTML = ''; + const onSelectorClass = 'tsmd-10-1'; + const [prodName, prodUsers, prodYears] = productsAsList[key].split('/'); const featuresSet = benefitsLists.querySelectorAll('table'); - console.log('featuresSet', featuresSet); const featureList = Array.from(featuresSet).map((table) => { const trList = Array.from(table.querySelectorAll('tr')); @@ -70,7 +106,13 @@ export default function decorate(block, options) { title.innerHTML = `${title.querySelector('tr a').innerHTML}`; } - block.innerHTML += ` + const buyLinkSelector = prod.querySelector('a[href*="#buylink"]'); + buyLinkSelector.classList.add('button', 'primary'); + let priceElement = await createPricesElement(options.store, '1 year', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) + .then((pricesBox) => { + console.log(pricesBox); + // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + prod.outerHTML = `
    ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} @@ -79,34 +121,28 @@ export default function decorate(block, options) { ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''}
    - ${saveOldPrice.innerText.trim() && `
    - - - ${Array.from(saveOldPrice.querySelectorAll('td'))[1].innerText.replace('0%', ``)} - -
    `} - - ${price.innerText.trim() && `
    - - ${price.innerText.trim().replace('0', '')} -
    `} + ${pricesBox.outerHTML} ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} - ${buyLink.innerText.trim() && ``} + ${buyLink.outerHTML} ${undeBuyLink.innerText.trim() ? `` : ''}
    ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''}
    `; + }); }); } else { - block.innerHTML = ` + underShadow.innerHTML = `
    add some products
    `; } + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } From 9db1aba144f7b3af0acdc17f513b6ee9e531f8f4 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Fri, 8 Mar 2024 21:00:57 +0200 Subject: [PATCH 0272/1296] Updates on hero banner --- _src/blocks/hero/hero.css | 87 ++++++++++++++++++++++++--- _src/blocks/hero/hero.js | 9 +-- _src/blocks/money-back/money-back.css | 2 + 3 files changed, 87 insertions(+), 11 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 5c8ab7e83..1e2a6082a 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -102,7 +102,7 @@ main .hero { min-height: 300px; } -main .hero::after{ +main .hero::after { position: absolute; content: ""; left: 0; @@ -112,10 +112,32 @@ main .hero::after{ background-color: #e4f2ff; } +main .hero.new2024design::after { + display: none; +} + main .hero.black-background { background-color: var(--dark-background-color); } +main .hero.new2024design * { + font-weight: normal; + font-family: "IBM Plex Sans", sans-serif; + color: white; +} + +main .hero.new2024design .hero-picture { + display: none; +} + +main .hero.new2024design .hero-picture:last-of-type { + display: none; +} + +main .hero.new2024design strong { + font-weight: 600; +} + main .hero.black-background::after { content: none; background-color: transparent; @@ -141,6 +163,30 @@ main .hero .hero-content { position: relative; } +main .hero.new2024design .hero-content:last-of-type { + padding: 0 2em; +} + +main .hero.new2024design .hero-picture { + display: none; +} + +main .hero.new2024design h1 { + font-size: var(--hero-font-size-l); + margin: 0; +} + +main .hero .hero-content.hero-content { + padding: 0; + min-height: 0; +} + +main .hero .hero-content.hero-content img { + padding: 0; + border-radius: 10px; + object-fit: contain; +} + main .hero .hero-content .right-col { display: flex; justify-content: center; @@ -164,7 +210,6 @@ main .hero.comparison .hero-content { main .hero h1 { font-size: var(--hero-font-size-xl); margin: 0; - } main .hero h2 { @@ -240,7 +285,7 @@ main .hero p.button-container { gap: 2px; } -main .hero p.button-container.discount-bubble-container{ +main .hero p.button-container.discount-bubble-container { padding-top: 0; } @@ -264,7 +309,7 @@ main .hero a.button.modal { min-width: unset; } -@media (min-width: 1400px){ +@media (min-width: 1400px) { main .hero a.button { min-width: 360px; justify-content: center; @@ -280,7 +325,6 @@ main .hero a.button span.button-text { font-weight: var(--font-weight-bold); } - main .hero .discount-bubble { background: #2cb43d; border-radius: 50%; @@ -396,7 +440,7 @@ main .hero.black-background ul.hero-awards li::before { content: none; } -main .hero.black-background ul.hero-awards li picture img{ +main .hero.black-background ul.hero-awards li picture img { display: block; height: 80px; width: auto; @@ -406,11 +450,31 @@ main .hero .hero-awards li::after { content: none; } +@media(max-width: 989px) { + main .hero.new2024design { + background-color: #006FFF; + } + + main .hero.new2024design .hero-picture { + display: none; + } +} + @media(min-width: 767px) { /* tablet */ :root { --hero-h1-font-size: 42px; } + main .hero.new2024design h1 { + font-size: var(--hero-font-size-xl); + margin: 0; + } + + main .hero.new2024design * { + color: white; + background-color: transparent; + } + main .hero h2 { font-size: 20px; } @@ -426,11 +490,20 @@ main .hero .hero-awards li::after { } @media (min-width: 990px) { /* desktop */ - main .hero .hero-content > div { width: 60%; } + main .hero.new2024design .hero-content:last-of-type { + min-height: 430px; + padding: 2em; + } + + main .hero.new2024design .hero-picture { + display: block; + height: 430px; + } + main .hero .hero-content > div.left-col { width: 50%; } diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index d2e982feb..03a75f525 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -10,7 +10,7 @@ import { * Builds hero block and prepends to main in a new section. * @param {Element} element The container element */ -function buildHeroBlock(element) { +function buildHeroBlock(element, type) { const h1 = element.querySelector('h1'); const picture = element.querySelector('picture'); const pictureParent = picture ? picture.parentNode : false; @@ -28,9 +28,8 @@ function buildHeroBlock(element) { } const pictureEl = document.createElement('div'); - pictureEl.classList.add('hero-picture'); + pictureEl.classList.add('hero-picture', type === 'block-width' ? 'hero-content' : ''); pictureEl.append(picture); - section.prepend(pictureEl); pictureParent.remove(); @@ -69,7 +68,9 @@ createNanoBlock('discount', (code, variant) => { * @param {Element} block The hero block element */ export default async function decorate(block) { - buildHeroBlock(block); + const blockParent = block.closest('.section'); + const type = blockParent.dataset.type || ''; + buildHeroBlock(block, type); // Eager load images to improve LCP [...block.querySelectorAll('img')].forEach((el) => el.setAttribute('loading', 'eager')); diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index 06a26fd1f..f3eac77c4 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -30,6 +30,7 @@ display: flex; align-items: center; justify-content: center; + flex-direction: row; } .money-back > ul > li { @@ -111,6 +112,7 @@ .money-back > ul { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 14px; + flex-direction: column; } .money-back > ul > li { From 4160a7b7afb188170770e9c99b618872572fb808 Mon Sep 17 00:00:00 2001 From: miordache Date: Fri, 8 Mar 2024 21:07:21 +0200 Subject: [PATCH 0273/1296] Update new-prod-boxes styles and add icon decoration --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 32 +++++++- _src/blocks/new-prod-boxes/new-prod-boxes.js | 17 +++- _src/scripts/lib-franklin-api.js | 78 +++++++++++++++++++ 3 files changed, 123 insertions(+), 4 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index e048ebb83..88e59c15d 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -1,6 +1,7 @@ /* stylelint-disable */ .new-prod-boxes-container { padding-bottom: 0; + font-family: 'Arial', sans-serif; } .new-prod-boxes-container.we-container { @@ -66,7 +67,7 @@ background-color: #026DFF; display: inline-block; border-radius: 20px; - padding: 1px 12px; + padding: 6px 16px; } .new-prod-boxes-container .block .prod_box .inner_prod_box .blueTag div { display: flex; @@ -191,7 +192,7 @@ line-height: 17px; margin-bottom: 8px; list-style-type: none; - background: url("https://bitdefender.com/pages/images/icons/ok.png") top 2px left no-repeat transparent; + background: url("https://bitdefender.com/icons/circle-check-sharp-solid.svg") top 2px left no-repeat transparent; padding-left: 22px; background-size: 13px; position: relative; @@ -282,6 +283,17 @@ height: fit-content; } +.new-prod-boxes-container .button.primary:hover { + color: white; + background-color: #B10304; + border-color: #B10304; +} + +.new-prod-boxes-container .button.primary:active { + background-color: #920A0A; + border-color: #920A0A; +} + .new-prod-boxes-container p em a { font-size: 16px; font-style: normal; @@ -304,6 +316,22 @@ height: fit-content; } +.new-prod-boxes-container p em a:hover { + color: white; + background-color: #006DFF; +} + +.new-prod-boxes-container p em a:active { + background-color: #0D499B; +} + +.new-prod-boxes-container .icon svg { + width: 12px; + height: 14px; + padding-right: 2px; + fill: #fff; +} + @media (width >= 768px) { .new-prod-boxes-container .block { flex-direction: row; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 75b63fddb..e46ee7b15 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -35,7 +35,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName,
    ${discountedPrice} - ${conditionText} + ${conditionText || ''}
    `; buylink.href = buyLink; @@ -82,6 +82,19 @@ export default function decorate(block, options) { liClass += 'd-none'; } + // < reffers to '<' character + if (firstTdContent.indexOf('?pill') !== -1) { + let pillText = firstTdContent.match(/\?pill (\w+)/); + console.log('pillText', pillText, typeof pillText); + firstTdContent = firstTdContent.replace('<-', ''); + } + + // < reffers to '<' character + if (firstTdContent.indexOf('<pill') !== -1 || firstTdContent.indexOf('<') !== -1) { + liClass += ' has_arrow'; + firstTdContent = firstTdContent.replace('<-', ''); + } + // < reffers to '<' character if (firstTdContent.indexOf('<-') !== -1 || firstTdContent.indexOf('<') !== -1) { liClass += ' has_arrow'; @@ -108,7 +121,7 @@ export default function decorate(block, options) { const buyLinkSelector = prod.querySelector('a[href*="#buylink"]'); buyLinkSelector.classList.add('button', 'primary'); - let priceElement = await createPricesElement(options.store, '1 year', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) + await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) .then((pricesBox) => { console.log(pricesBox); // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index c3ff257cb..7e3218702 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -29,6 +29,81 @@ const updateLinkSources = (shadoRoot, origin) => { .forEach(image => image.src = new URL(image.getAttribute("src"), origin).href); }; +let ICONS_CACHE = {}; +async function decorateIcons(element) { + // Prepare the inline sprite + let svgSprite = element.getElementById('franklin-svg-sprite'); + if (!svgSprite) { + const div = document.createElement('div'); + div.innerHTML = ''; + svgSprite = div.firstElementChild; + element.append(div.firstElementChild); + } + console.log('decorateIcons', element, svgSprite) + + // Download all new icons + const icons = [...element.querySelectorAll('span.icon')]; + await Promise.all(icons.map(async (span) => { + const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); + if (!ICONS_CACHE[iconName]) { + ICONS_CACHE[iconName] = true; + try { + let dynamicIconsSharepointPath = '/icons/'; + // check for localhost + if (window.location.hostname === 'localhost') { + dynamicIconsSharepointPath = 'https://www.bitdefender.com/icons/'; + } + const response = await fetch(`${dynamicIconsSharepointPath}${iconName}.svg`); + if (!response.ok) { + ICONS_CACHE[iconName] = false; + return; + } + // Styled icons don't play nice with the sprite approach because of shadow dom isolation + const svg = await response.text(); + console.log('svg', svg) + if (svg.match(/( + + + + diff --git a/_src/images/appstore.webp b/_src/images/appstore.webp new file mode 100644 index 0000000000000000000000000000000000000000..029cf0a4785fa85575e41b5fb22980b8b02b6bd7 GIT binary patch literal 4174 zcmV-U5V7x4Nk&FS5C8yIMM6+kP&iCF5C8x#DFGG`wfKX!eVx<(|8_%Qm@o{LFk$GR z;{$bJio;kL8fbB^;BLj;t%3)4w>O#ucXxM!m6o)4gy{b9cs?K5JhP$u_C-prAXy?@ zKr}+Gt!>91eX)&-t<&1Johp@T+o+PUc>+0(sa&dbWzU`fi}Hnx)4hAQTyHJEx8j}| z@}cYP-MdFdPG?!9Z$uxPS@*)#Dr=c3!(!LGJhbpfvc$#84Ue6zG|ONe{iGc;WK;(O z&EU$#+LvehRIXII{#b36a_s1sEmJ6Cnl+aDeOST0a?M+3jisSu)_nS-B-d}3rYshV zPvZJlE^30=^Bd7FKW-K10?Wyj=#g~Hpucjp=Uf+f#;<>~QaR?3;_f^Dy;^#{*Tp1y z<`9e#eRy&2&T8GjEZWu@8_!nWh-=I|QpY;3w^!VIP@j3Eh6hjn%TaQbJnPT2*|2IO z8Ec4mX$@6!`k5O8?xX>GWjuUS-3q1BGIm`AH+6 z5i+W&f|meFsqQTR3aX(LAghO;KvAtFmKK!!8fvSFVw6%StGTFV@=?jGuBQz|wiA>u z#XN1QI0ZY^eG6IC*T$0L5V0${i5e7*>E#wry$NaE7;77cPu0}eCai5dvivC8bX1o9fqv-%xVyeo@n<$XA z2mnt!82oO4-Y%eAM+|pT-B{rq1wd9FeDRp!HX$t%&8F8u0jP}}4amry z!OtWzOJYv|hN7ojpt>7}126~^-Up<2iPU>;VP62A@vgjp$k*H@8DKN+BY}tX@(w`Y z7=XRYI1YfuxSkGBfUf{wFhO-uc|1LBW#NHC03-1r9RTH!4FN?3x*u=nZ>L1^E0~6p z0H}qp9ROI2k0iR{1@St-Time+A-cKoX1dQM0KH>41OWU(ssr9n4uG9MF+rgw0Il#m zTM`Y>TTV)r%mBo39ROQ#q>{c;T3PN`mkF9mX)tJ0q7$da&I5F4=NbVAYjV72x zEWiY9W5D~PWCyLiLu?*#r%T7__3JL2bP!r>tHo6;sn!QUidr3aiXfKK3+l zo(_=A_YUAy`2l!Bf6W0{jE~a*P*{M+S2@$cB-|-b8Ai*?6JG!ri+{-oIF1_u@h1ov ziw_IaK>^qB2#H+oFz64!NKDAeSk>{t8zb~!aMl-0NOE;8aMEiZUfhKL$PQE^+uH6L zk^%m|4AqgAx3Z^cJZHATuv4 z2S5Y-lMIF;839DoB19T&1pxNeqZn=ia$AG)vD^J-i~|_dW6B5y2URrE(u>+YmkcC} z>1B{6GJtY=-zW$G^0Q>6@W4`<9)J&7o&t!lMA{JWrH%%Bk%x|Aat#f1-_8R|Q39T| zHNX#Sp}bP0kWUBywvrdbhh@dS1pqB2>B-=0eRPr+@Rr!5WB}x0`H}#7{~ye($-ATAkw`pPn;n)rpONeAO6ewIlrF)xcs}3By0X zEIess2bcl6p*CalGY4#^kzHU0NX?x_2GB$mt-W~hqJ<>W5&tU}yB)UQ7SpuwzI%nw z`O`+A614D^+bA|>Dk|7609Ef=$KJg`CDi6k>1d%5Dz0TB#-em=_`N}68o9`p7B*4} z%f%#2K}CPDzJv`R8DCW>)`~{lB%^`M?jSuylkCJ4)I!nK^Dkug2}c7Qz^;_^iuu_- z+$Dg3^xAM^J1PR#X)p49M+@ zc=@uJR}wk3G}>$!rMWyL^rB*8W9X=}z^3>vcnQ58%ep5k6OW_KQxO)+7VIyYGB9)ydk{m54zN8LNn#>O+qoec`Y`7s=&S(BWl6?s&%n(8KKy%m%Q9siP ze-un#BgxVLz0*j}CD9+r!^R-Va3zkS@QDaA?x`1&;YvK_Eiza@;39cReTdS>DZHe3 z%@O}b7>HpCIEG|ByHFfJ7=|kKyvtvtbKJ;UtoqKry#ylD`Q_m`XE@m?azIRbxN~C`!mK zn&fh79Vv7M<$RuzWB~xO@*qqGW$QL1*^U&7IZA=#ZY8K?Cak2EM3VhM+0Hp6*^97; zLNieAf#g*Vl;DKqA5sZPjcA9wsVbw*Lh_ZKfXzr=mzK&;giCCxUix358n%NFU-$G8Y zJgM$vP9eFEQAQK;F$PeYCz8>TM(9Q;M`jhFHkIqtdN4*mAuGQ)twb9w3r|MqOR5_Q zTbGdB$|#eNyelu`U_O#8#|Rw=Rmp56R03cxxz2>e#u-m`qQXKJ#?Z(TFnSjxxllLp z%KhC&@*q8#UL>;dL~=g0Fq!p8x=X`Iy$N+0p(ddViDb?r>E|;5_K~v)Wk9Rih`&q| zcYVxw2at?*0QIFvvN)M3BpM^hPSoxvrxx*uqSTL3?=`$%|4jDR8BMJ*>v-g(UlsDNQ&*hV7{QAP`9p>8Wu7m59qo`pZWq z7n#hiAn7JvNaHUg@9QaHDUzH+B@Zt`DZ&AA7>Xn(Ff9%a3by<2gYow;An*E!Oez2wK$3ewGP_61HI$ozy#|gW$?l+d6iE)GQh*1NfqGF$ zZxsWQ3&9wXzaz;ZvQSAc8xsKD52m|fVEl9*liUH)W0B-^GURssG}Ff>24Y+?GUNqg zG}qC5K1ed61ew-IdOL2V8DdtsilQ4^N)rj(A!eCA0H7rUajB~E%J1bRBzcS-qrj05 zl6cmH@#s5Q6a=B-xi-S;9rO)J~)96;?<@+(g-@kPTxHuPOq{ zg#{8wE+=3Ff%Fkh(bJb;9P}bco@K)npaBnR*R0S*c_o$A#(%g<&0jwV&N+m9Nhjxx#?FWuX!foGEQ|%1Ng!r6-5J{(bf8-+t6OvC+*zzDWAmueah$by36OMTsSe0{KnP(jXRmEKgAYc4*7_)70%b`g2Pv12QY{9u*%j)KH-*I zd9I(ADaicsv87(Sw^%Hei<2vVEmV%Vqm;Q^oZPX9Zqv)H@vGd-8QJu=+Urw0xPr0#a40ob8z3H?v}s%q3h3;){0xhEEyLU=K62*`I$0ZAbq-F Y@8X72mpjh)%#zq}wqx}~$LSD@BCn}_=>Px# literal 0 HcmV?d00001 diff --git a/_src/images/playstore.webp b/_src/images/playstore.webp new file mode 100644 index 0000000000000000000000000000000000000000..dbe58b8b431707144340173f97949794a5e22cd8 GIT binary patch literal 5142 zcmV+x6zS_yNk&Ev6aWBMMM6+kP&iBi6aWA(E5Q{IO*n4bNRn(f3!qXQvf{6Z4 z0RLz=phMvICXntGo^@_l)!iRyC7w{#PD{eth9o{*RRxKo?>Nbs2PwsrLzfde1Gs~< zL6W*noDd}@GlO%YwM|>b&aC9&ljvca@lw*F{g*5lwT&dnn)mR>HqUbp2uoo~3xH81 zNs4m!m{CCc*LUv=!fd0VoIh2chtdBDpxkei;b-OKlmO9MPF?{*h&Hn7bP@z!I$Z%3 zphM^O2b|6q08k>M-_(YJwr!Y%KkWS>h=>W`zlUGccRVqI016W;>^B%XZKMq*HR}^~ zX_FSVZHFZ1`>Uq8wiVm9ZQD7r?IYW^ZQIt`w$bkT531_l?y8{TH|Br!#>re?Y}>fx z3IafY%01h*jWk-TZEWrjY}>YNyC%EIwk^8WwjJA}<9?ox$+DButc=PS+eXC=uxD!9 z)lA7faqTYF_x|s5OBDrx0HZf=Y0-At(vq^BkX7{q_NxBC_Lhul@9sXp_Dz5{?ElZX z@&C`M-PE>i+qP|UZF_6mUE8*8yS9~Fc)ecFX{WQZ?~AvoyPH=hWt!=;%x*fhQsW&F z6F>yO@p|HhQ=TV3MO+<%1woSk2p$Ci7XSM5TkyUz=P}lZJE-15YHvC(rl2YenCJ=% z{{|2c2qBE}Jiqd6#~3D#-R`2{V%i#^53a>M=#LyUA&`uqCMLvmsE-_fB|R?fslSBc zintON0)b`}OJE+M(hVvDS_3i^=MXw}KJO1yrD`2aT^?1_Y#MK_W?AlDrUFASk&P zgJBXih=hvhhoEE_h9g6yK~M&zpaf|UL3l)S7-ON9-hD&ty7#>M)`(i+6>$zph2yLn zi)Xf|*v55GY0-=yFWn(koL_ocBTe2c(dK;n{5`%voZ9*mZzw9IeC9>7V?lpu?j7BH z=n|he&=;mKb02VJ>Ch-gUE9l(WS61tR=phRQ^TmVj#d2eo6zi6S8ZigZ=lxTkFo(< zuDE<)V8zNyiePRwQtfVsQ+%(HnV3)?(@G0zDro$+9DeEV$C~X3f9% zUk`nIn31FPv7RbNkn)BQ#4I)H9-N*-b#HC_Mtm0J?lFlU$_N&Sce`RXbIp#$74=YA zm2{dV{F)MKX%^M2sN=5#C3tGtL?CL{J7xeJZ>4~HfYZBf`v5^3UQqDg-?yQ8>QXvx z1KMQyHC$g;z=H-^F;B-(S*qbCNRlQS(vk^o626?WM$aNcM0)N~L zIKF5UcD9DlipdmoaAMo^vIVD_B>=RvK-&Eho|CtO4an%^F|nbw%(s}rd%W)13C+ig z90ewI!DwIkLpIjfSD3eO0eItbTkq)R3P7riYbCru=#a(+q^0sn4XtFJ$pz2Vku!>^ zmG|Ofz=rYqb&$WtQ|rotKB)VDv^=NTB7o=9Zb7af=REHKDZCQKl!oRu7Lq*1Cvw`w zt`2bGtUNXha9*vjo;3zme=UEk2!w41z0mH4ZjO9v13;!EKqj6i$p%dT*^aFJo&AZ{*~vVbN&a#)J$Ul7iW+woF)-!1E434!=%lU|nl0XbDeYYx}vBQm$>SOYoYEx58Ton6TbgVB!=n z#f7P-L~!r)o0L+1cnyHp`tfrCDt&fvy4j&DfltX5q;UaW$qA#GTG0x#n(`8mrRuVr zjwpAZmnc0>0oGh@TLlUQ9;bNh{7fO(XRBWETZ!_y^U1$c>_~I|HZw%KFv9}5Lb!wk zHz0%GrnSJ5R;UC|iF%Afcn6|8P_>R>;ak18N(J+d`-f0?lsP29N=kl4XQc&nh9IBMdB1vex03 zhSnTS-FyN8hMfThzyO0Sxm4nkl%xTvvW$_!W*SP?|3lAXAG0FRup7uDf@zwuWPci$ zP@G(iVj=otJ7?2Sx&j<;wMb58(}M9Ij2yT?ajZN17{}yDXa*Pn1MC1mlWL&rboGLv zjxbz75&#l1)fZ(`F3IMcX8_KeM3pd>?Zq;Kxcl<8b{k0%21G|(O8?9z;YnaFi_{kb zKhCJI0CO(4M;KZf#HpOZfVdhS|fq?CJ>{%O4Xo(o7lc7~7;Zjig_V(p^H3;-nb_mGah zl5jxyb*Jo2@#&`{1EkO|nN8v;%z1zddxoN&{$)!C{yYy}hicM03ONw{W|JiW1{h!k z4M(l}yWRPXzjH4Eiu;->DDCG1u?YxF(6 zh00V)9K`d>k4Baf3emV&)W9CoUb|NB*iBw-K=iiRL*nHBaKS}#&>I*l^k4J8LkGcY z>KiG66McKFU7J*E^$lCmpYxIg1eqDmQh|JMl?iQhnSx;dCS`%?eQrT7%NlaffA;>! zu`9S}9nX`Wp`h7ZAz(5T=SbbOsDE2kE7CBOk(d8hq1g$oA`RlA`g^Xoa2@5^=m{=2C~wFR5xM8k$Ovfl$Cz3O9PtP3||H zZ@dB^;;KAO-NJFRAc4FC1x^5r8Kn>}n1_IEieh6>1P5QM7N;ko$t`NLqN0796=ouO zd3?0JqZ?$=Dv=8KMi;1?1Hs^Xq0MS27FMGg@ae~1lF%v=3B_;1ABcY$k`fd{t~$@l z7VxU+e8p0P&3xMK?nZ}9CHn>PHWWNOFae79#;^(Sl@4=Jj{iN--VmT)UO*9c0D$F} z$v^o5jQ&+Ieh$F&e|@94gEQi_;{uHP&SfINABF_?RoD{lIRbDy+R2*&ocfn&;Q$^X zYGVg3)K|-C1$yIY36MAcz}l^X@Jij{C+X!*@b)4+6opg0q-YFyAGLXJ??S+8-kBgwlC| z9&S0#U)g z0a5BgtYwOX(SYq3w}d00i2W%?&^?SC#=^c1GPP2QY$*zX#X+HBnz{KziU|fD-pl9-9tkl~NP^=yD8{9UM2M z-K&p&Z`;*waON}q0dgsJ0izx>G9Zy?YYX8|E5v>bNCC3MK64XJ^_XkU>4zO_`g!k+Z+YV?>XWKZgVyr0!&>hbVD ztFe4}O;|PCaVJ1d`uv$+Fx2(NDtl3Wayp9xO@}))0J6Km(vrY%2jgaFsP}D9UN&i%Mt|u54v;$-tVs^m>c+#2!M}(?gO?2uI^xYS>UA{HX?c_vVqTgXrBH_ zD9Ub_esz�RSrpJwF)(`(44p-r51}cz_NYzJ!=<;0!QorIA4b%HQNe$Od$T3X0lP z40_tTV{)LU3EsRl4sbvkWG@K3f-5jjfLTD0rA}a(CU7>W9s7z?z)Y!ypHLt>c-R1} zZw`GG!*v#Rj2i%sd^5>AN-Wg6cwKm{W~E6R}wzXq3hA6^?cyr&MScZhNRC2 zJO$%{jRFNDLBLm58|bG53IKmtzYKuLxwKM87uu==bA2A!umz)bJP!1!kLo6kO~Zg1 z%c8>fZyOs!@tb~i$p@ux;A%>i)Z-wn7eRj$yc{JSz?%OH?Jon2yBSt_z?zFS?1!D; z{ZDxusJB8RO9J3A*1QY0b-KnnHz8gHzEA9rYQqJ6j3ksD$huwSqQn~9Fbaxw1n$7- zwA=gHFf!%{0nTrr|E17wSsHqxfybkS14wdKYGiALvM=z;c5u3;PCu20N&-Eh+f)d7 zG^NVgw!jn#5=eKiU8O?-#CHSq-=$J2Z{VOi|M0{#TQIopYDJnS(Vl!1_FaHO&lw#g zTtbMwtE40pa1B%)PHA!_d|LBtf;;J!yjgbiI@4bi{gRz0Irw|`+DEocXJS* zhPi-OHo&3Iz^)f=N*X?5q5KX&hhJgHi-6}x)uMXkenev6@srts*L%D+J$^ZNs8X${ zCoG?=bzpAyVTaC?tsh2!E>lqsVzDVzdbU;U{}jV61OwThsmCEYtxxdfq~$2R5FPL+ z%9pS91RG3rISX*A9>D(}2f|+Z?$@(XKK33!t?xlfIpvg98YJsJ8xvsK`~@hV$D19S zECm8)1Un8^fuD9OPK`7^seof%)u;BVTtH&j4Z-@)2+C%|Ty4)PnI+75~OJz=(juEOw& zHU|y?eE5xxbKxngCj`0*Pdy>2NgJRgV{k^tT?g!K2O&nbHD34{ld zab006oc)+Z{R<0q#xV@viuUpRz;k|hUn8gLS96)AAqg<0)F)cb49zDe>t(|IzI*K| z%erfv1pF|~mjGYB>WBVPZEz+$WHkaXQ5tYDb=%p?+yVFh)$a<=ghKDB6fOnUM@*A< zO`s2cyvAkITBP#30g~P@fPpvZu%by^40s@z`t=|%`qBZw$~ywV+v`lzX2AaNVsVQL zF5O0@|09}{??Sgd^x6>c0I}^xfDgZNjh70Tdo?E6Q89wWlY*&G+SIBjs+MA;1Uzt@ zWks|drnxyVw)bN4fYUN6s>UxjV48zA1$6!*KG3jG!eDax+Q**7L`U4{1Hu0)0AV9o zmQ2BPZ|8r_B?Be`lQKyD$9Wqhd|`_i%^wu0DY+m<6a~YfGm#|XwF4r zRsk4 Date: Mon, 11 Mar 2024 16:20:57 +0200 Subject: [PATCH 0279/1296] Update max-width of prod_box to 400px --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 2 +- _src/blocks/new-prod-boxes/new-prod-boxes.js | 92 +++++++++++++------ 2 files changed, 66 insertions(+), 28 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index fef719fc6..f18640d9e 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -27,7 +27,7 @@ } .new-prod-boxes-container .new-prod-boxes .prod_box { flex: 1; - max-width: 300px; + max-width: 400px; margin: 0 14px; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box { diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 1813a086a..59d3b4c94 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -47,24 +47,30 @@ export default function decorate(block, options) { products, priceType, } = options ? options.metadata : block.closest('.section').dataset; console.log('my block', block); - const aemContainer = block.children[1]; - aemContainer.classList.add('new-prod-boxes-container'); - aemContainer.classList.add('we-container'); - const underShadow = aemContainer.children[1]; - underShadow.classList.add('block'); - - let switchBox = document.createElement('div'); - switchBox.classList.add('switchBox'); - switchBox.innerHTML = ` - -`; + + let underShadow = block; + // if options exists, this means the component is being called from aem + if (options) { + const aemContainer = block.children[1]; + aemContainer.classList.add('new-prod-boxes-container'); + aemContainer.classList.add('we-container'); + // eslint-disable-next-line prefer-destructuring + underShadow = aemContainer.children[1]; + underShadow.classList.add('block'); + } + + // let switchBox = document.createElement('div'); + // switchBox.classList.add('switchBox'); + // switchBox.innerHTML = ` + // + // `; const productsAsList = products && products.split(','); if (productsAsList.length) { @@ -127,16 +133,21 @@ export default function decorate(block, options) { }); if (title.innerHTML.indexOf('href') !== -1) { + console.log('title', title.innerHTML); title.innerHTML = `${title.querySelector('tr a').innerHTML}`; } const buyLinkSelector = prod.querySelector('a[href*="#buylink"]'); - buyLinkSelector.classList.add('button', 'primary'); - await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) - .then((pricesBox) => { - console.log(pricesBox); - // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); - prod.outerHTML = ` + if (buyLinkSelector) { + buyLinkSelector.classList.add('button', 'primary'); + } + + if (options) { + await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) + .then((pricesBox) => { + console.log(pricesBox); + // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); + prod.outerHTML = `
    ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} @@ -156,7 +167,35 @@ export default function decorate(block, options) { ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''}
    `; - }); + }); + } else { + fetchProduct() + .then((product) => { + console.log(product); + }) + .catch((err) => { + // eslint-disable-next-line no-console + console.error(err); + }); + prod.outerHTML = ` +
    +
    + ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} + ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} +
    + + ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} + + ${buyLink.outerHTML} + + ${undeBuyLink.innerText.trim() ? `` : ''} +
    + ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} +
    +
    `; + } }); } else { underShadow.innerHTML = ` @@ -165,8 +204,7 @@ export default function decorate(block, options) {
    `; } - underShadow.parentNode.insertBefore(switchBox, underShadow); - + // underShadow.parentNode.insertBefore(switchBox, underShadow); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, From a48b8d7881c3a66ea74cc32af4e252829af1fbb3 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 11:27:47 +0200 Subject: [PATCH 0280/1296] Update new-prod-boxes.css and new-prod-boxes.js --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 10 +- _src/blocks/new-prod-boxes/new-prod-boxes.js | 95 ++++++++++++------- 2 files changed, 68 insertions(+), 37 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index f18640d9e..d9d1f4dfe 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -169,8 +169,8 @@ color: black; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:first-of-type { - font-size: var(--body-font-size-xs); - line-height: var(--heading-font-size-s); + font-size: 16px; + line-height: 18px; text-decoration: none; list-style-type: none; font-weight: bold; @@ -187,7 +187,7 @@ float: left; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:first-of-type.has_arrow_right .arrow-right { - background: url("https://bitdefender.com/pages/icons/arrow-right-solid.svg") no-repeat center transparent; + background: url("https://bitdefender.com/icons/arrow-right-solid.svg") no-repeat center transparent; width: 20px; height: 20px; background-size: 15px 12px; @@ -291,6 +291,10 @@ height: fit-content; } +.new-prod-boxes-container .button.primary.no-arrow::after { + content: none; +} + .new-prod-boxes-container .button.primary:hover { color: white; background-color: #B10304; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 59d3b4c94..a8d637631 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,5 +1,6 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ + /* eslint-disable max-len */ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink) { const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, 'consumer')]); @@ -142,59 +143,85 @@ export default function decorate(block, options) { buyLinkSelector.classList.add('button', 'primary'); } + // create the prices element based on where the component is being called from, aem of www-websites if (options) { await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) .then((pricesBox) => { console.log(pricesBox); // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); prod.outerHTML = ` -
    -
    - ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} - ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} - ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} - ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} -
    +
    +
    + ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} + ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} +
    - ${pricesBox.outerHTML} + ${pricesBox.outerHTML} - ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} + ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} - ${buyLink.outerHTML} + ${buyLink.outerHTML} - ${undeBuyLink.innerText.trim() ? `` : ''} -
    - ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} -
    -
    `; + ${undeBuyLink.innerText.trim() ? `` : ''} +
    + ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} +
    +
    `; }); } else { + const { fetchProduct } = await import('../../scripts/utils/utils.js'); + let oldPrice; + let newPrice; + let discountPercentage; fetchProduct() .then((product) => { - console.log(product); + discountPercentage = Math.round( + (1 - (product.discount.discounted_price) / product.price) * 100, + ); + oldPrice = product.price; + newPrice = product.discount.discounted_price; + let currencyLabel = product.currency_label; + const priceElement = document.createElement('div'); + priceElement.classList.add('hero-aem__prices'); + priceElement.innerHTML = ` +
    +
    + ${oldPrice}${currencyLabel} + Save ${discountPercentage}% +
    +
    + ${newPrice}${currencyLabel} + +
    +
    `; + buyLink.querySelector('a').classList.add('button', 'primary', 'no-arrow'); + + prod.outerHTML = ` +
    +
    + ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} + ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} +
    + + ${priceElement.outerHTML} + ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} + + ${buyLink.innerHTML} + + ${undeBuyLink.innerText.trim() ? `` : ''} +
    + ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} +
    +
    `; }) .catch((err) => { // eslint-disable-next-line no-console console.error(err); }); - prod.outerHTML = ` -
    -
    - ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} - ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} - ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} - ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} -
    - - ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} - - ${buyLink.outerHTML} - - ${undeBuyLink.innerText.trim() ? `` : ''} -
    - ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} -
    -
    `; } }); } else { From 3f8e2424f9c0e2c2f71f8968496afbf437ec1396 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 11:41:35 +0200 Subject: [PATCH 0281/1296] Adjust particle component based on design feedback --- _src/blocks/particle-background/particle-background.css | 6 ++++-- _src/blocks/particle-background/particle-background.js | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/_src/blocks/particle-background/particle-background.css b/_src/blocks/particle-background/particle-background.css index 4a54cb389..edd745a4c 100644 --- a/_src/blocks/particle-background/particle-background.css +++ b/_src/blocks/particle-background/particle-background.css @@ -33,10 +33,12 @@ } .particle-background h2 { - font-size: 40px; - margin: 0; + font-size: clamp(1.5rem, 5vw, 2.5rem); + margin: 0 auto; + max-width: 600px; } .particle-background div { z-index: 1; + padding: 24px; } \ No newline at end of file diff --git a/_src/blocks/particle-background/particle-background.js b/_src/blocks/particle-background/particle-background.js index e04f0f4fc..46e956820 100644 --- a/_src/blocks/particle-background/particle-background.js +++ b/_src/blocks/particle-background/particle-background.js @@ -49,7 +49,7 @@ async function init(block) { const configs = { particles: { number: { - value: 30, + value: 20, }, color: { value: '#ffffff', @@ -72,7 +72,7 @@ async function init(block) { }, move: { enable: true, - speed: 2, + speed: 0.5, }, }, background: { From dbed8fb244038f1cf2d47ed3c75aba602e19cbcb Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 12:36:34 +0200 Subject: [PATCH 0282/1296] Update hero and new-prod-boxes styles --- _src/blocks/hero/hero.css | 6 ++++++ _src/blocks/new-prod-boxes/new-prod-boxes.css | 5 ++++- _src/blocks/new-prod-boxes/new-prod-boxes.js | 3 ++- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 085568408..ee8ac5ccd 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -458,6 +458,12 @@ main .hero .hero-awards li::after { } } +@media(max-width: 767px) { /* tablet */ + main .hero.new2024design .breadcrumb { + display: none; + } +} + @media(min-width: 767px) { /* tablet */ :root { --hero-h1-font-size: 42px; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index d9d1f4dfe..89d53bbb0 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -2,6 +2,7 @@ .new-prod-boxes-container { padding-bottom: 0; font-family: 'Arial', sans-serif; + margin: clamp(20px, 25px, 30px) 0; } .new-prod-boxes-container.we-container { @@ -24,11 +25,12 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; } .new-prod-boxes-container .new-prod-boxes .prod_box { flex: 1; max-width: 400px; - margin: 0 14px; + margin: 8px 14px; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box { position: relative; @@ -431,6 +433,7 @@ .new-prod-boxes-container .new-prod-boxes { flex-direction: row; padding: 60px 0; + align-items: initial; } /* .new-prod-boxes-container .new-prod-boxes .prod_box.hasGreenTag { margin-top: 1em; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index a8d637631..53d8540ba 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -45,6 +45,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, export default function decorate(block, options) { const { + // eslint-disable-next-line no-unused-vars products, priceType, } = options ? options.metadata : block.closest('.section').dataset; console.log('my block', block); @@ -175,7 +176,7 @@ export default function decorate(block, options) { let oldPrice; let newPrice; let discountPercentage; - fetchProduct() + fetchProduct(prodName, `${prodUsers}u-${prodYears}y`) .then((product) => { discountPercentage = Math.round( (1 - (product.discount.discounted_price) / product.price) * 100, From de39088c01fe6959026696e4317fe840f4b2c519 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 13:03:46 +0200 Subject: [PATCH 0283/1296] Update hero block styles and structure --- _src/blocks/hero/hero.css | 4 ++-- _src/blocks/hero/hero.js | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index ee8ac5ccd..b03ed3740 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -174,12 +174,12 @@ main .hero.new2024design h1 { margin: 0; } -main .hero .hero-content.hero-content { +main .hero.new2024design .hero-content.hero-content { padding: 0; min-height: 0; } -main .hero .hero-content.hero-content img { +main .hero.new2024design .hero-content.hero-content img { padding: 0; border-radius: 10px; object-fit: contain; diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index 03a75f525..c0752dcb2 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -28,7 +28,10 @@ function buildHeroBlock(element, type) { } const pictureEl = document.createElement('div'); - pictureEl.classList.add('hero-picture', type === 'block-width' ? 'hero-content' : ''); + pictureEl.classList.add('hero-picture'); + if (type === 'block-width') { + pictureEl.classList.add('hero-content'); + } pictureEl.append(picture); section.prepend(pictureEl); From 81a1df0426894b220798498f96f4aab21cbb6882 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 12 Mar 2024 13:35:08 +0200 Subject: [PATCH 0284/1296] awards band with link --- _src/scripts/template-factories/trusted.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index f4681938f..cb2ff5ad9 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -358,14 +358,27 @@ main .section.link-right a { flex-wrap: wrap; column-gap: 33px; align-items: center; + position: relative; } -.trusted .section.static-awards .default-content-wrapper > * { +.trusted .section.static-awards .default-content-wrapper > *:not(:first-child) { margin: 0; width: calc((100% - 66px) / 3); height: calc((100% / 2) - 16px); } +.trusted .section.static-awards .default-content-wrapper > *:first-child, +.trusted .section.static-awards .default-content-wrapper > *:first-child > a { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-indent: -9999px; + overflow: hidden; + white-space: nowrap; +} + .trusted .section.static-awards .default-content-wrapper > * img { height: 100%; width: 100%; From 804457401c022e2338a6848999a303ac6cdb5658 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 14:43:35 +0200 Subject: [PATCH 0285/1296] Update hero block styles and responsive design --- _src/blocks/hero/hero.css | 27 +++++++++++++++---- _src/blocks/hero/hero.js | 3 --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 2 +- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index b03ed3740..dd46fb53f 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -165,18 +165,33 @@ main .hero .hero-content { position: relative; } +main .hero.new2024design { + max-width: 1200px; + margin: auto; +} + main .hero.new2024design .hero-content:last-of-type { padding: 0 2em; } +main .hero.new2024design .hero-picture { + padding: 0; + min-height: 0; +} + +main .hero.new2024design .hero-picture img { + padding: 0; + border-radius: 10px; + object-fit: contain; +} + main .hero.new2024design h1 { font-size: var(--hero-font-size-l); margin: 0; } -main .hero.new2024design .hero-content.hero-content { - padding: 0; - min-height: 0; +main .hero.new2024design p { + font-size: 16px; } main .hero.new2024design .hero-content.hero-content img { @@ -451,6 +466,8 @@ main .hero .hero-awards li::after { @media(max-width: 989px) { main .hero.new2024design { background-color: #006FFF; + min-height: auto; + padding: 2em 0; } main .hero.new2024design .hero-picture { @@ -458,7 +475,7 @@ main .hero .hero-awards li::after { } } -@media(max-width: 767px) { /* tablet */ +@media(max-width: 991px) { /* tablet */ main .hero.new2024design .breadcrumb { display: none; } @@ -499,7 +516,7 @@ main .hero .hero-awards li::after { } main .hero.new2024design .hero-content:last-of-type { - min-height: 430px; + min-height: 360px; padding: 2em; } diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index c0752dcb2..11feb47be 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -29,9 +29,6 @@ function buildHeroBlock(element, type) { const pictureEl = document.createElement('div'); pictureEl.classList.add('hero-picture'); - if (type === 'block-width') { - pictureEl.classList.add('hero-content'); - } pictureEl.append(picture); section.prepend(pictureEl); diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 89d53bbb0..fc5a8886d 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -2,7 +2,7 @@ .new-prod-boxes-container { padding-bottom: 0; font-family: 'Arial', sans-serif; - margin: clamp(20px, 25px, 30px) 0; + margin: clamp(10px, 25px, 15px) 0; } .new-prod-boxes-container.we-container { From 510c82c765293c163ce8d7bf48137848199593b5 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 14:48:43 +0200 Subject: [PATCH 0286/1296] lint fixes --- _src/blocks/hero/hero.css | 4 ---- _src/blocks/hero/hero.js | 6 ++---- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +--- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index dd46fb53f..27b90f559 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -128,10 +128,6 @@ main .hero.new2024design * { color: white; } -main .hero.new2024design .hero-picture { - display: none; -} - main .hero.new2024design .hero-picture:last-of-type { display: none; } diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index 11feb47be..f76187d02 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -10,7 +10,7 @@ import { * Builds hero block and prepends to main in a new section. * @param {Element} element The container element */ -function buildHeroBlock(element, type) { +function buildHeroBlock(element) { const h1 = element.querySelector('h1'); const picture = element.querySelector('picture'); const pictureParent = picture ? picture.parentNode : false; @@ -68,9 +68,7 @@ createNanoBlock('discount', (code, variant) => { * @param {Element} block The hero block element */ export default async function decorate(block) { - const blockParent = block.closest('.section'); - const type = blockParent.dataset.type || ''; - buildHeroBlock(block, type); + buildHeroBlock(block); // Eager load images to improve LCP [...block.querySelectorAll('img')].forEach((el) => el.setAttribute('loading', 'eager')); diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 53d8540ba..366dca062 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -48,7 +48,6 @@ export default function decorate(block, options) { // eslint-disable-next-line no-unused-vars products, priceType, } = options ? options.metadata : block.closest('.section').dataset; - console.log('my block', block); let underShadow = block; // if options exists, this means the component is being called from aem @@ -79,6 +78,7 @@ export default function decorate(block, options) { // productsAsList.forEach((prod) => updateProductsList(prod)); [...underShadow.children].forEach(async (prod, key) => { + // eslint-disable-next-line no-unused-vars const [greenTag, title, blueTag, subtitle, saveOldPrice, price, billed, buyLink, undeBuyLink, benefitsLists] = [...prod.querySelectorAll('tr')]; // const [prodName, prodUsers, prodYears] = productsAsList[key].split('/'); const onSelectorClass = 'tsmd-10-1'; @@ -135,7 +135,6 @@ export default function decorate(block, options) { }); if (title.innerHTML.indexOf('href') !== -1) { - console.log('title', title.innerHTML); title.innerHTML = `${title.querySelector('tr a').innerHTML}`; } @@ -148,7 +147,6 @@ export default function decorate(block, options) { if (options) { await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector) .then((pricesBox) => { - console.log(pricesBox); // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); prod.outerHTML = `
    From c52a84b277ab1191caeea4a12ab46df7115c659b Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Tue, 12 Mar 2024 15:21:59 +0200 Subject: [PATCH 0287/1296] fix for system requirements component --- .../system-requirements.css | 24 ++++++++++++++++++- .../system-requirements.js | 16 ++++++------- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/_src/blocks/system-requirements/system-requirements.css b/_src/blocks/system-requirements/system-requirements.css index d3488a91b..b8401969f 100644 --- a/_src/blocks/system-requirements/system-requirements.css +++ b/_src/blocks/system-requirements/system-requirements.css @@ -88,8 +88,30 @@ transition: all 0.3s ease-in-out; } -.system-requirements-item .requirement p { +.system-requirements-item .requirement > ul { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + grid-gap: 24px; +} + +.system-requirements-item .requirement > ul > li { font: normal normal normal 12px/14px var(--body-font-family); + list-style: none; + display: inline-block; + padding-left: 0; +} + +.system-requirements-item .requirement > ul > li > br { + display: block; + margin-bottom: 14px; + content: " "; +} + +.system-requirements-item .requirement > ul > li > br:first-of-type { + margin: 0; } .system-requirements-item.expanded .requirement { diff --git a/_src/blocks/system-requirements/system-requirements.js b/_src/blocks/system-requirements/system-requirements.js index 320677e59..f741cd6cf 100644 --- a/_src/blocks/system-requirements/system-requirements.js +++ b/_src/blocks/system-requirements/system-requirements.js @@ -37,14 +37,14 @@ export default function decorate(block) { if (content) { content.classList.add('requirement'); // check if .accordion-item-content has a

    - const p = content.querySelector('p'); - // if it doesn't, add a

    and move the content inside - if (!p) { - const newP = document.createElement('p'); - newP.innerHTML = content.innerHTML; - content.innerHTML = ''; - content.appendChild(newP); - } + // const p = content.querySelector('ul li p'); + // // if it doesn't, add a

    and move the content inside + // if (!p) { + // const newP = document.createElement('p'); + // newP.innerHTML = content.querySelector('ul li').innerHTML; + // content.querySelector('ul li').innerHTML = ''; + // content.querySelector('ul li').appendChild(newP); + // } } if ([...block.classList].includes('action-only-on-header')) { From f07c9a0be155200d6b574e7a583eccd15ed5af16 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 12 Mar 2024 15:39:01 +0200 Subject: [PATCH 0288/1296] scale 2 logos --- _src/scripts/template-factories/trusted.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index cb2ff5ad9..ff7b02e43 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -367,6 +367,11 @@ main .section.link-right a { height: calc((100% / 2) - 16px); } +.trusted .section.static-awards .default-content-wrapper > *:nth-child(3) img, +.trusted .section.static-awards .default-content-wrapper > *:nth-child(6) img { + transform: scale(1.5); +} + .trusted .section.static-awards .default-content-wrapper > *:first-child, .trusted .section.static-awards .default-content-wrapper > *:first-child > a { position: absolute; @@ -641,6 +646,11 @@ main .section.link-right a { display: block; padding-left: 0; } + + .trusted .section.static-awards .default-content-wrapper > *:nth-child(3) img, + .trusted .section.static-awards .default-content-wrapper > *:nth-child(6) img { + transform: scale(2); + } } @media (width >= 768px) { From e350d92855d5083f27421c66c2339cf863ec236c Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 15:40:33 +0200 Subject: [PATCH 0289/1296] Add center alignment for links in new-prod-boxes.css --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index fc5a8886d..91512f044 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -13,6 +13,10 @@ margin-left: auto; margin-right: auto; } + +.new-prod-boxes-container .default-content-wrapper p:has(> a) { + text-align: center; +} .new-prod-boxes-container>h2 { text-align: center; font-size: 32px; From 051a57c020938d015516851884e65789fd04102d Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 15:40:43 +0200 Subject: [PATCH 0290/1296] lint --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 91512f044..80ce4cc15 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -17,6 +17,7 @@ .new-prod-boxes-container .default-content-wrapper p:has(> a) { text-align: center; } + .new-prod-boxes-container>h2 { text-align: center; font-size: 32px; From 1e863fb9e66a8fe0bb35f1f1361b17e004d1f1d8 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 16:05:58 +0200 Subject: [PATCH 0291/1296] Remove margin-top and margin-bottom from h2 in bitdef-vs-brands.css --- _src/blocks/bitdef-vs-brands/bitdef-vs-brands.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css index 4f479285f..5b7bd4c9c 100644 --- a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css @@ -17,8 +17,6 @@ } .bitdef-vs-brands-wrapper h2 { - margin-top: 72px; - margin-bottom: 57px; font: normal normal bold 32px/37px Arial, sans-serif; } From 34fea4250cd55cae5d59c8f9d2ab5f60dfdbf701 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 16:12:59 +0200 Subject: [PATCH 0292/1296] Update padding in new-prod-boxes.css --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 80ce4cc15..cb4f7fd0e 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -26,7 +26,7 @@ } .new-prod-boxes-container .new-prod-boxes { margin: 0 auto; - padding: 0 15px; + padding: 60px 15px; display: flex; flex-direction: column; justify-content: center; From 3fcd6e41122ecd9920d2a88d031f8ddbd6aed847 Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 16:16:07 +0200 Subject: [PATCH 0293/1296] Refactor font size and width in new-prod-boxes.css --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index cb4f7fd0e..abe0cc1b0 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -93,7 +93,7 @@ margin-top: -5px; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .subtitle { - font-size: 14px; + font-size: clamp(10px, 14px, 14px); font-family: Arial, sans-serif; margin-bottom: 0; line-height: 1.25; @@ -443,9 +443,7 @@ /* .new-prod-boxes-container .new-prod-boxes .prod_box.hasGreenTag { margin-top: 1em; } */ - .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box { - width: 74%; - } + } @media (width >= 992px) { @@ -454,6 +452,10 @@ padding-left: 50px; padding-right: 50px; } + + .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box { + width: 74%; + } } @media (width >= 1200px) { From e6b3148f934d53cd2cd94bf9584c0cdf077fa5ce Mon Sep 17 00:00:00 2001 From: miordache Date: Tue, 12 Mar 2024 17:01:24 +0200 Subject: [PATCH 0294/1296] remove console.log --- _src/scripts/lib-franklin-api.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 6ac7acb3f..7248e770c 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -39,7 +39,6 @@ async function decorateIcons(element) { svgSprite = div.firstElementChild; element.append(div.firstElementChild); } - console.log('decorateIcons', element, svgSprite) // Download all new icons const icons = [...element.querySelectorAll('span.icon')]; @@ -60,7 +59,6 @@ async function decorateIcons(element) { } // Styled icons don't play nice with the sprite approach because of shadow dom isolation const svg = await response.text(); - console.log('svg', svg) if (svg.match(/( diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index a3458e7bc..655af754a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -596,6 +596,12 @@ async function loadLazy(doc) { loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`); + const templateMetadata = getMetadata('template'); + const hasTemplate = getMetadata('template') !== ''; + if (hasTemplate) { + loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${templateMetadata}-lazy.css`); + } + loadTrackers(); sampleRUM('lazy'); diff --git a/_src/scripts/template-factories/trusted-lazy.css b/_src/scripts/template-factories/trusted-lazy.css new file mode 100644 index 000000000..5a726039b --- /dev/null +++ b/_src/scripts/template-factories/trusted-lazy.css @@ -0,0 +1,23 @@ +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../../fonts/ibm-plex-sans-300.woff2') format('woff2'); + font-style: normal; + font-weight: 300; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../../fonts/ibm-plex-sans-400.woff2') format('woff2'); + font-style: normal; + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../../fonts/ibm-plex-sans-500.woff2') format('woff2'); + font-style: normal; + font-weight: 500; + font-display: swap; +} diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index ff7b02e43..bac3f8611 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -624,10 +624,11 @@ main .section.link-right a { .trusted .section.particle-band { display: block; padding: 0; - background: #EFF6FF; + background: url("/_src/icons/particle-band.svg") no-repeat #EFF6FF; + height: 50px; } - .trusted .section.particle-band .default-content-wrapper{ + .trusted .section.particle-band .default-content-wrapper { width: 100%; max-width: 100%; padding: 0; diff --git a/head.html b/head.html index 121b0ef19..7fbd9b259 100644 --- a/head.html +++ b/head.html @@ -4,7 +4,3 @@ - - - - \ No newline at end of file From f688cf641075e2ef1a2c6f3d3f6b1c0106cde0cd Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 15:58:42 +0200 Subject: [PATCH 0322/1296] test header missing --- _src/styles/styles.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 2e274d5c0..5b2af2fb1 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1338,3 +1338,45 @@ main .section.blue a.button.modal::after { font-size: var(--heading-font-size-l) !important; } } + +/* //todo remove those from testing */ +header { + display: none !important; +} + +/*.section.static-awards {*/ +/* display: none !important;*/ +/*}*/ + +/*.section.particle-band {*/ +/* display: none !important;*/ +/*}*/ + +/*.section.columns-container {*/ +/* display: none !important;*/ +/*}*/ +/*.section.box-carousel-container {*/ +/* display: none !important;*/ +/*}*/ +/*.section.big-teaser-section-container {*/ +/* display: none !important;*/ +/*}*/ +/*.section.teaser-logos-container {*/ +/* display: none !important;*/ +/*}*/ +/*.section.video-container {*/ +/* display: none !important;*/ +/*}*/ +/*.section.apartnership_box {*/ +/* display: none !important;*/ +/*}*/ +/*.section.dual-teaser-container {*/ +/* display: none !important;*/ +/*}*/ +/*.section.black_bck.small-text {*/ +/* display: none !important;*/ +/*}*/ + +/*footer {*/ +/* display: none !important;*/ +/*}*/ From 153908fa3ec231fa07738bf689224b0fa3028faa Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 16:00:55 +0200 Subject: [PATCH 0323/1296] test header missing --- _src/styles/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 5b2af2fb1..7b1dcb2a9 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1340,7 +1340,8 @@ main .section.blue a.button.modal::after { } /* //todo remove those from testing */ -header { +header, +body > div:first-child { display: none !important; } From f9b153ce34f881b00df9ed64f0148ae3f3c6fbf2 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 16:08:31 +0200 Subject: [PATCH 0324/1296] remove header script --- _src/blocks/header/header.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 97dc5a745..3b1eb37dd 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -363,6 +363,7 @@ function renderMobileHeader(nav) { } export default async function decorate(block) { + return; const hero = document.querySelector('.hero'); // commented out because it's not being used, might be used in the future From 8c5b3b399316ca59045631cfdefad8759e7f79ce Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 17:31:36 +0200 Subject: [PATCH 0325/1296] preload video --- _src/blocks/trusted-hero/trusted-hero.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/_src/blocks/trusted-hero/trusted-hero.js b/_src/blocks/trusted-hero/trusted-hero.js index 51d436b6a..1bd9e8f67 100644 --- a/_src/blocks/trusted-hero/trusted-hero.js +++ b/_src/blocks/trusted-hero/trusted-hero.js @@ -9,6 +9,17 @@ export default async function decorate(block) { const blockDataset = getDatasetFromSection(block); const { videoPlayerSettings, videoPlayerPoster } = blockDataset; + function appendPreloadedVideo() { + const linkElement = document.createElement('link'); + linkElement.rel = 'preload'; + linkElement.as = 'video'; + linkElement.href = videoUrl; + linkElement.type = `video/${videoFormat}`; + document.head.prepend(linkElement); + } + + appendPreloadedVideo(); + const formattedVideoSettings = videoPlayerSettings .split(',') .map((item) => { From 846ca72ae8167bb734744942b1ff840f7a49be0e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 17:33:15 +0200 Subject: [PATCH 0326/1296] preload video --- _src/styles/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 7b1dcb2a9..2b2b3eb53 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1342,7 +1342,8 @@ main .section.blue a.button.modal::after { /* //todo remove those from testing */ header, body > div:first-child { - display: none !important; + /*display: none !important;*/ + height: 64px; } /*.section.static-awards {*/ From 002b80a8b5e56e954e511bee023f1c994f0d6027 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 17:33:48 +0200 Subject: [PATCH 0327/1296] added header again --- _src/blocks/header/header.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 3b1eb37dd..97dc5a745 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -363,7 +363,6 @@ function renderMobileHeader(nav) { } export default async function decorate(block) { - return; const hero = document.querySelector('.hero'); // commented out because it's not being used, might be used in the future From ce13c8b513bcd27996522001d01c1aa8a110599e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 17:54:17 +0200 Subject: [PATCH 0328/1296] added header again --- _src/blocks/trusted-hero/trusted-hero.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/_src/blocks/trusted-hero/trusted-hero.js b/_src/blocks/trusted-hero/trusted-hero.js index 1bd9e8f67..8fe271524 100644 --- a/_src/blocks/trusted-hero/trusted-hero.js +++ b/_src/blocks/trusted-hero/trusted-hero.js @@ -10,12 +10,19 @@ export default async function decorate(block) { const { videoPlayerSettings, videoPlayerPoster } = blockDataset; function appendPreloadedVideo() { - const linkElement = document.createElement('link'); - linkElement.rel = 'preload'; - linkElement.as = 'video'; - linkElement.href = videoUrl; - linkElement.type = `video/${videoFormat}`; - document.head.prepend(linkElement); + const linkVideoEl = document.createElement('link'); + const linkVideoPosterEl = document.createElement('link'); + linkVideoEl.rel = 'preload'; + linkVideoEl.as = 'video'; + linkVideoEl.href = videoUrl; + linkVideoEl.type = `video/${videoFormat}`; + + linkVideoPosterEl.rel = 'preload'; + linkVideoPosterEl.as = 'image'; + linkVideoPosterEl.href = videoPlayerPoster; + + document.head.prepend(linkVideoPosterEl); + document.head.prepend(linkVideoEl); } appendPreloadedVideo(); From 32d0455ce7e095db56a56b2781c07c216a024d3b Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 21 Mar 2024 18:16:04 +0200 Subject: [PATCH 0329/1296] removed comments --- _src/styles/styles.css | 39 --------------------------------------- 1 file changed, 39 deletions(-) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 2b2b3eb53..99e7b28d7 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1339,46 +1339,7 @@ main .section.blue a.button.modal::after { } } -/* //todo remove those from testing */ header, body > div:first-child { - /*display: none !important;*/ height: 64px; } - -/*.section.static-awards {*/ -/* display: none !important;*/ -/*}*/ - -/*.section.particle-band {*/ -/* display: none !important;*/ -/*}*/ - -/*.section.columns-container {*/ -/* display: none !important;*/ -/*}*/ -/*.section.box-carousel-container {*/ -/* display: none !important;*/ -/*}*/ -/*.section.big-teaser-section-container {*/ -/* display: none !important;*/ -/*}*/ -/*.section.teaser-logos-container {*/ -/* display: none !important;*/ -/*}*/ -/*.section.video-container {*/ -/* display: none !important;*/ -/*}*/ -/*.section.apartnership_box {*/ -/* display: none !important;*/ -/*}*/ -/*.section.dual-teaser-container {*/ -/* display: none !important;*/ -/*}*/ -/*.section.black_bck.small-text {*/ -/* display: none !important;*/ -/*}*/ - -/*footer {*/ -/* display: none !important;*/ -/*}*/ From 6f7ab52eac285f36dd7bebde1c95ea141776536c Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 21 Mar 2024 18:45:15 +0200 Subject: [PATCH 0330/1296] ab test product and solution component --- .../product-cards-ab/product-cards-ab.css | 245 ++++++++++++++++++ .../product-cards-ab/product-cards-ab.js | 172 ++++++++++++ .../solutions-cards-ab/solutions-cards-ab.css | 244 +++++++++++++++++ .../solutions-cards-ab/solutions-cards-ab.js | 124 +++++++++ _src/icons/checkmark-x-circle.svg | 1 + _src/scripts/lib-franklin.js | 2 +- 6 files changed, 787 insertions(+), 1 deletion(-) create mode 100644 _src/blocks/product-cards-ab/product-cards-ab.css create mode 100644 _src/blocks/product-cards-ab/product-cards-ab.js create mode 100644 _src/blocks/solutions-cards-ab/solutions-cards-ab.css create mode 100644 _src/blocks/solutions-cards-ab/solutions-cards-ab.js create mode 100644 _src/icons/checkmark-x-circle.svg diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css new file mode 100644 index 000000000..4d0572422 --- /dev/null +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -0,0 +1,245 @@ +@media (min-width: 992px) { /* desktop */ + .product-cards-ab-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (min-width: 1600px) { /* large desktop */ + .product-cards-ab-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} + +.product-cards-ab-wrapper { + background-color: #EDF9FF; + border-radius: 20px; +} + +.default-content-wrapper > h2 { + font: normal normal bold 28px/32px var(--body-font-family); + text-align: center; + margin-bottom: 21px; +} + +.product-cards-ab-wrapper > div:first-of-type { + text-align: center; +} + +.product-cards-ab-wrapper > div:first-of-type h3 { + padding-top: 52px; + font: normal normal bold 40px/45px var(--body-font-family); +} + +.product-cards-ab-wrapper > div:first-of-type h3 strong { + color: #006DFF; +} + +.product-cards-ab-wrapper > div:first-of-type h3 strong em { + color: #006DFF; + font-style: normal; +} + +.product-cards-ab-wrapper > div:first-of-type p { + font: normal normal normal 18px/21px var(--body-font-family); +} + +.product-cards-ab-wrapper > div:last-of-type { + text-align: center; + padding: 40px 0 57px; +} + +.product-cards-ab-wrapper > div:last-of-type p { + font: normal normal normal 12px/14px var(--body-font-family); +} + +.product-cards-ab-wrapper > div:last-of-type p .icon { + width: 14px; + height: 14px; + position: relative; + margin-right: 9px; + margin-bottom: 0; + top: 3px; + fill: #1C7928; +} + +.product-cards-ab-wrapper > div:last-of-type p a { + color: var(--text-color); + text-decoration: underline; +} + +.product-cards-ab-wrapper > div:last-of-type p a:hover { + color: var(--text-color); + text-decoration: none; +} + +.product-cards-ab.block { + display: grid; + justify-content: center; + align-items: center; + grid-template-columns: repeat(auto-fill, minmax(410px, 410px)); + grid-gap: 28px; +} + +.product-cards-ab.block > div { + padding: 28px; + background-color: white; + box-shadow: 0 3px 6px #00000029; + border: 3px solid #006DFF; + border-radius: 20px; +} + +.product-cards-ab.block .description { + position: relative; +} + +.product-cards-ab.block .description .icon { + width: 57px; + height: 37px; + position: absolute; + top: -48px; + right: 0; + fill: #006DFF; +} + +.product-cards-ab.block .product-info h2 { + font: normal normal bold 22px/24px var(--body-font-family); + margin-bottom: 14px; +} + +.product-cards-ab.block .product-info .protect { + font: normal normal normal 16px/32px var(--body-font-family); + border-bottom: 1px solid #D1D1D1; + padding-bottom: 14px; + margin-bottom: 14px; +} + +.product-cards-ab.block .product-info .description { + font: normal normal normal 12px/14px var(--body-font-family); +} + +.product-cards-ab.block .product-info .description strong { + color: #1D7928; + font-weight: bold; +} + +.product-cards-ab.block .product-info .buynow a { + font: normal normal bold 16px/20px var(--body-font-family); + margin-top: 24px; + padding: 14px 28px; + color: #fff; + background: #E72325; + border-radius: 10px; + display: block; + position: relative; + min-width: 180px; + text-align: center; + text-decoration: none; +} + +.product-cards-ab.block .product-info .buynow a:focus { + outline: 2px solid #48C1FF; + border-radius: 13px; + outline-offset: 2px; +} + +.product-cards-ab.block .product-info .buynow a:hover { + padding: 14px 28px; + background: #B10304; + color: #fff; +} + +.product-cards-ab.block .product-info .feature-list { + border-top: 1px solid #D1D1D1; + padding-top: 14px; + margin-top: 14px; +} + +.product-cards-ab.block .product-info .feature-list ul { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; +} + +.product-cards-ab.block .product-info .feature-list ul li { + font: normal normal normal 14px/32px var(--body-font-family); + margin: 0; + padding: 0; +} + +.product-cards-ab.block .product-info .feature-list ul li .icon { + width: 16px; + height: 16px; + position: relative; + margin-right: 9px; + margin-bottom: 0; + top: 3px; +} + +.product-cards-ab.block .product-info .feature-list ul li .icon.icon-x-circle svg { + fill: #999; +} + +.product-cards-ab.block .product-info .feature-list ul li del { + color: #999; +} + +.product-cards-ab.block .price-area .tab-buttons button { + font: normal normal bold 16px/28px var(--body-font-family); + padding: 7px 14px; + margin-right: 7px; + margin-bottom: 24px; + color: #2B6CF6; + background: #fff; + border: 2px solid #ECF5FE; + border-radius: 8px; + display: inline-block; + position: relative; + text-align: center; + text-decoration: none; + cursor: pointer; +} + +.product-cards-ab.block .price-area .tab-buttons button:hover { + background: #2B6CF6; + color: #fff; + border: 2px solid #2B6CF6; +} + +.product-cards-ab.block .price-area .tab-buttons button.active { + background: #2B6CF6; + color: #fff; + border: 2px solid #2B6CF6; +} + +.product-cards-ab.block .price-area .tab-content { + margin-bottom: 8px; +} + +.product-cards-ab.block .price-area .tab-content .tab-panel { + display: none; +} + +.product-cards-ab.block .price-area .tab-content .tab-panel .prod-oldprice { + text-align: left; + text-decoration: line-through; + font: normal normal normal 16px/18px var(--body-font-family); +} + +.product-cards-ab.block .price-area .tab-content .tab-panel .prod-save { + text-align: left; + font: normal normal bold 12px/14px var(--body-font-family); + padding: 3px 9px; + background: #1C7928 0% 0% no-repeat padding-box; + border-radius: 22px; + color: #fff; +} + +.product-cards-ab.block .price-area .tab-content .tab-panel .prod-newprice { + text-align: left; + font: normal normal bold 40px/45px var(--body-font-family); + color: #006DFF; +} \ No newline at end of file diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js new file mode 100644 index 000000000..2f2cfb699 --- /dev/null +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -0,0 +1,172 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; +// import { fetchProduct } from '../../scripts/utils/utils.js'; + +/* eslint-disable prefer-const */ +/* eslint-disable no-undef */ +/* eslint-disable max-len */ +export default function decorate(block, options) { + const { + // eslint-disable-next-line no-unused-vars + pid, + } = options ? options.metadata : block.closest('.section').dataset; + const firstRow = block.firstElementChild; + const lastRow = block.lastElementChild; + /* eslint-disable-next-line prefer-destructuring */ + const parentNode = block.parentNode; // Get the parent of the block + if (firstRow && parentNode) { + parentNode.insertBefore(firstRow, block); // Insert the first row before the block + } + if (lastRow && parentNode) { + parentNode.appendChild(lastRow); // Insert the last row after the block + } + const productCardsElement = document.querySelector('.product-cards-ab.block'); // Get the container element + const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container + + /* eslint-disable no-restricted-syntax */ + for (const table of tables) { + // Create a new div to replace the table + const productInfoDiv = document.createElement('div'); + productInfoDiv.classList.add('product-info'); + + // Process and replace table content: + const tableBody = table.querySelector('tbody'); // Get the table body + + // Handle remaining content (code, discount, buttons) + const heading = tableBody.querySelector('tr:first-child td').innerHTML; + const protect = tableBody.querySelector('tr:nth-child(2) td').innerHTML; + const productArea = tableBody.querySelector('tr:nth-child(3) td').innerHTML; + const code = tableBody.querySelector('tr:nth-child(4) td').innerHTML; + const buyNowButton = tableBody.querySelector('tr:nth-child(5) td').innerText; + const featureList = tableBody.querySelector('tr:nth-child(6) td').innerHTML; + + productInfoDiv.innerHTML = ` +

    ${heading}

    +
    ${protect}
    +
    ${productArea}
    +
    +
    +
    +
    +
    ${code}
    + +
    ${featureList}
    + `; + + // Replace the table with the new div structure + table.parentNode.replaceChild(productInfoDiv, table); + + const productsAsList = productArea.split(','); + const tabButtons = productInfoDiv.querySelector('.price-area .tab-buttons'); + const tabContent = productInfoDiv.querySelector('.price-area .tab-content'); + + productsAsList.forEach(async (prod) => { + const [prodName, prodUsers, prodYears] = prod.split('/'); + + const button = document.createElement('button'); + button.classList.add('tab-button'); + button.setAttribute('data-tab', `${prodName}`); + button.setAttribute('data-prodlink', `${prodName}/${prodUsers}/${prodYears}`); + // button.textContent = `${prodName}`; + tabButtons.appendChild(button); + + const { fetchProduct } = await import('../../scripts/utils/utils.js'); + + let oldPrice; + let newPrice; + let discountPercentage; + + // build pid for link + let pidLink = ''; + if (pid.length) { + pidLink = `pid.${pid}`; + } + + const tab = document.createElement('div'); + tab.classList.add('tab-panel'); + tab.setAttribute('id', `${prodName}`); + + fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) + .then((product) => { + discountPercentage = Math.round( + (1 - (product.discount.discounted_price) / product.price) * 100, + ); + oldPrice = product.price; + newPrice = product.discount.discounted_price; + let currencyLabel = product.currency_label; + tab.innerHTML = ` +
    + ${currencyLabel}${oldPrice} + ${discountPercentage}% OFF +
    +
    + ${currencyLabel}${newPrice} +
    `; + tabContent.appendChild(tab); + + // add discount value to component title + const discountXX = document.querySelector('.product-cards-ab-wrapper h3 strong em'); + const xx = document.createElement('em'); + xx.innerHTML = `${discountPercentage}%`; + discountXX.replaceWith(xx); + + // tabbed code + setTimeout(() => { + const tabButton = productInfoDiv.querySelectorAll('.tab-button'); + const tabPanel = productInfoDiv.querySelectorAll('.tab-panel'); + const buybutton = productInfoDiv.querySelector('.buy-button'); + // console.log(tabPanel); + + tabButton.forEach((buttonTab) => { + buttonTab.addEventListener('click', () => { + // Remove "active" class from all tab buttons + tabButton.forEach((tabB) => { + tabB.classList.remove('active'); + }); + + // Add "active" class to the clicked tab button + buttonTab.classList.add('active'); + + // Hide all tab panels + tabPanel.forEach((panel) => { + panel.style.display = 'none'; + }); + + // Show the selected tab panel + const tabId = buttonTab.getAttribute('data-tab'); + const selectedPanel = document.getElementById(tabId); + if (selectedPanel) { + selectedPanel.style.display = 'block'; + // replace href with correct buy link + const dataProdLink = buttonTab.dataset.prodlink; + buybutton.href = `/site/Store/buy/${dataProdLink}/${pidLink}`; + } + }); + + // Simulate click on the first tab button + if (tabButton.length > 0) { + tabButton[0].textContent = 'Yearly'; + tabButton[1].textContent = 'Monthly'; + tabButton[0].click(); + } + }); + }, 500); + }) + .catch((err) => { + // eslint-disable-next-line no-console + console.error(err); + }); + }); + } + + const elementsToRemove = document.querySelectorAll('.product_area'); + elementsToRemove.forEach((element) => { + element.remove(); + }); + + decorateIcons(block); + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); +} diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css new file mode 100644 index 000000000..645c2e283 --- /dev/null +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -0,0 +1,244 @@ +@media (min-width: 992px) { + /* desktop */ + .solutions-cards-ab-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (min-width: 1600px) { + /* large desktop */ + .solutions-cards-ab-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} + +.solutions-cards-ab-wrapper { + background-color: #EDF9FF; + border-radius: 20px; +} + +.default-content-wrapper > h2 { + font: normal normal bold 28px/32px var(--body-font-family); + text-align: center; + margin-bottom: 21px; +} + +.solutions-cards-ab-wrapper > div:first-of-type { + text-align: center; +} + +.solutions-cards-ab-wrapper > div:first-of-type h3 { + padding-top: 52px; + font: normal normal bold 40px/45px var(--body-font-family); +} + +.solutions-cards-ab-wrapper > div:first-of-type h3 strong { + color: #006DFF; +} + +.solutions-cards-ab-wrapper > div:first-of-type h3 strong em { + color: #006DFF; + font-style: normal; +} + +.solutions-cards-ab-wrapper > div:first-of-type p { + font: normal normal normal 18px/21px var(--body-font-family); +} + +.solutions-cards-ab-wrapper > div:last-of-type { + text-align: center; + padding: 40px 0 57px; +} + +.solutions-cards-ab-wrapper > div:last-of-type p { + font: normal normal normal 12px/14px var(--body-font-family); +} + +.solutions-cards-ab-wrapper > div:last-of-type p .icon { + width: 14px; + height: 14px; + position: relative; + margin-right: 9px; + margin-bottom: 0; + top: 3px; + fill: #1C7928; +} + +.solutions-cards-ab-wrapper > div:last-of-type p a { + color: var(--text-color); + text-decoration: underline; +} + +.solutions-cards-ab-wrapper > div:last-of-type p a:hover { + color: var(--text-color); + text-decoration: none; +} + +.solutions-cards-ab.block { + display: grid; + justify-content: center; + align-items: center; + grid-template-columns: repeat(auto-fill, minmax(410px, 410px)); + grid-gap: 28px; +} + +.solutions-cards-ab.block > div { + padding: 28px; + background-color: white; + box-shadow: 0 3px 6px #00000029; + border: 3px solid #006DFF; + border-radius: 20px; +} + +.solutions-cards-ab.block .description { + position: relative; +} + +.solutions-cards-ab.block .description .icon { + width: 57px; + height: 37px; + position: absolute; + top: -48px; + right: 0; + fill: #006DFF; +} + +.solutions-cards-ab.block .product-info h2 { + font: normal normal bold 22px/24px var(--body-font-family); + margin-bottom: 14px; +} + +.solutions-cards-ab.block .product-info .protect { + font: normal normal normal 16px/32px var(--body-font-family); + border-bottom: 1px solid #D1D1D1; + padding-bottom: 14px; + margin-bottom: 14px; +} + +.solutions-cards-ab.block .product-info .description { + font: normal normal normal 12px/14px var(--body-font-family); +} + +.solutions-cards-ab.block .product-info .description strong { + color: #1D7928; + font-weight: bold; +} + +.solutions-cards-ab.block .product-info .buynow a { + font: normal normal bold 16px/20px var(--body-font-family); + margin-top: 24px; + padding: 14px 28px; + color: #fff; + background: #E72325; + + /* border: 2px solid #006EFF; */ + border-radius: 10px; + display: block; + position: relative; + min-width: 180px; + text-align: center; + text-decoration: none; +} + +.solutions-cards-ab.block .product-info .learnmore a { + font: normal normal bold 16px/20px var(--body-font-family); + margin-top: 8px; + padding: 14px 28px; + color: #000; + background: #fff; + border: 2px solid #000; + border-radius: 10px; + display: block; + position: relative; + min-width: 180px; + text-align: center; + text-decoration: none; +} + +.solutions-cards-ab.block .product-info .buynow a:focus { + outline: 2px solid #48C1FF; + border-radius: 13px; + outline-offset: 2px; +} + +.solutions-cards-ab.block .product-info .buynow a:hover { + padding: 14px 28px; + background: #B10304; + color: #fff; +} + +.solutions-cards-ab.block .product-info .learnmore a:focus { + outline: 2px solid #48C1FF; + border-radius: 13px; + outline-offset: 2px; +} + +.solutions-cards-ab.block .product-info .learnmore a:hover { + padding: 14px 28px; + background: #000; + color: #fff; +} + +.solutions-cards-ab.block .product-info .feature-list { + border-bottom: 1px solid #D1D1D1; + padding-bottom: 14px; + margin-bottom: 14px; +} + +.solutions-cards-ab.block .product-info .feature-list ul { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; +} + +.solutions-cards-ab.block .product-info .feature-list ul li { + font: normal normal normal 14px/32px var(--body-font-family); + margin: 0; + padding: 0; +} + +.solutions-cards-ab.block .product-info .feature-list ul li .icon { + width: 16px; + height: 16px; + position: relative; + margin-right: 9px; + margin-bottom: 0; + top: 3px; +} + +.solutions-cards-ab.block .product-info .feature-list ul li .icon.icon-x-circle svg { + fill: #999; +} + +.solutions-cards-ab.block .product-info .feature-list ul li del { + color: #999; +} + +.solutions-cards-ab.block .price-area { + margin-bottom: 8px; +} + +.solutions-cards-ab.block .price-area .tab-panel .prod-oldprice { + text-align: left; + text-decoration: line-through; + font: normal normal normal 16px/18px var(--body-font-family); +} + +.solutions-cards-ab.block .price-area .tab-panel .prod-save { + text-align: left; + font: normal normal bold 12px/14px var(--body-font-family); + padding: 3px 9px; + background: #1C7928 0% 0% no-repeat padding-box; + border-radius: 22px; + color: #fff; +} + +.solutions-cards-ab.block .price-area .tab-panel .prod-newprice { + text-align: left; + font: normal normal bold 40px/45px var(--body-font-family); + color: #006DFF; +} \ No newline at end of file diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js new file mode 100644 index 000000000..ed413e249 --- /dev/null +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -0,0 +1,124 @@ +import { decorateIcons } from '../../scripts/lib-franklin.js'; +// import { fetchProduct } from '../../scripts/utils/utils.js'; + +/* eslint-disable prefer-const */ +/* eslint-disable no-undef */ +/* eslint-disable max-len */ +export default function decorate(block, options) { + const { + // eslint-disable-next-line no-unused-vars + pid, + } = options ? options.metadata : block.closest('.section').dataset; + const firstRow = block.firstElementChild; + const lastRow = block.lastElementChild; + /* eslint-disable-next-line prefer-destructuring */ + const parentNode = block.parentNode; // Get the parent of the block + if (firstRow && parentNode) { + parentNode.insertBefore(firstRow, block); // Insert the first row before the block + } + if (lastRow && parentNode) { + parentNode.appendChild(lastRow); // Insert the last row after the block + } + const productCardsElement = document.querySelector('.solutions-cards-ab.block'); // Get the container element + const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container + + /* eslint-disable no-restricted-syntax */ + for (const table of tables) { + // Create a new div to replace the table + const productInfoDiv = document.createElement('div'); + productInfoDiv.classList.add('product-info'); + + // Process and replace table content: + const tableBody = table.querySelector('tbody'); // Get the table body + + // Handle remaining content (code, discount, buttons) + const heading = tableBody.querySelector('tr:first-child td').innerHTML; + const protect = tableBody.querySelector('tr:nth-child(2) td').innerHTML; + const productArea = tableBody.querySelector('tr:nth-child(3) td').innerHTML; + const code = tableBody.querySelector('tr:nth-child(4) td').innerHTML; + const buyNowButton = tableBody.querySelector('tr:nth-child(5) td').innerText; + const featureList = tableBody.querySelector('tr:nth-child(6) td').innerHTML; + const learnMoreButton = tableBody.querySelector('tr:nth-child(7) td').innerHTML; + + productInfoDiv.innerHTML = ` +

    ${heading}

    +
    ${protect}
    +
    ${productArea}
    +
    ${featureList}
    +
    +
    ${code}
    + +
    ${learnMoreButton}
    + `; + + // Replace the table with the new div structure + table.parentNode.replaceChild(productInfoDiv, table); + + const productsAsList = productArea.split(','); + const tabContent = productInfoDiv.querySelector('.price-area'); + + productsAsList.forEach(async (prod) => { + const [prodName, prodUsers, prodYears] = prod.split('/'); + const { fetchProduct } = await import('../../scripts/utils/utils.js'); + + let oldPrice; + let newPrice; + let discountPercentage; + + // build pid for link + let pidLink = ''; + if (pid.length) { + pidLink = `pid.${pid}`; + } + + const tab = document.createElement('div'); + tab.classList.add('tab-panel'); + tab.setAttribute('id', `${prodName}`); + + fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) + .then((product) => { + discountPercentage = Math.round( + (1 - (product.discount.discounted_price) / product.price) * 100, + ); + oldPrice = product.price; + newPrice = product.discount.discounted_price; + let currencyLabel = product.currency_label; + tab.innerHTML = ` +
    + ${currencyLabel}${oldPrice} + ${discountPercentage}% OFF +
    +
    + ${currencyLabel}${newPrice} +
    `; + tabContent.appendChild(tab); + + // add discount value to component title + const discountXX = document.querySelector('.solutions-cards-ab-wrapper h3 strong em'); + const xx = document.createElement('em'); + xx.innerHTML = `${discountPercentage}%`; + discountXX.replaceWith(xx); + + // replace href with correct buy link + const buybutton = productInfoDiv.querySelector('.buy-button'); + buybutton.href = `/site/Store/buy/${prodName}/${prodUsers}/${prodYears}/${pidLink}`; + }) + .catch((err) => { + // eslint-disable-next-line no-console + console.error(err); + }); + }); + } + + const elementsToRemove = document.querySelectorAll('.product_area'); + elementsToRemove.forEach((element) => { + element.remove(); + }); + + decorateIcons(block); + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); +} diff --git a/_src/icons/checkmark-x-circle.svg b/_src/icons/checkmark-x-circle.svg new file mode 100644 index 000000000..ed5ad8c7d --- /dev/null +++ b/_src/icons/checkmark-x-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 21cf3651c..c1ec03090 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -202,7 +202,7 @@ export async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - const dynamicIconsSharepointPath = '/icons/'; + const dynamicIconsSharepointPath = '/common/icons/'; const response = await fetch(`${dynamicIconsSharepointPath}${iconName}.svg`); if (!response.ok) { ICONS_CACHE[iconName] = false; From 8c9de96cf0071f5b1e6fcf791cb360cafb15e326 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 22 Mar 2024 16:36:27 +0200 Subject: [PATCH 0331/1296] fix ab product cards --- _src/blocks/product-cards-ab/product-cards-ab.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 2f2cfb699..512fc6560 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -19,7 +19,7 @@ export default function decorate(block, options) { if (lastRow && parentNode) { parentNode.appendChild(lastRow); // Insert the last row after the block } - const productCardsElement = document.querySelector('.product-cards-ab.block'); // Get the container element + const productCardsElement = parentNode.querySelector('.product-cards-ab.block'); // Get the container element const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container /* eslint-disable no-restricted-syntax */ @@ -105,7 +105,7 @@ export default function decorate(block, options) { tabContent.appendChild(tab); // add discount value to component title - const discountXX = document.querySelector('.product-cards-ab-wrapper h3 strong em'); + const discountXX = parentNode.querySelector('.product-cards-ab-wrapper h3 strong em'); const xx = document.createElement('em'); xx.innerHTML = `${discountPercentage}%`; discountXX.replaceWith(xx); @@ -134,7 +134,7 @@ export default function decorate(block, options) { // Show the selected tab panel const tabId = buttonTab.getAttribute('data-tab'); - const selectedPanel = document.getElementById(tabId); + const selectedPanel = parentNode.querySelector(`#${tabId}`); if (selectedPanel) { selectedPanel.style.display = 'block'; // replace href with correct buy link @@ -159,7 +159,7 @@ export default function decorate(block, options) { }); } - const elementsToRemove = document.querySelectorAll('.product_area'); + const elementsToRemove = block.querySelectorAll('.product_area'); elementsToRemove.forEach((element) => { element.remove(); }); From 0d75151f0cd7f449693765927f7fc7ec02ee617f Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 22 Mar 2024 16:38:59 +0200 Subject: [PATCH 0332/1296] fix solutions card ab --- _src/blocks/solutions-cards-ab/solutions-cards-ab.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index ed413e249..0df884fd2 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -19,7 +19,7 @@ export default function decorate(block, options) { if (lastRow && parentNode) { parentNode.appendChild(lastRow); // Insert the last row after the block } - const productCardsElement = document.querySelector('.solutions-cards-ab.block'); // Get the container element + const productCardsElement = parentNode.querySelector('.solutions-cards-ab.block'); // Get the container element const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container /* eslint-disable no-restricted-syntax */ @@ -95,7 +95,7 @@ export default function decorate(block, options) { tabContent.appendChild(tab); // add discount value to component title - const discountXX = document.querySelector('.solutions-cards-ab-wrapper h3 strong em'); + const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); const xx = document.createElement('em'); xx.innerHTML = `${discountPercentage}%`; discountXX.replaceWith(xx); @@ -111,7 +111,7 @@ export default function decorate(block, options) { }); } - const elementsToRemove = document.querySelectorAll('.product_area'); + const elementsToRemove = block.querySelectorAll('.product_area'); elementsToRemove.forEach((element) => { element.remove(); }); From e1569efdbbb14319a7036a09ea7ddab43a1b2ba4 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 22 Mar 2024 16:48:02 +0200 Subject: [PATCH 0333/1296] product cards ab fix --- .../product-cards-ab/product-cards-ab.js | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 512fc6560..76a865877 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -9,12 +9,21 @@ export default function decorate(block, options) { // eslint-disable-next-line no-unused-vars pid, } = options ? options.metadata : block.closest('.section').dataset; - const firstRow = block.firstElementChild; - const lastRow = block.lastElementChild; + let underShadow = block; + if (options) { + const aemContainer = block.children[1]; + aemContainer.classList.add('product-cards-ab-container'); + aemContainer.classList.add('we-container'); + // eslint-disable-next-line prefer-destructuring + underShadow = aemContainer.children[1]; + underShadow.classList.add('block'); + } + const firstRow = underShadow.firstElementChild; + const lastRow = underShadow.lastElementChild; /* eslint-disable-next-line prefer-destructuring */ - const parentNode = block.parentNode; // Get the parent of the block + const parentNode = underShadow.parentNode; // Get the parent of the block if (firstRow && parentNode) { - parentNode.insertBefore(firstRow, block); // Insert the first row before the block + parentNode.insertBefore(firstRow, underShadow); // Insert the first row before the block } if (lastRow && parentNode) { parentNode.appendChild(lastRow); // Insert the last row after the block @@ -159,12 +168,12 @@ export default function decorate(block, options) { }); } - const elementsToRemove = block.querySelectorAll('.product_area'); + const elementsToRemove = underShadow.querySelectorAll('.product_area'); elementsToRemove.forEach((element) => { element.remove(); }); - decorateIcons(block); + decorateIcons(underShadow); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary From 8cb3a44f9319459a68b6774aa539e09e82d58d2f Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 16:48:32 +0200 Subject: [PATCH 0334/1296] add container --- _src/blocks/product-cards-ab/product-cards-ab.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 4d0572422..f208dc507 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -18,6 +18,15 @@ border-radius: 20px; } +.product-cards-ab-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + .default-content-wrapper > h2 { font: normal normal bold 28px/32px var(--body-font-family); text-align: center; From b5f6aee96408284c46637a8bb7f886bbcc91e5fa Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 16:53:05 +0200 Subject: [PATCH 0335/1296] add css --- .../product-cards-ab/product-cards-ab.css | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index f208dc507..bbe67394a 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -251,4 +251,28 @@ text-align: left; font: normal normal bold 40px/45px var(--body-font-family); color: #006DFF; -} \ No newline at end of file +} + +@media (width >= 992px) { + .product-cards-ab-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } + } + +@media (width >= 1200px) { + .product-cards-ab-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } + } + +@media (width >= 1600px) { + .product-cards-ab-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } + } \ No newline at end of file From f9e621a219e282c9d5be51d6311a959744d7c112 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 17:11:55 +0200 Subject: [PATCH 0336/1296] change we-container --- .../product-cards-ab/product-cards-ab.css | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index bbe67394a..eb0250518 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -19,12 +19,11 @@ } .product-cards-ab-container.we-container { - max-width: 100%; - padding-left: 20px; - padding-right: 20px; - margin-top: 15px; - margin-left: auto; - margin-right: auto; + margin: 0 auto; + max-width: 1332px; + padding: 0 20px; + position: relative; + width: 100% } .default-content-wrapper > h2 { @@ -255,24 +254,13 @@ @media (width >= 992px) { .product-cards-ab-container.we-container { - max-width: 1300px; - padding-left: 50px; - padding-right: 50px; + padding:0 20px } - } - -@media (width >= 1200px) { - .product-cards-ab-container.we-container { - max-width: 1332px; - padding-left: 20px; - padding-right: 20px; - } - } +} @media (width >= 1600px) { .product-cards-ab-container.we-container { - max-width: 1332px; - padding-left: 20px; - padding-right: 20px; + max-width:1300px; + padding: 0 50px; } } \ No newline at end of file From 4cbb1225d055e3dcb78481ce6e65b9dd211dd895 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 17:15:20 +0200 Subject: [PATCH 0337/1296] add css --- _src/blocks/product-cards-ab/product-cards-ab.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index eb0250518..a0d3741c6 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -252,13 +252,13 @@ color: #006DFF; } -@media (width >= 992px) { +@media (max-width: 992px) { .product-cards-ab-container.we-container { padding:0 20px } } -@media (width >= 1600px) { +@media (max-width: 1600px) { .product-cards-ab-container.we-container { max-width:1300px; padding: 0 50px; From 0b88ab73460b3e36890d92c2290e941eb2a6d451 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 17:23:45 +0200 Subject: [PATCH 0338/1296] add variables --- .../product-cards-ab/product-cards-ab.css | 70 +++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index a0d3741c6..a93d0fc0b 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -1,3 +1,73 @@ +.product-cards-ab-container { + --dark-background-color: #000; + --black-color: #000; + --white-color: #fff; + --background-color: #fff; + --link-color: #005ed9; + --link-hover-color: #00439c; + --button-link-color: #fff; + --button-background-color: #eb0000; + --button-hover-background-color: #d80000; + --button-primary-background-color: #000; + --button-primary-hover-background-color: #000; + --button-secondary-color: #000; + --button-secondary-hover-background-color: #000; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + --text-error-color: #f00; + --color-highlight-blue: #006dff; + --color-dark-gray: #616161; + --checkbox-label: #3c3c3c; + --highlight-light-blue: #f3f7fe; + --text-dark-color: #fff; + --horizontal-separator-color: #dedede; + --modal-background-color: rgb(0 0 0 / 50%); + --background-color-light-sky-blue: #e4f2ff; + --icon-color: #205fff; + --background-light-blue: #d9eeff; + --background-blue: #005ed9; + --dark-blue-tag: #005eff; + --light-blue-tag: #13b0a7; + --green-tag: #218728; + --dark-shadow: #0000001a; + --background-checkmark: #61AF53; + --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; + --heading-font-family: var(--body-font-family); + --fixed-font-family: var(--body-font-family); + --font-weight-thin: 300; + --font-weight-regular: 400; + --font-weight-bold: 500; + --font-weight-bolder: 600; + --font-weight-boldest: 700; + --font-weight-heavy: 900; + --body-font-size-l: 22px; + --body-font-size-m: 18px; + --body-font-size-s: 16px; + --body-font-size-xs: 14px; + --body-font-size-xxs: 12px; + --body-font-size-xxxs: 10px; + --heading-font-size-xxxl: 60px; + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + --heading-font-size-xxs: 16px; + --nav-height: 63px; + --nav-height-desktop: 40px; + --body-max-width: 1920px; + --body-padding: 20px; + --section-desktop-max-width: 1300px; + --section-desktop-padding: 20px; + --section-large-desktop-max-width: 1332px; + --section-large-desktop-padding: 50px; + --section-desktop-padding-vertical: 48px; + --section-mobile-padding-vertical: 32px; + --cta-background-light-blue: var(--background-light-blue); +} + @media (min-width: 992px) { /* desktop */ .product-cards-ab-wrapper { max-width: var(--section-desktop-max-width); From 3c71e8dfc5adbe06b5ef4a79c7c483fe79ad7b8a Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 23:24:18 +0200 Subject: [PATCH 0339/1296] BIG UPDATE, Update LibFranklinApi to better export a component --- .../product-cards-ab/product-cards-ab.css | 10 ++- .../product-cards-ab/product-cards-ab.js | 29 ++++----- _src/scripts/lib-franklin-api.js | 65 +++++++++++++++++-- 3 files changed, 81 insertions(+), 23 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index a93d0fc0b..d24c97b29 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -96,7 +96,12 @@ width: 100% } -.default-content-wrapper > h2 { +.product-cards-ab-container .icon svg { + width: 100%; + height: 100%; +} + +.product-cards-ab-container h2 { font: normal normal bold 28px/32px var(--body-font-family); text-align: center; margin-bottom: 21px; @@ -109,6 +114,7 @@ .product-cards-ab-wrapper > div:first-of-type h3 { padding-top: 52px; font: normal normal bold 40px/45px var(--body-font-family); + margin: 0; } .product-cards-ab-wrapper > div:first-of-type h3 strong { @@ -141,6 +147,7 @@ margin-bottom: 0; top: 3px; fill: #1C7928; + display: inline-block; } .product-cards-ab-wrapper > div:last-of-type p a { @@ -255,6 +262,7 @@ margin-right: 9px; margin-bottom: 0; top: 3px; + display: inline-block; } .product-cards-ab.block .product-info .feature-list ul li .icon.icon-x-circle svg { diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 76a865877..05d937de3 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -1,4 +1,4 @@ -import { decorateIcons } from '../../scripts/lib-franklin.js'; +// import { decorateIcons } from '../../scripts/lib-franklin.js'; // import { fetchProduct } from '../../scripts/utils/utils.js'; /* eslint-disable prefer-const */ @@ -9,26 +9,22 @@ export default function decorate(block, options) { // eslint-disable-next-line no-unused-vars pid, } = options ? options.metadata : block.closest('.section').dataset; - let underShadow = block; if (options) { - const aemContainer = block.children[1]; - aemContainer.classList.add('product-cards-ab-container'); - aemContainer.classList.add('we-container'); - // eslint-disable-next-line prefer-destructuring - underShadow = aemContainer.children[1]; - underShadow.classList.add('block'); + block = block.querySelector('.block'); + let blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); } - const firstRow = underShadow.firstElementChild; - const lastRow = underShadow.lastElementChild; + const firstRow = block.firstElementChild; + const lastRow = block.lastElementChild; /* eslint-disable-next-line prefer-destructuring */ - const parentNode = underShadow.parentNode; // Get the parent of the block + const parentNode = block.parentNode; // Get the parent of the block if (firstRow && parentNode) { - parentNode.insertBefore(firstRow, underShadow); // Insert the first row before the block + parentNode.insertBefore(firstRow, block); // Insert the first row before the block } if (lastRow && parentNode) { parentNode.appendChild(lastRow); // Insert the last row after the block } - const productCardsElement = parentNode.querySelector('.product-cards-ab.block'); // Get the container element + const productCardsElement = parentNode.querySelector('.product-cards-ab'); // Get the container element const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container /* eslint-disable no-restricted-syntax */ @@ -97,6 +93,7 @@ export default function decorate(block, options) { fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) .then((product) => { + console.log(product); discountPercentage = Math.round( (1 - (product.discount.discounted_price) / product.price) * 100, ); @@ -114,7 +111,7 @@ export default function decorate(block, options) { tabContent.appendChild(tab); // add discount value to component title - const discountXX = parentNode.querySelector('.product-cards-ab-wrapper h3 strong em'); + const discountXX = parentNode.querySelector('.product-cards-ab-container h3 strong em'); const xx = document.createElement('em'); xx.innerHTML = `${discountPercentage}%`; discountXX.replaceWith(xx); @@ -168,12 +165,12 @@ export default function decorate(block, options) { }); } - const elementsToRemove = underShadow.querySelectorAll('.product_area'); + const elementsToRemove = block.querySelectorAll('.product_area'); elementsToRemove.forEach((element) => { element.remove(); }); - decorateIcons(underShadow); + // decorateIcons(underShadow); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 7248e770c..68f447fbb 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -39,7 +39,7 @@ async function decorateIcons(element) { svgSprite = div.firstElementChild; element.append(div.firstElementChild); } - + console.log("element " , element) // Download all new icons const icons = [...element.querySelectorAll('span.icon')]; await Promise.all(icons.map(async (span) => { @@ -50,7 +50,7 @@ async function decorateIcons(element) { let dynamicIconsSharepointPath = '/icons/'; // check for localhost if (window.location.hostname === 'localhost') { - dynamicIconsSharepointPath = 'https://www.bitdefender.com/icons/'; + dynamicIconsSharepointPath = 'https://www.bitdefender.com/common/icons/'; } const response = await fetch(`${dynamicIconsSharepointPath}${iconName}.svg`); if (!response.ok) { @@ -87,17 +87,52 @@ async function decorateIcons(element) { svgSprite.innerHTML += symbols; icons.forEach((span) => { + console.log(span) const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span; // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite if (ICONS_CACHE[iconName].styled) { + console.log("styled ", span); + console.log(parent); parent.innerHTML = ICONS_CACHE[iconName].html; } else { + console.log("unstyled ", span); parent.innerHTML = ``; } }); } +function decorateSections(main) { + main.querySelectorAll(':scope > div').forEach((section) => { + const wrappers = []; + let defaultContent = false; + [...section.children].forEach((e) => { + if (e.tagName === 'DIV' || !defaultContent) { + const wrapper = document.createElement('div'); + wrappers.push(wrapper); + defaultContent = e.tagName !== 'DIV'; + if (defaultContent) wrapper.classList.add('default-content-wrapper'); + } + wrappers[wrappers.length - 1].append(e); + }); + wrappers.forEach((wrapper) => section.append(wrapper)); + section.classList.add('section'); + }); +} + +function decorateBlock(block) { + const shortBlockName = block.classList[0]; + if (shortBlockName) { + block.classList.add('block'); + block.dataset.blockName = shortBlockName; + block.dataset.blockStatus = 'initialized'; + const blockWrapper = block.parentElement; + blockWrapper.classList.add(`${shortBlockName}-wrapper`); + const section = block.closest('.section'); + if (section) section.classList.add(`${shortBlockName}-container`); + } +} + export async function loadComponent(offer, block, options, selector) { const offerURL = new URL(offer); const origin = offerURL.origin; @@ -111,7 +146,6 @@ export async function loadComponent(offer, block, options, selector) { fetch(offer).then(r => r.text()), import(`${origin}/_src/blocks/${block}/${block}.js`) ]) - // If the block is a particle background, // a new div is created and appended to the body so the external library can work if (block === "particle-background") { @@ -124,10 +158,29 @@ export async function loadComponent(offer, block, options, selector) { shadowRoot.appendChild(newDiv); newDiv.style.display = "block"; } else { - shadowRoot.innerHTML += html; - decorateIcons(shadowRoot); + // console.log(html); + let franklinHtmlStructure = ` +
    +
    +
    + ` + let x = document.createElement('div') + x.innerHTML = html; + // decorateSections(x); + console.log("this is x " ,x) + decorateSections(x); + decorateBlock(x.querySelector(`.${block}`)); + console.log("x after ", x); + shadowRoot.innerHTML += x.innerHTML; + await console.log("shadow before ", shadowRoot); + // decorateSections(shadowRoot); + // await console.log("shadow after ", shadowRoot); + // decorateBlock(shadowRoot.querySelector(`.${block}`)); updateLinkSources(shadowRoot, `${origin}${offerFolder}/`); - await js.default(shadowRoot, {...options, metadata: parseMetadata(shadowRoot)}); + await js.default(shadowRoot.querySelector('.section'), {...options, metadata: parseMetadata(shadowRoot)}); + decorateIcons(shadowRoot); } return container; From dbad61a84f90a11ca7e0b49df1c6318ffc33ab20 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 23:29:22 +0200 Subject: [PATCH 0340/1296] Lint fixes --- _src/blocks/product-cards-ab/product-cards-ab.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 05d937de3..265cf2c86 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -6,10 +6,10 @@ /* eslint-disable max-len */ export default function decorate(block, options) { const { - // eslint-disable-next-line no-unused-vars pid, } = options ? options.metadata : block.closest('.section').dataset; if (options) { + // eslint-disable-next-line no-param-reassign block = block.querySelector('.block'); let blockParent = block.closest('.section'); blockParent.classList.add('we-container'); @@ -93,7 +93,6 @@ export default function decorate(block, options) { fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) .then((product) => { - console.log(product); discountPercentage = Math.round( (1 - (product.discount.discounted_price) / product.price) * 100, ); From 4404f3bb44fd694ffb6e89dbdb5ca8b3f49608b3 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 25 Mar 2024 23:33:22 +0200 Subject: [PATCH 0341/1296] Remove console logs, add comments --- _src/scripts/lib-franklin-api.js | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 68f447fbb..256b5a321 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -158,26 +158,14 @@ export async function loadComponent(offer, block, options, selector) { shadowRoot.appendChild(newDiv); newDiv.style.display = "block"; } else { - // console.log(html); - let franklinHtmlStructure = ` -
    -
    -
    - ` - let x = document.createElement('div') - x.innerHTML = html; - // decorateSections(x); - console.log("this is x " ,x) - decorateSections(x); - decorateBlock(x.querySelector(`.${block}`)); - console.log("x after ", x); - shadowRoot.innerHTML += x.innerHTML; - await console.log("shadow before ", shadowRoot); - // decorateSections(shadowRoot); - // await console.log("shadow after ", shadowRoot); - // decorateBlock(shadowRoot.querySelector(`.${block}`)); + // in order to have a structure as close as possible as in franklin + // when we import in aem, we also decorate the sections and the block + // the functions are taken from lib-franklin.js + let franklinHTMLStructure = document.createElement('div') + franklinHTMLStructure.innerHTML = html; + decorateSections(franklinHTMLStructure); + decorateBlock(franklinHTMLStructure.querySelector(`.${block}`)); + shadowRoot.innerHTML += franklinHTMLStructure.innerHTML; updateLinkSources(shadowRoot, `${origin}${offerFolder}/`); await js.default(shadowRoot.querySelector('.section'), {...options, metadata: parseMetadata(shadowRoot)}); decorateIcons(shadowRoot); From 65084a1519196d5b5dfdd32b1132535c2aaf0bfe Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 10:47:23 +0200 Subject: [PATCH 0342/1296] Delete console.log --- _src/scripts/lib-franklin-api.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 256b5a321..767309a8b 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -87,16 +87,12 @@ async function decorateIcons(element) { svgSprite.innerHTML += symbols; icons.forEach((span) => { - console.log(span) const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span; // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite if (ICONS_CACHE[iconName].styled) { - console.log("styled ", span); - console.log(parent); parent.innerHTML = ICONS_CACHE[iconName].html; } else { - console.log("unstyled ", span); parent.innerHTML = ``; } }); From 5a38b0c7626f827fbe07a90012d5df54dffca3fe Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 10:48:04 +0200 Subject: [PATCH 0343/1296] Delete console.log --- _src/scripts/lib-franklin-api.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 767309a8b..83a93ca01 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -39,7 +39,6 @@ async function decorateIcons(element) { svgSprite = div.firstElementChild; element.append(div.firstElementChild); } - console.log("element " , element) // Download all new icons const icons = [...element.querySelectorAll('span.icon')]; await Promise.all(icons.map(async (span) => { From a1d88f120f32eb91d77e0d2f6e3c2d1a2f068a84 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 14:51:46 +0200 Subject: [PATCH 0344/1296] Update solutions-cards-ab.css and solutions-cards-ab.js --- .../solutions-cards-ab/solutions-cards-ab.css | 102 +++++++++++++++++- .../solutions-cards-ab/solutions-cards-ab.js | 12 ++- _src/scripts/lib-franklin-api.js | 2 +- 3 files changed, 109 insertions(+), 7 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 645c2e283..310dda8bc 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -1,3 +1,73 @@ +.solutions-cards-ab-container { + --dark-background-color: #000; + --black-color: #000; + --white-color: #fff; + --background-color: #fff; + --link-color: #005ed9; + --link-hover-color: #00439c; + --button-link-color: #fff; + --button-background-color: #eb0000; + --button-hover-background-color: #d80000; + --button-primary-background-color: #000; + --button-primary-hover-background-color: #000; + --button-secondary-color: #000; + --button-secondary-hover-background-color: #000; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + --text-error-color: #f00; + --color-highlight-blue: #006dff; + --color-dark-gray: #616161; + --checkbox-label: #3c3c3c; + --highlight-light-blue: #f3f7fe; + --text-dark-color: #fff; + --horizontal-separator-color: #dedede; + --modal-background-color: rgb(0 0 0 / 50%); + --background-color-light-sky-blue: #e4f2ff; + --icon-color: #205fff; + --background-light-blue: #d9eeff; + --background-blue: #005ed9; + --dark-blue-tag: #005eff; + --light-blue-tag: #13b0a7; + --green-tag: #218728; + --dark-shadow: #0000001a; + --background-checkmark: #61AF53; + --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; + --heading-font-family: var(--body-font-family); + --fixed-font-family: var(--body-font-family); + --font-weight-thin: 300; + --font-weight-regular: 400; + --font-weight-bold: 500; + --font-weight-bolder: 600; + --font-weight-boldest: 700; + --font-weight-heavy: 900; + --body-font-size-l: 22px; + --body-font-size-m: 18px; + --body-font-size-s: 16px; + --body-font-size-xs: 14px; + --body-font-size-xxs: 12px; + --body-font-size-xxxs: 10px; + --heading-font-size-xxxl: 60px; + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + --heading-font-size-xxs: 16px; + --nav-height: 63px; + --nav-height-desktop: 40px; + --body-max-width: 1920px; + --body-padding: 20px; + --section-desktop-max-width: 1300px; + --section-desktop-padding: 20px; + --section-large-desktop-max-width: 1332px; + --section-large-desktop-padding: 50px; + --section-desktop-padding-vertical: 48px; + --section-mobile-padding-vertical: 32px; + --cta-background-light-blue: var(--background-light-blue); +} + @media (min-width: 992px) { /* desktop */ .solutions-cards-ab-wrapper { @@ -20,7 +90,20 @@ border-radius: 20px; } -.default-content-wrapper > h2 { +.solutions-cards-ab-container.we-container { + margin: 0 auto; + max-width: 1332px; + padding: 0 20px; + position: relative; + width: 100% +} + +.solutions-cards-ab-container .icon svg { + width: 100%; + height: 100%; +} + +.solutions-cards-ab-container h2 { font: normal normal bold 28px/32px var(--body-font-family); text-align: center; margin-bottom: 21px; @@ -65,6 +148,7 @@ margin-bottom: 0; top: 3px; fill: #1C7928; + display: inline-block; } .solutions-cards-ab-wrapper > div:last-of-type p a { @@ -208,6 +292,7 @@ margin-right: 9px; margin-bottom: 0; top: 3px; + display: inline-block; } .solutions-cards-ab.block .product-info .feature-list ul li .icon.icon-x-circle svg { @@ -241,4 +326,17 @@ text-align: left; font: normal normal bold 40px/45px var(--body-font-family); color: #006DFF; -} \ No newline at end of file +} + +@media (max-width: 992px) { + .solutions-cards-ab-container.we-container { + padding:0 20px + } +} + +@media (max-width: 1600px) { + .solutions-cards-ab-container.we-container { + max-width:1300px; + padding: 0 50px; + } + } \ No newline at end of file diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index 0df884fd2..ad4b840b4 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -1,6 +1,3 @@ -import { decorateIcons } from '../../scripts/lib-franklin.js'; -// import { fetchProduct } from '../../scripts/utils/utils.js'; - /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ @@ -9,6 +6,14 @@ export default function decorate(block, options) { // eslint-disable-next-line no-unused-vars pid, } = options ? options.metadata : block.closest('.section').dataset; + + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + let blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); + } + const firstRow = block.firstElementChild; const lastRow = block.lastElementChild; /* eslint-disable-next-line prefer-destructuring */ @@ -116,7 +121,6 @@ export default function decorate(block, options) { element.remove(); }); - decorateIcons(block); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 83a93ca01..d9ac1a1d9 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -46,7 +46,7 @@ async function decorateIcons(element) { if (!ICONS_CACHE[iconName]) { ICONS_CACHE[iconName] = true; try { - let dynamicIconsSharepointPath = '/icons/'; + let dynamicIconsSharepointPath = 'https://www.bitdefender.com/common/icons/'; // check for localhost if (window.location.hostname === 'localhost') { dynamicIconsSharepointPath = 'https://www.bitdefender.com/common/icons/'; From 08a87311bf4c900eac47840c9a39038ab1a1e6cb Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 15:08:53 +0200 Subject: [PATCH 0345/1296] Refactor product-cards-ab container CSS --- _src/blocks/product-cards-ab/product-cards-ab.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index d24c97b29..97501ca82 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -88,7 +88,7 @@ border-radius: 20px; } -.product-cards-ab-container.we-container { +.we-container { margin: 0 auto; max-width: 1332px; padding: 0 20px; @@ -331,13 +331,13 @@ } @media (max-width: 992px) { - .product-cards-ab-container.we-container { + .we-container { padding:0 20px } } @media (max-width: 1600px) { - .product-cards-ab-container.we-container { + .we-container { max-width:1300px; padding: 0 50px; } From 6ec751a15a329128850dd33c4e3a863265730ddb Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 15:29:10 +0200 Subject: [PATCH 0346/1296] Update max-width and padding in product-cards-ab.css --- _src/blocks/product-cards-ab/product-cards-ab.css | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 97501ca82..92492cdae 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -90,10 +90,9 @@ .we-container { margin: 0 auto; - max-width: 1332px; + max-width: 1292px; padding: 0 20px; position: relative; - width: 100% } .product-cards-ab-container .icon svg { @@ -330,15 +329,15 @@ color: #006DFF; } -@media (max-width: 992px) { +@media (max-width: 1600px) { .we-container { - padding:0 20px + max-width:1200px; + padding: 0 50px; } } -@media (max-width: 1600px) { +@media (max-width: 992px) { .we-container { - max-width:1300px; - padding: 0 50px; + padding:0 20px } - } \ No newline at end of file +} \ No newline at end of file From 003e7169de5eb32ccab15df72388c55800ead944 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 15:29:58 +0200 Subject: [PATCH 0347/1296] Update max-width and padding in solutions-cards-ab.css --- .../solutions-cards-ab/solutions-cards-ab.css | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 310dda8bc..50a499707 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -92,10 +92,9 @@ .solutions-cards-ab-container.we-container { margin: 0 auto; - max-width: 1332px; + max-width: 1292px; padding: 0 20px; position: relative; - width: 100% } .solutions-cards-ab-container .icon svg { @@ -328,15 +327,15 @@ color: #006DFF; } -@media (max-width: 992px) { +@media (max-width: 1600px) { .solutions-cards-ab-container.we-container { - padding:0 20px + max-width:1200px; + padding: 0 50px; } -} + } -@media (max-width: 1600px) { +@media (max-width: 992px) { .solutions-cards-ab-container.we-container { - max-width:1300px; - padding: 0 50px; + padding:0 20px } - } \ No newline at end of file +} \ No newline at end of file From 65402e1cd369564093af247f3d3109f718283e38 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:10:16 +0200 Subject: [PATCH 0348/1296] Add padding-bottom to product-cards-ab container --- _src/blocks/product-cards-ab/product-cards-ab.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 92492cdae..0b4624a11 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -93,6 +93,7 @@ max-width: 1292px; padding: 0 20px; position: relative; + padding-bottom: 64px; } .product-cards-ab-container .icon svg { From 8f607473a5e5dc3036ee16008992a39d25b1c4fa Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:29:04 +0200 Subject: [PATCH 0349/1296] Update padding in product-cards-ab.css --- _src/blocks/product-cards-ab/product-cards-ab.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 0b4624a11..a17fa013a 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -333,12 +333,12 @@ @media (max-width: 1600px) { .we-container { max-width:1200px; - padding: 0 50px; + padding: 0 50px 64px 50px; } } @media (max-width: 992px) { .we-container { - padding:0 20px + padding:0 20px 64 20px; } } \ No newline at end of file From 4b93f75c00624176a3256a28eb00e1b0aa28e754 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:30:32 +0200 Subject: [PATCH 0350/1296] Fix padding in product-cards-ab.css --- _src/blocks/product-cards-ab/product-cards-ab.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index a17fa013a..6734042d6 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -339,6 +339,6 @@ @media (max-width: 992px) { .we-container { - padding:0 20px 64 20px; + padding:0 20px 64px 20px; } } \ No newline at end of file From 83d7631dd9513b3882cbce8dbcad2874a7f0fbe8 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:36:45 +0200 Subject: [PATCH 0351/1296] Update grid-template-columns and add padding to product-cards-ab.css --- _src/blocks/product-cards-ab/product-cards-ab.css | 3 ++- _src/blocks/solutions-cards-ab/solutions-cards-ab.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 6734042d6..185c5a95b 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -164,8 +164,9 @@ display: grid; justify-content: center; align-items: center; - grid-template-columns: repeat(auto-fill, minmax(410px, 410px)); + grid-template-columns: repeat(auto-fill, minmax(300px, 410px)); grid-gap: 28px; + padding: 0 5px; } .product-cards-ab.block > div { diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 50a499707..421ba047f 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -164,8 +164,9 @@ display: grid; justify-content: center; align-items: center; - grid-template-columns: repeat(auto-fill, minmax(410px, 410px)); + grid-template-columns: repeat(auto-fill, minmax(300px, 410px)); grid-gap: 28px; + padding: 0 5px; } .solutions-cards-ab.block > div { From 1363b90a51731c6116c4adad3633a5740c795330 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:41:25 +0200 Subject: [PATCH 0352/1296] Update product-cards-ab.css media queries --- _src/blocks/product-cards-ab/product-cards-ab.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 185c5a95b..992892fd9 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -331,15 +331,15 @@ color: #006DFF; } -@media (max-width: 1600px) { +@media (min-width: 596px) { .we-container { - max-width:1200px; - padding: 0 50px 64px 50px; + padding:0 20px 64px 20px; } } -@media (max-width: 992px) { +@media (min-width: 992px) { .we-container { - padding:0 20px 64px 20px; + max-width:1200px; + padding: 0 50px 64px 50px; } } \ No newline at end of file From 8f86fdfea462277cc574d6d50e0f4c8edb3aedb5 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:46:13 +0200 Subject: [PATCH 0353/1296] Refactor container padding and max-width --- .../product-cards-ab/product-cards-ab.css | 1 - .../solutions-cards-ab/solutions-cards-ab.css | 17 ++++++++--------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 992892fd9..eade5ac69 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -91,7 +91,6 @@ .we-container { margin: 0 auto; max-width: 1292px; - padding: 0 20px; position: relative; padding-bottom: 64px; } diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 421ba047f..4c1944ace 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -93,7 +93,6 @@ .solutions-cards-ab-container.we-container { margin: 0 auto; max-width: 1292px; - padding: 0 20px; position: relative; } @@ -328,15 +327,15 @@ color: #006DFF; } -@media (max-width: 1600px) { - .solutions-cards-ab-container.we-container { - max-width:1200px; - padding: 0 50px; +@media (min-width: 596px) { + .we-container { + padding:0 20px; } - } +} -@media (max-width: 992px) { - .solutions-cards-ab-container.we-container { - padding:0 20px +@media (min-width: 992px) { + .we-container { + max-width:1200px; + padding: 0 50px; } } \ No newline at end of file From 75a5770f11f3e0b0f353bcce9b735fd32a75cf2f Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:54:33 +0200 Subject: [PATCH 0354/1296] Add padding and responsive layout to solutions-cards-ab block --- .../solutions-cards-ab/solutions-cards-ab.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 4c1944ace..6b5e1a471 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -93,6 +93,7 @@ .solutions-cards-ab-container.we-container { margin: 0 auto; max-width: 1292px; + padding: 0 5px; position: relative; } @@ -338,4 +339,16 @@ max-width:1200px; padding: 0 50px; } -} \ No newline at end of file +} + +@media (max-width: 370px) { + + .solutions-cards-ab.block > div { + padding: 14px; + } + + .solutions-cards-ab.block { + grid-template-columns: 1fr; + } +} + From a7e5a0219a3f6d35633e39c1a00416315e322ff3 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:57:27 +0200 Subject: [PATCH 0355/1296] Update solutions-cards-ab.css media queries --- _src/blocks/solutions-cards-ab/solutions-cards-ab.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 6b5e1a471..8754744ac 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -328,16 +328,16 @@ color: #006DFF; } -@media (min-width: 596px) { +@media (max-width: 1600px) { .we-container { - padding:0 20px; + max-width:1200px; + padding: 0 50px; } } -@media (min-width: 992px) { +@media (max-width: 992) { .we-container { - max-width:1200px; - padding: 0 50px; + padding:0 20px; } } From c2be60d3e6396238c63c301ba2e6cccb6c83a9af Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 16:57:44 +0200 Subject: [PATCH 0356/1296] sadsd --- _src/blocks/solutions-cards-ab/solutions-cards-ab.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 8754744ac..608dbb238 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -93,7 +93,7 @@ .solutions-cards-ab-container.we-container { margin: 0 auto; max-width: 1292px; - padding: 0 5px; + padding: 0 20px; position: relative; } From 62b951c45f08e87f4a505848b2c5d49fd68b13e3 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 17:01:48 +0200 Subject: [PATCH 0357/1296] Refactor solutions-cards-ab container width and padding --- _src/blocks/solutions-cards-ab/solutions-cards-ab.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 608dbb238..43faa0582 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -329,14 +329,16 @@ } @media (max-width: 1600px) { - .we-container { + + .solutions-cards-ab-container.we-container { max-width:1200px; padding: 0 50px; } } @media (max-width: 992) { - .we-container { + + .solutions-cards-ab-container.we-container { padding:0 20px; } } From 408dc79929437afd7d583e008694cdbb9ecbd0ed Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 17:05:04 +0200 Subject: [PATCH 0358/1296] Fix media query in solutions-cards-ab.css --- _src/blocks/solutions-cards-ab/solutions-cards-ab.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index 43faa0582..a34e6d150 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -336,7 +336,7 @@ } } -@media (max-width: 992) { +@media (max-width: 992px) { .solutions-cards-ab-container.we-container { padding:0 20px; From 7e38ec556a84594a606653221c8a29b6ed03818c Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 17:19:51 +0200 Subject: [PATCH 0359/1296] Update product-cards-ab.css for responsive design --- .../product-cards-ab/product-cards-ab.css | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index eade5ac69..6270b8ee2 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -330,15 +330,28 @@ color: #006DFF; } -@media (min-width: 596px) { - .we-container { - padding:0 20px 64px 20px; +@media (max-width: 1600px) { + + .product-cards-ab-container.we-container { + max-width:1200px; + padding: 0 50px; } } -@media (min-width: 992px) { - .we-container { - max-width:1200px; - padding: 0 50px 64px 50px; +@media (max-width: 992px) { + + .product-cards-ab-container.we-container { + padding:0 20px; + } +} + +@media (max-width: 370px) { + + .product-cards-ab.block > div { + padding: 14px; + } + + .product-cards-ab.block { + grid-template-columns: 1fr; } } \ No newline at end of file From c7eb14fbeda0f0d85caf952a4ce4ddeb39458950 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 17:21:25 +0200 Subject: [PATCH 0360/1296] Update padding in product-cards-ab.css --- _src/blocks/product-cards-ab/product-cards-ab.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 6270b8ee2..6b290e6be 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -334,14 +334,14 @@ .product-cards-ab-container.we-container { max-width:1200px; - padding: 0 50px; + padding: 0 50px 64px 50px; } } @media (max-width: 992px) { .product-cards-ab-container.we-container { - padding:0 20px; + padding:0 20px 64px 20px; } } From 36de598fe117072b242153357c65c24d775f03d2 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 26 Mar 2024 17:22:33 +0200 Subject: [PATCH 0361/1296] Update container padding in product-cards-ab and solutions-cards-ab CSS --- _src/blocks/product-cards-ab/product-cards-ab.css | 7 ++----- _src/blocks/solutions-cards-ab/solutions-cards-ab.css | 3 --- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.css b/_src/blocks/product-cards-ab/product-cards-ab.css index 6b290e6be..3bbf67a42 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.css +++ b/_src/blocks/product-cards-ab/product-cards-ab.css @@ -331,22 +331,19 @@ } @media (max-width: 1600px) { - .product-cards-ab-container.we-container { max-width:1200px; - padding: 0 50px 64px 50px; + padding: 0 50px 64px; } } @media (max-width: 992px) { - .product-cards-ab-container.we-container { - padding:0 20px 64px 20px; + padding:0 20px 64px; } } @media (max-width: 370px) { - .product-cards-ab.block > div { padding: 14px; } diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css index a34e6d150..fe494a7e7 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.css +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.css @@ -329,7 +329,6 @@ } @media (max-width: 1600px) { - .solutions-cards-ab-container.we-container { max-width:1200px; padding: 0 50px; @@ -337,14 +336,12 @@ } @media (max-width: 992px) { - .solutions-cards-ab-container.we-container { padding:0 20px; } } @media (max-width: 370px) { - .solutions-cards-ab.block > div { padding: 14px; } From a70920030e1dce8cb5627e38fc031883e9092e6f Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 27 Mar 2024 16:35:11 +0200 Subject: [PATCH 0362/1296] dlp-cards-fix --- _src/blocks/product-cards-ab/product-cards-ab.js | 8 ++++---- _src/blocks/solutions-cards-ab/solutions-cards-ab.js | 4 ++-- _src/scripts/utils/utils.js | 12 ++++++++++++ 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 265cf2c86..2325b7cec 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -6,7 +6,7 @@ /* eslint-disable max-len */ export default function decorate(block, options) { const { - pid, + pid, offtext, yearly, monthly, } = options ? options.metadata : block.closest('.section').dataset; if (options) { // eslint-disable-next-line no-param-reassign @@ -102,7 +102,7 @@ export default function decorate(block, options) { tab.innerHTML = `
    ${currencyLabel}${oldPrice} - ${discountPercentage}% OFF + ${discountPercentage}% ${offtext}
    ${currencyLabel}${newPrice} @@ -150,8 +150,8 @@ export default function decorate(block, options) { // Simulate click on the first tab button if (tabButton.length > 0) { - tabButton[0].textContent = 'Yearly'; - tabButton[1].textContent = 'Monthly'; + tabButton[0].textContent = yearly; + tabButton[1].textContent = monthly; tabButton[0].click(); } }); diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index ad4b840b4..646d40907 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -4,7 +4,7 @@ export default function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars - pid, + pid, offtext, } = options ? options.metadata : block.closest('.section').dataset; if (options) { @@ -92,7 +92,7 @@ export default function decorate(block, options) { tab.innerHTML = `
    ${currencyLabel}${oldPrice} - ${discountPercentage}% OFF + ${discountPercentage}% ${offtext}
    ${currencyLabel}${newPrice} diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index c127ddbc9..767daf9a2 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -78,6 +78,18 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { }, })); + if (siteName === 'uk') { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + } + + if (siteName === 'fr') { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + } + if ((siteName === 'hk' || siteName === 'tw')) { // append force_region for hk and tw const newData = JSON.parse(data.get('data')); From db94bf60c79be57effa209b54964879e49f7a570 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 13:18:55 +0200 Subject: [PATCH 0363/1296] Update dynamicIconsSharepointPath based on hostname --- _src/scripts/lib-franklin-api.js | 6 ++++++ _src/scripts/utils/utils.js | 14 +++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index d9ac1a1d9..5ee40afcb 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -47,6 +47,12 @@ async function decorateIcons(element) { ICONS_CACHE[iconName] = true; try { let dynamicIconsSharepointPath = 'https://www.bitdefender.com/common/icons/'; + if (window.location.hostname.includes('www.bitdefender.co.uk')) { + dynamicIconsSharepointPath = 'https://www.bitdefender.co.uk/content/dam/franklin/'; + } + if (window.location.hostname.includes('www.bitdefender.fr')) { + dynamicIconsSharepointPath = 'https://www.bitdefender.fr/content/dam/franklin/'; + } // check for localhost if (window.location.hostname === 'localhost') { dynamicIconsSharepointPath = 'https://www.bitdefender.com/common/icons/'; diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 767daf9a2..8c1c8c463 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -61,8 +61,8 @@ async function findProductVariant(cachedResponse, variant) { export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const data = new FormData(); // extract pid from url + const url = new URL(window.location.href); if (!pid) { - const url = new URL(window.location.href); // eslint-disable-next-line no-param-reassign pid = url.searchParams.get('pid'); } @@ -78,6 +78,18 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { }, })); + if (url.hostname.includes('www.bitdefender.co.uk')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + } + + if (url.hostname.includes('www.bitdefender.fr')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + } + if (siteName === 'uk') { const newData = JSON.parse(data.get('data')); newData.config.force_region = '3'; From b001258bf40b2bdb71ea0e14a98ea3b22e856c04 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 13:19:17 +0200 Subject: [PATCH 0364/1296] Fix dynamicIconsSharepointPath for different domains --- _src/scripts/lib-franklin-api.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/lib-franklin-api.js b/_src/scripts/lib-franklin-api.js index 5ee40afcb..b5e23f113 100644 --- a/_src/scripts/lib-franklin-api.js +++ b/_src/scripts/lib-franklin-api.js @@ -47,10 +47,10 @@ async function decorateIcons(element) { ICONS_CACHE[iconName] = true; try { let dynamicIconsSharepointPath = 'https://www.bitdefender.com/common/icons/'; - if (window.location.hostname.includes('www.bitdefender.co.uk')) { + if (window.location.hostname.includes('bitdefender.co.uk')) { dynamicIconsSharepointPath = 'https://www.bitdefender.co.uk/content/dam/franklin/'; } - if (window.location.hostname.includes('www.bitdefender.fr')) { + if (window.location.hostname.includes('bitdefender.fr')) { dynamicIconsSharepointPath = 'https://www.bitdefender.fr/content/dam/franklin/'; } // check for localhost From c9395de7ae6906f901fc662e3e502564d7f1d176 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 13:36:25 +0200 Subject: [PATCH 0365/1296] Update region configuration in fetchProduct function --- _src/scripts/utils/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 8c1c8c463..d1d86293d 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -78,13 +78,13 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { }, })); - if (url.hostname.includes('www.bitdefender.co.uk')) { + if (url.hostname.includes('bitdefender.co.uk')) { const newData = JSON.parse(data.get('data')); newData.config.force_region = '3'; data.set('data', JSON.stringify(newData)); } - if (url.hostname.includes('www.bitdefender.fr')) { + if (url.hostname.includes('bitdefender.fr')) { const newData = JSON.parse(data.get('data')); newData.config.force_region = '14'; data.set('data', JSON.stringify(newData)); From 9b1e805489d6e81f578ad2fc64b9e09609225a10 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:10:20 +0200 Subject: [PATCH 0366/1296] Add product loading event to adobeDataLayer --- .../product-cards-ab/product-cards-ab.js | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 2325b7cec..25e4a0150 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -1,3 +1,4 @@ +/* eslint-disable indent */ // import { decorateIcons } from '../../scripts/lib-franklin.js'; // import { fetchProduct } from '../../scripts/utils/utils.js'; @@ -65,6 +66,7 @@ export default function decorate(block, options) { const tabButtons = productInfoDiv.querySelector('.price-area .tab-buttons'); const tabContent = productInfoDiv.querySelector('.price-area .tab-content'); + // eslint-disable-next-line no-loop-func productsAsList.forEach(async (prod) => { const [prodName, prodUsers, prodYears] = prod.split('/'); @@ -76,7 +78,6 @@ export default function decorate(block, options) { tabButtons.appendChild(button); const { fetchProduct } = await import('../../scripts/utils/utils.js'); - let oldPrice; let newPrice; let discountPercentage; @@ -154,6 +155,11 @@ export default function decorate(block, options) { tabButton[1].textContent = monthly; tabButton[0].click(); } + + window.adobeDataLayer.push({ + event: 'product loaded', + product: null, + }); }); }, 500); }) @@ -161,6 +167,28 @@ export default function decorate(block, options) { // eslint-disable-next-line no-console console.error(err); }); + + if (options) { + const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); + const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); + window.adobeDataLayer.push({ + event: 'product loaded', + product: [{ + info: { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription('months'), + version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', + basePrice: storeOption.getPrice('value'), + discountValue: storeOption.getDiscount('value'), + discountRate: storeOption.getDiscount('percentage'), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), + }, + }], + }); + } }); } From df3cc5a8755efaa519505fe206c4b257d3348ca8 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:12:24 +0200 Subject: [PATCH 0367/1296] Remove unnecessary code for product loading --- _src/blocks/product-cards-ab/product-cards-ab.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 25e4a0150..ec7b9a3b3 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -155,11 +155,6 @@ export default function decorate(block, options) { tabButton[1].textContent = monthly; tabButton[0].click(); } - - window.adobeDataLayer.push({ - event: 'product loaded', - product: null, - }); }); }, 500); }) From 172a1ef585f703efaa81fb2dd2849388ea579340 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:18:24 +0200 Subject: [PATCH 0368/1296] Add Adobe Data Layer tracking for product loaded event --- .../product-cards-ab/product-cards-ab.js | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index ec7b9a3b3..daff30091 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -5,6 +5,8 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ + +let adobeDataLayerArray = []; export default function decorate(block, options) { const { pid, offtext, yearly, monthly, @@ -166,23 +168,22 @@ export default function decorate(block, options) { if (options) { const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); - window.adobeDataLayer.push({ - event: 'product loaded', - product: [{ - info: { - ID: storeOption.getAvangateId(), - name: storeOption.getName(), - devices: storeOption.getDevices(), - subscription: storeOption.getSubscription('months'), - version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', - basePrice: storeOption.getPrice('value'), - discountValue: storeOption.getDiscount('value'), - discountRate: storeOption.getDiscount('percentage'), - currency: storeOption.getCurrency(), - priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), - }, - }], + if (!storeOption.getName.includes('Monthly')) { + adobeDataLayerArray.push({ + info: { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription('months'), + version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', + basePrice: storeOption.getPrice('value'), + discountValue: storeOption.getDiscount('value'), + discountRate: storeOption.getDiscount('percentage'), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), + }, }); + } } }); } @@ -192,6 +193,16 @@ export default function decorate(block, options) { element.remove(); }); + window.adobeDataLayer.push({ + event: 'product loaded', + product: null, + }); + + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + // decorateIcons(underShadow); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, From d6a932dd080c013ac7b49a2cc61da312f3ef6abf Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:19:03 +0200 Subject: [PATCH 0369/1296] Fix condition to check for Monthly store option name --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index daff30091..4ed0ff83f 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -168,7 +168,7 @@ export default function decorate(block, options) { if (options) { const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); - if (!storeOption.getName.includes('Monthly')) { + if (!storeOption.getName().includes('Monthly')) { adobeDataLayerArray.push({ info: { ID: storeOption.getAvangateId(), From 33134465a8910e98ec02b48fc88c8daa2a9c89cf Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:28:52 +0200 Subject: [PATCH 0370/1296] Refactor product-cards-ab.js --- .../product-cards-ab/product-cards-ab.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 4ed0ff83f..39873d5b0 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -193,19 +193,23 @@ export default function decorate(block, options) { element.remove(); }); - window.adobeDataLayer.push({ - event: 'product loaded', - product: null, - }); - - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); - // decorateIcons(underShadow); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary }); + + if (options) { + window.addEventListener(window.codeBaseFinishedRunning, () => { + window.adobeDataLayer.push({ + event: 'product loaded', + product: null, + }); + + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + }); + } } From 7ec7352e8bccb0b83e3cb5a2c112f877146d8931 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:33:40 +0200 Subject: [PATCH 0371/1296] Fix product loaded event data --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 39873d5b0..290fe6d87 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -203,7 +203,7 @@ export default function decorate(block, options) { window.addEventListener(window.codeBaseFinishedRunning, () => { window.adobeDataLayer.push({ event: 'product loaded', - product: null, + product: 0, }); window.adobeDataLayer.push({ From 41ea1d7db7190dad68a630ea9def04c70b672707 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:37:04 +0200 Subject: [PATCH 0372/1296] Update product loaded event in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 290fe6d87..8e3815bf4 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -202,8 +202,7 @@ export default function decorate(block, options) { if (options) { window.addEventListener(window.codeBaseFinishedRunning, () => { window.adobeDataLayer.push({ - event: 'product loaded', - product: 0, + product: null, }); window.adobeDataLayer.push({ From 272caaf55f3eb5e8f42e31e621f6bbd9be768a23 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:40:42 +0200 Subject: [PATCH 0373/1296] Fix delay in pushing product loaded event to Adobe Data Layer --- _src/blocks/product-cards-ab/product-cards-ab.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 8e3815bf4..9bfac0e5d 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -204,11 +204,12 @@ export default function decorate(block, options) { window.adobeDataLayer.push({ product: null, }); - - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); + setTimeout(() => { + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + }, 1000); }); } } From 19214bb3af4cbcccf7671eb5422446e8937debee Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:42:02 +0200 Subject: [PATCH 0374/1296] Refactor product-cards-ab.js to push 'product loaded' event to adobeDataLayer --- _src/blocks/product-cards-ab/product-cards-ab.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 9bfac0e5d..b5b3da882 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -202,14 +202,9 @@ export default function decorate(block, options) { if (options) { window.addEventListener(window.codeBaseFinishedRunning, () => { window.adobeDataLayer.push({ - product: null, + event: 'product loaded', + product: adobeDataLayerArray, }); - setTimeout(() => { - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); - }, 1000); }); } } From 679dc82f0f12cccde5f1764b5be287a02f99e24e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:43:33 +0200 Subject: [PATCH 0375/1296] Fix product loaded event in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index b5b3da882..388eb32ff 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -200,11 +200,14 @@ export default function decorate(block, options) { }); if (options) { - window.addEventListener(window.codeBaseFinishedRunning, () => { - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); + window.adobeDataLayer.push({ + event: 'product loaded', + product: 0, + }); + + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, }); } } From e4f52ccacfa094899119a1f66a85d997eff0cd6c Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 17:45:30 +0200 Subject: [PATCH 0376/1296] Add Adobe Data Layer tracking for product loaded event --- .../solutions-cards-ab/solutions-cards-ab.js | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index 646d40907..86b56c86d 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -1,6 +1,7 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ +let adobeDataLayerArray = []; export default function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars @@ -63,6 +64,7 @@ export default function decorate(block, options) { const productsAsList = productArea.split(','); const tabContent = productInfoDiv.querySelector('.price-area'); + // eslint-disable-next-line no-loop-func productsAsList.forEach(async (prod) => { const [prodName, prodUsers, prodYears] = prod.split('/'); const { fetchProduct } = await import('../../scripts/utils/utils.js'); @@ -113,6 +115,27 @@ export default function decorate(block, options) { // eslint-disable-next-line no-console console.error(err); }); + + if (options) { + const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); + const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); + if (!storeOption.getName().includes('Monthly')) { + adobeDataLayerArray.push({ + info: { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription('months'), + version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', + basePrice: storeOption.getPrice('value'), + discountValue: storeOption.getDiscount('value'), + discountRate: storeOption.getDiscount('percentage'), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), + }, + }); + } + } }); } @@ -125,4 +148,16 @@ export default function decorate(block, options) { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary }); + + if (options) { + window.adobeDataLayer.push({ + event: 'product loaded', + product: 0, + }); + + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + } } From 5a090876e59d38ab5342287723f80037b524017c Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 18:02:21 +0200 Subject: [PATCH 0377/1296] Add hotfix comment --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 265cf2c86..0cc5dac28 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -175,3 +175,5 @@ export default function decorate(block, options) { composed: true, // This allows the event to cross the shadow DOM boundary }); } + +// pr for the hotfix that will surely come tomorrow From fd7cf220645da6777c680dda3944a9e66a2bb4cd Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 18:26:14 +0200 Subject: [PATCH 0378/1296] Refactor product loading logic in solutions-cards-ab.js --- .../blocks/solutions-cards-ab/solutions-cards-ab.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index 86b56c86d..b7fea3b89 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -150,14 +150,15 @@ export default function decorate(block, options) { }); if (options) { - window.adobeDataLayer.push({ - event: 'product loaded', - product: 0, - }); + const allProducts = window.adobeDataLayer.find((productEvent) => productEvent.event === 'product all'); + const allProductsJson = JSON.parse(JSON.stringify(allProducts)); + allProductsJson.all = allProductsJson.all.filter((product) => product.info.name !== 'Bitdefender Premium Security' && product.info.name !== 'Bitdefender Premium Security Plus'); + allProductsJson.all = allProductsJson.all.concat(adobeDataLayerArray); window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, + all: null, }); + + window.adobeDataLayer.push(allProductsJson); } } From dca60511e8e16f2365cb883f45a370ea2cdd4a9c Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 18:31:35 +0200 Subject: [PATCH 0379/1296] Remove unnecessary code and dispatch 'shadowDomLoaded' event --- _src/blocks/solutions-cards-ab/solutions-cards-ab.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index b7fea3b89..b1bdc373b 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -144,11 +144,6 @@ export default function decorate(block, options) { element.remove(); }); - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { - bubbles: true, - composed: true, // This allows the event to cross the shadow DOM boundary - }); - if (options) { const allProducts = window.adobeDataLayer.find((productEvent) => productEvent.event === 'product all'); const allProductsJson = JSON.parse(JSON.stringify(allProducts)); @@ -161,4 +156,9 @@ export default function decorate(block, options) { window.adobeDataLayer.push(allProductsJson); } + + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { + bubbles: true, + composed: true, // This allows the event to cross the shadow DOM boundary + }); } From b52e894cfaab91e82d760f099fec5d7ed6b6f300 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 18:35:15 +0200 Subject: [PATCH 0380/1296] Refactor solutions-cards-ab.js to filter out Bitdefender Premium Security products --- .../solutions-cards-ab/solutions-cards-ab.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index b1bdc373b..3ccdf77b7 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -145,16 +145,20 @@ export default function decorate(block, options) { }); if (options) { + const allProducts = window.adobeDataLayer.find((productEvent) => productEvent.event === 'product all'); - const allProductsJson = JSON.parse(JSON.stringify(allProducts)); - allProductsJson.all = allProductsJson.all.filter((product) => product.info.name !== 'Bitdefender Premium Security' && product.info.name !== 'Bitdefender Premium Security Plus'); - allProductsJson.all = allProductsJson.all.concat(adobeDataLayerArray); + if (allProducts) { + const allProductsJson = JSON.parse(JSON.stringify(allProducts)); + allProductsJson.all = allProductsJson.all.filter((product) => product.info.name !== 'Bitdefender Premium Security' && product.info.name !== 'Bitdefender Premium Security Plus'); + allProductsJson.all = allProductsJson.all.concat(adobeDataLayerArray); - window.adobeDataLayer.push({ - all: null, - }); + window.adobeDataLayer.push({ + all: null, + }); - window.adobeDataLayer.push(allProductsJson); + window.adobeDataLayer.push(allProductsJson); + } + } } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From 305924d5c9f920fdba6ee895663b08efbcfd2059 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 28 Mar 2024 18:37:06 +0200 Subject: [PATCH 0381/1296] Remove unnecessary code in solutions-cards-ab.js --- _src/blocks/solutions-cards-ab/solutions-cards-ab.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index 3ccdf77b7..1c8de3275 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -145,7 +145,6 @@ export default function decorate(block, options) { }); if (options) { - const allProducts = window.adobeDataLayer.find((productEvent) => productEvent.event === 'product all'); if (allProducts) { const allProductsJson = JSON.parse(JSON.stringify(allProducts)); @@ -157,7 +156,6 @@ export default function decorate(block, options) { }); window.adobeDataLayer.push(allProductsJson); - } } } From 361fa8ccc2bcc995e4cf0010a501c1b18972e357 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 12:41:21 +0200 Subject: [PATCH 0382/1296] Refactor product-cards-ab.js to handle product loading event --- .../product-cards-ab/product-cards-ab.js | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 8bb4e4d3d..3bcf36049 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -193,23 +193,22 @@ export default function decorate(block, options) { element.remove(); }); - // decorateIcons(underShadow); + if (options) { + window.addEventListener('codeBaseFinishedRunning', () => { + window.adobeDataLayer.push({ + event: 'product loaded', + product: 0, + }); + + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + }); + } + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary }); - - if (options) { - window.adobeDataLayer.push({ - event: 'product loaded', - product: 0, - }); - - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); - } } - -// pr for the hotfix that will surely come tomorrow From e9f3a782953594f4de2992873006bb28a863e7eb Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 12:53:54 +0200 Subject: [PATCH 0383/1296] Remove unnecessary event in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 3bcf36049..5e7ddbc58 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -196,7 +196,6 @@ export default function decorate(block, options) { if (options) { window.addEventListener('codeBaseFinishedRunning', () => { window.adobeDataLayer.push({ - event: 'product loaded', product: 0, }); From 792731634a58c532dcc10ee2195a55ba7b16bdb1 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 12:55:47 +0200 Subject: [PATCH 0384/1296] Update product value to null --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 5e7ddbc58..0fbdf7021 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -196,7 +196,7 @@ export default function decorate(block, options) { if (options) { window.addEventListener('codeBaseFinishedRunning', () => { window.adobeDataLayer.push({ - product: 0, + product: null, }); window.adobeDataLayer.push({ From fb110e40fd4b4d730de8ae8612d5e84ca3d552e9 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:05:19 +0200 Subject: [PATCH 0385/1296] Add delay before pushing product loaded event to adobeDataLayer --- _src/blocks/product-cards-ab/product-cards-ab.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 0fbdf7021..5c38b0cee 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -199,10 +199,12 @@ export default function decorate(block, options) { product: null, }); - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); + setTimeout(() => { + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + }, 1000); }); } From bd6ece5ff929da1b8c2b76f637ac37262994e0c7 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:09:55 +0200 Subject: [PATCH 0386/1296] Refactor product loading logic in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 5c38b0cee..62e4eee66 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -199,12 +199,14 @@ export default function decorate(block, options) { product: null, }); - setTimeout(() => { - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); - }, 1000); + window.adobeDataLayer.push({ + product: null, + }); + + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); }); } From 1c2debbb62e8d1d29e9f273bb9c5702fcf551862 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:11:35 +0200 Subject: [PATCH 0387/1296] Add 'event' property to adobeDataLayer push --- _src/blocks/product-cards-ab/product-cards-ab.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 62e4eee66..7ef31b51d 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -200,7 +200,8 @@ export default function decorate(block, options) { }); window.adobeDataLayer.push({ - product: null, + event: 'product loaded', + product: adobeDataLayerArray, }); window.adobeDataLayer.push({ From 64ac53bdd865c63505feb96846b28a7892535799 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:13:02 +0200 Subject: [PATCH 0388/1296] Add loop to push product loaded event to adobeDataLayer --- _src/blocks/product-cards-ab/product-cards-ab.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 7ef31b51d..c63ae87de 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -199,6 +199,13 @@ export default function decorate(block, options) { product: null, }); + for (let i = 0; i < 100; i += 1) { + window.adobeDataLayer.push({ + event: 'product loaded', + product: adobeDataLayerArray, + }); + } + window.adobeDataLayer.push({ event: 'product loaded', product: adobeDataLayerArray, From 95ef66f090c4e8359614f9354ca5c94bba3b2771 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:13:44 +0200 Subject: [PATCH 0389/1296] Increase loop iteration count from 100 to 1000 --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index c63ae87de..78b99d479 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -199,7 +199,7 @@ export default function decorate(block, options) { product: null, }); - for (let i = 0; i < 100; i += 1) { + for (let i = 0; i < 1000; i += 1) { window.adobeDataLayer.push({ event: 'product loaded', product: adobeDataLayerArray, From f8eb95f064c01fd90883aa5bc8c242a71f7b3183 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:14:54 +0200 Subject: [PATCH 0390/1296] Increase loop iteration count in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 78b99d479..053fb3387 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -199,7 +199,7 @@ export default function decorate(block, options) { product: null, }); - for (let i = 0; i < 1000; i += 1) { + for (let i = 0; i < 100000; i += 1) { window.adobeDataLayer.push({ event: 'product loaded', product: adobeDataLayerArray, From c03dd51f25cf764f67e447dce9a5753174d2b5b9 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:16:49 +0200 Subject: [PATCH 0391/1296] Decrease iteration count in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 053fb3387..90aa5728b 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -199,7 +199,7 @@ export default function decorate(block, options) { product: null, }); - for (let i = 0; i < 100000; i += 1) { + for (let i = 0; i < 20000; i += 1) { window.adobeDataLayer.push({ event: 'product loaded', product: adobeDataLayerArray, From f08adf3cf200a97f55202d348df1f0f071cceb1d Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:22:15 +0200 Subject: [PATCH 0392/1296] Remove unnecessary code and optimize product loading --- _src/blocks/product-cards-ab/product-cards-ab.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 90aa5728b..74c54c7ce 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -195,17 +195,6 @@ export default function decorate(block, options) { if (options) { window.addEventListener('codeBaseFinishedRunning', () => { - window.adobeDataLayer.push({ - product: null, - }); - - for (let i = 0; i < 20000; i += 1) { - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); - } - window.adobeDataLayer.push({ event: 'product loaded', product: adobeDataLayerArray, From fc2aaf930615da3ea2041e6e860c92b0accd58de Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 13:25:57 +0200 Subject: [PATCH 0393/1296] Update product loaded event in product-cards-ab.js --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index 74c54c7ce..cf059defe 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -197,7 +197,7 @@ export default function decorate(block, options) { window.addEventListener('codeBaseFinishedRunning', () => { window.adobeDataLayer.push({ event: 'product loaded', - product: adobeDataLayerArray, + product: null, }); window.adobeDataLayer.push({ From d7c13dffe21b4bcf414abbb3c94c7b6429b02625 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 15:19:13 +0200 Subject: [PATCH 0394/1296] Refactor product-cards-ab.js to use async/await for better performance --- _src/blocks/product-cards-ab/product-cards-ab.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index cf059defe..e2aa128ef 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -7,7 +7,7 @@ /* eslint-disable max-len */ let adobeDataLayerArray = []; -export default function decorate(block, options) { +export default async function decorate(block, options) { const { pid, offtext, yearly, monthly, } = options ? options.metadata : block.closest('.section').dataset; @@ -68,8 +68,8 @@ export default function decorate(block, options) { const tabButtons = productInfoDiv.querySelector('.price-area .tab-buttons'); const tabContent = productInfoDiv.querySelector('.price-area .tab-content'); - // eslint-disable-next-line no-loop-func - productsAsList.forEach(async (prod) => { + // eslint-disable-next-line no-loop-func, no-await-in-loop + await Promise.all(productsAsList.map(async (prod) => { const [prodName, prodUsers, prodYears] = prod.split('/'); const button = document.createElement('button'); @@ -185,7 +185,8 @@ export default function decorate(block, options) { }); } } - }); + })); + } const elementsToRemove = block.querySelectorAll('.product_area'); From 1d461e1640e441e3fee7978d2d61df318d80fd01 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 15:32:06 +0200 Subject: [PATCH 0395/1296] Add global discount percentage to product cards --- _src/blocks/product-cards-ab/product-cards-ab.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index e2aa128ef..f8fa3a0cd 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -30,6 +30,8 @@ export default async function decorate(block, options) { const productCardsElement = parentNode.querySelector('.product-cards-ab'); // Get the container element const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container + let globalDiscountPercentage = 0; + /* eslint-disable no-restricted-syntax */ for (const table of tables) { // Create a new div to replace the table @@ -113,10 +115,10 @@ export default async function decorate(block, options) { tabContent.appendChild(tab); // add discount value to component title - const discountXX = parentNode.querySelector('.product-cards-ab-container h3 strong em'); - const xx = document.createElement('em'); - xx.innerHTML = `${discountPercentage}%`; - discountXX.replaceWith(xx); + + if (discountPercentage > globalDiscountPercentage) { + globalDiscountPercentage = discountPercentage; + } // tabbed code setTimeout(() => { @@ -186,9 +188,13 @@ export default async function decorate(block, options) { } } })); - } + const discountXX = parentNode.querySelector('.product-cards-ab-container h3 strong em'); + const xx = document.createElement('em'); + xx.innerHTML = `${globalDiscountPercentage}%`; + discountXX.replaceWith(xx); + const elementsToRemove = block.querySelectorAll('.product_area'); elementsToRemove.forEach((element) => { element.remove(); From ae14dc4fc704fbc8f3d6b4f6d9db46249f911b2e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 15:41:03 +0200 Subject: [PATCH 0396/1296] Refactor product card tabbed code and improve async/await usage --- .../product-cards-ab/product-cards-ab.js | 127 +++++++++--------- 1 file changed, 60 insertions(+), 67 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index f8fa3a0cd..db31cb44d 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -96,76 +96,69 @@ export default async function decorate(block, options) { tab.classList.add('tab-panel'); tab.setAttribute('id', `${prodName}`); - fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) - .then((product) => { - discountPercentage = Math.round( - (1 - (product.discount.discounted_price) / product.price) * 100, - ); - oldPrice = product.price; - newPrice = product.discount.discounted_price; - let currencyLabel = product.currency_label; - tab.innerHTML = ` -
    - ${currencyLabel}${oldPrice} - ${discountPercentage}% ${offtext} -
    -
    - ${currencyLabel}${newPrice} -
    `; - tabContent.appendChild(tab); - - // add discount value to component title - - if (discountPercentage > globalDiscountPercentage) { - globalDiscountPercentage = discountPercentage; - } + const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); + discountPercentage = Math.round( + (1 - (product.discount.discounted_price) / product.price) * 100, + ); + oldPrice = product.price; + newPrice = product.discount.discounted_price; + let currencyLabel = product.currency_label; + tab.innerHTML = ` +
    + ${currencyLabel}${oldPrice} + ${discountPercentage}% ${offtext} +
    +
    + ${currencyLabel}${newPrice} +
    `; + tabContent.appendChild(tab); + + // add discount value to component title + if (discountPercentage > globalDiscountPercentage) { + globalDiscountPercentage = discountPercentage; + } - // tabbed code - setTimeout(() => { - const tabButton = productInfoDiv.querySelectorAll('.tab-button'); - const tabPanel = productInfoDiv.querySelectorAll('.tab-panel'); - const buybutton = productInfoDiv.querySelector('.buy-button'); - // console.log(tabPanel); - - tabButton.forEach((buttonTab) => { - buttonTab.addEventListener('click', () => { - // Remove "active" class from all tab buttons - tabButton.forEach((tabB) => { - tabB.classList.remove('active'); - }); - - // Add "active" class to the clicked tab button - buttonTab.classList.add('active'); - - // Hide all tab panels - tabPanel.forEach((panel) => { - panel.style.display = 'none'; - }); - - // Show the selected tab panel - const tabId = buttonTab.getAttribute('data-tab'); - const selectedPanel = parentNode.querySelector(`#${tabId}`); - if (selectedPanel) { - selectedPanel.style.display = 'block'; - // replace href with correct buy link - const dataProdLink = buttonTab.dataset.prodlink; - buybutton.href = `/site/Store/buy/${dataProdLink}/${pidLink}`; - } - }); - - // Simulate click on the first tab button - if (tabButton.length > 0) { - tabButton[0].textContent = yearly; - tabButton[1].textContent = monthly; - tabButton[0].click(); - } + // tabbed code + setTimeout(() => { + const tabButton = productInfoDiv.querySelectorAll('.tab-button'); + const tabPanel = productInfoDiv.querySelectorAll('.tab-panel'); + const buybutton = productInfoDiv.querySelector('.buy-button'); + // console.log(tabPanel); + + tabButton.forEach((buttonTab) => { + buttonTab.addEventListener('click', () => { + // Remove "active" class from all tab buttons + tabButton.forEach((tabB) => { + tabB.classList.remove('active'); }); - }, 500); - }) - .catch((err) => { - // eslint-disable-next-line no-console - console.error(err); + + // Add "active" class to the clicked tab button + buttonTab.classList.add('active'); + + // Hide all tab panels + tabPanel.forEach((panel) => { + panel.style.display = 'none'; + }); + + // Show the selected tab panel + const tabId = buttonTab.getAttribute('data-tab'); + const selectedPanel = parentNode.querySelector(`#${tabId}`); + if (selectedPanel) { + selectedPanel.style.display = 'block'; + // replace href with correct buy link + const dataProdLink = buttonTab.dataset.prodlink; + buybutton.href = `/site/Store/buy/${dataProdLink}/${pidLink}`; + } + }); + + // Simulate click on the first tab button + if (tabButton.length > 0) { + tabButton[0].textContent = yearly; + tabButton[1].textContent = monthly; + tabButton[0].click(); + } }); + }, 500); if (options) { const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); From 99ede33a0c8aab7e18ded197dd42722818cd4016 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 15:56:07 +0200 Subject: [PATCH 0397/1296] Refactor solutions-cards-ab.js to use async/await --- .../solutions-cards-ab/solutions-cards-ab.js | 52 ++++++++----------- 1 file changed, 23 insertions(+), 29 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index 1c8de3275..8a3769692 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -2,7 +2,7 @@ /* eslint-disable no-undef */ /* eslint-disable max-len */ let adobeDataLayerArray = []; -export default function decorate(block, options) { +export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars pid, offtext, @@ -64,8 +64,8 @@ export default function decorate(block, options) { const productsAsList = productArea.split(','); const tabContent = productInfoDiv.querySelector('.price-area'); - // eslint-disable-next-line no-loop-func - productsAsList.forEach(async (prod) => { + // eslint-disable-next-line no-loop-func, no-await-in-loop + await Promise.all(productsAsList.map(async (prod) => { const [prodName, prodUsers, prodYears] = prod.split('/'); const { fetchProduct } = await import('../../scripts/utils/utils.js'); @@ -83,15 +83,14 @@ export default function decorate(block, options) { tab.classList.add('tab-panel'); tab.setAttribute('id', `${prodName}`); - fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) - .then((product) => { - discountPercentage = Math.round( - (1 - (product.discount.discounted_price) / product.price) * 100, - ); - oldPrice = product.price; - newPrice = product.discount.discounted_price; - let currencyLabel = product.currency_label; - tab.innerHTML = ` + const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); + discountPercentage = Math.round( + (1 - (product.discount.discounted_price) / product.price) * 100, + ); + oldPrice = product.price; + newPrice = product.discount.discounted_price; + let currencyLabel = product.currency_label; + tab.innerHTML = `
    ${currencyLabel}${oldPrice} ${discountPercentage}% ${offtext} @@ -99,22 +98,17 @@ export default function decorate(block, options) {
    ${currencyLabel}${newPrice}
    `; - tabContent.appendChild(tab); - - // add discount value to component title - const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); - const xx = document.createElement('em'); - xx.innerHTML = `${discountPercentage}%`; - discountXX.replaceWith(xx); - - // replace href with correct buy link - const buybutton = productInfoDiv.querySelector('.buy-button'); - buybutton.href = `/site/Store/buy/${prodName}/${prodUsers}/${prodYears}/${pidLink}`; - }) - .catch((err) => { - // eslint-disable-next-line no-console - console.error(err); - }); + tabContent.appendChild(tab); + + // add discount value to component title + const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); + const xx = document.createElement('em'); + xx.innerHTML = `${discountPercentage}%`; + discountXX.replaceWith(xx); + + // replace href with correct buy link + const buybutton = productInfoDiv.querySelector('.buy-button'); + buybutton.href = `/site/Store/buy/${prodName}/${prodUsers}/${prodYears}/${pidLink}`; if (options) { const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); @@ -136,7 +130,7 @@ export default function decorate(block, options) { }); } } - }); + })); } const elementsToRemove = block.querySelectorAll('.product_area'); From 330bdb2091cc59345fce48d1188f07a90e16d89e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 15:57:43 +0200 Subject: [PATCH 0398/1296] Add global discount percentage to component title --- .../solutions-cards-ab/solutions-cards-ab.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index 8a3769692..b74a4917e 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -28,6 +28,8 @@ export default async function decorate(block, options) { const productCardsElement = parentNode.querySelector('.solutions-cards-ab.block'); // Get the container element const tables = productCardsElement.querySelectorAll('table'); // Find all tables within the container + let globalDiscountPercentage = 0; + /* eslint-disable no-restricted-syntax */ for (const table of tables) { // Create a new div to replace the table @@ -101,10 +103,9 @@ export default async function decorate(block, options) { tabContent.appendChild(tab); // add discount value to component title - const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); - const xx = document.createElement('em'); - xx.innerHTML = `${discountPercentage}%`; - discountXX.replaceWith(xx); + if (discountPercentage > globalDiscountPercentage) { + globalDiscountPercentage = discountPercentage; + } // replace href with correct buy link const buybutton = productInfoDiv.querySelector('.buy-button'); @@ -153,6 +154,11 @@ export default async function decorate(block, options) { } } + const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); + const xx = document.createElement('em'); + xx.innerHTML = `${discountPercentage}%`; + discountXX.replaceWith(xx); + window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary From 74f1cc4c5bb566db3a4b6060d2827774393370f0 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 16:00:26 +0200 Subject: [PATCH 0399/1296] Update discount percentage variable in solutions-cards-ab.js --- _src/blocks/solutions-cards-ab/solutions-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index b74a4917e..fae36bb69 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -156,7 +156,7 @@ export default async function decorate(block, options) { const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); const xx = document.createElement('em'); - xx.innerHTML = `${discountPercentage}%`; + xx.innerHTML = `${globalDiscountPercentage}%`; discountXX.replaceWith(xx); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { From ec717939c83f2c958dd73495b014a2ce2119dfa6 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 16:07:15 +0200 Subject: [PATCH 0400/1296] Refactor solutions-cards-ab.js to filter out specific products from the allProducts array --- .../solutions-cards-ab/solutions-cards-ab.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js index fae36bb69..6a954cbf8 100644 --- a/_src/blocks/solutions-cards-ab/solutions-cards-ab.js +++ b/_src/blocks/solutions-cards-ab/solutions-cards-ab.js @@ -140,18 +140,20 @@ export default async function decorate(block, options) { }); if (options) { - const allProducts = window.adobeDataLayer.find((productEvent) => productEvent.event === 'product all'); - if (allProducts) { - const allProductsJson = JSON.parse(JSON.stringify(allProducts)); - allProductsJson.all = allProductsJson.all.filter((product) => product.info.name !== 'Bitdefender Premium Security' && product.info.name !== 'Bitdefender Premium Security Plus'); - allProductsJson.all = allProductsJson.all.concat(adobeDataLayerArray); - - window.adobeDataLayer.push({ - all: null, - }); - - window.adobeDataLayer.push(allProductsJson); - } + window.addEventListener('codeBaseFinishedRunning', () => { + const allProducts = window.adobeDataLayer.find((productEvent) => productEvent.event === 'product all'); + if (allProducts) { + const allProductsJson = JSON.parse(JSON.stringify(allProducts)); + allProductsJson.all = allProductsJson.all.filter((product) => product.info.name !== 'Bitdefender Premium Security' && product.info.name !== 'Bitdefender Premium Security Plus'); + allProductsJson.all = allProductsJson.all.concat(adobeDataLayerArray); + + window.adobeDataLayer.push({ + all: null, + }); + + window.adobeDataLayer.push(allProductsJson); + } + }); } const discountXX = parentNode.querySelector('.solutions-cards-ab-wrapper h3 strong em'); From 47e81aed993e977be2ce59941d18b8a019a563fc Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 16:26:20 +0200 Subject: [PATCH 0401/1296] Refactor product card display and add error handling --- .../product-cards-ab/product-cards-ab.js | 157 +++++++++--------- 1 file changed, 80 insertions(+), 77 deletions(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index db31cb44d..e70bfdcee 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -95,91 +95,94 @@ export default async function decorate(block, options) { const tab = document.createElement('div'); tab.classList.add('tab-panel'); tab.setAttribute('id', `${prodName}`); - const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); - discountPercentage = Math.round( - (1 - (product.discount.discounted_price) / product.price) * 100, - ); - oldPrice = product.price; - newPrice = product.discount.discounted_price; - let currencyLabel = product.currency_label; - tab.innerHTML = ` -
    - ${currencyLabel}${oldPrice} - ${discountPercentage}% ${offtext} -
    -
    - ${currencyLabel}${newPrice} -
    `; - tabContent.appendChild(tab); - - // add discount value to component title - if (discountPercentage > globalDiscountPercentage) { - globalDiscountPercentage = discountPercentage; - } - - // tabbed code - setTimeout(() => { - const tabButton = productInfoDiv.querySelectorAll('.tab-button'); - const tabPanel = productInfoDiv.querySelectorAll('.tab-panel'); - const buybutton = productInfoDiv.querySelector('.buy-button'); - // console.log(tabPanel); - - tabButton.forEach((buttonTab) => { - buttonTab.addEventListener('click', () => { - // Remove "active" class from all tab buttons - tabButton.forEach((tabB) => { - tabB.classList.remove('active'); - }); - - // Add "active" class to the clicked tab button - buttonTab.classList.add('active'); + try { + discountPercentage = Math.round( + (1 - (product.discount.discounted_price) / product.price) * 100, + ); + oldPrice = product.price; + newPrice = product.discount.discounted_price; + let currencyLabel = product.currency_label; + tab.innerHTML = ` +
    + ${currencyLabel}${oldPrice} + ${discountPercentage}% ${offtext} +
    +
    + ${currencyLabel}${newPrice} +
    `; + tabContent.appendChild(tab); + // add discount value to component title, only if it's not a monthly subscription + // this is due to an a/b test and should be removed after the test is finished + if (discountPercentage > globalDiscountPercentage && prodName !== 'psm' && prodName !== 'pspm') { + globalDiscountPercentage = discountPercentage; + } - // Hide all tab panels - tabPanel.forEach((panel) => { - panel.style.display = 'none'; + // tabbed code + setTimeout(() => { + const tabButton = productInfoDiv.querySelectorAll('.tab-button'); + const tabPanel = productInfoDiv.querySelectorAll('.tab-panel'); + const buybutton = productInfoDiv.querySelector('.buy-button'); + // console.log(tabPanel); + + tabButton.forEach((buttonTab) => { + buttonTab.addEventListener('click', () => { + // Remove "active" class from all tab buttons + tabButton.forEach((tabB) => { + tabB.classList.remove('active'); + }); + + // Add "active" class to the clicked tab button + buttonTab.classList.add('active'); + + // Hide all tab panels + tabPanel.forEach((panel) => { + panel.style.display = 'none'; + }); + + // Show the selected tab panel + const tabId = buttonTab.getAttribute('data-tab'); + const selectedPanel = parentNode.querySelector(`#${tabId}`); + if (selectedPanel) { + selectedPanel.style.display = 'block'; + // replace href with correct buy link + const dataProdLink = buttonTab.dataset.prodlink; + buybutton.href = `/site/Store/buy/${dataProdLink}/${pidLink}`; + } }); - // Show the selected tab panel - const tabId = buttonTab.getAttribute('data-tab'); - const selectedPanel = parentNode.querySelector(`#${tabId}`); - if (selectedPanel) { - selectedPanel.style.display = 'block'; - // replace href with correct buy link - const dataProdLink = buttonTab.dataset.prodlink; - buybutton.href = `/site/Store/buy/${dataProdLink}/${pidLink}`; + // Simulate click on the first tab button + if (tabButton.length > 0) { + tabButton[0].textContent = yearly; + tabButton[1].textContent = monthly; + tabButton[0].click(); } }); + }, 500); + } catch (error) { + console.error(error); + } - // Simulate click on the first tab button - if (tabButton.length > 0) { - tabButton[0].textContent = yearly; - tabButton[1].textContent = monthly; - tabButton[0].click(); - } - }); - }, 500); - - if (options) { - const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); - const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); - if (!storeOption.getName().includes('Monthly')) { - adobeDataLayerArray.push({ - info: { - ID: storeOption.getAvangateId(), - name: storeOption.getName(), - devices: storeOption.getDevices(), - subscription: storeOption.getSubscription('months'), - version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', - basePrice: storeOption.getPrice('value'), - discountValue: storeOption.getDiscount('value'), - discountRate: storeOption.getDiscount('percentage'), - currency: storeOption.getCurrency(), - priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), - }, - }); - } + if (options) { + const storeProduct = await options.store.getProducts([new ProductInfo(prodName, 'consumer')]); + const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); + if (!storeOption.getName().includes('Monthly')) { + adobeDataLayerArray.push({ + info: { + ID: storeOption.getAvangateId(), + name: storeOption.getName(), + devices: storeOption.getDevices(), + subscription: storeOption.getSubscription('months'), + version: storeOption.getSubscription('months') === 1 ? 'monthly' : 'yearly', + basePrice: storeOption.getPrice('value'), + discountValue: storeOption.getDiscount('value'), + discountRate: storeOption.getDiscount('percentage'), + currency: storeOption.getCurrency(), + priceWithTax: storeOption.getDiscountedPrice('value') || storeOption.getPrice('value'), + }, + }); } + } })); } From dc11201f14eda4998c49f542534fcc0626e9ea73 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 29 Mar 2024 16:34:50 +0200 Subject: [PATCH 0402/1296] Remove console.log and add error handling --- _src/blocks/product-cards-ab/product-cards-ab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index e70bfdcee..027d6fabe 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -123,7 +123,6 @@ export default async function decorate(block, options) { const tabButton = productInfoDiv.querySelectorAll('.tab-button'); const tabPanel = productInfoDiv.querySelectorAll('.tab-panel'); const buybutton = productInfoDiv.querySelector('.buy-button'); - // console.log(tabPanel); tabButton.forEach((buttonTab) => { buttonTab.addEventListener('click', () => { @@ -160,6 +159,7 @@ export default async function decorate(block, options) { }); }, 500); } catch (error) { + // eslint-disable-next-line no-console console.error(error); } From a2de20f7a9973013265028f6b37518ec7c43a518 Mon Sep 17 00:00:00 2001 From: andserban Date: Mon, 1 Apr 2024 13:58:58 +0300 Subject: [PATCH 0403/1296] fix --- _src/blocks/tabs-component/tabs-component.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/_src/blocks/tabs-component/tabs-component.css b/_src/blocks/tabs-component/tabs-component.css index 319d90056..0d0d21f1f 100644 --- a/_src/blocks/tabs-component/tabs-component.css +++ b/_src/blocks/tabs-component/tabs-component.css @@ -99,13 +99,7 @@ } .tabs-component-container .card-container a::after { - content: '\2192'; - width: 24px; - height: 24px; - display: inline-block; - transition: all .2s cubic-bezier(.4,0,.2,1); - transform: translateX(0); - margin-left: 2px; + background-color:#006dff; } .tabs-component-container .card-container a:hover::after { From 8dbb67e42d0120adc5673694dda6f069140af4b5 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 5 Apr 2024 12:34:23 +0300 Subject: [PATCH 0404/1296] Update block decorations and container styles --- _src/blocks/awards/awards.css | 35 +- _src/blocks/awards/awards.js | 8 +- .../bitdef-vs-brands/bitdef-vs-brands.css | 31 ++ .../bitdef-vs-brands/bitdef-vs-brands.js | 25 +- .../bitdefender-central.css | 310 +++++++++++++++++- .../bitdefender-central.js | 61 +++- _src/blocks/four-cards/four-cards.css | 178 ++++++++-- _src/blocks/four-cards/four-cards.js | 9 +- _src/blocks/hero-aem/hero-aem.js | 15 +- _src/blocks/money-back/money-back.css | 109 +++++- _src/blocks/money-back/money-back.js | 73 +---- .../system-requirements.css | 31 ++ .../system-requirements.js | 12 +- _src/blocks/tabs-component/tabs-component.css | 44 ++- _src/blocks/tabs-component/tabs-component.js | 13 +- _src/blocks/terms/terms.js | 13 + .../testimonials-component.css | 29 ++ .../testimonials-component.js | 9 +- _src/scripts/lib-franklin-api.js | 102 +++++- 19 files changed, 951 insertions(+), 156 deletions(-) diff --git a/_src/blocks/awards/awards.css b/_src/blocks/awards/awards.css index 080233711..bf77fc3db 100644 --- a/_src/blocks/awards/awards.css +++ b/_src/blocks/awards/awards.css @@ -21,6 +21,15 @@ border-radius: 20px; } +.awards-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + .awards-component { display: flex; justify-content: center; @@ -72,6 +81,8 @@ .awards-component > div:nth-child(3) div img { min-height: 56px; height: auto; + max-width: 100%; + width: auto; } @media (min-width: 580px) { @@ -87,7 +98,7 @@ } } -@media (min-width: 990px) { +@media (min-width: 992px) { .awards-component > div:nth-child(3) { flex-wrap: nowrap; justify-content: space-around; @@ -114,9 +125,15 @@ .awards-container .block.awards-component { padding-bottom: 40px; } + + .awards-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } } -@media (min-width: 1199px) { +@media (min-width: 1200px) { .awards-component { display: flex; justify-content: center; @@ -170,4 +187,18 @@ line-height: 25px; margin-bottom: 35px; } + + .awards-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } +} + +@media (width >= 1600px) { + .awards-containe.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } } diff --git a/_src/blocks/awards/awards.js b/_src/blocks/awards/awards.js index 8e117a104..58d8c2b72 100644 --- a/_src/blocks/awards/awards.js +++ b/_src/blocks/awards/awards.js @@ -1,5 +1,11 @@ // eslint-disable-next-line no-unused-vars -export default function decorate(block) { +export default function decorate(block, options) { + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + const blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); + } window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css index 03a47ae46..b5b42758c 100644 --- a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.css @@ -16,6 +16,15 @@ align-items: center; } +.bitdef-vs-brands-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + .bitdef-vs-brands-wrapper h2 { font: normal normal bold 32px/37px Arial, sans-serif; } @@ -177,4 +186,26 @@ .bitdef-vs-brands-wrapper .table-container { max-width: 410px; } + + .bitdef-vs-brands-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } +} + +@media (width >= 1200px) { + .bitdef-vs-brandss-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } +} + +@media (width >= 1600px) { + .bitdef-vs-brandss-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } } diff --git a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js index 51415ff16..e42778bb7 100644 --- a/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js +++ b/_src/blocks/bitdef-vs-brands/bitdef-vs-brands.js @@ -1,6 +1,13 @@ // eslint-disable-next-line no-unused-vars -export default function decorate(block) { - const tables = document.querySelectorAll('.bitdef-vs-brands-wrapper table'); +export default function decorate(block, options) { + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + const blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); + } + + const tables = block.querySelectorAll('.bitdef-vs-brands-wrapper table'); tables.forEach((table) => { const parentDiv = table.closest('div'); @@ -24,7 +31,7 @@ export default function decorate(block) { }); }); // Select the first div within the .bitdef-vs-brands container - const firstDiv = document.querySelector('.bitdef-vs-brands > div'); + const firstDiv = block.querySelector('.bitdef-vs-brands > div'); // Add class 'heading-container' to the first div firstDiv.classList.add('heading-container'); @@ -39,13 +46,13 @@ export default function decorate(block) { } // Insert the new container after the first div - const bitdefContainer = document.querySelector('.bitdef-vs-brands'); + const bitdefContainer = block; bitdefContainer.insertBefore(newContainerDiv, firstDiv.nextSibling); // Animation - const sections = document.querySelectorAll('.bitdef-vs-brands'); + const section = block; - const options = { + const threshold = { threshold: 0.5, // Trigger animation when 50% of the section is visible }; @@ -66,11 +73,9 @@ export default function decorate(block) { entry.target.dataset.animationTriggered = true; } }); - }), options); + }), threshold); - sections.forEach((section) => { - observer.observe(section); - }); + observer.observe(section); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/blocks/bitdefender-central/bitdefender-central.css b/_src/blocks/bitdefender-central/bitdefender-central.css index 009d6b8b7..5506c1c72 100644 --- a/_src/blocks/bitdefender-central/bitdefender-central.css +++ b/_src/blocks/bitdefender-central/bitdefender-central.css @@ -1,3 +1,74 @@ +.bitdefender-central-container { + --dark-background-color: #000; + --black-color: #000; + --white-color: #fff; + --background-color: #fff; + --link-color: #005ed9; + --link-hover-color: #00439c; + --button-link-color: #fff; + --button-background-color: #eb0000; + --button-hover-background-color: #d80000; + --button-primary-background-color: #000; + --button-primary-hover-background-color: #000; + --button-secondary-color: #000; + --button-secondary-hover-background-color: #000; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + --text-error-color: #f00; + --color-highlight-blue: #006dff; + --color-dark-gray: #616161; + --checkbox-label: #3c3c3c; + --highlight-light-blue: #f3f7fe; + --text-dark-color: #fff; + --horizontal-separator-color: #dedede; + --modal-background-color: rgb(0 0 0 / 50%); + --background-color-light-sky-blue: #e4f2ff; + --icon-color: #205fff; + --background-light-blue: #d9eeff; + --background-blue: #005ed9; + --dark-blue-tag: #005eff; + --light-blue-tag: #13b0a7; + --green-tag: #218728; + --dark-shadow: #0000001a; + --background-checkmark: #61AF53; + --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; + --heading-font-family: var(--body-font-family); + --fixed-font-family: var(--body-font-family); + --font-weight-thin: 300; + --font-weight-regular: 400; + --font-weight-bold: 500; + --font-weight-bolder: 600; + --font-weight-boldest: 700; + --font-weight-heavy: 900; + --body-font-size-l: 22px; + --body-font-size-m: 18px; + --body-font-size-s: 16px; + --body-font-size-xs: 14px; + --body-font-size-xxs: 12px; + --body-font-size-xxxs: 10px; + --heading-font-size-xxxl: 60px; + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + --heading-font-size-xxs: 16px; + --nav-height: 63px; + --nav-height-desktop: 40px; + --body-max-width: 1920px; + --body-padding: 20px; + --section-desktop-max-width: 1300px; + --section-desktop-padding: 20px; + --section-large-desktop-max-width: 1332px; + --section-large-desktop-padding: 50px; + --section-desktop-padding-vertical: 48px; + --section-mobile-padding-vertical: 32px; + --cta-background-light-blue: var(--background-light-blue); +} + + @media (min-width: 992px) { /* desktop */ .bitdefender-central-wrapper { max-width: var(--section-desktop-max-width); @@ -19,6 +90,15 @@ grid-gap: 32px; } +.bitdefender-central-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + .bitdefender-central.block > div > div { background-color: #F8F8F8; border-radius: 20px; @@ -74,60 +154,60 @@ min-width: 180px; } -.bitdefender-central.block > div > div:first-of-type a.button.blue { +.bitdefender-central.block > div > div:first-of-type a.blue { background-color: #006EFF; color: white; } -.bitdefender-central.block > div > div:first-of-type a.button:focus { +.bitdefender-central.block > div > div:first-of-type a:focus { outline: 2px solid #48C1FF; border-radius: 13px; outline-offset: 2px; } -.bitdefender-central.block > div > div:first-of-type a.button:hover { +.bitdefender-central.block > div > div:first-of-type a:hover { padding: 14px 28px; background: #006EFF; color: #fff; } -.bitdefender-central.block > div > div:first-of-type a.button.blue:hover { +.bitdefender-central.block > div > div:first-of-type a.blue:hover { background-color: #0A53C5; border: 2px solid #0A53C5; color: white; } -.bitdefender-central.block > div > div:first-of-type a.button:active { +.bitdefender-central.block > div > div:first-of-type a:active { background: #0D499B; order: 2px solid #0D499B; } -.bitdefender-central.block > div > div:first-of-type a.button.blue:active { +.bitdefender-central.block > div > div:first-of-type a.blue:active { background: #0A53C5; order: 2px solid #0A53C5; } -.bitdefender-central.block > div > div:first-of-type a.button:disabled { +.bitdefender-central.block > div > div:first-of-type a:disabled { background: transparent; order: 2px solid #B7B7B7; color: #B7B7B7; } -.bitdefender-central.block > div > div:first-of-type a.button.blue:disabled { +.bitdefender-central.block > div > div:first-of-type a.blue:disabled { background: #E7E7E7; order: 2px solid #B7B7B7; color: #B7B7B7; } -.bitdefender-central.block > div > div:first-of-type a.button span.button-text { +.bitdefender-central.block > div > div:first-of-type a span { transition: none; } -.bitdefender-central.block > div > div:first-of-type a.button:hover span.button-text { +.bitdefender-central.block > div > div:first-of-type a:hover span { transform: none; } -.bitdefender-central.block > div > div:first-of-type a.button::after { +.bitdefender-central.block > div > div:first-of-type a::after { content: ''; width: 0; height: 0; @@ -166,6 +246,7 @@ background-color: white; padding: 6px; border-radius: 16px; + display: block; } .bitdefender-central.block > div > div:first-of-type .linked-image-container { @@ -179,8 +260,215 @@ height: 46px; } +a.video-placeholder { + position: relative; + display: inline-block; + color: var(--button-link-color); +} + +.video-placeholder .video-placeholder-play { + box-sizing: border-box; + position: absolute; + top: 50%; + left: 50%; + display: block; + transform: scale(3); + width: 1.375rem; + height: 1.375rem; + border: 0.125rem solid; + border-radius: 1.25rem; + padding: 0; + background-color: #2020e0; + border-color: #2020e0; + opacity: 0.8; + transition: opacity .3s ease-in-out; +} + +.video-placeholder:hover .video-placeholder-play { + opacity: 1; +} + +.video-placeholder .video-placeholder-play::before { + content: ''; + display: block; + box-sizing: border-box; + position: absolute; + width: 0; + height: 0.625rem; + border-top: 0.3125rem solid transparent; + border-bottom: 0.3125rem solid transparent; + border-left: 0.375rem solid; + top: 0.25rem; + left: 0.4375rem; +} + +/* modal */ +.modal-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--modal-background-color); + z-index: 999; +} + +.modal-container .modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px 30px 30px; + border-radius: 8px; + box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%); + border: 1px solid #707070; + width: 75%; + max-height: 90%; + overflow: auto; + opacity: 1; + animation: fade-in 0.5s ease-in-out forwards; +} + +.modal-container .modal-content .section:first-child { + border-bottom: 1px solid var(--horizontal-separator-color); + padding-bottom: 15px; +} + +.modal-container .modal-content .modal-close { + height: 30px; + width: 30px; + border: 0; + padding: 1px 1px 0 0; + border-radius: 50%; + position: absolute; + top: 25px; + right: 27px; + cursor: pointer; + transition: all .3s ease-in-out; + outline: none; +} + +.modal-container .modal-content .modal-close::before { + content: ""; + position: absolute; + top: 13px; + left: 4px; + width: 26px; + height: 2px; + background: #000; + transform: rotate(45deg); + transition: all .3s ease-in-out; +} + +.modal-container .modal-content .modal-close::after { + content: ""; + position: absolute; + top: 13px; + left: 4px; + width: 26px; + height: 2px; + background: #000; + transform: rotate(133deg); + transition: all .3s ease-in-out; +} + +.modal-container .columns-wrapper img { + height: 225px; +} + +.modal-container.video-modal .modal-content { + background-color: transparent; + border: none; + box-shadow: none; + padding-top: 40px; + width: 100%; + max-width: 900px; +} + +.modal-container.video-modal .modal-content .section:first-child { + border-bottom: none; +} + +.modal-container.video-modal .modal-content .modal-close { + position: absolute; + top: 0; + width: 32px; + height: 32px; + opacity: 0.3; + background-color: unset; +} + +.modal-container.video-modal .modal-content .modal-close:hover { + opacity: 1; +} + +.modal-container.video-modal .modal-content .modal-close::after, .modal-container.video-modal .modal-content .modal-close::before { + position: absolute; + content: ' '; + height: 33px; + width: 2px; + background-color: #040dfd; +} + +.modal-container.video-modal .modal-content .modal-close::after { + transform: rotate(45deg); +} + +.modal-container.video-modal .modal-content .modal-close::before { + transform: rotate(-45deg); +} + +@media (width >= 992px) { + .bitdefender-central-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } + + .video-placeholder .video-placeholder-play { + width: 2rem; + height: 2rem; + } + + .video-placeholder .video-placeholder-play::before { + height: 1rem; + top: 0.39rem; + left: 0.625rem; + border-top: 0.5rem solid transparent; + border-bottom: 0.5rem solid transparent; + border-left: 0.7rem solid; + } + + .modal-container .modal-content { + padding: 52px 62px 54px 55px; + max-width: 660px; + } + + .modal-container .modal-content .columns-wrapper { + padding-left: 0; + padding-right: 0; + } +} + +@media (width >= 1200px) { + .bitdefender-central-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } +} + @media (max-width: 1271px) { .bitdefender-central.block > div > div:last-of-type { width: 600px; } +} + +@media (width >= 1600px) { + .bitdefender-central-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } } \ No newline at end of file diff --git a/_src/blocks/bitdefender-central/bitdefender-central.js b/_src/blocks/bitdefender-central/bitdefender-central.js index 2c3a38de6..c1adb0480 100644 --- a/_src/blocks/bitdefender-central/bitdefender-central.js +++ b/_src/blocks/bitdefender-central/bitdefender-central.js @@ -1,20 +1,59 @@ -import { decorateIcons, createOptimizedPicture } from '../../scripts/lib-franklin.js'; -import { getDatasetFromSection } from '../../scripts/utils/utils.js'; +function embedYoutube(url, autoplay) { + const usp = new URLSearchParams(url.search); + const suffix = autoplay ? '&muted=1&autoplay=1' : ''; + let vid = usp.get('v') ? encodeURIComponent(usp.get('v')) : ''; + const embed = url.pathname; + if (url.origin.includes('youtu.be')) { + [, vid] = url.pathname.split('/'); + } + return `
    + +
    `; +} + +const loadVideoEmbed = (block, link, autoplay) => { + if (block.dataset.embedIsLoaded) { + return; + } + const url = new URL(link); + + const isYoutube = link.includes('youtube') || link.includes('youtu.be'); + + if (isYoutube) { + block.innerHTML = embedYoutube(url, autoplay); + } -export default async function decorate(block) { - const firstButton = document.querySelector('a.button'); + block.dataset.embedIsLoaded = true; +}; + +export default async function decorate(block, options) { + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + const blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); + + // const images = document.querySelectorAll('picture'); + // images.forEach((image) => { + // let parentElement = image.parentElement; + // if (parentElement.tagName === 'A') { + // parentElement = parentElement.parentElement; + // } + // }); + } + + const firstButton = block.querySelector('a.button'); if (firstButton) { firstButton.classList.add('blue'); } - const pictureWrapper = document.createElement('.bitdefender-central.block > div > div:first-of-type p:last-of-type'); - pictureWrapper.classList = 'appstore-playstore-wrapper'; - - const blockDataset = getDatasetFromSection(block); - pictureWrapper.append(createOptimizedPicture(blockDataset.bgImage, 'title')); - // defaultWrapper.append(pictureWrapper); + const link = block.querySelectorAll('a')[3].href; + const wrapper = block.querySelector('.video-placeholder'); + wrapper.addEventListener('click', () => { + loadVideoEmbed(block, link, true); + }); - decorateIcons(block); window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index 66908c708..3269c8b48 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -1,3 +1,73 @@ +.four-cards-container { + --dark-background-color: #000; + --black-color: #000; + --white-color: #fff; + --background-color: #fff; + --link-color: #005ed9; + --link-hover-color: #00439c; + --button-link-color: #fff; + --button-background-color: #eb0000; + --button-hover-background-color: #d80000; + --button-primary-background-color: #000; + --button-primary-hover-background-color: #000; + --button-secondary-color: #000; + --button-secondary-hover-background-color: #000; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + --text-error-color: #f00; + --color-highlight-blue: #006dff; + --color-dark-gray: #616161; + --checkbox-label: #3c3c3c; + --highlight-light-blue: #f3f7fe; + --text-dark-color: #fff; + --horizontal-separator-color: #dedede; + --modal-background-color: rgb(0 0 0 / 50%); + --background-color-light-sky-blue: #e4f2ff; + --icon-color: #205fff; + --background-light-blue: #d9eeff; + --background-blue: #005ed9; + --dark-blue-tag: #005eff; + --light-blue-tag: #13b0a7; + --green-tag: #218728; + --dark-shadow: #0000001a; + --background-checkmark: #61AF53; + --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; + --heading-font-family: var(--body-font-family); + --fixed-font-family: var(--body-font-family); + --font-weight-thin: 300; + --font-weight-regular: 400; + --font-weight-bold: 500; + --font-weight-bolder: 600; + --font-weight-boldest: 700; + --font-weight-heavy: 900; + --body-font-size-l: 22px; + --body-font-size-m: 18px; + --body-font-size-s: 16px; + --body-font-size-xs: 14px; + --body-font-size-xxs: 12px; + --body-font-size-xxxs: 10px; + --heading-font-size-xxxl: 60px; + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + --heading-font-size-xxs: 16px; + --nav-height: 63px; + --nav-height-desktop: 40px; + --body-max-width: 1920px; + --body-padding: 20px; + --section-desktop-max-width: 1300px; + --section-desktop-padding: 20px; + --section-large-desktop-max-width: 1332px; + --section-large-desktop-padding: 50px; + --section-desktop-padding-vertical: 48px; + --section-mobile-padding-vertical: 32px; + --cta-background-light-blue: var(--background-light-blue); +} + @media (min-width: 992px) { /* desktop */ .four-cards-wrapper { max-width: var(--section-desktop-max-width); @@ -13,12 +83,33 @@ } } -.four-cards h3 { +.four-cards-container h3 { font: normal normal bold 32px/37px var(--body-font-family); text-align: center; margin-bottom: 56px; } +.four-cards-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + +/* a/b test styles, should be deleted after */ +.four-cards-container.we-container .default-content-wrapper { + text-align: center; +} + +.four-cards-container .icon svg { + width: 48px; + height: 48px; + padding-right: 2px; + fill: #fff; +} + .four-cards > ul { list-style: none; margin: 0; @@ -42,7 +133,7 @@ text-align: center; } - .four-cards a.button { + .four-cards-container a { font: normal normal bold 16px/20px var(--body-font-family); margin-top: 48px; padding: 14px 28px; @@ -55,44 +146,37 @@ min-width: 180px; } - .four-cards a.button:focus { - outline: 2px solid #48C1FF; - border-radius: 13px; - outline-offset: 2px; - } - - .four-cards a.button:hover { - margin-top: 48px; - padding: 14px 28px; - background: #006EFF; - color: #fff; - } - - .four-cards a.button:active { - background: #0D499B; - order: 2px solid #0D499B; - } - - .four-cards a.button:disabled { - background: white; - order: 2px solid #B7B7B7; - color: #B7B7B7; - } - - .four-cards a.button span.button-text { - transition: none; + .four-cards-container p a { + font-size: 16px; + font-style: normal; + font-weight: 500; + -webkit-font-smoothing: antialiased; + display: inline-flex; + align-items: center; + box-sizing: border-box; + text-decoration: none; + padding: 10px 26px 8px 28px; + text-align: center; + justify-content: center; + cursor: pointer; + color: #006DFF; + background-color: transparent; + border: 2px solid #006DFF; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + border-radius: 8px; + height: fit-content; + transition: all .2s cubic-bezier(.4,0,.2,1); } - .four-cards a.button:hover span.button-text { - transform: none; + .four-cards-container p a:hover { + color: white; + background-color: #006DFF; } - .four-cards a.button::after { - content: ''; - width: 0; - height: 0; - margin: 0; - transition: none; + .four-cards-container p a:active { + background-color: #0D499B; } .four-cards .icon { @@ -106,6 +190,12 @@ padding: var(--body-padding); } + .four-cards-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } + .four-cards > ul { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 14px; @@ -114,4 +204,20 @@ .four-cards > ul > li { margin: 0; } +} + +@media (width >= 1200px) { + .four-cards-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } +} + +@media (width >= 1600px) { + .four-cards-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } } \ No newline at end of file diff --git a/_src/blocks/four-cards/four-cards.js b/_src/blocks/four-cards/four-cards.js index 5db2c6a20..e1aa308ba 100644 --- a/_src/blocks/four-cards/four-cards.js +++ b/_src/blocks/four-cards/four-cards.js @@ -64,7 +64,14 @@ export async function decorateIcons(element) { }); } -export default function decorate(block) { +export default function decorate(block, options) { + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + const blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); + } + const ul = document.createElement('ul'); [...block.children].forEach((row) => { const li = document.createElement('li'); diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index b5363fcb1..10b22eeb4 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -121,11 +121,14 @@ export default function decorate(block, options) { product, conditionText, saveText, MacOS, Windows, Android, IOS, alignContent, } = options.metadata; - const aemContainer = block.children[1]; - aemContainer.classList.add('hero-aem-container'); - aemContainer.classList.add('we-container'); - const underShadow = aemContainer.children[0]; - let [richText, mainDesktopImage, richTextCard, columnsCard] = underShadow.children; + + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + let blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); + } + let [richText, mainDesktopImage, richTextCard, columnsCard] = block.children; // Configuration for new elements richText.classList.add('hero-aem__card__desktop', 'col-md-6'); @@ -139,7 +142,7 @@ export default function decorate(block, options) { mobileImage.classList.add('hero-aem__mobile-image'); // Get all the siblings after h1 - const cardElements = Array.from(underShadow.querySelectorAll('h1 ~ *')); + const cardElements = Array.from(block.querySelectorAll('h1 ~ *')); // Put the siblings in a new div and append it to the block const cardElementContainer = createCardElementContainer(cardElements, mobileImage); diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index 7a6ba944e..b4beb725f 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -1,3 +1,73 @@ +.money-back-container { + --dark-background-color: #000; + --black-color: #000; + --white-color: #fff; + --background-color: #fff; + --link-color: #005ed9; + --link-hover-color: #00439c; + --button-link-color: #fff; + --button-background-color: #eb0000; + --button-hover-background-color: #d80000; + --button-primary-background-color: #000; + --button-primary-hover-background-color: #000; + --button-secondary-color: #000; + --button-secondary-hover-background-color: #000; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + --text-error-color: #f00; + --color-highlight-blue: #006dff; + --color-dark-gray: #616161; + --checkbox-label: #3c3c3c; + --highlight-light-blue: #f3f7fe; + --text-dark-color: #fff; + --horizontal-separator-color: #dedede; + --modal-background-color: rgb(0 0 0 / 50%); + --background-color-light-sky-blue: #e4f2ff; + --icon-color: #205fff; + --background-light-blue: #d9eeff; + --background-blue: #005ed9; + --dark-blue-tag: #005eff; + --light-blue-tag: #13b0a7; + --green-tag: #218728; + --dark-shadow: #0000001a; + --background-checkmark: #61AF53; + --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; + --heading-font-family: var(--body-font-family); + --fixed-font-family: var(--body-font-family); + --font-weight-thin: 300; + --font-weight-regular: 400; + --font-weight-bold: 500; + --font-weight-bolder: 600; + --font-weight-boldest: 700; + --font-weight-heavy: 900; + --body-font-size-l: 22px; + --body-font-size-m: 18px; + --body-font-size-s: 16px; + --body-font-size-xs: 14px; + --body-font-size-xxs: 12px; + --body-font-size-xxxs: 10px; + --heading-font-size-xxxl: 60px; + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + --heading-font-size-xxs: 16px; + --nav-height: 63px; + --nav-height-desktop: 40px; + --body-max-width: 1920px; + --body-padding: 20px; + --section-desktop-max-width: 1300px; + --section-desktop-padding: 20px; + --section-large-desktop-max-width: 1332px; + --section-large-desktop-padding: 50px; + --section-desktop-padding-vertical: 48px; + --section-mobile-padding-vertical: 32px; + --cta-background-light-blue: var(--background-light-blue); +} + .money-back-wrapper { text-align: center; } @@ -22,12 +92,27 @@ border-radius: 20px; } -.money-back h3 { +.money-back-container h3 { font: normal normal bold 32px/37px var(--body-font-family); text-align: center; margin-bottom: 56px; } +.money-back-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + +.money-back-container .icon svg { + width: auto; + height: 32px; + padding-right: 2px; +} + .money-back > ul { list-style: none; margin: 0; @@ -133,4 +218,26 @@ .money-back > ul > li { margin: 0; } + + .money-back-container.we-container { + max-width: 1300px; + padding-left: 50px; + padding-right: 50px; + } +} + +@media (width >= 1200px) { + .money-back-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } +} + +@media (width >= 1600px) { + .money-back-container.we-container { + max-width: 1332px; + padding-left: 20px; + padding-right: 20px; + } } \ No newline at end of file diff --git a/_src/blocks/money-back/money-back.js b/_src/blocks/money-back/money-back.js index 5db2c6a20..e4fbe7ba9 100644 --- a/_src/blocks/money-back/money-back.js +++ b/_src/blocks/money-back/money-back.js @@ -1,70 +1,10 @@ -const ICONS_CACHE = {}; - -export async function decorateIcons(element) { - // Prepare the inline sprite - let svgSprite = document.getElementById('franklin-svg-sprite'); - if (!svgSprite) { - const div = document.createElement('div'); - div.innerHTML = ''; - svgSprite = div.firstElementChild; - document.body.append(div.firstElementChild); +export default function decorate(block, options) { + if (options) { + // eslint-disable-next-line no-param-reassign + block = block.querySelector('.block'); + const blockParent = block.closest('.section'); + blockParent.classList.add('we-container'); } - - // Download all new icons - const icons = [...element.querySelectorAll('span.icon')]; - await Promise.all(icons.map(async (span) => { - const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5); - if (!ICONS_CACHE[iconName]) { - ICONS_CACHE[iconName] = true; - try { - const dynamicIconsSharepointPath = '/icons/'; - const response = await fetch(`${dynamicIconsSharepointPath}${iconName}.svg`); - if (!response.ok) { - ICONS_CACHE[iconName] = false; - return; - } - // Styled icons don't play nice with the sprite approach because of shadow dom isolation - const svg = await response.text(); - if (svg.match(/( + + + + diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 32e592346..446d2c15e 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -408,6 +408,10 @@ main .section.wide h2 { margin-bottom: 50px; } +main .section.migration .carousel img { + height: 56px!important; +} + main .section.wide img { height: 56px; object-fit: contain; @@ -633,6 +637,10 @@ header, main, footer { } } +main .section.migration h2 { + font-size: var(--heading-font-size-m); +} + main .section.py-1 { padding: 0; } @@ -711,6 +719,12 @@ main .section.pb-0 { font-size: var(--heading-font-size-l); font-weight: var(--font-weight-boldest); } + + main .section.migration h2 { + font-size: var(--heading-font-size-l); + font-weight: 500; + line-height: 1.2; + } } @media (min-width: 1400px) { @@ -769,6 +783,10 @@ main pre { p { font-size: var(--body-font-size-s); } + + .section.migration p { + font-size: var(--heading-font-size-xs); + } } main .single-blue-quote .default-content-wrapper { @@ -1006,6 +1024,10 @@ main .video-placeholder .video-placeholder-play::before { border-bottom: 0.5rem solid transparent; border-left: 0.7rem solid; } + + main .section.small-width .default-content-wrapper { + width: 990px; + } } /* Cta section */ From f1f7f3a47b6d7d054a665f8eede4e22bc092019a Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Sat, 24 Aug 2024 21:10:29 +0300 Subject: [PATCH 0958/1296] Feat: scamio page --- _src/blocks/columns/columns.css | 51 +++++++++++++++++++++++++++++++++ _src/styles/styles.css | 51 +++++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 9652a18c2..008c228da 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -17,6 +17,57 @@ } } +.columns-container.chat-options .columns > div > div { + padding: 2em; +} + +.columns-container.chat-options p.button-container a { + background-color: transparent; + border: 2px solid black; + color: black +} + +.columns-container.chat-options p.button-container a:hover { + background-color: black; + color: white; +} + +.columns-container.chat-options table { + width: 100%; +} + +.columns-container.chat-options table tr { + display: flex; + justify-content: space-between; +} + +.columns-container.chat-options table tr td:first-of-type img { + height: 40px; +} + +.columns-container.chat-options table tr td:last-of-type img { + height: 133px; +} + +.columns-container.chat-options p { + font-size: var(--body-font-size-s) !important; +} + +.percent-table .columns table tr { + align-items: center; + display: flex; + justify-content: space-between; +} + +.percent-table .columns table tr td:first-of-type { + font-size: var(--heading-font-size-l); + padding-right: 1.5em; +} + +.percent-table .columns table tr td:last-of-type { + width: 220px; +} + .grey-version .columns > div { display: flex; justify-content: space-between; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 446d2c15e..7c2b48da1 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -408,6 +408,57 @@ main .section.wide h2 { margin-bottom: 50px; } +main .section.table-align-top table { + vertical-align: top; +} + +main .section.table-align-top table tr { + display: flex; + text-align: left; + align-items: center; +} + +main .section.gap-2em table tr { + gap: 2em; +} + +main .section.baby-blue-bck .columns-wrapper { + background-color: #E4F2FF; +} + +main .section.grey-bck .columns-wrapper { + background-color: #F5F5F7; +} + +main .section.radius-corners .columns-wrapper { + border-radius: 1rem; + overflow: hidden; +} + +main .section.radius-corners-10px .columns-wrapper { + border-radius: 10px; + overflow: hidden; +} + +main .section.pl-0 .columns-wrapper { + padding-left: 0; +} + +main .section.pr-0 .columns-wrapper { + padding-right: 0; +} + +main .section.radius-corners .columns-wrapper .columns-img-col { + border-radius: 1rem; + overflow: hidden; + margin-bottom: 0; +} + +main .section.radius-corners-10px .columns-wrapper .columns-img-col, main .section.radius-corners-10px .columns-wrapper .columns-img-col img { + margin-bottom: 0; + border-radius: 0; +} + main .section.migration .carousel img { height: 56px!important; } From ee7f6c52e7873d0d9efa6d7b92e53e982747c16c Mon Sep 17 00:00:00 2001 From: andserban Date: Mon, 26 Aug 2024 13:46:11 +0300 Subject: [PATCH 0959/1296] hide product images --- _src/blocks/products/products.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index edb933227..93a5f17e3 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -195,6 +195,7 @@ margin: 60px 0 25px; top: auto; right: auto; + display: none; } .products.compact .product-card .featured ~ p img { From 09edf335261f68fbfdb9ed87c2f4698ec61cd356 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Mon, 26 Aug 2024 17:02:07 +0300 Subject: [PATCH 0960/1296] creator-box --- _src/blocks/creators-block/creators-block.css | 222 ++++++++++++++++++ _src/blocks/creators-block/creators-block.js | 56 +++++ 2 files changed, 278 insertions(+) create mode 100644 _src/blocks/creators-block/creators-block.css create mode 100644 _src/blocks/creators-block/creators-block.js diff --git a/_src/blocks/creators-block/creators-block.css b/_src/blocks/creators-block/creators-block.css new file mode 100644 index 000000000..2400f156a --- /dev/null +++ b/_src/blocks/creators-block/creators-block.css @@ -0,0 +1,222 @@ +.creator-block-container { + --dark-background-color: #000; + --black-color: #000; + --white-color: #fff; + --background-color: #fff; + --link-color: #005ed9; + --link-hover-color: #00439c; + --button-link-color: #fff; + --button-background-color: #eb0000; + --button-hover-background-color: #d80000; + --button-primary-background-color: #000; + --button-primary-hover-background-color: #000; + --button-secondary-color: #000; + --button-secondary-hover-background-color: #000; + --overlay-background-color: #eee; + --highlight-background-color: #ccc; + --text-color: #000; + --text-error-color: #f00; + --color-highlight-blue: #006dff; + --color-dark-gray: #616161; + --checkbox-label: #3c3c3c; + --highlight-light-blue: #f3f7fe; + --text-dark-color: #fff; + --horizontal-separator-color: #dedede; + --modal-background-color: rgb(0 0 0 / 50%); + --background-color-light-sky-blue: #e4f2ff; + --icon-color: #205fff; + --background-light-blue: #d9eeff; + --background-blue: #005ed9; + --dark-blue-tag: #005eff; + --light-blue-tag: #13b0a7; + --green-tag: #218728; + --dark-shadow: #0000001a; + --background-checkmark: #61AF53; + --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; + --heading-font-family: var(--body-font-family); + --fixed-font-family: var(--body-font-family); + --font-weight-thin: 300; + --font-weight-regular: 400; + --font-weight-bold: 500; + --font-weight-bolder: 600; + --font-weight-boldest: 700; + --font-weight-heavy: 900; + --body-font-size-l: 22px; + --body-font-size-m: 18px; + --body-font-size-s: 16px; + --body-font-size-xs: 14px; + --body-font-size-xxs: 12px; + --body-font-size-xxxs: 10px; + --heading-font-size-xxxl: 60px; + --heading-font-size-xxl: 48px; + --heading-font-size-xl: 40px; + --heading-font-size-l: 32px; + --heading-font-size-m: 24px; + --heading-font-size-s: 20px; + --heading-font-size-xs: 18px; + --heading-font-size-xxs: 16px; + --nav-height: 63px; + --nav-height-desktop: 40px; + --body-max-width: 1920px; + --body-padding: 20px; + --section-desktop-max-width: 1300px; + --section-desktop-padding: 20px; + --section-large-desktop-max-width: 1332px; + --section-large-desktop-padding: 50px; + --section-desktop-padding-vertical: 48px; + --section-mobile-padding-vertical: 32px; + --cta-background-light-blue: var(--background-light-blue); +} + +@media (min-width: 992px) { + /* desktop */ + .creators-block-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (min-width: 1600px) { + /* large desktop */ + .creators-block-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} + +.creators-block-wrapper { + border-radius: 20px; +} + +.creators-block.block>div { + position: relative; + padding-top: 40px; +} + +.creators-block.block>div:first-of-type img { + position: absolute; + right: 0; + top: 40px; +} + +.creators-block.block>div h3 { + text-align: left; + font-size: 60px; + line-height: 70px; + font-family: Arial, sans-serif; + font-weight: normal; + letter-spacing: 0; + color: #FFF; +} + +.creators-block.block>div p { + text-align: left; + font-size: 28px; + line-height: 32px; + font-family: Arial, sans-serif; + font-weight: bold; + letter-spacing: 0; + color: #FFF; +} + +.creators-block.block>div:nth-child(3) { + display: flex; + align-items: center; + justify-content: center; +} + +.creators-block.block>div:nth-child(3) a.button:any-link { + border-radius: 40px; + padding: 18px 25px; + font-size: 18px; + line-height: 24px; + font-family: Roboto, sans-serif; + font-weight: bold; + color: #fff; + margin-bottom: 35px; +} + +.creators-block.block>div:nth-child(2)>div { + display: grid; + grid-template-columns: repeat(5, minmax(220px, 1fr)); + grid-gap: 30px; +} + +.creators-block.block>div:nth-child(2) .creator-box { + display: flex; + position: relative; + width: 220px; + height: 310px; + padding: 16px 23px; +} + +.creators-block.block>div:nth-child(2) .creator-box>div:nth-child(3) { + position: absolute; + color: #fff; + text-align: left; + font-size: 12px; + line-height: 16px; + font-family: Roboto, sans-serif; + font-weight: normal; + bottom: 16px; +} + +.creators-block.block>div:nth-child(2) .creator-box>div:nth-child(2) { + position: absolute; + color: #016DFF; + text-align: left; + font-size: 12px; + line-height: 16px; + font-family: Roboto, sans-serif; + font-weight: normal; + bottom: 33px; +} + +.creators-block.block>div:nth-child(2) .creator-box>div:nth-child(1) { + position: absolute; + color: #fff; + text-align: left; + font-size: 12px; + line-height: 16px; + font-family: Roboto, sans-serif; + font-weight: bold; + bottom: 64px; +} + +.creators-block.block>div:nth-child(2) .creator-box>div:nth-child(1) img { + position: relative; + top: 10px; +} + +@media (max-width: 1200px) { + .creators-block.block>div:nth-child(2)>div { + display: grid; + grid-template-columns: repeat(4, minmax(220px, 1fr)); + grid-gap: 30px; + } +} + +@media (max-width: 1020px) { + .creators-block.block>div:nth-child(2)>div { + display: grid; + grid-template-columns: repeat(3, minmax(220px, 1fr)); + grid-gap: 30px; + } +} + +@media (max-width: 990px) { + .creators-block-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } +} + +@media (max-width: 758px) { + .creators-block.block>div:nth-child(2)>div { + display: grid; + grid-template-columns: repeat(2, minmax(220px, 1fr)); + grid-gap: 30px; + } +} \ No newline at end of file diff --git a/_src/blocks/creators-block/creators-block.js b/_src/blocks/creators-block/creators-block.js new file mode 100644 index 000000000..98ef2d2fc --- /dev/null +++ b/_src/blocks/creators-block/creators-block.js @@ -0,0 +1,56 @@ +export default function decorate(block) { + const parentBlockStyle = block.closest('.section > div').style; + const { + // eslint-disable-next-line no-unused-vars + backgroundColor, + } = block.closest('.section').dataset; + + if (backgroundColor) parentBlockStyle.backgroundColor = backgroundColor; + + block.querySelectorAll('table').forEach((table) => { + const newDiv = document.createElement('div'); + newDiv.classList.add('creator-box'); + + const linkToCreator = table.querySelector('tr:nth-child(4) td'); + const creatorLink = linkToCreator ? linkToCreator.textContent.trim() : ''; + + // Find the image from the last row + const lastRow = table.querySelector('tr:last-child'); + const img = lastRow.querySelector('img'); + let backgroundImage = ''; + + if (img) { + backgroundImage = `url(${img.src})`; + } + + table.querySelectorAll('tr').forEach((tr, rowIndex) => { + // Skip the last row since we've already processed the image + if (rowIndex === table.rows.length - 1) return; + + tr.querySelectorAll('td').forEach((td) => { + const innerDiv = document.createElement('div'); + innerDiv.innerHTML = td.innerHTML; + newDiv.style.backgroundImage = backgroundImage; + newDiv.style.backgroundSize = 'cover'; // Cover the whole div + newDiv.style.backgroundPosition = 'center'; // Center the image + newDiv.appendChild(innerDiv); + }); + }); + + // Remove the 4th div from creator-box + const fourthDiv = newDiv.querySelectorAll('div:nth-child(4)'); + if (fourthDiv.length > 0) { + newDiv.removeChild(fourthDiv[0]); + } + + // Wrap the newDiv in an anchor element if a link is found + if (creatorLink) { + const anchor = document.createElement('a'); + anchor.href = creatorLink; + anchor.appendChild(newDiv); + table.parentNode.replaceChild(anchor, table); + } else { + table.parentNode.replaceChild(newDiv, table); + } + }); +} From dff962f07d83b94391c0659bb830379b21bf0f48 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 26 Aug 2024 17:23:41 +0300 Subject: [PATCH 0961/1296] DEX-19746 | removed unnecessary function --- _src/blocks/products/products.js | 62 -------------------------------- 1 file changed, 62 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index bc9edf3b7..3d8dd4b0c 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -15,68 +15,6 @@ const TEXT_VARIABLES_MAPPING = [ }, ]; -function getBuyLinkCountryPrefix() { - const { pathname } = window.location; - - if (pathname.includes('/en-au/')) { - return 'https://www.bitdefender.com.au/site/Store/buy'; - } - - if (pathname.includes('/en-gb/')) { - return 'https://www.bitdefender.com.uk/site/Store/buy'; - } - - if (pathname.includes('/ro-ro/')) { - return 'https://www.bitdefender.ro/site/Store/buy'; - } - - if (pathname.includes('/it-it/')) { - return 'https://www.bitdefender.it/site/Store/buy'; - } - - if (pathname.includes('/fr-fr/')) { - return 'https://www.bitdefender.fr/site/Store/buy'; - } - - if (pathname.includes('/fr-be/')) { - return 'https://www.bitdefender.be/site/Store/buy'; - } - - if (pathname.includes('/nl-be/')) { - return 'https://www.bitdefender.be/site/Store/buy'; - } - - if (pathname.includes('/nl-nl/')) { - return 'https://www.bitdefender.nl/site/Store/buy'; - } - - if (pathname.includes('/de-de/')) { - return 'https://www.bitdefender.de/site/Store/buy'; - } - - if (pathname.includes('/de-ch/')) { - return 'https://www.bitdefender.de/site/Store/buy'; - } - - if (pathname.includes('/sv-se/')) { - return 'https://www.bitdefender.se/site/Store/buy'; - } - - if (pathname.includes('/pt-br/')) { - return 'https://www.bitdefender.com.br/site/Store/buy'; - } - - if (pathname.includes('/pt-pt/')) { - return 'https://www.bitdefender.pt/site/Store/buy'; - } - - if (pathname.includes('/es-es/')) { - return 'https://www.bitdefender.es/site/Store/buy'; - } - - return 'https://www.bitdefender.com/site/Store/buy'; -} - /** * Utility function to round prices and percentages * @param value value to round From d9817b2121cec81047f9e479f7a2ea702ff6bd70 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Mon, 26 Aug 2024 17:48:07 +0300 Subject: [PATCH 0962/1296] update creator-block --- _src/blocks/creators-block/creators-block.css | 71 +------------------ _src/blocks/creators-block/creators-block.js | 2 +- 2 files changed, 2 insertions(+), 71 deletions(-) diff --git a/_src/blocks/creators-block/creators-block.css b/_src/blocks/creators-block/creators-block.css index 2400f156a..8b4b8157d 100644 --- a/_src/blocks/creators-block/creators-block.css +++ b/_src/blocks/creators-block/creators-block.css @@ -1,73 +1,3 @@ -.creator-block-container { - --dark-background-color: #000; - --black-color: #000; - --white-color: #fff; - --background-color: #fff; - --link-color: #005ed9; - --link-hover-color: #00439c; - --button-link-color: #fff; - --button-background-color: #eb0000; - --button-hover-background-color: #d80000; - --button-primary-background-color: #000; - --button-primary-hover-background-color: #000; - --button-secondary-color: #000; - --button-secondary-hover-background-color: #000; - --overlay-background-color: #eee; - --highlight-background-color: #ccc; - --text-color: #000; - --text-error-color: #f00; - --color-highlight-blue: #006dff; - --color-dark-gray: #616161; - --checkbox-label: #3c3c3c; - --highlight-light-blue: #f3f7fe; - --text-dark-color: #fff; - --horizontal-separator-color: #dedede; - --modal-background-color: rgb(0 0 0 / 50%); - --background-color-light-sky-blue: #e4f2ff; - --icon-color: #205fff; - --background-light-blue: #d9eeff; - --background-blue: #005ed9; - --dark-blue-tag: #005eff; - --light-blue-tag: #13b0a7; - --green-tag: #218728; - --dark-shadow: #0000001a; - --background-checkmark: #61AF53; - --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; - --heading-font-family: var(--body-font-family); - --fixed-font-family: var(--body-font-family); - --font-weight-thin: 300; - --font-weight-regular: 400; - --font-weight-bold: 500; - --font-weight-bolder: 600; - --font-weight-boldest: 700; - --font-weight-heavy: 900; - --body-font-size-l: 22px; - --body-font-size-m: 18px; - --body-font-size-s: 16px; - --body-font-size-xs: 14px; - --body-font-size-xxs: 12px; - --body-font-size-xxxs: 10px; - --heading-font-size-xxxl: 60px; - --heading-font-size-xxl: 48px; - --heading-font-size-xl: 40px; - --heading-font-size-l: 32px; - --heading-font-size-m: 24px; - --heading-font-size-s: 20px; - --heading-font-size-xs: 18px; - --heading-font-size-xxs: 16px; - --nav-height: 63px; - --nav-height-desktop: 40px; - --body-max-width: 1920px; - --body-padding: 20px; - --section-desktop-max-width: 1300px; - --section-desktop-padding: 20px; - --section-large-desktop-max-width: 1332px; - --section-large-desktop-padding: 50px; - --section-desktop-padding-vertical: 48px; - --section-mobile-padding-vertical: 32px; - --cta-background-light-blue: var(--background-light-blue); -} - @media (min-width: 992px) { /* desktop */ .creators-block-wrapper { @@ -149,6 +79,7 @@ width: 220px; height: 310px; padding: 16px 23px; + border-radius: 20px; } .creators-block.block>div:nth-child(2) .creator-box>div:nth-child(3) { diff --git a/_src/blocks/creators-block/creators-block.js b/_src/blocks/creators-block/creators-block.js index 98ef2d2fc..7c47cd185 100644 --- a/_src/blocks/creators-block/creators-block.js +++ b/_src/blocks/creators-block/creators-block.js @@ -30,7 +30,7 @@ export default function decorate(block) { tr.querySelectorAll('td').forEach((td) => { const innerDiv = document.createElement('div'); innerDiv.innerHTML = td.innerHTML; - newDiv.style.backgroundImage = backgroundImage; + newDiv.style.background = `linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000 100%), ${backgroundImage}`; newDiv.style.backgroundSize = 'cover'; // Cover the whole div newDiv.style.backgroundPosition = 'center'; // Center the image newDiv.appendChild(innerDiv); From 40356c863152859d3bb24c4dfd85f66584bc2441 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 27 Aug 2024 14:19:31 +0300 Subject: [PATCH 0963/1296] DEX-19622 | added signature option to hero banner --- _src/blocks/hero/hero.css | 13 +++++++++++++ _src/blocks/hero/hero.js | 13 +++++++++++++ 2 files changed, 26 insertions(+) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 96e8f9fa6..f60a0f252 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -34,6 +34,19 @@ main .hero .hero-content .breadcrumb { margin-bottom: 12px; } +main .hero .hero-content .signature { + font-size: 24px; + color: #006dff; + font-weight: bold; + margin-top: 8px; +} + +@media (min-width: 480px) { + main .hero .hero-content .signature { + margin-bottom: 12px; + } +} + main .hero .hero-content .breadcrumb a { font-size: var(--breadcrumbs-font-size-s); font-weight: var(--font-weight-bold); diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index b7bdc84b0..f6ea5eb0f 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -11,6 +11,12 @@ import { * @param {Element} element The container element */ function buildHeroBlock(element) { + + const { + // check if a signature needs to be added into the banner + signature + } = element.closest('.section').dataset; + const h1 = element.querySelector('h1'); const picture = element.querySelector('picture'); const pictureParent = picture ? picture.parentNode : false; @@ -27,6 +33,12 @@ function buildHeroBlock(element) { document.querySelector('div.hero div div:first-child').prepend(breadcrumb); } + if (signature) { + const signatureElement = createTag('div', { class: 'signature' }); + signatureElement.textContent = signature; + document.querySelector('div.hero div div:first-child').prepend(signatureElement); + } + const pictureEl = document.createElement('div'); pictureEl.classList.add('hero-picture'); pictureEl.append(picture); @@ -75,6 +87,7 @@ export default async function decorate(block) { const { // this defines wether the modals automatically refresh or not in the hero banner stopAutomaticModalRefresh, + signature } = block.closest('.section').dataset; buildHeroBlock(block); From 3a0853522e762e31a4f81d6dbb37c7c4ec780ed1 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 27 Aug 2024 15:57:35 +0300 Subject: [PATCH 0964/1296] DEX-19622 | fixed linting --- _src/blocks/hero/hero.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index f6ea5eb0f..5e4cd1a8d 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -11,10 +11,9 @@ import { * @param {Element} element The container element */ function buildHeroBlock(element) { - const { // check if a signature needs to be added into the banner - signature + signature, } = element.closest('.section').dataset; const h1 = element.querySelector('h1'); @@ -87,7 +86,6 @@ export default async function decorate(block) { const { // this defines wether the modals automatically refresh or not in the hero banner stopAutomaticModalRefresh, - signature } = block.closest('.section').dataset; buildHeroBlock(block); From 75a8c3b3b52adb0bf5c548780bcb726a3af613cf Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 27 Aug 2024 16:03:07 +0300 Subject: [PATCH 0965/1296] DEX-19622 | moved the code to make a single dataset parsing --- _src/blocks/hero/hero.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index 5e4cd1a8d..0f029149c 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -11,11 +11,6 @@ import { * @param {Element} element The container element */ function buildHeroBlock(element) { - const { - // check if a signature needs to be added into the banner - signature, - } = element.closest('.section').dataset; - const h1 = element.querySelector('h1'); const picture = element.querySelector('picture'); const pictureParent = picture ? picture.parentNode : false; @@ -32,12 +27,6 @@ function buildHeroBlock(element) { document.querySelector('div.hero div div:first-child').prepend(breadcrumb); } - if (signature) { - const signatureElement = createTag('div', { class: 'signature' }); - signatureElement.textContent = signature; - document.querySelector('div.hero div div:first-child').prepend(signatureElement); - } - const pictureEl = document.createElement('div'); pictureEl.classList.add('hero-picture'); pictureEl.append(picture); @@ -86,6 +75,7 @@ export default async function decorate(block) { const { // this defines wether the modals automatically refresh or not in the hero banner stopAutomaticModalRefresh, + signature, } = block.closest('.section').dataset; buildHeroBlock(block); @@ -118,6 +108,13 @@ export default async function decorate(block) { } } + // add signature to the top of the banner + if (signature) { + const signatureElement = createTag('div', { class: 'signature' }); + signatureElement.textContent = signature; + document.querySelector('div.hero div div:first-child').prepend(signatureElement); + } + // set the modal buttons in the hero banner to not refresh the modal on click if (stopAutomaticModalRefresh === 'true') { block.querySelectorAll('a.modal.button').forEach((modalButton) => { From 596851d1766c6b3d86bbe02aaf64d1c0a143515d Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 27 Aug 2024 23:54:18 +0300 Subject: [PATCH 0966/1296] updates --- _src/blocks/columns/columns.css | 6 + .../dropdownbox-compare.css | 187 ++++++++++++++++++ .../dropdownbox-compare.js | 23 +++ 3 files changed, 216 insertions(+) create mode 100644 _src/blocks/dropdownbox-compare/dropdownbox-compare.css create mode 100644 _src/blocks/dropdownbox-compare/dropdownbox-compare.js diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 008c228da..e254ff6c1 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -47,6 +47,7 @@ .columns-container.chat-options table tr td:last-of-type img { height: 133px; + display: none; } .columns-container.chat-options p { @@ -241,6 +242,7 @@ .columns.benefits > div { flex-direction: unset; gap: 32px; + align-items: stretch; } .columns.highlight-text.black { @@ -304,6 +306,10 @@ .columns > div > .columns-img-col { margin-bottom: 1em; } + + .columns-container.chat-options table tr td:last-of-type img { + display: block; + } } @media (min-width: 1200px) { diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css new file mode 100644 index 000000000..ff847f580 --- /dev/null +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css @@ -0,0 +1,187 @@ +/* b-boxes .dropdownbox-compare-container */ +.dropdownbox-compare-container { + clear: both; +} + +.dropdownbox-compare-container .block img { + width: 20px; +} + +.dropdownbox-compare-container .block > div { + padding: 15px 30px; +} + +/* blue tbs */ +.dropdownbox-compare-container .block > div > div { + border-bottom: 1px solid #D6D6D6; +} + +.dropdownbox-compare-container .block > div { + padding: 0; + font-weight: 500; + display: flex; +} + +.dropdownbox-compare-container .block > div:nth-child(1) > div:nth-child(1) { + color: #fff; + background-color: #006eff; + padding: 0; +} + +.dropdownbox-compare-container .block > div:first-of-type > div, .dropdownbox-compare-container .block > div:last-of-type > div { + border-bottom: 0 none; +} + +.dropdownbox-compare-container .block > div:nth-child(1) > div { + font-weight: bold; + cursor: pointer; + padding: 15px 30px; +} + +.dropdownbox-compare-container .block > div > div { + flex: 1; + padding: 15px 2%; + display: inline-block; +} + +.dropdownbox-compare-container .block > div > div strong em { + color: red; + font-style: normal; +} + +.dropdownbox-compare-container .block:not(.selected-2) > div > div:nth-child(2), .dropdownbox-compare-container .block.selected-1 > div > div:nth-child(2), .dropdownbox-compare-container .block.selected-2 > div > div:nth-child(3), .dropdownbox-compare-container .block.selected-3 > div > div:nth-child(4) { + background-color: #f6f6f6; +} + +.dropdownbox-compare-container.selected-1 .block > div > div:nth-child(2), .dropdownbox-compare-container.selected-2 .block > div > div:nth-child(3), .dropdownbox-compare-container.selected-3 .block > div > div:nth-child(4) { + background-color: #f6f6f6; +} + +.dropdownbox-compare-container.selected-2 .block > div > div:nth-child(2), .dropdownbox-compare-container.selected-3 .block > div > div:nth-child(2) { + background-color: white; +} + +.dropdownbox-compare-container .block > div:not(:first-child) > div:first-child { + display: block; + align-items: center; +} + +.dropdownbox-compare-container .block > div:not(:first-child) > div:first-child p { + margin: 0; +} + +.dropdownbox-compare-container .block > div:not(:first-child) > div:first-child span { + margin-left: 10px; +} + +.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { + display: none; +} + +.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block.closed > div:not(:first-child) > div { + display: inline-block; +} + +.dropdownbox-compare-container .block.closed > div:nth-child(1) > div:nth-child(1)::before { + width: 10px; + height: 10px; + float: left; + content: ""; + margin-right: 10px; + margin-top: 10px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(-135deg); +} + +.dropdownbox-compare-container.arrow-dark .block.closed > div:nth-child(1) > div:nth-child(1)::before { + width: 10px; + height: 10px; + float: left; + content: ""; + margin-right: 10px; + margin-top: 10px; + border: solid black; + border-width: 0 2px 2px 0; + transform: rotate(-135deg); +} + +/* handling - arrow down/up */ +/* stylelint-disable no-descending-specificity */ +.dropdownbox-compare-container .block > div:nth-child(1) > div::before, +.dropdownbox-compare-container .block.closed > div:nth-child(1) > div::before { + width: 10px; + height: 10px; + float: left; + content: ""; + margin-right: 10px; + margin-top: 4px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.dropdownbox-compare-container .dropdownbox-compare-wrapper { + position: relative; +} + +@media (width <= 991px) { + .dropdownbox-compare-container .default-content-wrapper h5 { + font-size: 33px; + } +} + +.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { + display: none; +} + +/* for mobile */ +@media (width <= 768px) { + .dropdownbox-compare-container { + clear: both; + padding: 0 15px 5px; + } + .dropdownbox-compare-container .block > div:not(:first-child) { + display: block; + } + .dropdownbox-compare-container .block > div:nth-child(1) > div:nth-child(1)::before, .dropdownbox-compare-container .block.closed.close > div:nth-child(1) > div:nth-child(1)::before { + margin-top: 1px !important; + } + .dropdownbox-compare-container .block > div:nth-child(1) > div { + padding: 10px 3% !important; + display: flex; + font-size: 15px; + line-height: 17px; + } + .dropdownbox-compare-container .new > div:nth-child(1) > div:nth-child(1)::after, .dropdownbox-compare-container.new .block > div:nth-child(1) > div:nth-child(1)::after { + position: static; + margin-left: 15px; + flex: 0 0 auto; + } + .dropdownbox-compare-container > div:nth-child(2) .new::after { + top: -90px; + right: 0; + width: 135px; + height: 90pt; + display: none; + } + .dropdownbox-compare-container .block > div:not(:first-child) > div { + padding: 8px 2% !important; + font-size: 15px; + } + .dropdownbox-compare-container .block img { + width: 15px; + } + .dropdownbox-compare-container .block > div:not(:first-child) > div:nth-child(1) { + width: 100%; + text-align: center; + } + .dropdownbox-compare-container .block > div:not(:first-child) > div:not(:first-child) { + width: 50%; + float: left; + } + .dropdownbox-compare-container .default-content-wrapper h5 { + font-size: 30px; + line-height: 32px; + } +} \ No newline at end of file diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js new file mode 100644 index 000000000..d3f26115a --- /dev/null +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js @@ -0,0 +1,23 @@ +export default function decorate(block) { + const parentSelector = block.closest('.section'); + const { type } = parentSelector.dataset; + + block.closest('.dropdownbox-compare-wrapper').classList.add('default-content-wrapper'); + + // search for [] to replace with span greeenTag class + const getFirstDivs = block.querySelectorAll('.dropdownbox-compare-container .block > div > div:nth-child(1)'); + getFirstDivs.forEach((item) => { + item.innerHTML = item.innerHTML.replace('[', ''); + item.innerHTML = item.innerHTML.replace(']', ''); + }); + + // make slideUp slideDown functionality + const getFirstTabs = block.querySelectorAll('.dropdownbox-compare-container .block > div:first-child'); + getFirstTabs.forEach((tab) => { + tab.parentNode.classList.remove('closed'); + tab.addEventListener('click', () => { + tab.parentNode.classList.toggle('closed'); + }); + }); + +} From 5a7bcf8a67482c3e2b84b28e55bb227a7c4eb08d Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 00:28:26 +0300 Subject: [PATCH 0967/1296] Creators page --- _src/blocks/columns/columns.css | 46 +++++++++++++++++++++++++++++++++ _src/styles/styles.css | 8 ++++++ 2 files changed, 54 insertions(+) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index bfa0c2daa..d0e6361e8 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -11,6 +11,52 @@ margin-right: auto; } +.columns-container.creators h5 { + color: #006DFF; + font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; +} + +.columns-container.creators h3 { + font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; +} + +.columns-container.creators p { + font: normal normal normal 24px/33px Arial; +} + +.columns-container.creators a.button { + min-width: 230px; + height: 48px; + background: #E72325 0% 0% no-repeat padding-box; + border-radius: 40px; + justify-content: center; + font: normal normal 500 18px/24px "Roboto"; +} + +.columns-container.creators .columns > div { + justify-content: space-between; + margin-bottom: 3em; +} + +.columns-container.creators .columns > div:last-of-type { + margin-bottom: 0; +} + +.columns-container.creators .columns > div > div.columns-left-col, .columns-container.creators .columns > div > div.columns-right-col { + width: 45%; + flex: none; +} + +.columns-container.creators .columns > div > div.columns-img-col { + width: 45%; + flex: none; +} + +.columns-container.creators.baby-blue-subtitles h3 { + color: #006DFF; +} + + .columns > div { display: flex; flex-direction: column; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index ad2d7ff5b..866255f32 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -529,6 +529,14 @@ header, main, footer { margin: 0 auto; } +.creators * { + font-family: Arial, Helvetica, sans-serif; +} + +.creators .default-content-wrapper h2 { + font: normal normal bold 60px/69px Arial; +} + @media (min-width: 768px) { main .section.center .products .product-card { min-width: 380px; From 3bbbf47c778a417b3357c552046901ea2775b574 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 14:10:13 +0300 Subject: [PATCH 0968/1296] Update Creators page --- _src/blocks/columns/columns.css | 97 +++++++++++-------- _src/blocks/new-prod-boxes/new-prod-boxes.css | 8 +- _src/styles/styles.css | 16 ++- 3 files changed, 78 insertions(+), 43 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index d0e6361e8..24776c574 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -1,62 +1,47 @@ -.columns-wrapper { - padding: 0 var(--body-padding); + +.creators .columns-container .columns > div { + justify-content: space-between; + margin-bottom: 3em; } -.columns-container.we-container { - max-width: 100%; - padding-left: 20px; - padding-right: 20px; - margin-top: 15px; - margin-left: auto; - margin-right: auto; +.creators .columns-container .columns > div:last-of-type { + margin-bottom: 0; } -.columns-container.creators h5 { +.creators .columns-container.baby-blue-subtitles h3, .creators .columns-container h5 { color: #006DFF; - font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; } -.columns-container.creators h3 { - font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; +.creators .columns-container h3, .creators .columns-container h5 { + font-weight: bold; } -.columns-container.creators p { - font: normal normal normal 24px/33px Arial; +.creators .columns-container p.button-container { + text-align: center; } -.columns-container.creators a.button { - min-width: 230px; - height: 48px; +.creators .columns-container a.button { + height: auto; background: #E72325 0% 0% no-repeat padding-box; - border-radius: 40px; + border-radius: 30px; justify-content: center; - font: normal normal 500 18px/24px "Roboto"; -} - -.columns-container.creators .columns > div { - justify-content: space-between; - margin-bottom: 3em; -} - -.columns-container.creators .columns > div:last-of-type { - margin-bottom: 0; -} - -.columns-container.creators .columns > div > div.columns-left-col, .columns-container.creators .columns > div > div.columns-right-col { - width: 45%; - flex: none; + padding: 5px 10px; + font-size: 14px; } -.columns-container.creators .columns > div > div.columns-img-col { - width: 45%; - flex: none; +.columns-wrapper { + padding: 0 var(--body-padding); } -.columns-container.creators.baby-blue-subtitles h3 { - color: #006DFF; +.columns-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; } - .columns > div { display: flex; flex-direction: column; @@ -216,6 +201,38 @@ .columns.highlight-text.black.imageleft { left: 10%; } + + .creators .columns-container .columns > div > div.columns-left-col, .creators .columns-container .columns > div > div.columns-right-col { + width: 45%; + flex: none; + } + + .creators .columns-container .columns > div > div.columns-img-col { + width: 45%; + flex: none; + } + + .creators .columns-container h5 { + color: #006DFF; + font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; + } + + .creators .columns-container h3 { + font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; + } + + .creators .columns-container p { + font: normal normal normal 24px/33px Arial; + } + + .creators .columns-container a.button { + min-width: 230px; + height: 48px; + background: #E72325 0% 0% no-repeat padding-box; + border-radius: 40px; + justify-content: center; + font: normal normal 500 18px/24px "Roboto"; + } } @media (min-width: 1200px) { diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 0b4933876..28b1175cc 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -5,6 +5,10 @@ margin: clamp(10px, 25px, 15px) 0; } +.new-prod-boxes-container div.default-content-wrapper:last-of-type { + padding: 0; +} + .new-prod-boxes-container.we-container { max-width: 100%; padding-left: 20px; @@ -360,7 +364,7 @@ border: 2px solid #006EFF !important; white-space: nowrap !important; overflow: hidden !important; - text-overflow: ellipsis !important; + text-overflow: ellipsis !important; border-radius: 8px !important; height: fit-content !important; } @@ -382,7 +386,7 @@ .new-prod-boxes-container .icon { width: 12px; height: 14px; - margin: 0; + margin: 0 5px 0 0; } .new-prod-boxes-container .icon svg { diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 866255f32..fe3aa1ab1 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -534,7 +534,7 @@ header, main, footer { } .creators .default-content-wrapper h2 { - font: normal normal bold 60px/69px Arial; + font-weight: bold; } @media (min-width: 768px) { @@ -621,6 +621,20 @@ header, main, footer { width: 540px; font-size: 19px; } + + main .section.width-medium .block { + width: 940px; + margin: 0 auto; + } + + main .section.width-smaller .block, main .section.width-smaller .default-content-wrapper { + width: 750px; + margin: 0 auto; + } + + .creators .default-content-wrapper h2 { + font: normal normal bold 60px/69px Arial; + } } @media (min-width: 1065px) { From 5b5b6b62c63c40a80438a2ec7c354b0bad6c79f6 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 14:15:39 +0300 Subject: [PATCH 0969/1296] adding gradient --- _src/styles/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index fe3aa1ab1..65c306f34 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -529,6 +529,10 @@ header, main, footer { margin: 0 auto; } +.creators { + background: linear-gradient(to bottom, #F6FCFF, white); +} + .creators * { font-family: Arial, Helvetica, sans-serif; } From e5b2ab5819a01310fd76b5556d67f4b891574588 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 14:56:54 +0300 Subject: [PATCH 0970/1296] Updates Creators page --- _src/blocks/columns/columns.css | 9 ++++ _src/blocks/new-prod-boxes/new-prod-boxes.css | 51 ++++++++++++++----- _src/styles/styles.css | 2 +- 3 files changed, 47 insertions(+), 15 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 24776c574..8cd9fb409 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -16,6 +16,10 @@ font-weight: bold; } +.creators .columns-container.baby-blue-subtitles h3 br { + display: block; +} + .creators .columns-container p.button-container { text-align: center; } @@ -225,9 +229,14 @@ font: normal normal normal 24px/33px Arial; } + .creators .columns-container p.button-container { + text-align: left; + } + .creators .columns-container a.button { min-width: 230px; height: 48px; + padding: 10px 10px 10px 25px; background: #E72325 0% 0% no-repeat padding-box; border-radius: 40px; justify-content: center; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 28b1175cc..e8c007d71 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -1,4 +1,13 @@ /* stylelint-disable */ +.creators .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box { + border: 1px solid #ECECEC; +} + +.creators .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .undeBuyLink { + text-align: center; + font-weight: bold; +} + .new-prod-boxes-container { padding-bottom: 0; font-family: 'Arial', sans-serif; @@ -9,6 +18,15 @@ padding: 0; } +.new-prod-boxes-container div.default-content-wrapper:last-of-type * { + font: normal normal normal 12px/14px Arial; + color: black; +} + +.new-prod-boxes-container div.default-content-wrapper:last-of-type a { + text-decoration: underline; +} + .new-prod-boxes-container.we-container { max-width: 100%; padding-left: 20px; @@ -425,7 +443,7 @@ padding-bottom: 35px; } -.switch { +.switchBox .switch { position: relative; display: inline-flex; align-items: center; @@ -435,11 +453,11 @@ border-radius: 22px; } -.switch input { +.switchBox .switch input { display: none; } -.slider { +.switchBox .slider { position: absolute; content: ""; height: 40px; @@ -451,11 +469,11 @@ transition: all 0.4s; } -.switch input:checked + .slider { +.switchBox .switch input:checked + .slider { transform: translateX(149px); } -.label { +.switchBox .label { font-family: Arial, Helvetica, sans-serif; width: 50%; text-align: center; @@ -464,47 +482,48 @@ font-size: 16px; color: white; transition: color 0.4s; + cursor: pointer; } -.label.right { +.switchBox .label.right { z-index: 10; color: black; } -.label.left { +.switchBox .label.left { z-index: 10; } -.switch input:checked ~ .label.right { +.switchBox .switch input:checked ~ .label.right { transition: color 0.4s; color: white !important; } -.switch input ~ .label .icon { +.switchBox .switch input ~ .label .icon { position: relative; margin-right: 10px; top: 2px; } -.switch input ~ .label .icon svg { +.switchBox .switch input ~ .label .icon svg { width: 14px; height: 16px; } -.switch input ~ .label.right .icon svg { +.switchBox .switch input ~ .label.right .icon svg { fill: #026DFF; } -.switch input:checked ~ .label.right .icon svg { +.switchBox .switch input:checked ~ .label.right .icon svg { fill: white; } -.switch input:checked ~ .label.left { +.switchBox .switch input:checked ~ .label.left { transition: color 0.4s; color: black; } -.switch input:checked ~ .label.left .icon svg { +.switchBox .switch input:checked ~ .label.left .icon svg { fill: #026DFF; } @@ -565,6 +584,10 @@ } @media (min-width: 768px) { + .creators .new-prod-boxes-container .new-prod-boxes { + padding-bottom: 10px; + } + .new-prod-boxes-container .new-prod-boxes { flex-direction: row; padding-bottom: 60px; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 65c306f34..90a6814ab 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -529,7 +529,7 @@ header, main, footer { margin: 0 auto; } -.creators { +body.creators { background: linear-gradient(to bottom, #F6FCFF, white); } From 587248d330ca27ff61d5b08b845affd92ac0a268 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:09:59 +0300 Subject: [PATCH 0971/1296] fix: lint --- _src/blocks/columns/columns.css | 69 ++++++++++++++++----------------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 8cd9fb409..e87bb8488 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -1,38 +1,3 @@ - -.creators .columns-container .columns > div { - justify-content: space-between; - margin-bottom: 3em; -} - -.creators .columns-container .columns > div:last-of-type { - margin-bottom: 0; -} - -.creators .columns-container.baby-blue-subtitles h3, .creators .columns-container h5 { - color: #006DFF; -} - -.creators .columns-container h3, .creators .columns-container h5 { - font-weight: bold; -} - -.creators .columns-container.baby-blue-subtitles h3 br { - display: block; -} - -.creators .columns-container p.button-container { - text-align: center; -} - -.creators .columns-container a.button { - height: auto; - background: #E72325 0% 0% no-repeat padding-box; - border-radius: 30px; - justify-content: center; - padding: 5px 10px; - font-size: 14px; -} - .columns-wrapper { padding: 0 var(--body-padding); } @@ -155,6 +120,40 @@ display: block; } +.creators .columns-container .columns > div { + justify-content: space-between; + margin-bottom: 3em; +} + +.creators .columns-container .columns > div:last-of-type { + margin-bottom: 0; +} + +.creators .columns-container h5, .creators .columns-container.baby-blue-subtitles h3 { + color: #006DFF; +} + +.creators .columns-container h3, .creators .columns-container h5 { + font-weight: bold; +} + +.creators .columns-container.baby-blue-subtitles h3 br { + display: block; +} + +.creators .columns-container p.button-container { + text-align: center; +} + +.creators .columns-container a.button { + height: auto; + background: #E72325 0% 0% no-repeat padding-box; + border-radius: 30px; + justify-content: center; + padding: 5px 10px; + font-size: 14px; +} + @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; From 103d4f1be7dcb540f8091c9e0741ef4518afaa2e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:14:39 +0300 Subject: [PATCH 0972/1296] fix: lint css --- _src/blocks/columns/columns.css | 41 ++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index e87bb8488..bb2c6793e 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -98,6 +98,11 @@ height: 200px; } +.creators .columns-container .columns > div { + justify-content: space-between; + margin-bottom: 3em; +} + .columns.bg-image > div > div:first-child { font-size: var(--heading-font-size-xl); font-weight: bold; @@ -120,20 +125,32 @@ display: block; } -.creators .columns-container .columns > div { - justify-content: space-between; - margin-bottom: 3em; +.columns.with-box-shadow > div > div:last-child { + border: none; } .creators .columns-container .columns > div:last-of-type { margin-bottom: 0; } +.creators .columns-container h3, .creators .columns-container h5 { + font-weight: bold; +} + +.columns.new-v2 h3 { + font-family: "IBM Plex Sans" ,sans-serif; + font-size: 25px; + font-weight: 700; + line-height: 30px; + text-align: left; + color: #006EFF; +} + .creators .columns-container h5, .creators .columns-container.baby-blue-subtitles h3 { color: #006DFF; } -.creators .columns-container h3, .creators .columns-container h5 { +.creators .columns-container h5 { font-weight: bold; } @@ -225,7 +242,7 @@ } .creators .columns-container p { - font: normal normal normal 24px/33px Arial; + font: normal normal normal 24px/33px "Arial"; } .creators .columns-container p.button-container { @@ -396,10 +413,6 @@ transition: all .4s ease-in-out; } -.columns.with-box-shadow > div > div:last-child{ - border: none; -} - .section.wide.light-sky-blue.columns-container { height: auto; } @@ -613,7 +626,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { opacity: .8; } - .two-columns .left-col p a.info-button.modal::before { content: url("/_src/icons/user-guide-white.svg"); color: white; @@ -638,15 +650,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { margin-bottom: 1em; } -.columns.new-v2 h3 { - font-family: "IBM Plex Sans" ,sans-serif; - font-size: 25px; - font-weight: 700; - line-height: 30px; - text-align: left; - color: #006EFF; -} - .columns.new-v2 a { color: #006EFF!important; font-size: 18px; From edf440c1dc2fef320e4cbcb45210a492e36c86e9 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:25:58 +0300 Subject: [PATCH 0973/1296] fix: lint --- _src/blocks/columns/columns.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index bb2c6793e..c4bc805d0 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -234,11 +234,21 @@ .creators .columns-container h5 { color: #006DFF; - font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; + font-style: normal; + font-variant: normal; + font-weight: bold; + font-size: 32px; + line-height: 45px; + font-family: "IBM Plex Sans", sans-serif; } .creators .columns-container h3 { - font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; + font-style: normal; + font-variant: normal; + font-weight: bold; + font-size: 60px; + line-height: 70px; + font-family: "IBM Plex Sans", sans-serif; } .creators .columns-container p { From 60bd1b9f507205604a6c014ae04795161cdf5c1c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:28:36 +0300 Subject: [PATCH 0974/1296] fix eslint --- _src/blocks/columns/columns.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index c4bc805d0..bbe649414 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -234,21 +234,21 @@ .creators .columns-container h5 { color: #006DFF; + font-family: "IBM Plex Sans" ,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 32px; line-height: 45px; - font-family: "IBM Plex Sans", sans-serif; } .creators .columns-container h3 { + font-family: "IBM Plex Sans" ,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 60px; line-height: 70px; - font-family: "IBM Plex Sans", sans-serif; } .creators .columns-container p { From 259c729f6b51c764608f9fb683dd1695ee1d9ae6 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:31:48 +0300 Subject: [PATCH 0975/1296] fix: lint --- _src/blocks/columns/columns.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index bbe649414..751aea24e 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -234,7 +234,7 @@ .creators .columns-container h5 { color: #006DFF; - font-family: "IBM Plex Sans" ,sans-serif; + font-family: "IBM Plex Sans", sans-serif;/* stylelint-disable-line font-family-no-missing-generic-family-keyword */ font-style: normal; font-variant: normal; font-weight: bold; @@ -243,7 +243,7 @@ } .creators .columns-container h3 { - font-family: "IBM Plex Sans" ,sans-serif; + font-family: "IBM Plex Sans", sans-serif;/* stylelint-disable-line font-family-no-missing-generic-family-keyword */ font-style: normal; font-variant: normal; font-weight: bold; From dfbfd068e1bdc9197a91a057f89041afd779ce4f Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 28 Aug 2024 15:38:37 +0300 Subject: [PATCH 0976/1296] update creator-components --- _src/blocks/creators-block/creators-block.css | 13 +- _src/blocks/four-cards/four-cards.css | 49 ++++++ _src/blocks/money-back/money-back.css | 144 +++++++++--------- .../questions-answers/questions-answers.css | 80 ++-------- 4 files changed, 142 insertions(+), 144 deletions(-) diff --git a/_src/blocks/creators-block/creators-block.css b/_src/blocks/creators-block/creators-block.css index 8b4b8157d..c44b250a5 100644 --- a/_src/blocks/creators-block/creators-block.css +++ b/_src/blocks/creators-block/creators-block.css @@ -57,14 +57,15 @@ } .creators-block.block>div:nth-child(3) a.button:any-link { + min-width: 230px; + height: 48px; + padding: 10px 10px 10px 25px; + background: #E72325 0% 0% no-repeat padding-box; border-radius: 40px; - padding: 18px 25px; - font-size: 18px; - line-height: 24px; - font-family: Roboto, sans-serif; - font-weight: bold; - color: #fff; + justify-content: center; + font: normal normal 500 18px / 24px Roboto, sans-serif; margin-bottom: 35px; + color: white; } .creators-block.block>div:nth-child(2)>div { diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index f71009052..75f43f304 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -83,12 +83,30 @@ } } + +.creator-cards .four-cards.block { + display: flex; + justify-content: center; +} + .four-cards-container h3 { font: normal normal bold 32px/37px var(--body-font-family); text-align: center; margin-bottom: 56px; } +.creator-cards.four-cards-container h3 { + font: normal normal bold 60px/69px Arial, sans-serif; + text-align: center; + margin-bottom: 28px; +} + +.creator-cards.four-cards-container h4 { + font: normal normal normal 24px/26px Arial, sans-serif; + text-align: center; + margin-bottom: 72px; +} + .four-cards-container.we-container { max-width: 100%; padding-left: 20px; @@ -128,6 +146,10 @@ text-align: center; } +.creator-cards .default-content-wrapper { + text-align: center; +} + /* a/b test styles, should be deleted after */ .four-cards-container.we-container .default-content-wrapper { text-align: center; @@ -179,6 +201,28 @@ background-color: #0D499B; } +.creator-cards .default-content-wrapper a.button:any-link { + min-width: 230px; + height: 48px; + padding: 10px 10px 10px 25px; + background: #E72325 0% 0% no-repeat padding-box; + border-radius: 40px; + justify-content: center; + font: normal normal 500 18px / 24px Roboto, sans-serif; + color: white; +} + +.creator-cards .default-content-wrapper a.button:hover { + color: white; + background-color: var(--button-background-color); +} + +.creator-cards .default-content-wrapper a.button:active { + color: white; + background-color: var(--button-background-color); + border: 0; +} + .four-cards .icon { width: 48px; height: 48px; @@ -213,6 +257,11 @@ grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 14px; } + + .creator-cards .four-cards > ul { + grid-template-columns: 300px 300px 300px; + grid-gap: 14px; + } } @media (min-width: 1200px) { diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index 597543bf3..e7dedf43e 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -1,73 +1,3 @@ -.money-back-container { - --dark-background-color: #000; - --black-color: #000; - --white-color: #fff; - --background-color: #fff; - --link-color: #005ed9; - --link-hover-color: #00439c; - --button-link-color: #fff; - --button-background-color: #eb0000; - --button-hover-background-color: #d80000; - --button-primary-background-color: #000; - --button-primary-hover-background-color: #000; - --button-secondary-color: #000; - --button-secondary-hover-background-color: #000; - --overlay-background-color: #eee; - --highlight-background-color: #ccc; - --text-color: #000; - --text-error-color: #f00; - --color-highlight-blue: #006dff; - --color-dark-gray: #616161; - --checkbox-label: #3c3c3c; - --highlight-light-blue: #f3f7fe; - --text-dark-color: #fff; - --horizontal-separator-color: #dedede; - --modal-background-color: rgb(0 0 0 / 50%); - --background-color-light-sky-blue: #e4f2ff; - --icon-color: #205fff; - --background-light-blue: #d9eeff; - --background-blue: #005ed9; - --dark-blue-tag: #005eff; - --light-blue-tag: #13b0a7; - --green-tag: #218728; - --dark-shadow: #0000001a; - --background-checkmark: #61AF53; - --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; - --heading-font-family: var(--body-font-family); - --fixed-font-family: var(--body-font-family); - --font-weight-thin: 300; - --font-weight-regular: 400; - --font-weight-bold: 500; - --font-weight-bolder: 600; - --font-weight-boldest: 700; - --font-weight-heavy: 900; - --body-font-size-l: 22px; - --body-font-size-m: 18px; - --body-font-size-s: 16px; - --body-font-size-xs: 14px; - --body-font-size-xxs: 12px; - --body-font-size-xxxs: 10px; - --heading-font-size-xxxl: 60px; - --heading-font-size-xxl: 48px; - --heading-font-size-xl: 40px; - --heading-font-size-l: 32px; - --heading-font-size-m: 24px; - --heading-font-size-s: 20px; - --heading-font-size-xs: 18px; - --heading-font-size-xxs: 16px; - --nav-height: 63px; - --nav-height-desktop: 40px; - --body-max-width: 1920px; - --body-padding: 20px; - --section-desktop-max-width: 1300px; - --section-desktop-padding: 20px; - --section-large-desktop-max-width: 1332px; - --section-large-desktop-padding: 50px; - --section-desktop-padding-vertical: 48px; - --section-mobile-padding-vertical: 32px; - --cta-background-light-blue: var(--background-light-blue); -} - .money-back-wrapper { text-align: center; } @@ -92,6 +22,10 @@ border-radius: 20px; } +.creator-money-back .money-back.block { + background-color: transparent; +} + .money-back.block.background-white { background-color: white; } @@ -117,6 +51,12 @@ padding-right: 2px; } +.creator-money-back.money-back-container .icon svg { + width: auto; + height: 60px; + padding-right: 2px; +} + .money-back > ul { list-style: none; margin: 0; @@ -134,6 +74,18 @@ font: normal normal normal 14px/16px var(--body-font-family); } + .creator-money-back .money-back > ul > li { + display: inline-block; + background: #F5F5F7; + border-radius: 20px; + padding: 60px 68px; + width: 550px; + text-align: left; + margin: 0 30px; + vertical-align: top; + font: normal normal normal 20px/23px Arial, sans-serif; + } + .money-back > ul > li h6 { font: normal normal bold 18px/16px var(--body-font-family); } @@ -142,10 +94,22 @@ font: normal normal normal 14px/16px var(--body-font-family); } + .creator-money-back .money-back > ul > li h6 { + font: normal normal bold 32px/38px Arial, sans-serif; + } + + .creator-money-back .money-back > ul > li p { + font: normal normal normal 20px/23px Arial, sans-serif; + } + .money-back > ul > li p:first-of-type { margin-bottom: 0; } + .creator-money-back .money-back > ul > li p:first-of-type { + margin: 0; + } + .money-back > ul > li a { font: normal normal normal 14px/16px var(--body-font-family); margin-bottom: 0; @@ -155,6 +119,25 @@ display: block; } + .creator-money-back .money-back > ul > li a { + display: inline-flex; + justify-content: center; + min-width: 170px; + text-align: center; + padding: 10px 13px; + height: 44px; + background: #E72325 0% 0% no-repeat padding-box; + border-radius: 5px; + font: normal normal bold 16px/18px Arial, sans-serif; + color: white; + } + + .creator-money-back .money-back > ul > li a:hover { + text-decoration: none; + color: white; + background: #D70000; + } + .money-back > ul > li strong { display: inline-block; font: normal normal bold 18px/16px var(--body-font-family); @@ -200,6 +183,14 @@ transition: none; } + .creator-money-back .money-back a.button::after { + content: ''; + width: 0; + height: 0; + margin: 0; + transition: none; + } + .money-back .icon { height: 32px; margin-bottom: 9px; @@ -207,6 +198,13 @@ display: flex; } + .creator-money-back .money-back .icon { + height: 60px; + margin-bottom: 23px; + fill: #006EFF; + display: flex; + } + .money-back img { height: 55px; margin-bottom: 9px; @@ -235,6 +233,12 @@ } } +@media (max-width: 1259px) { + .creator-money-back .money-back > ul > li { + margin-bottom: 40px; + } +} + @media (min-width: 1200px) { .money-back-container.we-container { max-width: 1332px; diff --git a/_src/blocks/questions-answers/questions-answers.css b/_src/blocks/questions-answers/questions-answers.css index 1cfeb45d0..2ce1d2997 100644 --- a/_src/blocks/questions-answers/questions-answers.css +++ b/_src/blocks/questions-answers/questions-answers.css @@ -1,71 +1,3 @@ -.questions-answers-container { - --dark-background-color: #000; - --black-color: #000; - --white-color: #fff; - --background-color: #fff; - --link-color: #005ed9; - --link-hover-color: #00439c; - --button-link-color: #fff; - --button-background-color: #eb0000; - --button-hover-background-color: #d80000; - --button-primary-background-color: #000; - --button-primary-hover-background-color: #000; - --button-secondary-color: #000; - --button-secondary-hover-background-color: #000; - --overlay-background-color: #eee; - --highlight-background-color: #ccc; - --text-color: #000; - --text-error-color: #f00; - --color-highlight-blue: #006dff; - --color-dark-gray: #616161; - --checkbox-label: #3c3c3c; - --highlight-light-blue: #f3f7fe; - --text-dark-color: #fff; - --horizontal-separator-color: #dedede; - --modal-background-color: rgb(0 0 0 / 50%); - --background-color-light-sky-blue: #e4f2ff; - --icon-color: #205fff; - --background-light-blue: #d9eeff; - --background-blue: #005ed9; - --dark-blue-tag: #005eff; - --light-blue-tag: #13b0a7; - --green-tag: #218728; - --dark-shadow: #0000001a; - --background-checkmark: #61AF53; - --body-font-family: "Roboto", "roboto-normal-400-fallback", helvetica, ubuntu, roboto, noto, sans-serif; - --heading-font-family: var(--body-font-family); - --fixed-font-family: var(--body-font-family); - --font-weight-thin: 300; - --font-weight-regular: 400; - --font-weight-bold: 500; - --font-weight-bolder: 600; - --font-weight-boldest: 700; - --font-weight-heavy: 900; - --body-font-size-l: 22px; - --body-font-size-m: 18px; - --body-font-size-s: 16px; - --body-font-size-xs: 14px; - --body-font-size-xxs: 12px; - --body-font-size-xxxs: 10px; - --heading-font-size-xxxl: 60px; - --heading-font-size-xxl: 48px; - --heading-font-size-xl: 40px; - --heading-font-size-l: 32px; - --heading-font-size-m: 24px; - --heading-font-size-s: 20px; - --heading-font-size-xs: 18px; - --heading-font-size-xxs: 16px; - --nav-height: 63px; - --nav-height-desktop: 40px; - --body-max-width: 1920px; - --body-padding: 20px; - --section-desktop-max-width: 1292px; - --section-desktop-padding: 20px; - --section-desktop-padding-vertical: 48px; - --section-mobile-padding-vertical: 32px; - --cta-background-light-blue: var(--background-light-blue); -} - .questions-answers-wrapper { padding: var(--body-padding); } @@ -78,12 +10,24 @@ } } +.qa-creators.questions-answers-container h3 { + text-align: center; + font: bold 60px/69px Arial, sans-serif; + margin-bottom: 32px; +} + .questions-answers-container h4 { text-align: center; font: normal normal bold 32px/28px var(--body-font-family); margin-bottom: 32px; } +.qa-creators.questions-answers-container h4 { + text-align: center; + font: bold 24px/26px var(--body-font-family); + margin-bottom: 32px; +} + .questions-answers-container .default-content-wrapper p { font: italic normal normal 14px/16px var(--body-font-family); } From 41182829ca206359019bfd15e364a236c119aa4c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:43:00 +0300 Subject: [PATCH 0977/1296] fix lint css --- _src/blocks/columns/columns.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 751aea24e..796282260 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -234,7 +234,9 @@ .creators .columns-container h5 { color: #006DFF; - font-family: "IBM Plex Sans", sans-serif;/* stylelint-disable-line font-family-no-missing-generic-family-keyword */ + /* stylelint-disable font-family-no-missing-generic-family-keyword */ + font-family: "IBM Plex Sans", sans-serif; + /* stylelint-enable font-family-no-missing-generic-family-keyword */ font-style: normal; font-variant: normal; font-weight: bold; @@ -243,7 +245,9 @@ } .creators .columns-container h3 { - font-family: "IBM Plex Sans", sans-serif;/* stylelint-disable-line font-family-no-missing-generic-family-keyword */ + /* stylelint-disable font-family-no-missing-generic-family-keyword */ + font-family: "IBM Plex Sans", sans-serif; + /* stylelint-enable font-family-no-missing-generic-family-keyword */ font-style: normal; font-variant: normal; font-weight: bold; From 4ab5f8313c17aa4571a652f9232045ddf39325be Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:46:35 +0300 Subject: [PATCH 0978/1296] fix: lint --- _src/blocks/columns/columns.css | 20 +++----------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 796282260..78e032902 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -234,29 +234,15 @@ .creators .columns-container h5 { color: #006DFF; - /* stylelint-disable font-family-no-missing-generic-family-keyword */ - font-family: "IBM Plex Sans", sans-serif; - /* stylelint-enable font-family-no-missing-generic-family-keyword */ - font-style: normal; - font-variant: normal; - font-weight: bold; - font-size: 32px; - line-height: 45px; + font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; } .creators .columns-container h3 { - /* stylelint-disable font-family-no-missing-generic-family-keyword */ - font-family: "IBM Plex Sans", sans-serif; - /* stylelint-enable font-family-no-missing-generic-family-keyword */ - font-style: normal; - font-variant: normal; - font-weight: bold; - font-size: 60px; - line-height: 70px; + font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; } .creators .columns-container p { - font: normal normal normal 24px/33px "Arial"; + font: normal normal normal 24px/33px "Arial", sans-serif; } .creators .columns-container p.button-container { From d941c6ad90e0ace6e1d6f07a2c22617b6140cd60 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 15:47:39 +0300 Subject: [PATCH 0979/1296] fix lint --- _src/blocks/columns/columns.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 78e032902..4c78cad53 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -256,7 +256,7 @@ background: #E72325 0% 0% no-repeat padding-box; border-radius: 40px; justify-content: center; - font: normal normal 500 18px/24px "Roboto"; + font: normal normal 500 18px/24px "Roboto", sans-serif; } } From 91ec0c14eafc7a955298dfce04e1411d04147b29 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Aug 2024 15:54:50 +0300 Subject: [PATCH 0980/1296] DEX-19813 --- .../products-sideview/products-sideview.css | 321 ++++++++++++++++++ .../products-sideview/products-sideview.js | 294 ++++++++++++++++ _src/styles/styles.css | 4 + 3 files changed, 619 insertions(+) create mode 100644 _src/blocks/products-sideview/products-sideview.css create mode 100644 _src/blocks/products-sideview/products-sideview.js diff --git a/_src/blocks/products-sideview/products-sideview.css b/_src/blocks/products-sideview/products-sideview.css new file mode 100644 index 000000000..190a3cd44 --- /dev/null +++ b/_src/blocks/products-sideview/products-sideview.css @@ -0,0 +1,321 @@ +:root { + --tab-header-color-blue: #005ed9; + --tab-description-color-light-grey: #3c3c3c; + --tab-emphasis-color: #2cb43d; +} + +.products-sideview .features-wrapper { + background: #eff6ff; + padding: 30px; + border-radius: 0 0 20px 20px; +} + +.products-sideview .features-wrapper > p, +.products-sideview .pricing-wrapper > p { + font-size: 18px; + line-height: 1.5; + letter-spacing: .006em; + font-weight: var(--font-weight-regular); +} + +.products-sideview .pricing-wrapper { + background: #f6f6f6; + border-radius: 20px 20px 0 0; + padding: 30px; +} + +.products-sideview .pricing-wrapper > p:last-child { + text-align: center; +} + +.products-sideview p.button-container > a { + width: 100%; + justify-content: center; +} + +.products-sideview .price { + font-size: 32px; + font-weight: bold; + margin: 20px 0; +} + +.products-sideview .tag-blue { + background: var(--tab-header-color-blue); + color: white; + padding: 0 10px; + border-radius: 10px; + margin-left: 5px; + font-size: 14px; + line-height: 1; + font-weight: bolder; +} + +.products-sideview-radio { + display: flex; + align-items: center; + margin-left: -2px; + margin-top: 20px; + margin-bottom: 20px; +} + +.products-sideview-radio input { + width: 25px; + height: 25px; + margin: 0; +} + +.products-sideview-radio label { + margin-left: 5px; +} + +.products-sideview-radio input:nth-last-child(2) { + margin-left: 20px; +} + +.products-sideview-selector { + position: relative; +} + +.products-sideview-selector select { /* Remove default styling */ + appearance: none; + width: 100%; + border: 1px solid #ccc; + background-color: white; + padding: 10px; + font-size: 18px; + font-weight: bold; + border-radius: 5px; +} + +.products-sideview-selector::after { + content: ''; + background: url("/_src/icons/tabs_arrow.svg") no-repeat; + position: absolute; + top: 50%; + right: 10px; + transform: rotate(180deg) translateY(50%); + pointer-events: none; /* Prevent the arrow from blocking clicks */ + width: 15px; + height: 15px; +} + +.products-sideview li { + padding: 0; + margin: 0 0 10px; +} + + +.products-sideview .benefits-list > li { + position: relative; + padding-left: 25px; + margin: 0 0 5px; +} + +.products-sideview .benefits-list > li::before { + content: url("/_src/icons/checkmark-green-circle.svg"); + position: absolute; + left: 0; + top: 4px; + width: 18px; + height: 18px; +} + +.products-sideview-wrapper { + padding: 0 var(--body-padding); +} + +.products-sideview { + /* box-shadow: 0 3px 8px 0 var(--dark-shadow); */ + + /* border-radius: 8px; */ + + /* padding: 40px 15px 20px; */ +} + +.products-sideview > div { + display: flex; + flex-direction: column; + align-items: stretch; +} + +.products-sideview img { + width: 100%; +} + +.products-sideview > div > div { + position: relative; + order: 1; +} + +.products-sideview > div > div:last-child::after { + display: none; +} + +.products-sideview > div > .features-img-col { + order: 0; +} + +.products-sideview > div > .features-img-col img { + display: block; +} + +.products-sideview p.features-tabs-hidden { + display: none; +} + +.products-sideview ul { + padding: 0; +} + +.products-sideview .features-tabs li > a { + color: var(--tab-header-color-blue); + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + position: relative; + display: inline-block; + letter-spacing: .004em; + cursor: pointer; + text-decoration: none; + padding-left: 25px; +} + +.products-sideview .features-tabs li > a::after { + content: ""; + position: absolute; + left: 0; + top: 0; + display: inline-block; + width: 14px; + height: 8px; + margin: 9px 3px; + background: url("/_src/icons/tabs_arrow.svg") no-repeat; + background-size: 100%; + transform: rotate(180deg); + transition: all .3s linear; +} + +.products-sideview .features-tabs li > a.is-open::after { + transform: rotate(0) +} + +.products-sideview .features-tabs .features-tabs-content { + opacity: 0; + height: 0; + overflow: hidden; + margin-left: 25px; + transition: all 0.3s ease-in-out; +} + +.products-sideview .features-tabs .features-tabs-content.expanded { + opacity: 1; + height: auto; + transition: all 0.3s ease-in-out; + display: block; +} + +.products-sideview .features-tabs .features-tabs-content > p { + font-size: var(--body-font-size-xxs); + font-weight: var(--font-weight-regular); + line-height: 1.6; +} + +@media (min-width: 480px) { + .products-sideview .features-tabs li > a { + font-size: 15px; + } +} + +@media (min-width: 768px) { + .products-sideview .features-wrapper { + border-radius: 0 20px 20px 0; + width: 50%; + } + + .products-sideview .pricing-wrapper { + border-radius: 20px 0 0 20px; /* desktop */ + width: 50% + } + + .products-sideview .pricing-wrapper h4 { + font-size: 26px; + line-height: 32.5px; + font-weight: 700; + } + + .products-sideview .features-wrapper h2 { + font-size: 38px; + line-height: 45.6px; + font-weight: 700; + } + + .features-tabs { + display: flex; + flex-wrap: wrap; + column-gap: 30px; + } + + .features-tabs > li { + position: relative; + } + + .products-sideview > div { + flex-flow: wrap; + } + + .products-sideview > div > div { + padding: 0 20px 20px; + } + + .products-sideview-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 0 auto; + } + + .products-sideview > div > div:nth-child(2)::after { + display:none; + } +} + +@media (min-width: 993px) { + .products-sideview.features-3-cols > div > div { + width: calc(33.33% - 30px); + margin: 0 15px; + } + + .products-sideview.features-3-cols > div > div:nth-child(2)::after { + display:block; + } + + .products-sideview.features-2-cols > div > div:nth-child(2)::after { + display:none; + } +} + +@media (min-width: 1200px) { + .products-sideview .pricing-wrapper { + width: 33.33%; + } + + .products-sideview .features-wrapper { + width: 66.66%; + height: fit-content; + } + + .products-sideview .features-tabs > li { + width: calc(50% - 30px); + flex-shrink: 0; + margin-bottom: 25px; + } + + .products-sideview .features-tabs .features-tabs-content > p { + font-size: var(--body-font-size-xs); + } +} + +@media (min-width: 1600px) { /* large desktop */ + .products-sideview-wrapper { + max-width: var(--section-large-desktop-max-width); + padding: 0 var(--section-large-desktop-padding); + } +} diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js new file mode 100644 index 000000000..f31c636be --- /dev/null +++ b/_src/blocks/products-sideview/products-sideview.js @@ -0,0 +1,294 @@ +import { + createNanoBlock, fetchProduct, getBuyLinkCountryPrefix, getDatasetFromSection, renderNanoBlocks, +} from '../../scripts/utils/utils.js'; + +const state = { + firstProduct: null, + secondProduct: null, + currentProduct: null, + mode: 'm', // "m" or "y", + membersIndex: 0, +}; + +const MEMBERS_MAP = new Map([ + [0, 3], + [1, 5], + [2, 10], + [3, 25], +]); + +function expandItem(content) { + content.style.height = `${content.scrollHeight}px`; + const transitionEndCallback = () => { + content.removeEventListener('transitionend', transitionEndCallback); + content.style.height = 'auto'; + }; + content.addEventListener('transitionend', transitionEndCallback); + content.classList.add('expanded'); +} + +function collapseItem(content) { + content.style.height = `${content.scrollHeight}px`; + requestAnimationFrame(() => { + content.classList.remove('expanded'); + content.style.height = 0; + }); +} + +function eventListener(ul) { + return (event) => { + let target = null; + + // find ancestor a tag + if (event.target.tagName !== 'A') { + target = event.target.closest('a'); + } else { + target = event.target; + } + + // if the clicked node is not open then open it + if (!target.classList.contains('is-open')) { + target.classList.add('is-open'); + + // if the clicked node has children then toggle the expanded class + if (target.parentNode.children.length > 1) { + target.parentNode.querySelectorAll('.features-tabs-content').forEach((content) => { + expandItem(content); + }); + } + + // hid the other tabs + ul.querySelectorAll('li').forEach((collapsedLi) => { + if (collapsedLi !== target.parentNode) { + collapsedLi.children[0].classList.remove('is-open'); + collapsedLi.querySelectorAll('.features-tabs-content').forEach((content) => { + collapseItem(content); + }); + } + }); + } else { + target.classList.remove('is-open'); + // if the clicked node has children then toggle the expanded class + if (target.parentNode.children.length > 1) { + target.parentNode.querySelectorAll('.features-tabs-content').forEach((content) => { + collapseItem(content); + }); + } + } + }; +} + +function extractFeatures(col) { + const ul = document.createElement('ul'); + ul.classList.add('features-tabs'); + + // select all h4 tags as feature titles + col.querySelectorAll('h4').forEach((h4) => { + const li = document.createElement('li'); + ul.appendChild(li); + + const a = document.createElement('a'); + a.setAttribute('href', '#'); + + // register click event on a tag + + a.addEventListener('click', (event) => { + event.preventDefault(); + eventListener(ul)(event); + }); + + h4.childNodes.forEach((node) => { + if (node.nodeType === Node.TEXT_NODE) { + a.appendChild(document.createTextNode(node.textContent)); + } else { + a.appendChild(node); + } + }); + + a.classList.add('features-tabs-title'); + + li.appendChild(a); + + // all descendants of a that have class tag + a.querySelectorAll('.tag').forEach((tag) => { + li.appendChild(tag); + }); + + const content = document.createElement('div'); + content.classList.add('features-tabs-content'); + li.appendChild(content); + + // every oaragraph until next h4 + let nextElement = h4.nextElementSibling; + while (nextElement && nextElement.tagName !== 'H4') { + content.appendChild(nextElement); + nextElement = h4.nextElementSibling; + } + + ul.appendChild(li); + + h4.remove(); + }); + + return ul; +} + +function updateBuyLink(block) { + const buyLink = block.querySelector('.button-container > .button'); + const productCode = state.currentProduct.alias; + const dimension = MEMBERS_MAP.get(state.membersIndex); + const { years } = state.currentProduct.variation; + + if (buyLink) { + buyLink.href = `${getBuyLinkCountryPrefix()}/${productCode}/${dimension}/${years}/`; + } +} + +function updatePrice(block) { + const isMonthly = state.mode === 'm'; + const priceEl = block.querySelector('.price'); + + (async () => { + const product = isMonthly + ? state.secondProduct + : state.firstProduct; + + state.currentProduct = product; + const variant = `${MEMBERS_MAP.get(state.membersIndex)}u-1y`; + const resp = await fetchProduct(product.alias, variant); + priceEl.textContent = `${resp.currency_label} ${resp.price}`; + })(); +} + +function renderPrice(block, firstProduct, secondProduct) { + console.log('firstProduct', firstProduct); + console.log('secondProduct', secondProduct); + const variant = '3u-1y'; + + const el = document.createElement('DIV'); + el.classList.add('price'); + el.innerHTML = '100 euroi'; + + Promise.all([ + fetchProduct(firstProduct, variant), + fetchProduct(secondProduct, variant), + ]).then(([vsb, vsbm]) => { + state.firstProduct = vsb; + state.firstProduct.alias = firstProduct; + state.secondProduct = vsbm; + state.secondProduct.alias = secondProduct; + updatePrice(block); + updateBuyLink(block); + }); + + return el; +} + +function renderRadioGroup(block) { + const el = document.createElement('DIV'); + el.classList.add('products-sideview-radio'); + + el.innerHTML = ` + + + + + + `; + + const radioButtons = el.querySelectorAll('input[name="type"]'); + + radioButtons.forEach((radio) => { + radio.addEventListener('change', (event) => { + state.mode = event.target.value; + + updatePrice(block); + + // update buy link + updateBuyLink(block); + }); + }); + + return el; +} + +function updateBenefits(block) { + const blockDataset = getDatasetFromSection(block); + const ul = block.querySelector('ul'); + if (ul) { + ul.classList.add('benefits-list'); + try { + const benefitsList = blockDataset.benefits.split(',,').map((b) => JSON.parse(b)); + const currentBenefitSelection = benefitsList[state.membersIndex]; + ul.querySelectorAll('li').forEach((li, index) => { + const numberOfBenefitsTag = document.createElement('SPAN'); + numberOfBenefitsTag.textContent = `x${currentBenefitSelection[index]}`; + numberOfBenefitsTag.classList.add('tag-blue'); + + // Find the last span element within the li + const lastSpan = li.querySelector('span:last-of-type'); + + // Replace the last span element with the new one + if (lastSpan) { + li.replaceChild(numberOfBenefitsTag, lastSpan); + } else { + // If no span is found, just append the new one + li.append(numberOfBenefitsTag); + } + }); + console.log('benefitsList', benefitsList); + } catch (e) { + console.log("couldn't load the benefits"); + } + } +} + +function renderSelector(block, ...options) { + console.log('options', options); + const el = document.createElement('div'); + el.classList.add('products-sideview-selector'); + + el.innerHTML = ` + + `; + + el.querySelector('select').addEventListener('change', (e) => { + const value = JSON.parse(e.target.value); + state.membersIndex = value; + // update benefits + updateBenefits(block); + + // update price + updatePrice(block); + + // update buy link + updateBuyLink(block); + }); + + return el; +} + +createNanoBlock('price', renderPrice); +createNanoBlock('monthlyYearly', renderRadioGroup); +createNanoBlock('selectMembers', renderSelector); + +export default function decorate(block) { + console.log('products-sideview', block); + block.firstElementChild.classList.add('d-flex'); + block.firstElementChild.firstElementChild.classList.add('pricing-wrapper'); + block.firstElementChild.lastElementChild.classList.add('features-wrapper'); + + updateBenefits(block); + + renderNanoBlocks(block.firstElementChild, block); + + const cols = [...block.firstElementChild.children]; + block.classList.add(`features-${cols.length}-cols`); + + const col = block.children[0].children[1]; + col.appendChild(extractFeatures(col)); +} diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 32e592346..e252df4b4 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1373,3 +1373,7 @@ header, body > div:first-child { height: 64px; } + +.d-flex { + display: flex; +} From b92f8337ec99a81f327a3bca3949b8116d53254c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 28 Aug 2024 15:58:12 +0300 Subject: [PATCH 0981/1296] DEX-19813 --- _src/blocks/products-sideview/products-sideview.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index f31c636be..93f59b370 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -161,8 +161,6 @@ function updatePrice(block) { } function renderPrice(block, firstProduct, secondProduct) { - console.log('firstProduct', firstProduct); - console.log('secondProduct', secondProduct); const variant = '3u-1y'; const el = document.createElement('DIV'); @@ -236,7 +234,6 @@ function updateBenefits(block) { li.append(numberOfBenefitsTag); } }); - console.log('benefitsList', benefitsList); } catch (e) { console.log("couldn't load the benefits"); } @@ -244,7 +241,6 @@ function updateBenefits(block) { } function renderSelector(block, ...options) { - console.log('options', options); const el = document.createElement('div'); el.classList.add('products-sideview-selector'); @@ -277,7 +273,6 @@ createNanoBlock('monthlyYearly', renderRadioGroup); createNanoBlock('selectMembers', renderSelector); export default function decorate(block) { - console.log('products-sideview', block); block.firstElementChild.classList.add('d-flex'); block.firstElementChild.firstElementChild.classList.add('pricing-wrapper'); block.firstElementChild.lastElementChild.classList.add('features-wrapper'); From 6a864e05ed817df68a74e38e8b97739fc2411534 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 16:20:59 +0300 Subject: [PATCH 0982/1296] fix: adding id for tos --- _src/blocks/terms/terms.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_src/blocks/terms/terms.js b/_src/blocks/terms/terms.js index d58d20ee6..fe60b0391 100644 --- a/_src/blocks/terms/terms.js +++ b/_src/blocks/terms/terms.js @@ -1,4 +1,6 @@ export default async function decorate(block, options) { + block.closest('.section').id = 'tos'; + if (options) { // eslint-disable-next-line no-param-reassign block = block.querySelector('.block'); From d5116224716663ddc702885e98c3aa9d0b7d8984 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 17:09:55 +0300 Subject: [PATCH 0983/1296] feat: Add margin-bottom to new-prod-boxes for better spacing --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 49 +++++- _src/blocks/new-prod-boxes/new-prod-boxes.js | 147 +++++++++++++++++- 2 files changed, 180 insertions(+), 16 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 341d13c2e..76027dbf1 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -251,23 +251,57 @@ padding: 13px 48px 16px 10px; filter: grayscale(1); border-radius: 8px; + margin-bottom: 8px; li { &:first-of-type { display: flex; align-items: center; - font-weight: normal; font-size: 14px; .checkmark { - width: 16px; - height: 16px; - margin: 0 16px 0 0; + appearance: none; + -webkit-appearance: none; + display: grid; + width: 18px; + height: 18px; + padding: 0; + border: 1px solid #FFFFFF; + border-radius: 1px; + margin-right: 16px; + transition: cubic-bezier(0.075, 0.82, 0.165, 1); + + &::after { + content: ""; + width: 18px; + height: 18px; + clip-path: polygon(17% 54%, 28% 43%, 38% 54%, 70% 22%, 81% 33%, 38% 75%, 17% 54%); + transform: scale(0); + background-color: white; + } + &:checked { + background: #016DFF 0% 0% no-repeat padding-box; + -webkit-box-shadow: 0px 0px 5px 0px rgba(1,109,255,1); + -moz-box-shadow: 0px 0px 5px 0px rgba(1,109,255,1); + box-shadow: 0px 0px 5px 0px rgba(1,109,255,1); + } + &:checked::after { + transform: scale(1); + } } } } + + &.checked { + filter: grayscale(0); + background-color: #EAF5EC; + } } } } + + .add-on-product { + transition: all 0.4s; + } } } } @@ -304,7 +338,7 @@ position: relative; } -.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type)>span:last-of-type { +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type) .white-pill-content { position: absolute; background-color: white; padding: 10px; @@ -318,7 +352,7 @@ display: none; } -.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type)>span:last-of-type::before { +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type) .white-pill-content::before { content: ""; position: absolute; left: 17px; @@ -328,7 +362,7 @@ border-color: white transparent transparent; } -.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type):hover>span:last-of-type { +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists ul li:not(:first-of-type):hover .white-pill-content{ display: block; } @@ -661,7 +695,6 @@ @media (min-width: 1200px) { .new-prod-boxes-container.we-container { - max-width: 1290px; padding-left: 20px; padding-right: 20px; } diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 10376b852..b5e5d01d7 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,6 +1,7 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ + let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, 'consumer')]); @@ -42,7 +43,26 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, return priceElement; } -async function updateProductPrice(prodName, prodUsers, prodYears, pid) { +function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = null) { + if (!buyLinkSelector) { + return null; + } + + const url = new URL(window.location.href); + let buyLinkPid = pid; + if (!buyLinkPid) { + buyLinkPid = url.searchParams.get('pid') || getMetadata('pid'); + } + if (!buyLinkPid) { + buyLinkPid = ''; + } + let pidInLink = buyLinkPid ? `pid=${buyLinkPid}` : ''; + + const buyLink = buyLinkSelector.querySelector('a'); + buyLink.href = `${getBuyLinkCountryPrefix()}/${prodName}/${ProdUsers}/${prodYears}/?${pidInLink}`; + return buyLink; +} +async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null) { try { const { fetchProduct } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); @@ -51,7 +71,10 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid) { const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); const oldPrice = price; const newPrice = discount.discounted_price; + // eslint-disable-next-line no-param-reassign + buyLinkSelector = dynamicBuyLink(buyLinkSelector, prodName, prodUsers, prodYears, pid); let priceElement = document.createElement('div'); + priceElement.classList.add('hero-aem__prices__box'); priceElement.innerHTML = `
    @@ -62,7 +85,10 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid) {
    ${newPrice}${currencyLabel}
    + ${buyLinkSelector}
    `; + + console.log(priceElement); return priceElement; } catch (err) { console.error('Error fetching product:', err); @@ -74,6 +100,7 @@ export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars products, familyProducts, monthlyProducts, priceType, pid, mainProduct, + addOnProducts, addOnMonthlyProducts, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { @@ -151,14 +178,21 @@ export default async function decorate(block, options) { const monthlyPricesAsList = monthlyProducts && monthlyProducts.split(','); let monthlyPriceBoxes = {}; let yearlyPricesBoxes = {}; + let yearlyAddOnPricesBoxes = {}; + let monthlyAddOnPricesBoxes = {}; if (combinedProducts.length) { await Promise.all([...block.children].map(async (prod, key) => { // eslint-disable-next-line no-unused-vars - const [greenTag, title, blueTag, subtitle, radioButtons, placeholder, billed, buyLink, undeBuyLink, benefitsLists] = [...prod.querySelectorAll('tr')]; + const mainTable = prod.querySelector('tbody'); + const [greenTag, title, blueTag, subtitle, radioButtons, placeholder, billed, buyLink, undeBuyLink, benefitsLists, billed2, buyLink2] = [...mainTable.querySelectorAll(':scope > tr')]; // const [prodName, prodUsers, prodYears] = productsAsList[key].split('/'); const [prodName, prodUsers, prodYears] = combinedProducts[key].split('/'); const [prodMonthlyName, prodMonthlyUsers, prodMonthlyYears] = monthlyPricesAsList ? monthlyPricesAsList[key].split('/') : []; + let addOn = 0; + const addOnProductsAsList = addOnProducts && addOnProducts.split(','); + const addOnMonthlyProductsAsList = addOnMonthlyProducts && addOnMonthlyProducts.split(','); const featuresSet = benefitsLists.querySelectorAll('table'); + console.log(featuresSet); const featureList = Array.from(featuresSet).map((table) => { const trList = Array.from(table.querySelectorAll('tr')); const liString = trList.map((tr) => { @@ -166,7 +200,7 @@ export default async function decorate(block, options) { // Extract the content of the first to be placed outside the
  • let firstTdContent = tdList.length > 0 && tdList[0].textContent.trim() !== '' ? `${tdList[0].innerHTML}` : ''; // Extract the content of the second (if present) inside a - const secondTdContent = tdList.length > 1 && tdList[1].textContent.trim() !== '' ? `${tdList[1].innerHTML}` : ''; + const secondTdContent = tdList.length > 1 && tdList[1].textContent.trim() !== '' ? `${tdList[1].innerHTML}` : ''; // Create the
  • combining the first and second td content let liClass = ''; if (firstTdContent === '') { @@ -213,8 +247,31 @@ export default async function decorate(block, options) { firstTdContent = firstTdContent.replace('[checkmark]', ''); } - const liContent = `
  • ${firstTdContent}${secondTdContent}
  • `; + if (firstTdContent.indexOf('[add-on]') !== -1) { + firstTdContent = firstTdContent.replace('[add-on]', ''); + addOn = 1; + } + if (firstTdContent.indexOf('<<add-on-newprice>>') !== -1) { + firstTdContent = firstTdContent.replace('<<add-on-newprice>>', ''); + } + if (firstTdContent.indexOf('<<add-on-oldprice>>') !== -1) { + firstTdContent = firstTdContent.replace('<<add-on-oldprice>>', ''); + } + + if (firstTdContent.indexOf('<<add-on-percent-save>>') !== -1) { + firstTdContent = firstTdContent.replace('<<add-on-percent-save>>', ''); + } + + if (firstTdContent.indexOf('[[') !== -1) { + firstTdContent = firstTdContent.replace('[[', '('); + } + + if (firstTdContent.indexOf(']]') !== -1) { + firstTdContent = firstTdContent.replace(']]', ')'); + } + + const liContent = `
  • ${firstTdContent}${secondTdContent}
  • `; return liContent; }).join(' '); @@ -245,12 +302,28 @@ export default async function decorate(block, options) { `; } + let planSwitcher2 = document.createElement('div'); + if (addOn && addOnProductsAsList && addOnMonthlyProductsAsList) { + // eslint-disable-next-line no-unused-vars + const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); + // eslint-disable-next-line no-unused-vars + const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); + let leftRadio = radioButtons.querySelector('td:first-child')?.textContent; + let rightRadio = radioButtons.querySelector('td:last-child')?.textContent; + planSwitcher2.classList.add('plan-switcher', 'addon'); + planSwitcher2.innerHTML = ` + +
    + + `; + } + + let yearlyAddOnPriceBox; // create the prices element based on where the component is being called from, aem of www-websites if (options) { await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector, billed, customLink) .then((pricesBox) => { yearlyPricesBoxes[`${key}-yearly-${prodName.trim()}`] = pricesBox; - // buyLink.parentNode.parentNode.insertBefore(pricesBox, buyLink.parentNode); prod.outerHTML = `
    @@ -277,6 +350,7 @@ export default async function decorate(block, options) { } } else { buyLink.querySelector('a').classList.add('button', 'primary', 'no-arrow'); + buyLink2?.querySelector('a')?.classList.add('button', 'primary', 'no-arrow'); const prodBox = document.createElement('div'); prodBox.innerHTML = ` @@ -296,12 +370,19 @@ export default async function decorate(block, options) { ${undeBuyLink.innerText.trim() ? `` : ''}
    ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} +
    `; block.children[key].outerHTML = prodBox.innerHTML; - let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid); + let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid, buyLink); block.children[key].querySelector('.hero-aem__prices').appendChild(priceBox); yearlyPricesBoxes[`${key}-yearly-${prodName.trim()}`] = priceBox; @@ -309,12 +390,25 @@ export default async function decorate(block, options) { const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, pid); monthlyPriceBoxes[`${key}-monthly-${prodMonthlyName.trim()}`] = montlyPriceBox; } + + if (addOn && addOnMonthlyProductsAsList) { + const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); + let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid); + monthlyAddOnPricesBoxes[`${key}-add-on-monthly-${addOnProdMonthlyName.trim()}`] = monthlyAddOnPriceBox; + } + + if (addOn && addOnProductsAsList) { + const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); + yearlyAddOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid); + block.children[key].querySelector('.hero-aem__prices__addon').appendChild(yearlyAddOnPriceBox); + yearlyAddOnPricesBoxes[`${key}-add-on-yearly-${addOnProdName.trim()}`] = yearlyAddOnPriceBox; + } } let checkmark = block.children[key].querySelector('.checkmark'); if (checkmark) { - let ul = checkmark.closest('ul'); - ul.classList.add('checkmark-list'); + let checkmarkList = checkmark.closest('ul'); + checkmarkList.classList.add('checkmark-list'); let li = checkmark.closest('li'); li.removeChild(checkmark); @@ -329,6 +423,24 @@ export default async function decorate(block, options) { ${checkBox.outerHTML}
    ${li.innerHTML}
    `; li.replaceWith(newLi); + + let addOnNewPrice = newLi.querySelector('.add-on-newprice'); + let addOnOldPrice = newLi.querySelector('.add-on-oldprice'); + let addOnPercentSave = newLi.querySelector('.add-on-percent-save'); + addOnNewPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-newprice').textContent; + addOnOldPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-oldprice').textContent; + addOnPercentSave.textContent = yearlyAddOnPriceBox.querySelector('.prod-save').textContent; + + let checkBoxSelector = newLi.querySelector('.checkmark'); + checkBoxSelector.addEventListener('change', () => { + if (checkBoxSelector.checked) { + checkmarkList.classList.add('checked'); + block.children[key].querySelector('.add-on-product').style.display = 'block'; + } else { + checkmarkList.classList.remove('checked'); + block.children[key].querySelector('.add-on-product').style.display = 'none'; + } + }); } })); } else { @@ -357,6 +469,25 @@ export default async function decorate(block, options) { }); } + if (addOnProducts && addOnMonthlyProducts) { + [...block.children].forEach((prod) => { + let planSwitcher = prod.querySelector('.plan-switcher.addon'); + planSwitcher?.querySelectorAll('input[type="radio"]').forEach((radio) => { + radio.addEventListener('input', (event) => { + let planType = event.target.value.split('-')[3]; + let priceBox = prod.querySelector('.hero-aem__prices__addon'); + if (planType === 'monthly') { + priceBox.innerHTML = ''; + priceBox.appendChild(monthlyAddOnPricesBoxes[event.target.value]); + } else { + priceBox.innerHTML = ''; + priceBox.appendChild(yearlyAddOnPricesBoxes[event.target.value]); + } + }); + }); + }); + } + if (individualSwitchText && familySwitchText) { block.parentNode.insertBefore(switchBox, block); } From 6272d99d1792bb122ee2f06889f6f69daeea5487 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 18:09:25 +0300 Subject: [PATCH 0984/1296] feat: Update dynamic buy link in new-prod-boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 35 ++++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index b5e5d01d7..b516d3360 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,6 +1,7 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ +import { getMetadata, getBuyLinkCountryPrefix } from '../../scripts/utils/utils.js'; let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { @@ -56,13 +57,13 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n if (!buyLinkPid) { buyLinkPid = ''; } - let pidInLink = buyLinkPid ? `pid=${buyLinkPid}` : ''; + let pidInLink = buyLinkPid ? `&pid=${buyLinkPid}` : ''; - const buyLink = buyLinkSelector.querySelector('a'); - buyLink.href = `${getBuyLinkCountryPrefix()}/${prodName}/${ProdUsers}/${prodYears}/?${pidInLink}`; - return buyLink; + let buyLinkHref = buyLinkSelector.href; + buyLinkHref = `${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/${pidInLink}`; + return buyLinkHref; } -async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null) { +async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null) { try { const { fetchProduct } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); @@ -72,9 +73,13 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu const oldPrice = price; const newPrice = discount.discounted_price; // eslint-disable-next-line no-param-reassign - buyLinkSelector = dynamicBuyLink(buyLinkSelector, prodName, prodUsers, prodYears, pid); + let updatedBuyLinkSelector = buyLinkSelector; + if (updatedBuyLinkSelector) { + updatedBuyLinkSelector.href = dynamicBuyLink(updatedBuyLinkSelector, prodName, prodUsers, prodYears, pid); + } let priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices__box'); + // console.log("selector : ",updatedBuyLinkSelector); priceElement.innerHTML = `
    @@ -85,9 +90,9 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu
    ${newPrice}${currencyLabel}
    - ${buyLinkSelector} + ${billed ? `
    ${billed.innerHTML}
    ` : ''} + ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''}
    `; - console.log(priceElement); return priceElement; } catch (err) { @@ -363,9 +368,6 @@ export default async function decorate(block, options) {
    ${radioButtons ? planSwitcher.outerHTML : ''}
    - ${billed ? `
    ${billed.innerHTML}
    ` : ''} - - ${buyLink.innerHTML} ${undeBuyLink.innerText.trim() ? `` : ''}
    @@ -374,32 +376,29 @@ export default async function decorate(block, options) { ${billed2 ? '
    ' : ''} ${planSwitcher2.outerHTML ? planSwitcher2.outerHTML : ''}
    - ${billed2 ? `
    ${billed2.innerHTML}
    ` : ''} - ${buyLink2?.innerHTML ? buyLink2.innerHTML : ''}
    `; block.children[key].outerHTML = prodBox.innerHTML; - - let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid, buyLink); + let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid, buyLink.querySelector('a'), billed); block.children[key].querySelector('.hero-aem__prices').appendChild(priceBox); yearlyPricesBoxes[`${key}-yearly-${prodName.trim()}`] = priceBox; if (monthlyProducts) { - const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, pid); + const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, pid, buyLink.querySelector('a'), billed); monthlyPriceBoxes[`${key}-monthly-${prodMonthlyName.trim()}`] = montlyPriceBox; } if (addOn && addOnMonthlyProductsAsList) { const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); - let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid); + let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid, buyLink2.querySelector('a'), billed2); monthlyAddOnPricesBoxes[`${key}-add-on-monthly-${addOnProdMonthlyName.trim()}`] = monthlyAddOnPriceBox; } if (addOn && addOnProductsAsList) { const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); - yearlyAddOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid); + yearlyAddOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid, buyLink2.querySelector('a'), billed2); block.children[key].querySelector('.hero-aem__prices__addon').appendChild(yearlyAddOnPriceBox); yearlyAddOnPricesBoxes[`${key}-add-on-yearly-${addOnProdName.trim()}`] = yearlyAddOnPriceBox; } From 762ad551bed1237cb5859f7d9fa6386a229aa47e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 18:09:34 +0300 Subject: [PATCH 0985/1296] add export function --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 6f805b8a9..cfa7a4761 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -60,7 +60,7 @@ async function findProductVariant(cachedResponse, variant) { throw new Error('Variant not found'); } -function getMetadata(name) { +export function getMetadata(name) { const attr = name && name.includes(':') ? 'property' : 'name'; const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', '); return meta || ''; From 03c36978755d4212ecaa685ce95d6f1bc6b70df1 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 28 Aug 2024 18:12:24 +0300 Subject: [PATCH 0986/1296] update creator --- _src/blocks/money-back/money-back.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index e7dedf43e..a76151434 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -64,6 +64,10 @@ display: inline-block; } +.creator-money-back .money-back > ul { + display: flex; + } + .money-back > ul > li { display: inline-block; padding: 8px; @@ -75,11 +79,11 @@ } .creator-money-back .money-back > ul > li { - display: inline-block; background: #F5F5F7; border-radius: 20px; padding: 60px 68px; - width: 550px; + flex: 1; + width: auto; text-align: left; margin: 0 30px; vertical-align: top; From b7f87e566d47bd4a3ca1e49fbdef7f7f651f2257 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 19:12:02 +0300 Subject: [PATCH 0987/1296] Fix: create buy link if not hardcoded --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 6b616d2bf..3d96254ab 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,3 +1,7 @@ +import { + getBuyLinkCountryPrefix, +} from '../../scripts/utils/utils.js'; + /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ @@ -250,7 +254,12 @@ export default async function decorate(block, options) { let newPrice; let discountPercentage; let priceElement = document.createElement('div'); - buyLink.querySelector('a').classList.add('button', 'primary', 'no-arrow'); + if (buyLink.querySelector('a')) { + buyLink.querySelector('a')?.classList.add('button', 'primary', 'no-arrow'); + } else { + const buyLinkText = buyLink.textContent; + buyLink.innerHTML = `${buyLinkText}`; + } block.children[key].outerHTML = `
    @@ -288,7 +297,6 @@ export default async function decorate(block, options) {
    ${newPrice}${currencyLabel} -
    `; block.children[key].querySelector('.hero-aem__prices').appendChild(priceElement); From a4a77e70f17adf6bacbc17a20e045ae38803c1cd Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 28 Aug 2024 19:15:41 +0300 Subject: [PATCH 0988/1296] fix - remove unnecesary condition --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 3d96254ab..151d478be 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -255,7 +255,7 @@ export default async function decorate(block, options) { let discountPercentage; let priceElement = document.createElement('div'); if (buyLink.querySelector('a')) { - buyLink.querySelector('a')?.classList.add('button', 'primary', 'no-arrow'); + buyLink.querySelector('a').classList.add('button', 'primary', 'no-arrow'); } else { const buyLinkText = buyLink.textContent; buyLink.innerHTML = `${buyLinkText}`; From 8ebc9760b12c20d1e301850772185b23378d183b Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 19:45:17 +0300 Subject: [PATCH 0989/1296] Update dynamic buy link function in new-prod-boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index b516d3360..6e1893fca 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,7 +1,7 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ -import { getMetadata, getBuyLinkCountryPrefix } from '../../scripts/utils/utils.js'; +import { getMetadata, getProductLinkCountryPrefix } from '../../scripts/utils/utils.js'; let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { @@ -60,7 +60,7 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n let pidInLink = buyLinkPid ? `&pid=${buyLinkPid}` : ''; let buyLinkHref = buyLinkSelector.href; - buyLinkHref = `${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/${pidInLink}`; + buyLinkHref = `${getProductLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/${pidInLink}`; return buyLinkHref; } async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null) { @@ -79,7 +79,6 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu } let priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices__box'); - // console.log("selector : ",updatedBuyLinkSelector); priceElement.innerHTML = `
    @@ -93,7 +92,6 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu ${billed ? `
    ${billed.innerHTML}
    ` : ''} ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''}
    `; - console.log(priceElement); return priceElement; } catch (err) { console.error('Error fetching product:', err); From caf1f5d85ddc26043c55ebbf656c5b63f80f48b4 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 19:50:31 +0300 Subject: [PATCH 0990/1296] Update dynamic buy link function in new-prod-boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 6e1893fca..f4bf3e607 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -57,10 +57,9 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n if (!buyLinkPid) { buyLinkPid = ''; } - let pidInLink = buyLinkPid ? `&pid=${buyLinkPid}` : ''; - let buyLinkHref = buyLinkSelector.href; - buyLinkHref = `${getProductLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/${pidInLink}`; + let buyLinkHref = new URL(`${getProductLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/`); + buyLinkHref.searchParams.append('pid', buyLinkPid); return buyLinkHref; } async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null) { From 5451407f05b8c08905f1ac2b9d62aca698a80a31 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 19:51:24 +0300 Subject: [PATCH 0991/1296] Update dynamic buy link function in new-prod-boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index f4bf3e607..397b46132 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -59,7 +59,9 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n } let buyLinkHref = new URL(`${getProductLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/`); - buyLinkHref.searchParams.append('pid', buyLinkPid); + if (buyLinkPid) { + buyLinkHref.searchParams.append('pid', buyLinkPid); + } return buyLinkHref; } async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null) { From 5de9b2d87c89454c629f232281facd1f4deefe36 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 28 Aug 2024 19:53:00 +0300 Subject: [PATCH 0992/1296] Update dynamic buy link function in new-prod-boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 397b46132..b8d050aba 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,7 +1,7 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ -import { getMetadata, getProductLinkCountryPrefix } from '../../scripts/utils/utils.js'; +import { getMetadata, getBuyLinkCountryPrefix } from '../../scripts/utils/utils.js'; let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { @@ -58,7 +58,7 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n buyLinkPid = ''; } - let buyLinkHref = new URL(`${getProductLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/`); + let buyLinkHref = new URL(`${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/`); if (buyLinkPid) { buyLinkHref.searchParams.append('pid', buyLinkPid); } From ffe8dcce0ecdf8e9167cf0feb1400e9ef97eba0a Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 29 Aug 2024 09:36:42 +0300 Subject: [PATCH 0993/1296] DEX-19813 --- _src/blocks/products-sideview/products-sideview.js | 6 +++--- _src/scripts/utils/utils.js | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index 93f59b370..48967cc7f 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -1,5 +1,5 @@ import { - createNanoBlock, fetchProduct, getBuyLinkCountryPrefix, getDatasetFromSection, renderNanoBlocks, + createNanoBlock, fetchProduct, getBuyLinkCountryPrefix, getDatasetFromSection, getPidFromUrl, renderNanoBlocks, } from '../../scripts/utils/utils.js'; const state = { @@ -138,9 +138,10 @@ function updateBuyLink(block) { const productCode = state.currentProduct.alias; const dimension = MEMBERS_MAP.get(state.membersIndex); const { years } = state.currentProduct.variation; + const pid = getPidFromUrl(); if (buyLink) { - buyLink.href = `${getBuyLinkCountryPrefix()}/${productCode}/${dimension}/${years}/`; + buyLink.href = `${getBuyLinkCountryPrefix()}/${productCode}/${dimension}/${years}/${pid ? `pid.${pid}` : ''}`; } } @@ -165,7 +166,6 @@ function renderPrice(block, firstProduct, secondProduct) { const el = document.createElement('DIV'); el.classList.add('price'); - el.innerHTML = '100 euroi'; Promise.all([ fetchProduct(firstProduct, variant), diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 6f805b8a9..8c643561e 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -571,3 +571,8 @@ export async function decorateIcons(element) { } }); } + +export function getPidFromUrl() { + const url = new URL(window.location.href); + return url.searchParams.get('pid') || getMetadata('pid'); +} From 6356d51f4677b40dea8ab6724f5fa114544d0329 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 29 Aug 2024 10:21:48 +0300 Subject: [PATCH 0994/1296] update creators: target blank --- _src/blocks/creators-block/creators-block.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/creators-block/creators-block.js b/_src/blocks/creators-block/creators-block.js index 7c47cd185..23f8a405d 100644 --- a/_src/blocks/creators-block/creators-block.js +++ b/_src/blocks/creators-block/creators-block.js @@ -47,6 +47,7 @@ export default function decorate(block) { if (creatorLink) { const anchor = document.createElement('a'); anchor.href = creatorLink; + anchor.target = '_blank'; anchor.appendChild(newDiv); table.parentNode.replaceChild(anchor, table); } else { From 68ba4484b18453589624ee5f56eb13664184c932 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 29 Aug 2024 10:23:54 +0300 Subject: [PATCH 0995/1296] DEX-19813 --- _src/blocks/products-sideview/products-sideview.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index 48967cc7f..7f02514ff 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -1,5 +1,10 @@ import { - createNanoBlock, fetchProduct, getBuyLinkCountryPrefix, getDatasetFromSection, getPidFromUrl, renderNanoBlocks, + createNanoBlock, + fetchProduct, + getBuyLinkCountryPrefix, + getDatasetFromSection, + getPidFromUrl, + renderNanoBlocks, } from '../../scripts/utils/utils.js'; const state = { From 362289044f3a46e91165321916f0777f6ea9a976 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 29 Aug 2024 12:37:52 +0300 Subject: [PATCH 0996/1296] update creator after feedback --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 3 +++ _src/blocks/new-prod-boxes/new-prod-boxes.js | 15 +++++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index e8c007d71..12ab2a7f7 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -315,6 +315,9 @@ font-size: 40px; font-weight: bold; } +.new-prod-boxes-container .prod-newprice .per-m { + font-size: 20px; +} .new-prod-boxes-container .newprice-container { line-height: 1; } diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 151d478be..852c86436 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -6,7 +6,7 @@ import { /* eslint-disable no-undef */ /* eslint-disable max-len */ let dataLayerProducts = []; -async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { +async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink,) { const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, 'consumer')]); const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); const price = storeOption.getPrice(); @@ -49,7 +49,7 @@ async function createPricesElement(storeOBJ, conditionText, saveText, prodName, export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars - products, familyProducts, monthlyProducts, priceType, pid, mainProduct, + products, familyProducts, monthlyProducts, priceType, pid, mainProduct, type, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { @@ -233,7 +233,7 @@ export default async function decorate(block, options) { ${subtitle.innerText.trim() ? `

    ${subtitle.querySelector('td').innerHTML.trim()}

    ` : ''} ${radioButtons ? planSwitcher.outerHTML : ''} - + ${pricesBox.outerHTML} ${buyLink.outerHTML} @@ -285,9 +285,12 @@ export default async function decorate(block, options) { discountPercentage = Math.round( (1 - (product.discount.discounted_price) / product.price) * 100, ); - oldPrice = product.price; - newPrice = product.discount.discounted_price; let currencyLabel = product.currency_label; + oldPrice = product.price; + newPrice = `${product.discount.discounted_price}${currencyLabel}`; + if (!prodName.endsWith("m") && type === "monthly") { + newPrice = `${(parseInt(newPrice) / 12).toFixed(2).replace('.00', '')}${currencyLabel} ${price.textContent.replace('0', '')}`; + } // priceElement.classList.add('hero-aem__prices'); priceElement.innerHTML = `
    @@ -296,7 +299,7 @@ export default async function decorate(block, options) { Save ${discountPercentage}%
    - ${newPrice}${currencyLabel} + ${newPrice.replace('.00', '')}
    `; block.children[key].querySelector('.hero-aem__prices').appendChild(priceElement); From 9601a4e4a3ce1955a63d68072cb9c9341cf0a07d Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 29 Aug 2024 12:42:40 +0300 Subject: [PATCH 0997/1296] update creators after feedback --- _src/blocks/columns/columns.css | 4 ++-- _src/blocks/new-prod-boxes/new-prod-boxes.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 4c78cad53..4ccbea742 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -242,7 +242,7 @@ } .creators .columns-container p { - font: normal normal normal 24px/33px "Arial", sans-serif; + font: normal normal normal 24px/33px Arial, sans-serif; } .creators .columns-container p.button-container { @@ -256,7 +256,7 @@ background: #E72325 0% 0% no-repeat padding-box; border-radius: 40px; justify-content: center; - font: normal normal 500 18px/24px "Roboto", sans-serif; + font: normal normal 500 18px/24px Roboto, sans-serif; } } diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 852c86436..96d3e2e99 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -6,7 +6,7 @@ import { /* eslint-disable no-undef */ /* eslint-disable max-len */ let dataLayerProducts = []; -async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink,) { +async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { const storeProduct = await storeOBJ.getProducts([new ProductInfo(prodName, 'consumer')]); const storeOption = storeProduct[prodName].getOption(prodUsers, prodYears); const price = storeOption.getPrice(); @@ -288,8 +288,8 @@ export default async function decorate(block, options) { let currencyLabel = product.currency_label; oldPrice = product.price; newPrice = `${product.discount.discounted_price}${currencyLabel}`; - if (!prodName.endsWith("m") && type === "monthly") { - newPrice = `${(parseInt(newPrice) / 12).toFixed(2).replace('.00', '')}${currencyLabel} ${price.textContent.replace('0', '')}`; + if (!prodName.endsWith('m') && type === 'monthly') { + newPrice = `${(parseInt(newPrice, 10) / 12).toFixed(2).replace('.00', '')}${currencyLabel} ${price.textContent.replace('0', '')}`; } // priceElement.classList.add('hero-aem__prices'); priceElement.innerHTML = ` From 2a527002eecbbd725f737a7af3d8dc9e84c43bd2 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 29 Aug 2024 12:52:46 +0300 Subject: [PATCH 0998/1296] Update dynamic buy link function in new-prod-boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index b8d050aba..b17653dd6 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -95,6 +95,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu
    `; return priceElement; } catch (err) { + // eslint-disable-next-line no-console console.error('Error fetching product:', err); } return null; @@ -188,15 +189,14 @@ export default async function decorate(block, options) { await Promise.all([...block.children].map(async (prod, key) => { // eslint-disable-next-line no-unused-vars const mainTable = prod.querySelector('tbody'); + // eslint-disable-next-line no-unused-vars const [greenTag, title, blueTag, subtitle, radioButtons, placeholder, billed, buyLink, undeBuyLink, benefitsLists, billed2, buyLink2] = [...mainTable.querySelectorAll(':scope > tr')]; - // const [prodName, prodUsers, prodYears] = productsAsList[key].split('/'); const [prodName, prodUsers, prodYears] = combinedProducts[key].split('/'); const [prodMonthlyName, prodMonthlyUsers, prodMonthlyYears] = monthlyPricesAsList ? monthlyPricesAsList[key].split('/') : []; let addOn = 0; const addOnProductsAsList = addOnProducts && addOnProducts.split(','); const addOnMonthlyProductsAsList = addOnMonthlyProducts && addOnMonthlyProducts.split(','); const featuresSet = benefitsLists.querySelectorAll('table'); - console.log(featuresSet); const featureList = Array.from(featuresSet).map((table) => { const trList = Array.from(table.querySelectorAll('tr')); const liString = trList.map((tr) => { From 406b2c0500b2ee63d65f96b55598fb071c7afcc6 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 29 Aug 2024 13:07:13 +0300 Subject: [PATCH 0999/1296] Linting fix --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 9fc26704e..c1cda504c 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,7 +1,3 @@ -import { - getBuyLinkCountryPrefix, -} from '../../scripts/utils/utils.js'; - /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ From 0b7b15e9a9ea0775918cd49ac519eea5340725b2 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 29 Aug 2024 14:16:40 +0300 Subject: [PATCH 1000/1296] refactor: Adjust dropdown-box layout and logic --- _src/blocks/dropdown-box/dropdown-box.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/_src/blocks/dropdown-box/dropdown-box.css b/_src/blocks/dropdown-box/dropdown-box.css index da9734867..ea4fd0a2d 100644 --- a/_src/blocks/dropdown-box/dropdown-box.css +++ b/_src/blocks/dropdown-box/dropdown-box.css @@ -439,6 +439,7 @@ padding-right: calc(var(--bs-gutter-x)* .5); padding-left: calc(var(--bs-gutter-x)* .5); margin-right: auto; + margin-left: auto; @media (min-width: 576px) { max-width: 540px; @@ -522,6 +523,15 @@ flex: 0 0 auto; } + .dropdown-box-container.no-dropdown-logic .block>div:nth-child(1)>div { + display: block; + } + + .dropdown-box-container.no-dropdown-logic .new>div:nth-child(1)>div::after, + .dropdown-box-container.no-dropdown-logic.new .block>div:nth-child(1)>div::after { + display: none; + } + .dropdown-box-container>div:nth-child(2) .new::after { top: -90px; right: 0; From 2ef91a6627ca9bd60cb7214201deea230856d863 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 29 Aug 2024 14:55:48 +0300 Subject: [PATCH 1001/1296] updates --- _src/blocks/columns/columns.css | 6 ++++- _src/blocks/new-prod-boxes/new-prod-boxes.css | 4 +++ _src/styles/styles.css | 27 +++++++++++++++++-- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 4c78cad53..454947893 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -228,7 +228,7 @@ } .creators .columns-container .columns > div > div.columns-img-col { - width: 45%; + width: 50%; flex: none; } @@ -245,6 +245,10 @@ font: normal normal normal 24px/33px "Arial", sans-serif; } + .creators .columns-container.smaller-text p { + font: normal normal normal 18px / 27px "Arial", sans-serif; + } + .creators .columns-container p.button-container { text-align: left; } diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index e8c007d71..baec72004 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -1,4 +1,8 @@ /* stylelint-disable */ +.new-prod-boxes-container.remove-first > div.default-content-wrapper:first-of-type { + display: none; +} + .creators .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box { border: 1px solid #ECECEC; } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 90a6814ab..381904b03 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -538,7 +538,30 @@ body.creators { } .creators .default-content-wrapper h2 { - font-weight: bold; + font-weight: 300; +} + +.remove-first > div.default-content-wrapper { + display: none; + padding: 0; +} + +.creators .no-space-top .default-content-wrapper { + padding-top: 0; +} + +.creators .no-space-top .default-content-wrapper h2 { + padding-top: 0; + margin-top: 0; +} + +.creators .no-space-bottom .default-content-wrapper { + padding-bottom: 0; +} + +.creators .no-space-bottom .default-content-wrapper h2 { + padding-bottom: 0; + margin-bottom: 0; } @media (min-width: 768px) { @@ -637,7 +660,7 @@ body.creators { } .creators .default-content-wrapper h2 { - font: normal normal bold 60px/69px Arial; + font: normal normal 300 60px/69px "IBM Plex Sans", sans-serif; } } From 3988e2bbd44bf77c90d2cef7afa5d1caf794c7dd Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 29 Aug 2024 15:24:08 +0300 Subject: [PATCH 1002/1296] New Updates creators --- _src/blocks/four-cards/four-cards.css | 3 ++ _src/blocks/new-prod-boxes/new-prod-boxes.css | 10 +++-- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +- _src/styles/styles.css | 41 ++++++++++++++++--- 4 files changed, 47 insertions(+), 11 deletions(-) diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index 75f43f304..61202245a 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -150,6 +150,9 @@ text-align: center; } +.creator-cards .default-content-wrapper:last-of-type { + padding-top: 0; +} /* a/b test styles, should be deleted after */ .four-cards-container.we-container .default-content-wrapper { text-align: center; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 2bda779dc..55e6635f1 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -103,10 +103,10 @@ } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 { font-weight: bold; - font-size: 24px; + font-size: 22px; line-height: 26px; font-family: Arial, sans-serif; - margin-top: 10px; + margin-top: 0; margin-bottom: 4px; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 a { @@ -125,6 +125,7 @@ display: inline-block; border-radius: 20px; padding: 6px 16px; + margin-bottom: 10px; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag div { display: flex; @@ -193,7 +194,7 @@ font-size: 12px; font-family: Arial, sans-serif; line-height: 13px; - margin: 7px 0; + margin: 7px 0 20px; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .buy-btn a.red-buy-button { width: 100%; @@ -207,7 +208,7 @@ font-size: 12px; font-family: Arial, sans-serif; line-height: 13px; - margin: 7px 0; + margin: 10px 0; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .benefitsLists { font-family: Arial, sans-serif; @@ -321,6 +322,7 @@ } .new-prod-boxes-container .prod-newprice .per-m { font-size: 20px; + top: -12px; } .new-prod-boxes-container .newprice-container { line-height: 1; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 96d3e2e99..4cff2bfb7 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -233,7 +233,7 @@ export default async function decorate(block, options) { ${subtitle.innerText.trim() ? `

    ${subtitle.querySelector('td').innerHTML.trim()}

    ` : ''} ${radioButtons ? planSwitcher.outerHTML : ''} - + ${pricesBox.outerHTML} ${buyLink.outerHTML} @@ -289,7 +289,7 @@ export default async function decorate(block, options) { oldPrice = product.price; newPrice = `${product.discount.discounted_price}${currencyLabel}`; if (!prodName.endsWith('m') && type === 'monthly') { - newPrice = `${(parseInt(newPrice, 10) / 12).toFixed(2).replace('.00', '')}${currencyLabel} ${price.textContent.replace('0', '')}`; + newPrice = `${(parseInt(newPrice, 10) / 12).toFixed(2).replace('.00', '')}${currencyLabel} ${price.textContent.replace('0', '')}`; } // priceElement.classList.add('hero-aem__prices'); priceElement.innerHTML = ` diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 381904b03..526210b71 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -541,11 +541,6 @@ body.creators { font-weight: 300; } -.remove-first > div.default-content-wrapper { - display: none; - padding: 0; -} - .creators .no-space-top .default-content-wrapper { padding-top: 0; } @@ -564,6 +559,42 @@ body.creators { margin-bottom: 0; } +/*.creators a.button { + min-width: 230px!important; + height: 48px!important; + padding: 10px 10px 10px 25px!important; + background: #E72325 0% 0% no-repeat padding-box!important; + border-radius: 40px!important; + justify-content: center!important; + font: normal normal 500 18px / 24px Roboto, sans-serif!important; + color: white; +} +.creators a.button::after { + content: ''; + width: 24px!important; + height: 24px!important; + background-color: var(--button-link-color)!important; + display: inline-block!important; + transition: all .2s cubic-bezier(.4,0,.2,1)!important; + transform: translateX(0)!important; + opacity: 0!important; +} + + +.creators a.button:hover::after { + content: ''; + width: 24px!important; + height: 24px!important; + background-color: var(--button-link-color)!important; + display: inline-block!important; + transition: all .2s cubic-bezier(.4,0,.2,1)!important; + transform: translateX(0)!important; + opacity: 0!important; + margin-left: -10px!important; + transform: translateX(5px); + opacity: 1; +}*/ + @media (min-width: 768px) { main .section.center .products .product-card { min-width: 380px; From 22928a029f8b73099ec7be793707150fc4c2a680 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 29 Aug 2024 15:49:45 +0300 Subject: [PATCH 1003/1296] adding new price near biling text --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 3 ++ _src/blocks/new-prod-boxes/new-prod-boxes.js | 49 ++++++++++--------- 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 55e6635f1..356dfa7db 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -311,6 +311,9 @@ .new-prod-boxes-container .prod-oldprice { font-size: 16px; text-decoration: line-through; +} +.new-prod-boxes-container .prod-newprice2 { + } .new-prod-boxes-container .prod-save { color: #1C7928; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 4cff2bfb7..415e9ae75 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -261,25 +261,6 @@ export default async function decorate(block, options) { buyLink.innerHTML = `${buyLinkText}`; } - block.children[key].outerHTML = ` -
    -
    - ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} - ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} - ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} - ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} -
    - ${radioButtons ? planSwitcher.outerHTML : ''} -
    - ${billed ? `
    ${billed.innerHTML.replace('0', ``)}
    ` : ''} - - ${buyLink.innerHTML} - - ${undeBuyLink.innerText.trim() ? `` : ''} -
    - ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} -
    -
    `; fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid) .then((product) => { discountPercentage = Math.round( @@ -287,15 +268,37 @@ export default async function decorate(block, options) { ); let currencyLabel = product.currency_label; oldPrice = product.price; - newPrice = `${product.discount.discounted_price}${currencyLabel}`; + let newPrice2 = ''; + newPrice = `${product.discount.discounted_price} ${currencyLabel}`; if (!prodName.endsWith('m') && type === 'monthly') { - newPrice = `${(parseInt(newPrice, 10) / 12).toFixed(2).replace('.00', '')}${currencyLabel} ${price.textContent.replace('0', '')}`; + newPrice2 = `${product.discount.discounted_price.replace('.00', '')} ${currencyLabel}`; + newPrice = `${(parseInt(newPrice, 10) / 12).toFixed(2).replace('.00', '')} ${currencyLabel} ${price.textContent.replace('0', '')}`; } - // priceElement.classList.add('hero-aem__prices'); + + block.children[key].outerHTML = ` +
    +
    + ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} + ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''} +
    + ${radioButtons ? planSwitcher.outerHTML : ''} +
    + ${billed ? `
    ${billed.innerHTML.replace('0', `${newPrice2}`)}
    ` : ''} + + ${buyLink.innerHTML} + + ${undeBuyLink.innerText.trim() ? `` : ''} +
    + ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} +
    +
    `; + priceElement.innerHTML = `
    - ${oldPrice}${currencyLabel} + ${oldPrice} ${currencyLabel} Save ${discountPercentage}%
    From 7685a09b8cabcc292c279513c301fab71a155ea5 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 29 Aug 2024 15:50:42 +0300 Subject: [PATCH 1004/1296] fix --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 356dfa7db..55e6635f1 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -311,9 +311,6 @@ .new-prod-boxes-container .prod-oldprice { font-size: 16px; text-decoration: line-through; -} -.new-prod-boxes-container .prod-newprice2 { - } .new-prod-boxes-container .prod-save { color: #1C7928; From 452754aac1c912d3feb3309be3e1e39108659a6d Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 29 Aug 2024 16:11:32 +0300 Subject: [PATCH 1005/1296] adding font for creators --- .../template-factories/creators-lazy.css | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 _src/scripts/template-factories/creators-lazy.css diff --git a/_src/scripts/template-factories/creators-lazy.css b/_src/scripts/template-factories/creators-lazy.css new file mode 100644 index 000000000..3d3a94cdc --- /dev/null +++ b/_src/scripts/template-factories/creators-lazy.css @@ -0,0 +1,24 @@ + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../../fonts/ibm-plex-sans-300.woff2') format('woff2'); + font-style: normal; + font-weight: 300; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../../fonts/ibm-plex-sans-400.woff2') format('woff2'); + font-style: normal; + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: 'IBM Plex Sans'; + src: url('../../fonts/ibm-plex-sans-500.woff2') format('woff2'); + font-style: normal; + font-weight: 500; + font-display: swap; +} \ No newline at end of file From f0625eb07c4f91a892b0bd4995af40a54b97f21c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 29 Aug 2024 16:12:55 +0300 Subject: [PATCH 1006/1296] fix lint --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 415e9ae75..b8414fe4c 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -268,7 +268,7 @@ export default async function decorate(block, options) { ); let currencyLabel = product.currency_label; oldPrice = product.price; - let newPrice2 = ''; + let newPrice2 = ''; newPrice = `${product.discount.discounted_price} ${currencyLabel}`; if (!prodName.endsWith('m') && type === 'monthly') { newPrice2 = `${product.discount.discounted_price.replace('.00', '')} ${currencyLabel}`; From 87cbd3e46aae8dc5430dc05c20c015eeabf187a3 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 29 Aug 2024 17:45:11 +0300 Subject: [PATCH 1007/1296] Solve conflicts --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 32 +++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index b17653dd6..f7a3f40a0 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -64,7 +64,7 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n } return buyLinkHref; } -async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null) { +async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null, type = null, hideDecimals = null, perPrice = '') { try { const { fetchProduct } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); @@ -72,7 +72,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu const { price, discount, currency_label: currencyLabel } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); const oldPrice = price; - const newPrice = discount.discounted_price; + let newPrice = discount.discounted_price; // eslint-disable-next-line no-param-reassign let updatedBuyLinkSelector = buyLinkSelector; if (updatedBuyLinkSelector) { @@ -81,16 +81,26 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu let priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices__box'); + let newPriceBilled = ''; + if (hideDecimals === 'true') { + newPriceBilled = `${product.discount.discounted_price.replace('.00', '')} ${currencyLabel}`; + newPrice = newPrice.replace('.00', ''); + } + + if (!prodName.endsWith('m') && type === 'monthly') { + newPrice = `${(parseInt(newPrice, 10) / 12)}`; + } + priceElement.innerHTML = `
    - ${oldPrice}${currencyLabel} + ${oldPrice} ${currencyLabel} Save ${discountPercentage}%
    - ${newPrice}${currencyLabel} + ${newPrice} ${currencyLabel} ${perPrice && `${perPrice.textContent.replace('0', '')}`}
    - ${billed ? `
    ${billed.innerHTML}
    ` : ''} + ${billed ? `
    ${billed.innerHTML.replace('0', `${newPriceBilled}`)}
    ` : ''} ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''}
    `; return priceElement; @@ -105,7 +115,7 @@ export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars products, familyProducts, monthlyProducts, priceType, pid, mainProduct, - addOnProducts, addOnMonthlyProducts, + addOnProducts, addOnMonthlyProducts, type, hideDecimals, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { @@ -190,7 +200,7 @@ export default async function decorate(block, options) { // eslint-disable-next-line no-unused-vars const mainTable = prod.querySelector('tbody'); // eslint-disable-next-line no-unused-vars - const [greenTag, title, blueTag, subtitle, radioButtons, placeholder, billed, buyLink, undeBuyLink, benefitsLists, billed2, buyLink2] = [...mainTable.querySelectorAll(':scope > tr')]; + const [greenTag, title, blueTag, subtitle, radioButtons, perPrice, billed, buyLink, undeBuyLink, benefitsLists, billed2, buyLink2] = [...mainTable.querySelectorAll(':scope > tr')]; const [prodName, prodUsers, prodYears] = combinedProducts[key].split('/'); const [prodMonthlyName, prodMonthlyUsers, prodMonthlyYears] = monthlyPricesAsList ? monthlyPricesAsList[key].split('/') : []; let addOn = 0; @@ -380,24 +390,24 @@ export default async function decorate(block, options) {
    `; block.children[key].outerHTML = prodBox.innerHTML; - let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid, buyLink.querySelector('a'), billed); + let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); block.children[key].querySelector('.hero-aem__prices').appendChild(priceBox); yearlyPricesBoxes[`${key}-yearly-${prodName.trim()}`] = priceBox; if (monthlyProducts) { - const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, pid, buyLink.querySelector('a'), billed); + const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); monthlyPriceBoxes[`${key}-monthly-${prodMonthlyName.trim()}`] = montlyPriceBox; } if (addOn && addOnMonthlyProductsAsList) { const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); - let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid, buyLink2.querySelector('a'), billed2); + let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); monthlyAddOnPricesBoxes[`${key}-add-on-monthly-${addOnProdMonthlyName.trim()}`] = monthlyAddOnPriceBox; } if (addOn && addOnProductsAsList) { const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); - yearlyAddOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid, buyLink2.querySelector('a'), billed2); + yearlyAddOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); block.children[key].querySelector('.hero-aem__prices__addon').appendChild(yearlyAddOnPriceBox); yearlyAddOnPricesBoxes[`${key}-add-on-yearly-${addOnProdName.trim()}`] = yearlyAddOnPriceBox; } From 3be18ae5b6c72a699dbae168b3fe96078d9a6e90 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 30 Aug 2024 15:13:21 +0300 Subject: [PATCH 1008/1296] update mobile version creators page --- _src/blocks/columns/columns.css | 32 ++++++++ _src/blocks/creators-block/creators-block.css | 73 +++++++++++++------ _src/blocks/four-cards/four-cards.css | 19 ++++- _src/blocks/money-back/money-back.css | 57 +++++++++++---- .../questions-answers/questions-answers.css | 17 ++++- 5 files changed, 157 insertions(+), 41 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 1ca958de1..c0513eba9 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -672,3 +672,35 @@ main .section.two-columns .right-col .products.plans a.button:any-link { height: auto!important; } } + +@media (max-width: 991px) { + .creators .header-mobile.columns-container div.columns-img-col { + display: none; + } + .creators .header-mobile.columns-container div { + text-align: center; + } + .creators .columns > div > div { + text-align: center; + } + .creators .header-mobile h3 { + font-size: var(--heading-font-size-l); + line-height: 1.2; + } + .creators .columns-container h3, .creators .columns-container h5 { + font-family: "IBM Plex Sans", sans-serif; + } + .creators .default-content-wrapper h2 { + font-family: "IBM Plex Sans", sans-serif; + } + .creators .image-position.columns-container div.columns-img-col { + position: relative; + left: -16%; + } + .creators .image-position.columns-container .columns > div > div { + text-align: center; + } + .creators .no-space-top .default-content-wrapper h2 { + padding-top: 23px; + } +} diff --git a/_src/blocks/creators-block/creators-block.css b/_src/blocks/creators-block/creators-block.css index c44b250a5..830e289d2 100644 --- a/_src/blocks/creators-block/creators-block.css +++ b/_src/blocks/creators-block/creators-block.css @@ -34,7 +34,7 @@ text-align: left; font-size: 60px; line-height: 70px; - font-family: Arial, sans-serif; + font-family: "IBM Plex Sans", sans-serif; font-weight: normal; letter-spacing: 0; color: #FFF; @@ -44,7 +44,7 @@ text-align: left; font-size: 28px; line-height: 32px; - font-family: Arial, sans-serif; + font-family: "IBM Plex Sans", sans-serif; font-weight: bold; letter-spacing: 0; color: #FFF; @@ -70,7 +70,7 @@ .creators-block.block>div:nth-child(2)>div { display: grid; - grid-template-columns: repeat(5, minmax(220px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 30px; } @@ -121,19 +121,11 @@ top: 10px; } -@media (max-width: 1200px) { - .creators-block.block>div:nth-child(2)>div { - display: grid; - grid-template-columns: repeat(4, minmax(220px, 1fr)); - grid-gap: 30px; - } -} - -@media (max-width: 1020px) { - .creators-block.block>div:nth-child(2)>div { - display: grid; - grid-template-columns: repeat(3, minmax(220px, 1fr)); - grid-gap: 30px; +@media (max-width: 1320px) { + .creators-block-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + margin: 8px; } } @@ -141,14 +133,51 @@ .creators-block-wrapper { max-width: var(--section-desktop-max-width); padding: 0 var(--section-desktop-padding); - margin: 0 auto; + margin: 8px; + } +} + +@media (max-width: 768px) { + .creators.creators-block-container .creators-block-wrapper { + margin: 0 8px; + } + + .creators.creators-block-container >div h3 { + font-size: var(--heading-font-size-l); + line-height: 1.2; + } + + .creators-block.block>div { + padding: 30px 0; + } + + .creators-block.block>div:first-of-type { + padding: 30px 0 0; + } + + .creators-block.block>div:last-of-type { + padding: 0; + } + + .creators-block.block>div p { + font-size: 22px; + line-height: 26px; + } + + .creators-block.block>div p:first-of-type { + margin: 0; + } + + .creators-block.block>div:first-of-type img { + position: relative; + width: 60px; + top: 0; } } -@media (max-width: 758px) { - .creators-block.block>div:nth-child(2)>div { - display: grid; - grid-template-columns: repeat(2, minmax(220px, 1fr)); - grid-gap: 30px; +@media (max-width: 525px) { + .creators-block.block>div:nth-child(2) .creator-box { + width: 100%; + height: 120vw; } } \ No newline at end of file diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index 61202245a..65b0eba23 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -89,6 +89,14 @@ justify-content: center; } +.creator-cards .four-cards > ul > li { + font-size: 18px; +} + +.creator-cards .four-cards.block ul li strong { + font-size: 22px; +} + .four-cards-container h3 { font: normal normal bold 32px/37px var(--body-font-family); text-align: center; @@ -249,7 +257,7 @@ } } -@media (min-width: 991px) { +@media (min-width: 992px) { .four-cards-container.we-container { max-width: 1300px; padding-left: 50px; @@ -274,3 +282,12 @@ padding-right: 20px; } } + +@media (max-width: 991px) { + .creators .title-size .default-content-wrapper h2 { + font-size: 31px; + } + .creator-cards .default-content-wrapper a.button:any-link { + margin-top: 0; + } +} diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index a76151434..0718023ec 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -99,11 +99,11 @@ } .creator-money-back .money-back > ul > li h6 { - font: normal normal bold 32px/38px Arial, sans-serif; + font: normal normal bold 32px/38px "IBM Plex Sans", sans-serif; } .creator-money-back .money-back > ul > li p { - font: normal normal normal 20px/23px Arial, sans-serif; + font: normal normal normal 20px/26px Arial, sans-serif; } .money-back > ul > li p:first-of-type { @@ -124,22 +124,30 @@ } .creator-money-back .money-back > ul > li a { - display: inline-flex; - justify-content: center; - min-width: 170px; - text-align: center; - padding: 10px 13px; - height: 44px; + min-width: 230px; + height: 48px; + padding: 10px 10px 10px 25px; background: #E72325 0% 0% no-repeat padding-box; - border-radius: 5px; - font: normal normal bold 16px/18px Arial, sans-serif; + border-radius: 40px; + justify-content: center; + font: normal normal 500 18px / 24px Roboto, sans-serif; color: white; } .creator-money-back .money-back > ul > li a:hover { + color: white; + background-color: var(--button-background-color); text-decoration: none; + } + + .creator-money-back .money-back > ul > li a.button:hover span.button-text { + transform: translate(-10px, 0); + } + + .creator-money-back .money-back > ul > li a:active { color: white; - background: #D70000; + background-color: var(--button-background-color); + border: 0; } .money-back > ul > li strong { @@ -175,6 +183,14 @@ transition: none; } + .creator-money-back .money-back a.button span.button-text { + transition: transform .2s cubic-bezier(.4,0,.2,1); + } + + .money-back a.button:hover span.button-text { + transform: none; + } + .money-back a.button:hover span.button-text { transform: none; } @@ -189,10 +205,10 @@ .creator-money-back .money-back a.button::after { content: ''; - width: 0; - height: 0; - margin: 0; - transition: none; + width: 24px; + height: 24px; + margin-left: -10px; + transition: all .2s cubic-bezier(.4,0,.2,1); } .money-back .icon { @@ -258,3 +274,14 @@ padding-right: 20px; } } + +@media (max-width: 991px) { + .creator-money-back .money-back > ul > li { + margin: 0; + padding: 24px; + } + + .creator-money-back .money-back > ul > li p.button-container { + text-align: center; + } +} \ No newline at end of file diff --git a/_src/blocks/questions-answers/questions-answers.css b/_src/blocks/questions-answers/questions-answers.css index 2ce1d2997..4208d1de4 100644 --- a/_src/blocks/questions-answers/questions-answers.css +++ b/_src/blocks/questions-answers/questions-answers.css @@ -12,7 +12,7 @@ .qa-creators.questions-answers-container h3 { text-align: center; - font: bold 60px/69px Arial, sans-serif; + font: bold 60px/69px "IBM Plex Sans", sans-serif; margin-bottom: 32px; } @@ -24,7 +24,7 @@ .qa-creators.questions-answers-container h4 { text-align: center; - font: bold 24px/26px var(--body-font-family); + font: bold 24px/26px "IBM Plex Sans", sans-serif; margin-bottom: 32px; } @@ -118,11 +118,22 @@ margin: 0 auto; } -@media (max-width: 768px) { +@media (max-width: 991px) { .questions-answers-container h4 { font: normal normal bold 29px / 28px var(--body-font-family); margin: 0; } + .qa-creators.questions-answers-container h3 { + font-size: var(--heading-font-size-l); + line-height: 1.2; + font-family: "IBM Plex Sans", sans-serif; + font-weight: 300; + } + .qa-creators.questions-answers-container h4 { + margin-bottom: 0; + font-weight: 300; + font-family: "IBM Plex Sans", sans-serif; + } } @media (min-width: 992px) { /* desktop */ From 7e2285d2eaeaddc43881fbd750e95925d42e5cb4 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 30 Aug 2024 15:23:50 +0300 Subject: [PATCH 1009/1296] update creators page --- _src/blocks/columns/columns.css | 14 +++- _src/blocks/four-cards/four-cards.css | 10 +-- _src/blocks/money-back/money-back.css | 66 +++++++++---------- .../questions-answers/questions-answers.css | 2 + 4 files changed, 50 insertions(+), 42 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index c0513eba9..172128433 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -246,7 +246,7 @@ } .creators .columns-container.smaller-text p { - font: normal normal normal 18px / 27px "Arial", sans-serif; + font: normal normal normal 18px / 27px Arial, sans-serif; } .creators .columns-container p.button-container { @@ -677,29 +677,37 @@ main .section.two-columns .right-col .products.plans a.button:any-link { .creators .header-mobile.columns-container div.columns-img-col { display: none; } - .creators .header-mobile.columns-container div { + + .creators .columns > div > div { text-align: center; } - .creators .columns > div > div { + + .creators .header-mobile.columns-container div { text-align: center; } + .creators .header-mobile h3 { font-size: var(--heading-font-size-l); line-height: 1.2; } + .creators .columns-container h3, .creators .columns-container h5 { font-family: "IBM Plex Sans", sans-serif; } + .creators .default-content-wrapper h2 { font-family: "IBM Plex Sans", sans-serif; } + .creators .image-position.columns-container div.columns-img-col { position: relative; left: -16%; } + .creators .image-position.columns-container .columns > div > div { text-align: center; } + .creators .no-space-top .default-content-wrapper h2 { padding-top: 23px; } diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index 65b0eba23..78a8f712b 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -89,10 +89,6 @@ justify-content: center; } -.creator-cards .four-cards > ul > li { - font-size: 18px; -} - .creator-cards .four-cards.block ul li strong { font-size: 22px; } @@ -150,6 +146,10 @@ font: normal normal normal 16px/24px var(--body-font-family); } +.creator-cards .four-cards > ul > li { + font-size: 18px; +} + .four-cards .default-content-wrapper { text-align: center; } @@ -161,6 +161,7 @@ .creator-cards .default-content-wrapper:last-of-type { padding-top: 0; } + /* a/b test styles, should be deleted after */ .four-cards-container.we-container .default-content-wrapper { text-align: center; @@ -287,6 +288,7 @@ .creators .title-size .default-content-wrapper h2 { font-size: 31px; } + .creator-cards .default-content-wrapper a.button:any-link { margin-top: 0; } diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index 0718023ec..4d2a6f7f4 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -123,33 +123,6 @@ display: block; } - .creator-money-back .money-back > ul > li a { - min-width: 230px; - height: 48px; - padding: 10px 10px 10px 25px; - background: #E72325 0% 0% no-repeat padding-box; - border-radius: 40px; - justify-content: center; - font: normal normal 500 18px / 24px Roboto, sans-serif; - color: white; - } - - .creator-money-back .money-back > ul > li a:hover { - color: white; - background-color: var(--button-background-color); - text-decoration: none; - } - - .creator-money-back .money-back > ul > li a.button:hover span.button-text { - transform: translate(-10px, 0); - } - - .creator-money-back .money-back > ul > li a:active { - color: white; - background-color: var(--button-background-color); - border: 0; - } - .money-back > ul > li strong { display: inline-block; font: normal normal bold 18px/16px var(--body-font-family); @@ -183,14 +156,6 @@ transition: none; } - .creator-money-back .money-back a.button span.button-text { - transition: transform .2s cubic-bezier(.4,0,.2,1); - } - - .money-back a.button:hover span.button-text { - transform: none; - } - .money-back a.button:hover span.button-text { transform: none; } @@ -203,6 +168,37 @@ transition: none; } + .creator-money-back .money-back > ul > li a { + min-width: 230px; + height: 48px; + padding: 10px 10px 10px 25px; + background: #E72325 0% 0% no-repeat padding-box; + border-radius: 40px; + justify-content: center; + font: normal normal 500 18px / 24px Roboto, sans-serif; + color: white; + } + + .creator-money-back .money-back > ul > li a:hover { + color: white; + background-color: var(--button-background-color); + text-decoration: none; + } + + .creator-money-back .money-back a.button span.button-text { + transition: transform .2s cubic-bezier(.4,0,.2,1); + } + + .creator-money-back .money-back > ul > li a.button:hover span.button-text { + transform: translate(-10px, 0); + } + + .creator-money-back .money-back > ul > li a:active { + color: white; + background-color: var(--button-background-color); + border: 0; + } + .creator-money-back .money-back a.button::after { content: ''; width: 24px; diff --git a/_src/blocks/questions-answers/questions-answers.css b/_src/blocks/questions-answers/questions-answers.css index 4208d1de4..c8b76d1a0 100644 --- a/_src/blocks/questions-answers/questions-answers.css +++ b/_src/blocks/questions-answers/questions-answers.css @@ -123,12 +123,14 @@ font: normal normal bold 29px / 28px var(--body-font-family); margin: 0; } + .qa-creators.questions-answers-container h3 { font-size: var(--heading-font-size-l); line-height: 1.2; font-family: "IBM Plex Sans", sans-serif; font-weight: 300; } + .qa-creators.questions-answers-container h4 { margin-bottom: 0; font-weight: 300; From 0c320518accd8e433d995c9d10db3e1ed8e0c457 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 30 Aug 2024 18:08:07 +0300 Subject: [PATCH 1010/1296] update creators page --- _src/blocks/columns/columns.css | 7 +------ _src/styles/styles.css | 6 ++++++ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 172128433..3c5beed63 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -674,10 +674,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { } @media (max-width: 991px) { - .creators .header-mobile.columns-container div.columns-img-col { - display: none; - } - .creators .columns > div > div { text-align: center; } @@ -700,8 +696,7 @@ main .section.two-columns .right-col .products.plans a.button:any-link { } .creators .image-position.columns-container div.columns-img-col { - position: relative; - left: -16%; + display: none; } .creators .image-position.columns-container .columns > div > div { diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 72d236ec3..8b89d675b 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -595,6 +595,12 @@ body.creators { opacity: 1; }*/ +@media (max-width: 991px) { + .creators main .section.hide-on-mobile { + display: none; + } +} + @media (min-width: 768px) { main .section.center .products .product-card { min-width: 380px; From 08b8e47dc6c4d78bfcbc97388ea1e125a9ffbe34 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Mon, 2 Sep 2024 12:06:57 +0300 Subject: [PATCH 1011/1296] update css creators page --- _src/blocks/creators-block/creators-block.css | 1 + _src/blocks/four-cards/four-cards.css | 5 +++++ _src/blocks/money-back/money-back.css | 8 +++++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/_src/blocks/creators-block/creators-block.css b/_src/blocks/creators-block/creators-block.css index 830e289d2..4286944c2 100644 --- a/_src/blocks/creators-block/creators-block.css +++ b/_src/blocks/creators-block/creators-block.css @@ -119,6 +119,7 @@ .creators-block.block>div:nth-child(2) .creator-box>div:nth-child(1) img { position: relative; top: 10px; + width: 30px; } @media (max-width: 1320px) { diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index 78a8f712b..7c74d5e65 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -162,6 +162,11 @@ padding-top: 0; } +.creator-cards .four-cards ul li div img { + height: 48px; + margin-bottom: 16px; +} + /* a/b test styles, should be deleted after */ .four-cards-container.we-container .default-content-wrapper { text-align: center; diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index 4d2a6f7f4..b6a6a3488 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -217,7 +217,7 @@ .creator-money-back .money-back .icon { height: 60px; margin-bottom: 23px; - fill: #006EFF; + fill: #006DFF; display: flex; } @@ -227,6 +227,12 @@ fill: #006EFF; } + .creator-money-back .money-back img { + height: 60px; + fill: #006df7; + display: flex; + } + @media (max-width: 991px) { /* mobile/tablet */ .money-back-wrapper { padding: var(--body-padding); From 95106ec1ab7792749fc295a0fd25d64ce6e5b88e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 2 Sep 2024 16:57:34 +0300 Subject: [PATCH 1012/1296] chore: Update product-comparison-table CSS and JS --- .../product-comparison-table/product-comparison-table.css | 3 +++ .../product-comparison-table/product-comparison-table.js | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index deb9ccdd7..81ee5efe6 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -54,6 +54,8 @@ .product-comparison-header div[role="columnheader"]:not(:first-child) { border: 1px solid var(--first-table-cell-color); flex: 1; + display: flex; + flex-direction: column; } .product-comparison-header div[role="columnheader"]:not(:first-child).active { @@ -113,6 +115,7 @@ div[role="cell"] .button-container , .product-comparison-header div[role="column color: var(--product-comparison-text-color); text-align: center; font-size: var(--body-font-size-xs); + flex-grow: 1; } .product-comparison-header div[role="cell"] p:first-of-type { diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index cb4f11b33..63ccc65d0 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -279,7 +279,11 @@ export default function decorate(block) { matchHeights(block, 'h3'); block.querySelectorAll('.button-container a').forEach((link) => { if (link && link.href.includes('/site/Store/buy/')) { - link.href = getBuyLinkCountryPrefix(); + // replace the link with the correct country prefix but keep the rest of the link + const url = new URL(link.href); + const prefix = `${getBuyLinkCountryPrefix()}/`; + url.pathname = prefix + url.pathname.split('/site/Store/buy/')[1]; + link.href = url.toString(); } }); } From cfdf2a502778ad21d05aff3d9c0cd7cc5e8015dd Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 2 Sep 2024 19:10:27 +0300 Subject: [PATCH 1013/1296] refactor: Update add-on price calculation in new-prod-boxes.js --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index f7a3f40a0..91d790e18 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -433,9 +433,19 @@ export default async function decorate(block, options) { li.replaceWith(newLi); let addOnNewPrice = newLi.querySelector('.add-on-newprice'); + let newPrice = block.children[key].querySelector('.prod-newprice'); + + // get only the number from the new price + const priceRegex = /\d+(\.\d+)?/; + let newPriceNumberString = newPrice.textContent.match(priceRegex)[0]; + let newPriceNumber = parseFloat(newPriceNumberString); + let priceNumberString = yearlyAddOnPriceBox.querySelector('.prod-newprice').textContent.match(priceRegex)[0]; + let priceNumber = parseFloat(priceNumberString); + let correctPrice = parseInt(priceNumber - newPriceNumber, 10); + let addOnOldPrice = newLi.querySelector('.add-on-oldprice'); let addOnPercentSave = newLi.querySelector('.add-on-percent-save'); - addOnNewPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-newprice').textContent; + addOnNewPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-newprice').textContent.replace(priceRegex, correctPrice); addOnOldPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-oldprice').textContent; addOnPercentSave.textContent = yearlyAddOnPriceBox.querySelector('.prod-save').textContent; From ab4d8959c1c4fea4ed303e1f19bb0c6d555492e1 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 3 Sep 2024 11:22:32 +0300 Subject: [PATCH 1014/1296] refactor: Update add-on price calculation in new-prod-boxes.js --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 44 +++++++++++++------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 91d790e18..0f39c1517 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -111,6 +111,24 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu return null; } +function calculateAddOnCost(selector1, selector2) { + if (!selector1 || !selector2) { + return null; + } + + // get only the number from the new price + const numberRegex = /\d+(\.\d+)?/; + + const firstPriceString = selector1.textContent.match(numberRegex)[0]; + const firstPriceFloat = parseFloat(firstPriceString); + + const secondPriceString = selector2.textContent.match(numberRegex)[0]; + const secondPriceFloat = parseFloat(secondPriceString); + const correctPrice = parseInt(secondPriceFloat - firstPriceFloat, 10); + + return correctPrice; +} + export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars @@ -332,7 +350,7 @@ export default async function decorate(block, options) { `; } - let yearlyAddOnPriceBox; + let addOnPriceBox; // create the prices element based on where the component is being called from, aem of www-websites if (options) { await createPricesElement(options.store, '', 'Save', prodName, prodUsers, prodYears, buyLinkSelector, billed, customLink) @@ -407,9 +425,9 @@ export default async function decorate(block, options) { if (addOn && addOnProductsAsList) { const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); - yearlyAddOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); - block.children[key].querySelector('.hero-aem__prices__addon').appendChild(yearlyAddOnPriceBox); - yearlyAddOnPricesBoxes[`${key}-add-on-yearly-${addOnProdName.trim()}`] = yearlyAddOnPriceBox; + addOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); + block.children[key].querySelector('.hero-aem__prices__addon').appendChild(addOnPriceBox); + yearlyAddOnPricesBoxes[`${key}-add-on-yearly-${addOnProdName.trim()}`] = addOnPriceBox; } } @@ -433,21 +451,17 @@ export default async function decorate(block, options) { li.replaceWith(newLi); let addOnNewPrice = newLi.querySelector('.add-on-newprice'); - let newPrice = block.children[key].querySelector('.prod-newprice'); + let newPriceSelector = block.children[key].querySelector('.prod-newprice'); + let addOnPriceSelector = addOnPriceBox.querySelector('.prod-newprice'); - // get only the number from the new price - const priceRegex = /\d+(\.\d+)?/; - let newPriceNumberString = newPrice.textContent.match(priceRegex)[0]; - let newPriceNumber = parseFloat(newPriceNumberString); - let priceNumberString = yearlyAddOnPriceBox.querySelector('.prod-newprice').textContent.match(priceRegex)[0]; - let priceNumber = parseFloat(priceNumberString); - let correctPrice = parseInt(priceNumber - newPriceNumber, 10); + const numberRegex = /\d+(\.\d+)?/; + const addOnCost = calculateAddOnCost(newPriceSelector, addOnPriceSelector); let addOnOldPrice = newLi.querySelector('.add-on-oldprice'); let addOnPercentSave = newLi.querySelector('.add-on-percent-save'); - addOnNewPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-newprice').textContent.replace(priceRegex, correctPrice); - addOnOldPrice.textContent = yearlyAddOnPriceBox.querySelector('.prod-oldprice').textContent; - addOnPercentSave.textContent = yearlyAddOnPriceBox.querySelector('.prod-save').textContent; + addOnNewPrice.textContent = addOnPriceBox.querySelector('.prod-newprice').textContent.replace(numberRegex, addOnCost); + addOnOldPrice.textContent = addOnPriceBox.querySelector('.prod-oldprice').textContent; + addOnPercentSave.textContent = addOnPriceBox.querySelector('.prod-save').textContent; let checkBoxSelector = newLi.querySelector('.checkmark'); checkBoxSelector.addEventListener('change', () => { From 354eaa7635793028571e5ab82f09f977316c6af0 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Tue, 3 Sep 2024 11:35:43 +0300 Subject: [PATCH 1015/1296] update headings creators page --- _src/blocks/columns/columns.css | 25 ++++++++++++++++++- _src/blocks/four-cards/four-cards.css | 21 ++++++++++++---- _src/blocks/money-back/money-back.css | 2 +- _src/blocks/new-prod-boxes/new-prod-boxes.css | 6 ++--- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +-- .../questions-answers/questions-answers.css | 18 +++++++++++++ _src/blocks/terms/terms.css | 6 +++++ 7 files changed, 70 insertions(+), 12 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 3c5beed63..3f2c613d8 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -237,6 +237,16 @@ font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; } + .creators .header-mobile.columns-container h1 { + font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; + } + + .creators .header-mobile.columns-container h2 { + color: #006DFF; + font: normal normal bold 32px/45px "IBM Plex Sans", sans-serif; + margin-bottom: 0; + } + .creators .columns-container h3 { font: normal normal bold 60px/70px "IBM Plex Sans", sans-serif; } @@ -682,12 +692,25 @@ main .section.two-columns .right-col .products.plans a.button:any-link { text-align: center; } + .creators .header-mobile h1 { + font-size: 32px; + line-height: 1.2; + } + + .creators .header-mobile h2 { + font-size: 16px; + line-height: 1.2; + color: #006DFF; + font-weight: bold; + margin-bottom: 0; + } + .creators .header-mobile h3 { font-size: var(--heading-font-size-l); line-height: 1.2; } - .creators .columns-container h3, .creators .columns-container h5 { + .creators .columns-container h3, .creators .columns-container h5, .creators .columns-container h2, .creators .columns-container h1 { font-family: "IBM Plex Sans", sans-serif; } diff --git a/_src/blocks/four-cards/four-cards.css b/_src/blocks/four-cards/four-cards.css index 7c74d5e65..3129852f1 100644 --- a/_src/blocks/four-cards/four-cards.css +++ b/_src/blocks/four-cards/four-cards.css @@ -83,6 +83,10 @@ } } +.creators .title-size .default-content-wrapper p { + font-size: 24px; +} + .creator-cards .four-cards.block { display: flex; @@ -100,15 +104,15 @@ } .creator-cards.four-cards-container h3 { - font: normal normal bold 60px/69px Arial, sans-serif; + font: normal normal bold 60px/69px "IBM Plex Sans", sans-serif; text-align: center; margin-bottom: 28px; } .creator-cards.four-cards-container h4 { - font: normal normal normal 24px/26px Arial, sans-serif; - text-align: center; - margin-bottom: 72px; + font: normal normal bold 22px/24px "IBM Plex Sans", sans-serif; + text-align: left; + } .four-cards-container.we-container { @@ -164,7 +168,7 @@ .creator-cards .four-cards ul li div img { height: 48px; - margin-bottom: 16px; + margin-bottom: 0; } /* a/b test styles, should be deleted after */ @@ -287,6 +291,7 @@ padding-left: 20px; padding-right: 20px; } + } @media (max-width: 991px) { @@ -294,6 +299,12 @@ font-size: 31px; } + .creators .title-size .default-content-wrapper p { + font-size: 18px; + line-height: 1.25; + margin-bottom: 9px; + } + .creator-cards .default-content-wrapper a.button:any-link { margin-top: 0; } diff --git a/_src/blocks/money-back/money-back.css b/_src/blocks/money-back/money-back.css index b6a6a3488..9ac08a531 100644 --- a/_src/blocks/money-back/money-back.css +++ b/_src/blocks/money-back/money-back.css @@ -98,7 +98,7 @@ font: normal normal normal 14px/16px var(--body-font-family); } - .creator-money-back .money-back > ul > li h6 { + .creator-money-back .money-back > ul > li h4 { font: normal normal bold 32px/38px "IBM Plex Sans", sans-serif; } diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 3e1b34f2f..78a83af29 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -106,7 +106,7 @@ box-sizing: content-box; } -.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 { +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h4 { font-weight: bold; font-size: 22px; line-height: 26px; @@ -115,11 +115,11 @@ margin-bottom: 4px; } -.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 a { +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h4 a { transition: all 0.5s ease; } -.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h2 a:hover { +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h4 a:hover { text-decoration: none; transition: all 0.5s ease; } diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index f7a3f40a0..9642c85f0 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -342,7 +342,7 @@ export default async function decorate(block, options) {
    ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} - ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} ${subtitle.innerText.trim() ? `

    ${subtitle.querySelector('td').innerHTML.trim()}

    ` : ''} @@ -371,7 +371,7 @@ export default async function decorate(block, options) {
    ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} - ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} + ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''}
    diff --git a/_src/blocks/questions-answers/questions-answers.css b/_src/blocks/questions-answers/questions-answers.css index c8b76d1a0..336688308 100644 --- a/_src/blocks/questions-answers/questions-answers.css +++ b/_src/blocks/questions-answers/questions-answers.css @@ -32,6 +32,12 @@ font: italic normal normal 14px/16px var(--body-font-family); } +.qa-creators.questions-answers-container .default-content-wrapper p { + font: bold 24px / 26px "IBM Plex Sans", sans-serif; + margin-bottom: 32px; + text-align: center; +} + .questions-answers .questions-answers-item { margin: 16px 0; padding: 16px 16px 16px 40px; @@ -58,6 +64,18 @@ padding-right: 25px; } +.qa-creators .questions-answers-item .question h4 { + position: relative; + font: normal normal bold 18px/21px var(--body-font-family); + color: #000; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + margin: 0; + text-align: left; +} + .questions-answers-item .question::before { position: absolute; font: normal normal normal 24px/11px var(--body-font-family); diff --git a/_src/blocks/terms/terms.css b/_src/blocks/terms/terms.css index 7b18da73e..a12b4c276 100644 --- a/_src/blocks/terms/terms.css +++ b/_src/blocks/terms/terms.css @@ -76,6 +76,12 @@ } } +.terms-container h5 { + font-size: 16px; + font-weight: bold; + margin: 0; +} + .terms-container h6 { font-size: 16px; font-weight: bold; From 8d8861a60b5b283b9159d9160a98ab0f1ad83af7 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 3 Sep 2024 11:39:13 +0300 Subject: [PATCH 1016/1296] zuora-pricing --- _src/scripts/scripts.js | 14 +- _src/scripts/utils/utils.js | 217 ++++++++++++++++++++---------- _src/scripts/zuora.js | 258 ++++++++++++++++++++++++++++++++++++ 3 files changed, 411 insertions(+), 78 deletions(-) create mode 100644 _src/scripts/zuora.js diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 65e9e7ca5..d4ef49ceb 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -16,7 +16,10 @@ import { import { adobeMcAppendVisitorId, - createTag, getDefaultLanguage, GLOBAL_EVENTS, + createTag, + getDefaultLanguage, + getParamValue, + GLOBAL_EVENTS, } from './utils/utils.js'; import { loadAnalytics } from './analytics.js'; @@ -123,15 +126,6 @@ export function getOperatingSystem(userAgent) { return systems.find(([substr]) => userAgent.includes(substr))?.[1] || 'Unknown'; } -/** - * Returns the value of a query parameter - * @returns {String} - */ -function getParamValue(param) { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.get(param); -} - export function openUrlForOs(urlMacos, urlWindows, urlAndroid, urlIos) { // Get user's operating system const { userAgent } = navigator; diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 0b0394bf3..24cdfc203 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,3 +1,13 @@ +import ZuoraNLClass from '../zuora.js'; + +/** + * Returns the value of a query parameter + * @returns {String} + */ +export function getParamValue(param) { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get(param); +} export const localisationList = ['zh-hk', 'zh-tw', 'en-us', 'de-de', 'nl-nl', 'fr-fr', 'it-it', 'ro-ro']; export function getDefaultLanguage() { // TODO: refactor. It's not working as should for en locales. @@ -41,23 +51,70 @@ export function createTag(tag, attributes, html) { return el; } +function isZuora() { + const url = new URL(window.location.href); + return url.pathname.includes('/nl-nl/') || url.pathname.includes('/nl-be/'); +} + async function findProductVariant(cachedResponse, variant) { - const response = await cachedResponse; - if (!response.ok) throw new Error(`${response.statusText}`); - const json = await response.clone().json(); + if (!isZuora()) { + const response = await cachedResponse; + if (!response.ok) throw new Error(`${response.statusText}`); + const json = await response.clone().json(); - // eslint-disable-next-line guard-for-in,no-restricted-syntax - for (const i in json.data.product.variations) { // eslint-disable-next-line guard-for-in,no-restricted-syntax - for (const j in json.data.product.variations[i]) { - const v = json.data.product.variations[i][j]; - if (v.variation.variation_name === variant) { - return v; + for (const i in json.data.product.variations) { + // eslint-disable-next-line guard-for-in,no-restricted-syntax + for (const j in json.data.product.variations[i]) { + const v = json.data.product.variations[i][j]; + if (v.variation.variation_name === variant) { + return v; + } } } + + throw new Error('Variant not found'); } - throw new Error('Variant not found'); + // zuora logic + console.log('findProductVariant() => json', cachedResponse); + await new Promise((res) => setTimeout(res, 50)); + + const resp = cachedResponse.selected_variation; + const units = cachedResponse.selected_users; + const years = cachedResponse.selected_years; + + const zuoraFormatedVariant = { + active_platform: null, + avangate_variation_prefix: null, + currency_id: null, + currency_iso: resp.currency_iso, + currency_label: resp.currency_label, + discount: { + discounted_price: resp.discount.discounted_price, + discount_value: resp.discount.discount_value, + discount_type: null, + }, + in_selector: null, + platform_id: resp.platform_id, + platform_product_id: null, // todo not present '30338209', + price: resp.price, + product_id: resp.product_id, + promotion: resp.promotion, + promotion_functions: null, + region_id: resp.region_id, + variation: { + variation_id: null, + variation_name: resp.variation.variation_name, // todo not present + dimension_id: null, + dimension_value: units, // todo not present + years: resp.variation.years, + }, + variation_active: null, + variation_id: resp.variation_id, + }; + + return zuoraFormatedVariant; } export function getMetadata(name) { @@ -198,78 +255,102 @@ export function getBuyLinkCountryPrefix() { * hk - 51, tw - 52 */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { - let FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; - const data = new FormData(); - // extract pid from url const url = new URL(window.location.href); - if (!pid) { - // eslint-disable-next-line no-param-reassign - pid = url.searchParams.get('pid') || getMetadata('pid'); - } - - data.append('data', JSON.stringify({ - ev: 1, - product_id: code, - config: { - extra_params: { - // eslint-disable-next-line object-shorthand - pid: pid, + + if (!isZuora()) { + let FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; + const data = new FormData(); + // extract pid from url + + if (!pid) { + // eslint-disable-next-line no-param-reassign + pid = url.searchParams.get('pid') || getMetadata('pid'); + } + + data.append('data', JSON.stringify({ + ev: 1, + product_id: code, + config: { + extra_params: { + // eslint-disable-next-line object-shorthand + pid: pid, + }, }, - }, - })); + })); - if (url.hostname.includes('bitdefender.co.uk')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '3'; - data.set('data', JSON.stringify(newData)); - } + if (url.hostname.includes('bitdefender.co.uk')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + } - if (url.hostname.includes('bitdefender.fr')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '14'; - data.set('data', JSON.stringify(newData)); - } + if (url.hostname.includes('bitdefender.fr')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + } - if (siteName === 'uk') { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '3'; - data.set('data', JSON.stringify(newData)); - } + if (siteName === 'uk') { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + } - if (siteName === 'fr') { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '14'; - data.set('data', JSON.stringify(newData)); - } + if (siteName === 'fr') { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + } - if (url.pathname.includes('/en-au/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '4'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; - } + if (url.pathname.includes('/en-au/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '4'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; + } - if ((siteName === 'hk' || siteName === 'tw')) { - // append force_region for hk and tw - const newData = JSON.parse(data.get('data')); + if (url.pathname.includes('/nl-nl/')) { + console.log('3'); + // addapt logic to zl zuora + } - newData.config.force_region = siteName === 'hk' ? '41' : '52'; + if ((siteName === 'hk' || siteName === 'tw')) { + // append force_region for hk and tw + const newData = JSON.parse(data.get('data')); - data.set('data', JSON.stringify(newData)); - } + newData.config.force_region = siteName === 'hk' ? '41' : '52'; + + data.set('data', JSON.stringify(newData)); + } + + if (cacheResponse.has(code)) { + return findProductVariant(cacheResponse.get(code), variant); + } + + // we don't await the response here, because we want to cache it + const response = fetch(FETCH_URL, { + method: 'POST', + body: data, + }); - if (cacheResponse.has(code)) { - return findProductVariant(cacheResponse.get(code), variant); + cacheResponse.set(code, response); + return findProductVariant(response, variant); } - // we don't await the response here, because we want to cache it - const response = fetch(FETCH_URL, { - method: 'POST', - body: data, - }); + // zuora logic + // if (cacheResponse.has(code)) { + // return findProductVariant(cacheResponse.get(code), variant); + // } + + const units = variant.split('-')[0][0]; + const years = variant.split('-')[1][0]; + const campaign = getParamValue('campaign'); + const zuoraResponse = await ZuoraNLClass.loadProduct(`${code}/${units}/${years}`, campaign); + // zuoraResponse.ok = true; + console.log('zuoraResponse', zuoraResponse); - cacheResponse.set(code, response); - return findProductVariant(response, variant); + // cacheResponse.set(code, zuoraResponse); + return findProductVariant(zuoraResponse, variant); } const nanoBlocks = new Map(); diff --git a/_src/scripts/zuora.js b/_src/scripts/zuora.js new file mode 100644 index 000000000..c2eee6af3 --- /dev/null +++ b/_src/scripts/zuora.js @@ -0,0 +1,258 @@ +export default class ZuoraNLClass { + static async fetchCampaignName() { + // const jsonFilePath = 'https://www.bitdefender.com/pages/zuoracampaign.json'; + // + // const resp = await fetch(jsonFilePath); + // if (!resp.ok) { + // console.error(`Failed to fetch data. Status: ${resp.status}`); + // return ''; + // } + // const data = await resp.json(); + // + // return data.data[0].CAMPAIGN_NAME; + // + await new Promise((res) => setTimeout(res, 50)); + + return 'Summer2024'; + } + + static monthlyProducts = ['psm', 'pspm', 'vpn-monthly', 'passm', 'pass_spm', 'dipm', 'vsbm']; + + // this products come with device_no set differently from the init-selector api where they are set to 1 + static wrongDeviceNumber = ['bms', 'mobile', 'ios', 'mobileios', 'psm', 'passm']; + + static productId = { + av: 'com.bitdefender.cl.av', + is: 'com.bitdefender.cl.is', + tsmd: 'com.bitdefender.cl.tsmd', + fp: 'com.bitdefender.fp', + ps: 'com.bitdefender.premiumsecurity', + psm: 'com.bitdefender.premiumsecurity', + psp: 'com.bitdefender.premiumsecurityplus', + pspm: 'com.bitdefender.premiumsecurityplus', + soho: 'com.bitdefender.soho', + mac: 'com.bitdefender.avformac', + vpn: 'com.bitdefender.vpn', + 'vpn-monthly': 'com.bitdefender.vpn', + pass: 'com.bitdefender.passwordmanager', + passm: 'com.bitdefender.passwordmanager', + pass_sp: 'com.bitdefender.passwordmanager', + pass_spm: 'com.bitdefender.passwordmanager', + bms: 'com.bitdefender.bms', + mobile: 'com.bitdefender.bms', + ios: 'com.bitdefender.iosprotection', + mobileios: 'com.bitdefender.iosprotection', + dip: 'com.bitdefender.dataprivacy', + dipm: 'com.bitdefender.dataprivacy', + vsb: 'com.bitdefender.vsb', + vsbm: 'com.bitdefender.vsb', + }; + + static names = { + pass: 'Bitdefender Password Manager', + pass_sp: 'Bitdefender Password Manager Shared Plan', + passm: 'Bitdefender Password Manager', + pass_spm: 'Bitdefender Password Manager Shared Plan', + }; + + static zuoraConfig = { + cartUrl: 'https://checkout.bitdefender.com', + key: 'bb22f980-fa19-11ed-b443-87a99951e6d5', + endpoint: 'https://checkout-service.bitdefender.com', + }; + + static config(key) { + return { + key: key || this.zuoraConfig.key, + country: 'NL', + language: 'nl_NL', + debug: false, + request_timeout: 15000, // default value if not set 3500 + default_scenario: 'www.checkout.v1', + disable_auto_generated_new_session: false, + return_url: document.referrer ? document.referrer : window.location.href, + central: true, + }; + } + + static async getProductVariations(productId, campaign) { + const endpoint = new URL('/v1/info/variations/price', this.zuoraConfig.endpoint); + endpoint.searchParams.set('product_id', productId); + if (campaign) endpoint.searchParams.set('campaign', campaign); + endpoint.searchParams.set('country_code', 'NL'); + + try { + const response = await fetch( + endpoint.href, + { + method: 'GET', + headers: { + 'X-Public-Key': this.zuoraConfig.key, + 'Content-Type': 'application/json', + }, + }, + ); + + if (!response.ok) { + return null; + } + + return await response.json(); + } catch (error) { + console.error(error); + return null; + } + } + + static async getProductVariationsPrice(product, campaign) { + const prod = product.split('/'); + const id = prod[0]; + const devicesNo = prod[1]; + const yearsNo = prod[2]; + + let payload = (await this.getProductVariations(this.productId[id], campaign))?.payload; + + if (!payload || payload.length === 0) { + return null; + } + + /** + * this rules splits one product into multiple products + * for example com.bitdefender.passwordmanager maps 2 products + * Password Manager and Password Manager Shared Plan + */ + if (this.names[id]) { + payload = payload.filter((item) => item.name === this.names[id]); + } + + window.StoreProducts.product[id] = { + product_alias: id, + product_id: this.productId[id], + product_name: payload[0].name, + variations: {}, + }; + + payload.forEach((period) => { + let billingPeriod; + switch (period.billing_period) { + case 'Month': + billingPeriod = 0; + break; + case 'Annual': + billingPeriod = 1; + break; + case 'Two_Years': + billingPeriod = 2; + break; + case 'Three_Years': + billingPeriod = 3; + break; + case 'Five_Years': + billingPeriod = 5; + break; + default: + billingPeriod = 10; + } + + if ((this.monthlyProducts.indexOf(id) === -1 && billingPeriod === 0) || (this.monthlyProducts.indexOf(id) !== -1 && billingPeriod !== 0)) { + return; + } + + if (this.monthlyProducts.indexOf(id) !== -1) { + billingPeriod = 1; + } + + // buylink: + const windowURL = new URL(window.location.href); + const zuoraCart = new URL('/index.html:step=cart?theme=light', this.zuoraConfig.cartUrl); + + zuoraCart.searchParams.set('campaign', campaign); + if (windowURL.searchParams.has('lang')) { + zuoraCart.searchParams.set('language', windowURL.searchParams.get('lang')); + } + if (windowURL.searchParams.has('language')) { + zuoraCart.searchParams.set('language', windowURL.searchParams.get('language')); + } + if (windowURL.searchParams.has('event')) { + zuoraCart.searchParams.set('event', windowURL.searchParams.get('event')); + } + if (windowURL.searchParams.has('channel')) { + zuoraCart.searchParams.set('channel', windowURL.searchParams.get('channel')); + } + zuoraCart.searchParams.set('product_id', this.productId[id]); + zuoraCart.searchParams.set('payment_period', this.monthlyProducts.includes(id) ? `${devicesNo}d1m` : `${devicesNo}d${yearsNo}y`); + zuoraCart.searchParams.set('country', 'NL'); + zuoraCart.searchParams.set('language', 'nl_NL'); + zuoraCart.searchParams.set('client', '8f768650-6915-11ed-83e3-e514e761ac46'); + + /* if (bundle) { + zuoraCart.searchParams.set("bundle_id", this.productId); + zuoraCart.searchParams.set("bundle_payment_period", monthlyProducts[bundle.id] + ? `${bundle.getDevices()}d1m` + : `${bundle.getDevices()}d${bundle.getSubscription("years")}y`); + } */ + + const pricing = {}; + period.pricing.forEach((item) => { + if (item.devices_no === 50) item.devices_no = 1; + if (item.devices_no === Number(devicesNo)) { + pricing.total = item.price; + pricing.discount = item.discount; + pricing.price = item.total; + } + }); + + window.StoreProducts.product[id] = { + selected_users: devicesNo, + selected_years: yearsNo, + selected_variation: { + product_id: id, + region_id: 22, + variation_id: 0, + platform_id: 16, + price: pricing.total, + variation: { + years: yearsNo, + }, + currency_label: '€', + currency_iso: 'EUR', + discount: { + discounted_price: pricing.price, + discount_value: pricing.discount, + }, + promotion: campaign, + }, + buy_link: zuoraCart.href, + config: { + product_id: id, + name: payload.name, + full_price_class: `oldprice-${id}`, + discounted_price_class: `newprice-${id}`, + price_class: `price-${id}`, + buy_class: `buylink-${id}`, + selected_users: devicesNo, + selected_years: yearsNo, + users_class: `users_${id}_fake`, + years_class: `years_${id}_fake`, + }, + }; + }); + + return window.StoreProducts.product[id]; + } + + static async loadProduct(id, campaignParam = '') { + window.StoreProducts = window.StoreProducts || []; + window.StoreProducts.product = window.StoreProducts.product || {}; + + try { + let coupon = campaignParam; + if (!coupon) coupon = await this.fetchCampaignName(); + return this.getProductVariationsPrice(id, coupon); + } catch (error) { + console.error('loadProduct error:', error); + } + + return this.getProductVariationsPrice(id); + } +} From 36d19ed6782bbfa864472745602d5c94671de475 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Tue, 3 Sep 2024 11:40:02 +0300 Subject: [PATCH 1017/1296] update headings creators page --- _src/blocks/questions-answers/questions-answers.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_src/blocks/questions-answers/questions-answers.css b/_src/blocks/questions-answers/questions-answers.css index 336688308..ff528f049 100644 --- a/_src/blocks/questions-answers/questions-answers.css +++ b/_src/blocks/questions-answers/questions-answers.css @@ -32,12 +32,6 @@ font: italic normal normal 14px/16px var(--body-font-family); } -.qa-creators.questions-answers-container .default-content-wrapper p { - font: bold 24px / 26px "IBM Plex Sans", sans-serif; - margin-bottom: 32px; - text-align: center; -} - .questions-answers .questions-answers-item { margin: 16px 0; padding: 16px 16px 16px 40px; @@ -119,6 +113,12 @@ color: #006EFF; } +.qa-creators.questions-answers-container .default-content-wrapper p { + font: bold 24px / 26px "IBM Plex Sans", sans-serif; + margin-bottom: 32px; + text-align: center; +} + .questions-answers-item.expanded .answer { opacity: 1; height: auto; From 17c720fedc8764e1e1abd0396ca48a67f6c767ef Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 3 Sep 2024 12:24:48 +0300 Subject: [PATCH 1018/1296] zuora-pricing --- .eslintignore | 1 + _src/scripts/utils/utils.js | 14 ++++---------- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/.eslintignore b/.eslintignore index 5b9220431..d35e27f51 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,7 @@ helix-importer-ui _src/scripts/lib-franklin-api.js _src/scripts/vendor +_src/scripts/zuora.js _src/vendor _src/plugins tools diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 24cdfc203..545012c24 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -77,12 +77,11 @@ async function findProductVariant(cachedResponse, variant) { } // zuora logic - console.log('findProductVariant() => json', cachedResponse); + // eslint-disable-next-line no-promise-executor-return await new Promise((res) => setTimeout(res, 50)); const resp = cachedResponse.selected_variation; const units = cachedResponse.selected_users; - const years = cachedResponse.selected_years; const zuoraFormatedVariant = { active_platform: null, @@ -309,11 +308,6 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; } - if (url.pathname.includes('/nl-nl/')) { - console.log('3'); - // addapt logic to zl zuora - } - if ((siteName === 'hk' || siteName === 'tw')) { // append force_region for hk and tw const newData = JSON.parse(data.get('data')); @@ -342,12 +336,12 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { // return findProductVariant(cacheResponse.get(code), variant); // } - const units = variant.split('-')[0][0]; - const years = variant.split('-')[1][0]; + const variantSplit = variant.split('-'); + const units = variantSplit[0].split('u')[0]; + const years = variantSplit[1].split('y')[0]; const campaign = getParamValue('campaign'); const zuoraResponse = await ZuoraNLClass.loadProduct(`${code}/${units}/${years}`, campaign); // zuoraResponse.ok = true; - console.log('zuoraResponse', zuoraResponse); // cacheResponse.set(code, zuoraResponse); return findProductVariant(zuoraResponse, variant); From 0d822584309f12917197cbb8a5a6746ad796779e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 3 Sep 2024 12:33:02 +0300 Subject: [PATCH 1019/1296] zuora-pricing --- _src/scripts/zuora.js | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/_src/scripts/zuora.js b/_src/scripts/zuora.js index c2eee6af3..f386d38b2 100644 --- a/_src/scripts/zuora.js +++ b/_src/scripts/zuora.js @@ -1,19 +1,15 @@ export default class ZuoraNLClass { static async fetchCampaignName() { - // const jsonFilePath = 'https://www.bitdefender.com/pages/zuoracampaign.json'; - // - // const resp = await fetch(jsonFilePath); - // if (!resp.ok) { - // console.error(`Failed to fetch data. Status: ${resp.status}`); - // return ''; - // } - // const data = await resp.json(); - // - // return data.data[0].CAMPAIGN_NAME; - // - await new Promise((res) => setTimeout(res, 50)); + const jsonFilePath = 'https://www.bitdefender.com/pages/zuoracampaign.json'; - return 'Summer2024'; + const resp = await fetch(jsonFilePath); + if (!resp.ok) { + console.error(`Failed to fetch data. Status: ${resp.status}`); + return ''; + } + const data = await resp.json(); + + return data.data[0].CAMPAIGN_NAME; } static monthlyProducts = ['psm', 'pspm', 'vpn-monthly', 'passm', 'pass_spm', 'dipm', 'vsbm']; From ee22650ea9a72798a82656cb60e745bf5374db44 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 3 Sep 2024 13:18:59 +0300 Subject: [PATCH 1020/1296] feat: Migrare upgrade/free --- .../dropdownbox-compare.css | 157 +++++++++++++++--- .../dropdownbox-compare.js | 2 +- .../product-comparison-table.css | 104 +++++++++++- .../product-comparison-table.js | 12 +- _src/styles/styles.css | 6 +- 5 files changed, 253 insertions(+), 28 deletions(-) diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css index ff847f580..b145998e7 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css @@ -1,6 +1,7 @@ /* b-boxes .dropdownbox-compare-container */ .dropdownbox-compare-container { clear: both; + padding: 0!important; } .dropdownbox-compare-container .block img { @@ -13,7 +14,8 @@ /* blue tbs */ .dropdownbox-compare-container .block > div > div { - border-bottom: 1px solid #D6D6D6; + border-bottom: 1px solid #e4f2ff; + border: 1px solid #e4f2ff; } .dropdownbox-compare-container .block > div { @@ -25,7 +27,10 @@ .dropdownbox-compare-container .block > div:nth-child(1) > div:nth-child(1) { color: #fff; background-color: #006eff; - padding: 0; +} + +.dropdownbox-compare-container .block > div:not(:nth-child(1)) > div:nth-child(1) { + background: #e4f2ff; } .dropdownbox-compare-container .block > div:first-of-type > div, .dropdownbox-compare-container .block > div:last-of-type > div { @@ -35,12 +40,11 @@ .dropdownbox-compare-container .block > div:nth-child(1) > div { font-weight: bold; cursor: pointer; - padding: 15px 30px; } .dropdownbox-compare-container .block > div > div { flex: 1; - padding: 15px 2%; + padding: 15px 20px; display: inline-block; } @@ -61,24 +65,76 @@ background-color: white; } +.dropdownbox-compare-container.selected-2 .block > div > div:nth-child(2), .dropdownbox-compare-container.selected-3 .block > div > div:nth-child(2) { + background-color: white; +} + +.dropdownbox-compare-container .block > div > div:not(:nth-child(1)) { + display: flex; + align-items: center; + justify-content: center; +} + .dropdownbox-compare-container .block > div:not(:first-child) > div:first-child { display: block; align-items: center; } -.dropdownbox-compare-container .block > div:not(:first-child) > div:first-child p { +.dropdownbox-compare-container .block > div > div p { + font-family: roboto, sans-serif; + font-size: 14px; + font-weight: 400; +} + +.dropdownbox-compare-container .block > div:first-child > div p { + color: white; +} + +.dropdownbox-compare-container .block > div:not(:first-child) > div p { + color: #616161; +} + +.dropdownbox-compare-container .block > div > div:first-child p { margin: 0; + margin-left: 26px; } -.dropdownbox-compare-container .block > div:not(:first-child) > div:first-child span { - margin-left: 10px; +.dropdownbox-compare-container .block > div > div span.greenTag { + background: #2cb43d; + border-radius: 50px; + color: #3c3c3c; + color: #fff !important; + display: block; + font-family: roboto, sans-serif; + font-size: 10px !important; + font-style: normal; + font-weight: 700; + margin: -5px 0 6px; + padding: 0 20px; + padding: 3px 9px !important; + text-transform: uppercase; + width: -moz-fit-content; + width: fit-content; +} + + +.dropdownbox-compare-container .block > div > div strong { + font-size: 14px; + line-height: 1.5; + font-weight: normal; } .dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { display: none; } -.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block.closed > div:not(:first-child) > div { +.dropdownbox-compare-container .block.closed > div > div:not(:nth-child(1)) { + display: flex; + align-items: center; + justify-content: center; +} + +.dropdownbox-compare-container .block.closed > div:not(:first-child) > div:first-of-type, .dropdownbox-compare-container.closed .block.closed > div:not(:first-child) > div:first-of-type { display: inline-block; } @@ -94,20 +150,12 @@ transform: rotate(-135deg); } -.dropdownbox-compare-container.arrow-dark .block.closed > div:nth-child(1) > div:nth-child(1)::before { - width: 10px; - height: 10px; - float: left; - content: ""; - margin-right: 10px; - margin-top: 10px; - border: solid black; - border-width: 0 2px 2px 0; - transform: rotate(-135deg); -} - /* handling - arrow down/up */ /* stylelint-disable no-descending-specificity */ +.dropdownbox-compare-container.no-arrow .block > div:nth-child(1) > div::before { + visibility: hidden; +} + .dropdownbox-compare-container .block > div:nth-child(1) > div::before, .dropdownbox-compare-container .block.closed > div:nth-child(1) > div::before { width: 10px; @@ -131,11 +179,22 @@ } } -.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { - display: none; +/* for mobile */ +@media (width <= 991px) { + .dropdownbox-compare-container .block > div { + display: block; + } + + .dropdownbox-compare-container .block > div > div:nth-child(1) { + width: 100%; + } + + .dropdownbox-compare-container .block > div > div:not(:nth-child(1)) { + width: 33%!important; + float: left; + } } -/* for mobile */ @media (width <= 768px) { .dropdownbox-compare-container { clear: both; @@ -184,4 +243,56 @@ font-size: 30px; line-height: 32px; } + .section.product-comparison-table-container.migration .old-price-box { + flex-direction: column; + } + .section.product-comparison-table-container.migration .old-price-box span { + flex-direction: column; + justify-content: center; + align-items: center; + margin: 5px 0; + } + .section.product-comparison-table-container.migration .old-price-box span del { + margin-left: 10px; + } + .section.product-comparison-table-container.migration .new-price-box { + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 22px; + } + .section.product-comparison-table-container.migration .new-price-box span { + margin: 0 0 7px; + } + + .section.product-comparison-table-container.migration .product-comparison-price > p:last-of-type, .section.product-comparison-table-container.migration .product-comparison-header div[role="columnheader"] p { + text-align: center; + min-height: auto; + } + .section.product-comparison-table-container.migration h3 { + font-size: 15px !important; + } + + .section.product-comparison-table-container.migration p.button-container { + margin-bottom: 1em; + } + + .section.product-comparison-table-container.migration .product-comparison-price { + margin: 3px; + } +} + +@media (min-width: 992px) { + .dropdownbox-compare-wrapper { + max-width: var(--section-desktop-max-width); + padding: 0 var(--section-desktop-padding); + } +} + +@media (min-width: 580px) { + .dropdownbox-compare-wrapper { + margin: 0 auto; + overflow-y: visible; + + } } \ No newline at end of file diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js index d3f26115a..b225a138d 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js @@ -2,7 +2,7 @@ export default function decorate(block) { const parentSelector = block.closest('.section'); const { type } = parentSelector.dataset; - block.closest('.dropdownbox-compare-wrapper').classList.add('default-content-wrapper'); + // block.closest('.dropdownbox-compare-wrapper').classList.add('default-content-wrapper'); // search for [] to replace with span greeenTag class const getFirstDivs = block.querySelectorAll('.dropdownbox-compare-container .block > div > div:nth-child(1)'); diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index deb9ccdd7..040f8490e 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -17,6 +17,79 @@ padding-right: 0; } +.section.product-comparison-table-container.migration .product-comparison-price { + border: 0 none!important; +} + +.section.product-comparison-table-container.migration h3 { + font-family: roboto, sans-serif; + font-size: 24px !important; + color: black !important; + font-weight: 500; + line-height: 1.25; +} + +.section.product-comparison-table-container.migration .old-price-box { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px dashed #dedede; + padding-bottom: 10px; +} + +.section.product-comparison-table-container.migration .old-price-box .savings { + display: block; + background: rgba(44, 180, 61, .2); + border-radius: 8px; + padding: 1px 9px 5px; + text-align: right; + color: #2cb43d; + font-size: 14px; + font-weight: 500; + line-height: 1.5; +} + +.section.product-comparison-table-container.migration .new-price-box { + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px auto 0; + font-size: 24px; + font-weight: 700; + line-height: .9; + color: black; +} + +.section.product-comparison-table-container.migration .new-price-box .total-text { + display: block; + color: #3c3c3c; + display: inline-block; + font-size: 18px; + line-height: 1.25; + margin-right: auto; + padding: 0; + font-weight: normal; +} + +.section.product-comparison-table-container.migration p.button-container { + margin-bottom: 2em; +} + +.section.product-comparison-table-container.migration p { + color: #7e7e7e; + font-size: 12px; +} + +.section.product-comparison-table-container.migration .product-comparison-price > p:last-of-type{ + text-align: right; + color: #3c3c3c; + display: block; + font-size: 10px; + font-weight: 400; + line-height: 2; + margin-bottom: 0; +} + .column-fixed-width { width: 10.5rem; } @@ -495,4 +568,33 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { .product-comparison-table.two-products { width: 100%; -} \ No newline at end of file +} + +@media (width <= 1202px) { + .product-comparison-table div[role='columnheader']:nth-child(1) > h2 { + font-size: var(--heading-font-size-l); + } + + .section.product-comparison-table-container.migration .old-price-box span { + font-size: 13px; + flex-direction: column; + display: flex !important; + } + + .section.product-comparison-table-container.migration .old-price-box span:first-of-type { + text-align: left; + } + + .section.product-comparison-table-container.migration h3 { + font-size: 21px !important; + } + + .section.product-comparison-table-container.migration .new-price-box .total-text { + font-size: 16px; + } + + .section.product-comparison-table-container.migration h3 { + font-size: 21px !important; + margin-top: 1em !important; + } + } \ No newline at end of file diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index cb4f11b33..7bcdcd24a 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -23,8 +23,16 @@ createNanoBlock('priceComparison', (code, variant, label) => { fetchedProducts.push({ code, variant, product }); // eslint-disable-next-line camelcase const { price, discount: { discounted_price: discounted }, currency_iso: currency } = product; - oldPriceElement.innerHTML = `Old Price ${price} ${currency}`; - priceElement.innerHTML = `${discounted} ${currency}`; + const savings = price - discounted; + + oldPriceElement.innerHTML = `
    + Old Price ${price} ${currency} + Savings ${savings.toFixed(2)} ${currency} +
    `; + priceElement.innerHTML = `
    + Your total price: + ${discounted} ${currency} +
    `; priceAppliedOnTime.innerHTML = label; }) .catch((err) => { diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 6ef6edd2d..cfccc31c5 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -782,6 +782,10 @@ main .section.migration h2 { font-size: var(--heading-font-size-m); } +.d-none { + display: none; +} + main .section.py-1 { padding: 0; } @@ -790,7 +794,7 @@ main .section.pt-0 { padding-top: 0; } -main .section.pb-0 { +main .section.pb-0, .pb-0 { padding-bottom: 0!important; } From 64148e6184723be4ad46f10b455a074eeb15cddd Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 3 Sep 2024 13:22:51 +0300 Subject: [PATCH 1021/1296] fix: lint --- _src/blocks/columns/columns.js | 1 - _src/blocks/dropdownbox-compare/dropdownbox-compare.js | 3 --- 2 files changed, 4 deletions(-) diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index fcfd7c5fe..08b0e21fc 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -245,7 +245,6 @@ export default function decorate(block, options) { composed: true, }); - console.log|('colsadfasfdsadsfdsafdfadsdas '); if (type && type === 'video_left') { block.closest('.section').classList.add(type); const leftCol = block.querySelector('.columns-img-col'); diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js index b225a138d..1a3b4dfed 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js @@ -1,8 +1,5 @@ export default function decorate(block) { const parentSelector = block.closest('.section'); - const { type } = parentSelector.dataset; - - // block.closest('.dropdownbox-compare-wrapper').classList.add('default-content-wrapper'); // search for [] to replace with span greeenTag class const getFirstDivs = block.querySelectorAll('.dropdownbox-compare-container .block > div > div:nth-child(1)'); From cdd59c451b2bd40166362ca496778ded8f38df29 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 3 Sep 2024 13:24:06 +0300 Subject: [PATCH 1022/1296] fix: lint --- _src/blocks/dropdownbox-compare/dropdownbox-compare.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js index 1a3b4dfed..ae7844b77 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js @@ -1,6 +1,4 @@ export default function decorate(block) { - const parentSelector = block.closest('.section'); - // search for [] to replace with span greeenTag class const getFirstDivs = block.querySelectorAll('.dropdownbox-compare-container .block > div > div:nth-child(1)'); getFirstDivs.forEach((item) => { @@ -16,5 +14,4 @@ export default function decorate(block) { tab.parentNode.classList.toggle('closed'); }); }); - } From 23221f1f8feffb8b628c997a16b0f2d3d302af5c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 3 Sep 2024 13:32:59 +0300 Subject: [PATCH 1023/1296] fix lint --- _src/blocks/columns/columns.css | 89 ++++++++++++++++----------------- _src/blocks/columns/columns.js | 2 +- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 7266c1121..e1f70cdf6 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,19 +2,45 @@ padding: 0 var(--body-padding); } -.columns-container.video_left { - video { - width: 100%; - border-radius: 10px; - } +.columns-container.VideoLeft video { + width: 100%; + border-radius: 10px; +} - .columns-right-col { - width: 100%; - flex: none; - p { - margin: 1.5em 0; - } - } +.columns-container.VideoLeft .columns-right-col { + width: 100%; + flex: none; +} + +.columns-container.chat-options p { + font-size: var(--body-font-size-s) !important; +} + +.columns-container.VideoLeft .columns-right-col p { + margin: 1.5em 0; +} + +.grey-version .columns > div { + display: flex; + justify-content: space-between; +} + +.grey-version .columns > div > div { + --tw-bg-opacity: 1; + background-color: rgb(245 245 247 / var(--tw-bg-opacity)); + border-radius: 1rem; + padding: 3em; + margin-bottom: 1em; +} + +.columns > div { + display: flex; + flex-direction: column; + justify-content: center; +} + +.columns > div > div { + order: 1; } .columns-container.chat-options .columns > div > div { @@ -41,6 +67,11 @@ justify-content: space-between; } +.grey-version .columns > div > div img, .small-icons .columns > div > div img { + height: 60px; + width: auto; +} + .columns-container.chat-options table tr td:first-of-type img { height: 40px; } @@ -50,10 +81,6 @@ display: none; } -.columns-container.chat-options p { - font-size: var(--body-font-size-s) !important; -} - .percent-table .columns table tr { align-items: center; display: flex; @@ -69,28 +96,10 @@ width: 220px; } -.grey-version .columns > div { - display: flex; - justify-content: space-between; -} - -.grey-version .columns > div > div { - --tw-bg-opacity: 1; - background-color: rgb(245 245 247 / var(--tw-bg-opacity)); - border-radius: 1rem; - padding: 3em; - margin-bottom: 1em; -} - .grey-version .columns > div > div h4 { font-size: var(--heading-font-size-l); } -.grey-version .columns > div > div img, .small-icons .columns > div > div img { - height: 60px; - width: auto; -} - .grey-version .columns > div > div p.button-container { margin-bottom: auto; } @@ -104,16 +113,6 @@ margin-right: auto; } -.columns > div { - display: flex; - flex-direction: column; - justify-content: center; -} - -.columns > div > div { - order: 1; -} - .columns.highlight-text.black { background-color: var(--black-color); padding: 25px 2pc 20px 30px; @@ -647,7 +646,7 @@ min-height: 350px; } - .columns-container.video_left .columns-right-col { + .columns-container.VideoLeft .columns-right-col { width: 440px; flex: none; } diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index 08b0e21fc..1b32e07f1 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -246,7 +246,7 @@ export default function decorate(block, options) { }); if (type && type === 'video_left') { - block.closest('.section').classList.add(type); + block.closest('.section').classList.add('VideoLeft'); const leftCol = block.querySelector('.columns-img-col'); const videoPath = leftCol.querySelector('tr:last-of-type').innerText.trim(); const videoImg = leftCol.querySelector('img').getAttribute('src'); From 5cce022b372ca225bf49d906269203ac3e321528 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 3 Sep 2024 13:40:06 +0300 Subject: [PATCH 1024/1296] fix: lint --- _src/blocks/columns/columns.css | 42 ++++++++++++++++----------------- _src/blocks/columns/columns.js | 2 +- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index e1f70cdf6..a3987ffd1 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,12 +2,12 @@ padding: 0 var(--body-padding); } -.columns-container.VideoLeft video { +.columns-container.video-left video { width: 100%; border-radius: 10px; } -.columns-container.VideoLeft .columns-right-col { +.columns-container.video-left .columns-right-col { width: 100%; flex: none; } @@ -16,15 +16,25 @@ font-size: var(--body-font-size-s) !important; } -.columns-container.VideoLeft .columns-right-col p { +.columns-container.video-left .columns-right-col p { margin: 1.5em 0; } +.columns > div { + display: flex; + flex-direction: column; + justify-content: center; +} + .grey-version .columns > div { display: flex; justify-content: space-between; } +.columns > div > div { + order: 1; +} + .grey-version .columns > div > div { --tw-bg-opacity: 1; background-color: rgb(245 245 247 / var(--tw-bg-opacity)); @@ -33,16 +43,6 @@ margin-bottom: 1em; } -.columns > div { - display: flex; - flex-direction: column; - justify-content: center; -} - -.columns > div > div { - order: 1; -} - .columns-container.chat-options .columns > div > div { padding: 2em; } @@ -157,24 +157,24 @@ line-height: 1.25; } -.section.subtitle_blue h2 { +.section.subtitle-blue h2 { margin: 0 auto 3em; width: 100%; text-align: center; } -.section.subtitle_blue h3 { +.section.subtitle-blue h3 { font-size: 1.25rem; --tw-text-opacity: 1; color: rgb(0 110 255 / var(--tw-text-opacity)); } -.section.subtitle_blue .columns.benefits > div { +.section.subtitle-blue .columns.benefits > div { gap: 45px; margin-bottom: 2em; } -.section.subtitle_blue .columns.benefits p { +.section.subtitle-blue .columns.benefits p { font-size: var(--body-font-size-s); font-weight: 400; letter-spacing: .006em; @@ -340,16 +340,16 @@ left: 10%; } - .section.subtitle_blue h2 { + .section.subtitle-blue h2 { margin: 0 auto 3em; width: 630px; } - .section.subtitle_blue h3 { + .section.subtitle-blue h3 { font-size: 1.25rem; } - .section.subtitle_blue .columns.benefits > div { + .section.subtitle-blue .columns.benefits > div { margin-bottom: 0; } @@ -646,7 +646,7 @@ min-height: 350px; } - .columns-container.VideoLeft .columns-right-col { + .columns-container.video-left .columns-right-col { width: 440px; flex: none; } diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index 1b32e07f1..8fc583c6e 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -246,7 +246,7 @@ export default function decorate(block, options) { }); if (type && type === 'video_left') { - block.closest('.section').classList.add('VideoLeft'); + block.closest('.section').classList.add('video-left'); const leftCol = block.querySelector('.columns-img-col'); const videoPath = leftCol.querySelector('tr:last-of-type').innerText.trim(); const videoImg = leftCol.querySelector('img').getAttribute('src'); From cea39414e154b3dee72e555df9c5363850e01b0d Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 3 Sep 2024 13:43:30 +0300 Subject: [PATCH 1025/1296] fix lint --- _src/blocks/columns/columns.css | 58 ++++++++++++++++----------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index a3987ffd1..8cf175a60 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -26,13 +26,38 @@ justify-content: center; } -.grey-version .columns > div { +.columns > div > div { + order: 1; +} + +.text-over-image > div > div { + height: 600px; + border-radius: 12px; display: flex; - justify-content: space-between; + flex-direction: column; + color: var(--white-color); + padding: 30px; + justify-content: flex-end; + background-size: cover; + background-repeat: no-repeat; } -.columns > div > div { - order: 1; +.columns.carousel > div { + flex-direction: row; +} + +.columns.benefits > div { + align-items: flex-start; +} + +/* awards styling */ +.columns.awards > div { + row-gap: 30px; +} + +.grey-version .columns > div { + display: flex; + justify-content: space-between; } .grey-version .columns > div > div { @@ -121,31 +146,6 @@ width: 100%; } -.text-over-image > div > div { - height: 600px; - border-radius: 12px; - display: flex; - flex-direction: column; - color: var(--white-color); - padding: 30px; - justify-content: flex-end; - background-size: cover; - background-repeat: no-repeat; -} - -.columns.carousel > div { - flex-direction: row; -} - -.columns.benefits > div { - align-items: flex-start; -} - -/* awards styling */ -.columns.awards > div { - row-gap: 30px; -} - .text-over-image > div > div:first-child { font-size: var(--heading-font-size-s); margin-bottom: -10px; From 119991a1a3e7269a70ddbed508dd64a2e475e5d2 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Tue, 3 Sep 2024 14:09:02 +0300 Subject: [PATCH 1026/1296] fix css template creators --- _src/scripts/template-factories/creators.css | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 _src/scripts/template-factories/creators.css diff --git a/_src/scripts/template-factories/creators.css b/_src/scripts/template-factories/creators.css new file mode 100644 index 000000000..e69de29bb From 167af8bdabf1824df61415851a96ac53762a6acd Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 3 Sep 2024 17:29:21 +0300 Subject: [PATCH 1027/1296] refactor: Update add-on price calculation and plan switcher in new-prod-boxes.js --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 2 + _src/blocks/new-prod-boxes/new-prod-boxes.js | 113 +++++++++--------- _src/styles/styles.css | 4 + 3 files changed, 62 insertions(+), 57 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 78a83af29..2efb459c8 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -661,6 +661,8 @@ .plan-switcher { display: flex; + flex-wrap: wrap; + gap: 4px; align-items: center; font-weight: bold; margin-bottom: 24px; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 54adbfc1c..8df26e752 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,7 +1,7 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ -import { getMetadata, getBuyLinkCountryPrefix } from '../../scripts/utils/utils.js'; +import { getMetadata, getBuyLinkCountryPrefix, matchHeights } from '../../scripts/utils/utils.js'; let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { @@ -70,9 +70,12 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); const { price, discount, currency_label: currencyLabel } = product; - const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); + let discountPercentage; + if (discount) { + discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); + } const oldPrice = price; - let newPrice = discount.discounted_price; + let newPrice = discount?.discounted_price || price; // eslint-disable-next-line no-param-reassign let updatedBuyLinkSelector = buyLinkSelector; if (updatedBuyLinkSelector) { @@ -90,10 +93,9 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu if (!prodName.endsWith('m') && type === 'monthly') { newPrice = `${(parseInt(newPrice, 10) / 12)}`; } - priceElement.innerHTML = `
    -
    +
    ${oldPrice} ${currencyLabel} Save ${discountPercentage}%
    @@ -129,11 +131,38 @@ function calculateAddOnCost(selector1, selector2) { return correctPrice; } +function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, prodThirdRadioButtonName) { + const planSwitcher = document.createElement('div'); + planSwitcher.classList.add('plan-switcher'); + let radioArray = ['yearly', 'monthly', '3-rd-button']; + let prodNamesArray = [prodName, prodMonthlyName, prodThirdRadioButtonName]; + Array.from(radioButtons.children).forEach((radio, idx) => { + let radioText = radio.textContent; + let plan = radioArray[idx]; + let productName = prodNamesArray[idx]; + let checked = idx === 0 ? 'checked' : ''; + let defaultCheck = radio.textContent.match(/\[checked\]/g); + if (defaultCheck) { + radioText = radioText.replace('[checked]', ''); + checked = 'checked'; + } + + if (productName) { + planSwitcher.innerHTML += ` + +
    + `; + } + }); + + return planSwitcher; +} + export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars products, familyProducts, monthlyProducts, priceType, pid, mainProduct, - addOnProducts, addOnMonthlyProducts, type, hideDecimals, + addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { @@ -209,8 +238,12 @@ export default async function decorate(block, options) { const familyProductsAsList = familyProducts && familyProducts.split(','); const combinedProducts = productsAsList.concat(familyProductsAsList); const monthlyPricesAsList = monthlyProducts && monthlyProducts.split(','); + const thirdRadioButtonProductsAsList = thirdRadioButtonProducts && thirdRadioButtonProducts.split(','); + let monthlyPriceBoxes = {}; let yearlyPricesBoxes = {}; + let thirdRadioButtonProductsBoxes = {}; + let yearlyAddOnPricesBoxes = {}; let monthlyAddOnPricesBoxes = {}; if (combinedProducts.length) { @@ -221,6 +254,7 @@ export default async function decorate(block, options) { const [greenTag, title, blueTag, subtitle, radioButtons, perPrice, billed, buyLink, undeBuyLink, benefitsLists, billed2, buyLink2] = [...mainTable.querySelectorAll(':scope > tr')]; const [prodName, prodUsers, prodYears] = combinedProducts[key].split('/'); const [prodMonthlyName, prodMonthlyUsers, prodMonthlyYears] = monthlyPricesAsList ? monthlyPricesAsList[key].split('/') : []; + const [prodThirdRadioButtonName, prodThirdRadioButtonUsers, prodThirdRadioButtonYears] = thirdRadioButtonProductsAsList ? thirdRadioButtonProductsAsList[key].split('/') : []; let addOn = 0; const addOnProductsAsList = addOnProducts && addOnProducts.split(','); const addOnMonthlyProductsAsList = addOnMonthlyProducts && addOnMonthlyProducts.split(','); @@ -325,14 +359,7 @@ export default async function decorate(block, options) { let planSwitcher = document.createElement('div'); if (radioButtons && monthlyProducts) { - let leftRadio = radioButtons.querySelector('td:first-child')?.textContent; - let rightRadio = radioButtons.querySelector('td:last-child')?.textContent; - planSwitcher.classList.add('plan-switcher'); - planSwitcher.innerHTML = ` - -
    - - `; + planSwitcher = createPlanSwitcher(radioButtons, key, prodName, prodMonthlyName, prodThirdRadioButtonName); } let planSwitcher2 = document.createElement('div'); if (addOn && addOnProductsAsList && addOnMonthlyProductsAsList) { @@ -417,6 +444,11 @@ export default async function decorate(block, options) { monthlyPriceBoxes[`${key}-monthly-${prodMonthlyName.trim()}`] = montlyPriceBox; } + if (radioButtons.children.length === 3 && thirdRadioButtonProducts) { + const thirdRadioButtonBox = await updateProductPrice(prodThirdRadioButtonName, prodThirdRadioButtonUsers, prodThirdRadioButtonYears, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); + thirdRadioButtonProductsBoxes[`${key}-3-rd-button-${prodThirdRadioButtonName.trim()}`] = thirdRadioButtonBox; + } + if (addOn && addOnMonthlyProductsAsList) { const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); @@ -492,11 +524,19 @@ export default async function decorate(block, options) { if (planType === 'monthly') { priceBox.innerHTML = ''; priceBox.appendChild(monthlyPriceBoxes[event.target.value]); + } else if (planType === '3') { + priceBox.innerHTML = ''; + priceBox.appendChild(thirdRadioButtonProductsBoxes[event.target.value]); } else { priceBox.innerHTML = ''; priceBox.appendChild(yearlyPricesBoxes[event.target.value]); } }); + + if (radio.checked) { + // trigger the input event + radio.dispatchEvent(new Event('input')); + } }); }); } @@ -556,49 +596,8 @@ export default async function decorate(block, options) { decorateIcons(block.closest('.section')); } - // General function to match the height of elements based on a selector - const matchHeights = (targetNode, selector) => { - const resetHeights = () => { - const elements = targetNode.querySelectorAll(selector); - elements.forEach((element) => { - element.style.minHeight = ''; - }); - }; - - const adjustHeights = () => { - if (window.innerWidth >= 768) { - resetHeights(); - const elements = targetNode.querySelectorAll(selector); - const elementsHeight = Array.from(elements).map((element) => element.offsetHeight); - const maxHeight = Math.max(...elementsHeight); - - elements.forEach((element) => { - element.style.minHeight = `${maxHeight}px`; - }); - } else { - resetHeights(); - } - }; - - const matchHeightsCallback = (mutationsList) => { - Array.from(mutationsList).forEach((mutation) => { - if (mutation.type === 'childList') { - adjustHeights(); - } - }); - }; - - const observer = new MutationObserver(matchHeightsCallback); - - if (targetNode) { - observer.observe(targetNode, { childList: true, subtree: true }); - } - - window.addEventListener('resize', () => { - adjustHeights(); - }); - }; - matchHeights(block, '.subtitle'); matchHeights(block, 'h2'); + matchHeights(block, 'h4'); + matchHeights(block, '.plan-switcher'); } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 8b89d675b..70f7b6808 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1471,3 +1471,7 @@ header, body > div:first-child { height: 64px; } + +.visibility-hidden { + visibility: hidden; +} From e80ff447facc55596e4ad1692a7f351069cfbd26 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 3 Sep 2024 19:30:55 +0300 Subject: [PATCH 1028/1296] zuora-pricing --- .../product-comparison-table.js | 32 ++++++++++++------- _src/blocks/products/products.js | 5 +-- _src/scripts/utils/utils.js | 18 +++++++++-- _src/scripts/zuora.js | 2 +- 4 files changed, 40 insertions(+), 17 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 63ccc65d0..f27aa5a39 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -1,10 +1,10 @@ import { - createNanoBlock, renderNanoBlocks, fetchProduct, getBuyLinkCountryPrefix, matchHeights, + createNanoBlock, renderNanoBlocks, fetchProduct, matchHeights, } from '../../scripts/utils/utils.js'; const fetchedProducts = []; -createNanoBlock('priceComparison', (code, variant, label) => { +createNanoBlock('priceComparison', (code, variant, label, block) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); const oldPriceElement = document.createElement('p'); @@ -26,6 +26,12 @@ createNanoBlock('priceComparison', (code, variant, label) => { oldPriceElement.innerHTML = `Old Price ${price} ${currency}`; priceElement.innerHTML = `${discounted} ${currency}`; priceAppliedOnTime.innerHTML = label; + + // todo check why buy links are not set properly + // update buy link + const currentProductIndex = fetchedProducts.length - 1; + const buyLink = block.querySelectorAll('.button-container a')[currentProductIndex]; + buyLink.href = fetchedProducts[currentProductIndex].product.buy_link; }) .catch((err) => { // eslint-disable-next-line no-console @@ -272,18 +278,20 @@ export default function decorate(block) { const lastRowWithPrice = block.querySelector('.product-comparison-last-row-with-prices'); [...headerList, lastRowWithPrice].forEach((item, idx) => { if (item) { - renderNanoBlocks(item, undefined, idx); + renderNanoBlocks(item, undefined, idx, block); } }); matchHeights(block, 'h3'); - block.querySelectorAll('.button-container a').forEach((link) => { - if (link && link.href.includes('/site/Store/buy/')) { - // replace the link with the correct country prefix but keep the rest of the link - const url = new URL(link.href); - const prefix = `${getBuyLinkCountryPrefix()}/`; - url.pathname = prefix + url.pathname.split('/site/Store/buy/')[1]; - link.href = url.toString(); - } - }); + // block.querySelectorAll('.button-container a').forEach((link, index) => { + // if (link && link.href.includes('/site/Store/buy/')) { + // // // replace the link with the correct country prefix but keep the rest of the link + // // const url = new URL(link.href); + // // const prefix = `${getBuyLinkCountryPrefix()}/`; + // // url.pathname = prefix + url.pathname.split('/site/Store/buy/')[1]; + // // link.href = url.toString(); + // + // link.href = fetchedProducts[index].buy_link; + // } + // }); } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 3d8dd4b0c..cafa02b44 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -2,7 +2,8 @@ import { createNanoBlock, renderNanoBlocks, fetchProduct, - createTag, getBuyLinkCountryPrefix, + createTag, + generateProductBuyLink, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; @@ -63,7 +64,7 @@ function toModel(productCode, variantId, v) { ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency: v.currency_label, - url: `${getBuyLinkCountryPrefix()}/${productCode}/${v.variation.dimension_value}/${v.variation.years}/`, + url: generateProductBuyLink(v, productCode), }; } diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 545012c24..13f6cc58d 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -84,6 +84,7 @@ async function findProductVariant(cachedResponse, variant) { const units = cachedResponse.selected_users; const zuoraFormatedVariant = { + buy_link: cachedResponse.buy_link, active_platform: null, avangate_variation_prefix: null, currency_id: null, @@ -246,6 +247,14 @@ export function getBuyLinkCountryPrefix() { return 'https://www.bitdefender.com/site/Store/buy'; } +export function generateProductBuyLink(product, productCode) { + if (isZuora()) { + return product.buy_link; + } + + return `${getBuyLinkCountryPrefix()}/${productCode}/${product.variation.dimension_value}/${product.variation.years}/`; +} + /** * Fetches a product from the Bitdefender store. * @param code The product code @@ -436,7 +445,12 @@ export function getDatasetFromSection(block) { * Renders nano blocks * @param parent The parent element */ -export function renderNanoBlocks(parent = document.body, mv = undefined, index = undefined) { +export function renderNanoBlocks( + parent = document.body, + mv = undefined, + index = undefined, + block = undefined, +) { const regex = /{([^}]+)}/g; findTextNodes(parent).forEach((node) => { const text = node.textContent.trim(); @@ -454,7 +468,7 @@ export function renderNanoBlocks(parent = document.body, mv = undefined, index = const [newName, ...params] = parseParams(newMatch); const renderer = nanoBlocks.get(newName.toLowerCase()); if (renderer) { - const element = mv ? renderer(mv, ...params) : renderer(...params); + const element = mv ? renderer(mv, ...params, block) : renderer(...params, block); element.classList.add('nanoblock'); const oldElement = node.parentNode; oldElement.parentNode.replaceChild(element, oldElement); diff --git a/_src/scripts/zuora.js b/_src/scripts/zuora.js index f386d38b2..2af0b691b 100644 --- a/_src/scripts/zuora.js +++ b/_src/scripts/zuora.js @@ -1,6 +1,6 @@ export default class ZuoraNLClass { static async fetchCampaignName() { - const jsonFilePath = 'https://www.bitdefender.com/pages/zuoracampaign.json'; + const jsonFilePath = 'https://www.bitdefender.com/pages/fragment-collection/zuoracampaign.json'; const resp = await fetch(jsonFilePath); if (!resp.ok) { From b27e34e2132b1da9a9651749303dc4071af05a16 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 3 Sep 2024 19:31:57 +0300 Subject: [PATCH 1029/1296] zuora-pricing --- .../product-comparison-table.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index f27aa5a39..dfe245007 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -27,7 +27,6 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { priceElement.innerHTML = `${discounted} ${currency}`; priceAppliedOnTime.innerHTML = label; - // todo check why buy links are not set properly // update buy link const currentProductIndex = fetchedProducts.length - 1; const buyLink = block.querySelectorAll('.button-container a')[currentProductIndex]; @@ -283,15 +282,4 @@ export default function decorate(block) { }); matchHeights(block, 'h3'); - // block.querySelectorAll('.button-container a').forEach((link, index) => { - // if (link && link.href.includes('/site/Store/buy/')) { - // // // replace the link with the correct country prefix but keep the rest of the link - // // const url = new URL(link.href); - // // const prefix = `${getBuyLinkCountryPrefix()}/`; - // // url.pathname = prefix + url.pathname.split('/site/Store/buy/')[1]; - // // link.href = url.toString(); - // - // link.href = fetchedProducts[index].buy_link; - // } - // }); } From 79596492f961610d290940e90f8128b2d0c72afe Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 3 Sep 2024 20:21:36 +0300 Subject: [PATCH 1030/1296] barchart fix --- _src/blocks/barchart/barchart.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/barchart/barchart.js b/_src/blocks/barchart/barchart.js index e866cb18d..7c51e1cf3 100644 --- a/_src/blocks/barchart/barchart.js +++ b/_src/blocks/barchart/barchart.js @@ -10,7 +10,9 @@ export default function decorate(block) { ul.querySelectorAll('.barchart-body').forEach((container) => { const progressBars = container.querySelectorAll('ul li:nth-child(odd)'); progressBars.forEach((progressBar) => { - const value = (parseFloat(progressBar.nextElementSibling.textContent / 6) * 100).toFixed(2); + let valueAsString = progressBar.nextElementSibling.textContent; + valueAsString = valueAsString.replace(',', '.'); + const value = (parseFloat(valueAsString / 6) * 100).toFixed(2); progressBar.style.setProperty('--bar-width', `${value}%`); }); }); From 1bc74e94c75a0e48b3c62932951627283c878d92 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 13:37:18 +0300 Subject: [PATCH 1031/1296] update currency for $ on creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 22 +++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 54adbfc1c..10eb54ed3 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -71,7 +71,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu const { price, discount, currency_label: currencyLabel } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); - const oldPrice = price; + let oldPrice = `${price} ${currencyLabel}`; let newPrice = discount.discounted_price; // eslint-disable-next-line no-param-reassign let updatedBuyLinkSelector = buyLinkSelector; @@ -82,23 +82,31 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu priceElement.classList.add('hero-aem__prices__box'); let newPriceBilled = ''; + let newPriceListed = ''; + if (!prodName.endsWith('m') && type === 'monthly') { + newPrice = `${(parseInt(newPrice, 10) / 12)}`; + } + if (hideDecimals === 'true') { newPriceBilled = `${product.discount.discounted_price.replace('.00', '')} ${currencyLabel}`; - newPrice = newPrice.replace('.00', ''); + newPriceListed = `${newPrice.replace('.00', '')} ${currencyLabel}`; + if (currencyLabel === '$') { + newPriceBilled = `${currencyLabel}${product.discount.discounted_price.replace('.00', '')}`; + newPriceListed = `${currencyLabel}${newPrice.replace('.00', '')}`; + oldPrice = ` ${currencyLabel}${price}`; + } } - if (!prodName.endsWith('m') && type === 'monthly') { - newPrice = `${(parseInt(newPrice, 10) / 12)}`; - } + priceElement.innerHTML = `
    - ${oldPrice} ${currencyLabel} + ${oldPrice} Save ${discountPercentage}%
    - ${newPrice} ${currencyLabel} ${perPrice && `${perPrice.textContent.replace('0', '')}`} + ${newPriceListed} ${perPrice && `${perPrice.textContent.replace('0', '')}`}
    ${billed ? `
    ${billed.innerHTML.replace('0', `${newPriceBilled}`)}
    ` : ''} ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''} From 04fdff6c8c45d425a333c1e18b201432835e49d1 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 13:40:54 +0300 Subject: [PATCH 1032/1296] update currency for $ on creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 -- _src/blocks/products-sideview/products-sideview.js | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 10eb54ed3..8ce65a3fa 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -97,8 +97,6 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu } } - - priceElement.innerHTML = `
    diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index 7f02514ff..ec0c3af8f 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -240,6 +240,7 @@ function updateBenefits(block) { } }); } catch (e) { + // eslint-disable-next-line no-console console.log("couldn't load the benefits"); } } From 94b4d0b38220f5212e15a97bf7adb7e8af692cff Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 13:50:49 +0300 Subject: [PATCH 1033/1296] =?UTF-8?q?update=20currency=20for=20$=20and=20?= =?UTF-8?q?=C2=A3=20on=20creators=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 8ce65a3fa..e58690782 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -90,7 +90,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu if (hideDecimals === 'true') { newPriceBilled = `${product.discount.discounted_price.replace('.00', '')} ${currencyLabel}`; newPriceListed = `${newPrice.replace('.00', '')} ${currencyLabel}`; - if (currencyLabel === '$') { + if (currencyLabel === '$' || currencyLabel === '£') { newPriceBilled = `${currencyLabel}${product.discount.discounted_price.replace('.00', '')}`; newPriceListed = `${currencyLabel}${newPrice.replace('.00', '')}`; oldPrice = ` ${currencyLabel}${price}`; From 10578944a1cb0037e7878fbdc4ffdebb732ee093 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 14:36:02 +0300 Subject: [PATCH 1034/1296] update currency on creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 15 ++-- _src/scripts/utils/utils.js | 73 ++++++++++++++++++++ 2 files changed, 79 insertions(+), 9 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index e58690782..d2d0ec7cf 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -66,12 +66,12 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n } async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null, type = null, hideDecimals = null, perPrice = '') { try { - const { fetchProduct } = await import('../../scripts/utils/utils.js'); + const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); const { price, discount, currency_label: currencyLabel } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); - let oldPrice = `${price} ${currencyLabel}`; + let oldPrice = price; let newPrice = discount.discounted_price; // eslint-disable-next-line no-param-reassign let updatedBuyLinkSelector = buyLinkSelector; @@ -87,14 +87,11 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu newPrice = `${(parseInt(newPrice, 10) / 12)}`; } + oldPrice = formatPrice(oldPrice, product.currency_iso, product.region_id).replace('.00', '');; if (hideDecimals === 'true') { - newPriceBilled = `${product.discount.discounted_price.replace('.00', '')} ${currencyLabel}`; - newPriceListed = `${newPrice.replace('.00', '')} ${currencyLabel}`; - if (currencyLabel === '$' || currencyLabel === '£') { - newPriceBilled = `${currencyLabel}${product.discount.discounted_price.replace('.00', '')}`; - newPriceListed = `${currencyLabel}${newPrice.replace('.00', '')}`; - oldPrice = ` ${currencyLabel}${price}`; - } + console.log(product); + newPriceBilled = formatPrice(product.discount.discounted_price, product.currency_iso, product.region_id).replace('.00', ''); + newPriceListed = formatPrice(newPrice, product.currency_iso, product.region_id).replace('.00', ''); } priceElement.innerHTML = ` diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 2610f25a0..fd5291406 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,5 +1,73 @@ import ZuoraNLClass from '../zuora.js'; +export const IANA_BY_REGION_MAP = new Map([ + [3, { locale: 'en-GB', label: 'united kingdom' }], + [4, { locale: 'au-AU', label: 'australia' }], + [5, { locale: 'de-DE', label: 'germany' }], + [6, { locale: 'ro-RO', label: 'romania' }], + [7, { locale: 'es-ES', label: 'spain' }], + [8, { locale: 'en-US', label: 'com' }], + [9, { locale: 'it-IT', label: 'italy' }], + [10, { locale: 'en-CA', label: 'canada' }], + [12, { locale: 'pt-PT', label: 'portugal' }], + [13, { locale: 'br-BR', label: 'brazil' }], + [14, { locale: 'fr-FR', label: 'france' }], + [15, { locale: 'en-GB', label: 'united kingdom' }], + [16, { locale: 'en-US', label: 'rest of the world EU countries' }], + [17, { locale: 'de-CH', label: 'germany-switzerland' }], + [19, { locale: 'en-ZA', label: 'en south africa' }], + [22, { locale: 'nl-NL', label: 'netherlands' }], + [24, { locale: 'en-VN', label: 'en vietnam' }], + [20, { locale: 'en-MX', label: 'en es mexico' }], + [21, { locale: 'en-CO', label: 'en es columbia' }], + [25, { locale: 'en-SG', label: 'en singapore' }], + [26, { locale: 'en-SE', label: 'en sweden' }], + [27, { locale: 'en-DK', label: 'en denmark' }], + [28, { locale: 'en-HU', label: 'en hungary' }], + [29, { locale: 'en-BG', label: 'en bulgaria' }], + [30, { locale: 'en-HR', label: 'en croatia' }], + [31, { locale: 'en-NO', label: 'en norway' }], + [32, { locale: 'en-MD', label: 'en moldova' }], + [33, { locale: 'en-RS', label: 'en serbia' }], + [34, { locale: 'en-RU', label: 'en russia' }], + [35, { locale: 'en-EG', label: 'en egypt' }], + [36, { locale: 'en-SA', label: 'en saudi arabia' }], + [37, { locale: 'fr-DZ', label: 'en Algeria' }], + [38, { locale: 'en-AE', label: 'en united arab emirates' }], + [39, { locale: 'en-PS', label: 'en palestinia' }], + [40, { locale: 'en-CN', label: 'en china' }], + [41, { locale: 'en-HK', label: 'en hong kong' }], + [42, { locale: 'en-CK', label: 'Cook Islands' }], + [43, { locale: 'en-KE', label: 'en kenya' }], + [44, { locale: 'en-NG', label: 'en nigeria' }], + [45, { locale: 'fr-TN', label: 'en Tunisia' }], + [46, { locale: 'en-PL', label: 'en poland' }], + [47, { locale: 'en-CZ', label: 'en Czech' }], + [48, { locale: 'es-VE', label: 'en Venezuela' }], + [49, { locale: 'en-TR', label: 'en turkey' }], + [50, { locale: 'en-ID', label: 'en Indonesia' }], + [51, { locale: 'en-PH', label: 'en Philippines' }], + [52, { locale: 'en-TW', label: 'en taiwan' }], + [53, { locale: 'en-UA', label: 'en Ukraine' }], + [54, { locale: 'es-CL', label: 'en Chile' }], + [55, { locale: 'en-MY', label: 'en Malaysia' }], + [56, { locale: 'es-AR', label: 'en Argentina' }], + [57, { locale: 'es-PE', label: 'en Peru' }], + [59, { locale: 'hr-HR', label: 'Croatia' }], + [60, { locale: 'ma-MA', label: 'Morocco' }], + [61, { locale: 'pk-PK', label: 'Pakistan' }], + [62, { locale: 'bo-BO', label: 'Bolivia' }], + [63, { locale: 'do-DO', label: 'Dominican Republic' }], + [64, { locale: 'kw-KW', label: 'Kuwait' }], + [65, { locale: 'jo-JO', label: 'Jordan' }], + [66, { locale: 'th-TH', label: 'Thailand' }], + [67, { locale: 'en-BD', label: 'en Bangladesh' }], + [68, { locale: 'en-LK', label: 'en Sri Lanka' }], + [69, { locale: 'en-PY', label: 'en Paraguay' }], + [70, { locale: 'en-UY', label: 'en Uruguay' }], + [72, { locale: 'en-JP', label: 'en Japan' }], +]); + /** * Returns the value of a query parameter * @returns {String} @@ -255,6 +323,11 @@ export function generateProductBuyLink(product, productCode) { return `${getBuyLinkCountryPrefix()}/${productCode}/${product.variation.dimension_value}/${product.variation.years}/`; } +export function formatPrice(price, currency, region) { + const ianaRegionFormat = IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US'; + return new Intl.NumberFormat(ianaRegionFormat, { style: 'currency', currency: currency }).format(price); +} + /** * Fetches a product from the Bitdefender store. * @param code The product code From cb8b93893da4cec2a79d040d259a63d28947d944 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 14:40:24 +0300 Subject: [PATCH 1035/1296] update currency on creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 5 ++--- _src/scripts/utils/utils.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index d2d0ec7cf..cda2602f3 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -69,7 +69,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); - const { price, discount, currency_label: currencyLabel } = product; + const { price, discount } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); let oldPrice = price; let newPrice = discount.discounted_price; @@ -87,9 +87,8 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu newPrice = `${(parseInt(newPrice, 10) / 12)}`; } - oldPrice = formatPrice(oldPrice, product.currency_iso, product.region_id).replace('.00', '');; + oldPrice = formatPrice(oldPrice, product.currency_iso, product.region_id).replace('.00', ''); if (hideDecimals === 'true') { - console.log(product); newPriceBilled = formatPrice(product.discount.discounted_price, product.currency_iso, product.region_id).replace('.00', ''); newPriceListed = formatPrice(newPrice, product.currency_iso, product.region_id).replace('.00', ''); } diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index fd5291406..aba631df2 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -325,7 +325,7 @@ export function generateProductBuyLink(product, productCode) { export function formatPrice(price, currency, region) { const ianaRegionFormat = IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US'; - return new Intl.NumberFormat(ianaRegionFormat, { style: 'currency', currency: currency }).format(price); + return new Intl.NumberFormat(ianaRegionFormat, { style: 'currency', currency }).format(price); } /** From f42d959b2083be226da0478c75944f89419cfbb9 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 15:17:44 +0300 Subject: [PATCH 1036/1296] update regions creators page --- _src/scripts/utils/utils.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index aba631df2..642b10309 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -390,6 +390,41 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; } + if (url.pathname.includes('/en-gb/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; + } + + if (url.pathname.includes('/pt-br/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '13'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; + } + + if (url.pathname.includes('/de-de/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '5'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; + } + + if (url.pathname.includes('/de-ch/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '17'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; + } + + if (url.pathname.includes('/fr-fr/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; + } + if ((siteName === 'hk' || siteName === 'tw')) { // append force_region for hk and tw const newData = JSON.parse(data.get('data')); From c138f7fa1e90bb2b743b7d5115184850547ed3c1 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 15:23:02 +0300 Subject: [PATCH 1037/1296] update regions on creators page --- _src/scripts/utils/utils.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 642b10309..cdb845756 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -425,6 +425,13 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; } + if (url.pathname.includes('/es-es/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '7'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; + } + if ((siteName === 'hk' || siteName === 'tw')) { // append force_region for hk and tw const newData = JSON.parse(data.get('data')); From 9d9179fe4101fd4561cf94175fcc867e92e16ed6 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 16:20:17 +0300 Subject: [PATCH 1038/1296] update regions creators page --- _src/scripts/utils/utils.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index cdb845756..8234349dd 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -383,6 +383,13 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } + if (url.pathname.includes('/en-us/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '2'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; + } + if (url.pathname.includes('/en-au/')) { const newData = JSON.parse(data.get('data')); newData.config.force_region = '4'; From 1677cb6ca3ebf64ab0aadf59487f5f86dfde288b Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 16:53:39 +0300 Subject: [PATCH 1039/1296] update regions creators page --- _src/scripts/utils/utils.js | 97 ++++++++++++++++++++----------------- 1 file changed, 53 insertions(+), 44 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 8234349dd..1479daaef 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -383,60 +383,69 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } - if (url.pathname.includes('/en-us/')) { + if (url.hostname.includes('bitdefender.com') || url.hostname.includes('hlx.live')) { + const newData = JSON.parse(data.get('data')); - newData.config.force_region = '2'; + newData.config.force_region = '8'; data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; - } - if (url.pathname.includes('/en-au/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '4'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; - } + if (url.pathname.includes('/en-us/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '2'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; + } - if (url.pathname.includes('/en-gb/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '3'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; - } + if (url.pathname.includes('/en-au/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '4'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; + } - if (url.pathname.includes('/pt-br/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '13'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; - } + if (url.pathname.includes('/en-gb/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; + } - if (url.pathname.includes('/de-de/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '5'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } + if (url.pathname.includes('/pt-br/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '13'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; + } - if (url.pathname.includes('/de-ch/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '17'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } + if (url.pathname.includes('/de-de/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '5'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; + } - if (url.pathname.includes('/fr-fr/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '14'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; - } + if (url.pathname.includes('/de-ch/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '17'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; + } + + if (url.pathname.includes('/fr-fr/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; + } + + if (url.pathname.includes('/es-es/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '7'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; + } - if (url.pathname.includes('/es-es/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '7'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; } if ((siteName === 'hk' || siteName === 'tw')) { From 7c489d16dfbb7eb3b16b27436354a3a2e3d3d2b3 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 17:05:08 +0300 Subject: [PATCH 1040/1296] update regions creators page --- _src/scripts/utils/utils.js | 54 ++++++++----------------------------- 1 file changed, 11 insertions(+), 43 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 1479daaef..2fd4a3160 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -384,68 +384,36 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { } if (url.hostname.includes('bitdefender.com') || url.hostname.includes('hlx.live')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '8'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; - if (url.pathname.includes('/en-us/')) { - const newData = JSON.parse(data.get('data')); newData.config.force_region = '2'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; - } - - if (url.pathname.includes('/en-au/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/en-au/')) { newData.config.force_region = '4'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; - } - - if (url.pathname.includes('/en-gb/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/en-gb/')) { newData.config.force_region = '3'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; - } - - if (url.pathname.includes('/pt-br/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/pt-br/')) { newData.config.force_region = '13'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; - } - - if (url.pathname.includes('/de-de/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/de-de/')) { newData.config.force_region = '5'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } - - if (url.pathname.includes('/de-ch/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/de-ch/')) { newData.config.force_region = '17'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } - - if (url.pathname.includes('/fr-fr/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/fr-fr/')) { newData.config.force_region = '14'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; - } - - if (url.pathname.includes('/es-es/')) { - const newData = JSON.parse(data.get('data')); + } else if (url.pathname.includes('/es-es/')) { newData.config.force_region = '7'; - data.set('data', JSON.stringify(newData)); FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; + } else { + newData.config.force_region = '8'; // Default region if no specific region is matched + FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; } - + data.set('data', JSON.stringify(newData)); } if ((siteName === 'hk' || siteName === 'tw')) { From d28721b7e22079d1708f4b6217cb4c1f66210eea Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 17:43:22 +0300 Subject: [PATCH 1041/1296] update regions creators page --- _src/scripts/utils/utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 2fd4a3160..e3e921b50 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -410,7 +410,6 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { newData.config.force_region = '7'; FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; } else { - newData.config.force_region = '8'; // Default region if no specific region is matched FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; } data.set('data', JSON.stringify(newData)); From 5886b3d6d849c041e4e9186d6a6abbac14438afc Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Wed, 4 Sep 2024 18:42:11 +0300 Subject: [PATCH 1042/1296] fix link-uri de buy uk --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index e3e921b50..315fb0304 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -261,7 +261,7 @@ export function getBuyLinkCountryPrefix() { } if (pathname.includes('/en-gb/')) { - return 'https://www.bitdefender.com.uk/site/Store/buy'; + return 'https://www.bitdefender.co.uk/site/Store/buy'; } if (pathname.includes('/ro-ro/')) { From 219626d66852daa1d8e4b1d0a8587f7f92ad4bbb Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 5 Sep 2024 13:27:10 +0300 Subject: [PATCH 1043/1296] refactor: Update add-on price calculation and plan switcher in new-prod-boxes.js --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 51 +++++++++++++++----- 1 file changed, 40 insertions(+), 11 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 8df26e752..347981269 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -131,11 +131,17 @@ function calculateAddOnCost(selector1, selector2) { return correctPrice; } -function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, prodThirdRadioButtonName) { +function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, prodThirdRadioButtonName, variant = 'default') { const planSwitcher = document.createElement('div'); planSwitcher.classList.add('plan-switcher'); + planSwitcher.classList.toggle('addon', variant === 'addon'); + let radioArray = ['yearly', 'monthly', '3-rd-button']; + if (variant === 'addon') { + radioArray = ['add-on-yearly', 'add-on-monthly']; + } let prodNamesArray = [prodName, prodMonthlyName, prodThirdRadioButtonName]; + Array.from(radioButtons.children).forEach((radio, idx) => { let radioText = radio.textContent; let plan = radioArray[idx]; @@ -149,7 +155,7 @@ function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, if (productName) { planSwitcher.innerHTML += ` - +
    `; } @@ -367,14 +373,15 @@ export default async function decorate(block, options) { const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); // eslint-disable-next-line no-unused-vars const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); - let leftRadio = radioButtons.querySelector('td:first-child')?.textContent; - let rightRadio = radioButtons.querySelector('td:last-child')?.textContent; - planSwitcher2.classList.add('plan-switcher', 'addon'); - planSwitcher2.innerHTML = ` - -
    - - `; + // let firstRadio = radioButtons.querySelector('td:first-child')?.textContent; + // let secondRadio = radioButtons.querySelector('td:nth-child(2)')?.textContent; + // planSwitcher2.classList.add('plan-switcher', 'addon'); + // planSwitcher2.innerHTML = ` + // + //
    + // + // `; + planSwitcher2 = createPlanSwitcher(radioButtons, key, addOnProdName, addOnProdMonthlyName, null, 'addon'); } let addOnPriceBox; @@ -534,7 +541,6 @@ export default async function decorate(block, options) { }); if (radio.checked) { - // trigger the input event radio.dispatchEvent(new Event('input')); } }); @@ -556,6 +562,29 @@ export default async function decorate(block, options) { priceBox.appendChild(yearlyAddOnPricesBoxes[event.target.value]); } }); + + if (radio.checked) { + radio.dispatchEvent(new Event('input')); + let addOnPriceBox = prod.querySelector('.hero-aem__prices__addon'); + let priceBox = prod.querySelector('.hero-aem__prices'); + + let addOnPriceBoxNewPrice = addOnPriceBox.querySelector('.prod-newprice'); + let priceBoxNewPrice = priceBox.querySelector('.prod-newprice'); + let planSwitcherNewPrice = prod.querySelector('.add-on-newprice'); + + let addOnPriceBoxOldPrice = addOnPriceBox.querySelector('.prod-oldprice'); + let planSwitcherOldPrice = prod.querySelector('.add-on-oldprice'); + + let addOnPriceBoxDiscountPercentage = addOnPriceBox.querySelector('.prod-save'); + let planSwitcherDiscountPercentage = prod.querySelector('.add-on-percent-save'); + + const numberRegex = /\d+(\.\d+)?/; + const addOnCost = calculateAddOnCost(priceBoxNewPrice, addOnPriceBoxNewPrice); + + planSwitcherNewPrice.textContent = planSwitcherNewPrice.textContent.replace(numberRegex, addOnCost); + planSwitcherOldPrice.textContent = addOnPriceBoxOldPrice.textContent; + planSwitcherDiscountPercentage.textContent = addOnPriceBoxDiscountPercentage.textContent; + } }); }); } From 7cec406b727ae491c1ea5a39c00ae37a233fd30c Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 5 Sep 2024 13:38:17 +0300 Subject: [PATCH 1044/1296] newPriceListed was never given a default value, it broke if the hideDecimals metadata was not set --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index cda2602f3..959eba334 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -91,6 +91,8 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu if (hideDecimals === 'true') { newPriceBilled = formatPrice(product.discount.discounted_price, product.currency_iso, product.region_id).replace('.00', ''); newPriceListed = formatPrice(newPrice, product.currency_iso, product.region_id).replace('.00', ''); + } else { + newPriceListed = formatPrice(newPrice, product.currency_iso, product.region_id); } priceElement.innerHTML = ` @@ -105,6 +107,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu ${billed ? `
    ${billed.innerHTML.replace('0', `${newPriceBilled}`)}
    ` : ''} ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''}
    `; + console.log(priceElement); return priceElement; } catch (err) { // eslint-disable-next-line no-console @@ -120,7 +123,8 @@ function calculateAddOnCost(selector1, selector2) { // get only the number from the new price const numberRegex = /\d+(\.\d+)?/; - + console.log(selector1.textContent); + console.log(selector2.textContent); const firstPriceString = selector1.textContent.match(numberRegex)[0]; const firstPriceFloat = parseFloat(firstPriceString); From d61f1f0c092a88580d98be6a2e4042dcc329f961 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 5 Sep 2024 13:38:43 +0300 Subject: [PATCH 1045/1296] delete console.log --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 959eba334..1de791d46 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -107,7 +107,6 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu ${billed ? `
    ${billed.innerHTML.replace('0', `${newPriceBilled}`)}
    ` : ''} ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''}
    `; - console.log(priceElement); return priceElement; } catch (err) { // eslint-disable-next-line no-console @@ -123,8 +122,6 @@ function calculateAddOnCost(selector1, selector2) { // get only the number from the new price const numberRegex = /\d+(\.\d+)?/; - console.log(selector1.textContent); - console.log(selector2.textContent); const firstPriceString = selector1.textContent.match(numberRegex)[0]; const firstPriceFloat = parseFloat(firstPriceString); From d82a5d25bd47d21d15b3c5b711d6bb8469271edd Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 5 Sep 2024 13:49:18 +0300 Subject: [PATCH 1046/1296] update adobeDataLayer for creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 33 ++++++++++++++------ 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index cda2602f3..9c44ec9f0 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -68,7 +68,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu try { const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); - + prodName = prodName.trim(); const { price, discount } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); let oldPrice = price; @@ -83,10 +83,27 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu let newPriceBilled = ''; let newPriceListed = ''; + let prodVersion = 'monthly'; + if (!prodName.endsWith('m') && type === 'monthly') { newPrice = `${(parseInt(newPrice, 10) / 12)}`; + prodVersion = 'yearly'; } + let adobeDataLayerProduct = { + ID: product.platform_product_id, + name: prodName, + devices: product.variation.dimension_value, + subscription: prodVersion, + version: prodVersion, + basePrice: price, + discountValue: discount.discounted_price, + discountRate: discountPercentage, + currency: product.currency_label, + priceWithTax: discount.discounted_price, + }; + dataLayerProducts.push(adobeDataLayerProduct); + oldPrice = formatPrice(oldPrice, product.currency_iso, product.region_id).replace('.00', ''); if (hideDecimals === 'true') { newPriceBilled = formatPrice(product.discount.discounted_price, product.currency_iso, product.region_id).replace('.00', ''); @@ -527,14 +544,12 @@ export default async function decorate(block, options) { } // dataLayer push with all the products - if (options) { - window.adobeDataLayer.push({ - event: 'product loaded', - product: { - [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, - }, - }); - } + window.adobeDataLayer.push({ + event: 'product loaded', + product: { + [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, + }, + }); window.hj = window.hj || function initHotjar(...args) { (hj.q = hj.q || []).push(...args); From 1a32b7c52b2d8c4984a612ff7b8e2052389ca9e0 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 5 Sep 2024 14:02:40 +0300 Subject: [PATCH 1047/1296] Delete Comment --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index f1220e15f..4f285bc70 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -374,14 +374,6 @@ export default async function decorate(block, options) { const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); // eslint-disable-next-line no-unused-vars const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); - // let firstRadio = radioButtons.querySelector('td:first-child')?.textContent; - // let secondRadio = radioButtons.querySelector('td:nth-child(2)')?.textContent; - // planSwitcher2.classList.add('plan-switcher', 'addon'); - // planSwitcher2.innerHTML = ` - // - //
    - // - // `; planSwitcher2 = createPlanSwitcher(radioButtons, key, addOnProdName, addOnProdMonthlyName, null, 'addon'); } From d4eff1b1f777220643aa908a1f9044323962592d Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 5 Sep 2024 14:06:00 +0300 Subject: [PATCH 1048/1296] adobeDataLayer for creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 9c44ec9f0..8695739c9 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -68,7 +68,6 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu try { const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); - prodName = prodName.trim(); const { price, discount } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); let oldPrice = price; @@ -92,7 +91,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu let adobeDataLayerProduct = { ID: product.platform_product_id, - name: prodName, + name: prodName.trim(), devices: product.variation.dimension_value, subscription: prodVersion, version: prodVersion, From 0ae0808f32797b1603b8d0833139fb79ddf074bc Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Thu, 5 Sep 2024 16:27:48 +0300 Subject: [PATCH 1049/1296] fix for landing page creators --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 8695739c9..78b0d1516 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -542,14 +542,6 @@ export default async function decorate(block, options) { block.parentNode.insertBefore(switchBox, block); } - // dataLayer push with all the products - window.adobeDataLayer.push({ - event: 'product loaded', - product: { - [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, - }, - }); - window.hj = window.hj || function initHotjar(...args) { (hj.q = hj.q || []).push(...args); }; @@ -572,6 +564,16 @@ export default async function decorate(block, options) { decorateIcons(block.closest('.section')); } + if (!isInLandingPages) { + // dataLayer push with all the products + window.adobeDataLayer.push({ + event: 'product loaded', + product: { + [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, + }, + }); + } + // General function to match the height of elements based on a selector const matchHeights = (targetNode, selector) => { const resetHeights = () => { From 744ed781ebf58a99641e746dc44d02b05e1c0c32 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 13:18:52 +0300 Subject: [PATCH 1050/1296] chore: Add unique IDs to each section in the page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 1 - _src/scripts/scripts.js | 42 ++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index f544dbb6c..405feb71f 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -195,7 +195,6 @@ export default async function decorate(block, options) { const blockParent = block.closest('.section'); blockParent.classList.add('we-container'); - blockParent.id = 'new-prod-boxes'; let defaultContentWrapperElements = block.closest('.section').querySelector('.default-content-wrapper')?.children; let individualSwitchText; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d4ef49ceb..39d2c9fbc 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -751,6 +751,46 @@ function eventOnDropdownSlider() { } }); } +function addIdsToEachSection() { + document.querySelectorAll('main .section > div:first-of-type').forEach((item) => { + // Find the first sibling that is not a default-content-wrapper + let componentWrapper = item; + while (componentWrapper && componentWrapper.classList.contains('default-content-wrapper')) { + if (!componentWrapper.nextElementSibling) { + return; + } + componentWrapper = componentWrapper.nextElementSibling; + } + + const baseId = componentWrapper.className.split('-wrapper')[0]; + let uniqueId = baseId; + + let idCounter = 0; + // avoid infinite loops + const MAX_ID_ATTEMPTS = 100; + // Ensure the ID is unique by checking existing IDs and appending a counter if necessary + while (document.getElementById(uniqueId) && idCounter < MAX_ID_ATTEMPTS) { + idCounter += 1; + // append a number only if it's not the first attempt + if (idCounter !== 1) { + uniqueId = `${baseId}-${idCounter}`; + } + } + + if (idCounter >= MAX_ID_ATTEMPTS) { + // eslint-disable-next-line + console.error('Unable to generate a unique ID after maximum attempts'); + return; + } + + if (baseId === 'terms') { + uniqueId = `tos${idCounter ? `-${idCounter}` : ''}`; + } + + // Assign the unique ID to the parent element + componentWrapper.parentElement.id = uniqueId; + }); +} /** * Loads everything that happens a lot later, @@ -773,6 +813,8 @@ async function loadPage() { await window.hlx.plugins.load('lazy'); await loadLazy(document); + addIdsToEachSection(); + const setupAnalytics = loadAnalytics(document, { edgeConfigId: '7275417f-3870-465c-af3e-84f8f4670b3c', orgId: '0E920C0F53DA9E9B0A490D45@AdobeOrg', From 58a450d91b3f42634ec10c08bdd78127bf5127d3 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 6 Sep 2024 14:42:07 +0300 Subject: [PATCH 1051/1296] fix text save creators page --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 78b0d1516..147494e4c 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -113,7 +113,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, bu
    ${oldPrice} - Save ${discountPercentage}% + ${saveText} ${discountPercentage}%
    ${newPriceListed} ${perPrice && `${perPrice.textContent.replace('0', '')}`} From 00504d7fc2ccb30c40f6240762f617d42bdc90f7 Mon Sep 17 00:00:00 2001 From: Ionut Mantescu Date: Fri, 6 Sep 2024 15:55:41 +0300 Subject: [PATCH 1052/1296] fix-save-creators --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index e91fb0ab2..15f7a0dd1 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -64,7 +64,7 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n } return buyLinkHref; } -async function updateProductPrice(prodName, prodUsers, prodYears, pid = null, buyLinkSelector = null, billed = null, type = null, hideDecimals = null, perPrice = '') { +async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid = null, buyLinkSelector = null, billed = null, type = null, hideDecimals = null, perPrice = '') { try { const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); @@ -185,7 +185,7 @@ export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars products, familyProducts, monthlyProducts, priceType, pid, mainProduct, - addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, + addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { @@ -450,29 +450,29 @@ export default async function decorate(block, options) {
    `; block.children[key].outerHTML = prodBox.innerHTML; - let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); + let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, saveText, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); block.children[key].querySelector('.hero-aem__prices').appendChild(priceBox); yearlyPricesBoxes[`${key}-yearly-${prodName.trim()}`] = priceBox; if (monthlyProducts) { - const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); + const montlyPriceBox = await updateProductPrice(prodMonthlyName, prodMonthlyUsers, prodMonthlyYears, saveText, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); monthlyPriceBoxes[`${key}-monthly-${prodMonthlyName.trim()}`] = montlyPriceBox; } if (radioButtons.children.length === 3 && thirdRadioButtonProducts) { - const thirdRadioButtonBox = await updateProductPrice(prodThirdRadioButtonName, prodThirdRadioButtonUsers, prodThirdRadioButtonYears, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); + const thirdRadioButtonBox = await updateProductPrice(prodThirdRadioButtonName, prodThirdRadioButtonUsers, prodThirdRadioButtonYears, saveText, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); thirdRadioButtonProductsBoxes[`${key}-3-rd-button-${prodThirdRadioButtonName.trim()}`] = thirdRadioButtonBox; } if (addOn && addOnMonthlyProductsAsList) { const [addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears] = addOnMonthlyProductsAsList[key].split('/'); - let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); + let monthlyAddOnPriceBox = await updateProductPrice(addOnProdMonthlyName, addOnProdMonthlyUsers, addOnProdMonthlyYears, saveText, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); monthlyAddOnPricesBoxes[`${key}-add-on-monthly-${addOnProdMonthlyName.trim()}`] = monthlyAddOnPriceBox; } if (addOn && addOnProductsAsList) { const [addOnProdName, addOnProdUsers, addOnProdYears] = addOnProductsAsList[key].split('/'); - addOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); + addOnPriceBox = await updateProductPrice(addOnProdName, addOnProdUsers, addOnProdYears, saveText, pid, buyLink2.querySelector('a'), billed2, type, hideDecimals, perPrice); block.children[key].querySelector('.hero-aem__prices__addon').appendChild(addOnPriceBox); yearlyAddOnPricesBoxes[`${key}-add-on-yearly-${addOnProdName.trim()}`] = addOnPriceBox; } From ed0c00e17f20589057bd92c961234a467fd917b5 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:02:06 +0300 Subject: [PATCH 1053/1296] take 1 on fixing data layer on import --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 15f7a0dd1..a00cc04ff 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -619,12 +619,20 @@ export default async function decorate(block, options) { } if (isInLandingPages) { - const { decorateIcons } = await import('../../scripts/utils/utils.js'); + const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); + // eslint-disable-next-line import/no-unresolved + const { sendAnalyticsPageLoadedEvent } = await import('../../scripts/adobeDataLayer.js'); decorateIcons(block.closest('.section')); + + document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { + sendAnalyticsPageLoadedEvent(true); + }); } if (!isInLandingPages) { // dataLayer push with all the products + // add event listener for adobe data layer + window.adobeDataLayer.push({ event: 'product loaded', product: { From 943e564059ce9c0fe24e9ea3b7bcde16ad2cef7c Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:08:27 +0300 Subject: [PATCH 1054/1296] take 2 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index a00cc04ff..435286b17 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -621,7 +621,7 @@ export default async function decorate(block, options) { if (isInLandingPages) { const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved - const { sendAnalyticsPageLoadedEvent } = await import('../../scripts/adobeDataLayer.js'); + const { sendAnalyticsPageLoadedEvent } = await import(`${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); decorateIcons(block.closest('.section')); document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { From d3d70b18937eea90496b73f1711fcaf3d128a7a4 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:11:51 +0300 Subject: [PATCH 1055/1296] take 3 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 435286b17..13876eda4 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -621,7 +621,7 @@ export default async function decorate(block, options) { if (isInLandingPages) { const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved - const { sendAnalyticsPageLoadedEvent } = await import(`${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); + const { sendAnalyticsPageLoadedEvent } = await import('../_src-lp/scripts/adobeDataLayer.js'); decorateIcons(block.closest('.section')); document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { From faab138faf229e94447ea8c1c537743273ec4792 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:13:16 +0300 Subject: [PATCH 1056/1296] chore: Fix import path for sendAnalyticsPageLoadedEvent in new-prod-boxes.js --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 13876eda4..435286b17 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -621,7 +621,7 @@ export default async function decorate(block, options) { if (isInLandingPages) { const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved - const { sendAnalyticsPageLoadedEvent } = await import('../_src-lp/scripts/adobeDataLayer.js'); + const { sendAnalyticsPageLoadedEvent } = await import(`${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); decorateIcons(block.closest('.section')); document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { From 6121630ff8b77f04356d1f932759d2b033e820f0 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:13:59 +0300 Subject: [PATCH 1057/1296] take 4 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 435286b17..7148c43c1 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -621,7 +621,7 @@ export default async function decorate(block, options) { if (isInLandingPages) { const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved - const { sendAnalyticsPageLoadedEvent } = await import(`${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); + const { sendAnalyticsPageLoadedEvent } = await import(`https::/${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); decorateIcons(block.closest('.section')); document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { From 30f6e8d5f1ee682c5a38bbe499a8daba1a648689 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:14:34 +0300 Subject: [PATCH 1058/1296] take 5 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 7148c43c1..47e60c4f7 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -621,7 +621,7 @@ export default async function decorate(block, options) { if (isInLandingPages) { const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved - const { sendAnalyticsPageLoadedEvent } = await import(`https::/${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); + const { sendAnalyticsPageLoadedEvent } = await import(`https://${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); decorateIcons(block.closest('.section')); document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { From 2b29220ca68186f0bec23d93158b6f30c5f63a48 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:17:09 +0300 Subject: [PATCH 1059/1296] TAKE 6 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 47e60c4f7..87d92c3ed 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -619,8 +619,9 @@ export default async function decorate(block, options) { } if (isInLandingPages) { - const { decorateIcons, GLOBAL_EVENTS } = await import('../../scripts/utils/utils.js'); + const { decorateIcons } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved + const { GLOBAL_EVENTS } = await import(`https://${window.location.hostname}/_src-lp/scripts/utils/utils.js`); const { sendAnalyticsPageLoadedEvent } = await import(`https://${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); decorateIcons(block.closest('.section')); From 002f647c2c0822acbd71d43230e2b569d7e70b33 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:17:52 +0300 Subject: [PATCH 1060/1296] Take 7 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 87d92c3ed..c4505b272 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -621,7 +621,7 @@ export default async function decorate(block, options) { if (isInLandingPages) { const { decorateIcons } = await import('../../scripts/utils/utils.js'); // eslint-disable-next-line import/no-unresolved - const { GLOBAL_EVENTS } = await import(`https://${window.location.hostname}/_src-lp/scripts/utils/utils.js`); + const { GLOBAL_EVENTS } = await import(`https://${window.location.hostname}/_src-lp/scripts/utils.js`); const { sendAnalyticsPageLoadedEvent } = await import(`https://${window.location.hostname}/_src-lp/scripts/adobeDataLayer.js`); decorateIcons(block.closest('.section')); From b61c18075703c034e9da631be0f9610f5c39d7c0 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:18:33 +0300 Subject: [PATCH 1061/1296] Take 8 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index c4505b272..b248ec8f3 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -626,6 +626,13 @@ export default async function decorate(block, options) { decorateIcons(block.closest('.section')); document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { + window.adobeDataLayer.push({ + event: 'product loaded', + product: { + [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, + }, + }); + sendAnalyticsPageLoadedEvent(true); }); } From f5e87d37af1fb60f740bb603363b0e098bce5477 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:21:10 +0300 Subject: [PATCH 1062/1296] Cleanup --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index b248ec8f3..6e45e2417 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -639,8 +639,6 @@ export default async function decorate(block, options) { if (!isInLandingPages) { // dataLayer push with all the products - // add event listener for adobe data layer - window.adobeDataLayer.push({ event: 'product loaded', product: { From a77345c805cba84bea16f993fc6269fcc46871c0 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Fri, 6 Sep 2024 18:26:16 +0300 Subject: [PATCH 1063/1296] Modify parameter name --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 6e45e2417..e614fe4d4 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -627,7 +627,7 @@ export default async function decorate(block, options) { document.addEventListener(GLOBAL_EVENTS.ADOBE_MC_LOADED, () => { window.adobeDataLayer.push({ - event: 'product loaded', + event: 'campaign product', product: { [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, }, From e3007d1ce6045346a38346f9fbd3eecc4aec3287 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 9 Sep 2024 13:56:25 +0300 Subject: [PATCH 1064/1296] updated the way links are created --- _src/blocks/header/header.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 4a651a4a9..8826f2c90 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -389,7 +389,14 @@ async function runDefaultHeaderLogic(block) { } else { domain = domain.split('-').join('_'); } - const aemHeaderFetch = await fetch(`https://stage.bitdefender.com/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root/mega_menu.html`); + + const aemHeaderLink = window.location.hostname.includes('.hlx.') + || window.location.hostname.includes('localhost') + ? 'https://stage.bitdefender.com' + : ''; + + // this needs to be updated to also bring the language bar in the future !!! + const aemHeaderFetch = await fetch(`${aemHeaderLink}/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root/mega_menu.html`); if (!aemHeaderFetch.ok) { return; } From bcf5070ae841691db992ba3cd48666bee0d52ae1 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 9 Sep 2024 14:04:17 +0300 Subject: [PATCH 1065/1296] added TO DO comment --- _src/blocks/header/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 8826f2c90..49b39ca70 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -395,7 +395,7 @@ async function runDefaultHeaderLogic(block) { ? 'https://stage.bitdefender.com' : ''; - // this needs to be updated to also bring the language bar in the future !!! + //TODO: this needs to be updated to also bring the language bar in the future !!! const aemHeaderFetch = await fetch(`${aemHeaderLink}/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root/mega_menu.html`); if (!aemHeaderFetch.ok) { return; From 216a0458eb03ab2487fa72a80ed651b7666ba4a2 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 9 Sep 2024 14:06:21 +0300 Subject: [PATCH 1066/1296] fixed linter --- _src/blocks/header/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 49b39ca70..2582e6e8a 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -395,7 +395,7 @@ async function runDefaultHeaderLogic(block) { ? 'https://stage.bitdefender.com' : ''; - //TODO: this needs to be updated to also bring the language bar in the future !!! + // TODO: this needs to be updated to also bring the language bar in the future !!! const aemHeaderFetch = await fetch(`${aemHeaderLink}/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root/mega_menu.html`); if (!aemHeaderFetch.ok) { return; From f5d07ba0de56e993805db270e9b13610c8d3b36b Mon Sep 17 00:00:00 2001 From: vradulescu-bd <140399829+vradulescu-bd@users.noreply.github.com> Date: Mon, 9 Sep 2024 14:45:28 +0300 Subject: [PATCH 1067/1296] Revert "update regions creators page" --- _src/scripts/utils/utils.js | 73 +++++++++++++++++++++++-------------- 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 315fb0304..479dc5a4a 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -383,36 +383,53 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } - if (url.hostname.includes('bitdefender.com') || url.hostname.includes('hlx.live')) { + if (url.pathname.includes('/en-au/')) { const newData = JSON.parse(data.get('data')); - if (url.pathname.includes('/en-us/')) { - newData.config.force_region = '2'; - FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; - } else if (url.pathname.includes('/en-au/')) { - newData.config.force_region = '4'; - FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; - } else if (url.pathname.includes('/en-gb/')) { - newData.config.force_region = '3'; - FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; - } else if (url.pathname.includes('/pt-br/')) { - newData.config.force_region = '13'; - FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; - } else if (url.pathname.includes('/de-de/')) { - newData.config.force_region = '5'; - FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } else if (url.pathname.includes('/de-ch/')) { - newData.config.force_region = '17'; - FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } else if (url.pathname.includes('/fr-fr/')) { - newData.config.force_region = '14'; - FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; - } else if (url.pathname.includes('/es-es/')) { - newData.config.force_region = '7'; - FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; - } else { - FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; - } + newData.config.force_region = '4'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; + } + + if (url.pathname.includes('/en-gb/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '3'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; + } + + if (url.pathname.includes('/pt-br/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '13'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; + } + + if (url.pathname.includes('/de-de/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '5'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; + } + + if (url.pathname.includes('/de-ch/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '17'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; + } + + if (url.pathname.includes('/fr-fr/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '14'; + data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; + } + + if (url.pathname.includes('/es-es/')) { + const newData = JSON.parse(data.get('data')); + newData.config.force_region = '7'; data.set('data', JSON.stringify(newData)); + FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; } if ((siteName === 'hk' || siteName === 'tw')) { From 9df7c347d74c588b37262f579d5a114067427864 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 08:32:26 +0300 Subject: [PATCH 1068/1296] columns lint --- _src/blocks/columns/columns.css | 212 ++++++++++++++++---------------- 1 file changed, 107 insertions(+), 105 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 8cf175a60..352f06799 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,57 +2,19 @@ padding: 0 var(--body-padding); } -.columns-container.video-left video { - width: 100%; - border-radius: 10px; -} - -.columns-container.video-left .columns-right-col { - width: 100%; - flex: none; -} - -.columns-container.chat-options p { - font-size: var(--body-font-size-s) !important; -} - -.columns-container.video-left .columns-right-col p { - margin: 1.5em 0; -} - -.columns > div { - display: flex; - flex-direction: column; - justify-content: center; -} - -.columns > div > div { - order: 1; -} - -.text-over-image > div > div { - height: 600px; - border-radius: 12px; +.percent-table .columns table tr { + align-items: center; display: flex; - flex-direction: column; - color: var(--white-color); - padding: 30px; - justify-content: flex-end; - background-size: cover; - background-repeat: no-repeat; -} - -.columns.carousel > div { - flex-direction: row; + justify-content: space-between; } -.columns.benefits > div { - align-items: flex-start; +.percent-table .columns table tr td:first-of-type { + font-size: var(--heading-font-size-l); + padding-right: 1.5em; } -/* awards styling */ -.columns.awards > div { - row-gap: 30px; +.percent-table .columns table tr td:last-of-type { + width: 220px; } .grey-version .columns > div { @@ -68,28 +30,8 @@ margin-bottom: 1em; } -.columns-container.chat-options .columns > div > div { - padding: 2em; -} - -.columns-container.chat-options p.button-container a { - background-color: transparent; - border: 2px solid black; - color: black -} - -.columns-container.chat-options p.button-container a:hover { - background-color: black; - color: white; -} - -.columns-container.chat-options table { - width: 100%; -} - -.columns-container.chat-options table tr { - display: flex; - justify-content: space-between; +.grey-version .columns > div > div h4 { + font-size: var(--heading-font-size-l); } .grey-version .columns > div > div img, .small-icons .columns > div > div img { @@ -97,34 +39,6 @@ width: auto; } -.columns-container.chat-options table tr td:first-of-type img { - height: 40px; -} - -.columns-container.chat-options table tr td:last-of-type img { - height: 133px; - display: none; -} - -.percent-table .columns table tr { - align-items: center; - display: flex; - justify-content: space-between; -} - -.percent-table .columns table tr td:first-of-type { - font-size: var(--heading-font-size-l); - padding-right: 1.5em; -} - -.percent-table .columns table tr td:last-of-type { - width: 220px; -} - -.grey-version .columns > div > div h4 { - font-size: var(--heading-font-size-l); -} - .grey-version .columns > div > div p.button-container { margin-bottom: auto; } @@ -138,6 +52,16 @@ margin-right: auto; } +.columns > div { + display: flex; + flex-direction: column; + justify-content: center; +} + +.columns > div > div { + order: 1; +} + .columns.highlight-text.black { background-color: var(--black-color); padding: 25px 2pc 20px 30px; @@ -146,6 +70,31 @@ width: 100%; } +.text-over-image > div > div { + height: 600px; + border-radius: 12px; + display: flex; + flex-direction: column; + color: var(--white-color); + padding: 30px; + justify-content: flex-end; + background-size: cover; + background-repeat: no-repeat; +} + +.columns.carousel > div { + flex-direction: row; +} + +.columns.benefits > div { + align-items: flex-start; +} + +/* awards styling */ +.columns.awards > div { + row-gap: 30px; +} + .text-over-image > div > div:first-child { font-size: var(--heading-font-size-s); margin-bottom: -10px; @@ -157,24 +106,24 @@ line-height: 1.25; } -.section.subtitle-blue h2 { +.section.subtitle_blue h2 { margin: 0 auto 3em; width: 100%; text-align: center; } -.section.subtitle-blue h3 { +.section.subtitle_blue h3 { font-size: 1.25rem; --tw-text-opacity: 1; color: rgb(0 110 255 / var(--tw-text-opacity)); } -.section.subtitle-blue .columns.benefits > div { +.section.subtitle_blue .columns.benefits > div { gap: 45px; margin-bottom: 2em; } -.section.subtitle-blue .columns.benefits p { +.section.subtitle_blue .columns.benefits p { font-size: var(--body-font-size-s); font-weight: 400; letter-spacing: .006em; @@ -288,6 +237,59 @@ font-size: 14px; } +.columns-container.video_left { + video { + width: 100%; + border-radius: 10px; + } + + .columns-right-col { + width: 100%; + flex: none; + p { + margin: 1.5em 0; + } + } +} + +.columns-container.chat-options .columns > div > div { + padding: 2em; +} + +.columns-container.chat-options p.button-container a { + background-color: transparent; + border: 2px solid black; + color: black +} + +.columns-container.chat-options p.button-container a:hover { + background-color: black; + color: white; +} + +.columns-container.chat-options table { + width: 100%; +} + +.columns-container.chat-options table tr { + display: flex; + justify-content: space-between; +} + +.columns-container.chat-options table tr td:first-of-type img { + height: 40px; +} + +.columns-container.chat-options table tr td:last-of-type img { + height: 133px; + display: none; +} + +.columns-container.chat-options p { + font-size: var(--body-font-size-s) !important; +} + + @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; @@ -340,16 +342,16 @@ left: 10%; } - .section.subtitle-blue h2 { + .section.subtitle_blue h2 { margin: 0 auto 3em; width: 630px; } - .section.subtitle-blue h3 { + .section.subtitle_blue h3 { font-size: 1.25rem; } - .section.subtitle-blue .columns.benefits > div { + .section.subtitle_blue .columns.benefits > div { margin-bottom: 0; } @@ -646,7 +648,7 @@ min-height: 350px; } - .columns-container.video-left .columns-right-col { + .columns-container.video_left .columns-right-col { width: 440px; flex: none; } @@ -890,4 +892,4 @@ main .section.two-columns .right-col .products.plans a.button:any-link { .creators .no-space-top .default-content-wrapper h2 { padding-top: 23px; } -} +} \ No newline at end of file From 29544be49b5a7490290fb6a28588d6a31f88f2b1 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 08:48:35 +0300 Subject: [PATCH 1069/1296] lint fix --- _src/blocks/columns/columns.css | 228 +++++++++--------- .../dropdownbox-compare.css | 52 ++-- .../dropdownbox-compare.js | 2 +- 3 files changed, 134 insertions(+), 148 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 352f06799..3caf201ce 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,54 +2,22 @@ padding: 0 var(--body-padding); } -.percent-table .columns table tr { - align-items: center; - display: flex; - justify-content: space-between; -} - -.percent-table .columns table tr td:first-of-type { - font-size: var(--heading-font-size-l); - padding-right: 1.5em; -} - -.percent-table .columns table tr td:last-of-type { - width: 220px; -} - -.grey-version .columns > div { - display: flex; - justify-content: space-between; -} - -.grey-version .columns > div > div { - --tw-bg-opacity: 1; - background-color: rgb(245 245 247 / var(--tw-bg-opacity)); - border-radius: 1rem; - padding: 3em; - margin-bottom: 1em; -} - -.grey-version .columns > div > div h4 { - font-size: var(--heading-font-size-l); +.columns-container.video-left video { + width: 100%; + border-radius: 10px; } -.grey-version .columns > div > div img, .small-icons .columns > div > div img { - height: 60px; - width: auto; +.columns-container.video-left .columns-right-col { + width: 100%; + flex: none; } -.grey-version .columns > div > div p.button-container { - margin-bottom: auto; +.columns-container.chat-options p { + font-size: var(--body-font-size-s) !important; } -.columns-container.we-container { - max-width: 100%; - padding-left: 20px; - padding-right: 20px; - margin-top: 15px; - margin-left: auto; - margin-right: auto; +.columns-container.video-left .columns-right-col p { + margin: 1.5em 0; } .columns > div { @@ -62,14 +30,6 @@ order: 1; } -.columns.highlight-text.black { - background-color: var(--black-color); - padding: 25px 2pc 20px 30px; - text-align: left; - position: absolute; - width: 100%; -} - .text-over-image > div > div { height: 600px; border-radius: 12px; @@ -95,49 +55,132 @@ row-gap: 30px; } +.grey-version .columns > div { + display: flex; + justify-content: space-between; +} + +.grey-version .columns > div > div { + --tw-bg-opacity: 1; + background-color: rgb(245 245 247 / var(--tw-bg-opacity)); + border-radius: 1rem; + padding: 3em; + margin-bottom: 1em; +} + .text-over-image > div > div:first-child { font-size: var(--heading-font-size-s); margin-bottom: -10px; } +.columns-container.chat-options .columns > div > div { + padding: 2em; +} + +.columns-container.chat-options p.button-container a { + background-color: transparent; + border: 2px solid black; + color: black +} + +.columns-container.chat-options p.button-container a:hover { + background-color: black; + color: white; +} + +.columns-container.chat-options table { + width: 100%; +} + +.columns-container.chat-options table tr { + display: flex; + justify-content: space-between; +} + +.grey-version .columns > div > div img, .small-icons .columns > div > div img { + height: 60px; + width: auto; +} + +.columns-container.chat-options table tr td:first-of-type img { + height: 40px; +} + +.columns-container.chat-options table tr td:last-of-type img { + height: 133px; + display: none; +} + +.percent-table .columns table tr { + align-items: center; + display: flex; + justify-content: space-between; +} + +.percent-table .columns table tr td:first-of-type { + font-size: var(--heading-font-size-l); + padding-right: 1.5em; +} + +.percent-table .columns table tr td:last-of-type { + width: 220px; +} + +.grey-version .columns > div > div h4 { + font-size: var(--heading-font-size-l); +} + +.grey-version .columns > div > div p.button-container { + margin-bottom: auto; +} + +.columns-container.we-container { + max-width: 100%; + padding-left: 20px; + padding-right: 20px; + margin-top: 15px; + margin-left: auto; + margin-right: auto; +} + +.columns.highlight-text.black { + background-color: var(--black-color); + padding: 25px 2pc 20px 30px; + text-align: left; + position: absolute; + width: 100%; +} + .columns.benefits h3 { font-size: var(--heading-font-size-m); font-weight: var(--font-weight-bold); line-height: 1.25; } -.section.subtitle_blue h2 { +.section.subtitle-blue h2 { margin: 0 auto 3em; width: 100%; text-align: center; } -.section.subtitle_blue h3 { +.section.subtitle-blue h3 { font-size: 1.25rem; --tw-text-opacity: 1; color: rgb(0 110 255 / var(--tw-text-opacity)); } -.section.subtitle_blue .columns.benefits > div { +.section.subtitle-blue .columns.benefits > div { gap: 45px; margin-bottom: 2em; } -.section.subtitle_blue .columns.benefits p { +.section.subtitle-blue .columns.benefits p { font-size: var(--body-font-size-s); font-weight: 400; letter-spacing: .006em; line-height: 24px; } -.columns.awards > div > div { - flex-direction: column; - width: 100%; - flex: 1; - line-height: 1.13; - text-align: center; -} - /* video presentation */ .columns.video-presentation > div > div { margin: 0 auto; @@ -237,59 +280,6 @@ font-size: 14px; } -.columns-container.video_left { - video { - width: 100%; - border-radius: 10px; - } - - .columns-right-col { - width: 100%; - flex: none; - p { - margin: 1.5em 0; - } - } -} - -.columns-container.chat-options .columns > div > div { - padding: 2em; -} - -.columns-container.chat-options p.button-container a { - background-color: transparent; - border: 2px solid black; - color: black -} - -.columns-container.chat-options p.button-container a:hover { - background-color: black; - color: white; -} - -.columns-container.chat-options table { - width: 100%; -} - -.columns-container.chat-options table tr { - display: flex; - justify-content: space-between; -} - -.columns-container.chat-options table tr td:first-of-type img { - height: 40px; -} - -.columns-container.chat-options table tr td:last-of-type img { - height: 133px; - display: none; -} - -.columns-container.chat-options p { - font-size: var(--body-font-size-s) !important; -} - - @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; @@ -342,16 +332,16 @@ left: 10%; } - .section.subtitle_blue h2 { + .section.subtitle-blue h2 { margin: 0 auto 3em; width: 630px; } - .section.subtitle_blue h3 { + .section.subtitle-blue h3 { font-size: 1.25rem; } - .section.subtitle_blue .columns.benefits > div { + .section.subtitle-blue .columns.benefits > div { margin-bottom: 0; } @@ -648,7 +638,7 @@ min-height: 350px; } - .columns-container.video_left .columns-right-col { + .columns-container.video-left .columns-right-col { width: 440px; flex: none; } diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css index b145998e7..e803bbbe0 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css @@ -9,7 +9,9 @@ } .dropdownbox-compare-container .block > div { - padding: 15px 30px; + padding: 0; + font-weight: 500; + display: flex; } /* blue tbs */ @@ -18,25 +20,6 @@ border: 1px solid #e4f2ff; } -.dropdownbox-compare-container .block > div { - padding: 0; - font-weight: 500; - display: flex; -} - -.dropdownbox-compare-container .block > div:nth-child(1) > div:nth-child(1) { - color: #fff; - background-color: #006eff; -} - -.dropdownbox-compare-container .block > div:not(:nth-child(1)) > div:nth-child(1) { - background: #e4f2ff; -} - -.dropdownbox-compare-container .block > div:first-of-type > div, .dropdownbox-compare-container .block > div:last-of-type > div { - border-bottom: 0 none; -} - .dropdownbox-compare-container .block > div:nth-child(1) > div { font-weight: bold; cursor: pointer; @@ -53,6 +36,25 @@ font-style: normal; } +.dropdownbox-compare-container .block > div:first-of-type > div, .dropdownbox-compare-container .block > div:last-of-type > div { + border-bottom: 0 none; +} + +.dropdownbox-compare-container .block > div > div:not(:nth-child(1)) { + display: flex; + align-items: center; + justify-content: center; +} + +.dropdownbox-compare-container .block > div:nth-child(1) > div:nth-child(1) { + color: #fff; + background-color: #006eff; +} + +.dropdownbox-compare-container .block > div:not(:nth-child(1)) > div:nth-child(1) { + background: #e4f2ff; +} + .dropdownbox-compare-container .block:not(.selected-2) > div > div:nth-child(2), .dropdownbox-compare-container .block.selected-1 > div > div:nth-child(2), .dropdownbox-compare-container .block.selected-2 > div > div:nth-child(3), .dropdownbox-compare-container .block.selected-3 > div > div:nth-child(4) { background-color: #f6f6f6; } @@ -69,12 +71,6 @@ background-color: white; } -.dropdownbox-compare-container .block > div > div:not(:nth-child(1)) { - display: flex; - align-items: center; - justify-content: center; -} - .dropdownbox-compare-container .block > div:not(:first-child) > div:first-child { display: block; align-items: center; @@ -99,7 +95,7 @@ margin-left: 26px; } -.dropdownbox-compare-container .block > div > div span.greenTag { +.dropdownbox-compare-container .block > div > div span.green-tag { background: #2cb43d; border-radius: 50px; color: #3c3c3c; @@ -124,7 +120,7 @@ font-weight: normal; } -.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { +.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { display: none; } diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js index ae7844b77..4566f113d 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.js +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.js @@ -2,7 +2,7 @@ export default function decorate(block) { // search for [] to replace with span greeenTag class const getFirstDivs = block.querySelectorAll('.dropdownbox-compare-container .block > div > div:nth-child(1)'); getFirstDivs.forEach((item) => { - item.innerHTML = item.innerHTML.replace('[', ''); + item.innerHTML = item.innerHTML.replace('[', ''); item.innerHTML = item.innerHTML.replace(']', ''); }); From e7a881db4a87d93d2187f7be7342b2dc7be776af Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 08:49:14 +0300 Subject: [PATCH 1070/1296] lint fix --- _src/blocks/hero/hero.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 2a024d982..65f09f7ac 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -87,11 +87,11 @@ main .hero-container { margin: 0 auto; } -main .hero-container.blue_title .hero-content > div { +main .hero-container.blue-title .hero-content > div { width: 100%; } -main .hero-container.blue_title .hero-content h1 { +main .hero-container.blue-title .hero-content h1 { --tw-text-opacity: 1; color: rgb(0 110 255 / var(--tw-text-opacity)); } @@ -521,7 +521,7 @@ main .hero .hero-awards li::after { margin: 0 9px; } - main .hero-container.blue_title .hero-content > div { + main .hero-container.blue-title .hero-content > div { width: 630px; } } From 19856296546f23f3a571e18617e020b9543986c0 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:03:58 +0300 Subject: [PATCH 1071/1296] lint fix --- .../dropdownbox-compare.css | 15 +- _src/blocks/hero/hero.css | 9 +- .../product-comparison-table.css | 148 +++++++++--------- 3 files changed, 81 insertions(+), 91 deletions(-) diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css index e803bbbe0..98dcb951d 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css @@ -18,6 +18,9 @@ .dropdownbox-compare-container .block > div > div { border-bottom: 1px solid #e4f2ff; border: 1px solid #e4f2ff; + flex: 1; + padding: 15px 20px; + display: inline-block; } .dropdownbox-compare-container .block > div:nth-child(1) > div { @@ -25,12 +28,6 @@ cursor: pointer; } -.dropdownbox-compare-container .block > div > div { - flex: 1; - padding: 15px 20px; - display: inline-block; -} - .dropdownbox-compare-container .block > div > div strong em { color: red; font-style: normal; @@ -67,10 +64,6 @@ background-color: white; } -.dropdownbox-compare-container.selected-2 .block > div > div:nth-child(2), .dropdownbox-compare-container.selected-3 .block > div > div:nth-child(2) { - background-color: white; -} - .dropdownbox-compare-container .block > div:not(:first-child) > div:first-child { display: block; align-items: center; @@ -120,7 +113,7 @@ font-weight: normal; } -.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { +.dropdownbox-compare-container .block.closed > div:not(:first-child) > div, .dropdownbox-compare-container.closed .block > div:not(:first-child) > div { display: none; } diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 65f09f7ac..e3ba878d5 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -25,6 +25,9 @@ main .hero { background-color: #F6F6F6; + position: relative; + padding: 0; + min-height: 300px; } /* breadcrumbs */ @@ -117,12 +120,6 @@ main .hero-container .hero-wrapper { padding: 0; } -main .hero { - position: relative; - padding: 0; - min-height: 300px; -} - main .hero.new2024design::after { display: none; } diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index 040f8490e..f8a0fac27 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -17,79 +17,6 @@ padding-right: 0; } -.section.product-comparison-table-container.migration .product-comparison-price { - border: 0 none!important; -} - -.section.product-comparison-table-container.migration h3 { - font-family: roboto, sans-serif; - font-size: 24px !important; - color: black !important; - font-weight: 500; - line-height: 1.25; -} - -.section.product-comparison-table-container.migration .old-price-box { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px dashed #dedede; - padding-bottom: 10px; -} - -.section.product-comparison-table-container.migration .old-price-box .savings { - display: block; - background: rgba(44, 180, 61, .2); - border-radius: 8px; - padding: 1px 9px 5px; - text-align: right; - color: #2cb43d; - font-size: 14px; - font-weight: 500; - line-height: 1.5; -} - -.section.product-comparison-table-container.migration .new-price-box { - display: flex; - justify-content: space-between; - align-items: center; - margin: 10px auto 0; - font-size: 24px; - font-weight: 700; - line-height: .9; - color: black; -} - -.section.product-comparison-table-container.migration .new-price-box .total-text { - display: block; - color: #3c3c3c; - display: inline-block; - font-size: 18px; - line-height: 1.25; - margin-right: auto; - padding: 0; - font-weight: normal; -} - -.section.product-comparison-table-container.migration p.button-container { - margin-bottom: 2em; -} - -.section.product-comparison-table-container.migration p { - color: #7e7e7e; - font-size: 12px; -} - -.section.product-comparison-table-container.migration .product-comparison-price > p:last-of-type{ - text-align: right; - color: #3c3c3c; - display: block; - font-size: 10px; - font-weight: 400; - line-height: 2; - margin-bottom: 0; -} - .column-fixed-width { width: 10.5rem; } @@ -597,4 +524,77 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { font-size: 21px !important; margin-top: 1em !important; } - } \ No newline at end of file + } + + .section.product-comparison-table-container.migration .product-comparison-price { + border: 0 none!important; +} + +.section.product-comparison-table-container.migration h3 { + font-family: roboto, sans-serif; + font-size: 24px !important; + color: black !important; + font-weight: 500; + line-height: 1.25; +} + +.section.product-comparison-table-container.migration .old-price-box { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px dashed #dedede; + padding-bottom: 10px; +} + +.section.product-comparison-table-container.migration .old-price-box .savings { + display: block; + background: rgba(44, 180, 61, .2); + border-radius: 8px; + padding: 1px 9px 5px; + text-align: right; + color: #2cb43d; + font-size: 14px; + font-weight: 500; + line-height: 1.5; +} + +.section.product-comparison-table-container.migration .new-price-box { + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px auto 0; + font-size: 24px; + font-weight: 700; + line-height: .9; + color: black; +} + +.section.product-comparison-table-container.migration .new-price-box .total-text { + display: block; + color: #3c3c3c; + display: inline-block; + font-size: 18px; + line-height: 1.25; + margin-right: auto; + padding: 0; + font-weight: normal; +} + +.section.product-comparison-table-container.migration p.button-container { + margin-bottom: 2em; +} + +.section.product-comparison-table-container.migration p { + color: #7e7e7e; + font-size: 12px; +} + +.section.product-comparison-table-container.migration .product-comparison-price > p:last-of-type{ + text-align: right; + color: #3c3c3c; + display: block; + font-size: 10px; + font-weight: 400; + line-height: 2; + margin-bottom: 0; +} \ No newline at end of file From 6f15182e22625aba374afabd961b50797cadc53e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:09:29 +0300 Subject: [PATCH 1072/1296] lint fix --- .../product-comparison-table.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index f8a0fac27..891f7942a 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -185,6 +185,11 @@ div[role="row"] div[role="cell"]:first-of-type p:last-of-type { margin-bottom: 0; } +.section.product-comparison-table-container.migration p { + color: #7e7e7e; + font-size: 12px; +} + div[role="row"].expandable-row div[role="cell"] p:first-of-type { color: var(--expandable-row-text-color); text-align: center; @@ -513,17 +518,13 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { } .section.product-comparison-table-container.migration h3 { - font-size: 21px !important; + font-size: 21px !important; + margin-top: 1em !important; } .section.product-comparison-table-container.migration .new-price-box .total-text { font-size: 16px; } - - .section.product-comparison-table-container.migration h3 { - font-size: 21px !important; - margin-top: 1em !important; - } } .section.product-comparison-table-container.migration .product-comparison-price { @@ -584,11 +585,6 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { margin-bottom: 2em; } -.section.product-comparison-table-container.migration p { - color: #7e7e7e; - font-size: 12px; -} - .section.product-comparison-table-container.migration .product-comparison-price > p:last-of-type{ text-align: right; color: #3c3c3c; From 58efa968f2f78de5c7f04c5df5b19416742063f3 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:26:24 +0300 Subject: [PATCH 1073/1296] lint fix --- .../product-comparison-table.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index 891f7942a..ca8c25166 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -107,6 +107,11 @@ div[role="cell"] .button-container , .product-comparison-header div[role="column margin-bottom: 0.3125rem; } +.section.product-comparison-table-container.migration p { + color: #7e7e7e; + font-size: 12px; +} + .product-comparison-header div[role="columnheader"] p:first-of-type { font-weight: var(--font-weight-bold); padding: 0; @@ -169,7 +174,7 @@ div[role="cell"] p:last-of-type.product-comparison-header-subtitle, font-size: var(--heading-font-size-s); } -.product-comparison-header div[role="columnheader"] .old-price-container p{ +.product-comparison-header div[role="columnheader"] .old-price-container p { font-size: var(--body-font-size-xxs); line-height: 1.2; color: var(--product-comparison-text-color); @@ -185,11 +190,6 @@ div[role="row"] div[role="cell"]:first-of-type p:last-of-type { margin-bottom: 0; } -.section.product-comparison-table-container.migration p { - color: #7e7e7e; - font-size: 12px; -} - div[role="row"].expandable-row div[role="cell"] p:first-of-type { color: var(--expandable-row-text-color); text-align: center; From 9921345250d95dfe598556734483f06af9008183 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:30:40 +0300 Subject: [PATCH 1074/1296] fix lint --- _src/blocks/columns/columns.css | 98 ++++++++++++++++----------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 3caf201ce..02dbb4afa 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -73,44 +73,6 @@ margin-bottom: -10px; } -.columns-container.chat-options .columns > div > div { - padding: 2em; -} - -.columns-container.chat-options p.button-container a { - background-color: transparent; - border: 2px solid black; - color: black -} - -.columns-container.chat-options p.button-container a:hover { - background-color: black; - color: white; -} - -.columns-container.chat-options table { - width: 100%; -} - -.columns-container.chat-options table tr { - display: flex; - justify-content: space-between; -} - -.grey-version .columns > div > div img, .small-icons .columns > div > div img { - height: 60px; - width: auto; -} - -.columns-container.chat-options table tr td:first-of-type img { - height: 40px; -} - -.columns-container.chat-options table tr td:last-of-type img { - height: 133px; - display: none; -} - .percent-table .columns table tr { align-items: center; display: flex; @@ -169,6 +131,16 @@ color: rgb(0 110 255 / var(--tw-text-opacity)); } +.columns.video-presentation > div > div { + margin: 0 auto; +} + +.columns.carousel > div > div { + margin: 10px 5px; + width: 100%; + box-sizing: border-box; +} + .section.subtitle-blue .columns.benefits > div { gap: 45px; margin-bottom: 2em; @@ -181,17 +153,6 @@ line-height: 24px; } -/* video presentation */ -.columns.video-presentation > div > div { - margin: 0 auto; -} - -.columns.carousel > div > div { - margin: 10px 5px; - width: 100%; - box-sizing: border-box; -} - .columns.with-box-shadow > div > div { padding: 0 20px; border-right: none; @@ -280,6 +241,45 @@ font-size: 14px; } + +.columns-container.chat-options .columns > div > div { + padding: 2em; +} + +.columns-container.chat-options p.button-container a { + background-color: transparent; + border: 2px solid black; + color: black +} + +.columns-container.chat-options p.button-container a:hover { + background-color: black; + color: white; +} + +.columns-container.chat-options table { + width: 100%; +} + +.columns-container.chat-options table tr { + display: flex; + justify-content: space-between; +} + +.grey-version .columns > div > div img, .small-icons .columns > div > div img { + height: 60px; + width: auto; +} + +.columns-container.chat-options table tr td:first-of-type img { + height: 40px; +} + +.columns-container.chat-options table tr td:last-of-type img { + height: 133px; + display: none; +} + @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; From ddba1f081f74b4879b430a77eca8902d280d2ce7 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:34:03 +0300 Subject: [PATCH 1075/1296] fix lint --- _src/blocks/columns/columns.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 02dbb4afa..1b53a6bc6 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -141,18 +141,6 @@ box-sizing: border-box; } -.section.subtitle-blue .columns.benefits > div { - gap: 45px; - margin-bottom: 2em; -} - -.section.subtitle-blue .columns.benefits p { - font-size: var(--body-font-size-s); - font-weight: 400; - letter-spacing: .006em; - line-height: 24px; -} - .columns.with-box-shadow > div > div { padding: 0 20px; border-right: none; @@ -177,6 +165,18 @@ font-weight: bold; } +.section.subtitle-blue .columns.benefits > div { + gap: 45px; + margin-bottom: 2em; +} + +.section.subtitle-blue .columns.benefits p { + font-size: var(--body-font-size-s); + font-weight: 400; + letter-spacing: .006em; + line-height: 24px; +} + .columns img { width: 100%; } From 9f42e8fc41dc32ddab016c744f53bd622117f012 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:39:22 +0300 Subject: [PATCH 1076/1296] fix lint --- _src/blocks/columns/columns.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 1b53a6bc6..a526ab904 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -44,6 +44,7 @@ .columns.carousel > div { flex-direction: row; + gap: 22px; } .columns.benefits > div { @@ -559,10 +560,6 @@ height: 437px; } -.columns.carousel > div { - gap: 22px; -} - .columns.carousel button { align-items: flex-start; width: 10px; From 4bb51da50154ec4bf40e00606478bcd90f3358ac Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:45:16 +0300 Subject: [PATCH 1077/1296] lint fix --- _src/blocks/columns/columns.css | 76 ++++++++++++++++----------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index a526ab904..40903ef5c 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -56,6 +56,11 @@ row-gap: 30px; } +.columns.awards > div img { + display: block; + object-fit: contain; +} + .grey-version .columns > div { display: flex; justify-content: space-between; @@ -247,12 +252,29 @@ padding: 2em; } +.columns.bg-image a{ + color: white +} + +.columns.new-v2 a { + color: #006EFF!important; + font-size: 18px; + text-decoration: none; + font-weight: 600; + transition: all .2s cubic-bezier(.4,0,.2,1); +} + .columns-container.chat-options p.button-container a { background-color: transparent; border: 2px solid black; color: black } +.columns.new-v2 a:hover { + color: #0A53C5; + transform: translateX(10px); +} + .columns-container.chat-options p.button-container a:hover { background-color: black; color: white; @@ -272,6 +294,15 @@ width: auto; } +.columns.video-presentation .linked-image-container img { + width: 150px; + height: 44px; +} + +.columns.new-v2 > div > .columns-img-col img { + object-fit: contain; +} + .columns-container.chat-options table tr td:first-of-type img { height: 40px; } @@ -467,11 +498,6 @@ margin-bottom: 24px; } -.columns.awards > div img { - display: block; - object-fit: contain; -} - .columns.video-presentation .button-container { display: inline-block; padding-right: 13px; @@ -484,11 +510,6 @@ margin-bottom: 0; } -.columns.video-presentation .linked-image-container img { - width: 150px; - height: 44px; -} - .columns.video-presentation ul { padding-top: 1px; } @@ -544,6 +565,13 @@ max-height: 293px; } +.columns.carousel { + width: 100%; + margin-top: 50px; + overflow: hidden; + height: 437px; +} + .section.migration .columns.carousel { margin-top: 0; height: auto; @@ -553,13 +581,6 @@ top: -10px; } -.columns.carousel { - width: 100%; - margin-top: 50px; - overflow: hidden; - height: 437px; -} - .columns.carousel button { align-items: flex-start; width: 10px; @@ -594,10 +615,6 @@ align-items: center; } -.columns.new-v2 > div > .columns-img-col img { - object-fit: contain; -} - .section.white.columns-container .columns.awards > div img { display: block; height: 120px; @@ -767,10 +784,6 @@ padding: 10px 0 0; } -.columns.bg-image a{ - color: white -} - .columns.bg-image svg { filter: invert(1) grayscale(1) brightness(100); } @@ -827,19 +840,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { margin-bottom: 1em; } -.columns.new-v2 a { - color: #006EFF!important; - font-size: 18px; - text-decoration: none; - font-weight: 600; - transition: all .2s cubic-bezier(.4,0,.2,1); -} - -.columns.new-v2 a:hover { - color: #0A53C5; - transform: translateX(10px); -} - @media (max-width: 768px) { .columns img, .columns.new-v2 > div > .columns-img-col img { height: auto!important; From 7558f130eedc061531c851a37449237e3a1c3554 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:50:15 +0300 Subject: [PATCH 1078/1296] lint fix --- _src/blocks/columns/columns.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 40903ef5c..aa4cd5101 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -56,6 +56,14 @@ row-gap: 30px; } +.columns img { + width: 100%; +} + +.modal-container.get-bitdefender-familypack img { + height: auto; +} + .columns.awards > div img { display: block; object-fit: contain; @@ -171,6 +179,10 @@ font-weight: bold; } +.columns.with-box-shadow > div > div:last-child { + border: none; +} + .section.subtitle-blue .columns.benefits > div { gap: 45px; margin-bottom: 2em; @@ -183,14 +195,6 @@ line-height: 24px; } -.columns img { - width: 100%; -} - -.modal-container.get-bitdefender-familypack img { - height: auto; -} - .columns > div > .columns-img-col { order: 0; text-align: center; @@ -201,10 +205,6 @@ display: block; } -.columns.with-box-shadow > div > div:last-child { - border: none; -} - .creators .columns-container .columns > div:last-of-type { margin-bottom: 0; } From ac45ccb08bd1ee22a61b3000da88182bf9d786bd Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:53:28 +0300 Subject: [PATCH 1079/1296] lint fix --- _src/blocks/columns/columns.css | 47 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 24 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index a916edf50..e83596823 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,16 +2,6 @@ padding: 0 var(--body-padding); } -.columns-container.video-left video { - width: 100%; - border-radius: 10px; -} - -.columns-container.video-left .columns-right-col { - width: 100%; - flex: none; -} - .columns-container.chat-options p { font-size: var(--body-font-size-s) !important; } @@ -106,6 +96,10 @@ font-size: var(--heading-font-size-l); } +.creators .columns-container p.button-container { + text-align: center; +} + .grey-version .columns > div > div p.button-container { margin-bottom: auto; } @@ -234,10 +228,6 @@ display: block; } -.creators .columns-container p.button-container { - text-align: center; -} - .creators .columns-container a.button { height: auto; background: #E72325 0% 0% no-repeat padding-box; @@ -247,11 +237,6 @@ font-size: 14px; } - -.columns-container.chat-options .columns > div > div { - padding: 2em; -} - .columns.bg-image a{ color: white } @@ -264,17 +249,17 @@ transition: all .2s cubic-bezier(.4,0,.2,1); } +.columns.new-v2 a:hover { + color: #0A53C5; + transform: translateX(10px); +} + .columns-container.chat-options p.button-container a { background-color: transparent; border: 2px solid black; color: black } -.columns.new-v2 a:hover { - color: #0A53C5; - transform: translateX(10px); -} - .columns-container.chat-options p.button-container a:hover { background-color: black; color: white; @@ -289,6 +274,16 @@ justify-content: space-between; } +.columns-container.video-left video { + width: 100%; + border-radius: 10px; +} + +.columns-container.video-left .columns-right-col { + width: 100%; + flex: none; +} + .grey-version .columns > div > div img, .small-icons .columns > div > div img { height: 60px; width: auto; @@ -373,6 +368,10 @@ font-size: 1.25rem; } + .columns-container.chat-options .columns > div > div { + padding: 2em; + } + .section.subtitle-blue .columns.benefits > div { margin-bottom: 0; } From e5957535106485d5c8218d30e1376ae8a25c0889 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 09:56:03 +0300 Subject: [PATCH 1080/1296] fix lint --- _src/blocks/columns/columns.css | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index e83596823..4bf88b8a2 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -274,16 +274,6 @@ justify-content: space-between; } -.columns-container.video-left video { - width: 100%; - border-radius: 10px; -} - -.columns-container.video-left .columns-right-col { - width: 100%; - flex: none; -} - .grey-version .columns > div > div img, .small-icons .columns > div > div img { height: 60px; width: auto; @@ -452,7 +442,6 @@ } /* Benefits columns (icon, text, description) */ - .columns.benefits > p { margin-bottom: 0; margin-top: 0; @@ -471,6 +460,16 @@ font-weight: var(--font-weight-regular); } +.columns-container.video-left video { + width: 100%; + border-radius: 10px; +} + +.columns-container.video-left .columns-right-col { + width: 100%; + flex: none; +} + @media (min-width: 1271px) { .columns.benefits p { font-size: 18px; From 84f2d93c73ad5388b408ece886d634edadeb83c1 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 10:15:20 +0300 Subject: [PATCH 1081/1296] lint fix --- _src/blocks/columns/columns.css | 70 ++++++++++++++++----------------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 4bf88b8a2..dc71a06e3 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -6,6 +6,39 @@ font-size: var(--body-font-size-s) !important; } +.columns.benefits > p { + margin-bottom: 0; + margin-top: 0; +} + +.columns.benefits p { + font-size: var(--body-font-size-s); + line-height: 1.5; + letter-spacing: .006em; + font-weight: var(--font-weight-regular); +} + +.columns.awards > div > div > p { + margin: 0; + padding: 0 5px; +} + +.columns.new-v2 p { + font-size: 16px; + font-weight: 400; + line-height: 22px; +} + +.columns.video-presentation > div > div > p { + font-size: var(--body-font-size-s); +} + +.columns.carousel > div > div > p { + width: inherit; + padding: 0 50px; + text-align: center; +} + .columns-container.video-left .columns-right-col p { margin: 1.5em 0; } @@ -442,24 +475,12 @@ } /* Benefits columns (icon, text, description) */ -.columns.benefits > p { - margin-bottom: 0; - margin-top: 0; -} - .columns.benefits > .icon { width: unset; max-width: 66px; margin-bottom: 16px; } -.columns.benefits p { - font-size: var(--body-font-size-s); - line-height: 1.5; - letter-spacing: .006em; - font-weight: var(--font-weight-regular); -} - .columns-container.video-left video { width: 100%; border-radius: 10px; @@ -477,31 +498,6 @@ } /* paragraph with image */ -.columns.new-v2 p { - font-size: 16px; - font-weight: 400; - line-height: 22px; -} - -.columns.awards > div > div > p { - margin: 0; - padding: 0 5px; -} - -.columns.video-presentation > div > div > p { - font-size: var(--body-font-size-s); -} - -.columns.carousel > div > div > p { - width: inherit; - padding: 0 50px; - text-align: center; -} - -.columns.awards > div > div > p:not(:last-of-type) { - margin-bottom: 8px; -} - .columns.awards > div > div > p:first-of-type { margin-bottom: 24px; } From 11fab755464b3c8be4f971ae0b9cd89af4d8cd65 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 10 Sep 2024 10:19:54 +0300 Subject: [PATCH 1082/1296] fix lint --- _src/blocks/columns/columns.css | 36 ++++++++++++++++----------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index dc71a06e3..c42e13436 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -18,17 +18,17 @@ font-weight: var(--font-weight-regular); } -.columns.awards > div > div > p { - margin: 0; - padding: 0 5px; -} - .columns.new-v2 p { font-size: 16px; font-weight: 400; line-height: 22px; } +.columns.awards > div > div > p { + margin: 0; + padding: 0 5px; +} + .columns.video-presentation > div > div > p { font-size: var(--body-font-size-s); } @@ -215,6 +215,10 @@ margin-bottom: 2em; } +.columns.awards > div > div > p:first-of-type { + margin-bottom: 24px; +} + .section.subtitle-blue .columns.benefits p { font-size: var(--body-font-size-s); font-weight: 400; @@ -498,10 +502,6 @@ } /* paragraph with image */ -.columns.awards > div > div > p:first-of-type { - margin-bottom: 24px; -} - .columns.video-presentation .button-container { display: inline-block; padding-right: 13px; @@ -581,6 +581,15 @@ height: auto; } +.carousel-buttons { + position: relative; + top: 30px; + display: flex; + justify-content: center; + align-items: center; + transition: all .4s ease-in-out; +} + .section.migration .columns.carousel .carousel-buttons { top: -10px; } @@ -601,15 +610,6 @@ background-color: var(--link-color); } -.carousel-buttons { - position: relative; - top: 30px; - display: flex; - justify-content: center; - align-items: center; - transition: all .4s ease-in-out; -} - .section.wide.light-sky-blue.columns-container { height: auto; } From 0d1e1da87a56a118473360a006b9419a08a78c01 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 10 Sep 2024 10:59:39 +0300 Subject: [PATCH 1083/1296] fix: blog insert image to always fill the container --- _src/blocks/blog-insert/blog-insert.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_src/blocks/blog-insert/blog-insert.css b/_src/blocks/blog-insert/blog-insert.css index 15210a432..689f9d1d1 100644 --- a/_src/blocks/blog-insert/blog-insert.css +++ b/_src/blocks/blog-insert/blog-insert.css @@ -1,3 +1,8 @@ .blog-insert-container { text-align: center; +} + +.blog-insert-container img { + width: 100%; + height: auto; } \ No newline at end of file From 07080cf140935e32548015db22e5d9430b3cfb3a Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 10 Sep 2024 11:00:13 +0300 Subject: [PATCH 1084/1296] feat: update the prod host --- tools/sidekick/config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/sidekick/config.json b/tools/sidekick/config.json index e6b790da0..2425a940b 100644 --- a/tools/sidekick/config.json +++ b/tools/sidekick/config.json @@ -1,6 +1,6 @@ { "project": "Bitdefender", - "host": "main--www-websites--bitdefender.hlx.live", + "host": "www.bitdefender.com", "plugins": [ { "id": "library", From 1e4f375321ab32ec4172c00f092a32bfdf8c9a20 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 10 Sep 2024 12:01:33 +0300 Subject: [PATCH 1085/1296] aligned cards --- _src/blocks/products/products.js | 49 ++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index cafa02b44..2f68725d0 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -477,4 +477,53 @@ export default function decorate(block) { } } }); + const matchHeights = (targetNode, selector) => { + const resetHeights = () => { + const elements = targetNode.querySelectorAll(selector); + elements.forEach((element) => { + element.style.minHeight = ''; + }); + }; + + const adjustHeights = () => { + if (window.innerWidth >= 768) { + resetHeights(); + const elements = targetNode.querySelectorAll(selector); + const elementsHeight = Array.from(elements).map((element) => element.offsetHeight); + const maxHeight = Math.max(...elementsHeight); + + elements.forEach((element) => { + element.style.minHeight = `${maxHeight}px`; + }); + } else { + resetHeights(); + } + }; + + const matchHeightsCallback = (mutationsList) => { + Array.from(mutationsList).forEach((mutation) => { + if (mutation.type === 'childList') { + adjustHeights(); + } + }); + }; + + const observer = new MutationObserver(matchHeightsCallback); + + if (targetNode) { + observer.observe(targetNode, { childList: true, subtree: true }); + } + + window.addEventListener('resize', () => { + adjustHeights(); + }); + }; + + const targetNodes = document.querySelectorAll('.products'); + targetNodes.forEach(targetNode => { + matchHeights(targetNode, 'h4'); + matchHeights(targetNode, 'h3'); + matchHeights(targetNode, 'p:nth-of-type(2)'); + matchHeights(targetNode, 'p:nth-of-type(3)'); + }) } From b2057ef1450bd07e626936fad81d640b002be4df Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 10 Sep 2024 13:00:22 +0300 Subject: [PATCH 1086/1296] chore: Update CSS margin in new-prod-boxes.css --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 2efb459c8..ae3d69afa 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -523,7 +523,7 @@ .new-prod-boxes-container .icon { width: 12px; height: 14px; - margin: 0 5px 0 0; + margin: 0 0 0 0; } .new-prod-boxes-container .icon svg { @@ -548,8 +548,11 @@ .new-prod-boxes-container .blue-pill .icon { position: relative; - top: 1px; - margin-left: 1px; + top: 1.5px; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; } .new-prod-boxes-container .blue-pill svg { From 85f39532449dbb2ff112171c8540c03fcad684f2 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 10 Sep 2024 15:04:15 +0300 Subject: [PATCH 1087/1296] aligned featured cards --- _src/blocks/products/products.js | 33 +++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 2f68725d0..644945586 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -520,10 +520,41 @@ export default function decorate(block) { }; const targetNodes = document.querySelectorAll('.products'); + let hasFeaturedCard = false; + let neededHeight ='28px'; + let counter = 0; + let index; targetNodes.forEach(targetNode => { + console.log(targetNode); + let childrenArray= [...targetNode.children]; + childrenArray.forEach(child=>{ + if(child.classList.contains('featured')){ + hasFeaturedCard = true; + index = counter; + }; + + }); + counter++; + }); + counter=0; + targetNodes.forEach(targetNode => { + if(hasFeaturedCard && counter===index){ + const cards=targetNode.querySelectorAll('.product-card'); + cards.forEach(card => { + if (!card.classList.contains('featured')){ + let space = card.querySelector('h3'); + space= space.nextElementSibling; + let emptyDiv = document.createElement('div'); + space.insertAdjacentElement('afterend', emptyDiv); + emptyDiv.style.minHeight= neededHeight; + } + }); + } + counter++; matchHeights(targetNode, 'h4'); matchHeights(targetNode, 'h3'); matchHeights(targetNode, 'p:nth-of-type(2)'); matchHeights(targetNode, 'p:nth-of-type(3)'); - }) + }); + } From 23e0e0d44f55159cd14da36bf687152091c35a0a Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 10 Sep 2024 15:47:19 +0300 Subject: [PATCH 1088/1296] refactor: Improve product card alignment and height matching --- _src/blocks/products/products.js | 55 ++++++++++++-------------------- 1 file changed, 21 insertions(+), 34 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 644945586..f2025690d 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -519,42 +519,29 @@ export default function decorate(block) { }); }; - const targetNodes = document.querySelectorAll('.products'); - let hasFeaturedCard = false; - let neededHeight ='28px'; - let counter = 0; - let index; - targetNodes.forEach(targetNode => { - console.log(targetNode); - let childrenArray= [...targetNode.children]; - childrenArray.forEach(child=>{ - if(child.classList.contains('featured')){ - hasFeaturedCard = true; - index = counter; - }; - - }); - counter++; - }); - counter=0; - targetNodes.forEach(targetNode => { - if(hasFeaturedCard && counter===index){ - const cards=targetNode.querySelectorAll('.product-card'); - cards.forEach(card => { - if (!card.classList.contains('featured')){ - let space = card.querySelector('h3'); - space= space.nextElementSibling; - let emptyDiv = document.createElement('div'); - space.insertAdjacentElement('afterend', emptyDiv); - emptyDiv.style.minHeight= neededHeight; + const cards = block.querySelectorAll('.product-card'); + const featuredCard = block.querySelector('.product-card.featured'); + cards.forEach((card) => { + if (!card.classList.contains('featured')) { + console.log(typeof cards); + // If there is no featured card, do nothing + if (!featuredCard) { + return; } - }); + const neededHeight = '28px'; // featuredCard.querySelector('.featured').offsetHeight; + + let space = card.querySelector('h3'); + space = space.nextElementSibling; + const emptyDiv = document.createElement('div'); + space.insertAdjacentElement('afterend', emptyDiv); + emptyDiv.style.minHeight = neededHeight; + emptyDiv.style.marginTop = '10px'; + emptyDiv.style.marginBottom = '15px'; + matchHeights(card, 'h3'); + matchHeights(card, 'p:nth-of-type(2)'); + matchHeights(card, 'p:nth-of-type(3)'); } - counter++; - matchHeights(targetNode, 'h4'); - matchHeights(targetNode, 'h3'); - matchHeights(targetNode, 'p:nth-of-type(2)'); - matchHeights(targetNode, 'p:nth-of-type(3)'); }); + matchHeights(block, 'h4'); } From 63ad9481f57992ef23c63a61e01d37e096e07ea3 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 10 Sep 2024 16:34:07 +0300 Subject: [PATCH 1089/1296] refactor: Improve product card alignment and height matching --- _src/blocks/products/products.js | 57 ++++---------------------------- 1 file changed, 7 insertions(+), 50 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index f2025690d..2a34fa5c5 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -4,6 +4,7 @@ import { fetchProduct, createTag, generateProductBuyLink, + matchHeights, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; @@ -477,71 +478,27 @@ export default function decorate(block) { } } }); - const matchHeights = (targetNode, selector) => { - const resetHeights = () => { - const elements = targetNode.querySelectorAll(selector); - elements.forEach((element) => { - element.style.minHeight = ''; - }); - }; - - const adjustHeights = () => { - if (window.innerWidth >= 768) { - resetHeights(); - const elements = targetNode.querySelectorAll(selector); - const elementsHeight = Array.from(elements).map((element) => element.offsetHeight); - const maxHeight = Math.max(...elementsHeight); - - elements.forEach((element) => { - element.style.minHeight = `${maxHeight}px`; - }); - } else { - resetHeights(); - } - }; - - const matchHeightsCallback = (mutationsList) => { - Array.from(mutationsList).forEach((mutation) => { - if (mutation.type === 'childList') { - adjustHeights(); - } - }); - }; - - const observer = new MutationObserver(matchHeightsCallback); - - if (targetNode) { - observer.observe(targetNode, { childList: true, subtree: true }); - } - - window.addEventListener('resize', () => { - adjustHeights(); - }); - }; const cards = block.querySelectorAll('.product-card'); const featuredCard = block.querySelector('.product-card.featured'); cards.forEach((card) => { if (!card.classList.contains('featured')) { - console.log(typeof cards); // If there is no featured card, do nothing if (!featuredCard) { return; } - const neededHeight = '28px'; // featuredCard.querySelector('.featured').offsetHeight; - + const neededHeight = '2rem'; let space = card.querySelector('h3'); space = space.nextElementSibling; const emptyDiv = document.createElement('div'); space.insertAdjacentElement('afterend', emptyDiv); + emptyDiv.classList.add('featured'); + emptyDiv.style.visibility = 'hidden'; emptyDiv.style.minHeight = neededHeight; - emptyDiv.style.marginTop = '10px'; - emptyDiv.style.marginBottom = '15px'; - matchHeights(card, 'h3'); - matchHeights(card, 'p:nth-of-type(2)'); - matchHeights(card, 'p:nth-of-type(3)'); } }); - + matchHeights(block, 'h3'); + matchHeights(block, 'p:nth-of-type(2)'); + matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); } From 99ff160e6d9051cf50e4a0bd72e8be8ca289434c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 11 Sep 2024 11:31:54 +0300 Subject: [PATCH 1090/1296] mega menu upate --- _src/scripts/vendor/mega-menu/mega-menu.css | 5024 ++++++++++++++++++- _src/scripts/vendor/mega-menu/mega-menu.js | 61 +- 2 files changed, 5044 insertions(+), 41 deletions(-) diff --git a/_src/scripts/vendor/mega-menu/mega-menu.css b/_src/scripts/vendor/mega-menu/mega-menu.css index 35dc1711e..4e29c64de 100644 --- a/_src/scripts/vendor/mega-menu/mega-menu.css +++ b/_src/scripts/vendor/mega-menu/mega-menu.css @@ -1 +1,5023 @@ -*{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;margin:0;padding:0}.we-align-items-start{align-items:flex-start!important}.we-align-items-center{align-items:center!important}.we-align-items-end{align-items:flex-end!important}.we-align-self-start{align-self:flex-start!important}.we-align-self-center{align-self:center!important}.we-align-self-end{align-self:flex-end!important}.we-justify-content-start{justify-content:flex-start!important}.we-justify-content-center{justify-content:center!important}.we-justify-content-end{justify-content:flex-end!important}.we-justify-content-left{justify-content:left!important}.we-align-right{text-align:right!important}.we-align-left{text-align:left!important}.we-align-center{text-align:center!important}.we-align-justify{text-align:justify!important}.we-text-uppercase{text-transform:uppercase!important}.we-text-lowercase{text-transform:lowercase!important}.we-row{display:flex}.we-flex-wrap{flex-wrap:wrap}.we-row-inline{font-size:0}.we-row-inline .we-col,.we-row-inline .we-col-five,.we-row-inline .we-col-four,.we-row-inline .we-col-seven,.we-row-inline .we-col-six,.we-row-inline .we-col-three,.we-row-inline .we-col-two{display:inline-block;vertical-align:top}.mx-auto{margin-left:auto!important;margin-right:auto!important}.d-block{display:block!important}@media(max-width:1399px){.d-xl-block{display:block!important}}@media(max-width:1270px){.d-lg-block{display:block!important}}@media(max-width:991px){.d-md-block{display:block!important}}@media(max-width:767px){.d-sm-block{display:block!important}}@media(max-width:595px){.d-xs-block{display:block!important}}.d-inline-block{display:inline-block!important}@media(max-width:1399px){.d-xl-inline-block{display:inline-block!important}}@media(max-width:1270px){.d-lg-inline-block{display:inline-block!important}}@media(max-width:991px){.d-md-inline-block{display:inline-block!important}}@media(max-width:767px){.d-sm-inline-block{display:inline-block!important}}@media(max-width:595px){.d-xs-inline-block{display:inline-block!important}}.d-inline{display:inline!important}@media(max-width:1399px){.d-xl-inline{display:inline!important}}@media(max-width:1270px){.d-lg-inline{display:inline!important}}@media(max-width:991px){.d-md-inline{display:inline!important}}@media(max-width:767px){.d-sm-inline{display:inline!important}}@media(max-width:595px){.d-xs-inline{display:inline!important}}.d-none{display:none!important}@media(max-width:1399px){.d-xl-none{display:none!important}}@media(max-width:1270px){.d-lg-none{display:none!important}}@media(max-width:991px){.d-md-none{display:none!important}}@media(max-width:767px){.d-sm-none{display:none!important}}@media(max-width:595px){.d-xs-none{display:none!important}}.d-flex{display:flex!important}@media(max-width:1399px){.d-xl-flex{display:flex!important}}@media(max-width:767px){.d-sm-flex{display:flex!important}}@media(max-width:595px){.d-xs-flex{display:flex!important}}a.we-btn-black,button.we-btn-black{align-items:center;background-color:#000;border:2px solid #000;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-black,button.we-btn-black{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-black span,button.we-btn-black span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-black span:after,button.we-btn-black span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-black span:after,button.we-btn-black span:after{top:6px}}a.we-btn-black:hover span,button.we-btn-black:hover span{transform:translate3d(-11px,0,0)}a.we-btn-black:hover span:after,button.we-btn-black:hover span:after{opacity:1;right:-22px}a.we-btn-red,button.we-btn-red{align-items:center;background-color:#eb0000;border:2px solid #eb0000;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-red,button.we-btn-red{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-red span,button.we-btn-red span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-red span:after,button.we-btn-red span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-red span:after,button.we-btn-red span:after{top:6px}}a.we-btn-red:hover span,button.we-btn-red:hover span{transform:translate3d(-11px,0,0)}a.we-btn-red:hover span:after,button.we-btn-red:hover span:after{opacity:1;right:-22px}a.we-btn-red:hover,button.we-btn-red:hover{background-color:#d80000;border:2px solid #d80000}a.we-btn-green,button.we-btn-green{align-items:center;background-color:#51a71d;border:2px solid #51a71d;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-green,button.we-btn-green{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-green span,button.we-btn-green span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-green span:after,button.we-btn-green span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-green span:after,button.we-btn-green span:after{top:6px}}a.we-btn-green:hover span,button.we-btn-green:hover span{transform:translate3d(-11px,0,0)}a.we-btn-green:hover span:after,button.we-btn-green:hover span:after{opacity:1;right:-22px}a.we-btn-green:hover,button.we-btn-green:hover{background-color:#469c12;border:2px solid #469c12}a.we-btn-blue,button.we-btn-blue{align-items:center;background-color:#006eff;border:2px solid #006eff;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-blue,button.we-btn-blue{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-blue span,button.we-btn-blue span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-blue span:after,button.we-btn-blue span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-blue span:after,button.we-btn-blue span:after{top:6px}}a.we-btn-blue:hover span,button.we-btn-blue:hover span{transform:translate3d(-11px,0,0)}a.we-btn-blue:hover span:after,button.we-btn-blue:hover span:after{opacity:1;right:-22px}a.we-btn-blue:hover,button.we-btn-blue:hover{background-color:#0080ff;border:2px solid #0080ff}a.we-btn-blue span,button.we-btn-blue span{pointer-events:none}a.we-app-store,button.we-app-store{align-items:center;background-color:transparent;border:0;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;overflow:hidden;padding:0;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1);vertical-align:top}@media(max-width:767px){a.we-app-store,button.we-app-store{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-app-store span,button.we-app-store span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-app-store span:after,button.we-app-store span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-app-store span:after,button.we-app-store span:after{top:6px}}a.we-app-store:hover span,button.we-app-store:hover span{transform:translate3d(-11px,0,0)}a.we-app-store:hover span:after,button.we-app-store:hover span:after{opacity:1;right:-22px}@media(max-width:767px){a.we-app-store,button.we-app-store{width:123px}}a.we-app-store img,button.we-app-store img{height:100%;left:0;right:auto!important;top:0;width:100%}a.we-app-store:hover,button.we-app-store:hover{background-color:transparent;border:0}a.we-btn-white,button.we-btn-white{align-items:center;background-color:#fff;border:2px solid #fff;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-white,button.we-btn-white{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-white span,button.we-btn-white span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-white span:after,button.we-btn-white span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-white span:after,button.we-btn-white span:after{top:6px}}a.we-btn-white:hover span,button.we-btn-white:hover span{transform:translate3d(-11px,0,0)}a.we-btn-white:hover span:after,button.we-btn-white:hover span:after{opacity:1;right:-22px}a.we-btn-white span,button.we-btn-white span{color:#000}a.we-btn-white span:after,button.we-btn-white span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) no-repeat;background-size:cover}a.we-btn-transparent,button.we-btn-transparent{align-items:center;background-color:transparent;border:2px solid #fff;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-transparent,button.we-btn-transparent{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-transparent span,button.we-btn-transparent span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-transparent span:after,button.we-btn-transparent span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-transparent span:after,button.we-btn-transparent span:after{top:6px}}a.we-btn-transparent:hover span,button.we-btn-transparent:hover span{transform:translate3d(-11px,0,0)}a.we-btn-transparent:hover span:after,button.we-btn-transparent:hover span:after{opacity:1;right:-22px}a.we-btn-transparent span:after,button.we-btn-transparent span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) no-repeat;background-size:cover}a.we-btn-transparent:hover,button.we-btn-transparent:hover{background-color:#fff}a.we-btn-transparent:hover span,button.we-btn-transparent:hover span{color:#000}a.we-btn-black-border,button.we-btn-black-border{align-items:center;background-color:transparent;border:2px solid #000;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-black-border,button.we-btn-black-border{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-black-border span,button.we-btn-black-border span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-black-border span:after,button.we-btn-black-border span:after{display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-black-border span:after,button.we-btn-black-border span:after{top:6px}}a.we-btn-black-border:hover span,button.we-btn-black-border:hover span{transform:translate3d(-11px,0,0)}a.we-btn-black-border:hover span:after,button.we-btn-black-border:hover span:after{opacity:1;right:-22px}a.we-btn-black-border span,button.we-btn-black-border span{color:#000}a.we-btn-black-border span:after,button.we-btn-black-border span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:""}a.we-btn-black-border:hover,button.we-btn-black-border:hover{background-color:#000}a.we-btn-black-border:hover span,button.we-btn-black-border:hover span{color:#fff}.button.we-btn-search,a.we-btn-search,button.we-btn-search{align-items:center;background-color:#fff;border:2px solid #fff;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;height:55px;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:5px 31px 8px 67px;position:relative;text-align:center;text-align:left;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){.button.we-btn-search,a.we-btn-search,button.we-btn-search{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}.button.we-btn-search span,a.we-btn-search span,button.we-btn-search span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}.button.we-btn-search span:after,a.we-btn-search span:after,button.we-btn-search span:after{display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){.button.we-btn-search span:after,a.we-btn-search span:after,button.we-btn-search span:after{top:6px}}.button.we-btn-search:hover span,a.we-btn-search:hover span,button.we-btn-search:hover span{transform:translate3d(-11px,0,0)}.button.we-btn-search:hover span:after,a.we-btn-search:hover span:after,button.we-btn-search:hover span:after{opacity:1;right:-22px}.button.we-btn-search:before,a.we-btn-search:before,button.we-btn-search:before{background:url(https://www.bitdefender.com/content/dam/bitdefender/search-icon.svg) no-repeat;background-size:cover;content:"";height:30px;left:21px;position:absolute;top:10px;width:30px}@media(max-width:595px){.button.we-btn-search:before,a.we-btn-search:before,button.we-btn-search:before{top:calc(50% - 16px)}}.button.we-btn-search span,a.we-btn-search span,button.we-btn-search span{color:#000}.button.we-btn-search span:after,a.we-btn-search span:after,button.we-btn-search span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:""}.button.we-btn-search small,a.we-btn-search small,button.we-btn-search small{display:block;font-weight:400;letter-spacing:.022em}.button.we-btn-search:hover,a.we-btn-search:hover,button.we-btn-search:hover{background-color:#fff;height:55px;padding:5px 31px 8px 67px;text-align:left}.button.we-btn-search:hover:before,a.we-btn-search:hover:before,button.we-btn-search:hover:before{background:url(https://www.bitdefender.com/content/dam/bitdefender/search-icon.svg) no-repeat;background-size:cover;content:"";height:30px;left:21px;position:absolute;top:10px;width:30px}.button.we-btn-search:hover span,a.we-btn-search:hover span,button.we-btn-search:hover span{color:#000}.button.we-btn-search:hover span:after,a.we-btn-search:hover span:after,button.we-btn-search:hover span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:""}.button.we-btn-search:hover small,a.we-btn-search:hover small,button.we-btn-search:hover small{display:block;font-weight:400;letter-spacing:.022em}.button.we-btn-search:hover:hover,a.we-btn-search:hover:hover,button.we-btn-search:hover:hover{background-color:#fff;padding:5px 31px 8px 67px}.button.we-btn-search:hover:hover span,a.we-btn-search:hover:hover span,button.we-btn-search:hover:hover span{color:#000}.button.we-btn-search:hover:hover span:after,a.we-btn-search:hover:hover span:after,button.we-btn-search:hover:hover span:after{display:none}a.we-btn-blue-border,button.we-btn-blue-border{align-items:center;background-color:transparent;border:2px solid #006eff;border-radius:8px;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){a.we-btn-blue-border,button.we-btn-blue-border{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}a.we-btn-blue-border span,button.we-btn-blue-border span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}a.we-btn-blue-border span:after,button.we-btn-blue-border span:after{display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){a.we-btn-blue-border span:after,button.we-btn-blue-border span:after{top:6px}}a.we-btn-blue-border:hover span,button.we-btn-blue-border:hover span{transform:translate3d(-11px,0,0)}a.we-btn-blue-border:hover span:after,button.we-btn-blue-border:hover span:after{opacity:1;right:-22px}a.we-btn-blue-border span,button.we-btn-blue-border span{color:#006eff}a.we-btn-blue-border span:after,button.we-btn-blue-border span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:""}a.we-btn-blue-border:hover,button.we-btn-blue-border:hover{background-color:#006eff}a.we-btn-blue-border:hover span,button.we-btn-blue-border:hover span{color:#fff}.we-link-with-white{color:#fff;display:inline-block;font-size:16px;font-weight:500;line-height:1.3;position:relative;z-index:1}@media(max-width:767px){.we-link-with-white{font-size:16px}}.we-link-with-white:first-letter{text-transform:uppercase}.we-link-with-white span{position:relative}.we-link-with-white span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;margin-left:5px;position:relative;top:0;transform:translateX(0);transition:all .2s cubic-bezier(.4,0,.2,1);width:15px}.we-link-with-white:hover span:after{transform:translateX(4px)}.we-link-with-blue{color:#005ed9;cursor:pinter;display:inline-block;font-size:16px;font-weight:500;line-height:1.3;position:relative;z-index:1}@media(max-width:767px){.we-link-with-blue{font-size:16px}}.we-link-with-blue:first-letter{text-transform:uppercase}.we-link-with-blue span{position:relative}.we-link-with-blue span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;margin-left:5px;position:relative;top:0;transform:translateX(0);transition:all .2s cubic-bezier(.4,0,.2,1);width:15px}.we-link-with-blue:hover span:after{transform:translateX(4px)}.we-link-with-blue span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) no-repeat}.we-link-with-blue:hover{color:#00439c}.we-link-with-blue:hover span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/dark-blue-arrow.svg) no-repeat}.we-link-with-blue.download{padding-left:20px}.we-link-with-blue.download:before{background:url(https://www.bitdefender.com/content/dam/bitdefender/download.svg) no-repeat;content:"";display:inline-block;height:14px;left:-20px;position:relative;width:16px}.we-link-with-blue.download span:after{display:none}.we-link-with-blue.see-more span:after{background:none;border-bottom:2px solid #006eff;border-right:2px solid #006eff;height:7px;top:-2px;transform:rotate(45deg);width:7px}.we-link-with-blue.see-more.close-it span:after{top:3px;transform:rotate(-135deg)}.we-link-download{color:#006eff;margin-right:13px;padding-left:8px;position:relative}.we-link-download:hover{opacity:.8}.we-link-download:before{background:url(https://www.bitdefender.com/content/dam/bitdefender/download_icon.svg) no-repeat;content:"";display:inline-block;height:14px;left:-8px;position:relative;width:16px}.we-link-user-guide{color:#006eff;margin-right:13px;padding-left:8px;position:relative}.we-link-user-guide:hover{opacity:.8}.we-link-user-guide:before{background:url(https://www.bitdefender.com/content/dam/bitdefender/mannual_icon.svg) no-repeat;content:"";display:inline-block;height:16px;left:-8px;position:relative;width:16px}html{scroll-behavior:smooth}.await-loader{animation-duration:3s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background:linear-gradient(90deg,#eee 8%,#bbb 18%,#eee 33%);background-size:800px 104px;cursor:default;min-height:4.3rem;opacity:.4;position:relative}.await-loader *{opacity:0}.global-display-none{display:none!important}.global-opacity-zero{opacity:0!important}.global-visibility-hidden{visibility:hidden!important}.product-not-available{font-size:.875rem!important;line-height:1.25rem!important;text-align:inherit!important}body{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;background-color:#fff;box-sizing:border-box;margin:0 auto;max-width:1920px;position:relative}body.service-overlay-open{overflow-y:hidden}body main.container,body>section{padding:0!important}li,ol,ul{font-family:roboto,sans-serif;margin:0;padding:0}html{background-color:#fff}ol,ul{padding-left:15px}li{font-size:16px;line-height:1.63;margin-bottom:14px;padding-left:22px}section ul{text-align:left}section ul li{font-family:roboto,sans-serif;font-size:18px;font-stretch:normal;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1.67;margin:15px 0;padding-left:20px;position:relative}@media(min-width:768px)and (max-width:991px){section ul li{font-size:16px}}@media(max-width:767px){section ul li{font-size:16px}}section ul li:before{content:"";height:8px;left:0;position:absolute;top:11px;width:8px}@media(max-width:767px){section ul li:before{top:8px}}a{cursor:pointer;font-family:roboto,sans-serif}a,a:hover{outline:0;text-decoration:none}audio,button,fieldset,figure,footer,form,h1,h3,h4,h5,h6,header,label,menu,nav,p,section,table,tbody,td,th,tr,video{border:0;margin:0}img{border:0;height:auto;max-width:100%;vertical-align:top;width:100%}.we-container{margin:0 auto;max-width:1332px;padding:0 var(--section-large-desktop-padding);position:relative;width:100%}@media(max-width:1599px){.we-container{max-width:1300px;padding:0 50px}}@media(max-width:991px){.we-container{padding:0 20px}}.we-container:after{clear:both;content:"";display:block}.we-container-fluid{max-width:100%}.section,footer,section{position:relative;width:100%}.section,section{overflow:hidden;padding:120px 0}@media(max-width:1399px){.section,section{padding:96px 0}}@media(max-width:1199px){.section,section{padding:96px 0}}@media(min-width:768px)and (max-width:991px){.section,section{padding:64px 0}}@media(max-width:767px){.section,section{padding:64px 0}.section:after,section:after{display:none}}.default-padding{padding:120px 0}@media(max-width:1399px){.default-padding{padding:96px 0}}@media(max-width:1199px){.default-padding{padding:96px 0}}@media(max-width:991px){.default-padding{padding:64px 0}}@media(max-width:767px){.default-padding{padding:64px 0}}.margin-top-103{margin-top:103px}@media(max-width:991px){.margin-top-103{margin-top:63px}}.padding-top-extra-large{padding-top:150px}@media(max-width:1199px){.padding-top-extra-large{padding-top:96px}}@media(max-width:991px){.padding-top-extra-large{padding-top:64px}}@media(max-width:767px){.padding-top-extra-large{padding-top:64px}}.padding-medium{padding:96px 0}@media(max-width:1199px){.padding-medium{padding:96px 0}}@media(max-width:991px){.padding-medium{padding:64px 0}}@media(max-width:767px){.padding-medium{padding:64px 0}}.padding-medium-top{padding-top:96px}@media(max-width:1199px){.padding-medium-top{padding-top:96px}}@media(max-width:991px){.padding-medium-top{padding-top:64px}}@media(max-width:767px){.padding-medium-top{padding-top:64px}}.padding-medium-bottom{padding-bottom:96px}@media(max-width:1199px){.padding-medium-bottom{padding-bottom:96px}}@media(max-width:991px){.padding-medium-bottom{padding-bottom:64px}}@media(max-width:767px){.padding-medium-bottom{padding-bottom:64px}}.padding-generic-container-quote-with-logo{padding:0 0 47px}@media(max-width:1199px){.padding-generic-container-quote-with-logo{padding:29px 0 47px}}@media(max-width:991px){.padding-generic-container-quote-with-logo{padding:24px 0 47px}}@media(max-width:767px){.padding-generic-container-quote-with-logo{padding:30px 0}}.padding-large{padding:120px 0}@media(max-width:1199px){.padding-large{padding:96px 0}}@media(max-width:991px){.padding-large{padding:64px 0}}@media(max-width:767px){.padding-large{padding:64px 0}}.padding-large-top{padding-top:120px}@media(max-width:1199px){.padding-large-top{padding-top:96px}}@media(max-width:991px){.padding-large-top{padding-top:64px}}@media(max-width:767px){.padding-large-top{padding-top:64px}}.padding-large-bottom{padding-bottom:120px}@media(max-width:1199px){.padding-large-bottom{padding-bottom:96px}}@media(max-width:991px){.padding-large-bottom{padding-bottom:64px}}@media(max-width:767px){.padding-large-bottom{padding-bottom:64px}}.padding-small{padding:64px 0}.overflow-padding{margin-top:-150px;padding:0}.padding-60{padding:40px 0}@media(max-width:991px){.padding-60{padding:64px 0}}@media(min-width:992px){.padding-small-top{padding-top:64px}}@media(max-width:991px){.padding-small-top{padding-top:64px}}@media(min-width:992px){.padding-small-bottom{padding-bottom:64px}}@media(max-width:991px){.padding-small-bottom{padding-bottom:64px!important}}@media(min-width:992px){.padding-extra-small-top{padding-top:25px}}@media(max-width:991px){.padding-extra-small-top{padding-top:64px}}@media(min-width:992px){.padding-extra-small-bottom{padding-bottom:25px}}@media(max-width:991px){.padding-extra-small-bottom{padding-bottom:64px}}.margin-large{margin:120px 0}@media(max-width:1199px){.margin-large{margin:96px 0}}@media(max-width:991px){.margin-large{margin:64px 0}}@media(max-width:767px){.margin-large{margin:64px 0}}@media(min-width:1332px){.margin-large-top{margin-top:120px}}@media(max-width:1199px){.margin-large-top{marign-top:96px}}@media(max-width:991px){.margin-large-top{margin-top:64px}}@media(min-width:1332px){.margin-large-bottom{margin-bottom:120px}}@media(max-width:1199px){.margin-large-bottom{marign-bottom:96px}}@media(max-width:991px){.margin-large-bottom{margin-bottom:64px}}@media(min-width:1332px){.margin-medium{margin:96px 0}.margin-medium-top{margin-top:96px}.margin-medium-bottom{margin-bottom:96px}}@media(min-width:992px){.margin-small{margin:64px 0}.margin-small-top{margin-top:64px}.margin-small-bottom{margin-bottom:64px}}.no-margin-top{margin-top:0!important}.no-margin-bottom{margin-bottom:0!important}.we-zindex-dropdown{z-index:1000}.we-zindex-sticky{z-index:1020}.we-zindex-fixed{z-index:1030}.we-zindex-modal-backdrop{z-index:1040}.we-zindex-modal{z-index:1050}.we-zindex-popover{z-index:1060}.we-zindex-tooltip{z-index:1070}input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 30px #fff}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}.v-middle-wrapper{height:100%;left:0;position:absolute;top:0;width:100%}.v-middle-inner{display:table;height:100%;width:100%}.v-middle{display:table-cell;vertical-align:middle}.col-wrapper:after,.column-wrapper:after,.container:after,.content-wrapper:after,.grid-wrapper:after,.two-third:after,.v-middle-wrapper:after,.wrapper:after,header:after{clear:both;content:"";display:block}.we-col-two{position:relative;width:50%}.we-col{width:100%}.we-col-three{width:33.33%}@media(max-width:767px){.we-col-three{width:100%}}.we-col-four{width:25%}@media(max-width:767px){.we-col-four{width:100%}}.we-col-five{width:20%}@media(max-width:767px){.we-col-five{width:100%}}.we-col-six{width:16.66%}@media(max-width:767px){.we-col-six{width:100%}}.we-col-seven{width:66.66%}@media(max-width:767px){.we-col-seven{width:100%}}h1{color:#000;font-family:roboto,sans-serif;font-size:56px;font-weight:700;line-height:1.21;margin-bottom:25px}@media(min-width:1200px)and (max-width:1599px){h1{font-size:50px;letter-spacing:-.013em}}@media(min-width:992px)and (max-width:1199px){h1{font-size:50px}}@media(min-width:768px)and (max-width:991px){h1{font-size:42px}}@media(min-width:596px)and (max-width:767px){h1{font-size:38px}}@media(min-width:481px)and (max-width:595px){h1{font-size:34px}}@media(max-width:480px){h1{font-size:32px}}h1 span{color:#fff;display:inline-block;font-size:56px;font-weight:700;line-height:1.21}@media(max-width:1399px){h1 span{font-size:50px}}@media(max-width:1199px){h1 span{font-size:50px}}@media(max-width:991px){h1 span{font-size:42px}}@media(max-width:767px){h1 span{font-size:38px}}@media(max-width:595px){h1 span{font-size:34px}}h2{color:#000;font-family:roboto,sans-serif;font-size:40px;font-weight:500;line-height:1.2;margin-bottom:22px}@media(max-width:1399px){h2{font-size:38px}}@media(max-width:1199px){h2{font-size:38px}}@media(max-width:991px){h2{font-size:34px;margin-bottom:15px}}@media(max-width:767px){h2{font-size:32px}}h2 span{color:#fff;display:inline-block;font-size:40px;font-weight:500;line-height:1.2}@media(max-width:1399px){h2 span{font-size:38px}}@media(max-width:1199px){h2 span{font-size:38px}}@media(max-width:991px){h2 span{font-size:34px}}@media(max-width:767px){h2 span{font-size:32px}}h3{color:#000;font-family:roboto,sans-serif;font-size:32px;font-weight:500;line-height:1.15;margin-bottom:24px}@media(max-width:1399px){h3{font-size:30px}}@media(max-width:1199px){h3{font-size:26px}}@media(max-width:991px){h3{font-size:24px;margin-bottom:15px}}@media(max-width:767px){h3{font-size:22px}}@media(max-width:595px){h3{font-size:20px}}h4{color:#000;font-family:roboto,sans-serif;font-size:24px;font-weight:500;line-height:1.25;margin-bottom:9px}@media(max-width:1399px){h4{font-size:22px}}@media(max-width:1199px){h4{font-size:22px}}@media(max-width:991px){h4{font-size:20px}}@media(max-width:767px){h4{font-size:18px}}@media(max-width:595px){h4{font-size:18px}}h5{color:#3c3c3c;font-family:roboto,sans-serif;font-size:18px;font-weight:400;line-height:1.5}@media(max-width:767px){h5{font-size:16px}}h6{color:#000;font-size:16px;font-weight:500}.para-18,h6{font-family:roboto,sans-serif;line-height:1.5}.para-18{color:#3c3c3c;font-size:18px;font-weight:400}@media(max-width:767px){.para-18{font-size:16px}}p{color:#000;font-family:roboto,sans-serif;font-size:16px;font-weight:400;letter-spacing:.006em;line-height:1.31}@media(max-width:1399px){p{font-size:14px}}p a{color:#006eff}.small-font{color:#000;font-size:12px;font-weight:400;line-height:1.31}.heading-1,.small-font,span{font-family:roboto,sans-serif}.heading-1{color:#000;font-size:56px;font-weight:700;line-height:1.21;margin-bottom:25px}@media(max-width:1399px){.heading-1{font-size:50px;letter-spacing:-.013em}}@media(max-width:1199px){.heading-1{font-size:50px}}@media(max-width:991px){.heading-1{font-size:42px}}@media(max-width:767px){.heading-1{font-size:38px}}@media(max-width:595px){.heading-1{font-size:34px}}.heading-1 .bolder-text{color:#fff;display:inline-block;font-size:56px;font-weight:700;line-height:1.21}@media(max-width:1399px){.heading-1 .bolder-text{font-size:50px}}@media(max-width:1199px){.heading-1 .bolder-text{font-size:50px}}@media(max-width:991px){.heading-1 .bolder-text{font-size:42px}}@media(max-width:767px){.heading-1 .bolder-text{font-size:38px}}@media(max-width:595px){.heading-1 .bolder-text{font-size:34px}}.heading-2{color:#000;font-family:roboto,sans-serif;font-size:40px;font-weight:500;line-height:1.2;margin-bottom:22px}@media(max-width:1399px){.heading-2{font-size:38px}}@media(max-width:1199px){.heading-2{font-size:38px}}@media(max-width:991px){.heading-2{font-size:34px;margin-bottom:15px}}@media(max-width:767px){.heading-2{font-size:32px}}.heading-2 .bolder-text{color:#fff;display:inline-block;font-size:40px;font-weight:500;line-height:1.2}@media(max-width:1399px){.heading-2 .bolder-text{font-size:38px}}@media(max-width:1199px){.heading-2 .bolder-text{font-size:38px}}@media(max-width:991px){.heading-2 .bolder-text{font-size:34px}}@media(max-width:767px){.heading-2 .bolder-text{font-size:32px}}.heading-3{color:#000;font-family:roboto,sans-serif;font-size:32px;font-weight:500;line-height:1.15;margin-bottom:24px}@media(max-width:1399px){.heading-3{font-size:30px}}@media(max-width:1199px){.heading-3{font-size:26px}}@media(max-width:991px){.heading-3{font-size:24px;margin-bottom:15px}}@media(max-width:767px){.heading-3{font-size:22px}}@media(max-width:595px){.heading-3{font-size:20px}}.heading-4{color:#000;font-family:roboto,sans-serif;font-size:24px;font-weight:500;line-height:1.25;margin-bottom:9px}@media(max-width:1399px){.heading-4{font-size:22px}}@media(max-width:1199px){.heading-4{font-size:22px}}@media(max-width:991px){.heading-4{font-size:20px}}@media(max-width:767px){.heading-4{font-size:18px}}@media(max-width:595px){.heading-4{font-size:18px}}.heading-5{color:#3c3c3c;font-family:roboto,sans-serif;font-size:18px;font-weight:400;line-height:1.5}@media(max-width:767px){.heading-5{font-size:16px}}.heading-6{font-size:16px;font-weight:500;line-height:1.5}.h1,.heading-6{color:#000;font-family:roboto,sans-serif}.h1{font-size:56px;font-weight:700;line-height:1.21}@media(max-width:1399px){.h1{font-size:50px;letter-spacing:-.013em}}@media(max-width:1199px){.h1{font-size:50px}}@media(max-width:991px){.h1{font-size:42px}}@media(max-width:767px){.h1{font-size:38px}}@media(max-width:595px){.h1{font-size:34px}}.h2{color:#000;font-family:roboto,sans-serif;font-size:40px;font-weight:500;line-height:1.2}@media(max-width:1399px){.h2{font-size:38px}}@media(max-width:1199px){.h2{font-size:38px}}@media(max-width:991px){.h2{font-size:34px;margin-bottom:15px}}@media(max-width:767px){.h2{font-size:32px}}.h3{color:#000;font-family:roboto,sans-serif;font-size:32px;font-weight:500;line-height:1.15}@media(max-width:1399px){.h3{font-size:30px}}@media(max-width:1199px){.h3{font-size:26px}}@media(max-width:991px){.h3{font-size:24px;margin-bottom:15px}}@media(max-width:767px){.h3{font-size:22px}}@media(max-width:595px){.h3{font-size:20px}}.h4{color:#000;font-family:roboto,sans-serif;font-size:24px;font-weight:500;line-height:1.25}@media(max-width:1399px){.h4{font-size:22px}}@media(max-width:1199px){.h4{font-size:22px}}@media(max-width:991px){.h4{font-size:20px}}@media(max-width:767px){.h4{font-size:18px}}@media(max-width:595px){.h4{font-size:18px}}.h5{color:#3c3c3c;font-family:roboto,sans-serif;font-size:18px;font-weight:400;line-height:1.5}@media(max-width:767px){.h5{font-size:16px}}.h6{font-weight:500;line-height:1.5}.h6,.paragraph{color:#000;font-family:roboto,sans-serif;font-size:16px}.paragraph{font-weight:400;letter-spacing:.006em;line-height:1.31}@media(max-width:1399px){.paragraph{font-size:14px}}.paragraph .anchor{color:#006eff}h1.mb-20,h2.mb-20,h3.mb-20,h4.mb-20,h5.mb-20,h6.mb-20{margin-bottom:20px}@media(max-width:991px){h1.mb-20,h2.mb-20,h3.mb-20,h4.mb-20,h5.mb-20,h6.mb-20{margin-bottom:10px}}h1.mb-10,h2.mb-10,h3.mb-10,h4.mb-10,h5.mb-10,h6.mb-10{margin-bottom:10px!important}@media(max-width:767px){h1.mb-10,h2.mb-10,h3.mb-10,h4.mb-10,h5.mb-10,h6.mb-10{margin-bottom:5px}}h1.mb-15,h2.mb-15,h3.mb-15,h4.mb-15,h5.mb-15,h6.mb-15{margin-bottom:15px}@media(max-width:767px){h1.mb-15,h2.mb-15,h3.mb-15,h4.mb-15,h5.mb-15,h6.mb-15{margin-bottom:10px}}.bg-img{overflow:hidden}.bg-img img{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:inherit;object-position:inherit}.bg-img .cmp-image{height:100%;width:100%}.bg-white{background-color:#fff!important}.bg-black{background-color:#000!important}.bg-light-black{background-color:#3c3c3c!important}.bg-gray{background-color:#fff!important}.bg-dark-blue{background-color:#00338a!important}.bg-blue{background-color:#006eff!important}.bg-smalt{background-color:#00439c!important}.bg-red{background-color:red!important}.bg-green{background-color:#1cb6ad!important}.bg-gray{background-color:#616161!important}.bg-mid-gray{background-color:#7e7e7e!important}.bg-light-gray{background-color:#c5c5c5!important}.bg-alto{background-color:#dedede!important}.bg-gallery{background-color:#eee!important}.bg-yellow{background-color:#ffe522!important}.bg-skyblue{background-color:#008cff!important}.bg-blue1{background-color:#005ed9!important}.bg-darkish-blue{background-color:#00439c!important}.bg-ice-blue,.bg-light-sky-blue{background-color:#e4f2ff!important}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.no-padding{padding:0!important}.no-padding-top{padding-top:0!important}.xs-padding-top{padding-top:10px}.sm-padding-top{padding-top:20px}.md-padding-top{padding-top:40px}.lg-padding-top{padding-top:80px}@media(max-width:1399px){.lg-padding-top{padding-top:60px}}@media(max-width:991px){.lg-padding-top{padding-top:40px}}@media(max-width:767px){.lg-padding-top{padding-top:40px}}.xl-padding-top{padding-top:120px}@media(max-width:1399px){.xl-padding-top{padding-top:96px}}@media(max-width:991px){.xl-padding-top{padding-top:64px}}@media(max-width:767px){.xl-padding-top{padding-top:64px}}.no-padding-bottom{padding-bottom:0!important}.xs-padding-bottom{padding-bottom:10px}.sm-padding-bottom{padding-bottom:20px}.md-padding-bottom{padding-bottom:40px}.lg-padding-bottom{padding-bottom:80px}@media(max-width:1399px){.lg-padding-bottom{padding-bottom:60px}}@media(max-width:991px){.lg-padding-bottom{padding-bottom:40px}}@media(max-width:767px){.lg-padding-bottom{padding-bottom:40px}}.xl-padding-bottom{padding-bottom:120px}@media(max-width:1399px){.xl-padding-bottom{padding-bottom:96px}}@media(max-width:991px){.xl-padding-bottom{padding-bottom:64px}}@media(max-width:767px){.xl-padding-bottom{padding-bottom:64px}}.no-padding-bottom-very-small-top{padding-bottom:0!important;padding-top:40px!important}.no-padding-top-very-small-bottom{padding-bottom:40px;padding-top:0}@media(max-width:767px){.no-padding-top-very-small-bottom{padding-bottom:20px}}.no-padding-top-small-bottom{padding-bottom:60px!important;padding-top:0!important}@media(max-width:991px){.no-padding-top-small-bottom{padding-bottom:35px!important}}@media(max-width:595px){.no-padding-top-small-bottom{padding-bottom:25px!important}}.no-padding-top-large-bottom{padding-bottom:64px!important;padding-top:0!important}@media(max-width:767px){.no-padding-top-large-bottom{padding-bottom:84px!important}}@media(max-width:595px){.no-padding-top-large-bottom{padding-bottom:64px!important}}.no-margin{margin:0!important}.zoom-in img{transform:scale(1);transition:transform .4s ease-in-out}.zoom-in:hover img{transform:scale(1.06)}.zoom-bg .bg-img img{transform:scale(1);transition:transform .4s ease-in-out}.zoom-bg:hover .bg-img img{transform:scale(1.06)}.blend-mode{height:100%;left:0;mix-blend-mode:multiply;position:absolute;top:0;width:100%;z-index:1}::-webkit-input-placeholder{color:#000;font-size:14px;font-weight:400;opacity:1}::-moz-placeholder{color:#000;font-size:14px;font-weight:400;opacity:1}:-ms-input-placeholder{color:#000;font-size:14px;font-weight:400;opacity:1}:-moz-placeholder{color:#000;font-size:14px;font-weight:400;opacity:1}::-ms-clear{display:none;height:0;width:0}body.stop-scroll{overflow:hidden}.o-visible{overflow:visible}.o-hidden,.popup-open{overflow:hidden}.popup-open{width:100%}.popup-open:after{background:rgba(0,0,0,.5);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}.index .container>ul>li{margin-bottom:30px}.index .container>ul>li h3{margin-bottom:20px}.index .container>ul>li a{color:#000}.index .container>ul>li ul{padding-left:40px}.pattern-top-right{position:absolute;right:-27px;top:-38px}@media(max-width:1199px){.pattern-top-right{top:-30px}}@media(max-width:991px){.pattern-top-right{top:-25px}}section.intro-block{margin-bottom:50px;text-align:left;width:100%}@media(max-width:1399px){section.intro-block{margin-bottom:40px}}@media(max-width:1199px){section.intro-block{margin-bottom:40px}}@media(max-width:991px){section.intro-block{margin-bottom:30px}}section.intro-block:after{clear:both;content:"";display:block}section.intro-block h4 a{color:#006eff;transition:color .3s ease-in-out}section.intro-block h4 a:hover{color:#005ed9}@media(max-width:595px){section.intro-block p{word-break:break-word}}section.intro-block p a{transition:color .3s ease-in-out}@media(max-width:595px){section.intro-block p a{word-break:break-word}}section.intro-block p a:hover{color:#005ed9;text-decoration:underline}section.intro-block .paragraph a{transition:color .3s ease-in-out}section.intro-block .paragraph a:hover{color:#005ed9;text-decoration:underline}section.intro-block.with-link{font-size:0}section.intro-block.with-link .text-wrap{display:inline-block;padding-right:40px;width:calc(100% - 176px)}@media(max-width:595px){section.intro-block.with-link .text-wrap{margin-bottom:20px;padding-right:0;width:100%}}section.intro-block.with-link p{color:#000;font-size:16px;line-height:1.5;max-width:765px}@media(max-width:1399px){section.intro-block.with-link p{font-size:16px}}section.intro-block.with-link .btn-wrap{display:inline-block;position:relative;vertical-align:bottom;width:176px}section.intro-block.with-link .btn-wrap a{bottom:30px;margin-right:0;position:absolute;right:0}@media(max-width:595px){section.intro-block.with-link .btn-wrap a{position:static}}@media(max-width:320px){section.intro-block a:last-of-type{margin-right:0}}section.intro-block .text-wrap a.hidden{display:none}section.intro-block.dark{background-color:#000}section.intro-block.dark h1,section.intro-block.dark h2,section.intro-block.dark h3,section.intro-block.dark h4,section.intro-block.dark h5,section.intro-block.dark h6,section.intro-block.dark p{color:#fff}section.intro-block.oem-intro.dark{background-color:#000}section.intro-block.oem-intro.dark h1,section.intro-block.oem-intro.dark h2,section.intro-block.oem-intro.dark h3,section.intro-block.oem-intro.dark h4,section.intro-block.oem-intro.dark h5,section.intro-block.oem-intro.dark h6,section.intro-block.oem-intro.dark p{color:#fff}@media(min-width:992px)and (max-width:1200px){section.intro-block.oem-intro{padding:120px 0}}section.intro-block.oem-intro ul{margin:15px 0;padding-left:21px}section.intro-block.oem-intro ul li{font-size:16px;margin:5px 0;padding-left:0}@media(max-width:1399px){section.intro-block.oem-intro ul li{font-size:14px}}section.intro-block.oem-intro table{margin:20px 0;width:100%}@media(max-width:480px){section.intro-block.oem-intro table p{font-size:12px}}@media(max-width:320px){section.intro-block.oem-intro table p{font-size:11px}}@media(max-width:595px){section.intro-block.oem-intro table.more-cols td,section.intro-block.oem-intro table.more-cols th{font-size:11px!important;max-width:90px!important}}@media(max-width:320px){section.intro-block.oem-intro table.more-cols td,section.intro-block.oem-intro table.more-cols th{font-size:10px!important}}@media(max-width:595px){section.intro-block.oem-intro table.more-cols li{font-size:11px!important}}@media(max-width:320px){section.intro-block.oem-intro table.more-cols li{font-size:10px!important}}section.intro-block.oem-intro td,section.intro-block.oem-intro th{border:1px solid #616161;font-family:roboto,sans-serif;font-size:16px;line-height:1.67;padding:10px;vertical-align:top}@media(max-width:480px){section.intro-block.oem-intro td,section.intro-block.oem-intro th{font-size:12px;padding:10px 7px}}@media(max-width:320px){section.intro-block.oem-intro td,section.intro-block.oem-intro th{font-size:11px;padding:10px 5px}}section.intro-block.oem-intro td ul,section.intro-block.oem-intro th ul{margin:0}@media(max-width:480px){section.intro-block.oem-intro td ul,section.intro-block.oem-intro th ul{list-style-type:none;padding-left:13px}section.intro-block.oem-intro td ul li,section.intro-block.oem-intro th ul li{font-size:12px}}@media(max-width:320px){section.intro-block.oem-intro td ul li,section.intro-block.oem-intro th ul li{font-size:11px}}section.intro-block.oem-intro td ul li:first-of-type,section.intro-block.oem-intro th ul li:first-of-type{margin-top:0!important}@media(max-width:480px){section.intro-block.oem-intro td ul li:before,section.intro-block.oem-intro th ul li:before{background-color:#000;border-radius:50%;height:4px;left:-12px;width:4px}}section.intro-block.oem-intro p{margin-bottom:17px}section.intro-block.oem-intro h3 img{height:30px;max-width:30px}@media(max-width:1024px){section.intro-block.oem-intro h3 img{height:23px;max-width:23px}}@media(max-width:767px){section.intro-block.oem-intro h3 img{height:20px;max-width:20px}}section.intro-block.full-width-intro .text-wrap{max-width:100%}.breadcrumb{margin-bottom:12px;padding:12px 0}.breadcrumb a{color:#c5c5c5;font-size:12px;font-weight:500;letter-spacing:.96px;position:relative;transition:all .4s ease;z-index:4}@media(max-width:595px){.breadcrumb a{line-height:1.7}}.breadcrumb a:hover{color:#fff}.breadcrumb a:after{color:#dedede;content:"/";display:inline-block;font-size:12px;margin:0 8px}@media(max-width:595px){.breadcrumb a:after{margin:0 3px}}@media(max-width:320px){.breadcrumb a:after{margin:0 2px}}.breadcrumb a:first-child{pointer-events:auto!important}.breadcrumb a:last-child{margin:0;padding:0;pointer-events:none}.breadcrumb a:last-child:after{margin-right:0}.breadcrumb.oem-breadcrumb{background:transparent;padding:128px 0 0}.breadcrumb.oem-breadcrumb a{color:#616161}.breadcrumb.oem-breadcrumb a:hover{color:#000}@media(max-width:767px){.breadcrumb.bg-white{padding:130px 0 0}}.breadcrumb.bg-white a.active{color:#000}.breadcrumb.hover-black a,.breadcrumb.hover-black a:after{color:#616161}.breadcrumb.hover-black a:hover{color:#000}.breadcrumb.gray-color a{color:#dedede}.hs-form p{color:#000}section.blue-bar{background-color:#e4f2ff;height:40px;padding:0}section.blue-bar.height-32{height:32px}section.blue-bar.height-24{height:24px}.play-video:after{background:#006eff url(https://www.bitdefender.com/content/dam/bitdefender/play_icon_blue.png) no-repeat 50%;background-size:100%;border-radius:50%;content:"";cursor:pointer;display:block;height:80px;left:50%;opacity:.8;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:80px}@media(max-width:1199px){.play-video:after{height:60px;width:60px}}@media(max-width:991px){.play-video:after{height:50px;width:50px}}@media(max-width:480px){.play-video:after{height:40px;width:40px}}.play-video:hover:after{opacity:1}.popup-form{background:#fff;border-radius:8px;box-shadow:0 0 8px -2px rgba(0,0,0,.1);display:none;left:50%;max-height:100%;max-width:950px;overflow-y:scroll;padding:30px;position:fixed;top:50%;transform:translate(-50%,-50%);width:95%}.popup-form.active{display:block;z-index:15}.popup-form .form-columns-2{display:flex;flex-wrap:wrap;width:100%}.popup-form input,.popup-form textarea{background-color:#f5f8fa;border:1px solid #cbd6e2;border-radius:4px;color:#616161;display:block;font-family:roboto,sans-serif;font-size:16px;height:40px;margin:0;padding:0 15px;resize:none;transition:all .1s ease;width:100%}.popup-form #fname{padding-right:15px}@media(max-width:767px){.popup-form #fname{padding-right:0}}.popup-form textarea{height:auto;line-height:22px;padding:15px;resize:both}.popup-form li{list-style-type:none}.popup-form li,.popup-form ul{padding-left:0}.popup-form label{display:inline-block;font-family:roboto,sans-serif;font-size:16px;margin:0 0 10px}.popup-form label.hidden{display:none}.popup-form .wrap{display:flex;flex-wrap:wrap;margin-bottom:20px;width:100%}.popup-form .fname,.popup-form .lname{width:50%}@media(max-width:767px){.popup-form .fname,.popup-form .lname{width:100%}}.popup-form .lname{padding-left:15px}@media(max-width:767px){.popup-form .lname{margin:20px 0 0;padding-left:0}}.popup-form .field{margin-bottom:20px}@media(max-width:767px){.popup-form .field{margin-bottom:10px}}.popup-form span{color:red;display:inline}.popup-form .condition{display:flex}.popup-form .condition p{display:inline;padding-top:4px}.popup-form .check-box{background-color:#f5f8fa;display:inline;height:13px;margin-right:10px;position:relative;top:7px;width:-moz-fit-content;width:fit-content}.popup-form h6{font-size:14px;font-weight:300;margin:12px 0}.popup-form .legal-consent-container{margin-bottom:30px}.popup-form input[type=submit]{align-items:center;background-color:#eb0000;border:2px solid #eb0000;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-family:roboto,sans-serif;font-size:16px;font-weight:500;height:-moz-fit-content;height:fit-content;justify-content:center;margin-right:13px;margin-top:8px;min-width:140px;outline:none;padding:10px 26px 8px 28px;position:relative;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1)}@media(max-width:767px){.popup-form input[type=submit]{font-size:16px;height:-moz-fit-content;height:fit-content;min-width:auto;padding:6px 20px}}.popup-form input[type=submit] span{color:#fff;display:inline-block;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}.popup-form input[type=submit] span:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:inline-block;height:10px;opacity:0;position:absolute;right:0;top:7px;transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:right,opacity}@media(max-width:767px){.popup-form input[type=submit] span:after{top:6px}}.popup-form input[type=submit]:hover span{transform:translate3d(-11px,0,0)}.popup-form input[type=submit]:hover span:after{opacity:1;right:-22px}.popup-form input[type=submit]:hover{background-color:#d80000;border:2px solid #d80000}.popup-form .close-btn{background:url(https://www.bitdefender.com/content/dam/bitdefender/close-icon.svg) no-repeat;background-size:40px;cursor:pointer;height:32px;overflow:hidden;position:absolute;right:12px;top:0;width:32px}.popup-form .form-message-wrapper{margin:0 0 20px;text-align:center}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;height:0;width:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.we-interactive .op-interactive{background:#000;padding-top:130px}.we-loader{animation:loader2 .8s linear infinite;background:linear-gradient(-60deg,transparent,transparent 50%,#eee 0,#eee 75%,transparent 0,transparent);background-position:0 0;background-size:1em 2em;border:.05em solid #eee;border-radius:.1em;color:transparent!important;display:inline-block;height:.66em;vertical-align:middle;width:2em}@keyframes loader2{0%{background-position:0 0}to{background-position:-2em 0}}@keyframes place-holder-shimmer{0%{background-position:-800px 0}to{background-position:800px 0}}.strikethrough{text-decoration:line-through}.newpar.section{padding:0}.xf-content-height{margin:0}.mega-menu{position:relative;z-index:5}.mega-menu__container{background:#fff;position:relative}@media(min-width:1200px){.mega-menu__container{padding-bottom:66px}.mega-menu__container:has(.active.mega-menu--item-empty){padding-bottom:0}}.mega-menu__container:after{background:#f0f0f0;content:"";height:1px;left:0;pointer-events:none;position:absolute;width:100%;z-index:2}.mega-menu__content{--right-links-offset:calc(49px*var(--first-level-length));align-items:center;display:flex;height:64px;justify-content:space-between;position:static;width:100%}@media(min-width:1200px){.mega-menu__content{justify-content:flex-start}}.mega-menu a,.mega-menu span{font-family:Arial,sans-serif}.mega-menu__l2-link,.mega-menu__link,.mega-menu__right-link{color:#000}.mega-menu__category-links{display:none}@media(min-width:1200px){.mega-menu__category-links{display:block}}.mega-menu__category-link{color:#006dff;display:inline-block;font-size:.875rem;margin-bottom:12px;margin-right:20px}@media(max-width:1199px){.mega-menu__category-link{font-size:1rem}}.mega-menu ul{list-style:none;padding-left:0}.mega-menu li{margin-bottom:0;padding-left:0}.mega-menu__logo{display:block;margin-right:20px;width:164px}.mega-menu__button-wrap{display:flex;flex-grow:1;justify-content:flex-end}@media(min-width:1200px){.mega-menu__button-wrap{display:none}}.mega-menu__button{cursor:pointer;display:block;position:relative}.mega-menu__button-bar{background-color:#000;display:block;height:3px;margin:5px 0;opacity:1;transition:transform .3s ease-in-out,opacity .3s;width:25px}.mega-menu__button-bar:last-child{margin-bottom:0}@media(min-width:1200px){.mega-menu__left-container{flex-grow:1}}.mega-menu__left,.mega-menu__right{display:none}@media(min-width:1200px){.mega-menu__left,.mega-menu__right{display:flex}}@media(max-width:1199px){.mega-menu__left{background:#fff;max-width:450px;min-height:100vh;position:absolute;right:0;top:100%;width:100%}}@media(max-width:767px){.mega-menu__left{max-width:100%;width:100%}}@media(min-width:1200px){.mega-menu__left{flex-grow:1}}@media(max-width:1199px){.mega-menu__right{background:#fff;max-width:450px;min-height:calc(100vh - var(--right-links-offset));position:absolute;right:0;top:calc(100% + var(--right-links-offset));width:100%}}@media(max-width:767px){.mega-menu__right{max-width:100%;width:100%}}.mega-menu__link,.mega-menu__right-link{border-bottom:4px solid transparent;color:#000;cursor:pointer;display:block;font-size:.875rem;line-height:1;margin-top:15px;padding:16px 0}.mega-menu__link:hover,.mega-menu__right-link:hover{color:#006dff}@media(max-width:1199px){.mega-menu__link,.mega-menu__right-link{font-size:1rem}.mega-menu__right-link{border-bottom:none;margin-top:0}.mega-menu__right-item:before{content:none}.mega-menu__right-item:after{background-color:#f0f0f0;content:"";display:block;height:1px;left:0;margin-left:-20px;margin-right:-20px;position:absolute;width:calc(100% + 40px)}.mega-menu__right-item .navigation__heading+.navigation__links{display:block}}.mega-menu__item,.mega-menu__right-item{margin:0 20px}@media(max-width:1199px){.mega-menu__item:after{background:#f0f0f0;content:"";height:1px;left:0;position:absolute;width:100%}}.mega-menu__item:not(:has(.mega-menu__list)) .mega-menu__link:after{display:none}@media(max-width:1199px){.mega-menu__link{border-bottom:none;font-weight:900;margin-top:0;position:relative}.mega-menu__link:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat;background-size:100%;content:"";height:16px;position:absolute;right:5px;top:16px;transform:rotate(90deg);width:16px}}.mega-menu__right-item{position:relative}.mega-menu__right-item:before{background:#f0f0f0;content:"";display:block;height:22px;left:-20px;position:absolute;top:28px;width:1px}.mega-menu__first-level{display:flex;width:100%}@media(max-width:1199px){.mega-menu__first-level{flex-direction:column}}.mega-menu__back-button,.mega-menu__back-button-l2{background:url(https://www.bitdefender.com/content/dam/bitdefender/black-arrow.svg) 50% 50%/contain no-repeat;background-size:20px;cursor:pointer;display:inline-block;height:50px;margin-left:-14px;padding:10px;position:absolute;top:7px;transform:rotate(180deg);width:50px}@media(min-width:1200px){.mega-menu__back-button,.mega-menu__back-button-l2{display:none}}.mega-menu__second-level{background:#fff;display:none;left:0;position:absolute;width:100%;z-index:1}@media(max-width:1199px){.mega-menu__second-level{background:#fff;min-height:100vh;top:0}}.mega-menu__second-level-content{align-items:center;display:flex;justify-content:space-between;position:static}@media(max-width:1199px){.mega-menu__second-level-content{align-items:flex-start;flex-direction:column;padding:0 20px}}.mega-menu__second-level:after{background:#f0f0f0;bottom:-1px;content:"";height:1px;left:0;pointer-events:none;position:absolute;width:100%;z-index:2}.mega-menu__list{align-items:center;display:flex;height:64px;padding-left:0}@media(max-width:1199px){.mega-menu__list{align-items:flex-start;flex-direction:column;height:100%;padding-top:66px;width:100%}.mega-menu__list:after{background-color:#f0f0f0;content:"";display:block;height:1px;left:0;position:absolute;width:100%}}@media(min-width:1200px){.mega-menu ul.mega-menu__list{padding-left:204px}}.mega-menu__l2-link{color:#000;font-size:.875rem;line-height:1;padding-right:18px;position:relative}.mega-menu__l2-link:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat;background-size:100%;content:"";height:10px;position:absolute;right:0;top:3px;transform:rotate(180deg);width:10px}@media(max-width:1199px){.mega-menu__l2-link{display:block;font-size:1rem;font-weight:900;padding:13px 0;width:100%}.mega-menu__l2-link:after{height:16px;top:12px;transform:rotate(90deg);width:16px}}.mega-menu__l2-item{cursor:pointer;margin-bottom:0;padding-left:0;padding-right:24px}@media(min-width:1200px){.mega-menu__l2-item{padding-bottom:20px;padding-top:20px}}@media(max-width:1199px){.mega-menu__l2-item{padding-right:0;width:100%}.mega-menu__l2-item:after{background-color:#f0f0f0;content:"";display:block;height:1px;left:0;position:absolute;width:100%}}@media(min-width:1200px){.mega-menu__l2-item:hover .mega-menu__third-level{display:block}.mega-menu__l2-item:hover .mega-menu__l2-link{color:#006dff}.mega-menu__l2-item:hover .mega-menu__l2-link:after{transform:rotate(0deg)}}.mega-menu__l2-item.active .mega-menu__third-level{display:block}@media(min-width:1200px){.mega-menu__item.active .mega-menu__link,.mega-menu__item.mega-menu--item-opened .mega-menu__link{border-bottom:4px solid #006dff}.mega-menu__item.active .mega-menu__second-level,.mega-menu__item.mega-menu--item-opened .mega-menu__second-level{display:block}}@media(max-width:1199px){.mega-menu--item-opened .mega-menu__second-level{display:block}}.mega-menu__right-top-link{margin-bottom:11px;margin-top:11px}@media(max-width:1199px){.mega-menu__right-top-link{width:100%}}@media(min-width:1200px){.mega-menu__right-top-link{display:flex;flex-grow:1;justify-content:flex-end;margin-right:20px;text-align:right}}.mega-menu__right-top-link-target .cmp-button{margin:0}@media(max-width:1199px){.mega-menu__right-top-link-target .cmp-button{width:100%}}.mega-menu__view-all{color:#006dff;font-size:1rem;margin-bottom:10px}.mega-menu__third-level{background:#fafafa;box-shadow:0 10px 10px rgba(0,0,0,.05);display:none;left:0;position:absolute;top:100%;width:100%;z-index:2}@media(max-width:1199px){.mega-menu__third-level{background:#fff;min-height:100vh;top:0;z-index:3}}.mega-menu__third-level-content{padding:66px 20px 46px;width:100%}@media(min-width:1200px){.mega-menu__third-level-content{padding-left:254px;padding-top:40px}}@media(min-width:1601px){.mega-menu__third-level-content{padding-left:224px}}.mega-menu__row{display:flex;margin-bottom:34px}@media(max-width:1199px){.mega-menu__row{flex-direction:column;margin-bottom:0}.mega-menu__row:before{background-color:#f0f0f0;content:"";display:block;height:1px;left:0;position:absolute;width:100%}.mega-menu__row:last-child:before{content:none}}@media(min-width:1200px){.mega-menu__col{margin-right:40px}}.mega-menu__second-level-right{background:#fff;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.1);display:none;min-width:370px;padding:20px;position:absolute;right:0;text-align:center;transform:translateY(-4px);z-index:3}@media(max-width:1199px){.mega-menu__second-level-right{min-width:none;top:calc(100% + 8px);width:100%}}.mega-menu__right .navigation__header-link{color:#3c3c3c;font-size:18px;font-weight:900;line-height:1.5}@media(max-width:1199px){.mega-menu__right .navigation__header-link:after{content:none}}.mega-menu__right .navigation__header-link:hover{color:#3c3c3c}@media(max-width:1199px){.mega-menu__right .navigation__container:after{content:none}.mega-menu__right .navigation__links{display:block}}.mega-menu__right .navigation__link{color:#006dff;font-size:18px;font-weight:500;line-height:10px;position:relative;text-align:center;transform:translateZ(0);transition:all .25s cubic-bezier(.4,0,.2,1);will-change:transform}.mega-menu__right .navigation__link:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat;background-size:cover;content:"";display:block;height:10px;opacity:0;position:absolute;right:0;top:50%;transform:translateY(-5px);transition:all .25s cubic-bezier(.4,0,.2,1);width:15px;will-change:transform,opacity}@media(max-width:1199px){.mega-menu__right .navigation__link{padding-bottom:0;padding-top:0}}.mega-menu__right .navigation__item{background-color:transparent;border:2px solid #006dff;border-radius:8px;cursor:pointer;display:block;height:-moz-fit-content;height:fit-content;margin-right:0;margin-top:10px;min-width:140px;padding:10px 26px 8px 28px;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1)}.mega-menu__right .navigation__item:hover{background-color:#006dff}.mega-menu__right .navigation__item:hover .navigation__link{color:#fff;transform:translate3d(-11px,0,0)}.mega-menu__right .navigation__item:hover .navigation__link:after{opacity:1;transform:translate(22px,-5px)}.mega-menu__popup-container.popup-active .mega-menu__right-link{color:#006dff}.mega-menu__popup-container.popup-active .mega-menu__second-level-right{display:block}.mega-menu--active:before{background:#000;content:"";height:100vh;left:0;opacity:.5;position:absolute;top:0;width:100%;z-index:-1}.mega-menu--active .mega-menu__left,.mega-menu--active .mega-menu__right{display:block}.mega-menu--active .mega-menu__button-bar:first-child{transform:rotate(-45deg) translate(-5px,5px)}.mega-menu--active .mega-menu__button-bar:nth-child(2){opacity:0}.mega-menu--active .mega-menu__button-bar:nth-child(3){transform:rotate(45deg) translate(-6px,-6px)}.mega-menu__quick-links-mobile .navigation__link{color:#006dff}.mega-menu__quick-links-mobile .navigation__item:first-child .navigation__link{border:2px solid #006dff;border-radius:6px;display:block;line-height:1;margin-bottom:1pc;margin-top:23px;padding:14px;text-align:center}.mega-menu__quick-links-mobile .navigation__item:nth-child(2) .navigation__link{background:#006dff;border-radius:6px;color:#fff;display:block;line-height:1;margin-bottom:15px;padding:14px;text-align:center}.mega-menu__quick-links-mobile .navigation__item:nth-child(2) .navigation__link:hover{color:#fff}.mega-menu__quick-links-mobile .mega-menu__category-links{display:block}@media(min-width:1200px){.mega-menu__quick-links-mobile{display:none}}.mega-menu__login-container .mega-menu__login.mega-menu__right-link{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(0 109 255/var(--tw-bg-opacity));border-radius:9999px;color:rgb(255 255 255/var(--tw-text-opacity));display:flex;font-weight:700;height:43px;justify-content:center;margin-bottom:.25rem;margin-top:.25rem;text-align:center;width:43px}.mega-menu__login-container .mega-menu__login.mega-menu__right-link:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}@media(min-width:1200px){.mega-menu__login-container .mega-menu__login.mega-menu__right-link{display:block;height:45px;margin-bottom:.25rem;margin-top:1rem;width:45px}}.mega-menu__login-container.popup-active .mega-menu__login.mega-menu__right-link{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}@media(min-width:1200px){.mega-menu--no-active.mega-menu__container{padding-bottom:0}.mega-menu--no-active .mega-menu__link:hover{border-bottom:4px solid #006dff}.mega-menu--no-active .mega-menu__link:hover+.mega-menu__second-level,.mega-menu--no-active .mega-menu__second-level:hover{display:block}.mega-menu--no-active .mega-menu__second-level:hover~.mega-menu__link{border-bottom:4px solid #006dff}.mega-menu--right{display:flex;flex-grow:1;justify-content:flex-end}.mega-menu--right .mega-menu__second-level{top:64px}.mega-menu--right .mega-menu__link{position:relative}.mega-menu--right .mega-menu__link:before{background:#f0f0f0;content:"";display:block;height:22px;left:-20px;position:absolute;top:12px;width:1px}}.mega-menu__no-l3 .mega-menu__l2-link{padding-right:0}.mega-menu__no-l3 .mega-menu__l2-link:after{content:none}@media(min-width:1200px){.navigation~.navigation{margin-top:20px}}.navigation__header-link,.navigation__link{color:#000}.navigation__header-link:hover,.navigation__link:hover{color:#006dff}.navigation__header-link{display:block;font-size:1rem;font-weight:900}@media(max-width:1199px){.navigation__header-link:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat;background-size:100%;content:"";height:16px;position:absolute;right:5px;top:12px;transform:rotate(180deg);width:16px}}@media(min-width:1200px){.navigation__header-link{font-size:.75rem;margin-bottom:12px}.navigation a.navigation__header-link:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/black-arrow.svg) 50% 50%/contain no-repeat;background-size:contain;content:"";display:inline-block;height:10px;margin-left:4px;width:9px}.navigation a.navigation__header-link:hover:after{background:url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) 50% 50%/contain no-repeat}}@media(max-width:1199px){.navigation__heading+.navigation__links .navigation__item:nth-child(n+4){display:none}}.navigation__link{display:inline-block;font-size:1rem;padding-bottom:12px;padding-top:12px;white-space:nowrap}@media(min-width:1200px){.navigation__link{font-size:.75rem;line-height:1;margin-right:5px;margin-top:4px;padding-bottom:0;padding-top:0}}.navigation__anchor{height:100%;left:0;position:absolute;top:0;width:100%}.navigation__anchor+li.navigation__link{font-family:Arial,sans-serif;pointer-events:none}@media(max-width:1199px){.navigation__anchor+li.navigation__link{line-height:18px;white-space:normal}}.navigation__view-all{display:none}.navigation__heading+.navigation__links .navigation__view-all{color:#006dff;cursor:pointer;display:block;font-size:1rem;margin-bottom:10px}@media(min-width:1200px){.navigation__heading+.navigation__links .navigation__view-all{display:none}}.navigation__tag{background-color:#006dff;border-radius:50px;color:#fff;display:inline-block;font-size:14px;font-style:normal;font-weight:600;margin-left:4px;margin-top:4px;padding:1px 8px;white-space:nowrap}@media(min-width:1200px){.navigation__tag{font-size:8px;margin-left:-3px;margin-top:0;padding:0 4px;vertical-align:middle}}@media(max-width:1199px){.navigation__heading{display:block;line-height:1;margin-bottom:0;padding-bottom:12px;padding-top:12px;position:relative}.navigation__heading+.navigation__links{display:none}.navigation__container:after{background-color:#f0f0f0;content:"";display:block;height:1px;left:0;position:absolute;width:100%}.navigation__container.active .navigation__links{display:block}.navigation__container.active .navigation__header-link:after{transform:rotate(0deg)}.navigation__quick-links{display:none}.navigation__heading+.navigation__links.navigation--view-all .navigation__item:nth-child(n+4){display:block}}.navigation__heading+.navigation__links.navigation--view-all .navigation__view-all{display:none}.xfpage-styled .xf-content-height{margin:0} \ No newline at end of file +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + box-sizing: border-box; + margin: 0; + padding: 0 +} + +.we-align-items-start { + align-items: flex-start !important +} + +.we-align-items-center { + align-items: center !important +} + +.we-align-items-end { + align-items: flex-end !important +} + +.we-align-self-start { + align-self: flex-start !important +} + +.we-align-self-center { + align-self: center !important +} + +.we-align-self-end { + align-self: flex-end !important +} + +.we-justify-content-start { + justify-content: flex-start !important +} + +.we-justify-content-center { + justify-content: center !important +} + +.we-justify-content-end { + justify-content: flex-end !important +} + +.we-justify-content-left { + justify-content: left !important +} + +.we-align-right { + text-align: right !important +} + +.we-align-left { + text-align: left !important +} + +.we-align-center { + text-align: center !important +} + +.we-align-justify { + text-align: justify !important +} + +.we-text-uppercase { + text-transform: uppercase !important +} + +.we-text-lowercase { + text-transform: lowercase !important +} + +.we-row { + display: flex +} + +.we-flex-wrap { + flex-wrap: wrap +} + +.we-row-inline { + font-size: 0 +} + +.we-row-inline .we-col, .we-row-inline .we-col-five, .we-row-inline .we-col-four, .we-row-inline .we-col-seven, .we-row-inline .we-col-six, .we-row-inline .we-col-three, .we-row-inline .we-col-two { + display: inline-block; + vertical-align: top +} + +.mx-auto { + margin-left: auto !important; + margin-right: auto !important +} + +.d-block { + display: block !important +} + +@media (max-width: 1399px) { + .d-xl-block { + display: block !important + } +} + +@media (max-width: 1270px) { + .d-lg-block { + display: block !important + } +} + +@media (max-width: 991px) { + .d-md-block { + display: block !important + } +} + +@media (max-width: 767px) { + .d-sm-block { + display: block !important + } +} + +@media (max-width: 595px) { + .d-xs-block { + display: block !important + } +} + +.d-inline-block { + display: inline-block !important +} + +@media (max-width: 1399px) { + .d-xl-inline-block { + display: inline-block !important + } +} + +@media (max-width: 1270px) { + .d-lg-inline-block { + display: inline-block !important + } +} + +@media (max-width: 991px) { + .d-md-inline-block { + display: inline-block !important + } +} + +@media (max-width: 767px) { + .d-sm-inline-block { + display: inline-block !important + } +} + +@media (max-width: 595px) { + .d-xs-inline-block { + display: inline-block !important + } +} + +.d-inline { + display: inline !important +} + +@media (max-width: 1399px) { + .d-xl-inline { + display: inline !important + } +} + +@media (max-width: 1270px) { + .d-lg-inline { + display: inline !important + } +} + +@media (max-width: 991px) { + .d-md-inline { + display: inline !important + } +} + +@media (max-width: 767px) { + .d-sm-inline { + display: inline !important + } +} + +@media (max-width: 595px) { + .d-xs-inline { + display: inline !important + } +} + +.d-none { + display: none !important +} + +@media (max-width: 1399px) { + .d-xl-none { + display: none !important + } +} + +@media (max-width: 1270px) { + .d-lg-none { + display: none !important + } +} + +@media (max-width: 991px) { + .d-md-none { + display: none !important + } +} + +@media (max-width: 767px) { + .d-sm-none { + display: none !important + } +} + +@media (max-width: 595px) { + .d-xs-none { + display: none !important + } +} + +.d-flex { + display: flex !important +} + +@media (max-width: 1399px) { + .d-xl-flex { + display: flex !important + } +} + +@media (max-width: 767px) { + .d-sm-flex { + display: flex !important + } +} + +@media (max-width: 595px) { + .d-xs-flex { + display: flex !important + } +} + +a.we-btn-black, button.we-btn-black { + align-items: center; + background-color: #000; + border: 2px solid #000; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-black, button.we-btn-black { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-black span, button.we-btn-black span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-black span:after, button.we-btn-black span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-black span:after, button.we-btn-black span:after { + top: 6px + } +} + +a.we-btn-black:hover span, button.we-btn-black:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-black:hover span:after, button.we-btn-black:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-red, button.we-btn-red { + align-items: center; + background-color: #eb0000; + border: 2px solid #eb0000; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-red, button.we-btn-red { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-red span, button.we-btn-red span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-red span:after, button.we-btn-red span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-red span:after, button.we-btn-red span:after { + top: 6px + } +} + +a.we-btn-red:hover span, button.we-btn-red:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-red:hover span:after, button.we-btn-red:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-red:hover, button.we-btn-red:hover { + background-color: #d80000; + border: 2px solid #d80000 +} + +a.we-btn-green, button.we-btn-green { + align-items: center; + background-color: #51a71d; + border: 2px solid #51a71d; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-green, button.we-btn-green { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-green span, button.we-btn-green span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-green span:after, button.we-btn-green span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-green span:after, button.we-btn-green span:after { + top: 6px + } +} + +a.we-btn-green:hover span, button.we-btn-green:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-green:hover span:after, button.we-btn-green:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-green:hover, button.we-btn-green:hover { + background-color: #469c12; + border: 2px solid #469c12 +} + +a.we-btn-blue, button.we-btn-blue { + align-items: center; + background-color: #006eff; + border: 2px solid #006eff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-blue, button.we-btn-blue { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-blue span, button.we-btn-blue span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-blue span:after, button.we-btn-blue span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-blue span:after, button.we-btn-blue span:after { + top: 6px + } +} + +a.we-btn-blue:hover span, button.we-btn-blue:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-blue:hover span:after, button.we-btn-blue:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-blue:hover, button.we-btn-blue:hover { + background-color: #0080ff; + border: 2px solid #0080ff +} + +a.we-btn-blue span, button.we-btn-blue span { + pointer-events: none +} + +a.we-app-store, button.we-app-store { + align-items: center; + background-color: transparent; + border: 0; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + overflow: hidden; + padding: 0; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1); + vertical-align: top +} + +@media (max-width: 767px) { + a.we-app-store, button.we-app-store { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-app-store span, button.we-app-store span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-app-store span:after, button.we-app-store span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-app-store span:after, button.we-app-store span:after { + top: 6px + } +} + +a.we-app-store:hover span, button.we-app-store:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-app-store:hover span:after, button.we-app-store:hover span:after { + opacity: 1; + right: -22px +} + +@media (max-width: 767px) { + a.we-app-store, button.we-app-store { + width: 123px + } +} + +a.we-app-store img, button.we-app-store img { + height: 100%; + left: 0; + right: auto !important; + top: 0; + width: 100% +} + +a.we-app-store:hover, button.we-app-store:hover { + background-color: transparent; + border: 0 +} + +a.we-btn-white, button.we-btn-white { + align-items: center; + background-color: #fff; + border: 2px solid #fff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-white, button.we-btn-white { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-white span, button.we-btn-white span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-white span:after, button.we-btn-white span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-white span:after, button.we-btn-white span:after { + top: 6px + } +} + +a.we-btn-white:hover span, button.we-btn-white:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-white:hover span:after, button.we-btn-white:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-white span, button.we-btn-white span { + color: #000 +} + +a.we-btn-white span:after, button.we-btn-white span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) no-repeat; + background-size: cover +} + +a.we-btn-transparent, button.we-btn-transparent { + align-items: center; + background-color: transparent; + border: 2px solid #fff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-transparent, button.we-btn-transparent { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-transparent span, button.we-btn-transparent span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-transparent span:after, button.we-btn-transparent span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-transparent span:after, button.we-btn-transparent span:after { + top: 6px + } +} + +a.we-btn-transparent:hover span, button.we-btn-transparent:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-transparent:hover span:after, button.we-btn-transparent:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-transparent span:after, button.we-btn-transparent span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) no-repeat; + background-size: cover +} + +a.we-btn-transparent:hover, button.we-btn-transparent:hover { + background-color: #fff +} + +a.we-btn-transparent:hover span, button.we-btn-transparent:hover span { + color: #000 +} + +a.we-btn-black-border, button.we-btn-black-border { + align-items: center; + background-color: transparent; + border: 2px solid #000; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-black-border, button.we-btn-black-border { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-black-border span, button.we-btn-black-border span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-black-border span:after, button.we-btn-black-border span:after { + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-black-border span:after, button.we-btn-black-border span:after { + top: 6px + } +} + +a.we-btn-black-border:hover span, button.we-btn-black-border:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-black-border:hover span:after, button.we-btn-black-border:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-black-border span, button.we-btn-black-border span { + color: #000 +} + +a.we-btn-black-border span:after, button.we-btn-black-border span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: "" +} + +a.we-btn-black-border:hover, button.we-btn-black-border:hover { + background-color: #000 +} + +a.we-btn-black-border:hover span, button.we-btn-black-border:hover span { + color: #fff +} + +.button.we-btn-search, a.we-btn-search, button.we-btn-search { + align-items: center; + background-color: #fff; + border: 2px solid #fff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + height: 55px; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 5px 31px 8px 67px; + position: relative; + text-align: center; + text-align: left; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + .button.we-btn-search, a.we-btn-search, button.we-btn-search { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +.button.we-btn-search span, a.we-btn-search span, button.we-btn-search span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +.button.we-btn-search span:after, a.we-btn-search span:after, button.we-btn-search span:after { + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + .button.we-btn-search span:after, a.we-btn-search span:after, button.we-btn-search span:after { + top: 6px + } +} + +.button.we-btn-search:hover span, a.we-btn-search:hover span, button.we-btn-search:hover span { + transform: translate3d(-11px, 0, 0) +} + +.button.we-btn-search:hover span:after, a.we-btn-search:hover span:after, button.we-btn-search:hover span:after { + opacity: 1; + right: -22px +} + +.button.we-btn-search:before, a.we-btn-search:before, button.we-btn-search:before { + background: url(https://www.bitdefender.com/content/dam/bitdefender/search-icon.svg) no-repeat; + background-size: cover; + content: ""; + height: 30px; + left: 21px; + position: absolute; + top: 10px; + width: 30px +} + +@media (max-width: 595px) { + .button.we-btn-search:before, a.we-btn-search:before, button.we-btn-search:before { + top: calc(50% - 16px) + } +} + +.button.we-btn-search span, a.we-btn-search span, button.we-btn-search span { + color: #000 +} + +.button.we-btn-search span:after, a.we-btn-search span:after, button.we-btn-search span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: "" +} + +.button.we-btn-search small, a.we-btn-search small, button.we-btn-search small { + display: block; + font-weight: 400; + letter-spacing: .022em +} + +.button.we-btn-search:hover, a.we-btn-search:hover, button.we-btn-search:hover { + background-color: #fff; + height: 55px; + padding: 5px 31px 8px 67px; + text-align: left +} + +.button.we-btn-search:hover:before, a.we-btn-search:hover:before, button.we-btn-search:hover:before { + background: url(https://www.bitdefender.com/content/dam/bitdefender/search-icon.svg) no-repeat; + background-size: cover; + content: ""; + height: 30px; + left: 21px; + position: absolute; + top: 10px; + width: 30px +} + +.button.we-btn-search:hover span, a.we-btn-search:hover span, button.we-btn-search:hover span { + color: #000 +} + +.button.we-btn-search:hover span:after, a.we-btn-search:hover span:after, button.we-btn-search:hover span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: "" +} + +.button.we-btn-search:hover small, a.we-btn-search:hover small, button.we-btn-search:hover small { + display: block; + font-weight: 400; + letter-spacing: .022em +} + +.button.we-btn-search:hover:hover, a.we-btn-search:hover:hover, button.we-btn-search:hover:hover { + background-color: #fff; + padding: 5px 31px 8px 67px +} + +.button.we-btn-search:hover:hover span, a.we-btn-search:hover:hover span, button.we-btn-search:hover:hover span { + color: #000 +} + +.button.we-btn-search:hover:hover span:after, a.we-btn-search:hover:hover span:after, button.we-btn-search:hover:hover span:after { + display: none +} + +a.we-btn-blue-border, button.we-btn-blue-border { + align-items: center; + background-color: transparent; + border: 2px solid #006eff; + border-radius: 8px; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + a.we-btn-blue-border, button.we-btn-blue-border { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +a.we-btn-blue-border span, button.we-btn-blue-border span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +a.we-btn-blue-border span:after, button.we-btn-blue-border span:after { + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + a.we-btn-blue-border span:after, button.we-btn-blue-border span:after { + top: 6px + } +} + +a.we-btn-blue-border:hover span, button.we-btn-blue-border:hover span { + transform: translate3d(-11px, 0, 0) +} + +a.we-btn-blue-border:hover span:after, button.we-btn-blue-border:hover span:after { + opacity: 1; + right: -22px +} + +a.we-btn-blue-border span, button.we-btn-blue-border span { + color: #006eff +} + +a.we-btn-blue-border span:after, button.we-btn-blue-border span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: "" +} + +a.we-btn-blue-border:hover, button.we-btn-blue-border:hover { + background-color: #006eff +} + +a.we-btn-blue-border:hover span, button.we-btn-blue-border:hover span { + color: #fff +} + +.we-link-with-white { + color: #fff; + display: inline-block; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + position: relative; + z-index: 1 +} + +@media (max-width: 767px) { + .we-link-with-white { + font-size: 16px + } +} + +.we-link-with-white:first-letter { + text-transform: uppercase +} + +.we-link-with-white span { + position: relative +} + +.we-link-with-white span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + margin-left: 5px; + position: relative; + top: 0; + transform: translateX(0); + transition: all .2s cubic-bezier(.4, 0, .2, 1); + width: 15px +} + +.we-link-with-white:hover span:after { + transform: translateX(4px) +} + +.we-link-with-blue { + color: #005ed9; + cursor: pinter; + display: inline-block; + font-size: 16px; + font-weight: 500; + line-height: 1.3; + position: relative; + z-index: 1 +} + +@media (max-width: 767px) { + .we-link-with-blue { + font-size: 16px + } +} + +.we-link-with-blue:first-letter { + text-transform: uppercase +} + +.we-link-with-blue span { + position: relative +} + +.we-link-with-blue span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + margin-left: 5px; + position: relative; + top: 0; + transform: translateX(0); + transition: all .2s cubic-bezier(.4, 0, .2, 1); + width: 15px +} + +.we-link-with-blue:hover span:after { + transform: translateX(4px) +} + +.we-link-with-blue span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) no-repeat +} + +.we-link-with-blue:hover { + color: #00439c +} + +.we-link-with-blue:hover span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/dark-blue-arrow.svg) no-repeat +} + +.we-link-with-blue.download { + padding-left: 20px +} + +.we-link-with-blue.download:before { + background: url(https://www.bitdefender.com/content/dam/bitdefender/download.svg) no-repeat; + content: ""; + display: inline-block; + height: 14px; + left: -20px; + position: relative; + width: 16px +} + +.we-link-with-blue.download span:after { + display: none +} + +.we-link-with-blue.see-more span:after { + background: none; + border-bottom: 2px solid #006eff; + border-right: 2px solid #006eff; + height: 7px; + top: -2px; + transform: rotate(45deg); + width: 7px +} + +.we-link-with-blue.see-more.close-it span:after { + top: 3px; + transform: rotate(-135deg) +} + +.we-link-download { + color: #006eff; + margin-right: 13px; + padding-left: 8px; + position: relative +} + +.we-link-download:hover { + opacity: .8 +} + +.we-link-download:before { + background: url(https://www.bitdefender.com/content/dam/bitdefender/download_icon.svg) no-repeat; + content: ""; + display: inline-block; + height: 14px; + left: -8px; + position: relative; + width: 16px +} + +.we-link-user-guide { + color: #006eff; + margin-right: 13px; + padding-left: 8px; + position: relative +} + +.we-link-user-guide:hover { + opacity: .8 +} + +.we-link-user-guide:before { + background: url(https://www.bitdefender.com/content/dam/bitdefender/mannual_icon.svg) no-repeat; + content: ""; + display: inline-block; + height: 16px; + left: -8px; + position: relative; + width: 16px +} + +html { + scroll-behavior: smooth +} + +.await-loader { + animation-duration: 3s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: place-holder-shimmer; + animation-timing-function: linear; + background: linear-gradient(90deg, #eee 8%, #bbb 18%, #eee 33%); + background-size: 800px 104px; + cursor: default; + min-height: 4.3rem; + opacity: .4; + position: relative +} + +.await-loader * { + opacity: 0 +} + +.global-display-none { + display: none !important +} + +.global-opacity-zero { + opacity: 0 !important +} + +.global-visibility-hidden { + visibility: hidden !important +} + +.product-not-available { + font-size: .875rem !important; + line-height: 1.25rem !important; + text-align: inherit !important +} + +.fixed-sticky { + position: fixed; + width: 100%; + z-index: 99 +} + +body { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + background-color: #fff; + box-sizing: border-box; + margin: 0 auto; + max-width: 1920px; + position: relative +} + +body.service-overlay-open { + overflow-y: hidden +} + +body main.container, body > section { + padding: 0 !important +} + +li, ol, ul { + font-family: roboto, sans-serif; + margin: 0; + padding: 0 +} + +html { + background-color: #fff +} + +ol, ul { + padding-left: 15px +} + +li { + font-size: 16px; + line-height: 1.63; + margin-bottom: 14px; + padding-left: 22px +} + +section ul { + text-align: left +} + +section ul li { + font-family: roboto, sans-serif; + font-size: 18px; + font-stretch: normal; + font-style: normal; + font-weight: 400; + letter-spacing: normal; + line-height: 1.67; + margin: 15px 0; + padding-left: 20px; + position: relative +} + +@media (min-width: 768px)and (max-width: 991px) { + section ul li { + font-size: 16px + } +} + +@media (max-width: 767px) { + section ul li { + font-size: 16px + } +} + +section ul li:before { + content: ""; + height: 8px; + left: 0; + position: absolute; + top: 11px; + width: 8px +} + +@media (max-width: 767px) { + section ul li:before { + top: 8px + } +} + +a { + cursor: pointer; + font-family: roboto, sans-serif +} + +a, a:hover { + outline: 0; + text-decoration: none +} + +audio, button, fieldset, figure, footer, form, h1, h3, h4, h5, h6, header, label, menu, nav, p, section, table, tbody, td, th, tr, video { + border: 0; + margin: 0 +} + +img { + border: 0; + height: auto; + max-width: 100%; + vertical-align: top; + width: 100% +} + +.we-container { + margin: 0 auto; + max-width: 1332px; + padding: 0 20px; + position: relative; + width: 100% +} + +@media (max-width: 1599px) { + .we-container { + max-width: 1300px; + padding: 0 50px + } +} + +@media (max-width: 991px) { + .we-container { + padding: 0 20px + } +} + +.we-container:after { + clear: both; + content: ""; + display: block +} + +.we-container-fluid { + max-width: 100% +} + +.section, footer, section { + position: relative; + width: 100% +} + +.section, section { + overflow: hidden; + padding: 120px 0 +} + +@media (max-width: 1399px) { + .section, section { + padding: 96px 0 + } +} + +@media (max-width: 1199px) { + .section, section { + padding: 96px 0 + } +} + +@media (min-width: 768px)and (max-width: 991px) { + .section, section { + padding: 64px 0 + } +} + +@media (max-width: 767px) { + .section, section { + padding: 64px 0 + } + + .section:after, section:after { + display: none + } +} + +.default-padding { + padding: 120px 0 +} + +@media (max-width: 1399px) { + .default-padding { + padding: 96px 0 + } +} + +@media (max-width: 1199px) { + .default-padding { + padding: 96px 0 + } +} + +@media (max-width: 991px) { + .default-padding { + padding: 64px 0 + } +} + +@media (max-width: 767px) { + .default-padding { + padding: 64px 0 + } +} + +.margin-top-103 { + margin-top: 103px +} + +@media (max-width: 991px) { + .margin-top-103 { + margin-top: 63px + } +} + +.padding-top-extra-large { + padding-top: 150px +} + +@media (max-width: 1199px) { + .padding-top-extra-large { + padding-top: 96px + } +} + +@media (max-width: 991px) { + .padding-top-extra-large { + padding-top: 64px + } +} + +@media (max-width: 767px) { + .padding-top-extra-large { + padding-top: 64px + } +} + +.padding-medium { + padding: 96px 0 +} + +@media (max-width: 1199px) { + .padding-medium { + padding: 96px 0 + } +} + +@media (max-width: 991px) { + .padding-medium { + padding: 64px 0 + } +} + +@media (max-width: 767px) { + .padding-medium { + padding: 64px 0 + } +} + +.padding-medium-top { + padding-top: 96px +} + +@media (max-width: 1199px) { + .padding-medium-top { + padding-top: 96px + } +} + +@media (max-width: 991px) { + .padding-medium-top { + padding-top: 64px + } +} + +@media (max-width: 767px) { + .padding-medium-top { + padding-top: 64px + } +} + +.padding-medium-bottom { + padding-bottom: 96px +} + +@media (max-width: 1199px) { + .padding-medium-bottom { + padding-bottom: 96px + } +} + +@media (max-width: 991px) { + .padding-medium-bottom { + padding-bottom: 64px + } +} + +@media (max-width: 767px) { + .padding-medium-bottom { + padding-bottom: 64px + } +} + +.padding-generic-container-quote-with-logo { + padding: 0 0 47px +} + +@media (max-width: 1199px) { + .padding-generic-container-quote-with-logo { + padding: 29px 0 47px + } +} + +@media (max-width: 991px) { + .padding-generic-container-quote-with-logo { + padding: 24px 0 47px + } +} + +@media (max-width: 767px) { + .padding-generic-container-quote-with-logo { + padding: 30px 0 + } +} + +.padding-large { + padding: 120px 0 +} + +@media (max-width: 1199px) { + .padding-large { + padding: 96px 0 + } +} + +@media (max-width: 991px) { + .padding-large { + padding: 64px 0 + } +} + +@media (max-width: 767px) { + .padding-large { + padding: 64px 0 + } +} + +.padding-large-top { + padding-top: 120px +} + +@media (max-width: 1199px) { + .padding-large-top { + padding-top: 96px + } +} + +@media (max-width: 991px) { + .padding-large-top { + padding-top: 64px + } +} + +@media (max-width: 767px) { + .padding-large-top { + padding-top: 64px + } +} + +.padding-large-bottom { + padding-bottom: 120px +} + +@media (max-width: 1199px) { + .padding-large-bottom { + padding-bottom: 96px + } +} + +@media (max-width: 991px) { + .padding-large-bottom { + padding-bottom: 64px + } +} + +@media (max-width: 767px) { + .padding-large-bottom { + padding-bottom: 64px + } +} + +.padding-small { + padding: 64px 0 +} + +.overflow-padding { + margin-top: -150px; + padding: 0 +} + +.padding-60 { + padding: 40px 0 +} + +@media (max-width: 991px) { + .padding-60 { + padding: 64px 0 + } +} + +@media (min-width: 992px) { + .padding-small-top { + padding-top: 64px + } +} + +@media (max-width: 991px) { + .padding-small-top { + padding-top: 64px + } +} + +@media (min-width: 992px) { + .padding-small-bottom { + padding-bottom: 64px + } +} + +@media (max-width: 991px) { + .padding-small-bottom { + padding-bottom: 64px !important + } +} + +@media (min-width: 992px) { + .padding-extra-small-top { + padding-top: 25px + } +} + +@media (max-width: 991px) { + .padding-extra-small-top { + padding-top: 64px + } +} + +@media (min-width: 992px) { + .padding-extra-small-bottom { + padding-bottom: 25px + } +} + +@media (max-width: 991px) { + .padding-extra-small-bottom { + padding-bottom: 64px + } +} + +.margin-large { + margin: 120px 0 +} + +@media (max-width: 1199px) { + .margin-large { + margin: 96px 0 + } +} + +@media (max-width: 991px) { + .margin-large { + margin: 64px 0 + } +} + +@media (max-width: 767px) { + .margin-large { + margin: 64px 0 + } +} + +@media (min-width: 1332px) { + .margin-large-top { + margin-top: 120px + } +} + +@media (max-width: 1199px) { + .margin-large-top { + marign-top: 96px + } +} + +@media (max-width: 991px) { + .margin-large-top { + margin-top: 64px + } +} + +@media (min-width: 1332px) { + .margin-large-bottom { + margin-bottom: 120px + } +} + +@media (max-width: 1199px) { + .margin-large-bottom { + marign-bottom: 96px + } +} + +@media (max-width: 991px) { + .margin-large-bottom { + margin-bottom: 64px + } +} + +@media (min-width: 1332px) { + .margin-medium { + margin: 96px 0 + } + + .margin-medium-top { + margin-top: 96px + } + + .margin-medium-bottom { + margin-bottom: 96px + } +} + +@media (min-width: 992px) { + .margin-small { + margin: 64px 0 + } + + .margin-small-top { + margin-top: 64px + } + + .margin-small-bottom { + margin-bottom: 64px + } +} + +.no-margin-top { + margin-top: 0 !important +} + +.no-margin-bottom { + margin-bottom: 0 !important +} + +.we-zindex-dropdown { + z-index: 1000 +} + +.we-zindex-sticky { + z-index: 1020 +} + +.we-zindex-fixed { + z-index: 1030 +} + +.we-zindex-modal-backdrop { + z-index: 1040 +} + +.we-zindex-modal { + z-index: 1050 +} + +.we-zindex-popover { + z-index: 1060 +} + +.we-zindex-tooltip { + z-index: 1070 +} + +input:-webkit-autofill { + -webkit-box-shadow: inset 0 0 0 30px #fff +} + +input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { + -webkit-appearance: none +} + +input[type=number] { + -moz-appearance: textfield +} + +.v-middle-wrapper { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100% +} + +.v-middle-inner { + display: table; + height: 100%; + width: 100% +} + +.v-middle { + display: table-cell; + vertical-align: middle +} + +.col-wrapper:after, .column-wrapper:after, .container:after, .content-wrapper:after, .grid-wrapper:after, .two-third:after, .v-middle-wrapper:after, .wrapper:after, header:after { + clear: both; + content: ""; + display: block +} + +.we-col-two { + position: relative; + width: 50% +} + +.we-col { + width: 100% +} + +.we-col-three { + width: 33.33% +} + +@media (max-width: 767px) { + .we-col-three { + width: 100% + } +} + +.we-col-four { + width: 25% +} + +@media (max-width: 767px) { + .we-col-four { + width: 100% + } +} + +.we-col-five { + width: 20% +} + +@media (max-width: 767px) { + .we-col-five { + width: 100% + } +} + +.we-col-six { + width: 16.66% +} + +@media (max-width: 767px) { + .we-col-six { + width: 100% + } +} + +.we-col-seven { + width: 66.66% +} + +@media (max-width: 767px) { + .we-col-seven { + width: 100% + } +} + +h1 { + color: #000; + font-family: roboto, sans-serif; + font-size: 56px; + font-weight: 700; + line-height: 1.21; + margin-bottom: 25px +} + +@media (min-width: 1200px)and (max-width: 1599px) { + h1 { + font-size: 50px; + letter-spacing: -.013em + } +} + +@media (min-width: 992px)and (max-width: 1199px) { + h1 { + font-size: 50px + } +} + +@media (min-width: 768px)and (max-width: 991px) { + h1 { + font-size: 42px + } +} + +@media (min-width: 596px)and (max-width: 767px) { + h1 { + font-size: 38px + } +} + +@media (min-width: 481px)and (max-width: 595px) { + h1 { + font-size: 34px + } +} + +@media (max-width: 480px) { + h1 { + font-size: 32px + } +} + +h1 span { + color: #fff; + display: inline-block; + font-size: 56px; + font-weight: 700; + line-height: 1.21 +} + +@media (max-width: 1399px) { + h1 span { + font-size: 50px + } +} + +@media (max-width: 1199px) { + h1 span { + font-size: 50px + } +} + +@media (max-width: 991px) { + h1 span { + font-size: 42px + } +} + +@media (max-width: 767px) { + h1 span { + font-size: 38px + } +} + +@media (max-width: 595px) { + h1 span { + font-size: 34px + } +} + +h2 { + color: #000; + font-family: roboto, sans-serif; + font-size: 40px; + font-weight: 500; + line-height: 1.2; + margin-bottom: 22px +} + +@media (max-width: 1399px) { + h2 { + font-size: 38px + } +} + +@media (max-width: 1199px) { + h2 { + font-size: 38px + } +} + +@media (max-width: 991px) { + h2 { + font-size: 34px; + margin-bottom: 15px + } +} + +@media (max-width: 767px) { + h2 { + font-size: 32px + } +} + +h2 span { + color: #fff; + display: inline-block; + font-size: 40px; + font-weight: 500; + line-height: 1.2 +} + +@media (max-width: 1399px) { + h2 span { + font-size: 38px + } +} + +@media (max-width: 1199px) { + h2 span { + font-size: 38px + } +} + +@media (max-width: 991px) { + h2 span { + font-size: 34px + } +} + +@media (max-width: 767px) { + h2 span { + font-size: 32px + } +} + +h3 { + color: #000; + font-family: roboto, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 1.15; + margin-bottom: 24px +} + +@media (max-width: 1399px) { + h3 { + font-size: 30px + } +} + +@media (max-width: 1199px) { + h3 { + font-size: 26px + } +} + +@media (max-width: 991px) { + h3 { + font-size: 24px; + margin-bottom: 15px + } +} + +@media (max-width: 767px) { + h3 { + font-size: 22px + } +} + +@media (max-width: 595px) { + h3 { + font-size: 20px + } +} + +h4 { + color: #000; + font-family: roboto, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 1.25; + margin-bottom: 9px +} + +@media (max-width: 1399px) { + h4 { + font-size: 22px + } +} + +@media (max-width: 1199px) { + h4 { + font-size: 22px + } +} + +@media (max-width: 991px) { + h4 { + font-size: 20px + } +} + +@media (max-width: 767px) { + h4 { + font-size: 18px + } +} + +@media (max-width: 595px) { + h4 { + font-size: 18px + } +} + +h5 { + color: #3c3c3c; + font-family: roboto, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5 +} + +@media (max-width: 767px) { + h5 { + font-size: 16px + } +} + +h6 { + color: #000; + font-size: 16px; + font-weight: 500 +} + +.para-18, h6 { + font-family: roboto, sans-serif; + line-height: 1.5 +} + +.para-18 { + color: #3c3c3c; + font-size: 18px; + font-weight: 400 +} + +@media (max-width: 767px) { + .para-18 { + font-size: 16px + } +} + +p { + color: #000; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: .006em; + line-height: 1.31 +} + +@media (max-width: 1399px) { + p { + font-size: 14px + } +} + +p a { + color: #006eff +} + +.small-font { + color: #000; + font-size: 12px; + font-weight: 400; + line-height: 1.31 +} + +.heading-1, .small-font, span { + font-family: roboto, sans-serif +} + +.heading-1 { + color: #000; + font-size: 56px; + font-weight: 700; + line-height: 1.21; + margin-bottom: 25px +} + +@media (max-width: 1399px) { + .heading-1 { + font-size: 50px; + letter-spacing: -.013em + } +} + +@media (max-width: 1199px) { + .heading-1 { + font-size: 50px + } +} + +@media (max-width: 991px) { + .heading-1 { + font-size: 42px + } +} + +@media (max-width: 767px) { + .heading-1 { + font-size: 38px + } +} + +@media (max-width: 595px) { + .heading-1 { + font-size: 34px + } +} + +.heading-1 .bolder-text { + color: #fff; + display: inline-block; + font-size: 56px; + font-weight: 700; + line-height: 1.21 +} + +@media (max-width: 1399px) { + .heading-1 .bolder-text { + font-size: 50px + } +} + +@media (max-width: 1199px) { + .heading-1 .bolder-text { + font-size: 50px + } +} + +@media (max-width: 991px) { + .heading-1 .bolder-text { + font-size: 42px + } +} + +@media (max-width: 767px) { + .heading-1 .bolder-text { + font-size: 38px + } +} + +@media (max-width: 595px) { + .heading-1 .bolder-text { + font-size: 34px + } +} + +.heading-2 { + color: #000; + font-family: roboto, sans-serif; + font-size: 40px; + font-weight: 500; + line-height: 1.2; + margin-bottom: 22px +} + +@media (max-width: 1399px) { + .heading-2 { + font-size: 38px + } +} + +@media (max-width: 1199px) { + .heading-2 { + font-size: 38px + } +} + +@media (max-width: 991px) { + .heading-2 { + font-size: 34px; + margin-bottom: 15px + } +} + +@media (max-width: 767px) { + .heading-2 { + font-size: 32px + } +} + +.heading-2 .bolder-text { + color: #fff; + display: inline-block; + font-size: 40px; + font-weight: 500; + line-height: 1.2 +} + +@media (max-width: 1399px) { + .heading-2 .bolder-text { + font-size: 38px + } +} + +@media (max-width: 1199px) { + .heading-2 .bolder-text { + font-size: 38px + } +} + +@media (max-width: 991px) { + .heading-2 .bolder-text { + font-size: 34px + } +} + +@media (max-width: 767px) { + .heading-2 .bolder-text { + font-size: 32px + } +} + +.heading-3 { + color: #000; + font-family: roboto, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 1.15; + margin-bottom: 24px +} + +@media (max-width: 1399px) { + .heading-3 { + font-size: 30px + } +} + +@media (max-width: 1199px) { + .heading-3 { + font-size: 26px + } +} + +@media (max-width: 991px) { + .heading-3 { + font-size: 24px; + margin-bottom: 15px + } +} + +@media (max-width: 767px) { + .heading-3 { + font-size: 22px + } +} + +@media (max-width: 595px) { + .heading-3 { + font-size: 20px + } +} + +.heading-4 { + color: #000; + font-family: roboto, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 1.25; + margin-bottom: 9px +} + +@media (max-width: 1399px) { + .heading-4 { + font-size: 22px + } +} + +@media (max-width: 1199px) { + .heading-4 { + font-size: 22px + } +} + +@media (max-width: 991px) { + .heading-4 { + font-size: 20px + } +} + +@media (max-width: 767px) { + .heading-4 { + font-size: 18px + } +} + +@media (max-width: 595px) { + .heading-4 { + font-size: 18px + } +} + +.heading-5 { + color: #3c3c3c; + font-family: roboto, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5 +} + +@media (max-width: 767px) { + .heading-5 { + font-size: 16px + } +} + +.heading-6 { + font-size: 16px; + font-weight: 500; + line-height: 1.5 +} + +.h1, .heading-6 { + color: #000; + font-family: roboto, sans-serif +} + +.h1 { + font-size: 56px; + font-weight: 700; + line-height: 1.21 +} + +@media (max-width: 1399px) { + .h1 { + font-size: 50px; + letter-spacing: -.013em + } +} + +@media (max-width: 1199px) { + .h1 { + font-size: 50px + } +} + +@media (max-width: 991px) { + .h1 { + font-size: 42px + } +} + +@media (max-width: 767px) { + .h1 { + font-size: 38px + } +} + +@media (max-width: 595px) { + .h1 { + font-size: 34px + } +} + +.h2 { + color: #000; + font-family: roboto, sans-serif; + font-size: 40px; + font-weight: 500; + line-height: 1.2 +} + +@media (max-width: 1399px) { + .h2 { + font-size: 38px + } +} + +@media (max-width: 1199px) { + .h2 { + font-size: 38px + } +} + +@media (max-width: 991px) { + .h2 { + font-size: 34px; + margin-bottom: 15px + } +} + +@media (max-width: 767px) { + .h2 { + font-size: 32px + } +} + +.h3 { + color: #000; + font-family: roboto, sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 1.15 +} + +@media (max-width: 1399px) { + .h3 { + font-size: 30px + } +} + +@media (max-width: 1199px) { + .h3 { + font-size: 26px + } +} + +@media (max-width: 991px) { + .h3 { + font-size: 24px; + margin-bottom: 15px + } +} + +@media (max-width: 767px) { + .h3 { + font-size: 22px + } +} + +@media (max-width: 595px) { + .h3 { + font-size: 20px + } +} + +.h4 { + color: #000; + font-family: roboto, sans-serif; + font-size: 24px; + font-weight: 500; + line-height: 1.25 +} + +@media (max-width: 1399px) { + .h4 { + font-size: 22px + } +} + +@media (max-width: 1199px) { + .h4 { + font-size: 22px + } +} + +@media (max-width: 991px) { + .h4 { + font-size: 20px + } +} + +@media (max-width: 767px) { + .h4 { + font-size: 18px + } +} + +@media (max-width: 595px) { + .h4 { + font-size: 18px + } +} + +.h5 { + color: #3c3c3c; + font-family: roboto, sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5 +} + +@media (max-width: 767px) { + .h5 { + font-size: 16px + } +} + +.h6 { + font-weight: 500; + line-height: 1.5 +} + +.h6, .paragraph { + color: #000; + font-family: roboto, sans-serif; + font-size: 16px +} + +.paragraph { + font-weight: 400; + letter-spacing: .006em; + line-height: 1.31 +} + +@media (max-width: 1399px) { + .paragraph { + font-size: 14px + } +} + +.paragraph .anchor { + color: #006eff +} + +h1.mb-20, h2.mb-20, h3.mb-20, h4.mb-20, h5.mb-20, h6.mb-20 { + margin-bottom: 20px +} + +@media (max-width: 991px) { + h1.mb-20, h2.mb-20, h3.mb-20, h4.mb-20, h5.mb-20, h6.mb-20 { + margin-bottom: 10px + } +} + +h1.mb-10, h2.mb-10, h3.mb-10, h4.mb-10, h5.mb-10, h6.mb-10 { + margin-bottom: 10px !important +} + +@media (max-width: 767px) { + h1.mb-10, h2.mb-10, h3.mb-10, h4.mb-10, h5.mb-10, h6.mb-10 { + margin-bottom: 5px + } +} + +h1.mb-15, h2.mb-15, h3.mb-15, h4.mb-15, h5.mb-15, h6.mb-15 { + margin-bottom: 15px +} + +@media (max-width: 767px) { + h1.mb-15, h2.mb-15, h3.mb-15, h4.mb-15, h5.mb-15, h6.mb-15 { + margin-bottom: 10px + } +} + +.bg-img { + overflow: hidden +} + +.bg-img img { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: inherit; + object-position: inherit +} + +.bg-img .cmp-image { + height: 100%; + width: 100% +} + +.bg-white { + background-color: #fff !important +} + +.bg-black { + background-color: #000 !important +} + +.bg-light-black { + background-color: #3c3c3c !important +} + +.bg-gray { + background-color: #fff !important +} + +.bg-dark-blue { + background-color: #00338a !important +} + +.bg-blue { + background-color: #006eff !important +} + +.bg-smalt { + background-color: #00439c !important +} + +.bg-red { + background-color: red !important +} + +.bg-green { + background-color: #1cb6ad !important +} + +.bg-gray { + background-color: #616161 !important +} + +.bg-mid-gray { + background-color: #7e7e7e !important +} + +.bg-light-gray { + background-color: #c5c5c5 !important +} + +.bg-alto { + background-color: #dedede !important +} + +.bg-gallery { + background-color: #eee !important +} + +.bg-yellow { + background-color: #ffe522 !important +} + +.bg-skyblue { + background-color: #008cff !important +} + +.bg-blue1 { + background-color: #005ed9 !important +} + +.bg-darkish-blue { + background-color: #00439c !important +} + +.bg-ice-blue, .bg-light-sky-blue { + background-color: #e4f2ff !important +} + +.text-left { + text-align: left +} + +.text-right { + text-align: right +} + +.text-center { + text-align: center +} + +.no-padding { + padding: 0 !important +} + +.no-padding-top { + padding-top: 0 !important +} + +.xs-padding-top { + padding-top: 10px +} + +.sm-padding-top { + padding-top: 20px +} + +.md-padding-top { + padding-top: 40px +} + +.lg-padding-top { + padding-top: 80px +} + +@media (max-width: 1399px) { + .lg-padding-top { + padding-top: 60px + } +} + +@media (max-width: 991px) { + .lg-padding-top { + padding-top: 40px + } +} + +@media (max-width: 767px) { + .lg-padding-top { + padding-top: 40px + } +} + +.xl-padding-top { + padding-top: 120px +} + +@media (max-width: 1399px) { + .xl-padding-top { + padding-top: 96px + } +} + +@media (max-width: 991px) { + .xl-padding-top { + padding-top: 64px + } +} + +@media (max-width: 767px) { + .xl-padding-top { + padding-top: 64px + } +} + +.no-padding-bottom { + padding-bottom: 0 !important +} + +.xs-padding-bottom { + padding-bottom: 10px +} + +.sm-padding-bottom { + padding-bottom: 20px +} + +.md-padding-bottom { + padding-bottom: 40px +} + +.lg-padding-bottom { + padding-bottom: 80px +} + +@media (max-width: 1399px) { + .lg-padding-bottom { + padding-bottom: 60px + } +} + +@media (max-width: 991px) { + .lg-padding-bottom { + padding-bottom: 40px + } +} + +@media (max-width: 767px) { + .lg-padding-bottom { + padding-bottom: 40px + } +} + +.xl-padding-bottom { + padding-bottom: 120px +} + +@media (max-width: 1399px) { + .xl-padding-bottom { + padding-bottom: 96px + } +} + +@media (max-width: 991px) { + .xl-padding-bottom { + padding-bottom: 64px + } +} + +@media (max-width: 767px) { + .xl-padding-bottom { + padding-bottom: 64px + } +} + +.no-padding-bottom-very-small-top { + padding-bottom: 0 !important; + padding-top: 40px !important +} + +.no-padding-top-very-small-bottom { + padding-bottom: 40px; + padding-top: 0 +} + +@media (max-width: 767px) { + .no-padding-top-very-small-bottom { + padding-bottom: 20px + } +} + +.no-padding-top-small-bottom { + padding-bottom: 60px !important; + padding-top: 0 !important +} + +@media (max-width: 991px) { + .no-padding-top-small-bottom { + padding-bottom: 35px !important + } +} + +@media (max-width: 595px) { + .no-padding-top-small-bottom { + padding-bottom: 25px !important + } +} + +.no-padding-top-large-bottom { + padding-bottom: 64px !important; + padding-top: 0 !important +} + +@media (max-width: 767px) { + .no-padding-top-large-bottom { + padding-bottom: 84px !important + } +} + +@media (max-width: 595px) { + .no-padding-top-large-bottom { + padding-bottom: 64px !important + } +} + +.no-margin { + margin: 0 !important +} + +.zoom-in img { + transform: scale(1); + transition: transform .4s ease-in-out +} + +.zoom-in:hover img { + transform: scale(1.06) +} + +.zoom-bg .bg-img img { + transform: scale(1); + transition: transform .4s ease-in-out +} + +.zoom-bg:hover .bg-img img { + transform: scale(1.06) +} + +.blend-mode { + height: 100%; + left: 0; + mix-blend-mode: multiply; + position: absolute; + top: 0; + width: 100%; + z-index: 1 +} + +::-webkit-input-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1 +} + +::-moz-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1 +} + +:-ms-input-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1 +} + +:-moz-placeholder { + color: #000; + font-size: 14px; + font-weight: 400; + opacity: 1 +} + +::-ms-clear { + display: none; + height: 0; + width: 0 +} + +body.stop-scroll { + overflow: hidden +} + +.o-visible { + overflow: visible +} + +.o-hidden, .popup-open { + overflow: hidden +} + +.popup-open { + width: 100% +} + +.popup-open:after { + background: rgba(0, 0, 0, .5); + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 2 +} + +.index .container > ul > li { + margin-bottom: 30px +} + +.index .container > ul > li h3 { + margin-bottom: 20px +} + +.index .container > ul > li a { + color: #000 +} + +.index .container > ul > li ul { + padding-left: 40px +} + +.pattern-top-right { + position: absolute; + right: -27px; + top: -38px +} + +@media (max-width: 1199px) { + .pattern-top-right { + top: -30px + } +} + +@media (max-width: 991px) { + .pattern-top-right { + top: -25px + } +} + +section.intro-block { + margin-bottom: 50px; + text-align: left; + width: 100% +} + +@media (max-width: 1399px) { + section.intro-block { + margin-bottom: 40px + } +} + +@media (max-width: 1199px) { + section.intro-block { + margin-bottom: 40px + } +} + +@media (max-width: 991px) { + section.intro-block { + margin-bottom: 30px + } +} + +section.intro-block:after { + clear: both; + content: ""; + display: block +} + +section.intro-block h4 a { + color: #006eff; + transition: color .3s ease-in-out +} + +section.intro-block h4 a:hover { + color: #005ed9 +} + +@media (max-width: 595px) { + section.intro-block p { + word-break: break-word + } +} + +section.intro-block p a { + transition: color .3s ease-in-out +} + +@media (max-width: 595px) { + section.intro-block p a { + word-break: break-word + } +} + +section.intro-block p a:hover { + color: #005ed9; + text-decoration: underline +} + +section.intro-block .paragraph a { + transition: color .3s ease-in-out +} + +section.intro-block .paragraph a:hover { + color: #005ed9; + text-decoration: underline +} + +section.intro-block.with-link { + font-size: 0 +} + +section.intro-block.with-link .text-wrap { + display: inline-block; + padding-right: 40px; + width: calc(100% - 176px) +} + +@media (max-width: 595px) { + section.intro-block.with-link .text-wrap { + margin-bottom: 20px; + padding-right: 0; + width: 100% + } +} + +section.intro-block.with-link p { + color: #000; + font-size: 16px; + line-height: 1.5; + max-width: 765px +} + +@media (max-width: 1399px) { + section.intro-block.with-link p { + font-size: 16px + } +} + +section.intro-block.with-link .btn-wrap { + display: inline-block; + position: relative; + vertical-align: bottom; + width: 176px +} + +section.intro-block.with-link .btn-wrap a { + bottom: 30px; + margin-right: 0; + position: absolute; + right: 0 +} + +@media (max-width: 595px) { + section.intro-block.with-link .btn-wrap a { + position: static + } +} + +@media (max-width: 320px) { + section.intro-block a:last-of-type { + margin-right: 0 + } +} + +section.intro-block .text-wrap a.hidden { + display: none +} + +section.intro-block.dark { + background-color: #000 +} + +section.intro-block.dark h1, section.intro-block.dark h2, section.intro-block.dark h3, section.intro-block.dark h4, section.intro-block.dark h5, section.intro-block.dark h6, section.intro-block.dark p { + color: #fff +} + +section.intro-block.oem-intro.dark { + background-color: #000 +} + +section.intro-block.oem-intro.dark h1, section.intro-block.oem-intro.dark h2, section.intro-block.oem-intro.dark h3, section.intro-block.oem-intro.dark h4, section.intro-block.oem-intro.dark h5, section.intro-block.oem-intro.dark h6, section.intro-block.oem-intro.dark p { + color: #fff +} + +@media (min-width: 992px)and (max-width: 1200px) { + section.intro-block.oem-intro { + padding: 120px 0 + } +} + +section.intro-block.oem-intro ul { + margin: 15px 0; + padding-left: 21px +} + +section.intro-block.oem-intro ul li { + font-size: 16px; + margin: 5px 0; + padding-left: 0 +} + +@media (max-width: 1399px) { + section.intro-block.oem-intro ul li { + font-size: 14px + } +} + +section.intro-block.oem-intro table { + margin: 20px 0; + width: 100% +} + +@media (max-width: 480px) { + section.intro-block.oem-intro table p { + font-size: 12px + } +} + +@media (max-width: 320px) { + section.intro-block.oem-intro table p { + font-size: 11px + } +} + +@media (max-width: 595px) { + section.intro-block.oem-intro table.more-cols td, section.intro-block.oem-intro table.more-cols th { + font-size: 11px !important; + max-width: 90px !important + } +} + +@media (max-width: 320px) { + section.intro-block.oem-intro table.more-cols td, section.intro-block.oem-intro table.more-cols th { + font-size: 10px !important + } +} + +@media (max-width: 595px) { + section.intro-block.oem-intro table.more-cols li { + font-size: 11px !important + } +} + +@media (max-width: 320px) { + section.intro-block.oem-intro table.more-cols li { + font-size: 10px !important + } +} + +section.intro-block.oem-intro td, section.intro-block.oem-intro th { + border: 1px solid #616161; + font-family: roboto, sans-serif; + font-size: 16px; + line-height: 1.67; + padding: 10px; + vertical-align: top +} + +@media (max-width: 480px) { + section.intro-block.oem-intro td, section.intro-block.oem-intro th { + font-size: 12px; + padding: 10px 7px + } +} + +@media (max-width: 320px) { + section.intro-block.oem-intro td, section.intro-block.oem-intro th { + font-size: 11px; + padding: 10px 5px + } +} + +section.intro-block.oem-intro td ul, section.intro-block.oem-intro th ul { + margin: 0 +} + +@media (max-width: 480px) { + section.intro-block.oem-intro td ul, section.intro-block.oem-intro th ul { + list-style-type: none; + padding-left: 13px + } + + section.intro-block.oem-intro td ul li, section.intro-block.oem-intro th ul li { + font-size: 12px + } +} + +@media (max-width: 320px) { + section.intro-block.oem-intro td ul li, section.intro-block.oem-intro th ul li { + font-size: 11px + } +} + +section.intro-block.oem-intro td ul li:first-of-type, section.intro-block.oem-intro th ul li:first-of-type { + margin-top: 0 !important +} + +@media (max-width: 480px) { + section.intro-block.oem-intro td ul li:before, section.intro-block.oem-intro th ul li:before { + background-color: #000; + border-radius: 50%; + height: 4px; + left: -12px; + width: 4px + } +} + +section.intro-block.oem-intro p { + margin-bottom: 17px +} + +section.intro-block.oem-intro h3 img { + height: 30px; + max-width: 30px +} + +@media (max-width: 1024px) { + section.intro-block.oem-intro h3 img { + height: 23px; + max-width: 23px + } +} + +@media (max-width: 767px) { + section.intro-block.oem-intro h3 img { + height: 20px; + max-width: 20px + } +} + +section.intro-block.full-width-intro .text-wrap { + max-width: 100% +} + +.breadcrumb { + margin-bottom: 12px; + padding: 12px 0 +} + +.breadcrumb a { + color: #c5c5c5; + font-size: 12px; + font-weight: 500; + letter-spacing: .96px; + position: relative; + transition: all .4s ease; + z-index: 4 +} + +@media (max-width: 595px) { + .breadcrumb a { + line-height: 1.7 + } +} + +.breadcrumb a:hover { + color: #fff +} + +.breadcrumb a:after { + color: #dedede; + content: "/"; + display: inline-block; + font-size: 12px; + margin: 0 8px +} + +@media (max-width: 595px) { + .breadcrumb a:after { + margin: 0 3px + } +} + +@media (max-width: 320px) { + .breadcrumb a:after { + margin: 0 2px + } +} + +.breadcrumb a:first-child { + pointer-events: auto !important +} + +.breadcrumb a:last-child { + margin: 0; + padding: 0; + pointer-events: none +} + +.breadcrumb a:last-child:after { + margin-right: 0 +} + +.breadcrumb.oem-breadcrumb { + background: transparent; + padding: 128px 0 0 +} + +.breadcrumb.oem-breadcrumb a { + color: #616161 +} + +.breadcrumb.oem-breadcrumb a:hover { + color: #000 +} + +@media (max-width: 767px) { + .breadcrumb.bg-white { + padding: 130px 0 0 + } +} + +.breadcrumb.bg-white a.active { + color: #000 +} + +.breadcrumb.hover-black a, .breadcrumb.hover-black a:after { + color: #616161 +} + +.breadcrumb.hover-black a:hover { + color: #000 +} + +.breadcrumb.gray-color a { + color: #dedede +} + +.hs-form p { + color: #000 +} + +section.blue-bar { + background-color: #e4f2ff; + height: 40px; + padding: 0 +} + +section.blue-bar.height-32 { + height: 32px +} + +section.blue-bar.height-24 { + height: 24px +} + +.play-video:after { + background: #006eff url(https://www.bitdefender.com/content/dam/bitdefender/play_icon_blue.png) no-repeat 50%; + background-size: 100%; + border-radius: 50%; + content: ""; + cursor: pointer; + display: block; + height: 80px; + left: 50%; + opacity: .8; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + transition: opacity .3s ease-in-out; + width: 80px +} + +@media (max-width: 1199px) { + .play-video:after { + height: 60px; + width: 60px + } +} + +@media (max-width: 991px) { + .play-video:after { + height: 50px; + width: 50px + } +} + +@media (max-width: 480px) { + .play-video:after { + height: 40px; + width: 40px + } +} + +.play-video:hover:after { + opacity: 1 +} + +.popup-form { + background: #fff; + border-radius: 8px; + box-shadow: 0 0 8px -2px rgba(0, 0, 0, .1); + display: none; + left: 50%; + max-height: 100%; + max-width: 950px; + overflow-y: scroll; + padding: 30px; + position: fixed; + top: 50%; + transform: translate(-50%, -50%); + width: 95% +} + +.popup-form.active { + display: block; + z-index: 15 +} + +.popup-form .form-columns-2 { + display: flex; + flex-wrap: wrap; + width: 100% +} + +.popup-form input, .popup-form textarea { + background-color: #f5f8fa; + border: 1px solid #cbd6e2; + border-radius: 4px; + color: #616161; + display: block; + font-family: roboto, sans-serif; + font-size: 16px; + height: 40px; + margin: 0; + padding: 0 15px; + resize: none; + transition: all .1s ease; + width: 100% +} + +.popup-form #fname { + padding-right: 15px +} + +@media (max-width: 767px) { + .popup-form #fname { + padding-right: 0 + } +} + +.popup-form textarea { + height: auto; + line-height: 22px; + padding: 15px; + resize: both +} + +.popup-form li { + list-style-type: none +} + +.popup-form li, .popup-form ul { + padding-left: 0 +} + +.popup-form label { + display: inline-block; + font-family: roboto, sans-serif; + font-size: 16px; + margin: 0 0 10px +} + +.popup-form label.hidden { + display: none +} + +.popup-form .wrap { + display: flex; + flex-wrap: wrap; + margin-bottom: 20px; + width: 100% +} + +.popup-form .fname, .popup-form .lname { + width: 50% +} + +@media (max-width: 767px) { + .popup-form .fname, .popup-form .lname { + width: 100% + } +} + +.popup-form .lname { + padding-left: 15px +} + +@media (max-width: 767px) { + .popup-form .lname { + margin: 20px 0 0; + padding-left: 0 + } +} + +.popup-form .field { + margin-bottom: 20px +} + +@media (max-width: 767px) { + .popup-form .field { + margin-bottom: 10px + } +} + +.popup-form span { + color: red; + display: inline +} + +.popup-form .condition { + display: flex +} + +.popup-form .condition p { + display: inline; + padding-top: 4px +} + +.popup-form .check-box { + background-color: #f5f8fa; + display: inline; + height: 13px; + margin-right: 10px; + position: relative; + top: 7px; + width: -moz-fit-content; + width: fit-content +} + +.popup-form h6 { + font-size: 14px; + font-weight: 300; + margin: 12px 0 +} + +.popup-form .legal-consent-container { + margin-bottom: 30px +} + +.popup-form input[type=submit] { + align-items: center; + background-color: #eb0000; + border: 2px solid #eb0000; + border-radius: 8px; + color: #fff; + cursor: pointer; + display: inline-flex; + font-family: roboto, sans-serif; + font-size: 16px; + font-weight: 500; + height: -moz-fit-content; + height: fit-content; + justify-content: center; + margin-right: 13px; + margin-top: 8px; + min-width: 140px; + outline: none; + padding: 10px 26px 8px 28px; + position: relative; + text-align: center; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +@media (max-width: 767px) { + .popup-form input[type=submit] { + font-size: 16px; + height: -moz-fit-content; + height: fit-content; + min-width: auto; + padding: 6px 20px + } +} + +.popup-form input[type=submit] span { + color: #fff; + display: inline-block; + position: relative; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +.popup-form input[type=submit] span:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: inline-block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 7px; + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: right, opacity +} + +@media (max-width: 767px) { + .popup-form input[type=submit] span:after { + top: 6px + } +} + +.popup-form input[type=submit]:hover span { + transform: translate3d(-11px, 0, 0) +} + +.popup-form input[type=submit]:hover span:after { + opacity: 1; + right: -22px +} + +.popup-form input[type=submit]:hover { + background-color: #d80000; + border: 2px solid #d80000 +} + +.popup-form .close-btn { + background: url(https://www.bitdefender.com/content/dam/bitdefender/close-icon.svg) no-repeat; + background-size: 40px; + cursor: pointer; + height: 32px; + overflow: hidden; + position: absolute; + right: 12px; + top: 0; + width: 32px +} + +.popup-form .form-message-wrapper { + margin: 0 0 20px; + text-align: center +} + +input[type=text]::-ms-clear, input[type=text]::-ms-reveal { + display: none; + height: 0; + width: 0 +} + +input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { + display: none +} + +.we-interactive .op-interactive { + background: #000; + padding-top: 130px +} + +.we-loader { + animation: loader2 .8s linear infinite; + background: linear-gradient(-60deg, transparent, transparent 50%, #eee 0, #eee 75%, transparent 0, transparent); + background-position: 0 0; + background-size: 1em 2em; + border: .05em solid #eee; + border-radius: .1em; + color: transparent !important; + display: inline-block; + height: .66em; + vertical-align: middle; + width: 2em +} + +@keyframes loader2 { + 0% { + background-position: 0 0 + } + to { + background-position: -2em 0 + } +} + +@keyframes place-holder-shimmer { + 0% { + background-position: -800px 0 + } + to { + background-position: 800px 0 + } +} + +.strikethrough { + text-decoration: line-through +} + +.newpar.section { + padding: 0 +} + +.xf-content-height { + margin: 0 +} + +.mega-menu { + position: relative; + z-index: 5 +} + +.mega-menu__container { + background: #fff; + position: relative +} + +@media (min-width: 1200px) { + .mega-menu__container { + padding-bottom: 66px + } + + .mega-menu__container:has(.active.mega-menu--item-empty) { + padding-bottom: 0 + } +} + +.mega-menu__container:after { + background: #f0f0f0; + content: ""; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + width: 100%; + z-index: 2 +} + +.mega-menu__content { + --right-links-offset: calc(49px * var(--first-level-length)); + align-items: center; + display: flex; + height: 64px; + justify-content: space-between; + position: static; + width: 100% +} + +@media (min-width: 1200px) { + .mega-menu__content { + height: auto; + justify-content: flex-start + } +} + +.mega-menu a, .mega-menu span { + font-family: Arial, sans-serif +} + +.mega-menu__l2-link, .mega-menu__link, .mega-menu__right-link { + color: #000 +} + +.mega-menu__category-links { + display: none +} + +@media (min-width: 1200px) { + .mega-menu__category-links { + display: block + } +} + +.mega-menu__category-link { + color: #006dff; + display: inline-block; + font-size: .875rem; + margin-bottom: 12px; + margin-right: 20px +} + +@media (max-width: 1199px) { + .mega-menu__category-link { + font-size: 1rem + } +} + +.mega-menu ul { + list-style: none; + padding-left: 0 +} + +.mega-menu li { + margin-bottom: 0; + padding-left: 0 +} + +.mega-menu__logo { + display: block; + margin-right: 20px; + width: 164px +} + +.mega-menu__button-wrap { + display: flex; + flex-grow: 1; + justify-content: flex-end +} + +@media (min-width: 1200px) { + .mega-menu__button-wrap { + display: none + } +} + +.mega-menu__button { + cursor: pointer; + display: block; + position: relative +} + +.mega-menu__button-bar { + background-color: #000; + display: block; + height: 3px; + margin: 5px 0; + opacity: 1; + transition: transform .3s ease-in-out, opacity .3s; + width: 25px +} + +.mega-menu__button-bar:last-child { + margin-bottom: 0 +} + +@media (min-width: 1200px) { + .mega-menu__left-container { + flex-grow: 1 + } +} + +.mega-menu__left, .mega-menu__right { + display: none +} + +@media (min-width: 1200px) { + .mega-menu__left, .mega-menu__right { + display: flex + } +} + +@media (max-width: 1199px) { + .mega-menu__left { + background: #fff; + max-width: 450px; + min-height: 100vh; + position: absolute; + right: 0; + top: 100%; + width: 100% + } +} + +@media (max-width: 767px) { + .mega-menu__left { + max-width: 100%; + width: 100% + } +} + +@media (min-width: 1200px) { + .mega-menu__left { + flex-grow: 1 + } +} + +@media (max-width: 1199px) { + .mega-menu__right { + background: #fff; + max-width: 450px; + min-height: calc(100vh - var(--right-links-offset)); + position: absolute; + right: 0; + top: calc(100% + var(--right-links-offset)); + width: 100% + } +} + +@media (max-width: 767px) { + .mega-menu__right { + max-width: 100%; + width: 100% + } +} + +.mega-menu__link, .mega-menu__right-link { + border-bottom: 4px solid transparent; + color: #000; + cursor: pointer; + display: block; + font-size: .875rem; + line-height: 1; + margin-top: 15px; + padding: 16px 0 +} + +.mega-menu__link:hover, .mega-menu__right-link:hover { + color: #006dff +} + +@media (max-width: 1199px) { + .mega-menu__link, .mega-menu__right-link { + font-size: 1rem + } + + .mega-menu__right-link { + border-bottom: none; + margin-top: 0 + } + + .mega-menu__right-item:before { + content: none + } + + .mega-menu__right-item:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + margin-left: -20px; + margin-right: -20px; + position: absolute; + width: calc(100% + 40px) + } + + .mega-menu__right-item .navigation__heading + .navigation__links { + display: block + } +} + +.mega-menu__item, .mega-menu__right-item { + margin: 0 20px +} + +@media (max-width: 1199px) { + .mega-menu__item:after { + background: #f0f0f0; + content: ""; + height: 1px; + left: 0; + position: absolute; + width: 100% + } +} + +.mega-menu__item:not(:has(.mega-menu__list)) .mega-menu__link:after { + display: none +} + +@media (max-width: 1199px) { + .mega-menu__link { + border-bottom: none; + font-weight: 900; + margin-top: 0; + position: relative + } + + .mega-menu__link:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat; + background-size: 100%; + content: ""; + height: 16px; + position: absolute; + right: 5px; + top: 16px; + transform: rotate(90deg); + width: 16px + } +} + +.mega-menu__right-item { + position: relative +} + +.mega-menu__right-item:before { + background: #f0f0f0; + content: ""; + display: block; + height: 22px; + left: -20px; + position: absolute; + top: 28px; + width: 1px +} + +.mega-menu__first-level { + display: flex; + width: 100% +} + +@media (max-width: 1199px) { + .mega-menu__first-level { + flex-direction: column + } +} + +.mega-menu__back-button, .mega-menu__back-button-l2 { + background: url(https://www.bitdefender.com/content/dam/bitdefender/black-arrow.svg) 50% 50%/contain no-repeat; + background-size: 20px; + cursor: pointer; + display: inline-block; + height: 50px; + margin-left: -14px; + padding: 10px; + position: absolute; + top: 7px; + transform: rotate(180deg); + width: 50px +} + +@media (min-width: 1200px) { + .mega-menu__back-button, .mega-menu__back-button-l2 { + display: none + } +} + +.mega-menu__second-level { + background: #fff; + display: none; + left: 0; + position: absolute; + width: 100%; + z-index: 1 +} + +@media (max-width: 1199px) { + .mega-menu__second-level { + background: #fff; + min-height: 100vh; + top: 0 + } +} + +.mega-menu__second-level-content { + align-items: center; + display: flex; + justify-content: space-between; + position: static +} + +@media (max-width: 1199px) { + .mega-menu__second-level-content { + align-items: flex-start; + flex-direction: column; + padding: 0 20px + } +} + +.mega-menu__second-level:after { + background: #f0f0f0; + bottom: -1px; + content: ""; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + width: 100%; + z-index: 2 +} + +.mega-menu__list { + align-items: center; + display: flex; + height: 64px; + padding-left: 0 +} + +@media (max-width: 1199px) { + .mega-menu__list { + align-items: flex-start; + flex-direction: column; + height: 100%; + padding-top: 66px; + width: 100% + } + + .mega-menu__list:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100% + } +} + +@media (min-width: 1200px) { + .mega-menu ul.mega-menu__list { + padding-left: 204px + } +} + +.mega-menu__l2-link { + color: #000; + font-size: .875rem; + line-height: 1; + padding-right: 18px; + position: relative +} + +.mega-menu__l2-link:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat; + background-size: 100%; + content: ""; + height: 10px; + position: absolute; + right: 0; + top: 3px; + transform: rotate(180deg); + width: 10px +} + +@media (max-width: 1199px) { + .mega-menu__l2-link { + display: block; + font-size: 1rem; + font-weight: 900; + padding: 13px 0; + width: 100% + } + + .mega-menu__l2-link:after { + height: 16px; + top: 12px; + transform: rotate(90deg); + width: 16px + } +} + +.mega-menu__l2-item { + cursor: pointer; + margin-bottom: 0; + padding-left: 0; + padding-right: 24px +} + +@media (min-width: 1200px) { + .mega-menu__l2-item { + padding-bottom: 20px; + padding-top: 20px + } +} + +@media (max-width: 1199px) { + .mega-menu__l2-item { + padding-right: 0; + width: 100% + } + + .mega-menu__l2-item:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100% + } +} + +@media (min-width: 1200px) { + .mega-menu__l2-item:hover .mega-menu__third-level { + display: block + } + + .mega-menu__l2-item:hover .mega-menu__l2-link { + color: #006dff + } + + .mega-menu__l2-item:hover .mega-menu__l2-link:after { + transform: rotate(0deg) + } +} + +.mega-menu__l2-item.active .mega-menu__third-level { + display: block +} + +@media (min-width: 1200px) { + .mega-menu__item.active .mega-menu__link, .mega-menu__item.mega-menu--item-opened .mega-menu__link { + border-bottom: 4px solid #006dff + } + + .mega-menu__item.active .mega-menu__second-level, .mega-menu__item.mega-menu--item-opened .mega-menu__second-level { + display: block + } +} + +@media (max-width: 1199px) { + .mega-menu--item-opened .mega-menu__second-level { + display: block + } +} + +.mega-menu__right-top-link { + margin-bottom: 11px; + margin-top: 11px +} + +@media (max-width: 1199px) { + .mega-menu__right-top-link { + width: 100% + } +} + +@media (min-width: 1200px) { + .mega-menu__right-top-link { + display: flex; + flex-grow: 1; + justify-content: flex-end; + margin-right: 20px; + text-align: right + } +} + +.mega-menu__right-top-link-target .cmp-button { + margin: 0 +} + +@media (max-width: 1199px) { + .mega-menu__right-top-link-target .cmp-button { + width: 100% + } +} + +.mega-menu__view-all { + color: #006dff; + font-size: 1rem; + margin-bottom: 10px +} + +.mega-menu__third-level { + background: #fafafa; + box-shadow: 0 10px 10px rgba(0, 0, 0, .05); + display: none; + left: 0; + position: absolute; + top: 100%; + width: 100%; + z-index: 2 +} + +@media (max-width: 1199px) { + .mega-menu__third-level { + background: #fff; + min-height: 100vh; + top: 0; + z-index: 3 + } +} + +.mega-menu__third-level-content { + padding: 66px 20px 46px; + width: 100% +} + +@media (min-width: 1200px) { + .mega-menu__third-level-content { + padding-left: 254px; + padding-top: 40px + } +} + +@media (min-width: 1601px) { + .mega-menu__third-level-content { + padding-left: 224px + } +} + +.mega-menu__row { + display: flex; + margin-bottom: 34px +} + +@media (max-width: 1199px) { + .mega-menu__row { + flex-direction: column; + margin-bottom: 0 + } + + .mega-menu__row:before { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100% + } + + .mega-menu__row:last-child:before { + content: none + } +} + +@media (min-width: 1200px) { + .mega-menu__col { + margin-right: 40px + } +} + +.mega-menu__second-level-right { + background: #fff; + border-radius: 6px; + box-shadow: 0 3px 10px rgba(0, 0, 0, .1); + display: none; + min-width: 370px; + padding: 20px; + position: absolute; + right: 0; + text-align: center; + transform: translateY(-4px); + z-index: 3 +} + +@media (max-width: 1199px) { + .mega-menu__second-level-right { + min-width: none; + top: calc(100% + 8px); + width: 100% + } +} + +.mega-menu__right .navigation__header-link { + color: #3c3c3c; + font-size: 18px; + font-weight: 900; + line-height: 1.5 +} + +@media (max-width: 1199px) { + .mega-menu__right .navigation__header-link:after { + content: none + } +} + +.mega-menu__right .navigation__header-link:hover { + color: #3c3c3c +} + +@media (max-width: 1199px) { + .mega-menu__right .navigation__container:after { + content: none + } + + .mega-menu__right .navigation__links { + display: block + } +} + +.mega-menu__right .navigation__link { + color: #006dff; + font-size: 18px; + font-weight: 500; + line-height: 10px; + position: relative; + text-align: center; + transform: translateZ(0); + transition: all .25s cubic-bezier(.4, 0, .2, 1); + will-change: transform +} + +.mega-menu__right .navigation__link:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/white-arrow.svg) no-repeat; + background-size: cover; + content: ""; + display: block; + height: 10px; + opacity: 0; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-5px); + transition: all .25s cubic-bezier(.4, 0, .2, 1); + width: 15px; + will-change: transform, opacity +} + +@media (max-width: 1199px) { + .mega-menu__right .navigation__link { + padding-bottom: 0; + padding-top: 0 + } +} + +.mega-menu__right .navigation__item { + background-color: transparent; + border: 2px solid #006dff; + border-radius: 8px; + cursor: pointer; + display: block; + height: -moz-fit-content; + height: fit-content; + margin-right: 0; + margin-top: 10px; + min-width: 140px; + padding: 10px 26px 8px 28px; + position: relative; + transition: all .2s cubic-bezier(.4, 0, .2, 1) +} + +.mega-menu__right .navigation__item:hover { + background-color: #006dff +} + +.mega-menu__right .navigation__item:hover .navigation__link { + color: #fff; + transform: translate3d(-11px, 0, 0) +} + +.mega-menu__right .navigation__item:hover .navigation__link:after { + opacity: 1; + transform: translate(22px, -5px) +} + +.mega-menu__popup-container.popup-active .mega-menu__right-link { + color: #006dff +} + +.mega-menu__popup-container.popup-active .mega-menu__second-level-right { + display: block +} + +.mega-menu--active:before { + background: #000; + content: ""; + height: 100vh; + left: 0; + opacity: .5; + position: absolute; + top: 0; + width: 100%; + z-index: -1 +} + +.mega-menu--active .mega-menu__left, .mega-menu--active .mega-menu__right { + display: block +} + +.mega-menu--active .mega-menu__button-bar:first-child { + transform: rotate(-45deg) translate(-5px, 5px) +} + +.mega-menu--active .mega-menu__button-bar:nth-child(2) { + opacity: 0 +} + +.mega-menu--active .mega-menu__button-bar:nth-child(3) { + transform: rotate(45deg) translate(-6px, -6px) +} + +.mega-menu__quick-links-mobile .navigation__link { + color: #006dff +} + +.mega-menu__quick-links-mobile .navigation__item:first-child .navigation__link { + border: 2px solid #006dff; + border-radius: 6px; + display: block; + line-height: 1; + margin-bottom: 1pc; + margin-top: 23px; + padding: 14px; + text-align: center +} + +.mega-menu__quick-links-mobile .navigation__item:nth-child(2) .navigation__link { + background: #006dff; + border-radius: 6px; + color: #fff; + display: block; + line-height: 1; + margin-bottom: 15px; + padding: 14px; + text-align: center +} + +.mega-menu__quick-links-mobile .navigation__item:nth-child(2) .navigation__link:hover { + color: #fff +} + +.mega-menu__quick-links-mobile .mega-menu__category-links { + display: block +} + +@media (min-width: 1200px) { + .mega-menu__quick-links-mobile { + display: none + } +} + +.mega-menu__login-container .mega-menu__login.mega-menu__right-link { + --tw-bg-opacity: 1; + --tw-text-opacity: 1; + align-items: center; + background-color: rgb(0 109 255/var(--tw-bg-opacity)); + border-radius: 9999px; + color: rgb(255 255 255/var(--tw-text-opacity)); + display: flex; + font-weight: 700; + height: 43px; + justify-content: center; + margin-bottom: .25rem; + margin-top: .25rem; + text-align: center; + width: 43px +} + +.mega-menu__login-container .mega-menu__login.mega-menu__right-link:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255/var(--tw-text-opacity)) +} + +@media (min-width: 1200px) { + .mega-menu__login-container .mega-menu__login.mega-menu__right-link { + display: block; + height: 45px; + margin-bottom: .25rem; + margin-top: 1rem; + width: 45px + } +} + +.mega-menu__login-container.popup-active .mega-menu__login.mega-menu__right-link { + --tw-text-opacity: 1; + color: rgb(255 255 255/var(--tw-text-opacity)) +} + +@media (min-width: 1200px) { + .mega-menu--no-active.mega-menu__container { + padding-bottom: 0 + } + + .mega-menu--no-active .mega-menu__link:hover { + border-bottom: 4px solid #006dff + } + + .mega-menu--no-active .mega-menu__link:hover + .mega-menu__second-level, .mega-menu--no-active .mega-menu__second-level:hover { + display: block + } + + .mega-menu--no-active .mega-menu__second-level:hover ~ .mega-menu__link { + border-bottom: 4px solid #006dff + } + + .mega-menu--right { + display: flex; + flex-grow: 1; + justify-content: flex-end + } + + .mega-menu--right .mega-menu__second-level { + top: 64px + } + + .mega-menu--right .mega-menu__link { + align-items: center; + display: flex; + position: relative + } + + .mega-menu--right .mega-menu__link:before { + background: #f0f0f0; + content: ""; + display: block; + height: 22px; + left: -20px; + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 1px + } +} + +.mega-menu__no-l3 .mega-menu__l2-link { + padding-right: 0 +} + +.mega-menu__no-l3 .mega-menu__l2-link:after { + content: none +} + +@media (min-width: 1200px) { + .navigation ~ .navigation { + margin-top: 20px + } +} + +.navigation__header-link, .navigation__link { + color: #000 +} + +.navigation__header-link:hover, .navigation__link:hover { + color: #006dff +} + +.navigation__header-link { + display: block; + font-size: 1rem; + font-weight: 900 +} + +@media (max-width: 1199px) { + .navigation__header-link:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/arrow_black.svg) 50% 50% no-repeat; + background-size: 100%; + content: ""; + height: 16px; + position: absolute; + right: 5px; + top: 12px; + transform: rotate(180deg); + width: 16px + } +} + +@media (min-width: 1200px) { + .navigation__header-link { + font-size: .75rem; + margin-bottom: 12px + } + + .navigation a.navigation__header-link:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/black-arrow.svg) 50% 50%/contain no-repeat; + background-size: contain; + content: ""; + display: inline-block; + height: 10px; + margin-left: 4px; + width: 9px + } + + .navigation a.navigation__header-link:hover:after { + background: url(https://www.bitdefender.com/content/dam/bitdefender/blue-arrow.svg) 50% 50%/contain no-repeat + } +} + +@media (max-width: 1199px) { + .navigation__heading + .navigation__links .navigation__item:nth-child(n+4) { + display: none + } +} + +.navigation__link { + display: inline-block; + font-size: 1rem; + padding-bottom: 12px; + padding-top: 12px; + white-space: nowrap +} + +@media (min-width: 1200px) { + .navigation__link { + font-size: .75rem; + line-height: 1; + margin-right: 5px; + margin-top: 4px; + padding-bottom: 0; + padding-top: 0 + } +} + +.navigation__anchor { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100% +} + +.navigation__anchor + li.navigation__link { + font-family: Arial, sans-serif; + pointer-events: none +} + +@media (max-width: 1199px) { + .navigation__anchor + li.navigation__link { + line-height: 18px; + white-space: normal + } +} + +.navigation__view-all { + display: none +} + +.navigation__heading + .navigation__links .navigation__view-all { + color: #006dff; + cursor: pointer; + display: block; + font-size: 1rem; + margin-bottom: 10px +} + +@media (min-width: 1200px) { + .navigation__heading + .navigation__links .navigation__view-all { + display: none + } +} + +.navigation__tag { + background-color: #006dff; + border-radius: 50px; + color: #fff; + display: inline-block; + font-size: 14px; + font-style: normal; + font-weight: 600; + margin-left: 4px; + margin-top: 4px; + padding: 1px 8px; + white-space: nowrap +} + +@media (min-width: 1200px) { + .navigation__tag { + font-size: 8px; + margin-left: -3px; + margin-top: 0; + padding: 0 4px; + vertical-align: middle + } +} + +@media (max-width: 1199px) { + .navigation__heading { + display: block; + line-height: 1; + margin-bottom: 0; + padding-bottom: 12px; + padding-top: 12px; + position: relative + } + + .navigation__heading + .navigation__links { + display: none + } + + .navigation__container:after { + background-color: #f0f0f0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + width: 100% + } + + .navigation__container.active .navigation__links { + display: block + } + + .navigation__container.active .navigation__header-link:after { + transform: rotate(0deg) + } + + .navigation__quick-links { + display: none + } + + .navigation__heading + .navigation__links.navigation--view-all .navigation__item:nth-child(n+4) { + display: block + } +} + +.navigation__heading + .navigation__links.navigation--view-all .navigation__view-all { + display: none +} + +.xfpage-styled .xf-content-height { + margin: 0 +} diff --git a/_src/scripts/vendor/mega-menu/mega-menu.js b/_src/scripts/vendor/mega-menu/mega-menu.js index abedcc7fb..2b7be46ec 100644 --- a/_src/scripts/vendor/mega-menu/mega-menu.js +++ b/_src/scripts/vendor/mega-menu/mega-menu.js @@ -47,7 +47,8 @@ const Config = { navigation: '.navigation', menuLinkText: '.mega-menu__l2-link-text', firstLevel: '.mega-menu__first-level', - navigationItems: '.navigation__list .navigation__item' + navigationItems: '.navigation__list .navigation__item', + menuList: '.mega-menu__list' }, classes: { popupActive: 'popup-active', @@ -60,48 +61,14 @@ const Config = { menuItemFirst: 'mega-menu__item', menuLinkText: 'mega-menu__l2-link-text', navigation: 'navigation', - megamenuNoL3: 'mega-menu__no-l3' + megamenuNoL3: 'mega-menu__no-l3', + firstLevelItemText: 'mega-menu__link-text' } } -const isMobile = () => {return window.innerWidth < 991}; +const isMobile = () => {return window.innerWidth < 1200}; function initMegaMenu (container) { - // megamenu Franklin adition - -const menuMapping = [ - { - parent: '/company', - subpages: ['/scuderiaferrari'] - } -] -const setElementActive = (partentPath) => { - const parentEl = container.querySelector(`.mega-menu__item:has(.mega-menu__link[href*="${partentPath}"])`); - - parentEl.classList.add('active'); - parentEl.classList.add('mega-menu--item-opened'); -} - -const checkMapping = () => { - const path = window.location.pathname - - menuMapping.forEach((mainMenuItem) => { - let found = false; - - mainMenuItem.subpages.forEach((key) => { - if (path.includes(key)) { - found = true; - } - }) - - if (found) { - setElementActive(mainMenuItem.parent); - } - }) -} - -checkMapping(); - let prevWidth = window.innerWidth; const setMobileRightLinksOffset = () => { @@ -220,7 +187,7 @@ checkMapping(); Array.from(menuElements).forEach((el) => { el.addEventListener('click', (event) => { - if(isHoverableDevice && window.innerWidth > 991) { + if(isHoverableDevice && window.innerWidth > 1199) { return; } @@ -295,6 +262,10 @@ checkMapping(); const target = event.target; let menuItem = null; + if (target.classList.contains(Config.classes.firstLevelItemText)) { + return; + } + if (target.classList.contains(Config.classes.menuItemFirst)) { menuItem = target; } else { @@ -302,7 +273,11 @@ checkMapping(); } const menuLink = menuItem.querySelector(Config.selectors.menuLinkRoot); + const childrenList = menuItem.querySelector(Config.selectors.menuList); + if (!childrenList) { + return; + } if (isMobile() && (menuLink === target || menuLink.contains(target))) { event.preventDefault(); @@ -408,9 +383,15 @@ checkMapping(); addQuickLinksToMobile(); } +// const megamenuEl = document.querySelector('.mega-menu__container'); +// +// if (megamenuEl) { +// new initMegaMenu(megamenuEl); +// } + const shadowRoot = document.querySelector('body > div:first-child').shadowRoot; const megamenuEl = shadowRoot.querySelector('.mega-menu__container'); if (megamenuEl) { new initMegaMenu(megamenuEl); -} \ No newline at end of file +} From 0c0fa938bc7e457afeabbd4e5c015e697a8975f9 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 11 Sep 2024 11:46:51 +0300 Subject: [PATCH 1091/1296] fix issue on buylink --- .../product-comparison-table/product-comparison-table.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index f9d8bf5e9..7b8ace0c0 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -38,7 +38,9 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { // update buy link const currentProductIndex = fetchedProducts.length - 1; const buyLink = block.querySelectorAll('.button-container a')[currentProductIndex]; - buyLink.href = fetchedProducts[currentProductIndex].product.buy_link; + if (fetchedProducts[currentProductIndex].product.buy_link) { + buyLink.href = fetchedProducts[currentProductIndex].product.buy_link; + } }) .catch((err) => { // eslint-disable-next-line no-console From c841cf4c2885429b3ec86dc0a651ee588dc4f276 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 11 Sep 2024 13:21:47 +0300 Subject: [PATCH 1092/1296] fix display old price --- .../product-comparison-table/product-comparison-table.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 7b8ace0c0..c06cbb283 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -7,6 +7,8 @@ const fetchedProducts = []; createNanoBlock('priceComparison', (code, variant, label, block) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); + let oldPriceText = 'Old Price'; + oldPriceText = block.closest('.section').dataset.old_price_text; const oldPriceElement = document.createElement('p'); priceRoot.appendChild(oldPriceElement); oldPriceElement.innerText = '-'; @@ -26,7 +28,7 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { const savings = price - discounted; oldPriceElement.innerHTML = `
    - Old Price ${price} ${currency} + ${oldPriceText} ${price} ${currency} Savings ${savings.toFixed(2)} ${currency}
    `; priceElement.innerHTML = `
    From 298b8688a0489ff968cf5d166a23391b6828c33f Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 11 Sep 2024 13:27:29 +0300 Subject: [PATCH 1093/1296] price list updates + run lint changes --- _src/blocks/columns/columns.css | 3 + .../dropdownbox-compare.css | 18 ++- _src/blocks/hero/hero.css | 1 + .../product-comparison-table.css | 3 +- _src/scripts/utils/utils.js | 111 +++++++++--------- 5 files changed, 76 insertions(+), 60 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index c42e13436..8aeb492c5 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -99,6 +99,7 @@ .grey-version .columns > div > div { --tw-bg-opacity: 1; + background-color: rgb(245 245 247 / var(--tw-bg-opacity)); border-radius: 1rem; padding: 3em; @@ -168,7 +169,9 @@ .section.subtitle-blue h3 { font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(0 110 255 / var(--tw-text-opacity)); } diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css index 98dcb951d..0578606e4 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css @@ -102,7 +102,7 @@ padding: 0 20px; padding: 3px 9px !important; text-transform: uppercase; - width: -moz-fit-content; + width: fit-content; width: fit-content; } @@ -189,23 +189,28 @@ clear: both; padding: 0 15px 5px; } + .dropdownbox-compare-container .block > div:not(:first-child) { display: block; } + .dropdownbox-compare-container .block > div:nth-child(1) > div:nth-child(1)::before, .dropdownbox-compare-container .block.closed.close > div:nth-child(1) > div:nth-child(1)::before { margin-top: 1px !important; } + .dropdownbox-compare-container .block > div:nth-child(1) > div { padding: 10px 3% !important; display: flex; font-size: 15px; line-height: 17px; } + .dropdownbox-compare-container .new > div:nth-child(1) > div:nth-child(1)::after, .dropdownbox-compare-container.new .block > div:nth-child(1) > div:nth-child(1)::after { position: static; margin-left: 15px; flex: 0 0 auto; } + .dropdownbox-compare-container > div:nth-child(2) .new::after { top: -90px; right: 0; @@ -213,43 +218,53 @@ height: 90pt; display: none; } + .dropdownbox-compare-container .block > div:not(:first-child) > div { padding: 8px 2% !important; font-size: 15px; } + .dropdownbox-compare-container .block img { width: 15px; } + .dropdownbox-compare-container .block > div:not(:first-child) > div:nth-child(1) { width: 100%; text-align: center; } + .dropdownbox-compare-container .block > div:not(:first-child) > div:not(:first-child) { width: 50%; float: left; } + .dropdownbox-compare-container .default-content-wrapper h5 { font-size: 30px; line-height: 32px; } + .section.product-comparison-table-container.migration .old-price-box { flex-direction: column; } + .section.product-comparison-table-container.migration .old-price-box span { flex-direction: column; justify-content: center; align-items: center; margin: 5px 0; } + .section.product-comparison-table-container.migration .old-price-box span del { margin-left: 10px; } + .section.product-comparison-table-container.migration .new-price-box { flex-direction: column; align-items: center; justify-content: center; font-size: 22px; } + .section.product-comparison-table-container.migration .new-price-box span { margin: 0 0 7px; } @@ -258,6 +273,7 @@ text-align: center; min-height: auto; } + .section.product-comparison-table-container.migration h3 { font-size: 15px !important; } diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index e3ba878d5..428277c0c 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -96,6 +96,7 @@ main .hero-container.blue-title .hero-content > div { main .hero-container.blue-title .hero-content h1 { --tw-text-opacity: 1; + color: rgb(0 110 255 / var(--tw-text-opacity)); } diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index e7dc94017..e4890b1b2 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -552,7 +552,7 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { .section.product-comparison-table-container.migration .old-price-box .savings { display: block; - background: rgba(44, 180, 61, .2); + background: rgb(44 180 61 / 20%); border-radius: 8px; padding: 1px 9px 5px; text-align: right; @@ -574,7 +574,6 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { } .section.product-comparison-table-container.migration .new-price-box .total-text { - display: block; color: #3c3c3c; display: inline-block; font-size: 18px; diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 479dc5a4a..e8c38cc79 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -68,6 +68,54 @@ export const IANA_BY_REGION_MAP = new Map([ [72, { locale: 'en-JP', label: 'en Japan' }], ]); +const PRICE_LOCALE_MAP = new Map([ + ['en-us', { force_country: 'en', country_code: 'us' }], + ['en-bg', { force_country: 'en', country_code: 'bg' }], + ['en-ca', { force_country: 'en', country_code: 'ca' }], + ['en-cl', { force_country: 'en', country_code: 'cl' }], + ['en-dk', { force_country: 'en', country_code: 'dk' }], + ['en-hu', { force_country: 'en', country_code: 'hu' }], + ['en-id', { force_country: 'en', country_code: 'id' }], + ['en-il', { force_country: 'en', country_code: 'il' }], + ['en-in', { force_country: 'en', country_code: 'in' }], + ['en-kr', { force_country: 'en', country_code: 'kr' }], + ['en-my', { force_country: 'en', country_code: 'my' }], + ['en-no', { force_country: 'en', country_code: 'no' }], + ['en-ph', { force_country: 'en', country_code: 'ph' }], + ['en-pl', { force_country: 'en', country_code: 'pl' }], + ['en-sa', { force_country: 'en', country_code: 'sa' }], + ['en-th', { force_country: 'en', country_code: 'th' }], + ['en-za', { force_country: 'en', country_code: 'za' }], + ['en-ae', { force_country: 'en', country_code: 'ae' }], + ['en-sg', { force_country: 'en', country_code: 'sg' }], + ['en-sd', { force_country: 'en', country_code: 'sd' }], + ['en-mt', { force_country: 'en', country_code: 'mt' }], + ['en-lv', { force_country: 'en', country_code: 'lv' }], + ['en-jm', { force_country: 'en', country_code: 'jm' }], + ['en-bz', { force_country: 'en', country_code: 'bz' }], + ['en-gb', { force_country: 'uk', country_code: 'gb' }], + ['en-au', { force_country: 'au', country_code: 'au' }], + ['en-nz', { force_country: 'au', country_code: 'nz' }], + ['es-cl', { force_country: 'en', country_code: 'cl' }], + ['es-co', { force_country: 'en', country_code: 'co' }], + ['es-mx', { force_country: 'en', country_code: 'mx' }], + ['es-pe', { force_country: 'en', country_code: 'pe' }], + ['es-bz', { force_country: 'en', country_code: 'bz' }], + ['es-es', { force_country: 'es', country_code: 'es' }], + ['ro-ro', { force_country: 'ro', country_code: 'ro' }], + ['it-it', { force_country: 'it', country_code: 'it' }], + ['fr-fr', { force_country: 'fr', country_code: 'fr' }], + ['fr-be', { force_country: null, country_code: null, isZuora: true }], + ['nl-be', { force_country: null, country_code: null, isZuora: true }], + ['nl-nl', { force_country: null, country_code: null, isZuora: true }], + ['de-de', { force_country: 'de', country_code: 'de' }], + ['sv-se', { force_country: 'se', country_code: 'se' }], + ['pt-br', { force_country: 'br', country_code: 'br' }], + ['pt-pt', { force_country: 'pt', country_code: 'pt' }], + ['zh-hk', { force_country: 'en', country_code: 'hk' }], + ['zh-tw', { force_country: 'en', country_code: 'tw' }], +]); + /** * Returns the value of a query parameter * @returns {String} @@ -383,63 +431,12 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } - if (url.pathname.includes('/en-au/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '4'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.com.au/site/Store/ajax'; - } - - if (url.pathname.includes('/en-gb/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '3'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.co.uk/site/Store/ajax'; - } - - if (url.pathname.includes('/pt-br/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '13'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.com.br/site/Store/ajax'; - } - - if (url.pathname.includes('/de-de/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '5'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } - - if (url.pathname.includes('/de-ch/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '17'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.de/site/Store/ajax'; - } - - if (url.pathname.includes('/fr-fr/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '14'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.fr/site/Store/ajax'; - } - - if (url.pathname.includes('/es-es/')) { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '7'; - data.set('data', JSON.stringify(newData)); - FETCH_URL = 'https://www.bitdefender.es/site/Store/ajax'; - } - - if ((siteName === 'hk' || siteName === 'tw')) { - // append force_region for hk and tw - const newData = JSON.parse(data.get('data')); - - newData.config.force_region = siteName === 'hk' ? '41' : '52'; - - data.set('data', JSON.stringify(newData)); - } + const locale = window.location.pathname.split('/')[1]; + const currentPriceSetup = PRICE_LOCALE_MAP.get(locale) || 'en-us'; + const newData = JSON.parse(data.get('data')); + FETCH_URL = `${FETCH_URL}?force_country=${currentPriceSetup.force_country}`; + newData.config.country_code = currentPriceSetup.country_code; + data.set('data', JSON.stringify(newData)); if (cacheResponse.has(code)) { return findProductVariant(cacheResponse.get(code), variant); From e089b89a7fb2241d171870fff8388d4183af991c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 11 Sep 2024 13:53:13 +0300 Subject: [PATCH 1094/1296] price list updates + run lint changes --- _src/blocks/dropdownbox-compare/dropdownbox-compare.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css index 0578606e4..d6ec62f61 100644 --- a/_src/blocks/dropdownbox-compare/dropdownbox-compare.css +++ b/_src/blocks/dropdownbox-compare/dropdownbox-compare.css @@ -103,7 +103,6 @@ padding: 3px 9px !important; text-transform: uppercase; width: fit-content; - width: fit-content; } @@ -300,4 +299,4 @@ overflow-y: visible; } -} \ No newline at end of file +} From c9be03e7c475c2d13b35364c32150eeb3e0785e7 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Wed, 11 Sep 2024 14:58:34 +0300 Subject: [PATCH 1095/1296] matched ul height --- _src/blocks/products/products.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 2a34fa5c5..e3e42d5fc 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -501,4 +501,5 @@ export default function decorate(block) { matchHeights(block, 'p:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); + matchHeights(block, 'ul'); } From c5d5c96c9296145d0b50c04ca3278c95f5be4020 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 12 Sep 2024 14:20:35 +0300 Subject: [PATCH 1096/1296] Add posibility to add more tags, rewrite css so it sits better, adjust matchHeight function. --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 16 ++++++++++++++++ _src/blocks/new-prod-boxes/new-prod-boxes.js | 15 +++++++++++++-- _src/scripts/utils/utils.js | 13 +++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index ae3d69afa..b4bd4ab15 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -124,6 +124,12 @@ transition: all 0.5s ease; } +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTagsWrapper { + display: flex; + gap: 5px; + flex-wrap: wrap; +} + .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag { font-size: var(--body-font-size-xs); font-family: Arial, sans-serif; @@ -134,6 +140,16 @@ border-radius: 20px; padding: 6px 16px; margin-bottom: 10px; + display: flex; + gap: 5px; + height: fit-content; +} + +.new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag .icon { + width: fit-content; + height: auto; + display: flex; + align-items: center; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTag div { diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index e614fe4d4..cd29785bd 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -392,6 +392,16 @@ export default async function decorate(block, options) { planSwitcher2 = createPlanSwitcher(radioButtons, key, addOnProdName, addOnProdMonthlyName, null, 'addon'); } + let newBlueTag = document.createElement('div'); + if (blueTag) { + let blueTagChildren = blueTag.children; + blueTagChildren = Array.from(blueTagChildren); + blueTagChildren.forEach((child) => { + // create a different blueTag element + newBlueTag.innerHTML += `
    ${child.innerHTML}
    `; + }); + } + let addOnPriceBox; // create the prices element based on where the component is being called from, aem of www-websites if (options) { @@ -432,7 +442,8 @@ export default async function decorate(block, options) {
    ${greenTag.innerText.trim() ? `
    ${greenTag.innerText.trim()}
    ` : ''} ${title.innerText.trim() ? `

    ${title.innerHTML}

    ` : ''} - ${blueTag.innerText.trim() ? `
    ${blueTag.innerHTML.trim()}
    ` : ''} + +
    ${newBlueTag.innerText.trim() ? `${newBlueTag.innerHTML.trim()}` : ''}
    ${subtitle.innerText.trim() ? `

    ${subtitle.innerText.trim()}

    ` : ''}
    ${radioButtons ? planSwitcher.outerHTML : ''} @@ -448,7 +459,6 @@ export default async function decorate(block, options) {
    `; - block.children[key].outerHTML = prodBox.innerHTML; let priceBox = await updateProductPrice(prodName, prodUsers, prodYears, saveText, pid, buyLink.querySelector('a'), billed, type, hideDecimals, perPrice); block.children[key].querySelector('.hero-aem__prices').appendChild(priceBox); @@ -651,4 +661,5 @@ export default async function decorate(block, options) { matchHeights(block, 'h2'); matchHeights(block, 'h4'); matchHeights(block, '.plan-switcher'); + matchHeights(block, '.blueTagsWrapper'); } diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index e8c38cc79..9d532c4f4 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -806,6 +806,12 @@ export async function matchHeights(targetNode, selector) { }; const observer = new MutationObserver(matchHeightsCallback); + const resizeObserver = new ResizeObserver((entries) => { + // eslint-disable-next-line no-unused-vars + entries.forEach((entry) => { + adjustHeights(); + }); + }); if (targetNode) { observer.observe(targetNode, { childList: true, subtree: true }); @@ -814,6 +820,13 @@ export async function matchHeights(targetNode, selector) { window.addEventListener('resize', () => { adjustHeights(); }); + + const elements = targetNode.querySelectorAll(selector); + elements.forEach((element) => { + resizeObserver.observe(element); + }); + + adjustHeights(); } export function getPidFromUrl() { From e38d68c9c8f71fae769f85b2658b85c1dd2f620d Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 12 Sep 2024 14:21:30 +0300 Subject: [PATCH 1097/1296] zuora update buy link fix --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 2a34fa5c5..4455f3c0a 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -423,7 +423,7 @@ export default function decorate(block) { // listen to ProductCard change and update the buttons pointing to the store url mv.subscribe((card) => { col.querySelectorAll('.button-container a').forEach((link) => { - if (link && link.href.includes('/site/Store/buy/')) { + if (link && (link.href.includes('/site/Store/buy/') || link.href.includes('checkout.bitdefender.com'))) { link.href = card.url; } }); From 95c1ae73e0e48942adbae4f81ce02e497e0438dd Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 12 Sep 2024 18:10:06 +0300 Subject: [PATCH 1098/1296] aligned cards for products not on sale --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index e3e42d5fc..a5ae8c3be 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -342,7 +342,7 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { 'div', { class: 'featured', - style: 'visibility=hidden', + style: 'visibility=hidden; min-height:2rem', }, `${text}`, ); From e1d85632ffa0f586fae83529f12d5d6101d94d3d Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 13 Sep 2024 10:55:18 +0300 Subject: [PATCH 1099/1296] adjusted product cards alignment --- _src/blocks/products/products.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index a5ae8c3be..cbf828104 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -342,7 +342,7 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { 'div', { class: 'featured', - style: 'visibility=hidden; min-height:2rem', + style: 'visibility=hidden', }, `${text}`, ); @@ -502,4 +502,5 @@ export default function decorate(block) { matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); matchHeights(block, 'ul'); + matchHeights(block, '.featured.nanoblock'); } From 1800fc931e80081758797d0786fe5d87e146cebf Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 13 Sep 2024 14:01:49 +0300 Subject: [PATCH 1100/1296] adjusted product cards alignment --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index cbf828104..4994324f5 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -501,6 +501,6 @@ export default function decorate(block) { matchHeights(block, 'p:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); - matchHeights(block, 'ul'); + matchHeights(block, 'ul:not(.variant-selector)'); matchHeights(block, '.featured.nanoblock'); } From 27b97514c6d6d25f8c56f5633f8555cd99f5a418 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 13 Sep 2024 16:17:29 +0300 Subject: [PATCH 1101/1296] fixed h3 positioning --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 4994324f5..45bf9473c 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -497,7 +497,7 @@ export default function decorate(block) { emptyDiv.style.minHeight = neededHeight; } }); - matchHeights(block, 'h3'); + matchHeights(block, 'h3:nth-oftype(2)'); matchHeights(block, 'p:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); From ee7d3452db175ba8194774f840fbb4b0e7b24843 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 13 Sep 2024 16:23:55 +0300 Subject: [PATCH 1102/1296] fixed h3 positioning --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 45bf9473c..83e82e541 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -497,7 +497,7 @@ export default function decorate(block) { emptyDiv.style.minHeight = neededHeight; } }); - matchHeights(block, 'h3:nth-oftype(2)'); + matchHeights(block, 'h3:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); From fb1ace8a3736330d8c1e7dc08b97312623988152 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 16 Sep 2024 11:48:42 +0300 Subject: [PATCH 1103/1296] fix: styling pages for migration --- _src/blocks/accordion/accordion.css | 43 +++++- _src/blocks/barchart/barchart.css | 43 ++++-- _src/blocks/columns/columns.css | 94 +++++++++--- _src/blocks/columns/columns.js | 130 +++-------------- _src/blocks/features/features.css | 25 +++- _src/blocks/hero/hero.css | 79 ++++++---- .../product-comparison-table.css | 109 +++++++++++++- .../product-comparison-table.js | 5 +- _src/blocks/products/products.css | 103 +++++++++---- _src/blocks/products/products.js | 3 +- _src/blocks/quote-carousel/quote-carousel.css | 24 ++- .../sticky-navigation/sticky-navigation.css | 42 ++++-- .../sticky-navigation/sticky-navigation.js | 6 +- _src/styles/styles.css | 138 +++++++++++++----- 14 files changed, 582 insertions(+), 262 deletions(-) diff --git a/_src/blocks/accordion/accordion.css b/_src/blocks/accordion/accordion.css index 758603d83..f765cb539 100644 --- a/_src/blocks/accordion/accordion.css +++ b/_src/blocks/accordion/accordion.css @@ -2,13 +2,23 @@ padding: 0 var(--body-padding); } +.accordion-container > .default-content-wrapper:last-of-type p.info-button-container a { + display: flex; + text-align: center; + margin-top: 2em; +} + +.accordion-container > .default-content-wrapper:last-of-type p.info-button-container a::before { + margin-right: 5px; +} + .accordion { cursor: pointer; } .accordion .accordion-item { margin: 16px 0; - padding: 18px 54px; + padding: 1em 2em; border-radius: 10px; border-color: rgb(229 231 235); border-width: 0; @@ -82,6 +92,7 @@ .accordion-item-content ul { padding-left: 20px; + margin-top: 5px; } .accordion-item-content li { @@ -92,9 +103,15 @@ } .accordion-item-content p { - font-size: 16px; + color: #3c3c3c; + font-size: var(--body-font-size-m); word-break: break-word; max-width: 1110px; + margin-top: 5px; +} + +.accordion-item-content p strong { + color: #3c3c3c; } .accordion-item.expanded .accordion-item-content { @@ -108,9 +125,8 @@ } @media (min-width: 992px) { /* desktop */ - .accordion .accordion-item-header h3 { - font-size: var(--heading-font-size-s); + font-size: var(--body-font-size-xl); } .accordion.terms-of-use .accordion-item-header h3 { @@ -129,7 +145,6 @@ max-width: var(--section-large-desktop-max-width); padding: 0 var(--section-large-desktop-padding); } - } .accordion.faq .accordion-item, @@ -162,3 +177,21 @@ margin-bottom: 0; } +@media (max-width: 500px) { + .accordion .accordion-item { + padding: 1em; + } +} + +@media (max-width: 768px) { + .accordion-item-content p { + font-size: var(--body-font-size-s); + } +} + +@media (max-width: 992px) { + .accordion-container .default-content-wrapper { + padding-top: 0; + padding-bottom: 0; + } +} \ No newline at end of file diff --git a/_src/blocks/barchart/barchart.css b/_src/blocks/barchart/barchart.css index 5564293f4..b151fec8b 100644 --- a/_src/blocks/barchart/barchart.css +++ b/_src/blocks/barchart/barchart.css @@ -19,25 +19,33 @@ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%); display: flex; flex-direction: column; - padding: 30px 20px; + padding: 1em 2em; + margin: 7px; } .barchart.block h3 { line-height: 1.25; color: var(--text-color); - font-size: var(--body-font-size-m); - font-weight: 500; - margin-top: 0; + font-size: var(--body-font-size-xl); + font-weight: var(--font-weight-bold); + margin: 0; } - .barchart-body p { line-height: 1.25; - color: var(--text-color); + color: #3c3c3c; font-size: 14px; font-weight: 400; } +.barchart-body > p:first-of-type { + margin: 7px 0 2em; +} + +.barchart-body > p:last-of-type { + margin-top: 1.5em; +} + .barchart-body ul { display: flex; flex-wrap: wrap; @@ -58,14 +66,14 @@ font-weight: var(--font-weight-bold); } -.barchart-body li:nth-child(odd) { +.barchart-body li:nth-child(odd) { flex: 85%; line-height: 40px; position: relative; z-index: 1; } -.barchart-body li:nth-child(even) { +.barchart-body li:nth-child(even) { flex: 10%; text-align: right; padding: 0 10px 0 0; @@ -117,10 +125,9 @@ } @media (min-width: 990px) { /* desktop */ - .barchart-wrapper { max-width: var(--section-desktop-max-width); - padding: 0 var(--section-desktop-padding); + padding: 0 var(--section-desktop-padding-vertical); margin: 0 auto; } } @@ -131,3 +138,19 @@ padding: 0 var(--section-large-desktop-padding); } } + +@media (max-width: 990px) { /* desktop */ + .barchart.block h3 { + font-size: var(--body-font-size-m); + } + .barchart > ul > li { + padding: 1em; + } +} + +@media (max-width: 500px) { /* mobile */ + .barchart-container .default-content-wrapper { + padding-top: 0; + padding-bottom: 0; + } +} diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 8aeb492c5..2cf6882b5 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -27,12 +27,17 @@ .columns.awards > div > div > p { margin: 0; padding: 0 5px; + text-align: center; } .columns.video-presentation > div > div > p { font-size: var(--body-font-size-s); } +.columns.video-presentation > div > div > h3 { + font-size: var(--heading-font-size-xl); +} + .columns.carousel > div > div > p { width: inherit; padding: 0 50px; @@ -68,6 +73,8 @@ .columns.carousel > div { flex-direction: row; gap: 22px; + height: 15px; + top: 0; } .columns.benefits > div { @@ -507,7 +514,7 @@ /* paragraph with image */ .columns.video-presentation .button-container { display: inline-block; - padding-right: 13px; + padding-right: 0; } .columns.video-presentation .linked-image-container { @@ -567,16 +574,11 @@ border-radius: 10px; } -.columns.video-presentation .modal-video-container { - max-width: 520px; - max-height: 293px; -} - .columns.carousel { width: 100%; - margin-top: 50px; + margin-top: 0; overflow: hidden; - height: 437px; + height: auto; } .section.migration .columns.carousel { @@ -628,16 +630,6 @@ object-fit: contain; } -@media (min-width: 676px) { - .columns.carousel > div > div { - transition: transform 0.3s, opacity 0.3s; - } - - .columns.carousel > div:nth-child(1) { - width: max-content; - } -} - @media (min-width: 676px) and (max-width: 989px) { .slide-left { transform: translateX(-50%); @@ -847,13 +839,33 @@ main .section.two-columns .right-col .products.plans a.button:any-link { margin-bottom: 1em; } -@media (max-width: 768px) { - .columns img, .columns.new-v2 > div > .columns-img-col img { - height: auto!important; +.columns.carousel > div { + justify-content: flex-start; +} + +.columns.carousel > div > div { + flex: 1 0 33%; +} + +.columns.carousel > div.carousel-buttons { + justify-content: center; +} + +@media (max-width: 1399px) { + .columns-wrapper { + padding: 0 var(--section-large-desktop-padding); + } + + .columns.video-presentation .button-container { + margin-right: 10px; } } -@media (max-width: 991px) { +@media (max-width: 992px) { + .columns.carousel > div { + gap: 0; + } + .creators .columns > div > div { text-align: center; } @@ -899,4 +911,42 @@ main .section.two-columns .right-col .products.plans a.button:any-link { .creators .no-space-top .default-content-wrapper h2 { padding-top: 23px; } + + .columns.video-presentation > div > div { + width: 520px; + } +} + +@media (max-width: 768px) { + .columns-wrapper { + padding: var(--body-padding) var(--body-padding) 0; + } + + .cta .columns-img-col picture { + width: 345px; + } + + .columns.video-presentation > div > div > h3 { + font-size: var(--heading-font-size-l); + } + + .columns.carousel > div > div { + flex: 0 0 98%; + } +} + +@media (max-width: 500px) { + .columns.video-presentation > div > div { + width: 100%; + } + + .columns.carousel > div > div { + flex: 1 0 100%; + box-sizing: border-box; + margin: 0; + } + + .columns.carousel > div > div { + width: 100%; + } } \ No newline at end of file diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index 8fc583c6e..1f8a2995a 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -1,98 +1,29 @@ import { debounce } from '../../scripts/utils/utils.js'; function getItemsToShow() { - if (window.innerWidth <= 676) { - return 1; // Show 1 item for mobile screens - } if (window.innerWidth <= 990) { - return 2; // Show 2 items for tablets - } - return 3; // Show 3 items for desktops + const width = window.innerWidth; + return width <= 767 ? 1 : 3; // 1 item for mobile, 2 for tablet, 3 for desktop } function countSlides(carouselContent) { - const numberOfItems = carouselContent.children.length; - return Math.ceil(numberOfItems / getItemsToShow()); + return Math.ceil(carouselContent.children.length / getItemsToShow()); } function showSlides(carousel, slideNumber) { - const carouselContent = carousel.querySelector('.columns.carousel > div:nth-child(1)'); - - function handleSlideDisplay(childDivs) { - // Hide all elements - childDivs.forEach((div) => { - div.style.opacity = '0'; - if (window.innerWidth <= 676) { - div.style.width = '0px'; - } - }); - - // Calculate the start and end for the items to display based on slideNumber - let start; - let end; - - const itemsToShow = getItemsToShow(); - - if (childDivs.length % itemsToShow === 0) { - start = slideNumber * itemsToShow; - end = start + itemsToShow; - } else { - start = slideNumber * (itemsToShow - 1); - end = start + itemsToShow; - - if (end > childDivs.length) { - start = childDivs.length - itemsToShow; - end = childDivs.length; - } - } - // Get the width of the container in pixels - const containerWidth = carousel.clientWidth; - // Calculate column width in pixels - const columnWidthPx = containerWidth / itemsToShow; - - for (let i = start; i < end && i < childDivs.length; i += 1) { - if (childDivs[i]) { - childDivs[i].style.opacity = '1'; - childDivs[i].style.position = 'relative'; - childDivs[i].style.width = `${columnWidthPx}px`; - } - } - } + const carouselContent = carousel.querySelector('.columns.carousel > div:first-child'); + const itemsToShow = getItemsToShow(); + const translateXValue = -(carousel.clientWidth * slideNumber) / itemsToShow; - // Apply the display logic for both images and texts - handleSlideDisplay(carouselContent.querySelectorAll('div')); + carouselContent.style.transform = `translateX(${translateXValue}px)`; + carouselContent.style.transition = 'transform 0.5s ease'; } function hideExcessElements(carousel) { - showSlides(carousel, 0); // Default: Show the first set of three elements + showSlides(carousel, 0); // Always show the first set initially } -function getButtonIndex(button) { - const buttons = Array.from(button.parentElement.children); - return buttons.indexOf(button); -} - -function setActiveButton(button, buttonsWrapper, carousel) { - const activeButton = buttonsWrapper.querySelector('.active-button'); - // Determine the index of the active button and the clicked button - const activeButtonIndex = getButtonIndex(activeButton); - const clickedButtonIndex = getButtonIndex(button); - - const carouselContent = carousel.querySelector('.columns.carousel > div:nth-child(1)'); - - // Clear any previous slide classes - carouselContent.classList.remove('slide-left'); - - if (clickedButtonIndex > activeButtonIndex) { - carouselContent.classList.add('slide-left'); - } else if (clickedButtonIndex < activeButtonIndex) { - carouselContent.classList.remove('slide-left'); - } - - // Remove active class from all buttons - buttonsWrapper.querySelectorAll('button').forEach((btn) => { - btn.classList.remove('active-button'); - }); - +function setActiveButton(button, buttonsWrapper) { + buttonsWrapper.querySelector('.active-button')?.classList.remove('active-button'); button.classList.add('active-button'); } @@ -100,52 +31,33 @@ function createNavigationButtons(numberOfSlides, carousel) { const buttonsWrapper = document.createElement('div'); buttonsWrapper.className = 'carousel-buttons'; - for (let i = 0; i < numberOfSlides; i += 1) { + Array.from({ length: numberOfSlides }, (_, i) => { const button = document.createElement('button'); button.setAttribute('aria-label', `Slide ${i + 1}`); - button.addEventListener('click', () => { - // Return early if the button clicked is already active - if (button.classList.contains('active-button')) { - return; + if (!button.classList.contains('active-button')) { + showSlides(carousel, i); + setActiveButton(button, buttonsWrapper); } - - showSlides(carousel, i); - setActiveButton(button, buttonsWrapper, carousel); }); - buttonsWrapper.appendChild(button); - } - - // By default, set the first button as the active button - if (buttonsWrapper.firstChild) { - buttonsWrapper.firstChild.classList.add('active-button'); - } + }); + buttonsWrapper.firstChild?.classList.add('active-button'); // Set first button as active return buttonsWrapper; } function setupCarousel(carousel, resetSlidePosition = false) { const carouselContent = carousel.querySelector('.columns.carousel > div'); + if (resetSlidePosition) carouselContent.style.transform = 'translateX(0px)'; - // Remove the slide-left class if necessary - if (resetSlidePosition) { - carouselContent.classList.remove('slide-left'); - } - - // Remove existing navigation buttons - const existingButtonsWrapper = carousel.querySelector('.carousel-buttons'); - if (existingButtonsWrapper) { - existingButtonsWrapper.remove(); - } - - const numberOfSlides = countSlides(carouselContent); - const buttonsWrapper = createNavigationButtons(numberOfSlides, carousel); - + const buttonsWrapper = createNavigationButtons(countSlides(carouselContent), carousel); + carousel.querySelector('.carousel-buttons')?.remove(); // Remove existing buttons carousel.appendChild(buttonsWrapper); hideExcessElements(carousel); } + function setImageAsBackgroundImage() { const columns = document.querySelectorAll('.columns.text-over-image > div > div'); diff --git a/_src/blocks/features/features.css b/_src/blocks/features/features.css index 3c6946251..6c28123cb 100644 --- a/_src/blocks/features/features.css +++ b/_src/blocks/features/features.css @@ -11,7 +11,7 @@ .features { box-shadow: 0 3px 8px 0 var(--dark-shadow); border-radius: 8px; - padding: 40px 15px 20px; + padding: 3em 1em; } .features > div { @@ -21,7 +21,7 @@ } .features img { - width: 100%; + width: 56px; } .features > div > div { @@ -59,8 +59,18 @@ line-height: 1.5; } -.features p.features-tabs-hidden { - display: none; +.features > div > div > p:first-of-type { + height: 55px; +} + +.features p:nth-of-type(2) { + margin-top: 5px; +} + +.features h3 { + font-size: var(--heading-font-size-m); + font-weight: var(--font-weight-bold); + margin-bottom: 0; } .features ul { @@ -191,5 +201,12 @@ .features-wrapper { max-width: var(--section-large-desktop-max-width); padding: 0 var(--section-large-desktop-padding); + margin-top: 3em; } } + +@media (max-width: 500px) { /* mobile */ + .features { + padding: 1em; + } +} \ No newline at end of file diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 428277c0c..76a3e2fff 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -24,7 +24,7 @@ } main .hero { - background-color: #F6F6F6; + background-color: white; position: relative; padding: 0; min-height: 300px; @@ -34,7 +34,7 @@ main .hero { main .hero .hero-content .breadcrumb { font-weight: var(--font-weight-bold); color: #dedede; - min-height: 82px; + min-height: unset; padding: 12px 0; margin-bottom: 12px; } @@ -232,7 +232,7 @@ main .hero.comparison .hero-content { } main .hero h1 { - font-size: var(--hero-h1-font-size); + font-size: 2.125rem; margin: 0 0 25px; } @@ -279,11 +279,14 @@ main .hero p { main .hero h1 + p { margin: 8px 0 0; color: #616161; - font-size: var(--hero-font-size-xxs); - font-weight: var(--font-weight-bold); + font-size: var(--hero-font-size-xxxs); line-height: 1.5; } +main .hero h1 + p strong { + font-weight: var(--font-weight-bold); +} + main .hero.comparison p { font-size: 18px; font-weight: 400; @@ -309,6 +312,10 @@ main .hero p.button-container { gap: 2px; } +main .hero p.button-container:last-of-type { + margin: 2em 0; +} + main .hero p.button-container.discount-bubble-container { padding-top: 0; } @@ -321,7 +328,7 @@ main .hero img { main .hero .hero-picture picture img { position: absolute; - display: none; + /*display: none;*/ padding-left: 200px; } @@ -351,7 +358,7 @@ main .hero a.button span.button-text { } main .hero .discount-bubble { - background: #2cb43d; + background: #16A34A; border-radius: 50%; width: 72px; height: 72px; @@ -361,7 +368,6 @@ main .hero .discount-bubble { align-items: center; text-align: center; gap: 2px; - bottom: -5px; right: 0; position: relative; } @@ -372,7 +378,7 @@ main .hero .discount-bubble .discount-bubble-0 { font-weight: var(--font-weight-boldest); line-height: .8; text-decoration: none; - padding-top: 12px; + padding-top: 5px; } main .hero .discount-bubble .discount-bubble-1 { @@ -402,7 +408,7 @@ main .hero .hero-content ul { } main .hero .hero-content ul li { - font-size: var(--hero-font-size-xxxs); + font-size: var(--hero-font-size-s); font-weight: var(--font-weight-regular); letter-spacing: 0.096px; line-height: 1.5; @@ -414,14 +420,14 @@ main .hero .hero-content ul li { } main .hero .hero-content ul li:first-child { - margin: 9px 0 0; + margin: 5px 0; } main .hero ul li::before { content: ""; position: absolute; left: 0; - top: 3px; + top: 4px; width: 15px; height: 15px; background-color: var(--background-checkmark); @@ -433,7 +439,7 @@ main .hero ul li::after { content: ""; position: absolute; left: 5px; - top: 5px; + top: 6px; width: 3px; height: 7px; border-bottom: 2px solid var( --white-color); @@ -480,10 +486,6 @@ main .hero .hero-awards li::after { min-height: auto; padding: 2em 0; } - - main .hero.new2024design .hero-picture { - display: none; - } } @media(max-width: 991px) { /* tablet */ @@ -530,6 +532,10 @@ main .hero .hero-awards li::after { padding: 2em; } + main .hero.new2024design .hero-picture { + display: none; + } + main .hero.new2024design .hero-picture { display: block; height: 430px; @@ -550,7 +556,9 @@ main .hero .hero-awards li::after { } main .hero h1 { - font-size: 50px; + font-size: 2.5rem; + font-weight: 700; + font-family: IBM Plex Sans, sans-serif; } main .hero .hero-picture { @@ -563,7 +571,7 @@ main .hero .hero-awards li::after { } main .hero p { - font-size: 14px; + font-size: var(--hero-font-size-xxs); margin: 0; } @@ -575,8 +583,7 @@ main .hero .hero-awards li::after { main .hero .hero-content { max-width: var(--section-desktop-max-width); min-height: unset; - padding: 112px var(--section-desktop-padding) 54px var(--section-desktop-padding); - padding-top: 115px; + padding: 1em var(--section-desktop-padding) 1em var(--section-desktop-padding); display: flex; flex-direction: row; } @@ -629,20 +636,31 @@ main .hero .hero-awards li::after { } -@media (min-width: 1600px) { /* large desktop */ - +@media (max-width: 1399px) { + main .hero .hero-content ul li { + font-size: var(--body-font-size-xs); + } +} +@media (min-width: 1600px) { /* large desktop */ main .hero .hero-content .breadcrumb { padding: 9px 0; margin-bottom: 15px; } main .hero h2 { + color: #000; font-size: 24px; + font-weight: 500; + line-height: 1.25; + margin-bottom: 9px; + margin-top: 10px; } main .hero h1 { - font-size: 56px; + font-size: 2.5rem; + font-weight: 700; + font-family: IBM Plex Sans, sans-serif; } main .hero .discount-bubble { @@ -659,7 +677,7 @@ main .hero .hero-awards li::after { } main .hero .hero-content { - min-height: 725px; + min-height: 640px; max-width: var(--section-large-desktop-max-width); padding-left: var(--section-large-desktop-padding); padding-right: var(--section-large-desktop-padding); @@ -670,5 +688,16 @@ main .hero .hero-awards li::after { padding-left: var(--section-large-desktop-padding); padding-right: var(--section-large-desktop-padding); } +} + +@media (max-width: 768px) { + main .hero .hero-picture { + display: none; + } +} +@media (max-width: 450px) { + main .hero h1 { + font-size: var(--heading-font-size-m); + } } diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index e4890b1b2..c095b6406 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -17,6 +17,14 @@ padding-right: 0; } +.section.product-comparison-table-container .default-content-wrapper { + margin-bottom: 2em; +} + +.section.product-comparison-table-container .default-content-wrapper p { + font-size: var(--body-font-size-m); +} + .column-fixed-width { width: 10.5rem; } @@ -88,11 +96,21 @@ border-top: 1px solid var(--horizontal-separator-color); } -.current-price-container p{ +.current-price-container p { font-size: var(--body-font-size-m); font-weight: var(--font-weight-boldest); } +.product-comparison-price p:last-of-type { + color: #7e7e7e!important; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-regular); + line-height: var(--body-font-size-xs); + border-bottom: 1px dashed #dedede; + margin-bottom: 4px !important; + padding-bottom: 1.5em; +} + div[role="cell"] p { margin: 0; } @@ -117,9 +135,9 @@ div[role="cell"] .button-container , .product-comparison-header div[role="column .product-comparison-header div[role="columnheader"] p:first-of-type { font-weight: var(--font-weight-bold); padding: 0; - color: var(--product-comparison-text-color); + color: #3c3c3c; text-align: center; - font-size: var(--body-font-size-xs); + font-size: var(--body-font-size-s); flex-grow: 1; } @@ -147,6 +165,15 @@ div[role="cell"] p.button-container a, .product-comparison-header div[role="colu background-color: unset; } +.product-comparison-header div[role="columnheader"] p.button-container a:hover { + background-color: var(--button-primary-background-color); + color: white; +} + +.product-comparison-header div[role="columnheader"] p.button-container a:hover::after { + background-color: white!important; +} + .product-comparison-header div[role="columnheader"].active p.button-container a, .product-comparison-header div[role="columnheader"] p.button-container.red a { background-color: var(--button-background-color); @@ -173,8 +200,9 @@ div[role="cell"] p:last-of-type.product-comparison-header-subtitle, } .product-comparison-header div[role="columnheader"] h3 { - margin: 3rem 0.625rem 0.25rem; + margin: 2em 1em 5px; font-size: var(--heading-font-size-s); + font-weight: var(--font-weight-regular); } .product-comparison-header div[role="columnheader"] .old-price-container p { @@ -256,6 +284,9 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { width: 100%; font-weight: var(--font-weight-bold); text-align: center; + font-size: var(--body-font-size-s); + font-weight: var(--font-weight-regular); + letter-spacing: .006em; } .product-comparison-table div[role='cell']:not(:first-child) { @@ -375,6 +406,7 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { .product-comparison-table div[role='cell']:first-child { width: 25%; text-align: left; + border-top-left-radius: 8px; } div[role="row"].expandable-row div[role="cell"] p:first-of-type { @@ -505,6 +537,18 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { width: 100%; } +.section.product-comparison-table-container .old-price-box span { + color: #7e7e7e; + font-size: var(--body-font-size-m); + font-weight: var(--font-weight-regular); + line-height: 1.2; +} + +.section.product-comparison-table-container .new-price-box { + font-size: var(--heading-font-size-l); + font-weight: var(--font-weight-boldest); +} + @media (width <= 1202px) { .product-comparison-table div[role='columnheader']:nth-child(1) > h2 { font-size: var(--heading-font-size-l); @@ -595,4 +639,61 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { font-weight: 400; line-height: 2; margin-bottom: 0; +} + +@media (max-width: 992px) { + .section.product-comparison-table-container .old-price-box span { + font-size: var(--body-font-size-xxs); + } +} + +@media (max-width: 768px) { + .product-comparison-header div[role="columnheader"] h3 { + font-size: var(--heading-font-size-xs); + margin: 1em 1em 5px; + } + + .product-comparison-header div[role="columnheader"] p:first-of-type { + font-size: var(--body-font-size-xs); + } + + .section.product-comparison-table-container .new-price-box { + font-size: var(--heading-font-size-s); + } + + .product-comparison-table div[role='cell']:first-child { + font-size: var(--body-font-size-xs); + } +} + +@media (max-width: 500px) { + .section.product-comparison-table-container .default-content-wrapper p { + font-size: var(--body-font-size-s); + } + + .product-comparison-header div[role="columnheader"]:not(:first-child) { + width: 33%; + } + + .product-comparison-header div[role="columnheader"] h3 { + font-size: var(--heading-font-size-xxs); + margin: 1em 0em 5px; + } + + .product-comparison-header div[role="columnheader"] p { + min-height: unset; + } + + .product-comparison-price p:last-of-type { + font-size: var(--body-font-size-xxs); + } + + div[role="cell"] p.button-container a, .product-comparison-header div[role="columnheader"] p.button-container a { + padding: 4px 26px 6px 18px; + font-size: var(--body-font-size-xs); + } + + .product-comparison-table div[role='cell']:not(:first-child) { + padding: 1em; + } } \ No newline at end of file diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index c06cbb283..c85d7c692 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -8,7 +8,10 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); let oldPriceText = 'Old Price'; - oldPriceText = block.closest('.section').dataset.old_price_text; + if (block.closest('.section').dataset.old_price_text) { + oldPriceText = block.closest('.section').dataset.old_price_text; + } + const oldPriceElement = document.createElement('p'); priceRoot.appendChild(oldPriceElement); oldPriceElement.innerText = '-'; diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 93a5f17e3..079d53150 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -68,14 +68,14 @@ } .product-card p a { - text-decoration: underline; + text-decoration: none; color: inherit; color: var(--link-color); } .product-card .price ~ p { font-size:var(--body-font-size-xxs); - color: #666; + color: #7e7e7e; } .products.plans .product-card p { @@ -121,7 +121,7 @@ } .products.compact .product-card h3, .products.plans .product-card h3 { - font-size: var(--body-font-size-s); + font-size: var(--body-font-size-m); margin: 0; flex: 0; } @@ -166,12 +166,12 @@ } .product-card .featured { - color: white; - background-color: #218728; - border-radius: 15px; - font-size: var(--body-font-size-xxs); - padding: 5px 15px; - font-weight: bold; + color: #2cb43d; + background-color: rgba(44,180,61,.2); + border-radius: 8px; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-bold); + padding: 2px 8px; display: inline-block; align-self: self-start; margin-bottom: 10px; @@ -179,7 +179,7 @@ :is(.products.compact, .products.plans) .product-card .featured { align-self: center; - margin: 10px 0 15px; + margin: 7px 0; } .products:not(.compact) .product-card img { @@ -222,7 +222,7 @@ } .product-card .ul-header-text { - margin: 1.5rem 0; + margin: 1.5rem 0; text-align: left; } @@ -284,13 +284,13 @@ } .product-card .price:last-of-type { - font-weight: 700; - margin-bottom: 15px; + font-weight: var(--font-weight-bold); + margin-bottom: 0; } .products.plans .product-card .price .old-price { font-weight: normal; - font-size: var(--body-font-size-l); + font-size: var(--body-font-size-xl); color: #666; } @@ -299,10 +299,12 @@ } .products.compact .product-card .price strong, .products.plans .product-card .price strong { - font-size: var(--heading-font-size-l); + font-size: var(--heading-font-size-xl); + font-weight: var(--font-weight-bold); } .product-card .price em { + color: #7e7e7e; font-size: var(--body-font-size-xxs); display: block; font-style: normal; @@ -310,7 +312,7 @@ } .product-card hr { - margin: 10px; + margin: 17px 0; border-bottom: 1px solid #e5e7eb; width: 100%; } @@ -353,7 +355,7 @@ .product-card a.button::after { top: calc(50% - 10px); } - + } .product-card .button-text { @@ -364,7 +366,7 @@ .product-card ul.variant-selector { list-style: none; padding: 0; - margin: 4px 0 10px; + margin: 15px 0; } .product-card ul.variant-selector > li { @@ -466,11 +468,10 @@ height: 250px; top: -42px; right: -60px; - border: 20px white solid; + border: 20px white solid; } } - @media (min-width: 1600px) { /* large desktop */ .products-wrapper { max-width: var(--section-large-desktop-max-width); @@ -479,17 +480,20 @@ .product-card .highlight { width: 100%; + height: 40px; position: absolute; top: 0; left: 0; - background-color: #218728; + background-color: #2cb43d; border-top-left-radius: 8px; border-top-right-radius: 8px; - padding: 4px 0 8px; - font-size: 18px; - font-weight: 700; + font-size: var(--body-font-size-m); + font-weight: var(--font-weight-bolder); color: #fff; letter-spacing: .96px; + display: flex; + justify-content: center; + align-items: center; } .product-card .discount { @@ -538,7 +542,7 @@ } .products.compare .product-card .featured { - font-size: var(--body-font-size-s); + font-size: var(--body-font-size-s); margin: 0 auto 32px; } @@ -685,4 +689,53 @@ font-size: 20px; } +} + +@media (min-width: 310px) and (max-width: 768px) { + .product-card { + width: 310px; + margin: 1em auto; + } +} + +@media (max-width: 500px) { + .products.compact .product-card, .products.plans .product-card { + width: 100%!important; + max-width: unset!important; + } +} + +@media (max-width: 768px) { + .products.plans { + flex-direction: column; + } + + .products.plans .product-card .price .old-price.no-old-price { + display: none; + } + + .product-card .featured.no-save-price { + display: none; + } + + .products.plans .product-card { + margin: 0 auto; + max-width: unset; + width: 310px; + } +} + +@media (max-width: 992px) { + .products.compact, .products.plans { + --max-columns: 2; + display: flex; + flex-wrap: wrap; + text-align: center; + justify-content: center; + } + + .products.compact .product-card, .products.plans .product-card { + max-width: unset; + width: 310px; + } } \ No newline at end of file diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 2a34fa5c5..12dc85c3d 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -175,7 +175,7 @@ function renderOldPrice(mv, text = '', monthly = '') { { class: 'price', }, - `${text} ${mv.model.basePrice ?? ''} ${mv.model.currency ?? ''}`, + `${text} ${mv.model.basePrice ?? ''} ${mv.model.currency ?? ''}`, ); const oldPriceElt = root.querySelector('span'); @@ -355,6 +355,7 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { root.style.visibility = 'visible'; } else { root.style.visibility = 'hidden'; + root.classList.add('no-save-price'); } }); diff --git a/_src/blocks/quote-carousel/quote-carousel.css b/_src/blocks/quote-carousel/quote-carousel.css index 48f1c39c5..7a51c8b53 100644 --- a/_src/blocks/quote-carousel/quote-carousel.css +++ b/_src/blocks/quote-carousel/quote-carousel.css @@ -5,7 +5,8 @@ main .quote-carousel { main .quote-carousel .slides-container { border-radius: 8px; - max-width: 630px; + max-width: auto; + width: 100%; margin-bottom: 30px; box-shadow: 0 3px 8px 0 rgb(0 0 0 / 10%); background: var(--background-color); @@ -30,11 +31,12 @@ main .quote-carousel .slides-container { @media (min-width: 992px) { main .quote-carousel { - max-width: 90%; + max-width: 100%; margin: 55px 0 0; } main .quote-carousel .slides-container { + max-width: 590px; margin-bottom: 80px; } } @@ -59,7 +61,7 @@ main .quote-carousel .slides-container { flex-shrink: 0; width: 100%; transition: all 0.3s ease-in-out; - padding: 30px 30px 40px 25px; + padding: 2em 2em 1em; gap: 8px; } @@ -68,6 +70,10 @@ main .quote-carousel .slides-container { gap: 8px; padding-left: 30px; } + + main .quote-carousel .slides-container { + max-width: 630px; + } } .slide .icon { @@ -134,6 +140,10 @@ main .quote-carousel .slides-container { padding-top: 16px; } +.slides-container .slide p:last-of-type { + padding-top: 5px; +} + @media (min-width: 768px) { .slides-container .slide p { line-height: 1.25; @@ -162,7 +172,7 @@ main .quote-carousel .slides-container { align-self: flex-start; display: flex; list-style: none; - gap: 16px; + gap: 8px; } .slides-container .slides-dots li { @@ -202,3 +212,9 @@ main .quote-carousel .slides-container { .slides-container .slides-dots li:hover button { background: #006eff; } + +@media (max-width: 992px) { + main .quote-carousel { + margin-top: 0; + } +} \ No newline at end of file diff --git a/_src/blocks/sticky-navigation/sticky-navigation.css b/_src/blocks/sticky-navigation/sticky-navigation.css index 8260de001..1a338b89e 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.css +++ b/_src/blocks/sticky-navigation/sticky-navigation.css @@ -4,6 +4,7 @@ main .section.sticky-navigation-container { padding-top: 0; + padding-bottom: 0; } .sticky-navigation { @@ -28,7 +29,7 @@ main .section.sticky-navigation-container { align-items: baseline; box-shadow: 0 3px 6px 0 rgb(0 0 0 / 8%); padding: 0 var(--body-padding) var(--body-padding) var(--body-padding); - + } .sticky-navigation ul { @@ -39,6 +40,16 @@ main .section.sticky-navigation-container { list-style-type: none; } +.sticky-navigation ul li { + border-bottom: 1px solid var(--sticky-nav-border-color); + padding: 0; + margin: 0; +} + +.sticky-navigation ul li.opened { + border-bottom: 1px solid #006EFF; +} + .sticky-navigation ul li a { display: block; font-weight: var(--font-weight-bold); @@ -50,12 +61,6 @@ main .section.sticky-navigation-container { padding: 22px 0; } -.sticky-navigation ul li { - border-bottom: 1px solid var(--sticky-nav-border-color); - padding: 0; - margin: 0; -} - .sticky-navigation ul li.active::after { width: 100%; } @@ -111,13 +116,14 @@ main .section.sticky-navigation-container { .sticky-navigation .button-container { margin:0; - padding: 40px 0 20px 20px; + padding: 40px 0 20px 20px; } .sticky-navigation .button-container a { - font-size: var(--body-font-size-xxs); + font-size: var(--body-font-size-s); vertical-align: middle; - padding: 6px 15px; + padding: 6px 9px 6px 18px; + text-transform: capitalize; } @media (min-width: 992px) { /* desktop */ @@ -142,7 +148,7 @@ main .section.sticky-navigation-container { .sticky-navigation ul li { border: none; - margin-right: 20px; + margin-right: 40px; } .sticky-navigation ul li a { @@ -157,19 +163,25 @@ main .section.sticky-navigation-container { .sticky-navigation .button-container { vertical-align: middle; - padding: 0; + padding: 0; + } +} + +@media (max-width: 1399px) { /* desktop */ + .sticky-navigation .menu-with-button { + padding: 0 var(--section-large-desktop-padding); } } @media (min-width: 1600px) { /* large desktop */ .sticky-navigation .button-container a { - font-size: var(--body-font-size-xs); - padding: 8px 15px; + font-size: var(--body-font-size-s); + font-weight: var(--font-weight-bold); + padding: 8px 8px 8px 20px; } .sticky-navigation .menu-with-button { max-width: var(--section-large-desktop-max-width); padding: 0 var(--section-large-desktop-padding); } - } \ No newline at end of file diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 2c8fbf64f..442fbb105 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -63,7 +63,11 @@ function renderStickyNavigation(block) { menuWithButton.appendChild(stickyNavMenu); /** close the dropdown menu after user selection */ - stickyNavMenu.addEventListener('click', () => { + stickyNavMenu.addEventListener('click', (event) => { + event.target.closest('ul').querySelectorAll('li').forEach(item => { + item.classList.remove('opened'); + }) + event.target.closest('li').classList.toggle('opened'); mobileDropDown.classList.toggle('opened'); }); diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 7fe4380b7..ff7f6fdc6 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -43,6 +43,7 @@ --dark-blue-tag: #005eff; --light-blue-tag: #13b0a7; --green-tag: #218728; + --green-tag2: #2cb43d; --dark-shadow: #0000001a; --background-checkmark: #61AF53; @@ -60,6 +61,7 @@ --font-weight-heavy: 900; /* body sizes */ + --body-font-size-xl: 24px; --body-font-size-l: 22px; --body-font-size-m: 18px; --body-font-size-s: 16px; @@ -119,11 +121,9 @@ body [data-desktop-detector] { body [data-mobile-detector] { display: none; } -} -@media (min-width: 768px) { body [data-tablet-detector] { - display: block; + display: block; } } @@ -318,6 +318,25 @@ main img { height: auto; } +.top_blue { + text-align: center; + background-color: rgb(228, 242, 255); + color: rgb(0, 110, 255); + padding: 6px 0!important; +} + +.top_blue .default-content-wrapper { + padding: 0; +} + +.top_blue p { + font-size: var(--body-font-size-s); +} + +.top_blue p a { + text-decoration: underline; +} + body.appear { display: block; } @@ -403,8 +422,8 @@ main .section.no-padding-top-bottom { } main .section.wide h2 { - font-size: var(--heading-font-size-s); - font-weight: var(--font-weight-boldest); + font-size: var(--heading-font-size-l); + font-weight: var(--font-weight-bold); } .centered img { @@ -469,6 +488,8 @@ main .section.migration .carousel img { main .section.wide img { height: 56px; + width: auto; + margin: 0 auto; object-fit: contain; } @@ -657,6 +678,11 @@ body.creators { } @media (min-width: 768px) { + main .section.wide { + padding-left: var(--section-desktop-padding-vertical); + padding-right: var(--section-desktop-padding-vertical); + } + main .section.center .products .product-card { min-width: 380px; } @@ -712,6 +738,11 @@ body.creators { right: 0; } + main .section.wide h2 { + font-size: var(--heading-font-size-xl); + font-weight: var(--font-weight-bold); + } + main div.section.wide > * { /* apply to all children wrapper */ max-width: calc(var(--section-desktop-max-width) - 2 * var(--section-desktop-padding)); padding-top: 1px; /* hack to handle margin of child paragraphs */ @@ -728,7 +759,7 @@ body.creators { .default-content-wrapper { max-width: var(--section-desktop-max-width); - padding: 0 var(--section-desktop-padding); + padding: 0 var(--section-desktop-padding-vertical); border-radius: 0; } @@ -848,23 +879,13 @@ main .section.pb-0, .pb-0 { font-size: var(--heading-font-size-m); margin-bottom: 24px; } - h4 { font-size: var(--heading-font-size-s) } - - main .section.wide h2 { - font-size: var(--heading-font-size-m); - font-weight: var(--font-weight-boldest); - } + h4 { font-size: var(--heading-font-size-s) } } @media (min-width: 1200px) { h3 { font-size: 30px } - main .section.wide h2 { - font-size: var(--heading-font-size-l); - font-weight: var(--font-weight-boldest); - } - main .section.migration h2 { font-size: var(--heading-font-size-l); font-weight: 500; @@ -1186,13 +1207,13 @@ main .section.cta { } .cta .right-col { - flex: 0 1 40%; + flex: 0 1 55%; } .cta .full-width { padding-top: 80px; - margin-top: 64px; - background-color: var(--cta-background-light-blue); + margin-top: 40px; + background-color: #e4f2ff; } .cta .columns { @@ -1201,6 +1222,7 @@ main .section.cta { .cta .columns > div > .columns-img-col { order: 1; + margin-bottom: 0; } .cta .columns-img-col picture { @@ -1243,7 +1265,7 @@ main .section.cta .right-col { @media (min-width: 992px) { .cta .columns-img-col picture { - width: 430px; + width: 100%; } .cta .columns-wrapper { @@ -1261,14 +1283,13 @@ main .section.cta .right-col { } main .section.cta .right-col { - justify-content: end; align-self: flex-end; } } @media (min-width: 1600px) { .cta .columns-img-col picture { - width: 494px; + width: 100%; } main .section.cta.bigger-text h2 { @@ -1312,7 +1333,7 @@ main .terms-of-use ul li { } main .section.blue { - background-color: var(--background-blue); + background-color: #006eff; color: white; padding-top: 64px; padding-bottom: 64px; @@ -1331,11 +1352,10 @@ main .section.checked-lists ul li padding-left: 10px; } -main .section.checked-lists ul li::before -{ +main .section.checked-lists ul li::before { content: ""; position: absolute; - left: -10px; + left: -15px; top: 5px; width: 15px; height: 15px; @@ -1344,11 +1364,10 @@ main .section.checked-lists ul li::before z-index: 1; } -main .section.checked-lists ul li::after -{ +main .section.checked-lists ul li::after { content: ""; position: absolute; - left: -5px; + left: -10px; top: 7px; width: 3px; height: 7px; @@ -1358,11 +1377,12 @@ main .section.checked-lists ul li::after z-index: 2; } -main .section.blue.checked-lists ul li::before { +main .section.blue.checked-lists ul li::before { background-color: var(--background-color); + } -main .section.blue.checked-lists ul li::after { +main .section.blue.checked-lists ul li::after { border-bottom: 2px solid var( --background-blue); border-right: 2px solid var( --background-blue); } @@ -1480,10 +1500,13 @@ main .section.blue a.button.modal::after { margin-left: 5px; color: var(--background-color); font-size: var(--body-font-size-xxxs); - font-weight: var(--font-weight-boldest); + font-weight: var(--font-weight-bolder); line-height: 1; - border-radius: 3px; - padding: 2px 4px; + border-radius: 75pt; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04); + font-style: normal; + letter-spacing: .8px; + padding: 3px 7px 3px 8px; text-transform: uppercase; } @@ -1504,7 +1527,7 @@ main .section.blue a.button.modal::after { } .tag-green { - background-color: var(--green-tag); + background-color: var(--green-tag2); } .centered { @@ -1518,6 +1541,7 @@ main .section.blue a.button.modal::after { .section.wide.awards h2 { font-weight: var(--font-weight-bold); + margin-bottom: 0; } .section.big-image { @@ -1544,6 +1568,13 @@ main .section.blue a.button.modal::after { } } +@media (max-width: 1399px) { + main .section.checked-lists ul li { + font-size: var(--body-font-size-s); + margin: 8px 0; + } +} + header, body > div:first-child { height: 64px; @@ -1556,3 +1587,38 @@ body > div:first-child { .d-flex { display: flex; } + +@media (max-width: 992px) { + .cta .columns-img-col picture { + width: 444px; + margin: 0 auto; + } + + .cta .full-width { + margin-top: 0; + padding: 40px 0 0; + } + + .top_blue .default-content-wrapper p { + padding: 1px 0; + margin: 0; + } +} + +@media (max-width: 768px) { + main .section.blue { + padding-top: 2em; + padding-bottom: 2em; + margin-bottom: 1em; + } +} + +@media (max-width: 500px) { + main .section.wide h2 { + font-size: var(--heading-font-size-l); + } + + main .section.blue a.button:any-link { + padding: 10px 0px 8px 13px; + } +} From d29fa21cd92f29313155d93e1148aaa058d637ff Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 16 Sep 2024 11:54:34 +0300 Subject: [PATCH 1104/1296] updates --- _src/blocks/hero/hero.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 76a3e2fff..f4e0e37f9 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -26,7 +26,7 @@ main .hero { background-color: white; position: relative; - padding: 0; + padding: 1em 0 3em; min-height: 300px; } @@ -408,7 +408,7 @@ main .hero .hero-content ul { } main .hero .hero-content ul li { - font-size: var(--hero-font-size-s); + font-size: var(--hero-font-size-xxs); font-weight: var(--font-weight-regular); letter-spacing: 0.096px; line-height: 1.5; From b81ed87db7473fb20c49d176515f04b20148d83c Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 16 Sep 2024 13:48:00 +0300 Subject: [PATCH 1105/1296] updated buy link + extended scrolling support --- _src/scripts/lib-franklin.js | 2 ++ _src/scripts/scripts.js | 42 ------------------------------------ _src/scripts/utils/utils.js | 17 +++++++++------ 3 files changed, 13 insertions(+), 48 deletions(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 9fc64b670..559755a01 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -449,6 +449,8 @@ export function decorateSections(main) { } else if (key === STICKY_NAVIGATION_SECTION_METADATA_KEY) { section.id = `section-${toClassName(meta[key])}`; section.dataset[STICKY_NAVIGATION_DATASET_KEY] = meta[key]; + } else if (key === 'id') { + section.id = meta[key]; } else { section.dataset[toCamelCase(key)] = meta[key]; } diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 39d2c9fbc..d4ef49ceb 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -751,46 +751,6 @@ function eventOnDropdownSlider() { } }); } -function addIdsToEachSection() { - document.querySelectorAll('main .section > div:first-of-type').forEach((item) => { - // Find the first sibling that is not a default-content-wrapper - let componentWrapper = item; - while (componentWrapper && componentWrapper.classList.contains('default-content-wrapper')) { - if (!componentWrapper.nextElementSibling) { - return; - } - componentWrapper = componentWrapper.nextElementSibling; - } - - const baseId = componentWrapper.className.split('-wrapper')[0]; - let uniqueId = baseId; - - let idCounter = 0; - // avoid infinite loops - const MAX_ID_ATTEMPTS = 100; - // Ensure the ID is unique by checking existing IDs and appending a counter if necessary - while (document.getElementById(uniqueId) && idCounter < MAX_ID_ATTEMPTS) { - idCounter += 1; - // append a number only if it's not the first attempt - if (idCounter !== 1) { - uniqueId = `${baseId}-${idCounter}`; - } - } - - if (idCounter >= MAX_ID_ATTEMPTS) { - // eslint-disable-next-line - console.error('Unable to generate a unique ID after maximum attempts'); - return; - } - - if (baseId === 'terms') { - uniqueId = `tos${idCounter ? `-${idCounter}` : ''}`; - } - - // Assign the unique ID to the parent element - componentWrapper.parentElement.id = uniqueId; - }); -} /** * Loads everything that happens a lot later, @@ -813,8 +773,6 @@ async function loadPage() { await window.hlx.plugins.load('lazy'); await loadLazy(document); - addIdsToEachSection(); - const setupAnalytics = loadAnalytics(document, { edgeConfigId: '7275417f-3870-465c-af3e-84f8f4670b3c', orgId: '0E920C0F53DA9E9B0A490D45@AdobeOrg', diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 9d532c4f4..ce613f1ca 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -363,17 +363,23 @@ export function getBuyLinkCountryPrefix() { return 'https://www.bitdefender.com/site/Store/buy'; } +export function getPriceLocalMapByLocale() { + const locale = window.location.pathname.split('/')[1]; + return PRICE_LOCALE_MAP.get(locale) || 'en-us'; +} + export function generateProductBuyLink(product, productCode) { if (isZuora()) { return product.buy_link; } - return `${getBuyLinkCountryPrefix()}/${productCode}/${product.variation.dimension_value}/${product.variation.years}/`; + const forceCountry = getPriceLocalMapByLocale().force_country; + return `${getBuyLinkCountryPrefix()}/${productCode}/${product.variation.dimension_value}/${product.variation.years}/?force_country=${forceCountry}`; } -export function formatPrice(price, currency, region) { - const ianaRegionFormat = IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US'; - return new Intl.NumberFormat(ianaRegionFormat, { style: 'currency', currency }).format(price); +export function formatPrice(price, currency, region = null, locale = null) { + const loc = region ? IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US' : locale; + return new Intl.NumberFormat(loc, { style: 'currency', currency }).format(price); } /** @@ -431,8 +437,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } - const locale = window.location.pathname.split('/')[1]; - const currentPriceSetup = PRICE_LOCALE_MAP.get(locale) || 'en-us'; + const currentPriceSetup = getPriceLocalMapByLocale(); const newData = JSON.parse(data.get('data')); FETCH_URL = `${FETCH_URL}?force_country=${currentPriceSetup.force_country}`; newData.config.country_code = currentPriceSetup.country_code; From 205597ffdf384cfc3e43d397f578de99634d8df5 Mon Sep 17 00:00:00 2001 From: andserban Date: Mon, 16 Sep 2024 16:47:03 +0300 Subject: [PATCH 1106/1296] fix --- .../product-comparison-table/product-comparison-table.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index c06cbb283..ea94b6d07 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -7,8 +7,7 @@ const fetchedProducts = []; createNanoBlock('priceComparison', (code, variant, label, block) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); - let oldPriceText = 'Old Price'; - oldPriceText = block.closest('.section').dataset.old_price_text; + let oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price'; const oldPriceElement = document.createElement('p'); priceRoot.appendChild(oldPriceElement); oldPriceElement.innerText = '-'; From 871f504580007ff4cd34b3b6fa1097e4b8ca64d2 Mon Sep 17 00:00:00 2001 From: andserban Date: Mon, 16 Sep 2024 16:49:15 +0300 Subject: [PATCH 1107/1296] lint --- .../blocks/product-comparison-table/product-comparison-table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index ea94b6d07..8a1517994 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -7,7 +7,7 @@ const fetchedProducts = []; createNanoBlock('priceComparison', (code, variant, label, block) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); - let oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price'; + const oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price'; const oldPriceElement = document.createElement('p'); priceRoot.appendChild(oldPriceElement); oldPriceElement.innerText = '-'; From cb0906ac651e28ec9341e6d773c985351ec29323 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Mon, 16 Sep 2024 17:11:36 +0300 Subject: [PATCH 1108/1296] fix: hero discount label --- _src/blocks/hero/hero.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index b7bdc84b0..a0c361de3 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -36,7 +36,7 @@ function buildHeroBlock(element) { } } -createNanoBlock('discount', (code, label = 'Discount') => { +createNanoBlock('discount', (code, label = '{label}') => { // code = "av/3/1" const [product, unit, year] = code.split('/'); const variant = `${unit}u-${year}y`; @@ -75,6 +75,7 @@ export default async function decorate(block) { const { // this defines wether the modals automatically refresh or not in the hero banner stopAutomaticModalRefresh, + label } = block.closest('.section').dataset; buildHeroBlock(block); @@ -96,6 +97,10 @@ export default async function decorate(block) { // move discount bubble inside the closest button const bubble = block.querySelector('.discount-bubble'); if (bubble) { + if (label) { + bubble.innerHTML = bubble.innerHTML.replace("{label}", label); + } + let sibling = bubble.previousElementSibling; while (sibling) { From 70e16121b2ff4aa23116c923a8e7b78278dab1c8 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 16 Sep 2024 18:17:34 +0300 Subject: [PATCH 1109/1296] added testing support --- .../product-comparison-table.js | 29 ++++++++++++++++--- _src/blocks/products/products.js | 13 +++++++++ _src/scripts/utils/utils.js | 19 ++++++++++-- 3 files changed, 55 insertions(+), 6 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index c06cbb283..e3966d900 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -1,5 +1,5 @@ import { - createNanoBlock, renderNanoBlocks, fetchProduct, matchHeights, + createNanoBlock, renderNanoBlocks, fetchProduct, matchHeights, setDataOnBuyLinks, generateProductBuyLink, } from '../../scripts/utils/utils.js'; const fetchedProducts = []; @@ -40,8 +40,29 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { // update buy link const currentProductIndex = fetchedProducts.length - 1; const buyLink = block.querySelectorAll('.button-container a')[currentProductIndex]; - if (fetchedProducts[currentProductIndex].product.buy_link) { - buyLink.href = fetchedProducts[currentProductIndex].product.buy_link; + const prd = fetchedProducts[currentProductIndex]; + + const variantSplit = variant.split('-'); + const units = variantSplit[0].split('u')[0]; + const years = variantSplit[1].split('y')[0]; + + const isBuyLink = buyLink.href.includes('/site/Store/buy/'); + + if (isBuyLink) { + buyLink.href = prd.product.buy_link || generateProductBuyLink(prd, prd.code, units, years); + + const dataInfo = { + productId: prd.code, + variation: { + price: prd.product.price, + discounted_price: prd.product.discount.discounted_price, + variation_name: prd.variant, + currency_label: prd.product.currency_label, + region_id: prd.product.region_id, + }, + }; + + setDataOnBuyLinks(buyLink, dataInfo); } }) .catch((err) => { @@ -170,7 +191,7 @@ function extractTextFromStrongTagToParent(element) { }); } - if (element.tagName === 'STRONG') { + if (element.tagName === 'STRONG' && element.parentElement) { element.parentElement.innerHTML = element.textContent; } } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 4455f3c0a..f81d32c11 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -5,6 +5,7 @@ import { createTag, generateProductBuyLink, matchHeights, + setDataOnBuyLinks, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; @@ -47,6 +48,7 @@ function toModel(productCode, variantId, v) { return { productCode, variantId, + regionId: v.region_id, platformProductId: v.platform_product_id, devices: +v.variation.dimension_value, subscription: v.variation.years * 12, @@ -425,6 +427,17 @@ export default function decorate(block) { col.querySelectorAll('.button-container a').forEach((link) => { if (link && (link.href.includes('/site/Store/buy/') || link.href.includes('checkout.bitdefender.com'))) { link.href = card.url; + const dataInfo = { + productId: card.productCode, + variation: { + price: card.price, + discounted_price: card.discountedPrice, + variation_name: card.variantId, + currency_label: card.currency, + region_id: card.regionId, + }, + }; + setDataOnBuyLinks(link, dataInfo); } }); }); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 9d532c4f4..10cb81e5d 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -363,12 +363,27 @@ export function getBuyLinkCountryPrefix() { return 'https://www.bitdefender.com/site/Store/buy'; } -export function generateProductBuyLink(product, productCode) { +export function generateProductBuyLink(product, productCode, month = null, years = null) { if (isZuora()) { return product.buy_link; } - return `${getBuyLinkCountryPrefix()}/${productCode}/${product.variation.dimension_value}/${product.variation.years}/`; + const m = product.variation?.dimension_value || month; + const y = product.variation?.years || years; + + return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/`; +} + +export function setDataOnBuyLinks(element, dataInfo) { + const { productId, variation } = dataInfo; + if (productId) element.dataset.product = productId; + + element.dataset.buyPrice = variation.discounted_price || variation.price || 0; + + if (variation.price) element.dataset.oldPrice = variation.price; + if (variation.currency_label) element.dataset.dataCurrency = variation.currency_label; + if (variation.region_id) element.dataset.dataRegion = variation.region_id; + if (variation.variation_name) element.dataset.variation = variation.variation_name; } export function formatPrice(price, currency, region) { From 645127bd4bdb4d548f845e22cde63eb6aaa79e36 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 16 Sep 2024 18:25:47 +0300 Subject: [PATCH 1110/1296] added testing support --- _src/blocks/hero/hero.js | 7 +++- .../product-comparison-table.js | 10 +++-- _src/blocks/products/products.js | 2 + _src/scripts/lib-franklin.js | 2 + _src/scripts/scripts.js | 42 ------------------- _src/scripts/utils/utils.js | 3 +- 6 files changed, 19 insertions(+), 47 deletions(-) diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index b7bdc84b0..ce8462997 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -36,7 +36,7 @@ function buildHeroBlock(element) { } } -createNanoBlock('discount', (code, label = 'Discount') => { +createNanoBlock('discount', (code, label = '{label}') => { // code = "av/3/1" const [product, unit, year] = code.split('/'); const variant = `${unit}u-${year}y`; @@ -75,6 +75,7 @@ export default async function decorate(block) { const { // this defines wether the modals automatically refresh or not in the hero banner stopAutomaticModalRefresh, + label, } = block.closest('.section').dataset; buildHeroBlock(block); @@ -96,6 +97,10 @@ export default async function decorate(block) { // move discount bubble inside the closest button const bubble = block.querySelector('.discount-bubble'); if (bubble) { + if (label) { + bubble.innerHTML = bubble.innerHTML.replace('{label}', label); + } + let sibling = bubble.previousElementSibling; while (sibling) { diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index e3966d900..15ebe7b9f 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -1,5 +1,10 @@ import { - createNanoBlock, renderNanoBlocks, fetchProduct, matchHeights, setDataOnBuyLinks, generateProductBuyLink, + createNanoBlock, + renderNanoBlocks, + fetchProduct, + matchHeights, + setDataOnBuyLinks, + generateProductBuyLink, } from '../../scripts/utils/utils.js'; const fetchedProducts = []; @@ -7,8 +12,7 @@ const fetchedProducts = []; createNanoBlock('priceComparison', (code, variant, label, block) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); - let oldPriceText = 'Old Price'; - oldPriceText = block.closest('.section').dataset.old_price_text; + const oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price'; const oldPriceElement = document.createElement('p'); priceRoot.appendChild(oldPriceElement); oldPriceElement.innerText = '-'; diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index f81d32c11..e1320cf71 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -514,4 +514,6 @@ export default function decorate(block) { matchHeights(block, 'p:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(3)'); matchHeights(block, 'h4'); + matchHeights(block, 'ul:not(.variant-selector)'); + matchHeights(block, '.featured.nanoblock'); } diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 9fc64b670..559755a01 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -449,6 +449,8 @@ export function decorateSections(main) { } else if (key === STICKY_NAVIGATION_SECTION_METADATA_KEY) { section.id = `section-${toClassName(meta[key])}`; section.dataset[STICKY_NAVIGATION_DATASET_KEY] = meta[key]; + } else if (key === 'id') { + section.id = meta[key]; } else { section.dataset[toCamelCase(key)] = meta[key]; } diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 39d2c9fbc..d4ef49ceb 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -751,46 +751,6 @@ function eventOnDropdownSlider() { } }); } -function addIdsToEachSection() { - document.querySelectorAll('main .section > div:first-of-type').forEach((item) => { - // Find the first sibling that is not a default-content-wrapper - let componentWrapper = item; - while (componentWrapper && componentWrapper.classList.contains('default-content-wrapper')) { - if (!componentWrapper.nextElementSibling) { - return; - } - componentWrapper = componentWrapper.nextElementSibling; - } - - const baseId = componentWrapper.className.split('-wrapper')[0]; - let uniqueId = baseId; - - let idCounter = 0; - // avoid infinite loops - const MAX_ID_ATTEMPTS = 100; - // Ensure the ID is unique by checking existing IDs and appending a counter if necessary - while (document.getElementById(uniqueId) && idCounter < MAX_ID_ATTEMPTS) { - idCounter += 1; - // append a number only if it's not the first attempt - if (idCounter !== 1) { - uniqueId = `${baseId}-${idCounter}`; - } - } - - if (idCounter >= MAX_ID_ATTEMPTS) { - // eslint-disable-next-line - console.error('Unable to generate a unique ID after maximum attempts'); - return; - } - - if (baseId === 'terms') { - uniqueId = `tos${idCounter ? `-${idCounter}` : ''}`; - } - - // Assign the unique ID to the parent element - componentWrapper.parentElement.id = uniqueId; - }); -} /** * Loads everything that happens a lot later, @@ -813,8 +773,6 @@ async function loadPage() { await window.hlx.plugins.load('lazy'); await loadLazy(document); - addIdsToEachSection(); - const setupAnalytics = loadAnalytics(document, { edgeConfigId: '7275417f-3870-465c-af3e-84f8f4670b3c', orgId: '0E920C0F53DA9E9B0A490D45@AdobeOrg', diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 9f6b41c4f..41ec3acef 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -376,7 +376,8 @@ export function generateProductBuyLink(product, productCode, month = null, years const m = product.variation?.dimension_value || month; const y = product.variation?.years || years; - return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/`; + const forceCountry = getPriceLocalMapByLocale().force_country; + return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/?force_country=${forceCountry}`; } export function setDataOnBuyLinks(element, dataInfo) { From 55095d7754522bfd9ba18b870c6958190da4a50c Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 16 Sep 2024 19:03:11 +0300 Subject: [PATCH 1111/1296] added the footer, language banner and mega menu logic --- _src/blocks/footer/footer.js | 67 ++++++++++++++++++++++++- _src/blocks/header/header.js | 97 ++++++++++++++++++++++++++---------- _src/styles/styles.css | 6 ++- 3 files changed, 141 insertions(+), 29 deletions(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index 09aad3479..934fee8f1 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -127,6 +127,71 @@ async function runLandingpageLogic(block) { adobeMcAppendVisitorId('footer'); } +async function runAemFooterLogic(block) { + // fetch footer content + const aemFooterHostname = window.location.hostname.includes('.hlx.') + || window.location.hostname.includes('localhost') + ? 'https://stage.bitdefender.com' + : ''; + + const aemFooterFetch = await fetch(`${aemFooterHostname}/content/experience-fragments/bitdefender/language_master/en/footer-fragment-v1/master/jcr:content/root.html`); + if (!aemFooterFetch.ok) { + return; + } + + const aemFooterHtml = await aemFooterFetch.text(); + const footer = document.createElement('footer'); + const shadowRoot = footer.attachShadow({ mode: 'open' }); + const contentDiv = document.createElement('div'); + contentDiv.innerHTML = aemFooterHtml; + + const loadedLinks = []; + contentDiv.querySelectorAll('link').forEach(linkElement => { + //update the links so that they work on all Franklin domains + linkElement.href = `${aemFooterHostname}${linkElement.getAttribute('href')}`; + linkElement.rel = 'stylesheet'; + + // add a promise for each link element in the code + // so that we can wait on all the CSS before displaying the component + loadedLinks.push(new Promise((resolve, reject) => { + linkElement.onload = () => { + resolve(); + }; + + linkElement.onerror = () => { + reject(); + }; + })); + }); + + // a list of all the components to be received from aem components + const aemComponents = ['footer']; + + // add logic so that every time an AEM function is fully loaded + // it is directly run using the shadow dom as parameter + aemComponents.forEach(aemComponentName => { + window.addEventListener(aemComponentName, () => { + window[aemComponentName](shadowRoot); + }); + }); + + // select all the scripts from contet div and + const scripts = contentDiv.querySelectorAll('script'); + scripts.forEach((script) => { + // multiple reruns of runtime lead to all the scripts + // being run multiple times + if (!script.src.includes('runtime')) { + const newScript = document.createElement('script'); + newScript.src = `${aemFooterHostname}${script.getAttribute('src')}`; + newScript.defer = true; + shadowRoot.appendChild(newScript); + } + }); + + shadowRoot.appendChild(contentDiv); + document.querySelector('footer').replaceWith(footer); +} + /** * applies footer factory based on footer variation * @param {String} footerMetadata The footer variation: landingpage' or none @@ -138,7 +203,7 @@ function applyFooterFactorySetup(footerMetadata, block) { runLandingpageLogic(block); break; default: - runDefaultFooterLogic(block); + runAemFooterLogic(block); break; } } diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 2582e6e8a..cd8e12daf 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -384,19 +384,21 @@ async function runDefaultHeaderLogic(block) { if (html.includes('aem-banner')) { let domain = getDomain(); + if (domain === 'en-us') { domain = 'en'; + } else if (domain.includes('-global')) { + domain = domain.split('-')[0]; } else { domain = domain.split('-').join('_'); } - const aemHeaderLink = window.location.hostname.includes('.hlx.') + const aemHeaderHostname = window.location.hostname.includes('.hlx.') || window.location.hostname.includes('localhost') ? 'https://stage.bitdefender.com' : ''; - // TODO: this needs to be updated to also bring the language bar in the future !!! - const aemHeaderFetch = await fetch(`${aemHeaderLink}/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root/mega_menu.html`); + const aemHeaderFetch = await fetch(`${aemHeaderHostname}/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root.html`); if (!aemHeaderFetch.ok) { return; } @@ -407,35 +409,72 @@ async function runDefaultHeaderLogic(block) { const contentDiv = document.createElement('div'); contentDiv.style.display = 'none'; - contentDiv.classList.add('mega-menu'); - contentDiv.classList.add('default-content-wrapper'); + contentDiv.innerHTML = aemHeaderHtml; - const cssFile = contentDiv.querySelector('link[rel="stylesheet"]'); - if (cssFile) { - cssFile.href = '/_src/scripts/vendor/mega-menu/mega-menu.css'; - cssFile.as = 'style'; - - // wait for the css to load before displaying the content - // this is to avoid the content being displayed without the styles - cssFile.onload = () => { - contentDiv.style.display = 'block'; - }; - shadowRoot.appendChild(contentDiv); - } + const loadedLinks = []; + contentDiv.querySelectorAll('link').forEach(linkElement => { + //update the links so that they work on all Franklin domains + linkElement.href = `${aemHeaderHostname}${linkElement.getAttribute('href')}`; + + // add a promise for each link element in the code + // so that we can wait on all the CSS before displaying the component + loadedLinks.push(new Promise((resolve, reject) => { + linkElement.onload = () => { + resolve(); + }; + + linkElement.onerror = () => { + reject(); + }; + })); + }); - const newScriptFile = document.createElement('script'); - newScriptFile.src = '/_src/scripts/vendor/mega-menu/mega-menu.js'; + // a list of all the components to be received from aem components + const aemComponents = ['languageBanner', 'megaMenu']; - const shadowRootScriptTag = shadowRoot.querySelector('script'); - if (shadowRootScriptTag) { - shadowRootScriptTag.replaceWith(newScriptFile); - } + // add logic so that every time an AEM function is fully loaded + // it is directly run using the shadow dom as parameter + aemComponents.forEach(aemComponentName => { + window.addEventListener(aemComponentName, () => { + window[aemComponentName](shadowRoot); + }); + }); - const navHeader = shadowRoot.querySelector('header'); - if (navHeader) { - navHeader.style.height = 'auto'; - } + // select all the scripts from contet div and + const scripts = contentDiv.querySelectorAll('script'); + scripts.forEach((script) => { + const newScript = document.createElement('script'); + newScript.src = `${aemHeaderHostname}${script.getAttribute('src')}`; + newScript.defer = true; + contentDiv.appendChild(newScript); + }); + + // if (cssFile) { + // cssFile.href = '/_src/scripts/vendor/mega-menu/mega-menu.css'; + // cssFile.as = 'style'; + + // // wait for the css to load before displaying the content + // // this is to avoid the content being displayed without the styles + // cssFile.onload = () => { + // contentDiv.style.display = 'block'; + // }; + // shadowRoot.appendChild(contentDiv); + // } + + // const newScriptFile = document.createElement('script'); + // newScriptFile.src = '/_src/scripts/vendor/mega-menu/mega-menu.js'; + // const shadowRootScriptTag = shadowRoot.querySelector('script'); + // if (shadowRootScriptTag) { + // shadowRootScriptTag.replaceWith(newScriptFile); + // } + + // const navHeader = shadowRoot.querySelector('header'); + // if (navHeader) { + // navHeader.style.height = 'auto'; + // } + + shadowRoot.appendChild(contentDiv); const body = document.querySelector('body'); body.style.maxWidth = 'initial'; @@ -446,6 +485,10 @@ async function runDefaultHeaderLogic(block) { document.querySelector('body').prepend(nav); + await Promise.allSettled(loadedLinks); + contentDiv.style.display = 'block'; + document.querySelector('body > div:first-child').classList.add('header-with-language-banner'); + adobeMcAppendVisitorId(shadowRoot); return; } diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 7fe4380b7..a0996a829 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1546,7 +1546,11 @@ main .section.blue a.button.modal::after { header, body > div:first-child { - height: 64px; + height: 64px; +} + +body > div.header-with-language-banner { + height: auto; } .visibility-hidden { From 6417b4aa96c1eaa5e9e56b278fdf4e7e9faaa934 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 16 Sep 2024 19:23:52 +0300 Subject: [PATCH 1112/1296] fixed linter --- _src/blocks/footer/footer.js | 88 ++++-------------------------------- _src/blocks/header/header.js | 34 ++------------ 2 files changed, 13 insertions(+), 109 deletions(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index 934fee8f1..71f772f2b 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -1,49 +1,7 @@ -import { decorateIcons, getMetadata, loadBlocks } from '../../scripts/lib-franklin.js'; +import { getMetadata, loadBlocks } from '../../scripts/lib-franklin.js'; import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js'; import { decorateMain } from '../../scripts/scripts.js'; -function wrapImgsInLinks(container) { - const pictures = container.querySelectorAll('picture'); - pictures.forEach((pic) => { - const link = pic.nextElementSibling; - if (link && link.tagName === 'A' && link.href) { - link.innerHTML = pic.outerHTML; - pic.replaceWith(link); - } - }); -} - -function onFooterElementClick(evt) { - const header = evt.target; - const ul = header.nextElementSibling; - header.classList.toggle('active'); - - if (ul.classList.contains('open')) { - ul.addEventListener('transitionend', function callback() { - if (!ul.classList.contains('open')) { // Ensure the ul is still closed - ul.classList.remove('visible'); - } - ul.removeEventListener('transitionend', callback); - }); - ul.classList.remove('open'); - } else { - ul.classList.add('visible'); - setTimeout(() => { - ul.classList.add('open'); - }, 10); // slight delay to allow the browser to apply the "visible" class first - } -} - -function disableSelectedCountry(container) { - const listOfCountries = container.querySelectorAll('li'); - listOfCountries.forEach((countryLanguage) => { - if (countryLanguage.innerHTML.includes('selected')) { - countryLanguage.classList.add('deactivated'); - countryLanguage.innerHTML = countryLanguage.innerHTML.replace('(selected)', ''); - } - }); -} - function setupPrivacyButton(container) { const privacyButton = container.querySelector('a[href="#privacybutton"]'); if (privacyButton) { @@ -57,36 +15,6 @@ function setupPrivacyButton(container) { } } -async function runDefaultFooterLogic(block) { - // fetch footer content - const footerPath = getMetadata('footer') || '/footer'; - const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); - - if (resp.ok) { - const html = await resp.text(); - - // decorate footer DOM - const footer = document.createElement('div'); - footer.innerHTML = html; - - wrapImgsInLinks(footer); - - const sectionHeaders = footer.querySelectorAll('div > div > p'); - sectionHeaders[2].addEventListener('click', onFooterElementClick); - sectionHeaders[3].addEventListener('click', onFooterElementClick); - - const sectionsData = footer.querySelectorAll('div > div > ul'); - disableSelectedCountry(sectionsData[3]); - - decorateIcons(footer); - block.append(footer); - - setupPrivacyButton(footer); - - adobeMcAppendVisitorId('footer'); - } -} - async function runLandingpageLogic(block) { const footerPath = getMetadata('footer') || '/footer'; const resp = await fetch(`${footerPath}.plain.html`); @@ -127,12 +55,12 @@ async function runLandingpageLogic(block) { adobeMcAppendVisitorId('footer'); } -async function runAemFooterLogic(block) { +async function runAemFooterLogic() { // fetch footer content const aemFooterHostname = window.location.hostname.includes('.hlx.') - || window.location.hostname.includes('localhost') - ? 'https://stage.bitdefender.com' - : ''; + || window.location.hostname.includes('localhost') + ? 'https://stage.bitdefender.com' + : ''; const aemFooterFetch = await fetch(`${aemFooterHostname}/content/experience-fragments/bitdefender/language_master/en/footer-fragment-v1/master/jcr:content/root.html`); if (!aemFooterFetch.ok) { @@ -146,8 +74,8 @@ async function runAemFooterLogic(block) { contentDiv.innerHTML = aemFooterHtml; const loadedLinks = []; - contentDiv.querySelectorAll('link').forEach(linkElement => { - //update the links so that they work on all Franklin domains + contentDiv.querySelectorAll('link').forEach((linkElement) => { + // update the links so that they work on all Franklin domains linkElement.href = `${aemFooterHostname}${linkElement.getAttribute('href')}`; linkElement.rel = 'stylesheet'; @@ -169,7 +97,7 @@ async function runAemFooterLogic(block) { // add logic so that every time an AEM function is fully loaded // it is directly run using the shadow dom as parameter - aemComponents.forEach(aemComponentName => { + aemComponents.forEach((aemComponentName) => { window.addEventListener(aemComponentName, () => { window[aemComponentName](shadowRoot); }); diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index cd8e12daf..4893f345c 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -388,7 +388,8 @@ async function runDefaultHeaderLogic(block) { if (domain === 'en-us') { domain = 'en'; } else if (domain.includes('-global')) { - domain = domain.split('-')[0]; + const [singleDomain] = domain.split('-'); + domain = singleDomain; } else { domain = domain.split('-').join('_'); } @@ -412,8 +413,8 @@ async function runDefaultHeaderLogic(block) { contentDiv.innerHTML = aemHeaderHtml; const loadedLinks = []; - contentDiv.querySelectorAll('link').forEach(linkElement => { - //update the links so that they work on all Franklin domains + contentDiv.querySelectorAll('link').forEach((linkElement) => { + // update the links so that they work on all Franklin domains linkElement.href = `${aemHeaderHostname}${linkElement.getAttribute('href')}`; // add a promise for each link element in the code @@ -434,7 +435,7 @@ async function runDefaultHeaderLogic(block) { // add logic so that every time an AEM function is fully loaded // it is directly run using the shadow dom as parameter - aemComponents.forEach(aemComponentName => { + aemComponents.forEach((aemComponentName) => { window.addEventListener(aemComponentName, () => { window[aemComponentName](shadowRoot); }); @@ -449,31 +450,6 @@ async function runDefaultHeaderLogic(block) { contentDiv.appendChild(newScript); }); - // if (cssFile) { - // cssFile.href = '/_src/scripts/vendor/mega-menu/mega-menu.css'; - // cssFile.as = 'style'; - - // // wait for the css to load before displaying the content - // // this is to avoid the content being displayed without the styles - // cssFile.onload = () => { - // contentDiv.style.display = 'block'; - // }; - // shadowRoot.appendChild(contentDiv); - // } - - // const newScriptFile = document.createElement('script'); - // newScriptFile.src = '/_src/scripts/vendor/mega-menu/mega-menu.js'; - - // const shadowRootScriptTag = shadowRoot.querySelector('script'); - // if (shadowRootScriptTag) { - // shadowRootScriptTag.replaceWith(newScriptFile); - // } - - // const navHeader = shadowRoot.querySelector('header'); - // if (navHeader) { - // navHeader.style.height = 'auto'; - // } - shadowRoot.appendChild(contentDiv); const body = document.querySelector('body'); body.style.maxWidth = 'initial'; From ccfad82b31f8b70650b215033e6949c0c106748f Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 16 Sep 2024 19:27:14 +0300 Subject: [PATCH 1113/1296] fixed more linter errors --- _src/blocks/hero/hero.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/blocks/hero/hero.js b/_src/blocks/hero/hero.js index a0c361de3..ce8462997 100644 --- a/_src/blocks/hero/hero.js +++ b/_src/blocks/hero/hero.js @@ -75,7 +75,7 @@ export default async function decorate(block) { const { // this defines wether the modals automatically refresh or not in the hero banner stopAutomaticModalRefresh, - label + label, } = block.closest('.section').dataset; buildHeroBlock(block); @@ -98,9 +98,9 @@ export default async function decorate(block) { const bubble = block.querySelector('.discount-bubble'); if (bubble) { if (label) { - bubble.innerHTML = bubble.innerHTML.replace("{label}", label); + bubble.innerHTML = bubble.innerHTML.replace('{label}', label); } - + let sibling = bubble.previousElementSibling; while (sibling) { From 0c45605846e54c5b221ccade6c960677cd183644 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 08:11:00 +0300 Subject: [PATCH 1114/1296] styling updates --- _src/blocks/barchart/barchart.css | 10 +++ _src/blocks/columns/columns.css | 89 +++++++++++++++++++++++++ _src/blocks/hero/hero.css | 105 +++++++++++++++++++++++++++--- _src/blocks/products/products.css | 7 +- _src/blocks/products/products.js | 4 +- _src/styles/styles.css | 31 ++++++++- 6 files changed, 232 insertions(+), 14 deletions(-) diff --git a/_src/blocks/barchart/barchart.css b/_src/blocks/barchart/barchart.css index b151fec8b..85c24bc0c 100644 --- a/_src/blocks/barchart/barchart.css +++ b/_src/blocks/barchart/barchart.css @@ -1,3 +1,7 @@ +.barchart-container .default-content-wrapper h2 { + font-size: var(--heading-font-size-l); +} + .barchart > ul { color: #3c3c3c; display: grid; @@ -148,6 +152,12 @@ } } +@media (max-width: 768px) { + .barchart-container .default-content-wrapper h2 { + font-size: var(--heading-font-size-s); + } +} + @media (max-width: 500px) { /* mobile */ .barchart-container .default-content-wrapper { padding-top: 0; diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 2cf6882b5..a4c605f85 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -34,6 +34,10 @@ font-size: var(--body-font-size-s); } +.columns.awards.v2 > div > div > p:last-of-type { + margin-top: 10px; +} + .columns.video-presentation > div > div > h3 { font-size: var(--heading-font-size-xl); } @@ -168,6 +172,23 @@ line-height: 1.25; } +.v2_benefits .columns-container .default-content-wrapper { + margin-bottom: 3em; +} + +.v2_benefits .columns.benefits h3 { + font-size: var(--heading-font-size-l); +} + +.v2_benefits .columns.benefits > div { + gap: 35px; +} + +.v2_benefits .columns.benefits > div > div { + font-size: var(--body-font-size-m); + flex: 1; +} + .section.subtitle-blue h2 { margin: 0 auto 3em; width: 100%; @@ -413,6 +434,22 @@ margin-bottom: 0; } + .section.bd_woman { + margin-top: 2em; + } + + .section.bd_woman h2 { + font-weight: var(--font-weight-regular); + } + + .section.bd_woman .right-col { + margin-top: -122px; + } + + .columns.screenshots { + margin-top: 4em; + } + .columns > div > .columns-img-col { margin-bottom: 1em; } @@ -473,6 +510,13 @@ } } +@media (max-width: 1200px) { + .v2_benefits .columns.benefits h3 { + font-size: var(--heading-font-size-m); + margin-bottom: 10px; + } +} + @media (min-width: 1200px) { .columns-container.we-container { max-width: 1350px; @@ -851,14 +895,30 @@ main .section.two-columns .right-col .products.plans a.button:any-link { justify-content: center; } +.v2 .columns.awards > div { + align-items: flex-start; +} + +.v2 .columns.awards > div > div > p { + font-size: var(--body-font-size-s); +} + @media (max-width: 1399px) { .columns-wrapper { padding: 0 var(--section-large-desktop-padding); } + .v2_benefits .columns-wrapper { + padding: var(--section-mobile-padding-vertical); + } + .columns.video-presentation .button-container { margin-right: 10px; } + + .columns.screenshots > div { + justify-content: space-evenly; + } } @media (max-width: 992px) { @@ -915,6 +975,35 @@ main .section.two-columns .right-col .products.plans a.button:any-link { .columns.video-presentation > div > div { width: 520px; } + + .section.wide.light-sky-blue.columns-container.awards.v2 { + width: 100%; + padding: 0; + margin: 4em 0 2em; + } +} + +@media (min-width: 768px) { + .v2 .columns > div { + flex-direction: row; + } + + .v2 .columns.awards .columns-wrapper { + padding: 0 10px 5em; + } + + .v2 .columns.awards > div > div > p:last-of-type { + max-width: 325px; + margin: 10px auto 0; + } + + .columns.screenshots > div { + flex-direction: row; + } + + .columns.screenshots > div > .columns-img-col { + flex: 0 0 230px; + } } @media (max-width: 768px) { diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index f4e0e37f9..f73af544f 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -313,7 +313,7 @@ main .hero p.button-container { } main .hero p.button-container:last-of-type { - margin: 2em 0; + margin: 0 0 10px; } main .hero p.button-container.discount-bubble-container { @@ -480,6 +480,48 @@ main .hero .hero-awards li::after { content: none; } +main .hero.pb-0 .hero-content { + padding-bottom: 0; +} + +main .v2 .hero h1 { + font-weight: var(--font-weight-regular); + font-family: var(--body-font-family); +} + +main .v2 .hero h1 + p { + font-size: var(--body-font-size-s); +} + +main .v2 .hero .hero-content > div:first-of-type { + width: 100%; +} + +main .v2 .hero .hero-content > div:last-of-type img { + height: auto; + width: 360px; + position: absolute; + bottom: 0; +} + +main .v2 .hero .hero-content > div table tr { + display: flex; +} + +main .v2 .hero .hero-content > div table tr td:first-of-type { + margin-right: 2em; + width: 280px; +} + +main .v2 .hero .hero-content > div table tr td:last-of-type { + width: 465px; +} + +main .v2 .hero .hero-content > div table tr td img { + width: 100%; + height: auto; +} + @media(max-width: 989px) { main .hero.new2024design { background-color: #006FFF; @@ -634,12 +676,20 @@ main .hero .hero-awards li::after { width: auto; } + main .v2 .hero .hero-content > div:last-of-type img { + width: 360px; + right: -6em; + } } @media (max-width: 1399px) { main .hero .hero-content ul li { font-size: var(--body-font-size-xs); } + + main .v2 .hero h1 { + font-size: var(--heading-font-size-xxl1); + } } @media (min-width: 1600px) { /* large desktop */ @@ -648,6 +698,16 @@ main .hero .hero-awards li::after { margin-bottom: 15px; } + main .hero h1 { + font-size: 2.5rem; + font-weight: 700; + font-family: IBM Plex Sans, sans-serif; + } + + main .v2 .hero h1 { + font-size: var(--heading-font-size-xxl2); + } + main .hero h2 { color: #000; font-size: 24px; @@ -657,12 +717,6 @@ main .hero .hero-awards li::after { margin-top: 10px; } - main .hero h1 { - font-size: 2.5rem; - font-weight: 700; - font-family: IBM Plex Sans, sans-serif; - } - main .hero .discount-bubble { width: 83px; height: 83px; @@ -690,10 +744,45 @@ main .hero .hero-awards li::after { } } +@media (max-width: 990px) { + main .v2 .hero h1 { + font-size: var(--heading-font-size-xl1); + } + + main .hero .hero-content > div table tr td:last-of-type { + width: 510px; + } + + main .hero .hero-content > div table tr td:first-of-type { + display: none; + } + + main .v2 .hero .hero-picture picture img { + padding-left: 0; + } + + main .v2 .hero .hero-content > div:last-of-type img { + width: 265px; + right: 0; + } +} + @media (max-width: 768px) { - main .hero .hero-picture { + main .hero .hero-picture, main .v2 .hero .hero-content > div:last-of-type img { display: none; } + + main .v2 .hero .hero-content > div table tr td:last-of-type { + width: 100%; + } + + main .v2 .hero h1 { + font-size: var(--heading-font-size-l2); + } + + main .v2 .hero h1 + p { + font-size: var(--body-font-size-xs); + } } @media (max-width: 450px) { diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 079d53150..c1c309c8d 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -299,16 +299,17 @@ } .products.compact .product-card .price strong, .products.plans .product-card .price strong { - font-size: var(--heading-font-size-xl); - font-weight: var(--font-weight-bold); + font-size: var(--heading-font-size-l); + font-weight: var(--font-weight-bolder); } .product-card .price em { - color: #7e7e7e; + color: black; font-size: var(--body-font-size-xxs); display: block; font-style: normal; line-height: 1.4em; + font-weight: bold; } .product-card hr { diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 12dc85c3d..b0392b307 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -368,14 +368,14 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { * @param variant Product variant * @returns root node of the nanoblock */ -function renderLowestPrice(code, variant, monthly = '') { +function renderLowestPrice(code, variant, monthly = '', text = '') { const root = document.createElement('p'); fetchProduct(code, variant).then((product) => { const m = toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; const price = isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice; - root.innerHTML = `Start today for as low as ${price} ${product.currency_label}${isMonthly ? '/mo' : ''}`; + root.innerHTML = `${text.replace('0', `${price} ${product.currency_label}`)}`; }); return root; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index ff7f6fdc6..26a8855ed 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -71,8 +71,12 @@ /* heading sizes */ --heading-font-size-xxxl: 60px; + --heading-font-size-xxl2: 56px; + --heading-font-size-xxl1: 50px; --heading-font-size-xxl: 48px; + --heading-font-size-xl1: 42px; --heading-font-size-xl: 40px; + --heading-font-size-l2: 38px; --heading-font-size-l: 32px; --heading-font-size-m: 24px; --heading-font-size-s: 20px; @@ -1230,7 +1234,8 @@ main .section.cta { } main .cta.bigger-text h2 { - font-size: 34px; + font-size: var(--heading-font-size-l); + font-weight: var(--font-weight-regular); } main .section.cta p { @@ -1458,6 +1463,14 @@ main .section.blue a.button.modal::after { text-align: right; } +.buttons-align-right .default-content-wrapper { + padding: 1em 3em !important; +} + +.buttons-align-right .default-content-wrapper p.button-container:last-of-type { + margin-left: 1em; +} + .buttons-align-right > div { display: flex; flex-direction: column; @@ -1611,6 +1624,22 @@ body > div:first-child { padding-bottom: 2em; margin-bottom: 1em; } + + .buttons-align-right .default-content-wrapper { + padding: 1em!important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + .buttons-align-right .default-content-wrapper h2 { + flex: 0 1 auto; + font-size: var(--heading-font-size-s)!important; + } + + .buttons-align-right .default-content-wrapper p.button-container { + flex: 1; + } } @media (max-width: 500px) { From 6c8b65eff61114a891ae661f2589f1ee68158520 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 11:06:48 +0300 Subject: [PATCH 1115/1296] Updates --- _src/blocks/columns/columns.css | 74 ++++++++++++++++++++++++++++++- _src/blocks/products/products.css | 30 +++++++++++++ _src/styles/styles.css | 22 ++++++++- 3 files changed, 122 insertions(+), 4 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index a4c605f85..33f29b03e 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,10 +2,50 @@ padding: 0 var(--body-padding); } +.columns-wrapper > div.grey-bck { + background-color: #F5F5F7; + border-radius: 1em; + padding: 0; + display: flex; + overflow: hidden; +} + +.columns-wrapper > div.grey-bck h5 { + font-size: var(--heading-font-size-m); + line-height: var(--heading-font-size-l); +} + +.columns-wrapper > div.grey-bck p:first-of-type { + margin: 1em 0; +} + +.columns-wrapper > div.grey-bck div.columns-text-col { + padding-left: 4em; + padding-right: 1em; +} + +.columns-wrapper > div.grey-bck > div { + flex: 1; +} + +.columns-wrapper > div.grey-bck > div > div { + margin: 0!important; + flex: 0 0 50%; +} + .columns-container.chat-options p { font-size: var(--body-font-size-s) !important; } +.columns-container.linear-gradient h3 { + font-size: var(--heading-font-size-xl); + margin-bottom: 1em; +} + +.columns-container.linear-gradient p { + font-size: var(--body-font-size-m); +} + .columns.benefits > p { margin-bottom: 0; margin-top: 0; @@ -442,10 +482,24 @@ font-weight: var(--font-weight-regular); } - .section.bd_woman .right-col { + .section.bd_woman .columns-img-col { margin-top: -122px; } + .section.b_mark { + margin-bottom: 5em; + } + + .section.b_mark > div { + padding: 5em 0 3em 0; + margin-top: 0; + } + + .section.b_mark .columns-img-col img { + margin-top: -200px; + margin-bottom: -3em; + } + .columns.screenshots { margin-top: 4em; } @@ -454,6 +508,14 @@ margin-bottom: 1em; } + .v2 .columns > div > .columns-text-col { + flex: 0 0 40%; + } + + .v2 .columns > div > .columns-text-col.columns-right-col { + margin-left: 4em; + } + .columns-container.chat-options table tr td:last-of-type img { display: block; } @@ -759,7 +821,7 @@ @media (min-width: 768px) { .linear-gradient.columns-container[data-bg-image]{ - background-image: linear-gradient(to right, rgb(0 0 0 / 100%) 20%, rgb(0 0 0 / 0%)), var(--bg-image-url); + background-image: linear-gradient(to right, rgb(39 1 107 / 100%) 20%, rgb(0 0 0 / 0%)), var(--bg-image-url); } .columns-container[data-bg-image]{ @@ -981,6 +1043,14 @@ main .section.two-columns .right-col .products.plans a.button:any-link { padding: 0; margin: 4em 0 2em; } + + .columns-wrapper > div.grey-bck div.columns-text-col { + padding: 2em; + } + + .columns-wrapper > div.grey-bck > div > div { + flex: 1; + } } @media (min-width: 768px) { diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index c1c309c8d..848810409 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -37,6 +37,36 @@ flex-grow: 0; } +.v2 .product-card .price { + flex: 1; + justify-content: center; + align-items: flex-end; + display: flex; +} + +.v2 .product-card .price:last-of-type { + flex: 0; +} + +.v2 .product-card .price:last-of-type em { + color: #7e7e7e; + font-size: var(--body-font-size-xxxs); + font-weight: var(--font-weight-bold); + line-height: 2.4; +} + +.v2 .product-card p:last-of-type { + line-height: 16px; +} + +.v2 .product-card hr { + margin: 12px 0; +} + +.v2 .product-card .button-container { + margin: 15px 0; +} + .product-card .button-container { flex-grow: 0; display: flex; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 26a8855ed..5f91bb352 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -247,6 +247,16 @@ hr { border-bottom: 1px solid var(--horizontal-separator-color); } +.my-0 { + margin-top: 0!important; + margin-bottom: 0!important; +} + +.py-0 { + padding-top: 0!important; + padding-bottom: 0!important; +} + code, pre, samp { font-family: var(--fixed-font-family); font-size: var(--body-font-size-s); @@ -776,7 +786,7 @@ body.creators { font-size: 19px; } - main .section.width-medium .block { + main .section.width-medium .block, main .section.width-medium .default-content-wrapper, main .section.width-medium-p .block p, main .section.width-medium-p .default-content-wrapper p { width: 940px; margin: 0 auto; } @@ -951,7 +961,7 @@ main pre { @media (min-width: 1400px) { p { - font-size: var(--body-font-size-s); + font-size: var(--body-font-size-m); } .section.migration p { @@ -1233,6 +1243,14 @@ main .section.cta { width: 270px; } +.has_user_guide .info-button-container a { + display: flex; +} + +.has_user_guide .info-button-container a::before { + margin-right: 5px; +} + main .cta.bigger-text h2 { font-size: var(--heading-font-size-l); font-weight: var(--font-weight-regular); From 3a56c55fb0807ded81584fe0a7a61d8458755a78 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 17 Sep 2024 11:19:46 +0300 Subject: [PATCH 1116/1296] extended support --- _src/scripts/utils/utils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 41ec3acef..6757f5e74 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -96,12 +96,14 @@ const PRICE_LOCALE_MAP = new Map([ ['en-gb', { force_country: 'uk', country_code: 'gb' }], ['en-au', { force_country: 'au', country_code: 'au' }], ['en-nz', { force_country: 'au', country_code: 'nz' }], + ['en-global', { force_country: 'en', country_code: null }], ['es-cl', { force_country: 'en', country_code: 'cl' }], ['es-co', { force_country: 'en', country_code: 'co' }], ['es-mx', { force_country: 'en', country_code: 'mx' }], ['es-pe', { force_country: 'en', country_code: 'pe' }], ['es-bz', { force_country: 'en', country_code: 'bz' }], ['es-es', { force_country: 'es', country_code: 'es' }], + ['es-global', { force_country: 'en', country_code: null }], ['ro-ro', { force_country: 'ro', country_code: 'ro' }], ['it-it', { force_country: 'it', country_code: 'it' }], ['fr-fr', { force_country: 'fr', country_code: 'fr' }], @@ -365,7 +367,7 @@ export function getBuyLinkCountryPrefix() { export function getPriceLocalMapByLocale() { const locale = window.location.pathname.split('/')[1]; - return PRICE_LOCALE_MAP.get(locale) || 'en-us'; + return PRICE_LOCALE_MAP.get(locale) || PRICE_LOCALE_MAP.get('en-us'); } export function generateProductBuyLink(product, productCode, month = null, years = null) { From c14e69b76a5fd9f5ec907588346321777e7896d9 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 17 Sep 2024 13:02:49 +0300 Subject: [PATCH 1117/1296] fix: 404 page fragments --- 404.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/404.html b/404.html index b5e695b7f..0691fefe3 100644 --- a/404.html +++ b/404.html @@ -17,7 +17,7 @@ const domain = getDomain(); window.addEventListener('load', async () => { - const response = await fetch(`/${domain}/_src/404.plain.html`); + const response = await fetch(`/${domain}/consumer/404.plain.html`); if (response.ok) { const htmlContent = await response.text(); const specialSection = document.querySelector('.link-section'); From 9703c1cf1d4ae795ebeb6668ad445e3ab2bfe5cf Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 17 Sep 2024 13:43:56 +0300 Subject: [PATCH 1118/1296] DEX-20103 | added AEM Target code --- _src/scripts/target.js | 124 ++++++++++++++++++++++++++++++++++++ _src/scripts/utils/utils.js | 6 +- 2 files changed, 128 insertions(+), 2 deletions(-) diff --git a/_src/scripts/target.js b/_src/scripts/target.js index f85d55906..4326689f1 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -2,6 +2,130 @@ import { getMetadata, sampleRUM } from './lib-franklin.js'; const ADOBE_TARGET_SESSION_ID_PARAM = 'adobeTargetSessionId'; +export class Target { + static events = { + LIBRARY_LOADED: "at-library-loaded", + REQUEST_START: "at-request-start", + REQUEST_SUCCEEDED: "at-request-succeeded", + REQUEST_FAILED: "at-request-failed", + CONTENT_RENDERING_START: "at-content-rendering-start", + CONTENT_RENDERING_SUCCEEDED: "at-content-rendering-succeeded", + CONTENT_RENDERING_FAILED: "at-content-rendering-failed", + CONTENT_RENDERING_NO_OFFERS: "at-content-rendering-no-offers", + CONTENT_RENDERING_REDIRECT: "at-content-rendering-redirect" + } + + /** + * Mbox describing an offer + * @typedef {{content: {offer: string, block:string} | {pid}, type: string|null}} Mbox + */ + + /** + * @type {Mbox} + */ + static offers = null; + + static #staticInit = new Promise(resolve => { + /** Target is loaded and we wait for it to finish so we can get the offer */ + if (window.adobe?.target) { + this.#getOffers().then(resolve); + return; + } + + /** + * Semaphor to mark that the offer call was made + * This helps avoid doubled call fot the getOffer + * Set before any 'await' as those triggered jumps in the code + */ + let offerCallMade = false; + + /** Target wasn't loaded we wait for events from it */ + [this.events.CONTENT_RENDERING_SUCCEEDED, this.events.CONTENT_RENDERING_NO_OFFERS] + .forEach(event => document.addEventListener(event, async () => { + if (!offerCallMade) { + offerCallMade = true; + await this.#getOffers(); + resolve(); + } + }, { once: true })); + + [this.events.CONTENT_RENDERING_FAILED, this.events.REQUEST_FAILED] + .forEach(event => document.addEventListener(event, async () => { + if (!offerCallMade) { + offerCallMade = true; + resolve(); + } + }, { once: true })); + }); + + /** + * https://bitdefender.atlassian.net/wiki/spaces/WWW/pages/1661993460/Activating+Promotions+Enhancements+Target + * @returns {Promise} + */ + static async getCampaign() { + await this.#staticInit; + return this.offers?.["initSelector-mbox"]?.content?.pid || null; + } + + /** + * @returns {[string]} + */ + static #getAllMboxes() { + const mboxes = [...document.querySelectorAll("[data-mboxes]")] + .map(mboxes => { + try { + return JSON.parse(mboxes.dataset.mboxes) + } catch (error) { + console.warn(error); + return null; + } + }) + .filter(Boolean) + .reduce((acc, mboxes) => { + mboxes.forEach(mbox => acc.add(mbox)); + return acc; + }, new Set()); + + if (!mboxes) { + return []; + } + + return [...mboxes].map((name, index) => { return { index: ++index, name } }); + } + + static async #getOffers() { + const mboxes = this.#getAllMboxes(); + + try { + this.offers = await window.adobe?.target?.getOffers({ + consumerId: await Visitor.getConsumerId(), + request: { + id: { + marketingCloudVisitorId: await Visitor.getMarketingCloudVisitorId() + }, + execute: { + mboxes: [ + { index: 0, name: "initSelector-mbox" }, + ...mboxes + ] + } + } + }); + + this.offers = this.offers?.execute?.mboxes?.reduce((acc, mbox) => { + acc[mbox.name] = {}; + acc[mbox.name].content = mbox?.options?.[0]?.content; + acc[mbox.name].type = mbox?.options?.[0]?.type; + return acc; + }, {}); + + } catch (e) { + console.warn(e); + } + } +}; +window.Target = Target; + /** * Convert a URL to a relative URL. * @param url diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 41ec3acef..22631debf 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,3 +1,4 @@ +import { Target } from '../target.js'; import ZuoraNLClass from '../zuora.js'; export const IANA_BY_REGION_MAP = new Map([ @@ -405,6 +406,7 @@ export function formatPrice(price, currency, region = null, locale = null) { * hk - 51, tw - 52 */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { + const targetCampain = await Target.getCampaign(); const url = new URL(window.location.href); if (!isZuora()) { @@ -414,7 +416,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { if (!pid) { // eslint-disable-next-line no-param-reassign - pid = url.searchParams.get('pid') || getMetadata('pid'); + pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); } data.append('data', JSON.stringify({ @@ -481,7 +483,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const variantSplit = variant.split('-'); const units = variantSplit[0].split('u')[0]; const years = variantSplit[1].split('y')[0]; - const campaign = getParamValue('campaign'); + const campaign = targetCampain || getParamValue('campaign'); const zuoraResponse = await ZuoraNLClass.loadProduct(`${code}/${units}/${years}`, campaign); // zuoraResponse.ok = true; From c606f7790c41951e8aa31a8098317d111d154051 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 14:09:39 +0300 Subject: [PATCH 1119/1296] MIgration updates --- _src/blocks/accordion/accordion.css | 4 ++ _src/blocks/columns/columns.css | 42 +++++++++++++++++++ _src/blocks/hero/hero.css | 21 +++++++++- .../product-comparison-table.css | 1 + _src/styles/styles.css | 9 +++- 5 files changed, 73 insertions(+), 4 deletions(-) diff --git a/_src/blocks/accordion/accordion.css b/_src/blocks/accordion/accordion.css index f765cb539..7916b0ba6 100644 --- a/_src/blocks/accordion/accordion.css +++ b/_src/blocks/accordion/accordion.css @@ -129,6 +129,10 @@ font-size: var(--body-font-size-xl); } + .accordion.smaller-text .accordion-item-content p { + font-size: var(--body-font-size-s)!important; + } + .accordion.terms-of-use .accordion-item-header h3 { font-size: var(--heading-font-size-xs); } diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 33f29b03e..ecec9fa3f 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -143,6 +143,12 @@ object-fit: contain; } +.columns.awards.smaller-icons > div img { + width: auto; + max-width: unset; + height: 100px; +} + .grey-version .columns > div { display: flex; justify-content: space-between; @@ -216,6 +222,10 @@ margin-bottom: 3em; } +.bigger_title .columns.benefits h3 { + font-size: var(--heading-font-size-l); +} + .v2_benefits .columns.benefits h3 { font-size: var(--heading-font-size-l); } @@ -229,6 +239,10 @@ flex: 1; } +.v3_benefits .columns.benefits p { + font-size: var(--body-font-size-s); +} + .section.subtitle-blue h2 { margin: 0 auto 3em; width: 100%; @@ -387,6 +401,17 @@ width: auto; } +.small-icons-v2 .columns > div > div.columns-img-col { + display: flex; + align-items: center; + justify-content: center; +} + +.small-icons-v2 .columns > div > div img { + height: 120px; + width: auto; +} + .columns.video-presentation .linked-image-container img { width: 150px; height: 44px; @@ -405,6 +430,18 @@ display: none; } +.green-button .button-container a { + background-color: #51a71d; + border: 2px solid #51a71d; + text-transform: uppercase; +} + +.green-button p:last-of-type a { + text-decoration: underline; + font-size: var(--body-font-size-xs); + margin: 0 10px; +} + @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; @@ -500,6 +537,11 @@ margin-bottom: -3em; } + .section.b_mark .columns-img-col img { + margin-top: -200px; + margin-bottom: -3em; + } + .columns.screenshots { margin-top: 4em; } diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index f73af544f..0e33c3b4d 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -80,7 +80,6 @@ main .hero.black-background .hero-content .breadcrumb a:hover { } /* hero */ - main .hero-container > div { max-width: unset; } @@ -517,11 +516,19 @@ main .v2 .hero .hero-content > div table tr td:last-of-type { width: 465px; } +main .smaller_icon .hero .hero-content > div table tr td:last-of-type { + width: fit-content; +} + main .v2 .hero .hero-content > div table tr td img { width: 100%; height: auto; } +main .smaller_icon .hero .hero-content > div table tr td:first-of-type { + width: 70px; +} + @media(max-width: 989px) { main .hero.new2024design { background-color: #006FFF; @@ -676,9 +683,19 @@ main .v2 .hero .hero-content > div table tr td img { width: auto; } + main .smaller_icon .hero .hero-content > div:last-of-type img { + width: 40%!important; + } + + main .new_v2 .hero .hero-content > div:last-of-type img { + width: 60%!important; + right: 0; + } + main .v2 .hero .hero-content > div:last-of-type img { width: 360px; - right: -6em; + right: -11em !important; + bottom: -3em; } } diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index c095b6406..69cfb4158 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -392,6 +392,7 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { .product-comparison-header div[role="columnheader"] h3 { font-size: var(--heading-font-size-m); + min-height: unset !important; } .product-comparison-header-subtitle { diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 5f91bb352..93de9ce8d 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -786,11 +786,16 @@ body.creators { font-size: 19px; } - main .section.width-medium .block, main .section.width-medium .default-content-wrapper, main .section.width-medium-p .block p, main .section.width-medium-p .default-content-wrapper p { + main .section.width-medium .block, main .section.width-medium .default-content-wrapper { width: 940px; margin: 0 auto; } + main .section.width-medium-p .block p, main .section.width-medium-p .default-content-wrapper p { + max-width: 940px; + margin: 0 auto; + } + main .section.width-smaller .block, main .section.width-smaller .default-content-wrapper { width: 750px; margin: 0 auto; @@ -965,7 +970,7 @@ main pre { } .section.migration p { - font-size: var(--heading-font-size-xs); + font-size: var(--heading-font-size-xxs); } } From 964c7ce0caea9ad0ac8931a5a68c2871e091a430 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 17 Sep 2024 14:19:33 +0300 Subject: [PATCH 1120/1296] added special case for china websites --- _src/blocks/footer/footer.js | 87 +++++++++++++++++++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index 71f772f2b..5a784986d 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -1,7 +1,49 @@ -import { getMetadata, loadBlocks } from '../../scripts/lib-franklin.js'; +import { decorateIcons, getMetadata, loadBlocks } from '../../scripts/lib-franklin.js'; import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js'; import { decorateMain } from '../../scripts/scripts.js'; +function wrapImgsInLinks(container) { + const pictures = container.querySelectorAll('picture'); + pictures.forEach((pic) => { + const link = pic.nextElementSibling; + if (link && link.tagName === 'A' && link.href) { + link.innerHTML = pic.outerHTML; + pic.replaceWith(link); + } + }); +} + +function onFooterElementClick(evt) { + const header = evt.target; + const ul = header.nextElementSibling; + header.classList.toggle('active'); + + if (ul.classList.contains('open')) { + ul.addEventListener('transitionend', function callback() { + if (!ul.classList.contains('open')) { // Ensure the ul is still closed + ul.classList.remove('visible'); + } + ul.removeEventListener('transitionend', callback); + }); + ul.classList.remove('open'); + } else { + ul.classList.add('visible'); + setTimeout(() => { + ul.classList.add('open'); + }, 10); // slight delay to allow the browser to apply the "visible" class first + } +} + +function disableSelectedCountry(container) { + const listOfCountries = container.querySelectorAll('li'); + listOfCountries.forEach((countryLanguage) => { + if (countryLanguage.innerHTML.includes('selected')) { + countryLanguage.classList.add('deactivated'); + countryLanguage.innerHTML = countryLanguage.innerHTML.replace('(selected)', ''); + } + }); +} + function setupPrivacyButton(container) { const privacyButton = container.querySelector('a[href="#privacybutton"]'); if (privacyButton) { @@ -15,6 +57,36 @@ function setupPrivacyButton(container) { } } +async function runDefaultFooterLogic(block) { + // fetch footer content + const footerPath = getMetadata('footer') || '/footer'; + const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {}); + + if (resp.ok) { + const html = await resp.text(); + + // decorate footer DOM + const footer = document.createElement('div'); + footer.innerHTML = html; + + wrapImgsInLinks(footer); + + const sectionHeaders = footer.querySelectorAll('div > div > p'); + sectionHeaders[2].addEventListener('click', onFooterElementClick); + sectionHeaders[3].addEventListener('click', onFooterElementClick); + + const sectionsData = footer.querySelectorAll('div > div > ul'); + disableSelectedCountry(sectionsData[3]); + + decorateIcons(footer); + block.append(footer); + + setupPrivacyButton(footer); + + adobeMcAppendVisitorId('footer'); + } +} + async function runLandingpageLogic(block) { const footerPath = getMetadata('footer') || '/footer'; const resp = await fetch(`${footerPath}.plain.html`); @@ -126,10 +198,23 @@ async function runAemFooterLogic() { * @param {Element} footer The footer element */ function applyFooterFactorySetup(footerMetadata, block) { + + // TODO: please remove this if after creating the zh-hk and zh-tw + // headers in AEM + const regex = /\/(zh-hk|zh-tw)\//i; + const matches = window.location.href.match(regex); + if (matches) { + runDefaultFooterLogic(block); + return; + } + switch (footerMetadata) { case 'landingpage': runLandingpageLogic(block); break; + case 'franklinFooter': + runDefaultFooterLogic(block); + break; default: runAemFooterLogic(block); break; From 07894c6a6cd2f4301ce29666df98059d485d07dd Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 17 Sep 2024 14:20:19 +0300 Subject: [PATCH 1121/1296] fixed linter --- _src/blocks/footer/footer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index 5a784986d..b906fa75a 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -198,7 +198,6 @@ async function runAemFooterLogic() { * @param {Element} footer The footer element */ function applyFooterFactorySetup(footerMetadata, block) { - // TODO: please remove this if after creating the zh-hk and zh-tw // headers in AEM const regex = /\/(zh-hk|zh-tw)\//i; From 14fbfa0bab2dff825edf17ce5a9dd5d6b07fddf2 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 15:18:43 +0300 Subject: [PATCH 1122/1296] fix: lint --- _src/blocks/columns/columns.js | 10 +++++----- _src/blocks/sticky-navigation/sticky-navigation.js | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index 1f8a2995a..60934ab12 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -35,12 +35,13 @@ function createNavigationButtons(numberOfSlides, carousel) { const button = document.createElement('button'); button.setAttribute('aria-label', `Slide ${i + 1}`); button.addEventListener('click', () => { - if (!button.classList.contains('active-button')) { - showSlides(carousel, i); - setActiveButton(button, buttonsWrapper); - } + if (!button.classList.contains('active-button')) { + showSlides(carousel, i); + setActiveButton(button, buttonsWrapper); + } }); buttonsWrapper.appendChild(button); + return button; }); buttonsWrapper.firstChild?.classList.add('active-button'); // Set first button as active @@ -57,7 +58,6 @@ function setupCarousel(carousel, resetSlidePosition = false) { hideExcessElements(carousel); } - function setImageAsBackgroundImage() { const columns = document.querySelectorAll('.columns.text-over-image > div > div'); diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 442fbb105..1b9a47428 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -64,9 +64,9 @@ function renderStickyNavigation(block) { /** close the dropdown menu after user selection */ stickyNavMenu.addEventListener('click', (event) => { - event.target.closest('ul').querySelectorAll('li').forEach(item => { + event.target.closest('ul').querySelectorAll('li').forEach((item) => { item.classList.remove('opened'); - }) + }); event.target.closest('li').classList.toggle('opened'); mobileDropDown.classList.toggle('opened'); }); From fcfd821cebe8f0eb23c3912bb1aa7bf0ab3685e1 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 15:19:58 +0300 Subject: [PATCH 1123/1296] fix lint js --- _src/blocks/columns/columns.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index 60934ab12..ff5ba9776 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -35,10 +35,10 @@ function createNavigationButtons(numberOfSlides, carousel) { const button = document.createElement('button'); button.setAttribute('aria-label', `Slide ${i + 1}`); button.addEventListener('click', () => { - if (!button.classList.contains('active-button')) { - showSlides(carousel, i); - setActiveButton(button, buttonsWrapper); - } + if (!button.classList.contains('active-button')) { + showSlides(carousel, i); + setActiveButton(button, buttonsWrapper); + } }); buttonsWrapper.appendChild(button); return button; From b43455ae9b789e41472de01c0e3ae397a6e3a013 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 17 Sep 2024 15:36:22 +0300 Subject: [PATCH 1124/1296] Updates buy links to have data sets for testing --- .../box-image-round-card.js | 9 --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 27 ++++++-- .../product-comparison-table.js | 5 +- .../products-sideview/products-sideview.js | 15 ++++- _src/blocks/products/products.js | 2 +- _src/scripts/utils/utils.js | 64 +------------------ 6 files changed, 44 insertions(+), 78 deletions(-) diff --git a/_src/blocks/box-image-round-card/box-image-round-card.js b/_src/blocks/box-image-round-card/box-image-round-card.js index 19b12d4d0..36322492c 100644 --- a/_src/blocks/box-image-round-card/box-image-round-card.js +++ b/_src/blocks/box-image-round-card/box-image-round-card.js @@ -5,15 +5,6 @@ export default function decorate(block) { const innerWrapper = block.children[0]; innerWrapper.classList = 'inner-wrapper'; - // const iconElement = innerWrapper.children[0].children[0].children[0]; - // innerWrapper.children[0].children[0].remove(); - // innerWrapper.children[0].prepend(iconElement); - - // const originalAnchorEl = innerWrapper.children[0].lastElementChild.firstElementChild; - // const newAnchorEl = originalAnchorEl.cloneNode(); - // newAnchorEl.classList = ''; - // innerWrapper.prepend(newAnchorEl); - const defaultWrapper = document.createElement('div'); defaultWrapper.classList = 'default-content-wrapper'; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index cd29785bd..11b3adbfa 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -1,7 +1,9 @@ /* eslint-disable prefer-const */ /* eslint-disable no-undef */ /* eslint-disable max-len */ -import { getMetadata, getBuyLinkCountryPrefix, matchHeights } from '../../scripts/utils/utils.js'; +import { + getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, +} from '../../scripts/utils/utils.js'; let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { @@ -67,8 +69,11 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid = null, buyLinkSelector = null, billed = null, type = null, hideDecimals = null, perPrice = '') { try { const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); - const product = await fetchProduct(prodName, `${prodUsers}u-${prodYears}y`, pid); - const { price, discount } = product; + const variant = `${prodUsers}u-${prodYears}y`; + const product = await fetchProduct(prodName, variant, pid); + const { + price, discount, currency_label: currencyLabel, + } = product; const discountPercentage = Math.round((1 - discount.discounted_price / price) * 100); let oldPrice = price; let newPrice = discount.discounted_price; @@ -76,6 +81,20 @@ async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid let updatedBuyLinkSelector = buyLinkSelector; if (updatedBuyLinkSelector) { updatedBuyLinkSelector.href = dynamicBuyLink(updatedBuyLinkSelector, prodName, prodUsers, prodYears, pid); + + const dataInfo = { + productId: prodName, + variation: { + price: discount + ? +newPrice : +oldPrice, + discounted_price: discount.discounted_price, + variation_name: variant, + currency_label: currencyLabel, + region_id: product.region_id, + }, + }; + + setDataOnBuyLinks(updatedBuyLinkSelector, dataInfo); } let priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices__box'); @@ -121,7 +140,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid ${newPriceListed} ${perPrice && `${perPrice.textContent.replace('0', '')}`}
    ${billed ? `
    ${billed.innerHTML.replace('0', `${newPriceBilled}`)}
    ` : ''} - ${updatedBuyLinkSelector ? updatedBuyLinkSelector.text : ''} + ${updatedBuyLinkSelector.outerHTML}
    `; return priceElement; } catch (err) { diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 15ebe7b9f..3fa54d658 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -58,8 +58,9 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { const dataInfo = { productId: prd.code, variation: { - price: prd.product.price, - discounted_price: prd.product.discount.discounted_price, + price: prd.product.discount + ? +prd.product.discount.discounted_price : +prd.product.price, + discounted_price: prd.product.discount?.discounted_price, variation_name: prd.variant, currency_label: prd.product.currency_label, region_id: prd.product.region_id, diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index ec0c3af8f..31c6ece0a 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -4,7 +4,7 @@ import { getBuyLinkCountryPrefix, getDatasetFromSection, getPidFromUrl, - renderNanoBlocks, + renderNanoBlocks, setDataOnBuyLinks, } from '../../scripts/utils/utils.js'; const state = { @@ -147,6 +147,19 @@ function updateBuyLink(block) { if (buyLink) { buyLink.href = `${getBuyLinkCountryPrefix()}/${productCode}/${dimension}/${years}/${pid ? `pid.${pid}` : ''}`; + const dataInfo = { + productId: productCode, + variation: { + price: state.currentProduct.discount + ? +state.currentProduct.discount.discounted_price : +state.currentProduct.price, + discounted_price: state.currentProduct.discount?.discounted_price, + variation_name: state.currentProduct.variation.variation_name, + currency_label: state.currentProduct.currency_label, + region_id: state.currentProduct.region_id, + }, + }; + + setDataOnBuyLinks(buyLink, dataInfo); } } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index e1320cf71..a4c91d134 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -430,7 +430,7 @@ export default function decorate(block) { const dataInfo = { productId: card.productCode, variation: { - price: card.price, + price: card.actualPrice, discounted_price: card.discountedPrice, variation_name: card.variantId, currency_label: card.currency, diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 6757f5e74..0eb65cde8 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -99,7 +99,7 @@ const PRICE_LOCALE_MAP = new Map([ ['en-global', { force_country: 'en', country_code: null }], ['es-cl', { force_country: 'en', country_code: 'cl' }], ['es-co', { force_country: 'en', country_code: 'co' }], - ['es-mx', { force_country: 'en', country_code: 'mx' }], + ['es-mx', { force_country: 'mx', country_code: 'mx' }], ['es-pe', { force_country: 'en', country_code: 'pe' }], ['es-bz', { force_country: 'en', country_code: 'bz' }], ['es-es', { force_country: 'es', country_code: 'es' }], @@ -304,64 +304,6 @@ export function getProductLinkCountryPrefix() { } export function getBuyLinkCountryPrefix() { - const { pathname } = window.location; - - if (pathname.includes('/en-au/')) { - return 'https://www.bitdefender.com.au/site/Store/buy'; - } - - if (pathname.includes('/en-gb/')) { - return 'https://www.bitdefender.co.uk/site/Store/buy'; - } - - if (pathname.includes('/ro-ro/')) { - return 'https://www.bitdefender.ro/site/Store/buy'; - } - - if (pathname.includes('/it-it/')) { - return 'https://www.bitdefender.it/site/Store/buy'; - } - - if (pathname.includes('/fr-fr/')) { - return 'https://www.bitdefender.fr/site/Store/buy'; - } - - if (pathname.includes('/fr-be/')) { - return 'https://www.bitdefender.be/site/Store/buy'; - } - - if (pathname.includes('/nl-be/')) { - return 'https://www.bitdefender.be/site/Store/buy'; - } - - if (pathname.includes('/nl-nl/')) { - return 'https://www.bitdefender.nl/site/Store/buy'; - } - - if (pathname.includes('/de-de/')) { - return 'https://www.bitdefender.de/site/Store/buy'; - } - - if (pathname.includes('/de-ch/')) { - return 'https://www.bitdefender.de/site/Store/buy'; - } - - if (pathname.includes('/sv-se/')) { - return 'https://www.bitdefender.se/site/Store/buy'; - } - - if (pathname.includes('/pt-br/')) { - return 'https://www.bitdefender.com.br/site/Store/buy'; - } - - if (pathname.includes('/pt-pt/')) { - return 'https://www.bitdefender.pt/site/Store/buy'; - } - - if (pathname.includes('/es-es/')) { - return 'https://www.bitdefender.es/site/Store/buy'; - } - return 'https://www.bitdefender.com/site/Store/buy'; } @@ -389,8 +331,8 @@ export function setDataOnBuyLinks(element, dataInfo) { element.dataset.buyPrice = variation.discounted_price || variation.price || 0; if (variation.price) element.dataset.oldPrice = variation.price; - if (variation.currency_label) element.dataset.dataCurrency = variation.currency_label; - if (variation.region_id) element.dataset.dataRegion = variation.region_id; + if (variation.currency_label) element.dataset.currency = variation.currency_label; + if (variation.region_id) element.dataset.region = variation.region_id; if (variation.variation_name) element.dataset.variation = variation.variation_name; } From 9c03227346cc23f0d6de3016e661a13eb6e648c1 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 15:36:29 +0300 Subject: [PATCH 1125/1296] fix: lint css --- _src/blocks/hero/hero.css | 8 +-- .../product-comparison-table.css | 58 ++++++++-------- _src/blocks/products/products.css | 68 +++++++++---------- 3 files changed, 65 insertions(+), 69 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 0e33c3b4d..b76957e69 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -516,6 +516,7 @@ main .v2 .hero .hero-content > div table tr td:last-of-type { width: 465px; } +/* stylelint-disable-next-line selector-class-pattern */ main .smaller_icon .hero .hero-content > div table tr td:last-of-type { width: fit-content; } @@ -525,6 +526,7 @@ main .v2 .hero .hero-content > div table tr td img { height: auto; } +/* stylelint-disable-next-line selector-class-pattern */ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { width: 70px; } @@ -581,10 +583,6 @@ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { padding: 2em; } - main .hero.new2024design .hero-picture { - display: none; - } - main .hero.new2024design .hero-picture { display: block; height: 430px; @@ -683,10 +681,12 @@ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { width: auto; } + /* stylelint-disable-next-line selector-class-pattern */ main .smaller_icon .hero .hero-content > div:last-of-type img { width: 40%!important; } + /* stylelint-disable-next-line selector-class-pattern */ main .new_v2 .hero .hero-content > div:last-of-type img { width: 60%!important; right: 0; diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index 69cfb4158..d2d32bf84 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -21,6 +21,29 @@ margin-bottom: 2em; } +.current-price-container p { + font-size: var(--body-font-size-m); + font-weight: var(--font-weight-boldest); +} + +.product-comparison-price p:last-of-type { + color: #7e7e7e; + font-size: var(--body-font-size-xs); + font-weight: var(--font-weight-regular); + line-height: var(--body-font-size-xs); + border-bottom: 1px dashed #dedede; + margin-bottom: 4px !important; + padding-bottom: 1.5em; +} + +div[role="cell"] p { + margin: 0; +} + +.product-comparison-header div[role="columnheader"] p { + margin: 0; +} + .section.product-comparison-table-container .default-content-wrapper p { font-size: var(--body-font-size-m); } @@ -96,33 +119,6 @@ border-top: 1px solid var(--horizontal-separator-color); } -.current-price-container p { - font-size: var(--body-font-size-m); - font-weight: var(--font-weight-boldest); -} - -.product-comparison-price p:last-of-type { - color: #7e7e7e!important; - font-size: var(--body-font-size-xs); - font-weight: var(--font-weight-regular); - line-height: var(--body-font-size-xs); - border-bottom: 1px dashed #dedede; - margin-bottom: 4px !important; - padding-bottom: 1.5em; -} - -div[role="cell"] p { - margin: 0; -} - -.product-comparison-price p:last-of-type { - color: var(--product-comparison-text-color); -} - -.product-comparison-header div[role="columnheader"] p { - margin: 0; -} - div[role="cell"] .button-container , .product-comparison-header div[role="columnheader"] .button-container{ margin-bottom: 0.3125rem; } @@ -668,10 +664,6 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { } @media (max-width: 500px) { - .section.product-comparison-table-container .default-content-wrapper p { - font-size: var(--body-font-size-s); - } - .product-comparison-header div[role="columnheader"]:not(:first-child) { width: 33%; } @@ -697,4 +689,8 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { .product-comparison-table div[role='cell']:not(:first-child) { padding: 1em; } + + .section.product-comparison-table-container .default-content-wrapper p { + font-size: var(--body-font-size-s); + } } \ No newline at end of file diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 848810409..05e169eac 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -48,6 +48,15 @@ flex: 0; } +.product-card .price em { + color: black; + font-size: var(--body-font-size-xxs); + display: block; + font-style: normal; + line-height: 1.4em; + font-weight: bold; +} + .v2 .product-card .price:last-of-type em { color: #7e7e7e; font-size: var(--body-font-size-xxxs); @@ -55,16 +64,33 @@ line-height: 2.4; } +.product-card p { + font-size: var(--body-font-size-s); + color: #3c3c3c; + margin: 0; +} + +.product-card p:nth-of-type(2) { + font-size: var(--body-font-size-xs); +} + +.product-card .price ~ p { + font-size:var(--body-font-size-xxs); + color: #7e7e7e; +} + .v2 .product-card p:last-of-type { line-height: 16px; } -.v2 .product-card hr { - margin: 12px 0; +.product-card hr { + margin: 17px 0; + border-bottom: 1px solid #e5e7eb; + width: 100%; } -.v2 .product-card .button-container { - margin: 15px 0; +.v2 .product-card hr { + margin: 12px 0; } .product-card .button-container { @@ -75,6 +101,10 @@ margin: 25px 0 5px; } +.v2 .product-card .button-container { + margin: 15px 0; +} + .products.compact .product-card, .products.plans .product-card { text-align: center; } @@ -87,27 +117,12 @@ padding-top: var(--highlight-spacing); } -.product-card p { - font-size: var(--body-font-size-s); - color: #3c3c3c; - margin: 0; -} - -.product-card p:nth-of-type(2) { - font-size: var(--body-font-size-xs); -} - .product-card p a { text-decoration: none; color: inherit; color: var(--link-color); } -.product-card .price ~ p { - font-size:var(--body-font-size-xxs); - color: #7e7e7e; -} - .products.plans .product-card p { font-size: var(--body-font-size-xxs); } @@ -333,21 +348,6 @@ font-weight: var(--font-weight-bolder); } -.product-card .price em { - color: black; - font-size: var(--body-font-size-xxs); - display: block; - font-style: normal; - line-height: 1.4em; - font-weight: bold; -} - -.product-card hr { - margin: 17px 0; - border-bottom: 1px solid #e5e7eb; - width: 100%; -} - .two-columns .columns .product-card hr { border-color: #dedede; } From caad5d301ea6ca894ff4250cc74f07c13884fb2e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 15:42:01 +0300 Subject: [PATCH 1126/1296] fix: lint --- _src/blocks/features/features.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/blocks/features/features.css b/_src/blocks/features/features.css index 6c28123cb..af7d37b1d 100644 --- a/_src/blocks/features/features.css +++ b/_src/blocks/features/features.css @@ -59,14 +59,14 @@ line-height: 1.5; } -.features > div > div > p:first-of-type { - height: 55px; -} - .features p:nth-of-type(2) { margin-top: 5px; } +.features > div > div > p:first-of-type { + height: 55px; +} + .features h3 { font-size: var(--heading-font-size-m); font-weight: var(--font-weight-bold); From 18b4ee6b09cdd3114440726e1f91787d26b01626 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 17 Sep 2024 15:50:34 +0300 Subject: [PATCH 1127/1296] force locale revert --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 0eb65cde8..3d6d47d72 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -99,7 +99,7 @@ const PRICE_LOCALE_MAP = new Map([ ['en-global', { force_country: 'en', country_code: null }], ['es-cl', { force_country: 'en', country_code: 'cl' }], ['es-co', { force_country: 'en', country_code: 'co' }], - ['es-mx', { force_country: 'mx', country_code: 'mx' }], + ['es-mx', { force_country: 'en', country_code: 'mx' }], ['es-pe', { force_country: 'en', country_code: 'pe' }], ['es-bz', { force_country: 'en', country_code: 'bz' }], ['es-es', { force_country: 'es', country_code: 'es' }], From 67aa257f660db7469ed51ab894cc968d9729190f Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 15:52:24 +0300 Subject: [PATCH 1128/1296] fix lint css --- _src/blocks/columns/columns.css | 62 +++++++++---------- .../product-comparison-table.css | 16 ++--- _src/blocks/products/products.css | 10 +-- 3 files changed, 44 insertions(+), 44 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index ecec9fa3f..5053042de 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -2,37 +2,6 @@ padding: 0 var(--body-padding); } -.columns-wrapper > div.grey-bck { - background-color: #F5F5F7; - border-radius: 1em; - padding: 0; - display: flex; - overflow: hidden; -} - -.columns-wrapper > div.grey-bck h5 { - font-size: var(--heading-font-size-m); - line-height: var(--heading-font-size-l); -} - -.columns-wrapper > div.grey-bck p:first-of-type { - margin: 1em 0; -} - -.columns-wrapper > div.grey-bck div.columns-text-col { - padding-left: 4em; - padding-right: 1em; -} - -.columns-wrapper > div.grey-bck > div { - flex: 1; -} - -.columns-wrapper > div.grey-bck > div > div { - margin: 0!important; - flex: 0 0 50%; -} - .columns-container.chat-options p { font-size: var(--body-font-size-s) !important; } @@ -442,6 +411,37 @@ margin: 0 10px; } +.columns-wrapper > div.grey-bck { + background-color: #F5F5F7; + border-radius: 1em; + padding: 0; + display: flex; + overflow: hidden; +} + +.columns-wrapper > div.grey-bck h5 { + font-size: var(--heading-font-size-m); + line-height: var(--heading-font-size-l); +} + +.columns-wrapper > div.grey-bck p:first-of-type { + margin: 1em 0; +} + +.columns-wrapper > div.grey-bck div.columns-text-col { + padding-left: 4em; + padding-right: 1em; +} + +.columns-wrapper > div.grey-bck > div { + flex: 1; +} + +.columns-wrapper > div.grey-bck > div > div { + margin: 0!important; + flex: 0 0 50%; +} + @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index d2d32bf84..93fe9cfe5 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -26,6 +26,10 @@ font-weight: var(--font-weight-boldest); } +div[role="cell"] p { + margin: 0; +} + .product-comparison-price p:last-of-type { color: #7e7e7e; font-size: var(--body-font-size-xs); @@ -36,10 +40,6 @@ padding-bottom: 1.5em; } -div[role="cell"] p { - margin: 0; -} - .product-comparison-header div[role="columnheader"] p { margin: 0; } @@ -673,14 +673,14 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { margin: 1em 0em 5px; } - .product-comparison-header div[role="columnheader"] p { - min-height: unset; - } - .product-comparison-price p:last-of-type { font-size: var(--body-font-size-xxs); } + .product-comparison-header div[role="columnheader"] p { + min-height: unset; + } + div[role="cell"] p.button-container a, .product-comparison-header div[role="columnheader"] p.button-container a { padding: 4px 26px 6px 18px; font-size: var(--body-font-size-xs); diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 05e169eac..88ababe42 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -79,6 +79,11 @@ color: #7e7e7e; } +.product-card .price:last-of-type { + font-weight: var(--font-weight-bold); + margin-bottom: 0; +} + .v2 .product-card p:last-of-type { line-height: 16px; } @@ -328,11 +333,6 @@ text-decoration: underline; } -.product-card .price:last-of-type { - font-weight: var(--font-weight-bold); - margin-bottom: 0; -} - .products.plans .product-card .price .old-price { font-weight: normal; font-size: var(--body-font-size-xl); From f27b012f86aaf1a6fde4d0a003f796342bbaf6b3 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 15:57:21 +0300 Subject: [PATCH 1129/1296] fix: lint css --- _src/blocks/columns/columns.css | 36 ++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 14 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 5053042de..d5670f7a7 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -43,14 +43,6 @@ font-size: var(--body-font-size-s); } -.columns.awards.v2 > div > div > p:last-of-type { - margin-top: 10px; -} - -.columns.video-presentation > div > div > h3 { - font-size: var(--heading-font-size-xl); -} - .columns.carousel > div > div > p { width: inherit; padding: 0 50px; @@ -61,6 +53,20 @@ margin: 1.5em 0; } +.columns.awards.v2 > div > div > p:last-of-type { + margin-top: 10px; +} + +.columns.benefits h3 { + font-size: var(--heading-font-size-m); + font-weight: var(--font-weight-bold); + line-height: 1.25; +} + +.columns.video-presentation > div > div > h3 { + font-size: var(--heading-font-size-xl); +} + .columns > div { display: flex; flex-direction: column; @@ -181,33 +187,33 @@ width: 100%; } -.columns.benefits h3 { - font-size: var(--heading-font-size-m); - font-weight: var(--font-weight-bold); - line-height: 1.25; -} - +/* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns-container .default-content-wrapper { margin-bottom: 3em; } +/* stylelint-disable-next-line selector-class-pattern */ .bigger_title .columns.benefits h3 { font-size: var(--heading-font-size-l); } +/* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns.benefits h3 { font-size: var(--heading-font-size-l); } +/* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns.benefits > div { gap: 35px; } +/* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns.benefits > div > div { font-size: var(--body-font-size-m); flex: 1; } +/* stylelint-disable-next-line selector-class-pattern */ .v3_benefits .columns.benefits p { font-size: var(--body-font-size-s); } @@ -615,6 +621,7 @@ } @media (max-width: 1200px) { + /* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns.benefits h3 { font-size: var(--heading-font-size-m); margin-bottom: 10px; @@ -1012,6 +1019,7 @@ main .section.two-columns .right-col .products.plans a.button:any-link { padding: 0 var(--section-large-desktop-padding); } + /* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns-wrapper { padding: var(--section-mobile-padding-vertical); } From bf61b40338d2004a68b4fb607b24e1668d4a8d65 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:01:52 +0300 Subject: [PATCH 1130/1296] fix: lint css --- _src/blocks/columns/columns.css | 31 ++++++++++++++++++------------- _src/blocks/products/products.css | 10 +++++----- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index d5670f7a7..9f03c25ba 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -53,6 +53,11 @@ margin: 1.5em 0; } +/* stylelint-disable-next-line selector-class-pattern */ +.v3_benefits .columns.benefits p { + font-size: var(--body-font-size-s); +} + .columns.awards.v2 > div > div > p:last-of-type { margin-top: 10px; } @@ -63,6 +68,12 @@ line-height: 1.25; } +.section.subtitle-blue h3 { + font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(0 110 255 / var(--tw-text-opacity)); +} + .columns.video-presentation > div > div > h3 { font-size: var(--heading-font-size-xl); } @@ -213,25 +224,12 @@ flex: 1; } -/* stylelint-disable-next-line selector-class-pattern */ -.v3_benefits .columns.benefits p { - font-size: var(--body-font-size-s); -} - .section.subtitle-blue h2 { margin: 0 auto 3em; width: 100%; text-align: center; } -.section.subtitle-blue h3 { - font-size: 1.25rem; - - --tw-text-opacity: 1; - - color: rgb(0 110 255 / var(--tw-text-opacity)); -} - .columns.video-presentation > div > div { margin: 0 auto; } @@ -517,32 +515,39 @@ margin-bottom: 0; } + /* stylelint-disable-next-line selector-class-pattern */ .section.bd_woman { margin-top: 2em; } + /* stylelint-disable-next-line selector-class-pattern */ .section.bd_woman h2 { font-weight: var(--font-weight-regular); } + /* stylelint-disable-next-line selector-class-pattern */ .section.bd_woman .columns-img-col { margin-top: -122px; } + /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark { margin-bottom: 5em; } + /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark > div { padding: 5em 0 3em 0; margin-top: 0; } + /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark .columns-img-col img { margin-top: -200px; margin-bottom: -3em; } + /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark .columns-img-col img { margin-top: -200px; margin-bottom: -3em; diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 88ababe42..aa6e7571c 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -44,6 +44,11 @@ display: flex; } +.product-card .price:last-of-type { + font-weight: var(--font-weight-bold); + margin-bottom: 0; +} + .v2 .product-card .price:last-of-type { flex: 0; } @@ -79,11 +84,6 @@ color: #7e7e7e; } -.product-card .price:last-of-type { - font-weight: var(--font-weight-bold); - margin-bottom: 0; -} - .v2 .product-card p:last-of-type { line-height: 16px; } From 4d82d181a8454febb7b17848d24dfc2a5f3ffcd3 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:07:06 +0300 Subject: [PATCH 1131/1296] fix: lint css --- _src/blocks/columns/columns.css | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 9f03c25ba..2ce513622 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -213,15 +213,8 @@ font-size: var(--heading-font-size-l); } -/* stylelint-disable-next-line selector-class-pattern */ -.v2_benefits .columns.benefits > div { - gap: 35px; -} - -/* stylelint-disable-next-line selector-class-pattern */ -.v2_benefits .columns.benefits > div > div { - font-size: var(--body-font-size-m); - flex: 1; +.columns.video-presentation > div > div { + margin: 0 auto; } .section.subtitle-blue h2 { @@ -230,10 +223,6 @@ text-align: center; } -.columns.video-presentation > div > div { - margin: 0 auto; -} - .columns.carousel > div > div { margin: 10px 5px; width: 100%; @@ -446,6 +435,17 @@ flex: 0 0 50%; } +/* stylelint-disable-next-line selector-class-pattern */ +.v2_benefits .columns.benefits > div { + gap: 35px; +} + +/* stylelint-disable-next-line selector-class-pattern */ +.v2_benefits .columns.benefits > div > div { + font-size: var(--body-font-size-m); + flex: 1; +} + @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; From ef699cc9c73fd95518e9a71c685c294e86ef6fbd Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:11:54 +0300 Subject: [PATCH 1132/1296] fix lint css --- _src/blocks/columns/columns.css | 64 ++++++++++++++++----------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 2ce513622..d7be45e7d 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -235,6 +235,15 @@ border-bottom: 2px solid var(--overlay-background-color); } +.columns-wrapper > div.grey-bck > div { + flex: 1; +} + +.columns-wrapper > div.grey-bck > div > div { + margin: 0!important; + flex: 0 0 50%; +} + .columns.carousel > div:nth-child(1) { position: relative; left: 0; @@ -248,6 +257,17 @@ margin-bottom: 3em; } +/* stylelint-disable-next-line selector-class-pattern */ +.v2_benefits .columns.benefits > div { + gap: 35px; +} + +/* stylelint-disable-next-line selector-class-pattern */ +.v2_benefits .columns.benefits > div > div { + font-size: var(--body-font-size-m); + flex: 1; +} + .columns.bg-image > div > div:first-child { font-size: var(--heading-font-size-xl); font-weight: bold; @@ -333,6 +353,18 @@ transition: all .2s cubic-bezier(.4,0,.2,1); } +.green-button .button-container a { + background-color: #51a71d; + border: 2px solid #51a71d; + text-transform: uppercase; +} + +.green-button p:last-of-type a { + text-decoration: underline; + font-size: var(--body-font-size-xs); + margin: 0 10px; +} + .columns.new-v2 a:hover { color: #0A53C5; transform: translateX(10px); @@ -392,18 +424,6 @@ display: none; } -.green-button .button-container a { - background-color: #51a71d; - border: 2px solid #51a71d; - text-transform: uppercase; -} - -.green-button p:last-of-type a { - text-decoration: underline; - font-size: var(--body-font-size-xs); - margin: 0 10px; -} - .columns-wrapper > div.grey-bck { background-color: #F5F5F7; border-radius: 1em; @@ -426,26 +446,6 @@ padding-right: 1em; } -.columns-wrapper > div.grey-bck > div { - flex: 1; -} - -.columns-wrapper > div.grey-bck > div > div { - margin: 0!important; - flex: 0 0 50%; -} - -/* stylelint-disable-next-line selector-class-pattern */ -.v2_benefits .columns.benefits > div { - gap: 35px; -} - -/* stylelint-disable-next-line selector-class-pattern */ -.v2_benefits .columns.benefits > div > div { - font-size: var(--body-font-size-m); - flex: 1; -} - @media (min-width: 767px) { .columns.benefits > div { flex-direction: unset; From cdbe6246d4c13b5cb2cab29a53b37a2ef57b2fa0 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:16:11 +0300 Subject: [PATCH 1133/1296] fix lint css --- _src/blocks/columns/columns.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index d7be45e7d..7127615c2 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -140,6 +140,14 @@ justify-content: space-between; } +.columns.carousel > div { + justify-content: flex-start; +} + +.columns.carousel > div > div { + flex: 1 0 33%; +} + .grey-version .columns > div > div { --tw-bg-opacity: 1; @@ -999,14 +1007,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { margin-bottom: 1em; } -.columns.carousel > div { - justify-content: flex-start; -} - -.columns.carousel > div > div { - flex: 1 0 33%; -} - .columns.carousel > div.carousel-buttons { justify-content: center; } From eae65f29c74f114b2b60bfadf1ce65e02797a1df Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:25:07 +0300 Subject: [PATCH 1134/1296] fix lint css --- _src/blocks/columns/columns.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 7127615c2..3ffa51405 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -270,6 +270,10 @@ gap: 35px; } +.v2 .columns.awards > div { + align-items: flex-start; +} + /* stylelint-disable-next-line selector-class-pattern */ .v2_benefits .columns.benefits > div > div { font-size: var(--body-font-size-m); @@ -1011,10 +1015,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { justify-content: center; } -.v2 .columns.awards > div { - align-items: flex-start; -} - .v2 .columns.awards > div > div > p { font-size: var(--body-font-size-s); } From 222c59677ada322488115b126024a58eb29eaeec Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 17 Sep 2024 16:25:52 +0300 Subject: [PATCH 1135/1296] added more reverted code --- _src/blocks/footer/footer.js | 18 ++++++++++++--- _src/blocks/header/header.js | 45 +++++++++++++++++++++++------------- 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index b906fa75a..8fef6f0e0 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -1,6 +1,6 @@ import { decorateIcons, getMetadata, loadBlocks } from '../../scripts/lib-franklin.js'; import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js'; -import { decorateMain } from '../../scripts/scripts.js'; +import { decorateMain, getDomain } from '../../scripts/scripts.js'; function wrapImgsInLinks(container) { const pictures = container.querySelectorAll('picture'); @@ -134,7 +134,19 @@ async function runAemFooterLogic() { ? 'https://stage.bitdefender.com' : ''; - const aemFooterFetch = await fetch(`${aemFooterHostname}/content/experience-fragments/bitdefender/language_master/en/footer-fragment-v1/master/jcr:content/root.html`); + const websiteDomain = getDomain(); + let aemFetchDomain; + + if (websiteDomain === 'en-us') { + aemFetchDomain = 'en'; + } else if (websiteDomain.includes('-global')) { + const [singleDomain] = websiteDomain.split('-'); + aemFetchDomain = singleDomain; + } else { + aemFetchDomain = websiteDomain.split('-').join('_'); + } + + const aemFooterFetch = await fetch(`${aemFooterHostname}/content/experience-fragments/bitdefender/language_master/${aemFetchDomain}/footer-fragment-v1/master/jcr:content/root.html`); if (!aemFooterFetch.ok) { return; } @@ -202,7 +214,7 @@ function applyFooterFactorySetup(footerMetadata, block) { // headers in AEM const regex = /\/(zh-hk|zh-tw)\//i; const matches = window.location.href.match(regex); - if (matches) { + if (matches || window.location.hostname.includes('www.')) { runDefaultFooterLogic(block); return; } diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 4893f345c..c563667b4 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -383,15 +383,17 @@ async function runDefaultHeaderLogic(block) { const html = await resp.text(); if (html.includes('aem-banner')) { - let domain = getDomain(); - if (domain === 'en-us') { - domain = 'en'; - } else if (domain.includes('-global')) { - const [singleDomain] = domain.split('-'); - domain = singleDomain; + const websiteDomain = getDomain(); + let aemFetchDomain; + + if (websiteDomain === 'en-us') { + aemFetchDomain = 'en'; + } else if (websiteDomain.includes('-global')) { + const [singleDomain] = websiteDomain.split('-'); + aemFetchDomain = singleDomain; } else { - domain = domain.split('-').join('_'); + aemFetchDomain = websiteDomain.split('-').join('_'); } const aemHeaderHostname = window.location.hostname.includes('.hlx.') @@ -399,7 +401,7 @@ async function runDefaultHeaderLogic(block) { ? 'https://stage.bitdefender.com' : ''; - const aemHeaderFetch = await fetch(`${aemHeaderHostname}/content/experience-fragments/bitdefender/language_master/${domain}/header-navigation/mega-menu/master/jcr:content/root.html`); + const aemHeaderFetch = await fetch(`${aemHeaderHostname}/content/experience-fragments/bitdefender/language_master/${aemFetchDomain}/header-navigation/mega-menu/master/jcr:content/root.html`); if (!aemHeaderFetch.ok) { return; } @@ -441,14 +443,25 @@ async function runDefaultHeaderLogic(block) { }); }); - // select all the scripts from contet div and - const scripts = contentDiv.querySelectorAll('script'); - scripts.forEach((script) => { - const newScript = document.createElement('script'); - newScript.src = `${aemHeaderHostname}${script.getAttribute('src')}`; - newScript.defer = true; - contentDiv.appendChild(newScript); - }); + // TODO: please remove second condition when the banner changes reach + if (window.location.hostname.includes('www.')) { + const newScriptFile = document.createElement('script'); + newScriptFile.src = '/_src/scripts/vendor/mega-menu/mega-menu.js'; + newScriptFile.defer = true; + shadowRoot.appendChild(newScriptFile); + } else { + // TODO: please keep the below code and move + // it outside the if + + // select all the scripts from contet div and + const scripts = contentDiv.querySelectorAll('script'); + scripts.forEach((script) => { + const newScript = document.createElement('script'); + newScript.src = `${aemHeaderHostname}${script.getAttribute('src')}`; + newScript.defer = true; + contentDiv.appendChild(newScript); + }); + } shadowRoot.appendChild(contentDiv); const body = document.querySelector('body'); From 75fbf158adcc2c4a3a04c79770182ca4b50ace4c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:34:38 +0300 Subject: [PATCH 1136/1296] fix lint css --- _src/blocks/columns/columns.css | 59 ++++++++++++++------------------- 1 file changed, 25 insertions(+), 34 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 3ffa51405..cf55a731c 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -58,6 +58,18 @@ font-size: var(--body-font-size-s); } +.v2 .columns.awards > div > div > p { + font-size: var(--body-font-size-s); +} + +.columns.awards > div > div > p:first-of-type { + margin-bottom: 24px; +} + +.columns-wrapper > div.grey-bck p:first-of-type { + margin: 1em 0; +} + .columns.awards.v2 > div > div > p:last-of-type { margin-top: 10px; } @@ -102,6 +114,7 @@ .columns.carousel > div { flex-direction: row; + justify-content: flex-start; gap: 22px; height: 15px; top: 0; @@ -140,12 +153,11 @@ justify-content: space-between; } -.columns.carousel > div { - justify-content: flex-start; -} - .columns.carousel > div > div { flex: 1 0 33%; + margin: 10px 5px; + width: 100%; + box-sizing: border-box; } .grey-version .columns > div > div { @@ -231,12 +243,6 @@ text-align: center; } -.columns.carousel > div > div { - margin: 10px 5px; - width: 100%; - box-sizing: border-box; -} - .columns.with-box-shadow > div > div { padding: 0 20px; border-right: none; @@ -294,10 +300,6 @@ margin-bottom: 2em; } -.columns.awards > div > div > p:first-of-type { - margin-bottom: 24px; -} - .section.subtitle-blue .columns.benefits p { font-size: var(--body-font-size-s); font-weight: 400; @@ -449,10 +451,6 @@ line-height: var(--heading-font-size-l); } -.columns-wrapper > div.grey-bck p:first-of-type { - margin: 1em 0; -} - .columns-wrapper > div.grey-bck div.columns-text-col { padding-left: 4em; padding-right: 1em; @@ -1015,10 +1013,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { justify-content: center; } -.v2 .columns.awards > div > div > p { - font-size: var(--body-font-size-s); -} - @media (max-width: 1399px) { .columns-wrapper { padding: 0 var(--section-large-desktop-padding); @@ -1047,6 +1041,14 @@ main .section.two-columns .right-col .products.plans a.button:any-link { text-align: center; } + .columns.video-presentation > div > div { + width: 520px; + } + + .columns-wrapper > div.grey-bck > div > div { + flex: 1; + } + .creators .header-mobile.columns-container div { text-align: center; } @@ -1089,10 +1091,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { padding-top: 23px; } - .columns.video-presentation > div > div { - width: 520px; - } - .section.wide.light-sky-blue.columns-container.awards.v2 { width: 100%; padding: 0; @@ -1102,10 +1100,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { .columns-wrapper > div.grey-bck div.columns-text-col { padding: 2em; } - - .columns-wrapper > div.grey-bck > div > div { - flex: 1; - } } @media (min-width: 768px) { @@ -1155,12 +1149,9 @@ main .section.two-columns .right-col .products.plans a.button:any-link { } .columns.carousel > div > div { + width: 100%; flex: 1 0 100%; box-sizing: border-box; margin: 0; } - - .columns.carousel > div > div { - width: 100%; - } } \ No newline at end of file From 75c880d8ce131f71be252d341d1ed794c85d5a72 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Tue, 17 Sep 2024 16:39:59 +0300 Subject: [PATCH 1137/1296] fixed linting --- _src/blocks/header/header.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index c563667b4..da0f5b3cf 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -383,7 +383,6 @@ async function runDefaultHeaderLogic(block) { const html = await resp.text(); if (html.includes('aem-banner')) { - const websiteDomain = getDomain(); let aemFetchDomain; From 0e82382a5f155e2ada0e25a95cf17e0bbd252a01 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:43:26 +0300 Subject: [PATCH 1138/1296] fix lint css --- _src/blocks/columns/columns.css | 44 ++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index cf55a731c..e0debc5f5 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -58,6 +58,10 @@ font-size: var(--body-font-size-s); } +.columns-wrapper > div.grey-bck p:first-of-type { + margin: 1em 0; +} + .v2 .columns.awards > div > div > p { font-size: var(--body-font-size-s); } @@ -66,8 +70,11 @@ margin-bottom: 24px; } -.columns-wrapper > div.grey-bck p:first-of-type { - margin: 1em 0; +.section.subtitle-blue .columns.benefits p { + font-size: var(--body-font-size-s); + font-weight: 400; + letter-spacing: .006em; + line-height: 24px; } .columns.awards.v2 > div > div > p:last-of-type { @@ -86,6 +93,10 @@ color: rgb(0 110 255 / var(--tw-text-opacity)); } +.creators .columns-container h3 { + font-weight: bold; +} + .columns.video-presentation > div > div > h3 { font-size: var(--heading-font-size-xl); } @@ -142,6 +153,15 @@ object-fit: contain; } +.columns > div > .columns-img-col img { + display: block; +} + +.grey-version .columns > div > div img, .small-icons .columns > div > div img { + height: 60px; + width: auto; +} + .columns.awards.smaller-icons > div img { width: auto; max-width: unset; @@ -300,28 +320,17 @@ margin-bottom: 2em; } -.section.subtitle-blue .columns.benefits p { - font-size: var(--body-font-size-s); - font-weight: 400; - letter-spacing: .006em; - line-height: 24px; -} - .columns > div > .columns-img-col { order: 0; text-align: center; margin-bottom: 2em; } -.columns > div > .columns-img-col img { - display: block; -} - .creators .columns-container .columns > div:last-of-type { margin-bottom: 0; } -.creators .columns-container h3, .creators .columns-container h5 { +.creators .columns-container h5 { font-weight: bold; } @@ -355,7 +364,7 @@ font-size: 14px; } -.columns.bg-image a{ +.columns.bg-image a { color: white } @@ -404,11 +413,6 @@ justify-content: space-between; } -.grey-version .columns > div > div img, .small-icons .columns > div > div img { - height: 60px; - width: auto; -} - .small-icons-v2 .columns > div > div.columns-img-col { display: flex; align-items: center; From 2a17e2e8ed820b1c91fdab45f6f79df869d7c9b3 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 17 Sep 2024 16:48:59 +0300 Subject: [PATCH 1139/1296] fix lint css --- _src/blocks/columns/columns.css | 83 +++++++++++++++------------------ 1 file changed, 37 insertions(+), 46 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index e0debc5f5..d37b6b584 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -97,6 +97,15 @@ font-weight: bold; } +.columns.new-v2 h3 { + font-family: "IBM Plex Sans" ,sans-serif; + font-size: 25px; + font-weight: 700; + line-height: 30px; + text-align: left; + color: #006EFF; +} + .columns.video-presentation > div > div > h3 { font-size: var(--heading-font-size-xl); } @@ -162,6 +171,16 @@ width: auto; } +.small-icons-v2 .columns > div > div img { + height: 120px; + width: auto; +} + +.columns.video-presentation .linked-image-container img { + width: 150px; + height: 44px; +} + .columns.awards.smaller-icons > div img { width: auto; max-width: unset; @@ -332,23 +351,11 @@ .creators .columns-container h5 { font-weight: bold; -} - -.columns.new-v2 h3 { - font-family: "IBM Plex Sans" ,sans-serif; - font-size: 25px; - font-weight: 700; - line-height: 30px; - text-align: left; - color: #006EFF; -} - -.creators .columns-container h5, .creators .columns-container.baby-blue-subtitles h3 { color: #006DFF; } -.creators .columns-container h5 { - font-weight: bold; +.creators .columns-container.baby-blue-subtitles h3 { + color: #006DFF; } .creators .columns-container.baby-blue-subtitles h3 br { @@ -419,16 +426,6 @@ justify-content: center; } -.small-icons-v2 .columns > div > div img { - height: 120px; - width: auto; -} - -.columns.video-presentation .linked-image-container img { - width: 150px; - height: 44px; -} - .columns.new-v2 > div > .columns-img-col img { object-fit: contain; } @@ -521,6 +518,18 @@ font-size: 1.25rem; } + /* stylelint-disable-next-line selector-class-pattern */ + .section.b_mark > div { + padding: 5em 0 3em 0; + margin-top: 0; + } + + /* stylelint-disable-next-line selector-class-pattern */ + .section.b_mark .columns-img-col img { + margin-top: -200px; + margin-bottom: -3em; + } + .columns-container.chat-options .columns > div > div { padding: 2em; } @@ -539,6 +548,10 @@ font-weight: var(--font-weight-regular); } + .columns > div > .columns-img-col { + margin-bottom: 1em; + } + /* stylelint-disable-next-line selector-class-pattern */ .section.bd_woman .columns-img-col { margin-top: -122px; @@ -549,32 +562,10 @@ margin-bottom: 5em; } - /* stylelint-disable-next-line selector-class-pattern */ - .section.b_mark > div { - padding: 5em 0 3em 0; - margin-top: 0; - } - - /* stylelint-disable-next-line selector-class-pattern */ - .section.b_mark .columns-img-col img { - margin-top: -200px; - margin-bottom: -3em; - } - - /* stylelint-disable-next-line selector-class-pattern */ - .section.b_mark .columns-img-col img { - margin-top: -200px; - margin-bottom: -3em; - } - .columns.screenshots { margin-top: 4em; } - .columns > div > .columns-img-col { - margin-bottom: 1em; - } - .v2 .columns > div > .columns-text-col { flex: 0 0 40%; } From d9059f0e356ceff909b3e2597becc0a6e8f8546c Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Wed, 18 Sep 2024 07:36:38 +0300 Subject: [PATCH 1140/1296] fix: index --- helix-query.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/helix-query.yaml b/helix-query.yaml index f59a3124c..f0d307c41 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -2,9 +2,9 @@ version: 1 indices: default: include: - - /_src/** + - /** exclude: - - /_src/fragments/** + - /**/consumer/**/fragmets/** target: /query-index.json properties: title: From fab067dbde6a9ab73af1c7bcab213c466a6a9b5d Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Wed, 18 Sep 2024 08:07:29 +0300 Subject: [PATCH 1141/1296] fix: breadcrumbs no longer take in the account the locale --- _src/scripts/breadcrumbs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/breadcrumbs.js b/_src/scripts/breadcrumbs.js index 62612218e..dd965960b 100644 --- a/_src/scripts/breadcrumbs.js +++ b/_src/scripts/breadcrumbs.js @@ -12,7 +12,7 @@ function prependSlash(path) { } function getName(pageIndex, path, part, current) { - const pg = pageIndex.find((page) => page.path === path); + const pg = pageIndex.find((page) => page.path.replace(/^\/[^\/]+/, '') === path.replace(/^\/[^\/]+/, '')); if (pg && pg.breadcrumbtitle && pg.breadcrumbtitle !== '0') { return pg.breadcrumbtitle; } From 136b0105d122a37ec290b205658e1d5bf1aea429 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Wed, 18 Sep 2024 11:14:01 +0300 Subject: [PATCH 1142/1296] fixed linting issue --- _src/scripts/breadcrumbs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/breadcrumbs.js b/_src/scripts/breadcrumbs.js index dd965960b..07580fd20 100644 --- a/_src/scripts/breadcrumbs.js +++ b/_src/scripts/breadcrumbs.js @@ -12,7 +12,7 @@ function prependSlash(path) { } function getName(pageIndex, path, part, current) { - const pg = pageIndex.find((page) => page.path.replace(/^\/[^\/]+/, '') === path.replace(/^\/[^\/]+/, '')); + const pg = pageIndex.find((page) => page.path.replace(/^\/[^/]+/, '') === path.replace(/^\/[^/]+/, '')); if (pg && pg.breadcrumbtitle && pg.breadcrumbtitle !== '0') { return pg.breadcrumbtitle; } From 78f8e2e4c03cc6704f1f77a52db52c14becfe6f0 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 18 Sep 2024 11:27:11 +0300 Subject: [PATCH 1143/1296] fix --- _src/blocks/barchart/barchart.css | 1 + _src/blocks/columns/columns.css | 4 +- _src/blocks/hero/hero.css | 7 +-- .../product-comparison-table.css | 3 +- .../product-comparison-table.js | 15 ++++--- .../products-sideview/products-sideview.js | 8 +++- _src/blocks/products/products.css | 3 +- _src/blocks/products/products.js | 43 ++++++++++--------- _src/scripts/breadcrumbs.js | 2 +- _src/scripts/utils/utils.js | 3 ++ 10 files changed, 54 insertions(+), 35 deletions(-) diff --git a/_src/blocks/barchart/barchart.css b/_src/blocks/barchart/barchart.css index 85c24bc0c..41fa391e8 100644 --- a/_src/blocks/barchart/barchart.css +++ b/_src/blocks/barchart/barchart.css @@ -147,6 +147,7 @@ .barchart.block h3 { font-size: var(--body-font-size-m); } + .barchart > ul > li { padding: 1em; } diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index d37b6b584..3e2074c46 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -89,7 +89,9 @@ .section.subtitle-blue h3 { font-size: 1.25rem; + --tw-text-opacity: 1; + color: rgb(0 110 255 / var(--tw-text-opacity)); } @@ -520,7 +522,7 @@ /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark > div { - padding: 5em 0 3em 0; + padding: 5em 0 3em; margin-top: 0; } diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index b76957e69..b2fd7e9e1 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -327,7 +327,8 @@ main .hero img { main .hero .hero-picture picture img { position: absolute; - /*display: none;*/ + + /* display: none; */ padding-left: 200px; } @@ -605,7 +606,7 @@ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { main .hero h1 { font-size: 2.5rem; font-weight: 700; - font-family: IBM Plex Sans, sans-serif; + font-family: "IBM Plex Sans", sans-serif; } main .hero .hero-picture { @@ -718,7 +719,7 @@ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { main .hero h1 { font-size: 2.5rem; font-weight: 700; - font-family: IBM Plex Sans, sans-serif; + font-family: "IBM Plex Sans", sans-serif; } main .v2 .hero h1 { diff --git a/_src/blocks/product-comparison-table/product-comparison-table.css b/_src/blocks/product-comparison-table/product-comparison-table.css index 93fe9cfe5..261f0fb0d 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.css +++ b/_src/blocks/product-comparison-table/product-comparison-table.css @@ -278,7 +278,6 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { background-color: var(--first-table-cell-color); padding: 0.875rem 1.75rem 1.0625rem 2.125rem; width: 100%; - font-weight: var(--font-weight-bold); text-align: center; font-size: var(--body-font-size-s); font-weight: var(--font-weight-regular); @@ -670,7 +669,7 @@ div[role="row"].expandable-row div[role="cell"] p:first-of-type { .product-comparison-header div[role="columnheader"] h3 { font-size: var(--heading-font-size-xxs); - margin: 1em 0em 5px; + margin: 1em 0 5px; } .product-comparison-price p:last-of-type { diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 3fa54d658..8ca986ab3 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -4,8 +4,9 @@ import { fetchProduct, matchHeights, setDataOnBuyLinks, - generateProductBuyLink, + generateProductBuyLink, formatPrice, } from '../../scripts/utils/utils.js'; +import { getDomain } from '../../scripts/scripts.js'; const fetchedProducts = []; @@ -29,15 +30,19 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { fetchedProducts.push({ code, variant, product }); // eslint-disable-next-line camelcase const { price, discount: { discounted_price: discounted }, currency_iso: currency } = product; - const savings = price - discounted; + const formattedPriceParams = [currency, null, getDomain()]; + // eslint-disable-next-line max-len + const formattedSavings = formatPrice((price - discounted).toFixed(2), ...formattedPriceParams); + const formattedPrice = formatPrice(price, ...formattedPriceParams); + const formattedDiscount = formatPrice(discounted, ...formattedPriceParams); oldPriceElement.innerHTML = `
    - ${oldPriceText} ${price} ${currency} - Savings ${savings.toFixed(2)} ${currency} + ${oldPriceText} ${formattedPrice} + Savings ${formattedSavings}
    `; priceElement.innerHTML = `
    Your total price: - ${discounted} ${currency} + ${formattedDiscount}
    `; priceAppliedOnTime.innerHTML = label; diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index 31c6ece0a..bd286e275 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -1,11 +1,12 @@ import { createNanoBlock, - fetchProduct, + fetchProduct, formatPrice, getBuyLinkCountryPrefix, getDatasetFromSection, getPidFromUrl, renderNanoBlocks, setDataOnBuyLinks, } from '../../scripts/utils/utils.js'; +import { getDomain } from '../../scripts/scripts.js'; const state = { firstProduct: null, @@ -175,7 +176,10 @@ function updatePrice(block) { state.currentProduct = product; const variant = `${MEMBERS_MAP.get(state.membersIndex)}u-1y`; const resp = await fetchProduct(product.alias, variant); - priceEl.textContent = `${resp.currency_label} ${resp.price}`; + + const formattedPrice = formatPrice(resp.price, resp.currency_iso, null, getDomain()); + + priceEl.textContent = `${formattedPrice}`; })(); } diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index aa6e7571c..7c5a27c4c 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -217,7 +217,7 @@ .product-card .featured { color: #2cb43d; - background-color: rgba(44,180,61,.2); + background-color: rgb(44 180 61 / 20%); border-radius: 8px; font-size: var(--body-font-size-xs); font-weight: var(--font-weight-bold); @@ -759,6 +759,7 @@ @media (max-width: 992px) { .products.compact, .products.plans { --max-columns: 2; + display: flex; flex-wrap: wrap; text-align: center; diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 878829fcd..c8a618cba 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -5,10 +5,10 @@ import { createTag, generateProductBuyLink, matchHeights, - setDataOnBuyLinks, + setDataOnBuyLinks, formatPrice, } from '../../scripts/utils/utils.js'; -import { trackProduct } from '../../scripts/scripts.js'; +import { getDomain, trackProduct } from '../../scripts/scripts.js'; // all avaiable text variables const TEXT_VARIABLES_MAPPING = [ @@ -45,6 +45,8 @@ function customRound(value) { * @returns a model */ function toModel(productCode, variantId, v) { + const currentDomain = getDomain(); + const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { productCode, variantId, @@ -53,16 +55,17 @@ function toModel(productCode, variantId, v) { devices: +v.variation.dimension_value, subscription: v.variation.years * 12, version: v.variation.years ? 'yearly' : 'monthly', - basePrice: +v.price, - actualPrice: v.discount ? +v.discount.discounted_price : +v.price, - monthlyBasePrice: customRound(v.price / 12), - discountedPrice: v.discount?.discounted_price, - discountedMonthlyPrice: v.discount + basePrice: formatPrice(+v.price, ...formattedPriceParams), + // eslint-disable-next-line max-len + actualPrice: formatPrice(v.discount ? +v.discount.discounted_price : +v.price, ...formattedPriceParams), + monthlyBasePrice: formatPrice(customRound(v.price / 12), ...formattedPriceParams), + discountedPrice: formatPrice(v.discount?.discounted_price, ...formattedPriceParams), + discountedMonthlyPrice: formatPrice(v.discount ? customRound(v.discount.discounted_price / 12) - : 0, - discount: v.discount + : 0, ...formattedPriceParams), + discount: formatPrice(v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 - : 0, + : 0, ...formattedPriceParams), discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, @@ -177,7 +180,7 @@ function renderOldPrice(mv, text = '', monthly = '') { { class: 'price', }, - `${text} ${mv.model.basePrice ?? ''} ${mv.model.currency ?? ''}`, + `${text} ${mv.model.basePrice ?? ''}`, ); const oldPriceElt = root.querySelector('span'); @@ -185,8 +188,8 @@ function renderOldPrice(mv, text = '', monthly = '') { mv.subscribe(() => { if (mv.model.discountedPrice) { oldPriceElt.innerHTML = monthly.toLowerCase() === 'monthly' - ? `${text} ${mv.model.monthlyBasePrice} ${mv.model.currency}/mo` - : `${text} ${mv.model.basePrice} ${mv.model.currency}`; + ? `${text} ${mv.model.monthlyBasePrice} /mo` + : `${text} ${mv.model.basePrice}`; oldPriceElt.style.visibility = 'visible'; } else { oldPriceElt.style.visibility = 'hidden'; @@ -218,14 +221,14 @@ function renderPrice(mv, text = '', monthly = '', monthTranslation = 'mo') { mv.subscribe(() => { if (monthly.toLowerCase() === 'monthly') { if (mv.model.discountedPrice) { - priceElt.innerHTML = `${text} ${mv.model.discountedMonthlyPrice} ${mv.model.currency} /${monthTranslation}`; + priceElt.innerHTML = `${text} ${mv.model.discountedMonthlyPrice} /${monthTranslation}`; } else { - priceElt.innerHTML = `${text} ${mv.model.monthlyBasePrice} ${mv.model.currency} /${monthTranslation}`; + priceElt.innerHTML = `${text} ${mv.model.monthlyBasePrice} /${monthTranslation}`; } } else if (mv.model.discountedPrice) { - priceElt.innerHTML = `${text} ${mv.model.discountedPrice} ${mv.model.currency}`; + priceElt.innerHTML = `${text} ${mv.model.discountedPrice}`; } else { - priceElt.innerHTML = `${text} ${mv.model.basePrice} ${mv.model.currency}`; + priceElt.innerHTML = `${text} ${mv.model.basePrice}`; } trackProduct(mv.model); @@ -254,7 +257,7 @@ function renderHighlightSavings(mv, text = 'Save', percent = '') { if (mv.model.discountRate) { root.querySelector('span').innerText = (percent.toLowerCase() === 'percent') ? `${text} ${mv.model.discountRate}%` - : `${text} ${mv.model.discount} ${mv.model.currency}`; + : `${text} ${mv.model.discount}`; root.style.visibility = 'visible'; } else { root.style.visibility = 'hidden'; @@ -353,7 +356,7 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { if (mv.model.discountRate) { root.innerText = (percent.toLowerCase() === 'percent') ? `${text} ${mv.model.discountRate}%` - : `${text} ${mv.model.discount} ${mv.model.currency}`; + : `${text} ${mv.model.discount}`; root.style.visibility = 'visible'; } else { root.style.visibility = 'hidden'; @@ -377,7 +380,7 @@ function renderLowestPrice(code, variant, monthly = '', text = '') { const m = toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; const price = isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice; - root.innerHTML = `${text.replace('0', `${price} ${product.currency_label}`)}`; + root.innerHTML = `${text.replace('0', `${price}`)}`; }); return root; diff --git a/_src/scripts/breadcrumbs.js b/_src/scripts/breadcrumbs.js index dd965960b..6b4657fcc 100644 --- a/_src/scripts/breadcrumbs.js +++ b/_src/scripts/breadcrumbs.js @@ -12,7 +12,7 @@ function prependSlash(path) { } function getName(pageIndex, path, part, current) { - const pg = pageIndex.find((page) => page.path.replace(/^\/[^\/]+/, '') === path.replace(/^\/[^\/]+/, '')); + const pg = pageIndex.find((page) => page.path.replace(/^\/[^\\/]+/, '') === path.replace(/^\/[^\\/]+/, '')); if (pg && pg.breadcrumbtitle && pg.breadcrumbtitle !== '0') { return pg.breadcrumbtitle; } diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 3d6d47d72..7670b91f3 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -337,6 +337,9 @@ export function setDataOnBuyLinks(element, dataInfo) { } export function formatPrice(price, currency, region = null, locale = null) { + if (!price) { + return null; + } const loc = region ? IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US' : locale; return new Intl.NumberFormat(loc, { style: 'currency', currency }).format(price); } From b555ba6e57ccfc1204fdb50e33af0397884375f9 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Wed, 18 Sep 2024 13:37:30 +0300 Subject: [PATCH 1144/1296] DEX-20103 | added Target and Visitor classes --- _src/scripts/target.js | 119 ++++++++++++++++++----------------------- 1 file changed, 53 insertions(+), 66 deletions(-) diff --git a/_src/scripts/target.js b/_src/scripts/target.js index 4326689f1..f5701f810 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -2,19 +2,55 @@ import { getMetadata, sampleRUM } from './lib-franklin.js'; const ADOBE_TARGET_SESSION_ID_PARAM = 'adobeTargetSessionId'; -export class Target { - static events = { - LIBRARY_LOADED: "at-library-loaded", - REQUEST_START: "at-request-start", - REQUEST_SUCCEEDED: "at-request-succeeded", - REQUEST_FAILED: "at-request-failed", - CONTENT_RENDERING_START: "at-content-rendering-start", - CONTENT_RENDERING_SUCCEEDED: "at-content-rendering-succeeded", - CONTENT_RENDERING_FAILED: "at-content-rendering-failed", - CONTENT_RENDERING_NO_OFFERS: "at-content-rendering-no-offers", - CONTENT_RENDERING_REDIRECT: "at-content-rendering-redirect" +export class Visitor { + static #instanceID = '0E920C0F53DA9E9B0A490D45@AdobeOrg'; + static #instance = null; + static #staticInit = new Promise(resolve => { + if (window.Visitor) { + Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); + resolve(); + return; + } + + window.addEventListener("at-library-loaded", () => { + if (window.Visitor) { + Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); + } + resolve(); + }) + }); + + /** + * + * @param {string} url + * @returns {Promise} + */ + static async appendVisitorIDsTo(url) { + await this.#staticInit; + return !this.#instance || url.includes("adobe_mc") ? url : this.#instance.appendVisitorIDsTo(url); } + /** + * + * @returns {Promise} + */ + static async getConsumerId() { + await this.#staticInit; + return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ""; + } + + /** + * + * @returns {Promise} + */ + static async getMarketingCloudVisitorId() { + await this.#staticInit; + return this.#instance ? this.#instance.getMarketingCloudVisitorID() : ""; + } +}; +window.BD = {Visitor, ...window.BD}; + +export class Target { /** * Mbox describing an offer * @typedef {{content: {offer: string, block:string} | {pid}, type: string|null}} Mbox @@ -32,30 +68,10 @@ export class Target { return; } - /** - * Semaphor to mark that the offer call was made - * This helps avoid doubled call fot the getOffer - * Set before any 'await' as those triggered jumps in the code - */ - let offerCallMade = false; - - /** Target wasn't loaded we wait for events from it */ - [this.events.CONTENT_RENDERING_SUCCEEDED, this.events.CONTENT_RENDERING_NO_OFFERS] - .forEach(event => document.addEventListener(event, async () => { - if (!offerCallMade) { - offerCallMade = true; - await this.#getOffers(); - resolve(); - } - }, { once: true })); - - [this.events.CONTENT_RENDERING_FAILED, this.events.REQUEST_FAILED] - .forEach(event => document.addEventListener(event, async () => { - if (!offerCallMade) { - offerCallMade = true; - resolve(); - } - }, { once: true })); + document.addEventListener("at-library-loaded", async () => { + await this.#getOffers(); + resolve(); + }); }); /** @@ -67,35 +83,7 @@ export class Target { return this.offers?.["initSelector-mbox"]?.content?.pid || null; } - /** - * @returns {[string]} - */ - static #getAllMboxes() { - const mboxes = [...document.querySelectorAll("[data-mboxes]")] - .map(mboxes => { - try { - return JSON.parse(mboxes.dataset.mboxes) - } catch (error) { - console.warn(error); - return null; - } - }) - .filter(Boolean) - .reduce((acc, mboxes) => { - mboxes.forEach(mbox => acc.add(mbox)); - return acc; - }, new Set()); - - if (!mboxes) { - return []; - } - - return [...mboxes].map((name, index) => { return { index: ++index, name } }); - } - static async #getOffers() { - const mboxes = this.#getAllMboxes(); - try { this.offers = await window.adobe?.target?.getOffers({ consumerId: await Visitor.getConsumerId(), @@ -105,8 +93,7 @@ export class Target { }, execute: { mboxes: [ - { index: 0, name: "initSelector-mbox" }, - ...mboxes + { index: 0, name: "initSelector-mbox" } ] } } @@ -124,7 +111,7 @@ export class Target { } } }; -window.Target = Target; +window.BD = {Target, ...window.BD}; /** * Convert a URL to a relative URL. From 2facd523beeed5912c68a6f2459e8213632c37d0 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 18 Sep 2024 14:43:00 +0300 Subject: [PATCH 1145/1296] fix --- .../product-comparison-table.js | 26 +++++++++---------- _src/scripts/utils/utils.js | 3 ++- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 8ca986ab3..87f5ec443 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -10,7 +10,7 @@ import { getDomain } from '../../scripts/scripts.js'; const fetchedProducts = []; -createNanoBlock('priceComparison', (code, variant, label, block) => { +createNanoBlock('priceComparison', (code, variant, label, block, productIndex) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); const oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price'; @@ -27,7 +27,8 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { fetchProduct(code, variant) .then((product) => { - fetchedProducts.push({ code, variant, product }); + const currentProduct = { code, variant, product }; + fetchedProducts.push(currentProduct); // eslint-disable-next-line camelcase const { price, discount: { discounted_price: discounted }, currency_iso: currency } = product; const formattedPriceParams = [currency, null, getDomain()]; @@ -47,9 +48,7 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { priceAppliedOnTime.innerHTML = label; // update buy link - const currentProductIndex = fetchedProducts.length - 1; - const buyLink = block.querySelectorAll('.button-container a')[currentProductIndex]; - const prd = fetchedProducts[currentProductIndex]; + const buyLink = block.querySelectorAll('.button-container a')[productIndex]; const variantSplit = variant.split('-'); const units = variantSplit[0].split('u')[0]; @@ -58,17 +57,18 @@ createNanoBlock('priceComparison', (code, variant, label, block) => { const isBuyLink = buyLink.href.includes('/site/Store/buy/'); if (isBuyLink) { - buyLink.href = prd.product.buy_link || generateProductBuyLink(prd, prd.code, units, years); + // eslint-disable-next-line max-len + buyLink.href = currentProduct.product.buy_link || generateProductBuyLink(currentProduct, currentProduct.code, units, years); const dataInfo = { - productId: prd.code, + productId: currentProduct.code, variation: { - price: prd.product.discount - ? +prd.product.discount.discounted_price : +prd.product.price, - discounted_price: prd.product.discount?.discounted_price, - variation_name: prd.variant, - currency_label: prd.product.currency_label, - region_id: prd.product.region_id, + price: currentProduct.product.discount + ? +currentProduct.product.discount.discounted_price : +currentProduct.product.price, + discounted_price: currentProduct.product.discount?.discounted_price, + variation_name: currentProduct.variant, + currency_label: currentProduct.product.currency_label, + region_id: currentProduct.product.region_id, }, }; diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 7670b91f3..5bd7a5858 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -548,7 +548,8 @@ export function renderNanoBlocks( const [newName, ...params] = parseParams(newMatch); const renderer = nanoBlocks.get(newName.toLowerCase()); if (renderer) { - const element = mv ? renderer(mv, ...params, block) : renderer(...params, block); + // eslint-disable-next-line max-len + const element = mv ? renderer(mv, ...params, block, index) : renderer(...params, block, index); element.classList.add('nanoblock'); const oldElement = node.parentNode; oldElement.parentNode.replaceChild(element, oldElement); From 685e971b22149654236748f1ce0bd2c847248a01 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 18 Sep 2024 17:49:35 +0300 Subject: [PATCH 1146/1296] buttom price fix --- .../product-comparison-table.js | 15 +++++++-------- _src/scripts/utils/utils.js | 2 +- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 87f5ec443..f5ae04cfd 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -10,7 +10,7 @@ import { getDomain } from '../../scripts/scripts.js'; const fetchedProducts = []; -createNanoBlock('priceComparison', (code, variant, label, block, productIndex) => { +createNanoBlock('priceComparison', (code, variant, label, block, productIndex, columnEl) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); const oldPriceText = block.closest('.section').dataset.old_price_text ?? 'Old Price'; @@ -48,15 +48,14 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex) = priceAppliedOnTime.innerHTML = label; // update buy link - const buyLink = block.querySelectorAll('.button-container a')[productIndex]; - - const variantSplit = variant.split('-'); - const units = variantSplit[0].split('u')[0]; - const years = variantSplit[1].split('y')[0]; - - const isBuyLink = buyLink.href.includes('/site/Store/buy/'); + const buyLink = columnEl.querySelector('.button-container a'); + const isBuyLink = buyLink?.href?.includes('/site/Store/buy/'); if (isBuyLink) { + const variantSplit = variant.split('-'); + const units = variantSplit[0].split('u')[0]; + const years = variantSplit[1].split('y')[0]; + // eslint-disable-next-line max-len buyLink.href = currentProduct.product.buy_link || generateProductBuyLink(currentProduct, currentProduct.code, units, years); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 5bd7a5858..0c7b6ff0b 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -549,7 +549,7 @@ export function renderNanoBlocks( const renderer = nanoBlocks.get(newName.toLowerCase()); if (renderer) { // eslint-disable-next-line max-len - const element = mv ? renderer(mv, ...params, block, index) : renderer(...params, block, index); + const element = mv ? renderer(mv, ...params, block, index, parent) : renderer(...params, block, index, parent); element.classList.add('nanoblock'); const oldElement = node.parentNode; oldElement.parentNode.replaceChild(element, oldElement); From a896f5ba9aa003e238934c966d0b8907d592ae23 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Wed, 18 Sep 2024 19:04:21 +0300 Subject: [PATCH 1147/1296] options fix --- _src/blocks/products-sideview/products-sideview.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index bd286e275..e658debf1 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -264,12 +264,13 @@ function updateBenefits(block) { } function renderSelector(block, ...options) { + const selectorOptions = options.filter((option) => option && !Number.isNaN(Number(option))); const el = document.createElement('div'); el.classList.add('products-sideview-selector'); el.innerHTML = ` From 73dd0d5f73f7e0aa1d74922f0aef3bdaba5060e2 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 24 Sep 2024 14:36:36 +0300 Subject: [PATCH 1148/1296] fixed section overflowing page --- _src/blocks/columns/columns.css | 14 +++++++++++++- _src/blocks/columns/columns.js | 10 +++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 3e2074c46..b6072c82b 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -405,7 +405,8 @@ .columns-container.chat-options p.button-container a { background-color: transparent; border: 2px solid black; - color: black + color: black; + white-space: normal; } .columns-container.chat-options p.button-container a:hover { @@ -466,6 +467,10 @@ align-items: stretch; } + .columns-container.chat-options .columns > div > div { + padding: 2em; + } + .columns.highlight-text.black { width: 520px; right: 2.5%; @@ -476,6 +481,10 @@ .columns.highlight-text.black.imageleft { left: 2.5%; } + + .percent-table .columns table tr td:first-of-type { + padding-right: 0.5em; + } } @media (min-width: 992px) { /* desktop */ @@ -646,6 +655,9 @@ padding-left: 20px; padding-right: 20px; } + .percent-table .columns table tr td:first-of-type { + padding-right: 1.5em; + } } @media (min-width: 1600px) { /* large desktop */ diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index ff5ba9776..fcd7ecb3f 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -1,4 +1,4 @@ -import { debounce } from '../../scripts/utils/utils.js'; +import { debounce, matchHeights } from '../../scripts/utils/utils.js'; function getItemsToShow() { const width = window.innerWidth; @@ -165,4 +165,12 @@ export default function decorate(block, options) { leftCol.innerHTML = ``; } + + const chatOptions = document.querySelector('.chat-options'); + const cardButtons = chatOptions.querySelectorAll('.button-container'); + cardButtons.forEach(button => { + button.previousElementSibling.classList.add('chat-options-text'); + }) + matchHeights(chatOptions, '.chat-options-text'); + matchHeights(chatOptions, 'table'); } From 8c6dc9498a909f68ee824fd3081d67342b3cdbee Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 24 Sep 2024 15:11:50 +0300 Subject: [PATCH 1149/1296] aligned chat-options like in prod env --- _src/blocks/columns/columns.css | 5 +++-- _src/blocks/columns/columns.js | 14 ++++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index b6072c82b..9fc2bf8d2 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -459,14 +459,15 @@ padding-left: 4em; padding-right: 1em; } - -@media (min-width: 767px) { +@media (min-width: 991px) { .columns.benefits > div { flex-direction: unset; gap: 32px; align-items: stretch; } +} +@media (min-width: 767px) { .columns-container.chat-options .columns > div > div { padding: 2em; } diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index fcd7ecb3f..b42c1cce9 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -167,10 +167,12 @@ export default function decorate(block, options) { } const chatOptions = document.querySelector('.chat-options'); - const cardButtons = chatOptions.querySelectorAll('.button-container'); - cardButtons.forEach(button => { - button.previousElementSibling.classList.add('chat-options-text'); - }) - matchHeights(chatOptions, '.chat-options-text'); - matchHeights(chatOptions, 'table'); + if(chatOptions) { + const cardButtons = chatOptions.querySelectorAll('.button-container'); + cardButtons.forEach(button => { + button.previousElementSibling.classList.add('chat-options-text'); + }) + matchHeights(chatOptions, '.chat-options-text'); + matchHeights(chatOptions, 'table'); + } } From dcaa9b14552214db92a0ba556f56635ebded0f7f Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 24 Sep 2024 15:42:44 +0300 Subject: [PATCH 1150/1296] DEX-19990 - Update on Bitdefender.com/trusted --- _src/scripts/template-factories/trusted.css | 86 +++++++++++++++++++++ 1 file changed, 86 insertions(+) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index f7ce7c7ec..7a085e97a 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -540,6 +540,56 @@ main .section.link-right a { margin: unset; } +.trusted .section.dealsbluebanner { + background-color: white; +} + +.trusted .section.dealsbluebanner * { + color: black; +} + +.trusted .section.dealsbluebanner a { + background-color: transparent !important; + border: solid black 1px !important; +} + +.trusted .section.dealsbluebanner a:hover span { + color: white!important; +} + +.trusted .section.dealsbluebanner .block { + background-color: rgb(239, 246, 255) !important; + border-radius: 15px; + margin-top: 3em; + padding: 0 0 0 3em; + overflow: hidden; +} + +.trusted .section.dealsbluebanner .columns-img-col { + overflow: hidden; + position: relative; + display: inline-block; + margin-bottom: 0; +} + +.trusted .section.dealsbluebanner .columns-img-col::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 31%; + height: 100%; + background: linear-gradient(to right, rgba(239, 246, 255, 1), rgba(239, 246, 255, 0)); + pointer-events: none; + } + +.trusted .section.dealsbluebanner .columns-img-col img { + height: 100%; + width: auto; + max-width: unset; + margin-left: -16em; +} + @-webkit-keyframes animated-mouse { 0% { opacity: 1; @@ -825,3 +875,39 @@ main .section.link-right a { padding: 1em 50px; } } + +@media (max-width: 992px) { + .trusted .section.dealsbluebanner .block { + padding: 0; + margin-top: 0; + } + + .trusted .section.dealsbluebanner h2 { + margin-bottom: 0; + } + + .trusted .section.dealsbluebanner a { + width: auto!important; + } + + .trusted .section.dealsbluebanner .columns-text-col { + padding: 1em; + order: 2; + } + + .trusted .section.dealsbluebanner .columns-img-col { + display: block!important; + order: 1; + } + + .trusted .section.dealsbluebanner .columns-img-col img { + height: auto; + width: 100%; + max-width: 100%; + margin-left: 0; + } + + .trusted .section.dealsbluebanner .columns-img-col::before { + display: none; + } +} \ No newline at end of file From 92abdf63b78900c2950716462ea2eb37d9c121fc Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 24 Sep 2024 17:06:24 +0300 Subject: [PATCH 1151/1296] fixed lint --- _src/blocks/columns/columns.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/blocks/columns/columns.js b/_src/blocks/columns/columns.js index b42c1cce9..ccee9f7dd 100644 --- a/_src/blocks/columns/columns.js +++ b/_src/blocks/columns/columns.js @@ -167,11 +167,11 @@ export default function decorate(block, options) { } const chatOptions = document.querySelector('.chat-options'); - if(chatOptions) { + if (chatOptions) { const cardButtons = chatOptions.querySelectorAll('.button-container'); - cardButtons.forEach(button => { + cardButtons.forEach((button) => { button.previousElementSibling.classList.add('chat-options-text'); - }) + }); matchHeights(chatOptions, '.chat-options-text'); matchHeights(chatOptions, 'table'); } From 5115b2244fdbd31c0638ef97f70e8fff645c18e5 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 24 Sep 2024 17:38:40 +0300 Subject: [PATCH 1152/1296] Update --- _src/scripts/template-factories/trusted.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/scripts/template-factories/trusted.css b/_src/scripts/template-factories/trusted.css index 7a085e97a..60c156493 100644 --- a/_src/scripts/template-factories/trusted.css +++ b/_src/scripts/template-factories/trusted.css @@ -570,6 +570,7 @@ main .section.link-right a { position: relative; display: inline-block; margin-bottom: 0; + height: 389px; } .trusted .section.dealsbluebanner .columns-img-col::before { @@ -587,7 +588,7 @@ main .section.link-right a { height: 100%; width: auto; max-width: unset; - margin-left: -16em; + margin-left: -12em; } @-webkit-keyframes animated-mouse { @@ -898,6 +899,7 @@ main .section.link-right a { .trusted .section.dealsbluebanner .columns-img-col { display: block!important; order: 1; + height: auto; } .trusted .section.dealsbluebanner .columns-img-col img { From 7891af0318e3e41b4d5269de52d6cf7bba9b8f62 Mon Sep 17 00:00:00 2001 From: andserban Date: Wed, 25 Sep 2024 17:00:03 +0300 Subject: [PATCH 1153/1296] addon title and title links --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 2 ++ _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index b4bd4ab15..03fd5939e 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -117,11 +117,13 @@ .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h4 a { transition: all 0.5s ease; + color: #000; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h4 a:hover { text-decoration: none; transition: all 0.5s ease; + color: #005ed9; } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box .blueTagsWrapper { diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 11b3adbfa..5625e17c3 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -385,9 +385,6 @@ export default async function decorate(block, options) { return `
      ${liString}
    `; }); - if (title.innerHTML.indexOf('href') !== -1) { - title.innerHTML = `${title.querySelector('tr a').innerHTML}`; - } let buyLinkSelector = prod.querySelector('a[href*="#buylink"]'); let customLink = 0; @@ -474,6 +471,7 @@ export default async function decorate(block, options) {
    From 4de2becb06ef137b6a7a99cab6ed2cea1114f8f9 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Wed, 25 Sep 2024 17:01:41 +0300 Subject: [PATCH 1154/1296] fixed card alignment bugs --- _src/blocks/products/products.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 83e82e541..9b5f2b4bd 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -482,21 +482,34 @@ export default function decorate(block) { const cards = block.querySelectorAll('.product-card'); const featuredCard = block.querySelector('.product-card.featured'); cards.forEach((card) => { + const priceElements = card.querySelectorAll('.price.nanoblock'); + if (priceElements.length >= 2) { + const secondToLastPrice = priceElements[priceElements.length - 2]; + let previousElement = secondToLastPrice.previousElementSibling; + if (previousElement && previousElement.tagName.toLowerCase() === 'p') { + previousElement.classList.add('first-year-price-text'); + } else { + const newP = document.createElement('p'); + newP.classList.add('first-year-price-text'); + secondToLastPrice.before(newP); + } + + } if (!card.classList.contains('featured')) { // If there is no featured card, do nothing if (!featuredCard) { return; } - const neededHeight = '2rem'; let space = card.querySelector('h3'); space = space.nextElementSibling; const emptyDiv = document.createElement('div'); space.insertAdjacentElement('afterend', emptyDiv); emptyDiv.classList.add('featured'); emptyDiv.style.visibility = 'hidden'; - emptyDiv.style.minHeight = neededHeight; } }); + matchHeights(block, '.first-year-price-text'); + matchHeights(block, '.price.nanoblock:not(:last-of-type)'); matchHeights(block, 'h3:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(2)'); matchHeights(block, 'p:nth-of-type(3)'); From f093aa1f0f797741ef0e1a8d2fb4a47320d2b7af Mon Sep 17 00:00:00 2001 From: andserban Date: Wed, 25 Sep 2024 17:05:55 +0300 Subject: [PATCH 1155/1296] lint --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 5625e17c3..bfcce9631 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -385,7 +385,6 @@ export default async function decorate(block, options) { return `
      ${liString}
    `; }); - let buyLinkSelector = prod.querySelector('a[href*="#buylink"]'); let customLink = 0; if (buyLinkSelector) { From 99e94a35944c5cb58ca577743adbc32638ff86bf Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Wed, 25 Sep 2024 17:22:33 +0300 Subject: [PATCH 1156/1296] fixed render-highlight --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 9b5f2b4bd..b7dd86370 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -273,7 +273,7 @@ function renderHighlight(mv, text) { 'div', { class: 'highlight', - style: 'visibility=hidden', + style: 'visibility:hidden', }, `${text}`, ); From 7988f480a2843547ff5140937009adfb6f5bc813 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 26 Sep 2024 10:13:06 +0300 Subject: [PATCH 1157/1296] removed hardcoded height logic --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index b7dd86370..6b8889a18 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -504,7 +504,7 @@ export default function decorate(block) { space = space.nextElementSibling; const emptyDiv = document.createElement('div'); space.insertAdjacentElement('afterend', emptyDiv); - emptyDiv.classList.add('featured'); + emptyDiv.classList.add('featured', 'nanoblock'); emptyDiv.style.visibility = 'hidden'; } }); From 2be8c7c1fd684bdd09227b79ff71abd26f1d7e79 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 26 Sep 2024 11:37:05 +0300 Subject: [PATCH 1158/1296] options fix --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 30 ++++---- .../product-comparison-table.js | 5 +- .../products-sideview/products-sideview.js | 5 +- _src/blocks/products/products.js | 69 +++++++++++++------ _src/scripts/utils/utils.js | 5 +- 5 files changed, 71 insertions(+), 43 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 11b3adbfa..5f6d15b75 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -81,20 +81,6 @@ async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid let updatedBuyLinkSelector = buyLinkSelector; if (updatedBuyLinkSelector) { updatedBuyLinkSelector.href = dynamicBuyLink(updatedBuyLinkSelector, prodName, prodUsers, prodYears, pid); - - const dataInfo = { - productId: prodName, - variation: { - price: discount - ? +newPrice : +oldPrice, - discounted_price: discount.discounted_price, - variation_name: variant, - currency_label: currencyLabel, - region_id: product.region_id, - }, - }; - - setDataOnBuyLinks(updatedBuyLinkSelector, dataInfo); } let priceElement = document.createElement('div'); priceElement.classList.add('hero-aem__prices__box'); @@ -130,6 +116,22 @@ async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid newPriceListed = formatPrice(newPrice, product.currency_iso, product.region_id); } + const dataInfo = { + productId: prodName, + variation: { + price: newPrice, + oldPrice, + variation_name: variant, + currency_label: currencyLabel, + region_id: product.region_id, + }, + }; + + setDataOnBuyLinks(updatedBuyLinkSelector, dataInfo); + + // const currentDomain = getDomain(); + // const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; + priceElement.innerHTML = `
    diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index f5ae04cfd..6813fa153 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -62,9 +62,8 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const dataInfo = { productId: currentProduct.code, variation: { - price: currentProduct.product.discount - ? +currentProduct.product.discount.discounted_price : +currentProduct.product.price, - discounted_price: currentProduct.product.discount?.discounted_price, + price: discounted, + oldPrice: price, variation_name: currentProduct.variant, currency_label: currentProduct.product.currency_label, region_id: currentProduct.product.region_id, diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index e658debf1..b2612ae69 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -151,9 +151,9 @@ function updateBuyLink(block) { const dataInfo = { productId: productCode, variation: { - price: state.currentProduct.discount + price: state.currentProduct.discount?.discounted_price, + oldPrice: state.currentProduct.discount ? +state.currentProduct.discount.discounted_price : +state.currentProduct.price, - discounted_price: state.currentProduct.discount?.discounted_price, variation_name: state.currentProduct.variation.variation_name, currency_label: state.currentProduct.currency_label, region_id: state.currentProduct.region_id, @@ -179,6 +179,7 @@ function updatePrice(block) { const formattedPrice = formatPrice(resp.price, resp.currency_iso, null, getDomain()); + priceEl.dataset.price = resp.price; priceEl.textContent = `${formattedPrice}`; })(); } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index c8a618cba..09f85a887 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -45,8 +45,6 @@ function customRound(value) { * @returns a model */ function toModel(productCode, variantId, v) { - const currentDomain = getDomain(); - const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { productCode, variantId, @@ -55,22 +53,24 @@ function toModel(productCode, variantId, v) { devices: +v.variation.dimension_value, subscription: v.variation.years * 12, version: v.variation.years ? 'yearly' : 'monthly', - basePrice: formatPrice(+v.price, ...formattedPriceParams), + basePrice: +v.price, // eslint-disable-next-line max-len - actualPrice: formatPrice(v.discount ? +v.discount.discounted_price : +v.price, ...formattedPriceParams), - monthlyBasePrice: formatPrice(customRound(v.price / 12), ...formattedPriceParams), - discountedPrice: formatPrice(v.discount?.discounted_price, ...formattedPriceParams), - discountedMonthlyPrice: formatPrice(v.discount - ? customRound(v.discount.discounted_price / 12) - : 0, ...formattedPriceParams), - discount: formatPrice(v.discount + actualPrice: v.discount ? +v.discount.discounted_price : +v.price, + monthlyBasePrice: customRound(v.price / 12), + discountedPrice: v.discount?.discounted_price, + discountedMonthlyPrice: v.discount + ? v.discount.discounted_price / 12 + : 0, + discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 - : 0, ...formattedPriceParams), + : 0, discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency: v.currency_label, + currency_iso: v.currency_iso, url: generateProductBuyLink(v, productCode), + test: {}, }; } @@ -186,14 +186,25 @@ function renderOldPrice(mv, text = '', monthly = '') { const oldPriceElt = root.querySelector('span'); mv.subscribe(() => { + const currentDomain = getDomain(); + const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; + + let oldPrice = 0; + if (mv.model.discountedPrice) { - oldPriceElt.innerHTML = monthly.toLowerCase() === 'monthly' - ? `${text} ${mv.model.monthlyBasePrice} /mo` - : `${text} ${mv.model.basePrice}`; + if (monthly.toLowerCase() === 'monthly') { + oldPrice = mv.model.monthlyBasePrice; + oldPriceElt.innerHTML = `${text} ${formatPrice(mv.model.monthlyBasePrice, ...formattedPriceParams)} /mo`; + } else { + oldPrice = mv.model.basePrice; + oldPriceElt.innerHTML = `${text} ${formatPrice(mv.model.basePrice, ...formattedPriceParams)}`; + } oldPriceElt.style.visibility = 'visible'; } else { oldPriceElt.style.visibility = 'hidden'; } + + mv.model.test.oldPrice = oldPrice; }); return root; @@ -219,18 +230,28 @@ function renderPrice(mv, text = '', monthly = '', monthTranslation = 'mo') { const priceElt = root.querySelector('strong'); mv.subscribe(() => { + const currentDomain = getDomain(); + const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; + + let price; if (monthly.toLowerCase() === 'monthly') { if (mv.model.discountedPrice) { - priceElt.innerHTML = `${text} ${mv.model.discountedMonthlyPrice} /${monthTranslation}`; + price = mv.model.discountedMonthlyPrice; + priceElt.innerHTML = `${text} ${formatPrice(mv.model.discountedMonthlyPrice, ...formattedPriceParams)} /${monthTranslation}`; } else { - priceElt.innerHTML = `${text} ${mv.model.monthlyBasePrice} /${monthTranslation}`; + price = mv.model.monthlyBasePrice; + priceElt.innerHTML = `${text} ${formatPrice(mv.model.monthlyBasePrice, ...formattedPriceParams)} /${monthTranslation}`; } } else if (mv.model.discountedPrice) { - priceElt.innerHTML = `${text} ${mv.model.discountedPrice}`; + price = mv.model.discountedPrice; + priceElt.innerHTML = `${text} ${formatPrice(mv.model.discountedPrice, ...formattedPriceParams)}`; } else { - priceElt.innerHTML = `${text} ${mv.model.basePrice}`; + price = mv.model.basePrice; + priceElt.innerHTML = `${text} ${formatPrice(mv.model.basePrice, ...formattedPriceParams)}`; } + mv.model.test.price = price; + trackProduct(mv.model); }); @@ -375,11 +396,13 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { */ function renderLowestPrice(code, variant, monthly = '', text = '') { const root = document.createElement('p'); - fetchProduct(code, variant).then((product) => { + const currentDomain = getDomain(); + const formattedPriceParams = [product.currency_iso, null, currentDomain]; const m = toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; - const price = isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice; + // eslint-disable-next-line max-len + const price = formatPrice(isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice, ...formattedPriceParams); root.innerHTML = `${text.replace('0', `${price}`)}`; }); @@ -431,11 +454,13 @@ export default function decorate(block) { col.querySelectorAll('.button-container a').forEach((link) => { if (link && (link.href.includes('/site/Store/buy/') || link.href.includes('checkout.bitdefender.com'))) { link.href = card.url; + // console.log('test', mv.model.test) + const dataInfo = { productId: card.productCode, variation: { - price: card.actualPrice, - discounted_price: card.discountedPrice, + price: card.test.price, + oldPrice: card.test.oldPrice, variation_name: card.variantId, currency_label: card.currency, region_id: card.regionId, diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 0c7b6ff0b..88a589c9f 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -328,9 +328,10 @@ export function setDataOnBuyLinks(element, dataInfo) { const { productId, variation } = dataInfo; if (productId) element.dataset.product = productId; - element.dataset.buyPrice = variation.discounted_price || variation.price || 0; + // element.dataset.buyPrice = variation.discounted_price || variation.price || 0; - if (variation.price) element.dataset.oldPrice = variation.price; + if (variation.price) element.dataset.buyPrice = variation.price; + if (variation.oldPrice) element.dataset.oldPrice = variation.oldPrice; if (variation.currency_label) element.dataset.currency = variation.currency_label; if (variation.region_id) element.dataset.region = variation.region_id; if (variation.variation_name) element.dataset.variation = variation.variation_name; From dca6ee9dbe230aa556fb5fc6c97c01ade04d2610 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 26 Sep 2024 12:06:00 +0300 Subject: [PATCH 1159/1296] adjusted hero styling --- _src/blocks/hero/hero.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index 4f1c835c1..eb5d9749e 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -343,6 +343,7 @@ main .hero .hero-picture picture img { /* display: none; */ padding-left: 200px; + object-position: 70%; } main .hero a.button { @@ -587,7 +588,7 @@ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { } main .hero-container.blue-title .hero-content > div { - width: 630px; + width: 60%; } } From 9bdeb10fa46228468d0b8928a6235dedc528bab4 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Thu, 26 Sep 2024 13:25:16 +0300 Subject: [PATCH 1160/1296] fixed modal styles by adding correct class to body --- _src/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 559755a01..74ed9582b 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -408,7 +408,7 @@ export function readBlockConfig(block) { } else { value = ps.map((p) => p.textContent); } - } else value = row.children[1].textContent; + } else value = toClassName(row.children[1].textContent); config[name] = value; } } From 0c4f0d8d3d2b4c2f2972538180d8e915e23176cb Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 26 Sep 2024 14:32:11 +0300 Subject: [PATCH 1161/1296] Revert "adjusted hero styling" This reverts commit dca6ee9dbe230aa556fb5fc6c97c01ade04d2610. --- _src/blocks/hero/hero.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/hero/hero.css b/_src/blocks/hero/hero.css index eb5d9749e..4f1c835c1 100644 --- a/_src/blocks/hero/hero.css +++ b/_src/blocks/hero/hero.css @@ -343,7 +343,6 @@ main .hero .hero-picture picture img { /* display: none; */ padding-left: 200px; - object-position: 70%; } main .hero a.button { @@ -588,7 +587,7 @@ main .smaller_icon .hero .hero-content > div table tr td:first-of-type { } main .hero-container.blue-title .hero-content > div { - width: 60%; + width: 630px; } } From 43aa96678ba58300203272b2fb7a81d2e84c6301 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 26 Sep 2024 14:36:22 +0300 Subject: [PATCH 1162/1296] fixed lint --- _src/blocks/products/products.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 94fb3a136..78271f642 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -502,7 +502,7 @@ export default function decorate(block) { const priceElements = card.querySelectorAll('.price.nanoblock'); if (priceElements.length >= 2) { const secondToLastPrice = priceElements[priceElements.length - 2]; - let previousElement = secondToLastPrice.previousElementSibling; + const previousElement = secondToLastPrice.previousElementSibling; if (previousElement && previousElement.tagName.toLowerCase() === 'p') { previousElement.classList.add('first-year-price-text'); } else { @@ -510,7 +510,6 @@ export default function decorate(block) { newP.classList.add('first-year-price-text'); secondToLastPrice.before(newP); } - } if (!card.classList.contains('featured')) { // If there is no featured card, do nothing From 7a76bfcfd5acabe045c8b6e3edccfd71f40b4242 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 15:19:08 +0300 Subject: [PATCH 1163/1296] Adding new info to DataLayer --- .../product-comparison-table.js | 62 ++++++++++++- _src/scripts/delayed.js | 2 + _src/scripts/scripts.js | 86 ++++++++++++++----- 3 files changed, 126 insertions(+), 24 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index f5ae04cfd..bbac4f5c0 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -6,10 +6,66 @@ import { setDataOnBuyLinks, generateProductBuyLink, formatPrice, } from '../../scripts/utils/utils.js'; -import { getDomain } from '../../scripts/scripts.js'; +import { getDomain, trackProduct } from '../../scripts/scripts.js'; const fetchedProducts = []; +/** + * Utility function to round prices and percentages + * @param value value to round + * @returns rounded value + */ +function customRound(value) { + const numValue = parseFloat(value); + + if (Number.isNaN(numValue)) { + return value; + } + + // Convert to a fixed number of decimal places then back to a number to deal with precision issues + const roundedValue = Number(numValue.toFixed(2)); + + // If it's a whole number, return it as an integer + return (roundedValue % 1 === 0) ? Math.round(roundedValue) : roundedValue; +} + +/** + * Convert a product variant returned by the remote service into a model + * @param productCode product code + * @param variantId variant identifier + * @param v variant + * @returns a model + */ +function toModel(productCode, variantId, v) { + const currentDomain = getDomain(); + const formattedPriceParams = [v.currency_iso, null, currentDomain]; + return { + productCode, + variantId, + regionId: v.region_id, + platformProductId: v.platform_product_id, + devices: +v.variation.dimension_value, + subscription: v.variation.years * 12, + version: v.variation.years ? 'yearly' : 'monthly', + basePrice: formatPrice(+v.price, ...formattedPriceParams), + // eslint-disable-next-line max-len + actualPrice: formatPrice(v.discount ? +v.discount.discounted_price : +v.price, ...formattedPriceParams), + monthlyBasePrice: formatPrice(customRound(v.price / 12), ...formattedPriceParams), + discountedPrice: formatPrice(v.discount?.discounted_price, ...formattedPriceParams), + discountedMonthlyPrice: formatPrice(v.discount + ? customRound(v.discount.discounted_price / 12) + : 0, ...formattedPriceParams), + discount: formatPrice(v.discount + ? customRound((v.price - v.discount.discounted_price) * 100) / 100 + : 0, ...formattedPriceParams), + discountRate: v.discount + ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) + : 0, + currency: v.currency_label, + url: generateProductBuyLink(v, productCode), + }; +} + createNanoBlock('priceComparison', (code, variant, label, block, productIndex, columnEl) => { const priceRoot = document.createElement('div'); priceRoot.classList.add('product-comparison-price'); @@ -24,9 +80,9 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c priceElement.classList.add('current-price-container'); const priceAppliedOnTime = document.createElement('p'); priceRoot.appendChild(priceAppliedOnTime); - fetchProduct(code, variant) .then((product) => { + const m = toModel(code, variant, product); const currentProduct = { code, variant, product }; fetchedProducts.push(currentProduct); // eslint-disable-next-line camelcase @@ -73,6 +129,8 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c setDataOnBuyLinks(buyLink, dataInfo); } + + trackProduct(m, 'comparison'); }) .catch((err) => { // eslint-disable-next-line no-console diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index 6ee632b94..c6dc95538 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -10,6 +10,7 @@ import { import { getLanguageCountryFromPath, pushProductsToDataLayer, + pushTrialDownloadToDataLayer, pushToDataLayer, getEnvironment, openUrlForOs, @@ -41,6 +42,7 @@ const { launchProdScript, launchStageScript, launchDevScript } = await fetchPlac })(); pushProductsToDataLayer(); +pushTrialDownloadToDataLayer(); pushToDataLayer('page loaded'); // Load breadcrumbs diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d4ef49ceb..0b498dea4 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -26,6 +26,7 @@ import { loadAnalytics } from './analytics.js'; const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list const TRACKED_PRODUCTS = []; +const TRACKED_PRODUCTS_COMPARISON = []; export const SUPPORTED_LANGUAGES = ['en']; export const DEFAULT_LANGUAGE = getDefaultLanguage(); @@ -248,36 +249,77 @@ export function getTags(tags) { return tags ? tags.split(':').filter((tag) => !!tag).map((tag) => tag.trim()) : []; } -export function trackProduct(product) { +export function trackProduct(product, location = '') { // eslint-disable-next-line max-len - const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); - const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); - const isTrackedPage = tags.includes('product') || tags.includes('service'); - if (isTrackedPage && !isDuplicate) TRACKED_PRODUCTS.push(product); + if (!product && product.length === 0) return; + if (location && location === 'comparison') { + const isDuplicate = TRACKED_PRODUCTS_COMPARISON.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); + if (!isDuplicate) TRACKED_PRODUCTS_COMPARISON.push(product); + } else { + const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); + if (!isDuplicate) TRACKED_PRODUCTS.push(product); + } } export function pushProductsToDataLayer() { if (TRACKED_PRODUCTS.length > 0) { - pushToDataLayer('product loaded', { - product: TRACKED_PRODUCTS - .map((p) => ({ - info: { - ID: p.platformProductId, - name: getMetadata('breadcrumb-title') || getMetadata('og:title'), - devices: p.devices, - subscription: p.subscription, - version: p.version, - basePrice: p.basePrice, - discountValue: p.discount, - discountRate: p.discountRate, - currency: p.currency, - priceWithTax: p.actualPrice, - }, + const dataLayerProduct = { + product: { + info: TRACKED_PRODUCTS.map((p) => ({ + ID: p.platformProductId, + name: getMetadata('breadcrumb-title') || getMetadata('og:title'), + devices: p.devices, + subscription: p.subscription, + version: p.version, + basePrice: p.basePrice, + discountValue: p.discount, + discountRate: p.discountRate, + currency: p.currency, + priceWithTax: p.actualPrice, })), - }); + }, + }; + + if (TRACKED_PRODUCTS_COMPARISON.length > 0) { + dataLayerProduct.product.comparison = TRACKED_PRODUCTS_COMPARISON.map((p) => ({ + ID: p.platformProductId, + name: p.productCode, + devices: p.devices, + subscription: p.subscription, + version: p.version, + basePrice: p.basePrice, + discountValue: p.discount, + discountRate: p.discountRate, + currency: p.currency, + priceWithTax: p.actualPrice, + })); + } + + pushToDataLayer('product loaded', dataLayerProduct); } } +export function pushTrialDownloadToDataLayer() { + const sections = document.querySelectorAll('a.button.modal'); + + sections.forEach((button) => { + if (button.getAttribute('href').includes('fragments/thank-you-for-downloading')) { + button.addEventListener('click', () => { + const dataLayerDownload = { + trial: { + ID: (TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) + || getMetadata('breadcrumb-title') + || getMetadata('og:title') + } + }; + + pushToDataLayer('trial downloaded', dataLayerDownload); + }); + } + }); + +} + export function decorateBlockWithRegionId(element, id) { // we could consider to use `element.setAttribute('s-object-region', id);` in the future if (element) element.id = id; @@ -542,7 +584,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { page: { info: { name: [languageCountry.country, ...tags].join(':'), // e.g. au:consumer:product:internet security - section: languageCountry.country || '', + section: navigator.language.toLowerCase() || navigator.userLanguage.toLowerCase() || languageCountry.language.toLowerCase(), subSection: tags[0] || '', subSubSection: tags[1] || '', subSubSubSection: tags[2] || '', From ed39bd0a2de6077a207a18403f303c619652586a Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 16:19:05 +0300 Subject: [PATCH 1164/1296] adding new condition --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 0b498dea4..20c6f8ba3 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -303,7 +303,7 @@ export function pushTrialDownloadToDataLayer() { const sections = document.querySelectorAll('a.button.modal'); sections.forEach((button) => { - if (button.getAttribute('href').includes('fragments/thank-you-for-downloading')) { + if (button.getAttribute('href').includes('fragments/thank-you-for-downloading') || button.getAttribute('href').includes('fragments/get-bitdefender')) { button.addEventListener('click', () => { const dataLayerDownload = { trial: { From 74e7bdbf813988fa83e12ad2aa22108ed40c4fa5 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 16:23:32 +0300 Subject: [PATCH 1165/1296] adding currency iso value --- _src/scripts/scripts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 20c6f8ba3..9e6961855 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -274,7 +274,7 @@ export function pushProductsToDataLayer() { basePrice: p.basePrice, discountValue: p.discount, discountRate: p.discountRate, - currency: p.currency, + currency: p.currency_iso, priceWithTax: p.actualPrice, })), }, @@ -290,7 +290,7 @@ export function pushProductsToDataLayer() { basePrice: p.basePrice, discountValue: p.discount, discountRate: p.discountRate, - currency: p.currency, + currency: p.currency_iso, priceWithTax: p.actualPrice, })); } From bb91f01f071bbce323e5966ab6f3e403eee15304 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 16:32:19 +0300 Subject: [PATCH 1166/1296] remove alloy script --- _src/scripts/analytics.js | 64 --------------------------------------- 1 file changed, 64 deletions(-) diff --git a/_src/scripts/analytics.js b/_src/scripts/analytics.js index 749b7ebeb..f72b30a40 100644 --- a/_src/scripts/analytics.js +++ b/_src/scripts/analytics.js @@ -11,12 +11,6 @@ */ export async function updateUserConsentStatus(isConsentGiven) { // eslint-disable-next-line no-undef - if (!alloy) { - // eslint-disable-next-line no-console - console.warn('Alloy is not initialized, cannot update consent status'); - return Promise.resolve(); - } - const consentObject = { consent: [{ standard: 'Adobe', @@ -31,69 +25,11 @@ export async function updateUserConsentStatus(isConsentGiven) { return alloy('setConsent', consentObject); } -async function trackAnalyticsEvent(xdmObject, eventData) { - // eslint-disable-next-line no-undef - if (!alloy) { - // eslint-disable-next-line no-console - console.warn('Alloy is not initialized, cannot send analytics event'); - return Promise.resolve(); - } - - // eslint-disable-next-line no-undef - return alloy('sendEvent', { - documentUnloading: true, - xdm: xdmObject, - data: eventData, - }); -} - -function generateAlloyConfigObject(targetDocument, datastreamConfig) { - const { hostname } = targetDocument.location; - return { - debugEnabled: hostname.startsWith('localhost') || hostname.includes('--'), - clickCollectionEnabled: true, - defaultConsent: 'in', - ...datastreamConfig, - }; -} - -function generateAlloyInitializationScript() { - return `!function(n,o){o.forEach(function(o){n[o]||((n.__alloyNS=n.__alloyNS||[]).push(o),n[o]= - function(){var u=arguments;return new Promise(function(i,l){n[o].q.push([i,l,u])})},n[o].q=[])})}(window,["alloy"]);`; -} - -function injectScriptIntoDocument(targetDocument, targetElement, scriptContent, scriptType = 'text/javascript') { - const script = targetDocument.createElement('script'); - script.type = scriptType; - script.innerHTML = scriptContent; - targetElement.appendChild(script); - return script; -} - export async function loadAnalytics(targetDocument, datastreamConfig) { - injectScriptIntoDocument(document, document.body, generateAlloyInitializationScript()); - - // eslint-disable-next-line no-undef - if (!alloy) { - // eslint-disable-next-line no-console - console.warn('Alloy is not initialized, cannot setup analytics tracking'); - return; - } - import('../vendor/adobe/adobe-client-data-layer.min.js'); - import('../vendor/adobe/alloy.min.js'); - - // eslint-disable-next-line no-undef - alloy('configure', generateAlloyConfigObject(targetDocument, datastreamConfig)); // Setup Adobe Data Layer if not already present if (typeof window.adobeDataLayer === 'undefined') { window.adobeDataLayer = []; } - - window.adobeDataLayer.push((dataLayer) => { - dataLayer.addEventListener('adobeDataLayer:event', (event) => { - trackAnalyticsEvent({}, event); - }); - }); } From 3de5dff1d7da4550ba493ecdd7aa66e40b5c078f Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 16:37:10 +0300 Subject: [PATCH 1167/1296] addin new key for products: from info to all --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 9e6961855..f4f27736a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -265,7 +265,7 @@ export function pushProductsToDataLayer() { if (TRACKED_PRODUCTS.length > 0) { const dataLayerProduct = { product: { - info: TRACKED_PRODUCTS.map((p) => ({ + all: TRACKED_PRODUCTS.map((p) => ({ ID: p.platformProductId, name: getMetadata('breadcrumb-title') || getMetadata('og:title'), devices: p.devices, From 77b63a119dd15a52d17b62fe1ec716d12f4f592c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 16:48:22 +0300 Subject: [PATCH 1168/1296] changing key value --- _src/scripts/scripts.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index f4f27736a..b7124910a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -263,9 +263,16 @@ export function trackProduct(product, location = '') { export function pushProductsToDataLayer() { if (TRACKED_PRODUCTS.length > 0) { + const url = window.location.href; + let isHomepageSolutions = url.split('/').filter(Boolean).pop(); + let key = 'info'; + if (isHomepageSolutions === 'consumer') { + key = 'all'; + } + const dataLayerProduct = { product: { - all: TRACKED_PRODUCTS.map((p) => ({ + [key]: TRACKED_PRODUCTS.map((p) => ({ ID: p.platformProductId, name: getMetadata('breadcrumb-title') || getMetadata('og:title'), devices: p.devices, From aa770962c82e0fcb81e9819a5e49b1467b6c9958 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Thu, 26 Sep 2024 17:18:06 +0300 Subject: [PATCH 1169/1296] update pushProductsToDataLayer function --- _src/scripts/scripts.js | 63 ++++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 36 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index b7124910a..729938b90 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -262,50 +262,41 @@ export function trackProduct(product, location = '') { } export function pushProductsToDataLayer() { - if (TRACKED_PRODUCTS.length > 0) { - const url = window.location.href; - let isHomepageSolutions = url.split('/').filter(Boolean).pop(); - let key = 'info'; - if (isHomepageSolutions === 'consumer') { - key = 'all'; - } - + const url = window.location.href; + let isHomepageSolutions = url.split('/').filter(Boolean).pop(); + const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; + + const mapProductData = (products) => products.map((p) => ({ + ID: p.platformProductId, + name: getMetadata('breadcrumb-title') || getMetadata('og:title'), + devices: p.devices, + subscription: p.subscription, + version: p.version, + basePrice: p.basePrice, + discountValue: p.discount, + discountRate: p.discountRate, + currency: p.currency_iso, + priceWithTax: p.actualPrice, + })); + + const pushDataLayer = (products, comparison = []) => { const dataLayerProduct = { product: { - [key]: TRACKED_PRODUCTS.map((p) => ({ - ID: p.platformProductId, - name: getMetadata('breadcrumb-title') || getMetadata('og:title'), - devices: p.devices, - subscription: p.subscription, - version: p.version, - basePrice: p.basePrice, - discountValue: p.discount, - discountRate: p.discountRate, - currency: p.currency_iso, - priceWithTax: p.actualPrice, - })), + [key]: mapProductData(products), + ...(comparison.length && { comparison: mapProductData(comparison) }) }, }; - - if (TRACKED_PRODUCTS_COMPARISON.length > 0) { - dataLayerProduct.product.comparison = TRACKED_PRODUCTS_COMPARISON.map((p) => ({ - ID: p.platformProductId, - name: p.productCode, - devices: p.devices, - subscription: p.subscription, - version: p.version, - basePrice: p.basePrice, - discountValue: p.discount, - discountRate: p.discountRate, - currency: p.currency_iso, - priceWithTax: p.actualPrice, - })); - } - pushToDataLayer('product loaded', dataLayerProduct); + }; + + if (TRACKED_PRODUCTS.length) { + pushDataLayer(TRACKED_PRODUCTS, TRACKED_PRODUCTS_COMPARISON); + } else if (TRACKED_PRODUCTS_COMPARISON.length) { + pushDataLayer(TRACKED_PRODUCTS_COMPARISON); } } + export function pushTrialDownloadToDataLayer() { const sections = document.querySelectorAll('a.button.modal'); From 039e0e9f0791263d34ec9c1e883ed966c73b3495 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 27 Sep 2024 10:33:11 +0300 Subject: [PATCH 1170/1296] reverted to fix buy cards --- _src/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 74ed9582b..559755a01 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -408,7 +408,7 @@ export function readBlockConfig(block) { } else { value = ps.map((p) => p.textContent); } - } else value = toClassName(row.children[1].textContent); + } else value = row.children[1].textContent; config[name] = value; } } From c2eff633ba397796340ada37e28f029b5f3dbc4b Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 27 Sep 2024 12:27:21 +0300 Subject: [PATCH 1171/1296] fixed modal styles yet again --- _src/blocks/fragment-metadata/fragment-metadata.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/_src/blocks/fragment-metadata/fragment-metadata.js b/_src/blocks/fragment-metadata/fragment-metadata.js index 9f6e09365..316d8446d 100644 --- a/_src/blocks/fragment-metadata/fragment-metadata.js +++ b/_src/blocks/fragment-metadata/fragment-metadata.js @@ -11,7 +11,13 @@ export default function decorate(block) { } = readBlockConfig(block); if (template) { - document.body.classList.add(template); + // make sure that the added class is a string + // not a variable caught between '{' and '}' + const variableRegex = /^\{([\s\S]*)\}$/; + const variableMatch = template.match(variableRegex); + const classTemplate = variableMatch ? variableMatch[1] : template; + + document.body.classList.add(classTemplate); } if (urlMacos || urlWindows || urlAndroid || urlIos) { From b863e6ec20f6f92e25a3ec96744765885778e977 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 27 Sep 2024 12:55:00 +0300 Subject: [PATCH 1172/1296] added missing css --- _src/styles/lazy-styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/styles/lazy-styles.css b/_src/styles/lazy-styles.css index d2dbd96dc..87466383c 100644 --- a/_src/styles/lazy-styles.css +++ b/_src/styles/lazy-styles.css @@ -319,6 +319,7 @@ .identity-exposed .modal-container.has-your-identity-been-exposed .products.plans .product-card .featured { position: relative; + color: white; border-radius: 20px; background-color: #2cb43d; margin: 0 0 0 -0.5rem; From 3d5881c02b8901107c93b1853fb2a3761683de11 Mon Sep 17 00:00:00 2001 From: andserban Date: Fri, 27 Sep 2024 14:32:56 +0300 Subject: [PATCH 1173/1296] add font-size --- _src/blocks/products/products.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 7c5a27c4c..0d715d3db 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -525,6 +525,7 @@ display: flex; justify-content: center; align-items: center; + font-size: 12px; } .product-card .discount { From 66ba22a0d01c79c67649212beb2a12119f8f0bcf Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 27 Sep 2024 16:29:38 +0300 Subject: [PATCH 1174/1296] fixed discount price formatting --- _src/blocks/products/products.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 109f6f272..e67f585ae 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -45,6 +45,8 @@ function customRound(value) { * @returns a model */ function toModel(productCode, variantId, v) { + const currentDomain = getDomain(); + const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { productCode, variantId, @@ -61,9 +63,9 @@ function toModel(productCode, variantId, v) { discountedMonthlyPrice: v.discount ? v.discount.discounted_price / 12 : 0, - discount: v.discount + discount: formatPrice(v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 - : 0, + : 0, ...formattedPriceParams), discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, @@ -190,7 +192,7 @@ function renderOldPrice(mv, text = '', monthly = '') { const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; let oldPrice = 0; - + if (mv.model.discountedPrice) { if (monthly.toLowerCase() === 'monthly') { oldPrice = mv.model.monthlyBasePrice; From a19314b2c531ec610a23f554a5437cbb30cee537 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 27 Sep 2024 17:44:33 +0300 Subject: [PATCH 1175/1296] fixed lint --- _src/blocks/products/products.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index e67f585ae..4e315eb21 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -192,7 +192,6 @@ function renderOldPrice(mv, text = '', monthly = '') { const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; let oldPrice = 0; - if (mv.model.discountedPrice) { if (monthly.toLowerCase() === 'monthly') { oldPrice = mv.model.monthlyBasePrice; From f1ab3c66fc5ce63f1d6e2d38618f0f470b923684 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 09:30:38 +0300 Subject: [PATCH 1176/1296] New Update --- .../product-comparison-table.js | 3 +- _src/scripts/scripts.js | 44 +++++++++++-------- 2 files changed, 28 insertions(+), 19 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 2ec9ac221..1a5db5eed 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -40,6 +40,7 @@ function toModel(productCode, variantId, v) { const currentDomain = getDomain(); const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { + productId: v.product_id, productCode, variantId, regionId: v.region_id, @@ -61,7 +62,7 @@ function toModel(productCode, variantId, v) { discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, - currency: v.currency_label, + currency_iso: v.currency_iso, url: generateProductBuyLink(v, productCode), }; } diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 729938b90..105f7c0b3 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -266,36 +266,44 @@ export function pushProductsToDataLayer() { let isHomepageSolutions = url.split('/').filter(Boolean).pop(); const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; - const mapProductData = (products) => products.map((p) => ({ - ID: p.platformProductId, - name: getMetadata('breadcrumb-title') || getMetadata('og:title'), - devices: p.devices, - subscription: p.subscription, - version: p.version, - basePrice: p.basePrice, - discountValue: p.discount, - discountRate: p.discountRate, - currency: p.currency_iso, - priceWithTax: p.actualPrice, - })); + const mapProductData = (products) => products.map((p) => { + const mappedProduct = { + ID: p.platformProductId || p.productId, + name: p.platformProductId ? p.productCode : undefined, + devices: p.devices, + subscription: p.subscription, + version: p.version, + basePrice: p.basePrice, + discountValue: p.discount, + discountRate: p.discountRate, + currency: p.currency_iso, + priceWithTax: p.actualPrice, + }; + + // Filter out properties with undefined values + return Object.fromEntries( + Object.entries(mappedProduct).filter(([_, value]) => value !== undefined) + ); + }); const pushDataLayer = (products, comparison = []) => { const dataLayerProduct = { product: { [key]: mapProductData(products), - ...(comparison.length && { comparison: mapProductData(comparison) }) + ...(comparison.length && { comparison: mapProductData(comparison) }), }, }; pushToDataLayer('product loaded', dataLayerProduct); }; - if (TRACKED_PRODUCTS.length) { - pushDataLayer(TRACKED_PRODUCTS, TRACKED_PRODUCTS_COMPARISON); - } else if (TRACKED_PRODUCTS_COMPARISON.length) { - pushDataLayer(TRACKED_PRODUCTS_COMPARISON); + if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { + TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); } -} + pushDataLayer(TRACKED_PRODUCTS, TRACKED_PRODUCTS_COMPARISON); + + console.log('adobeDataLayer ', adobeDataLayer) +} export function pushTrialDownloadToDataLayer() { const sections = document.querySelectorAll('a.button.modal'); From 774fdbcf5adf78e8123eabeee18fa6d3908bae05 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 09:31:10 +0300 Subject: [PATCH 1177/1296] update --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 105f7c0b3..28d332cb9 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -280,7 +280,7 @@ export function pushProductsToDataLayer() { priceWithTax: p.actualPrice, }; - // Filter out properties with undefined values + // remove undefined values return Object.fromEntries( Object.entries(mappedProduct).filter(([_, value]) => value !== undefined) ); From ba7652c0c794507561f452580dc4660eff0bf036 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 14:16:05 +0300 Subject: [PATCH 1178/1296] new updates on dataLayer --- _src/scripts/scripts.js | 126 ++++++++++++++++++++++++++-------------- 1 file changed, 83 insertions(+), 43 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 28d332cb9..c6808fe2c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -263,67 +263,107 @@ export function trackProduct(product, location = '') { export function pushProductsToDataLayer() { const url = window.location.href; - let isHomepageSolutions = url.split('/').filter(Boolean).pop(); + const isHomepageSolutions = url.split('/').filter(Boolean).pop(); const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; - const mapProductData = (products) => products.map((p) => { - const mappedProduct = { - ID: p.platformProductId || p.productId, - name: p.platformProductId ? p.productCode : undefined, - devices: p.devices, - subscription: p.subscription, - version: p.version, - basePrice: p.basePrice, - discountValue: p.discount, - discountRate: p.discountRate, - currency: p.currency_iso, - priceWithTax: p.actualPrice, - }; + const mapProductData = (products) => + products.map((product) => { + const { + platformProductId, + productId, + productCode, + devices, + subscription, + version, + basePrice, + discount, + discountRate, + currency_iso, + actualPrice, + } = product; + + return Object.fromEntries( + Object.entries({ + ID: platformProductId || productId, + name: platformProductId ? productCode : undefined, + devices, + subscription, + version, + basePrice, + discountValue: discount, + discountRate, + currency: currency_iso, + priceWithTax: actualPrice, + }).filter(([_, value]) => value !== undefined) + ); + }); + + let productAlreadyLoaded = adobeDataLayer.some(item => item.event === 'product loaded'); + + // if product loaded already exists we only add comparison array if e have it in the page + if (productAlreadyLoaded) { + adobeDataLayer.forEach(item => { + if (item.event === 'product loaded') { + // Ensure item.product exists and has the expected structure + if (key === 'all' && item.product && item.product.info) { + item.product = { + ...item.product, + all: item.product.info + }; + delete item.product.info; + } - // remove undefined values - return Object.fromEntries( - Object.entries(mappedProduct).filter(([_, value]) => value !== undefined) - ); + // check if TRACKED_PRODUCTS_COMPARISON has items and add it to the event + if (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length && item.product) { + item.product.comparison = TRACKED_PRODUCTS_COMPARISON; + } + } }); - const pushDataLayer = (products, comparison = []) => { + } else { + if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { + TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); + } + const dataLayerProduct = { product: { - [key]: mapProductData(products), - ...(comparison.length && { comparison: mapProductData(comparison) }), + [key]: mapProductData(TRACKED_PRODUCTS), + ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), }, }; - pushToDataLayer('product loaded', dataLayerProduct); - }; - if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { - TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); + pushToDataLayer('product loaded', dataLayerProduct); } - pushDataLayer(TRACKED_PRODUCTS, TRACKED_PRODUCTS_COMPARISON); - - console.log('adobeDataLayer ', adobeDataLayer) + console.log('adobeDataLayer', adobeDataLayer); } export function pushTrialDownloadToDataLayer() { - const sections = document.querySelectorAll('a.button.modal'); + const getTrialID = () => ( + ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) + || getMetadata('breadcrumb-title') + || getMetadata('og:title') + ); - sections.forEach((button) => { - if (button.getAttribute('href').includes('fragments/thank-you-for-downloading') || button.getAttribute('href').includes('fragments/get-bitdefender')) { - button.addEventListener('click', () => { - const dataLayerDownload = { - trial: { - ID: (TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) - || getMetadata('breadcrumb-title') - || getMetadata('og:title') - } - }; + const pushTrialData = () => { + const dataLayerDownload = { trial: { ID: getTrialID() } }; + pushToDataLayer('trial downloaded', dataLayerDownload); + }; - pushToDataLayer('trial downloaded', dataLayerDownload); - }); - } - }); + const sections = document.querySelectorAll('a.button.modal'); + const url = window.location.href; + const currentPage = url.split('/').filter(Boolean).pop(); + if (sections.length) { + sections.forEach((button) => { + const href = button.getAttribute('href'); + if (href.includes('fragments/thank-you-for-downloading') || href.includes('fragments/get-bitdefender')) { + button.addEventListener('click', pushTrialData); + } + }); + } else if (currentPage === 'thank-you') { + pushTrialData(); + } } export function decorateBlockWithRegionId(element, id) { From fadfb77fba346580c130895ea3d5ab370a8490c2 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 30 Sep 2024 15:39:28 +0300 Subject: [PATCH 1179/1296] Add black buttons on new-prod-boxes component --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 9 +++++++++ _src/blocks/new-prod-boxes/new-prod-boxes.js | 7 ++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 03fd5939e..53d19fa28 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -487,10 +487,19 @@ min-width: 144px; } +.new-prod-boxes-container .new-prod-boxes.smallerbuttons .button.secondary { + display: inline-block; + min-width: 144px; +} + .new-prod-boxes-container .button.primary.no-arrow::after { content: none; } +.new-prod-boxes-container .button.secondary.no-arrow::after { + content: none; +} + .new-prod-boxes-container .button.primary:hover { color: white; background-color: #B10304; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index e5031f371..f7e1cc789 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -453,6 +453,11 @@ export default async function decorate(block, options) { buyLink.querySelector('a').classList.add('button', 'primary', 'no-arrow'); buyLink2?.querySelector('a')?.classList.add('button', 'primary', 'no-arrow'); + let secondButton = buyLink?.querySelectorAll('a')[1]; + if (secondButton) { + secondButton.classList.add('button', 'secondary', 'no-arrow'); + } + const prodBox = document.createElement('div'); prodBox.innerHTML = `
    @@ -465,7 +470,7 @@ export default async function decorate(block, options) {
    ${radioButtons ? planSwitcher.outerHTML : ''}
    - + ${secondButton ? secondButton.outerHTML : ''} ${undeBuyLink.innerText.trim() ? `` : ''}
    ${benefitsLists.innerText.trim() ? `
    ${featureList}
    ` : ''} From 77d432066dd77e304d32ead4ee40d2a5831197c6 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 30 Sep 2024 16:33:05 +0300 Subject: [PATCH 1180/1296] Fix setting aria-label for icons in lib-franklin.js --- _src/scripts/lib-franklin.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 559755a01..66bbc6f16 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -253,10 +253,16 @@ async function internalDecorateIcons(element) { const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span; // Set aria-label if the parent is an anchor tag - const spanParent = span.parentElement; - if (spanParent.tagName === 'A' && !spanParent.hasAttribute('aria-label')) { - spanParent.setAttribute('aria-label', iconName); + try { + const spanParent = span.parentElement; + if (spanParent?.tagName === 'A' && !spanParent?.hasAttribute('aria-label')) { + spanParent.setAttribute('aria-label', iconName); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error(`Error setting aria-label for icon ${iconName}:`, error); } + // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite if (ICONS_CACHE[iconName] && ICONS_CACHE[iconName].styled) { parent.innerHTML = ICONS_CACHE[iconName].html; From b53a705a17eaa71349387c8b4d0498a268e7c83d Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 30 Sep 2024 17:10:25 +0300 Subject: [PATCH 1181/1296] add a cursor pointer on the whole radio button, not just the ::before element --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 03fd5939e..dc257dae8 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -697,6 +697,7 @@ .plan-switcher .radio-label { margin-right: 8px; + cursor: pointer; } .plan-switcher .radio-label::before { From 3401e9426d31a7d13df5b039c47b9a02531a4aee Mon Sep 17 00:00:00 2001 From: andserban Date: Mon, 30 Sep 2024 17:10:53 +0300 Subject: [PATCH 1182/1296] add addon title from metadata --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 1 + _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 03fd5939e..df0798063 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -113,6 +113,7 @@ font-family: Arial, sans-serif; margin-top: 0; margin-bottom: 4px; + width: 80% } .new-prod-boxes-container .new-prod-boxes .prod_box .inner_prod_box h4 a { diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index e5031f371..a7dcbaac7 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -206,7 +206,7 @@ export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars products, familyProducts, monthlyProducts, priceType, pid, mainProduct, - addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, + addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { @@ -472,7 +472,7 @@ export default async function decorate(block, options) {
    From eb3ce3b25af99a30e988f2ab569ab5edfa9208c7 Mon Sep 17 00:00:00 2001 From: andserban Date: Mon, 30 Sep 2024 17:14:30 +0300 Subject: [PATCH 1183/1296] lint --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index a7dcbaac7..3df0789bd 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -206,7 +206,7 @@ export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars products, familyProducts, monthlyProducts, priceType, pid, mainProduct, - addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName + addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem if (options) { From cd9d220a9759b4a62f7f55d1c7dcd55bb7d04c6d Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 30 Sep 2024 17:16:28 +0300 Subject: [PATCH 1184/1296] fixed zuora prices --- _src/scripts/zuora.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/scripts/zuora.js b/_src/scripts/zuora.js index 2af0b691b..64e6d6acc 100644 --- a/_src/scripts/zuora.js +++ b/_src/scripts/zuora.js @@ -154,6 +154,10 @@ export default class ZuoraNLClass { return; } + if (Number(yearsNo) !== billingPeriod && billingPeriod !== 0) { + return; + } + if (this.monthlyProducts.indexOf(id) !== -1) { billingPeriod = 1; } From 624a3bb97c1b0d06a50f8dbac0f428d3a1a24f4a Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:25:36 +0300 Subject: [PATCH 1185/1296] new update on adobedatalayer obj --- _src/scripts/scripts.js | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c6808fe2c..c7532813c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -345,15 +345,16 @@ export function pushTrialDownloadToDataLayer() { || getMetadata('og:title') ); + const url = window.location.href; + const currentPage = url.split('/').filter(Boolean).pop(); + const downloadType = currentPage === 'thank-you' ? 'product downloaded' : 'trial downloaded'; + const pushTrialData = () => { - const dataLayerDownload = { trial: { ID: getTrialID() } }; - pushToDataLayer('trial downloaded', dataLayerDownload); + const dataLayerDownload = { product: {trial: [{ ID: getTrialID() }] } }; + pushToDataLayer(downloadType, dataLayerDownload); }; const sections = document.querySelectorAll('a.button.modal'); - const url = window.location.href; - const currentPage = url.split('/').filter(Boolean).pop(); - if (sections.length) { sections.forEach((button) => { const href = button.getAttribute('href'); @@ -619,26 +620,32 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const { domain, domainPartsCount } = getDomainInfo(hostname); const languageCountry = getLanguageCountryFromPath(window.location.pathname); const environment = getEnvironment(hostname, languageCountry.country); - const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); - const experimentDetails = targetExperimentDetails ?? getExperimentDetails(); // eslint-disable-next-line no-console console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); + const langCountry = navigator.language || navigator.userLanguage || languageCountry.language; + const [lang, country] = langCountry.split('-'); + const urlPath = window.location.pathname; + const allSegments = urlPath.split('/'); + const lastSegment = allSegments[allSegments.length - 1].replace('-', ' '); + let siteSubSection = urlPath.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; + const tagName = `${lang}:${siteSubSection}:product:${lastSegment}`; + pushToDataLayer('page load started', { pageInstanceID: environment, page: { info: { - name: [languageCountry.country, ...tags].join(':'), // e.g. au:consumer:product:internet security - section: navigator.language.toLowerCase() || navigator.userLanguage.toLowerCase() || languageCountry.language.toLowerCase(), - subSection: tags[0] || '', - subSubSection: tags[1] || '', - subSubSubSection: tags[2] || '', + name: tagName, // e.g. au:consumer:product:internet security + section: country.toLowerCase(), + subSection: siteSubSection, + subSubSection: 'product', + subSubSubSection: lastSegment, destinationURL: window.location.href, queryString: window.location.search, referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', serverName: 'hlx.live', // indicator for AEM Success Edge - language: navigator.language || navigator.userLanguage || languageCountry.language, + language: lang, sysEnv: getOperatingSystem(window.navigator.userAgent), ...(experimentDetails && { experimentDetails }), }, From 6f3303dbb7b465e3eb8ad30846aa2b039cff4d50 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:31:46 +0300 Subject: [PATCH 1186/1296] fix: err --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c7532813c..5475e728b 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -637,7 +637,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { page: { info: { name: tagName, // e.g. au:consumer:product:internet security - section: country.toLowerCase(), + section: '', subSection: siteSubSection, subSubSection: 'product', subSubSubSection: lastSegment, From 42eaddb712acc56780f821bcfedec555073385cd Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 30 Sep 2024 17:34:23 +0300 Subject: [PATCH 1187/1296] fixed striketrough old price display issue --- _src/blocks/products/products.js | 4 ++-- _src/scripts/zuora.js | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 4e315eb21..0e5fc6faf 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -176,7 +176,7 @@ function renderPlanSelector(mv, plans, defaultSelection) { * @returns Root node of the nanoblock */ function renderOldPrice(mv, text = '', monthly = '') { - // TODO simplify CSS + // TODO: simplify CSS const root = createTag( 'div', { @@ -192,7 +192,7 @@ function renderOldPrice(mv, text = '', monthly = '') { const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; let oldPrice = 0; - if (mv.model.discountedPrice) { + if (mv.model.discountedPrice && mv.model.discountRate !== 0) { if (monthly.toLowerCase() === 'monthly') { oldPrice = mv.model.monthlyBasePrice; oldPriceElt.innerHTML = `${text} ${formatPrice(mv.model.monthlyBasePrice, ...formattedPriceParams)} /mo`; diff --git a/_src/scripts/zuora.js b/_src/scripts/zuora.js index 64e6d6acc..63b3c9306 100644 --- a/_src/scripts/zuora.js +++ b/_src/scripts/zuora.js @@ -150,10 +150,13 @@ export default class ZuoraNLClass { billingPeriod = 10; } + // Non monthly product (e.g 'tsmd') and monthly billing period => fast exit + // same thing if we have a monthly product (e.g 'psm') and non monthly billing period if ((this.monthlyProducts.indexOf(id) === -1 && billingPeriod === 0) || (this.monthlyProducts.indexOf(id) !== -1 && billingPeriod !== 0)) { return; } + // make sure that the billing period is the one we are searching for if (Number(yearsNo) !== billingPeriod && billingPeriod !== 0) { return; } From 57c71eef9f7848b6ae3f390c6ed78312caf18e41 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:39:46 +0300 Subject: [PATCH 1188/1296] update --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 5475e728b..c7532813c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -637,7 +637,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { page: { info: { name: tagName, // e.g. au:consumer:product:internet security - section: '', + section: country.toLowerCase(), subSection: siteSubSection, subSubSection: 'product', subSubSubSection: lastSegment, From f840d9fc913a12ea0b417412bfa1e39b4a432821 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:40:39 +0300 Subject: [PATCH 1189/1296] update --- _src/scripts/scripts.js | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c7532813c..4ddba1a22 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -626,6 +626,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const langCountry = navigator.language || navigator.userLanguage || languageCountry.language; const [lang, country] = langCountry.split('-'); + console.log('country ', country) const urlPath = window.location.pathname; const allSegments = urlPath.split('/'); const lastSegment = allSegments[allSegments.length - 1].replace('-', ' '); From c7ea9070cd02e5e089ec0086d26ee3d9abad52e3 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:41:38 +0300 Subject: [PATCH 1190/1296] update --- _src/scripts/scripts.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 4ddba1a22..ff930c4b2 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -625,8 +625,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); const langCountry = navigator.language || navigator.userLanguage || languageCountry.language; - const [lang, country] = langCountry.split('-'); - console.log('country ', country) + const [lang, country] = langCountry ? langCountry.split('-') : ''; const urlPath = window.location.pathname; const allSegments = urlPath.split('/'); const lastSegment = allSegments[allSegments.length - 1].replace('-', ' '); From 4601213c359e6531052fc6f08ad41f266a16802d Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:43:10 +0300 Subject: [PATCH 1191/1296] update --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index ff930c4b2..1a308a35a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -625,7 +625,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); const langCountry = navigator.language || navigator.userLanguage || languageCountry.language; - const [lang, country] = langCountry ? langCountry.split('-') : ''; + const [lang, country] = langCountry ? langCountry.split('-') : ['', '']; const urlPath = window.location.pathname; const allSegments = urlPath.split('/'); const lastSegment = allSegments[allSegments.length - 1].replace('-', ' '); From f05dcffc3a53b1a7f02a3154fa153831bb2debcb Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:47:17 +0300 Subject: [PATCH 1192/1296] update --- _src/scripts/scripts.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 1a308a35a..51a26767b 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -625,7 +625,9 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); const langCountry = navigator.language || navigator.userLanguage || languageCountry.language; - const [lang, country] = langCountry ? langCountry.split('-') : ['', '']; + let [lang, country] = langCountry ? langCountry.split('-') : ['', '']; + country = country ? country.toLowerCase() : ''; + const urlPath = window.location.pathname; const allSegments = urlPath.split('/'); const lastSegment = allSegments[allSegments.length - 1].replace('-', ' '); @@ -637,7 +639,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { page: { info: { name: tagName, // e.g. au:consumer:product:internet security - section: country.toLowerCase(), + section: country, subSection: siteSubSection, subSubSection: 'product', subSubSubSection: lastSegment, From 45a2eddb10b9174fe463747b047b6dca7f752139 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 17:54:02 +0300 Subject: [PATCH 1193/1296] fix: downloaded event --- _src/scripts/scripts.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 51a26767b..29062c13d 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -347,11 +347,11 @@ export function pushTrialDownloadToDataLayer() { const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); - const downloadType = currentPage === 'thank-you' ? 'product downloaded' : 'trial downloaded'; + const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; const pushTrialData = () => { - const dataLayerDownload = { product: {trial: [{ ID: getTrialID() }] } }; - pushToDataLayer(downloadType, dataLayerDownload); + const dataLayerDownload = { product: {[downloadType]: [{ ID: getTrialID() }] } }; + pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); }; const sections = document.querySelectorAll('a.button.modal'); From 2062120270b0c42b227a6adcfe9e548cce530fd7 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 18:01:46 +0300 Subject: [PATCH 1194/1296] update --- _src/scripts/scripts.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 29062c13d..1badd3796 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -348,9 +348,10 @@ export function pushTrialDownloadToDataLayer() { const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; + const downloadType2 = currentPage === 'thank-you' ? 'downloaded' : 'trial'; const pushTrialData = () => { - const dataLayerDownload = { product: {[downloadType]: [{ ID: getTrialID() }] } }; + const dataLayerDownload = { product: {[downloadType2]: [{ ID: getTrialID() }] } }; pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); }; From 83ca5aa866373e956be4678b6e51140b5860e774 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 30 Sep 2024 18:08:20 +0300 Subject: [PATCH 1195/1296] updated the percentage discount to use Math.round --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 0e5fc6faf..37cafea87 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -67,7 +67,7 @@ function toModel(productCode, variantId, v) { ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, ...formattedPriceParams), discountRate: v.discount - ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) + ? Math.round(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency: v.currency_label, currency_iso: v.currency_iso, From e611f960c73c9f455ee67a2d3e16df80306b73b9 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Mon, 30 Sep 2024 19:49:26 +0300 Subject: [PATCH 1196/1296] update tracking --- .../product-comparison-table.js | 21 ++++---- _src/blocks/products/products.js | 2 +- _src/scripts/scripts.js | 53 ++++++++++--------- 3 files changed, 39 insertions(+), 37 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 1a5db5eed..e7f46978e 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -48,21 +48,22 @@ function toModel(productCode, variantId, v) { devices: +v.variation.dimension_value, subscription: v.variation.years * 12, version: v.variation.years ? 'yearly' : 'monthly', - basePrice: formatPrice(+v.price, ...formattedPriceParams), + basePrice: +v.price, // eslint-disable-next-line max-len - actualPrice: formatPrice(v.discount ? +v.discount.discounted_price : +v.price, ...formattedPriceParams), - monthlyBasePrice: formatPrice(customRound(v.price / 12), ...formattedPriceParams), - discountedPrice: formatPrice(v.discount?.discounted_price, ...formattedPriceParams), - discountedMonthlyPrice: formatPrice(v.discount - ? customRound(v.discount.discounted_price / 12) - : 0, ...formattedPriceParams), - discount: formatPrice(v.discount - ? customRound((v.price - v.discount.discounted_price) * 100) / 100 - : 0, ...formattedPriceParams), + actualPrice: v.discount ? +v.discount.discounted_price : +v.price, + monthlyBasePrice: customRound(v.price / 12), + discountedPrice: v.discount?.discounted_price, + discountedMonthlyPrice: v.discount + ? customRound(v.discount.discounted_price / 12) + : 0, + discount: v.discount + ? customRound((v.price - v.discount.discounted_price) * 100) / 100 + : 0, discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency_iso: v.currency_iso, + currency: v.currency_label, url: generateProductBuyLink(v, productCode), }; } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 09f85a887..f1c53a92e 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -67,8 +67,8 @@ function toModel(productCode, variantId, v) { discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, - currency: v.currency_label, currency_iso: v.currency_iso, + currency: v.currency_label, url: generateProductBuyLink(v, productCode), test: {}, }; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 1badd3796..c4ae4002a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -30,11 +30,8 @@ const TRACKED_PRODUCTS_COMPARISON = []; export const SUPPORTED_LANGUAGES = ['en']; export const DEFAULT_LANGUAGE = getDefaultLanguage(); - export const DEFAULT_COUNTRY = getDefaultLanguage(); - export const METADATA_ANALYTICS_TAGS = 'analytics-tags'; - const TARGET_TENANT = 'bitdefender'; const HREFLANG_MAP = new Map([ @@ -289,7 +286,7 @@ export function pushProductsToDataLayer() { devices, subscription, version, - basePrice, + basePrice: basePrice, discountValue: discount, discountRate, currency: currency_iso, @@ -614,40 +611,44 @@ function getExperimentDetails() { } function pushPageLoadToDataLayer(targetExperimentDetails) { - const { hostname } = window.location; - if (!hostname) { - return; - } - const { domain, domainPartsCount } = getDomainInfo(hostname); - const languageCountry = getLanguageCountryFromPath(window.location.pathname); - const environment = getEnvironment(hostname, languageCountry.country); + const { hostname, pathname, href, search } = window.location; +if (!hostname || !pathname) { + return; +} + const experimentDetails = targetExperimentDetails ?? getExperimentDetails(); // eslint-disable-next-line no-console console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); - const langCountry = navigator.language || navigator.userLanguage || languageCountry.language; - let [lang, country] = langCountry ? langCountry.split('-') : ['', '']; - country = country ? country.toLowerCase() : ''; + const { domain, domainPartsCount } = getDomainInfo(hostname); + const [lang, country] = pathname.split('/')[1].split('-'); + const environment = getEnvironment(hostname, country); + const allSegments = pathname.split('/').filter(segment => segment !== ''); + const lastSegment = allSegments[allSegments.length - 1]; + const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); + const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; + + let subSubSection = 'product'; + let tagName = `${lang}:${subSection}:product:${subSubSubSection}`; + if (lastSegment === 'consumer') { + subSubSection = 'solutions'; + tagName = `${lang}:${subSection}:solutions`; + } - const urlPath = window.location.pathname; - const allSegments = urlPath.split('/'); - const lastSegment = allSegments[allSegments.length - 1].replace('-', ' '); - let siteSubSection = urlPath.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; - const tagName = `${lang}:${siteSubSection}:product:${lastSegment}`; pushToDataLayer('page load started', { pageInstanceID: environment, page: { info: { - name: tagName, // e.g. au:consumer:product:internet security + name: tagName, section: country, - subSection: siteSubSection, - subSubSection: 'product', - subSubSubSection: lastSegment, - destinationURL: window.location.href, - queryString: window.location.search, + subSection, + subSubSection, + subSubSubSection, + destinationURL: href, + queryString: search, referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', - serverName: 'hlx.live', // indicator for AEM Success Edge + serverName: domain, language: lang, sysEnv: getOperatingSystem(window.navigator.userAgent), ...(experimentDetails && { experimentDetails }), From 8453a2b6fb270690f58d40f421f7bbcd3ab96346 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:17:52 +0300 Subject: [PATCH 1197/1296] lint fixes --- .../product-comparison-table.js | 13 +- _src/blocks/products/products.js | 1 + _src/scripts/analytics.js | 1 + _src/scripts/scripts.js | 158 +++++++++++------- 4 files changed, 99 insertions(+), 74 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index e7f46978e..cef6f63a2 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -38,7 +38,6 @@ function customRound(value) { */ function toModel(productCode, variantId, v) { const currentDomain = getDomain(); - const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { productId: v.product_id, productCode, @@ -53,15 +52,9 @@ function toModel(productCode, variantId, v) { actualPrice: v.discount ? +v.discount.discounted_price : +v.price, monthlyBasePrice: customRound(v.price / 12), discountedPrice: v.discount?.discounted_price, - discountedMonthlyPrice: v.discount - ? customRound(v.discount.discounted_price / 12) - : 0, - discount: v.discount - ? customRound((v.price - v.discount.discounted_price) * 100) / 100 - : 0, - discountRate: v.discount - ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) - : 0, + discountedMonthlyPrice: v.discount ? customRound(v.discount.discounted_price / 12) : 0, + discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, + discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency_iso: v.currency_iso, currency: v.currency_label, url: generateProductBuyLink(v, productCode), diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 4d96d99d8..8bb89b97f 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -48,6 +48,7 @@ function toModel(productCode, variantId, v) { const currentDomain = getDomain(); const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { + productId: v.product_id, productCode, variantId, regionId: v.region_id, diff --git a/_src/scripts/analytics.js b/_src/scripts/analytics.js index f72b30a40..3381c9ca3 100644 --- a/_src/scripts/analytics.js +++ b/_src/scripts/analytics.js @@ -25,6 +25,7 @@ export async function updateUserConsentStatus(isConsentGiven) { return alloy('setConsent', consentObject); } +/* eslint-disable-next-line no-unused-vars */ export async function loadAnalytics(targetDocument, datastreamConfig) { import('../vendor/adobe/adobe-client-data-layer.min.js'); diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c4ae4002a..8eab89eae 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -275,7 +275,7 @@ export function pushProductsToDataLayer() { basePrice, discount, discountRate, - currency_iso, + currencyIso, actualPrice, } = product; @@ -286,37 +286,36 @@ export function pushProductsToDataLayer() { devices, subscription, version, - basePrice: basePrice, + basePrice, discountValue: discount, discountRate, - currency: currency_iso, + currency: currencyIso, priceWithTax: actualPrice, - }).filter(([_, value]) => value !== undefined) + }).filter(([_, value]) => value !== undefined), ); }); - let productAlreadyLoaded = adobeDataLayer.some(item => item.event === 'product loaded'); + const productAlreadyLoaded = adobeDataLayer?.some((item) => item.event === 'product loaded'); // if product loaded already exists we only add comparison array if e have it in the page if (productAlreadyLoaded) { - adobeDataLayer.forEach(item => { + adobeDataLayer?.forEach((item) => { if (item.event === 'product loaded') { - // Ensure item.product exists and has the expected structure - if (key === 'all' && item.product && item.product.info) { - item.product = { - ...item.product, - all: item.product.info - }; - delete item.product.info; - } + // Ensure item.product exists and has the expected structure + if (key === 'all' && item.product && item.product.info) { + item.product = { + ...item.product, + all: item.product.info, + }; + delete item.product.info; + } - // check if TRACKED_PRODUCTS_COMPARISON has items and add it to the event - if (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length && item.product) { - item.product.comparison = TRACKED_PRODUCTS_COMPARISON; - } + // check if TRACKED_PRODUCTS_COMPARISON has items and add it to the event + if (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length && item.product) { + item.product.comparison = TRACKED_PRODUCTS_COMPARISON; + } } - }); - + }); } else { if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); @@ -331,8 +330,6 @@ export function pushProductsToDataLayer() { pushToDataLayer('product loaded', dataLayerProduct); } - - console.log('adobeDataLayer', adobeDataLayer); } export function pushTrialDownloadToDataLayer() { @@ -612,9 +609,9 @@ function getExperimentDetails() { function pushPageLoadToDataLayer(targetExperimentDetails) { const { hostname, pathname, href, search } = window.location; -if (!hostname || !pathname) { - return; -} + if (!hostname) { + return; + } const experimentDetails = targetExperimentDetails ?? getExperimentDetails(); // eslint-disable-next-line no-console @@ -623,47 +620,80 @@ if (!hostname || !pathname) { const { domain, domainPartsCount } = getDomainInfo(hostname); const [lang, country] = pathname.split('/')[1].split('-'); const environment = getEnvironment(hostname, country); - const allSegments = pathname.split('/').filter(segment => segment !== ''); - const lastSegment = allSegments[allSegments.length - 1]; - const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); - const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; - - let subSubSection = 'product'; - let tagName = `${lang}:${subSection}:product:${subSubSubSection}`; - if (lastSegment === 'consumer') { - subSubSection = 'solutions'; - tagName = `${lang}:${subSection}:solutions`; - } - - - pushToDataLayer('page load started', { - pageInstanceID: environment, - page: { - info: { - name: tagName, - section: country, - subSection, - subSubSection, - subSubSubSection, - destinationURL: href, - queryString: search, - referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', - serverName: domain, - language: lang, - sysEnv: getOperatingSystem(window.navigator.userAgent), - ...(experimentDetails && { experimentDetails }), + const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); + + if (tags.length) { + pushToDataLayer('page load started', { + pageInstanceID: environment, + page: { + info: { + name: [languageCountry.country, ...tags].join(':'), // e.g. au:consumer:product:internet security + section: languageCountry.country || '', + subSection: tags[0] || '', + subSubSection: tags[1] || '', + subSubSubSection: tags[2] || '', + destinationURL: window.location.href, + queryString: window.location.search, + referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', + serverName: 'hlx.live', // indicator for AEM Success Edge + language: navigator.language || navigator.userLanguage || languageCountry.language, + sysEnv: getOperatingSystem(window.navigator.userAgent), + ...(experimentDetails && { experimentDetails }), + }, + attributes: { + promotionID: getParamValue('pid') || '', + internalPromotionID: getParamValue('icid') || '', + trackingID: getParamValue('cid') || '', + time: getCurrentTime(), + date: getCurrentDate(), + domain, + domainPeriod: domainPartsCount, + }, }, - attributes: { - promotionID: getParamValue('pid') || '', - internalPromotionID: getParamValue('icid') || '', - trackingID: getParamValue('cid') || '', - time: getCurrentTime(), - date: getCurrentDate(), - domain, - domainPeriod: domainPartsCount, + }); + } else { + const allSegments = pathname.split('/').filter(segment => segment !== ''); + const lastSegment = allSegments[allSegments.length - 1]; + const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); + const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; + + let subSubSection = 'product'; + let tagName = `${lang}:${subSection}:product:${subSubSubSection}`; + if (lastSegment === 'consumer') { + subSubSection = 'solutions'; + tagName = `${lang}:${subSection}:solutions`; + } + + pushToDataLayer('page load started', { + pageInstanceID: environment, + page: { + info: { + name: tagName, + section: country, + subSection, + subSubSection, + subSubSubSection, + destinationURL: href, + queryString: search, + referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', + serverName: domain, + language: lang, + sysEnv: getOperatingSystem(window.navigator.userAgent), + ...(experimentDetails && { experimentDetails }), + }, + attributes: { + promotionID: getParamValue('pid') || '', + internalPromotionID: getParamValue('icid') || '', + trackingID: getParamValue('cid') || '', + time: getCurrentTime(), + date: getCurrentDate(), + domain, + domainPeriod: domainPartsCount, + }, }, - }, - }); + }); + } + } /** From 1d5b9155df3fe7f72a45df7515b2669c1c4dc39a Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:28:21 +0300 Subject: [PATCH 1198/1296] update --- .../blocks/product-comparison-table/product-comparison-table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index cef6f63a2..b6fb5c317 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -37,7 +37,6 @@ function customRound(value) { * @returns a model */ function toModel(productCode, variantId, v) { - const currentDomain = getDomain(); return { productId: v.product_id, productCode, @@ -54,6 +53,7 @@ function toModel(productCode, variantId, v) { discountedPrice: v.discount?.discounted_price, discountedMonthlyPrice: v.discount ? customRound(v.discount.discounted_price / 12) : 0, discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, + // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency_iso: v.currency_iso, currency: v.currency_label, From 5e70688efbcef6e5f37bffb5c0a317b8d9dcf328 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:30:18 +0300 Subject: [PATCH 1199/1296] update --- .../blocks/product-comparison-table/product-comparison-table.js | 2 +- _src/scripts/scripts.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index b6fb5c317..c15a49f51 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -53,7 +53,7 @@ function toModel(productCode, variantId, v) { discountedPrice: v.discount?.discounted_price, discountedMonthlyPrice: v.discount ? customRound(v.discount.discounted_price / 12) : 0, discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, - // eslint-disable-next-line max-len + // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency_iso: v.currency_iso, currency: v.currency_label, diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 8eab89eae..02f25297f 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -250,9 +250,11 @@ export function trackProduct(product, location = '') { // eslint-disable-next-line max-len if (!product && product.length === 0) return; if (location && location === 'comparison') { + // eslint-disable-next-line max-len const isDuplicate = TRACKED_PRODUCTS_COMPARISON.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); if (!isDuplicate) TRACKED_PRODUCTS_COMPARISON.push(product); } else { + // eslint-disable-next-line max-len const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); if (!isDuplicate) TRACKED_PRODUCTS.push(product); } From 639e776e65528aa3a8a6507fa9d69d9e86e59c51 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:35:04 +0300 Subject: [PATCH 1200/1296] update --- _src/scripts/scripts.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 02f25297f..d26d7a3d6 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -250,11 +250,11 @@ export function trackProduct(product, location = '') { // eslint-disable-next-line max-len if (!product && product.length === 0) return; if (location && location === 'comparison') { - // eslint-disable-next-line max-len + // eslint-disable-next-line max-len const isDuplicate = TRACKED_PRODUCTS_COMPARISON.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); if (!isDuplicate) TRACKED_PRODUCTS_COMPARISON.push(product); } else { - // eslint-disable-next-line max-len + // eslint-disable-next-line max-len const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); if (!isDuplicate) TRACKED_PRODUCTS.push(product); } @@ -265,7 +265,7 @@ export function pushProductsToDataLayer() { const isHomepageSolutions = url.split('/').filter(Boolean).pop(); const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; - const mapProductData = (products) => + const mapProductData = (products) => { products.map((product) => { const { platformProductId, @@ -293,9 +293,10 @@ export function pushProductsToDataLayer() { discountRate, currency: currencyIso, priceWithTax: actualPrice, - }).filter(([_, value]) => value !== undefined), + }).filter(([, value]) => value !== undefined), ); }); + } const productAlreadyLoaded = adobeDataLayer?.some((item) => item.event === 'product loaded'); From 666c86ad7825346f6c07b8bcd03a70f85705019f Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:37:03 +0300 Subject: [PATCH 1201/1296] fix lint --- _src/scripts/scripts.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d26d7a3d6..01a156057 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -621,11 +621,12 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); const { domain, domainPartsCount } = getDomainInfo(hostname); - const [lang, country] = pathname.split('/')[1].split('-'); const environment = getEnvironment(hostname, country); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); if (tags.length) { + const languageCountry = getLanguageCountryFromPath(window.location.pathname); + pushToDataLayer('page load started', { pageInstanceID: environment, page: { @@ -655,6 +656,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { }, }); } else { + const [lang, country] = pathname.split('/')[1].split('-'); const allSegments = pathname.split('/').filter(segment => segment !== ''); const lastSegment = allSegments[allSegments.length - 1]; const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); From 5fa0b84c147df22eb967ead8e2f0eb590293417c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:39:28 +0300 Subject: [PATCH 1202/1296] fix: lint --- _src/scripts/scripts.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 01a156057..b199f439e 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -296,13 +296,13 @@ export function pushProductsToDataLayer() { }).filter(([, value]) => value !== undefined), ); }); - } + }; - const productAlreadyLoaded = adobeDataLayer?.some((item) => item.event === 'product loaded'); + const productAlreadyLoaded = adobeDataLayer.some((item) => item.event === 'product loaded'); // if product loaded already exists we only add comparison array if e have it in the page if (productAlreadyLoaded) { - adobeDataLayer?.forEach((item) => { + adobeDataLayer.forEach((item) => { if (item.event === 'product loaded') { // Ensure item.product exists and has the expected structure if (key === 'all' && item.product && item.product.info) { @@ -327,6 +327,7 @@ export function pushProductsToDataLayer() { const dataLayerProduct = { product: { [key]: mapProductData(TRACKED_PRODUCTS), + // eslint-disable-next-line max-len ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), }, }; @@ -337,6 +338,7 @@ export function pushProductsToDataLayer() { export function pushTrialDownloadToDataLayer() { const getTrialID = () => ( + // eslint-disable-next-line max-len ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) || getMetadata('breadcrumb-title') || getMetadata('og:title') From 96cad371026ce3c9abb56df6d0f77af84cb6fb3f Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:41:22 +0300 Subject: [PATCH 1203/1296] fix lint --- _src/scripts/scripts.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index b199f439e..b170e5629 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -350,7 +350,9 @@ export function pushTrialDownloadToDataLayer() { const downloadType2 = currentPage === 'thank-you' ? 'downloaded' : 'trial'; const pushTrialData = () => { - const dataLayerDownload = { product: {[downloadType2]: [{ ID: getTrialID() }] } }; + const dataLayerDownload = { + product: {[downloadType2]: [{ ID: getTrialID() }] } + }; pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); }; @@ -613,7 +615,12 @@ function getExperimentDetails() { } function pushPageLoadToDataLayer(targetExperimentDetails) { - const { hostname, pathname, href, search } = window.location; + const { + hostname, + pathname, + href, + search + } = window.location; if (!hostname) { return; } From 0a6bb2f08c8ee70cf32f771fa34bab3b58cc27e6 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:45:02 +0300 Subject: [PATCH 1204/1296] fix lint --- _src/scripts/scripts.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index b170e5629..357583b43 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -351,7 +351,9 @@ export function pushTrialDownloadToDataLayer() { const pushTrialData = () => { const dataLayerDownload = { - product: {[downloadType2]: [{ ID: getTrialID() }] } + product: { + [downloadType2]: [{ ID: getTrialID() }] , + } }; pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); }; @@ -619,8 +621,9 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { hostname, pathname, href, - search + search, } = window.location; + if (!hostname) { return; } @@ -630,7 +633,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); const { domain, domainPartsCount } = getDomainInfo(hostname); - const environment = getEnvironment(hostname, country); + const environment = getEnvironment(hostname, languageCountry.country); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); if (tags.length) { @@ -666,7 +669,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { }); } else { const [lang, country] = pathname.split('/')[1].split('-'); - const allSegments = pathname.split('/').filter(segment => segment !== ''); + const allSegments = pathname.split('/').filter((segment) => segment !== ''); const lastSegment = allSegments[allSegments.length - 1]; const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; @@ -707,7 +710,6 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { }, }); } - } /** From 3f2ce5caca5e93f528e413ee18a048b33b9157ee Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:48:13 +0300 Subject: [PATCH 1205/1296] fix lint --- _src/scripts/scripts.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 357583b43..8545c9b30 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -298,6 +298,7 @@ export function pushProductsToDataLayer() { }); }; + const adobeDataLayer = window.adobeDataLayer || []; const productAlreadyLoaded = adobeDataLayer.some((item) => item.event === 'product loaded'); // if product loaded already exists we only add comparison array if e have it in the page @@ -352,8 +353,8 @@ export function pushTrialDownloadToDataLayer() { const pushTrialData = () => { const dataLayerDownload = { product: { - [downloadType2]: [{ ID: getTrialID() }] , - } + [downloadType2]: [{ ID: getTrialID() }], + }, }; pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); }; @@ -633,12 +634,11 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); const { domain, domainPartsCount } = getDomainInfo(hostname); + const languageCountry = getLanguageCountryFromPath(window.location.pathname); const environment = getEnvironment(hostname, languageCountry.country); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); if (tags.length) { - const languageCountry = getLanguageCountryFromPath(window.location.pathname); - pushToDataLayer('page load started', { pageInstanceID: environment, page: { From 2f1cc3985285b25997723f9cec9c349bc020041e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 11:59:14 +0300 Subject: [PATCH 1206/1296] fix: name - page loaded event --- _src/scripts/scripts.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 8545c9b30..51decb246 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -635,6 +635,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const { domain, domainPartsCount } = getDomainInfo(hostname); const languageCountry = getLanguageCountryFromPath(window.location.pathname); + console.log('languageCountry ', languageCountry) const environment = getEnvironment(hostname, languageCountry.country); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); @@ -643,7 +644,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { pageInstanceID: environment, page: { info: { - name: [languageCountry.country, ...tags].join(':'), // e.g. au:consumer:product:internet security + name: [`${languageCountry.language}-${languageCountry.country}`, ...tags].join(':'), // e.g. au:consumer:product:internet security section: languageCountry.country || '', subSection: tags[0] || '', subSubSection: tags[1] || '', From 0245fed1c5edddf1237cc23539109d3ffc9f4666 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 12:00:28 +0300 Subject: [PATCH 1207/1296] fix: remove console.log --- _src/scripts/scripts.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 51decb246..979044c9c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -635,7 +635,6 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const { domain, domainPartsCount } = getDomainInfo(hostname); const languageCountry = getLanguageCountryFromPath(window.location.pathname); - console.log('languageCountry ', languageCountry) const environment = getEnvironment(hostname, languageCountry.country); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); From 03472813d914045e09c1060d882af4b755555915 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 12:07:00 +0300 Subject: [PATCH 1208/1296] update --- _src/scripts/scripts.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 979044c9c..5090819d6 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -636,6 +636,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const { domain, domainPartsCount } = getDomainInfo(hostname); const languageCountry = getLanguageCountryFromPath(window.location.pathname); const environment = getEnvironment(hostname, languageCountry.country); + const [lang, country] = pathname.split('/')[1].split('-'); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); if (tags.length) { @@ -643,7 +644,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { pageInstanceID: environment, page: { info: { - name: [`${languageCountry.language}-${languageCountry.country}`, ...tags].join(':'), // e.g. au:consumer:product:internet security + name: [`${lang}-${country}`, ...tags].join(':'), // e.g. au:consumer:product:internet security section: languageCountry.country || '', subSection: tags[0] || '', subSubSection: tags[1] || '', @@ -668,7 +669,6 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { }, }); } else { - const [lang, country] = pathname.split('/')[1].split('-'); const allSegments = pathname.split('/').filter((segment) => segment !== ''); const lastSegment = allSegments[allSegments.length - 1]; const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); From 988baeea08aee313d0df5701eaf72703a6ddbad0 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 12:15:58 +0300 Subject: [PATCH 1209/1296] adding locale --- _src/scripts/scripts.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 5090819d6..2d5d6c6bd 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -633,18 +633,23 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { // eslint-disable-next-line no-console console.debug(`Experiment details: ${JSON.stringify(experimentDetails)}`); + const pathName = window.location.pathname; const { domain, domainPartsCount } = getDomainInfo(hostname); - const languageCountry = getLanguageCountryFromPath(window.location.pathname); + const languageCountry = getLanguageCountryFromPath(pathName); const environment = getEnvironment(hostname, languageCountry.country); const [lang, country] = pathname.split('/')[1].split('-'); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); + // get locale + const regex = /([a-z]{2}-[a-z]{2})/i; + const locale = pathName.match(regex); + if (tags.length) { pushToDataLayer('page load started', { pageInstanceID: environment, page: { info: { - name: [`${lang}-${country}`, ...tags].join(':'), // e.g. au:consumer:product:internet security + name: [locale[0], ...tags].join(':'), // e.g. au:consumer:product:internet security section: languageCountry.country || '', subSection: tags[0] || '', subSubSection: tags[1] || '', @@ -675,10 +680,10 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; let subSubSection = 'product'; - let tagName = `${lang}:${subSection}:product:${subSubSubSection}`; + let tagName = `${locale[0]}:product:${subSubSubSection}`; if (lastSegment === 'consumer') { subSubSection = 'solutions'; - tagName = `${lang}:${subSection}:solutions`; + tagName = `${locale[0]}:solutions`; } pushToDataLayer('page load started', { From 4b5e0f3cbc9875b22d1fa91f73de1db4a128cc15 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 12:20:20 +0300 Subject: [PATCH 1210/1296] update --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 2d5d6c6bd..b79c06b03 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -683,7 +683,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { let tagName = `${locale[0]}:product:${subSubSubSection}`; if (lastSegment === 'consumer') { subSubSection = 'solutions'; - tagName = `${locale[0]}:solutions`; + tagName = `${locale[0]}:consumer:solutions`; } pushToDataLayer('page load started', { From dc2953c41c98ce797592e46dd928ae10739defea Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 12:23:10 +0300 Subject: [PATCH 1211/1296] fix locale --- _src/scripts/scripts.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index b79c06b03..68c95b2ae 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -642,14 +642,14 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { // get locale const regex = /([a-z]{2}-[a-z]{2})/i; - const locale = pathName.match(regex); + const locale = pathName.match(regex)[0]; if (tags.length) { pushToDataLayer('page load started', { pageInstanceID: environment, page: { info: { - name: [locale[0], ...tags].join(':'), // e.g. au:consumer:product:internet security + name: [locale, ...tags].join(':'), // e.g. au:consumer:product:internet security section: languageCountry.country || '', subSection: tags[0] || '', subSubSection: tags[1] || '', @@ -680,10 +680,10 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; let subSubSection = 'product'; - let tagName = `${locale[0]}:product:${subSubSubSection}`; + let tagName = `${locale}:product:${subSubSubSection}`; if (lastSegment === 'consumer') { subSubSection = 'solutions'; - tagName = `${locale[0]}:consumer:solutions`; + tagName = `${locale}:consumer:solutions`; } pushToDataLayer('page load started', { From d1939e39b12c06c16f8d7c04631000f9d65fa535 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 12:51:18 +0300 Subject: [PATCH 1212/1296] updates --- .../product-comparison-table/product-comparison-table.js | 3 +-- _src/blocks/products/products.js | 3 +-- _src/scripts/delayed.js | 7 ------- _src/scripts/scripts.js | 8 ++++++-- 4 files changed, 8 insertions(+), 13 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index c15a49f51..1a4fdafc5 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -45,7 +45,7 @@ function toModel(productCode, variantId, v) { platformProductId: v.platform_product_id, devices: +v.variation.dimension_value, subscription: v.variation.years * 12, - version: v.variation.years ? 'yearly' : 'monthly', + version: v.variation.years ? '12' : '1', basePrice: +v.price, // eslint-disable-next-line max-len actualPrice: v.discount ? +v.discount.discounted_price : +v.price, @@ -56,7 +56,6 @@ function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency_iso: v.currency_iso, - currency: v.currency_label, url: generateProductBuyLink(v, productCode), }; } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 8bb89b97f..b69a18c36 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -55,7 +55,7 @@ function toModel(productCode, variantId, v) { platformProductId: v.platform_product_id, devices: +v.variation.dimension_value, subscription: v.variation.years * 12, - version: v.variation.years ? 'yearly' : 'monthly', + version: v.variation.years ? '12' : '1', basePrice: +v.price, // eslint-disable-next-line max-len actualPrice: v.discount ? +v.discount.discounted_price : +v.price, @@ -71,7 +71,6 @@ function toModel(productCode, variantId, v) { ? Math.round(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currency_iso: v.currency_iso, - currency: v.currency_label, url: generateProductBuyLink(v, productCode), test: {}, }; diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index c6dc95538..9daf7c385 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -9,9 +9,6 @@ import { // eslint-disable-next-line import/no-cycle import { getLanguageCountryFromPath, - pushProductsToDataLayer, - pushTrialDownloadToDataLayer, - pushToDataLayer, getEnvironment, openUrlForOs, } from './scripts.js'; @@ -41,10 +38,6 @@ const { launchProdScript, launchStageScript, launchDevScript } = await fetchPlac window.ADOBE_MC_EVENT_LOADED = true; })(); -pushProductsToDataLayer(); -pushTrialDownloadToDataLayer(); -pushToDataLayer('page loaded'); - // Load breadcrumbs loadBreadcrumbs(); diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 68c95b2ae..cc71565eb 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -650,7 +650,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { page: { info: { name: [locale, ...tags].join(':'), // e.g. au:consumer:product:internet security - section: languageCountry.country || '', + section: locale, subSection: tags[0] || '', subSubSection: tags[1] || '', subSubSubSection: tags[2] || '', @@ -691,7 +691,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { page: { info: { name: tagName, - section: country, + section: locale, subSection, subSubSection, subSubSubSection, @@ -930,6 +930,10 @@ async function loadPage() { adobeMcAppendVisitorId('main'); + pushProductsToDataLayer(); + pushTrialDownloadToDataLayer(); + pushToDataLayer('page loaded'); + loadDelayed(); await setupAnalytics; } From db1fcb39d30c3b877ac14db4dcb6a3bc088dcea9 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 13:41:30 +0300 Subject: [PATCH 1213/1296] update adding product name --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- .../product-comparison-table/product-comparison-table.js | 1 + _src/blocks/products/products.js | 1 + _src/scripts/scripts.js | 9 ++++----- _src/scripts/utils/utils.js | 1 + 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 05ca1f672..005a3b8b3 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -96,7 +96,7 @@ async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid let adobeDataLayerProduct = { ID: product.platform_product_id, - name: prodName.trim(), + name: product.product_name, devices: product.variation.dimension_value, subscription: prodVersion, version: prodVersion, diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 1a4fdafc5..2d26ce4d9 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -39,6 +39,7 @@ function customRound(value) { function toModel(productCode, variantId, v) { return { productId: v.product_id, + productName: v.product_name, productCode, variantId, regionId: v.region_id, diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index b69a18c36..6b5d3ea4d 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -49,6 +49,7 @@ function toModel(productCode, variantId, v) { const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { productId: v.product_id, + productName: v.product_name, productCode, variantId, regionId: v.region_id, diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index cc71565eb..dd1cd2d6a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -270,7 +270,7 @@ export function pushProductsToDataLayer() { const { platformProductId, productId, - productCode, + productName, devices, subscription, version, @@ -284,7 +284,7 @@ export function pushProductsToDataLayer() { return Object.fromEntries( Object.entries({ ID: platformProductId || productId, - name: platformProductId ? productCode : undefined, + name: productName, devices, subscription, version, @@ -637,7 +637,6 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const { domain, domainPartsCount } = getDomainInfo(hostname); const languageCountry = getLanguageCountryFromPath(pathName); const environment = getEnvironment(hostname, languageCountry.country); - const [lang, country] = pathname.split('/')[1].split('-'); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); // get locale @@ -658,7 +657,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { queryString: window.location.search, referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', serverName: 'hlx.live', // indicator for AEM Success Edge - language: navigator.language || navigator.userLanguage || languageCountry.language, + language: locale, sysEnv: getOperatingSystem(window.navigator.userAgent), ...(experimentDetails && { experimentDetails }), }, @@ -699,7 +698,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { queryString: search, referringURL: getParamValue('adobe_mc_ref') || getParamValue('ref') || document.referrer || '', serverName: domain, - language: lang, + language: locale, sysEnv: getOperatingSystem(window.navigator.userAgent), ...(experimentDetails && { experimentDetails }), }, diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 88a589c9f..48a7a99dd 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -185,6 +185,7 @@ async function findProductVariant(cachedResponse, variant) { // eslint-disable-next-line guard-for-in,no-restricted-syntax for (const j in json.data.product.variations[i]) { const v = json.data.product.variations[i][j]; + v.product_name = json.data.product.product_name; if (v.variation.variation_name === variant) { return v; } From 26ea58b7b678e9d8aaa45e7d1428581cead63361 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 13:44:07 +0300 Subject: [PATCH 1214/1296] changing datalayer location --- _src/scripts/scripts.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index dd1cd2d6a..f865a7d8c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -733,6 +733,9 @@ async function loadEager(doc) { } pushPageLoadToDataLayer(targetExperimentDetails); + pushProductsToDataLayer(); + pushTrialDownloadToDataLayer(); + pushToDataLayer('page loaded'); const templateMetadata = getMetadata('template'); const hasTemplate = getMetadata('template') !== ''; @@ -929,10 +932,6 @@ async function loadPage() { adobeMcAppendVisitorId('main'); - pushProductsToDataLayer(); - pushTrialDownloadToDataLayer(); - pushToDataLayer('page loaded'); - loadDelayed(); await setupAnalytics; } From cc7b71172c017492c67f005fc5eb8b09608191c0 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Tue, 1 Oct 2024 13:48:21 +0300 Subject: [PATCH 1215/1296] fix --- _src/blocks/columns/columns.css | 52 +++++++++++++++++++++++++++---- _src/blocks/products/products.css | 1 - _src/styles/styles.css | 37 ---------------------- 3 files changed, 46 insertions(+), 44 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 9fc2bf8d2..0e6976496 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -406,7 +406,7 @@ background-color: transparent; border: 2px solid black; color: black; - white-space: normal; + white-space: normal; } .columns-container.chat-options p.button-container a:hover { @@ -459,6 +459,49 @@ padding-left: 4em; padding-right: 1em; } + +.section.baby-blue-bck .columns-wrapper { + background-color: #E4F2FF; +} + +.section.grey-bck .columns-wrapper { + background-color: #F5F5F7; +} + +.section.radius-corners .columns-wrapper { + border-radius: 1rem; + overflow: hidden; +} + +.section.radius-corners-10px .columns-wrapper { + border-radius: 10px; + overflow: hidden; +} + +.section.pl-0 .columns-wrapper { + padding-left: 0; +} + +.section.pr-0 .columns-wrapper { + padding-right: 0; +} + +.columns.new-v2 > div > .columns-img-col { + margin-bottom: 1em; +} + +.section.radius-corners .columns-wrapper .columns-img-col { + border-radius: 1rem; + overflow: hidden; + margin-bottom: 0; +} + +.section.radius-corners-10px .columns-wrapper .columns-img-col, +.section.radius-corners-10px .columns-wrapper .columns-img-col img { + margin-bottom: 0; + border-radius: 0; +} + @media (min-width: 991px) { .columns.benefits > div { flex-direction: unset; @@ -656,6 +699,7 @@ padding-left: 20px; padding-right: 20px; } + .percent-table .columns table tr td:first-of-type { padding-right: 1.5em; } @@ -1015,10 +1059,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { transform: translateX(5px); } -.columns.new-v2 > div > .columns-img-col { - margin-bottom: 1em; -} - .columns.carousel > div.carousel-buttons { justify-content: center; } @@ -1164,4 +1204,4 @@ main .section.two-columns .right-col .products.plans a.button:any-link { box-sizing: border-box; margin: 0; } -} \ No newline at end of file +} diff --git a/_src/blocks/products/products.css b/_src/blocks/products/products.css index 0d715d3db..2a6d71ad5 100644 --- a/_src/blocks/products/products.css +++ b/_src/blocks/products/products.css @@ -518,7 +518,6 @@ background-color: #2cb43d; border-top-left-radius: 8px; border-top-right-radius: 8px; - font-size: var(--body-font-size-m); font-weight: var(--font-weight-bolder); color: #fff; letter-spacing: .96px; diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 740bab9dd..c34aba38b 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -459,43 +459,6 @@ main .section.gap-2em table tr { gap: 2em; } -main .section.baby-blue-bck .columns-wrapper { - background-color: #E4F2FF; -} - -main .section.grey-bck .columns-wrapper { - background-color: #F5F5F7; -} - -main .section.radius-corners .columns-wrapper { - border-radius: 1rem; - overflow: hidden; -} - -main .section.radius-corners-10px .columns-wrapper { - border-radius: 10px; - overflow: hidden; -} - -main .section.pl-0 .columns-wrapper { - padding-left: 0; -} - -main .section.pr-0 .columns-wrapper { - padding-right: 0; -} - -main .section.radius-corners .columns-wrapper .columns-img-col { - border-radius: 1rem; - overflow: hidden; - margin-bottom: 0; -} - -main .section.radius-corners-10px .columns-wrapper .columns-img-col, main .section.radius-corners-10px .columns-wrapper .columns-img-col img { - margin-bottom: 0; - border-radius: 0; -} - main .section.migration .carousel img { height: 56px!important; } From 6acbef46560a8f673e1896159d37a77eadda9d01 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 1 Oct 2024 14:29:48 +0300 Subject: [PATCH 1216/1296] fix: buy links based on locale --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +- _src/scripts/utils/utils.js | 59 ++++++++++---------- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 11b3adbfa..5aca61eba 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -3,6 +3,7 @@ /* eslint-disable max-len */ import { getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, + getPriceLocalMapByLocale, } from '../../scripts/utils/utils.js'; let dataLayerProducts = []; @@ -60,7 +61,8 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n buyLinkPid = ''; } - let buyLinkHref = new URL(`${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/`); + const forceCountry = getPriceLocalMapByLocale().country_code; + let buyLinkHref = new URL(`${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/?force_country=${forceCountry}`); if (buyLinkPid) { buyLinkHref.searchParams.append('pid', buyLinkPid); } diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 3d6d47d72..46d491418 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -70,38 +70,38 @@ export const IANA_BY_REGION_MAP = new Map([ const PRICE_LOCALE_MAP = new Map([ ['en-us', { force_country: 'en', country_code: 'us' }], - ['en-bg', { force_country: 'en', country_code: 'bg' }], - ['en-ca', { force_country: 'en', country_code: 'ca' }], - ['en-cl', { force_country: 'en', country_code: 'cl' }], - ['en-dk', { force_country: 'en', country_code: 'dk' }], - ['en-hu', { force_country: 'en', country_code: 'hu' }], - ['en-id', { force_country: 'en', country_code: 'id' }], - ['en-il', { force_country: 'en', country_code: 'il' }], - ['en-in', { force_country: 'en', country_code: 'in' }], - ['en-kr', { force_country: 'en', country_code: 'kr' }], - ['en-my', { force_country: 'en', country_code: 'my' }], - ['en-no', { force_country: 'en', country_code: 'no' }], - ['en-ph', { force_country: 'en', country_code: 'ph' }], - ['en-pl', { force_country: 'en', country_code: 'pl' }], - ['en-sa', { force_country: 'en', country_code: 'sa' }], - ['en-th', { force_country: 'en', country_code: 'th' }], - ['en-za', { force_country: 'en', country_code: 'za' }], - ['en-ae', { force_country: 'en', country_code: 'ae' }], - ['en-sg', { force_country: 'en', country_code: 'sg' }], - ['en-sd', { force_country: 'en', country_code: 'sd' }], - ['en-mt', { force_country: 'en', country_code: 'mt' }], - ['en-lv', { force_country: 'en', country_code: 'lv' }], - ['en-jm', { force_country: 'en', country_code: 'jm' }], - ['en-bz', { force_country: 'en', country_code: 'bz' }], + ['en-bg', { force_country: 'bg', country_code: 'bg' }], + ['en-ca', { force_country: 'ca', country_code: 'ca' }], + ['en-cl', { force_country: 'cl', country_code: 'cl' }], + ['en-dk', { force_country: 'dk', country_code: 'dk' }], + ['en-hu', { force_country: 'hu', country_code: 'hu' }], + ['en-id', { force_country: 'id', country_code: 'id' }], + ['en-il', { force_country: 'il', country_code: 'il' }], + ['en-in', { force_country: 'in', country_code: 'in' }], + ['en-kr', { force_country: 'kr', country_code: 'kr' }], + ['en-my', { force_country: 'my', country_code: 'my' }], + ['en-no', { force_country: 'no', country_code: 'no' }], + ['en-ph', { force_country: 'ph', country_code: 'ph' }], + ['en-pl', { force_country: 'pl', country_code: 'pl' }], + ['en-sa', { force_country: 'sa', country_code: 'sa' }], + ['en-th', { force_country: 'th', country_code: 'th' }], + ['en-za', { force_country: 'za', country_code: 'za' }], + ['en-ae', { force_country: 'ae', country_code: 'ae' }], + ['en-sg', { force_country: 'sg', country_code: 'sg' }], + ['en-sd', { force_country: 'sd', country_code: 'sd' }], + ['en-mt', { force_country: 'mt', country_code: 'mt' }], + ['en-lv', { force_country: 'lv', country_code: 'lv' }], + ['en-jm', { force_country: 'jm', country_code: 'jm' }], + ['en-bz', { force_country: 'bz', country_code: 'bz' }], ['en-gb', { force_country: 'uk', country_code: 'gb' }], ['en-au', { force_country: 'au', country_code: 'au' }], - ['en-nz', { force_country: 'au', country_code: 'nz' }], + ['en-nz', { force_country: 'nz', country_code: 'nz' }], ['en-global', { force_country: 'en', country_code: null }], - ['es-cl', { force_country: 'en', country_code: 'cl' }], - ['es-co', { force_country: 'en', country_code: 'co' }], - ['es-mx', { force_country: 'en', country_code: 'mx' }], - ['es-pe', { force_country: 'en', country_code: 'pe' }], - ['es-bz', { force_country: 'en', country_code: 'bz' }], + ['es-cl', { force_country: 'cl', country_code: 'cl' }], + ['es-co', { force_country: 'co', country_code: 'co' }], + ['es-mx', { force_country: 'mx', country_code: 'mx' }], + ['es-pe', { force_country: 'pe', country_code: 'pe' }], + ['es-bz', { force_country: 'bz', country_code: 'bz' }], ['es-es', { force_country: 'es', country_code: 'es' }], ['es-global', { force_country: 'en', country_code: null }], ['ro-ro', { force_country: 'ro', country_code: 'ro' }], @@ -111,6 +111,7 @@ const PRICE_LOCALE_MAP = new Map([ ['nl-be', { force_country: null, country_code: null, isZuora: true }], ['nl-nl', { force_country: null, country_code: null, isZuora: true }], ['de-de', { force_country: 'de', country_code: 'de' }], + ['de-at', { force_country: 'de', country_code: 'at' }], ['sv-se', { force_country: 'se', country_code: 'se' }], ['pt-br', { force_country: 'br', country_code: 'br' }], ['pt-pt', { force_country: 'pt', country_code: 'pt' }], From 5f67f80700c969234529ba9188bf6561b2df41d9 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 15:19:13 +0300 Subject: [PATCH 1217/1296] cleaning blocks from datalayer --- _src/blocks/hero-aem/hero-aem.js | 10 -- .../new-prod-boxes-vsb/new-prod-boxes-vsb.js | 10 -- _src/blocks/new-prod-boxes/new-prod-boxes.js | 66 +++++++++-- .../product-cards-ab/product-cards-ab.js | 14 --- _src/scripts/delayed.js | 7 ++ _src/scripts/scripts.js | 103 +++++++++++------- 6 files changed, 128 insertions(+), 82 deletions(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index e402b0764..b772a6630 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -181,16 +181,6 @@ export default function decorate(block, options) { const buyLink = block.querySelector('a[href*="buylink"]'); createPricesElement(options.store, conditionText, saveText, prodName, prodUsers, prodYears, buyLink, send2datalayer) .then((pricesBox) => { - // dataLayer push with all the products - if (options && send2datalayer) { - window.adobeDataLayer.push({ - event: 'product loaded', - product: { - [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, - }, - }); - } - // If buyLink exists, apply styles and insert pricesBox if (buyLink) { buyLink.classList.add('button', 'primary'); diff --git a/_src/blocks/new-prod-boxes-vsb/new-prod-boxes-vsb.js b/_src/blocks/new-prod-boxes-vsb/new-prod-boxes-vsb.js index 4ad307986..583b1f44d 100644 --- a/_src/blocks/new-prod-boxes-vsb/new-prod-boxes-vsb.js +++ b/_src/blocks/new-prod-boxes-vsb/new-prod-boxes-vsb.js @@ -358,16 +358,6 @@ export default async function decorate(block, options) { block.parentNode.insertBefore(switchBox, block); } - // dataLayer push with all the products - if (options && dataLayerProducts.length && hideProducts !== 'true') { - window.adobeDataLayer.push({ - event: 'product loaded', - product: { - [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, - }, - }); - } - window.hj = window.hj || function initHotjar(...args) { (hj.q = hj.q || []).push(...args); }; diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 005a3b8b3..4f3cbc378 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -2,8 +2,60 @@ /* eslint-disable no-undef */ /* eslint-disable max-len */ import { - getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, + getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, } from '../../scripts/utils/utils.js'; +import { trackProduct } from '../../scripts/scripts.js'; + +/** + * Utility function to round prices and percentages + * @param value value to round + * @returns rounded value + */ +function customRound(value) { + const numValue = parseFloat(value); + + if (Number.isNaN(numValue)) { + return value; + } + + // Convert to a fixed number of decimal places then back to a number to deal with precision issues + const roundedValue = Number(numValue.toFixed(2)); + + // If it's a whole number, return it as an integer + return (roundedValue % 1 === 0) ? Math.round(roundedValue) : roundedValue; +} + +/** + * Convert a product variant returned by the remote service into a model + * @param productCode product code + * @param variantId variant identifier + * @param v variant + * @returns a model + */ +function toModel(productCode, variantId, v) { + return { + productId: v.product_id, + productName: v.product_name, + productCode, + variantId, + regionId: v.region_id, + platformProductId: v.platform_product_id, + devices: +v.variation.dimension_value, + subscription: v.variation.years * 12, + version: v.variation.years ? '12' : '1', + basePrice: +v.price, + // eslint-disable-next-line max-len + actualPrice: v.discount ? +v.discount.discounted_price : +v.price, + monthlyBasePrice: customRound(v.price / 12), + discountedPrice: v.discount?.discounted_price, + discountedMonthlyPrice: v.discount ? customRound(v.discount.discounted_price / 12) : 0, + discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, + // eslint-disable-next-line max-len + discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, + currency_iso: v.currency_iso, + url: generateProductBuyLink(v, productCode), + }; +} let dataLayerProducts = []; async function createPricesElement(storeOBJ, conditionText, saveText, prodName, prodUsers, prodYears, buylink, billed, customLink) { @@ -71,6 +123,8 @@ async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); const variant = `${prodUsers}u-${prodYears}y`; const product = await fetchProduct(prodName, variant, pid); + const m = toModel(prodName, variant, product); + trackProduct(m); const { price, discount, currency_label: currencyLabel, } = product; @@ -670,16 +724,6 @@ export default async function decorate(block, options) { }); } - if (!isInLandingPages) { - // dataLayer push with all the products - window.adobeDataLayer.push({ - event: 'product loaded', - product: { - [mainProduct === 'false' ? 'all' : 'info']: dataLayerProducts, - }, - }); - } - matchHeights(block, '.subtitle'); matchHeights(block, 'h2'); matchHeights(block, 'h4'); diff --git a/_src/blocks/product-cards-ab/product-cards-ab.js b/_src/blocks/product-cards-ab/product-cards-ab.js index efb23fee9..a538ce0e2 100644 --- a/_src/blocks/product-cards-ab/product-cards-ab.js +++ b/_src/blocks/product-cards-ab/product-cards-ab.js @@ -196,20 +196,6 @@ export default async function decorate(block, options) { element.remove(); }); - if (options) { - window.addEventListener('codeBaseFinishedRunning', () => { - window.adobeDataLayer.push({ - event: 'product loaded', - product: null, - }); - - window.adobeDataLayer.push({ - event: 'product loaded', - product: adobeDataLayerArray, - }); - }); - } - window.dispatchEvent(new CustomEvent('shadowDomLoaded'), { bubbles: true, composed: true, // This allows the event to cross the shadow DOM boundary diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index 9daf7c385..c6dc95538 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -9,6 +9,9 @@ import { // eslint-disable-next-line import/no-cycle import { getLanguageCountryFromPath, + pushProductsToDataLayer, + pushTrialDownloadToDataLayer, + pushToDataLayer, getEnvironment, openUrlForOs, } from './scripts.js'; @@ -38,6 +41,10 @@ const { launchProdScript, launchStageScript, launchDevScript } = await fetchPlac window.ADOBE_MC_EVENT_LOADED = true; })(); +pushProductsToDataLayer(); +pushTrialDownloadToDataLayer(); +pushToDataLayer('page loaded'); + // Load breadcrumbs loadBreadcrumbs(); diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index f865a7d8c..bd999ad0e 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -266,7 +266,7 @@ export function pushProductsToDataLayer() { const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; const mapProductData = (products) => { - products.map((product) => { + return products.map((product) => { const { platformProductId, productId, @@ -298,43 +298,74 @@ export function pushProductsToDataLayer() { }); }; - const adobeDataLayer = window.adobeDataLayer || []; - const productAlreadyLoaded = adobeDataLayer.some((item) => item.event === 'product loaded'); - - // if product loaded already exists we only add comparison array if e have it in the page - if (productAlreadyLoaded) { - adobeDataLayer.forEach((item) => { - if (item.event === 'product loaded') { - // Ensure item.product exists and has the expected structure - if (key === 'all' && item.product && item.product.info) { - item.product = { - ...item.product, - all: item.product.info, - }; - delete item.product.info; - } + if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { + TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); + } - // check if TRACKED_PRODUCTS_COMPARISON has items and add it to the event - if (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length && item.product) { - item.product.comparison = TRACKED_PRODUCTS_COMPARISON; - } - } - }); - } else { - if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { - TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); - } + const dataLayerProduct = { + product: { + [key]: mapProductData(TRACKED_PRODUCTS), + ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), + }, + }; - const dataLayerProduct = { - product: { - [key]: mapProductData(TRACKED_PRODUCTS), - // eslint-disable-next-line max-len - ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), - }, - }; + pushToDataLayer('product loaded', dataLayerProduct); +} + +export function pushProductsToDataLayer2() { + const url = window.location.href; + const isHomepageSolutions = url.split('/').filter(Boolean).pop(); + const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; - pushToDataLayer('product loaded', dataLayerProduct); + const mapProductData = (products) => { + products.map((product) => { + const { + platformProductId, + productId, + productName, + devices, + subscription, + version, + basePrice, + discount, + discountRate, + currencyIso, + actualPrice, + } = product; + + return Object.fromEntries( + Object.entries({ + ID: platformProductId || productId, + name: productName, + devices, + subscription, + version, + basePrice, + discountValue: discount, + discountRate, + currency: currencyIso, + priceWithTax: actualPrice, + }).filter(([, value]) => value !== undefined), + ); + }); + }; + + if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { + TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); } + + console.log('TRACKED_PRODUCTS:', TRACKED_PRODUCTS); + console.log('TRACKED_PRODUCTS_COMPARISON:', TRACKED_PRODUCTS_COMPARISON); + + const dataLayerProduct = { + product: { + [key]: mapProductData(TRACKED_PRODUCTS), + ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), + }, + }; + + pushToDataLayer('product loaded', dataLayerProduct); + console.log('dataLayerProduct:', dataLayerProduct); } export function pushTrialDownloadToDataLayer() { @@ -733,9 +764,6 @@ async function loadEager(doc) { } pushPageLoadToDataLayer(targetExperimentDetails); - pushProductsToDataLayer(); - pushTrialDownloadToDataLayer(); - pushToDataLayer('page loaded'); const templateMetadata = getMetadata('template'); const hasTemplate = getMetadata('template') !== ''; @@ -805,6 +833,7 @@ async function loadLazy(doc) { // eslint-disable-next-line no-unused-vars loadHeader(doc.querySelector('header')); } + await loadBlocks(main); const { hash } = window.location; From 6175583e69d2aaed25ec96d775f318dec40c63aa Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 1 Oct 2024 15:26:33 +0300 Subject: [PATCH 1218/1296] fix: footer logic for AEM --- _src/blocks/footer/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index 8fef6f0e0..b1ffdee7f 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -214,7 +214,7 @@ function applyFooterFactorySetup(footerMetadata, block) { // headers in AEM const regex = /\/(zh-hk|zh-tw)\//i; const matches = window.location.href.match(regex); - if (matches || window.location.hostname.includes('www.')) { + if (matches) { runDefaultFooterLogic(block); return; } From 63520291d3331c91285ecb4b9daeafdc47ebb7e8 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 15:27:04 +0300 Subject: [PATCH 1219/1296] adding getPriceLocalMapByLocale --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 9b19b6e55..734c1b3c3 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -2,9 +2,7 @@ /* eslint-disable no-undef */ /* eslint-disable max-len */ import { - getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, - getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, - getPriceLocalMapByLocale, + getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, getPriceLocalMapByLocale, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; From f79de8d80d280121dc7da14b548bb743c40adbe1 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 1 Oct 2024 15:37:14 +0300 Subject: [PATCH 1220/1296] fixed plan switcher buttons --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index be60e9f95..9e7f2f6aa 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -703,6 +703,7 @@ .plan-switcher input[type=radio] { position: absolute; opacity: 0; + width: auto; } .plan-switcher .radio-label { From 9f3a97dd25a495a39217c22166044fd4dc5c5444 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 15:38:11 +0300 Subject: [PATCH 1221/1296] updates --- _src/scripts/scripts.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index bd999ad0e..9e50a48c1 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -305,6 +305,7 @@ export function pushProductsToDataLayer() { const dataLayerProduct = { product: { [key]: mapProductData(TRACKED_PRODUCTS), + // eslint-disable-next-line max-len ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), }, }; @@ -354,18 +355,15 @@ export function pushProductsToDataLayer2() { TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); } - console.log('TRACKED_PRODUCTS:', TRACKED_PRODUCTS); - console.log('TRACKED_PRODUCTS_COMPARISON:', TRACKED_PRODUCTS_COMPARISON); - const dataLayerProduct = { product: { [key]: mapProductData(TRACKED_PRODUCTS), + // eslint-disable-next-line max-len ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), }, }; pushToDataLayer('product loaded', dataLayerProduct); - console.log('dataLayerProduct:', dataLayerProduct); } export function pushTrialDownloadToDataLayer() { From 7d43117038e6343bbd7263bca1d2e94b4a484f76 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 1 Oct 2024 15:38:58 +0300 Subject: [PATCH 1222/1296] adjusted sticky navigation button poistioning --- _src/blocks/sticky-navigation/sticky-navigation.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/sticky-navigation/sticky-navigation.css b/_src/blocks/sticky-navigation/sticky-navigation.css index 1a338b89e..12a41ad8d 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.css +++ b/_src/blocks/sticky-navigation/sticky-navigation.css @@ -26,7 +26,7 @@ main .section.sticky-navigation-container { display: none; flex-direction: column; justify-content: center; - align-items: baseline; + align-items: center; box-shadow: 0 3px 6px 0 rgb(0 0 0 / 8%); padding: 0 var(--body-padding) var(--body-padding) var(--body-padding); From 822dbf5fc5860321be09e60c707cc955e39b84be Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 15:44:24 +0300 Subject: [PATCH 1223/1296] fix lint --- _src/blocks/hero-aem/hero-aem.js | 2 +- _src/scripts/scripts.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js index b772a6630..c87c045bd 100644 --- a/_src/blocks/hero-aem/hero-aem.js +++ b/_src/blocks/hero-aem/hero-aem.js @@ -128,7 +128,7 @@ function dispatchShadowDomLoadedEvent() { export default function decorate(block, options) { const { - product, conditionText, saveText, MacOS, Windows, Android, IOS, mainProduct, + product, conditionText, saveText, MacOS, Windows, Android, IOS, alignContent, height, type, send2datalayer, } = block.closest('.section').dataset; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 9e50a48c1..6893f8204 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -265,6 +265,7 @@ export function pushProductsToDataLayer() { const isHomepageSolutions = url.split('/').filter(Boolean).pop(); const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; + // eslint-disable-next-line arrow-body-style const mapProductData = (products) => { return products.map((product) => { const { From 958ec5fdeb1aecfe49620f8d32ae540283a88dad Mon Sep 17 00:00:00 2001 From: Manuel Enache Date: Tue, 1 Oct 2024 16:21:03 +0300 Subject: [PATCH 1224/1296] Revert "fix: footer logic for AEM" --- _src/blocks/footer/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index b1ffdee7f..8fef6f0e0 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -214,7 +214,7 @@ function applyFooterFactorySetup(footerMetadata, block) { // headers in AEM const regex = /\/(zh-hk|zh-tw)\//i; const matches = window.location.href.match(regex); - if (matches) { + if (matches || window.location.hostname.includes('www.')) { runDefaultFooterLogic(block); return; } From 6a46016b14844e24f5f5acd5d4642e8a58c7568b Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 1 Oct 2024 16:41:02 +0300 Subject: [PATCH 1225/1296] feat: move analytics code out of delayed --- _src/scripts/delayed.js | 30 ------------------------------ _src/scripts/scripts.js | 23 +++++++++++++++++++++++ 2 files changed, 23 insertions(+), 30 deletions(-) diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index c6dc95538..6b6835880 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -8,43 +8,13 @@ import { // eslint-disable-next-line import/no-cycle import { - getLanguageCountryFromPath, - pushProductsToDataLayer, - pushTrialDownloadToDataLayer, - pushToDataLayer, - getEnvironment, openUrlForOs, } from './scripts.js'; import { loadBreadcrumbs } from './breadcrumbs.js'; -import { GLOBAL_EVENTS } from './utils/utils.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); -const LANGUAGE_COUNTRY = getLanguageCountryFromPath(window.location.pathname); -const LAUNCH_URL = 'https://assets.adobedtm.com'; -const ENVIRONMENT = getEnvironment(window.location.hostname, LANGUAGE_COUNTRY.country); - -// Load Adobe Experience platform data collection (Launch) script -const { launchProdScript, launchStageScript, launchDevScript } = await fetchPlaceholders(); - -(async () => { - const ADOBE_MC_URL_ENV_MAP = new Map([ - ['prod', launchProdScript], - ['stage', launchStageScript], - ]); - - const adobeMcScriptUrl = `${LAUNCH_URL}${ADOBE_MC_URL_ENV_MAP.get(ENVIRONMENT) || launchDevScript}`; - await loadScript(adobeMcScriptUrl); - - document.dispatchEvent(new Event(GLOBAL_EVENTS.ADOBE_MC_LOADED)); - window.ADOBE_MC_EVENT_LOADED = true; -})(); - -pushProductsToDataLayer(); -pushTrialDownloadToDataLayer(); -pushToDataLayer('page loaded'); - // Load breadcrumbs loadBreadcrumbs(); diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 6893f8204..d7bb007d3 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -12,6 +12,7 @@ import { loadBlocks, loadCSS, getMetadata, loadScript, + fetchPlaceholders, } from './lib-franklin.js'; import { @@ -960,6 +961,28 @@ async function loadPage() { adobeMcAppendVisitorId('main'); + const LANGUAGE_COUNTRY = getLanguageCountryFromPath(window.location.pathname); + const LAUNCH_URL = 'https://assets.adobedtm.com'; + const ENVIRONMENT = getEnvironment(window.location.hostname, LANGUAGE_COUNTRY.country); + + // Load Adobe Experience platform data collection (Launch) script + const { launchProdScript, launchStageScript, launchDevScript } = await fetchPlaceholders(); + + const ADOBE_MC_URL_ENV_MAP = new Map([ + ['prod', launchProdScript], + ['stage', launchStageScript], + ]); + + const adobeMcScriptUrl = `${LAUNCH_URL}${ADOBE_MC_URL_ENV_MAP.get(ENVIRONMENT) || launchDevScript}`; + await loadScript(adobeMcScriptUrl); + + document.dispatchEvent(new Event(GLOBAL_EVENTS.ADOBE_MC_LOADED)); + window.ADOBE_MC_EVENT_LOADED = true; + + pushProductsToDataLayer(); + pushTrialDownloadToDataLayer(); + pushToDataLayer('page loaded'); + loadDelayed(); await setupAnalytics; } From bca217e3fa2b9453326a676d8e4921d1a2ca56fb Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 1 Oct 2024 17:20:58 +0300 Subject: [PATCH 1226/1296] fix: adobe dtm was loaded twice --- _src/scripts/delayed.js | 2 -- _src/scripts/scripts.js | 26 -------------------------- 2 files changed, 28 deletions(-) diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index 6b6835880..ad124f4c6 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -1,8 +1,6 @@ // eslint-disable-next-line import/no-cycle import { - loadScript, sampleRUM, - fetchPlaceholders, getMetadata, } from './lib-franklin.js'; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d7bb007d3..45fafd7b2 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -813,8 +813,6 @@ export async function loadTrackers() { await loadScript(adobeMcScriptUrl); onAdobeMcLoaded(); - - await loadScript('https://www.googletagmanager.com/gtm.js?id=GTM-PLJJB3'); } else { onAdobeMcLoaded(); } @@ -954,37 +952,13 @@ async function loadPage() { await window.hlx.plugins.load('lazy'); await loadLazy(document); - const setupAnalytics = loadAnalytics(document, { - edgeConfigId: '7275417f-3870-465c-af3e-84f8f4670b3c', - orgId: '0E920C0F53DA9E9B0A490D45@AdobeOrg', - }); - adobeMcAppendVisitorId('main'); - const LANGUAGE_COUNTRY = getLanguageCountryFromPath(window.location.pathname); - const LAUNCH_URL = 'https://assets.adobedtm.com'; - const ENVIRONMENT = getEnvironment(window.location.hostname, LANGUAGE_COUNTRY.country); - - // Load Adobe Experience platform data collection (Launch) script - const { launchProdScript, launchStageScript, launchDevScript } = await fetchPlaceholders(); - - const ADOBE_MC_URL_ENV_MAP = new Map([ - ['prod', launchProdScript], - ['stage', launchStageScript], - ]); - - const adobeMcScriptUrl = `${LAUNCH_URL}${ADOBE_MC_URL_ENV_MAP.get(ENVIRONMENT) || launchDevScript}`; - await loadScript(adobeMcScriptUrl); - - document.dispatchEvent(new Event(GLOBAL_EVENTS.ADOBE_MC_LOADED)); - window.ADOBE_MC_EVENT_LOADED = true; - pushProductsToDataLayer(); pushTrialDownloadToDataLayer(); pushToDataLayer('page loaded'); loadDelayed(); - await setupAnalytics; } initMobileDetector('mobile'); From 3ca863c18b85636433af4ea65c0807f8e95c48ea Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 1 Oct 2024 17:27:22 +0300 Subject: [PATCH 1227/1296] clean: remove placeholders logic --- _src/scripts/lib-franklin.js | 37 ------------------------------------ _src/scripts/scripts.js | 1 - 2 files changed, 38 deletions(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 66bbc6f16..342a73169 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -325,43 +325,6 @@ export async function decorateTags(element) { replaceTagsInNode(element); } -/** - * Gets placeholders object. - * @param {string} [prefix] Location of placeholders - * @returns {object} Window placeholders object - */ -export async function fetchPlaceholders(prefix = 'default') { - window.placeholders = window.placeholders || {}; - const loaded = window.placeholders[`${prefix}-loaded`]; - if (!loaded) { - window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => { - const secondRootFolder = window.location.pathname.split('/').filter((item) => item).filter((item, idx) => idx < 2).join('/'); - fetch(`/${secondRootFolder}/placeholders.json`) - .then((resp) => { - if (resp.ok) { - return resp.json(); - } - throw new Error(`${resp.status}: ${resp.statusText}`); - }).then((json) => { - const placeholders = {}; - json.data - .filter((placeholder) => placeholder.Key) - .forEach((placeholder) => { - placeholders[toCamelCase(placeholder.Key)] = placeholder.Text; - }); - window.placeholders[prefix] = placeholders; - resolve(); - }).catch((error) => { - // error loading placeholders - window.placeholders[prefix] = {}; - reject(error); - }); - }); - } - await window.placeholders[`${prefix}-loaded`]; - return window.placeholders[prefix]; -} - /** * Decorates a block. * @param {Element} block The block element diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 45fafd7b2..ab0db66b5 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -12,7 +12,6 @@ import { loadBlocks, loadCSS, getMetadata, loadScript, - fetchPlaceholders, } from './lib-franklin.js'; import { From 3a132af389413a39272c86f800a376d6988af3a2 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Tue, 1 Oct 2024 17:30:51 +0300 Subject: [PATCH 1228/1296] fix: lint --- _src/scripts/scripts.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index ab0db66b5..d7014ec0c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -22,8 +22,6 @@ import { GLOBAL_EVENTS, } from './utils/utils.js'; -import { loadAnalytics } from './analytics.js'; - const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list const TRACKED_PRODUCTS = []; const TRACKED_PRODUCTS_COMPARISON = []; From 10596f1c891eb01a461fc4d4da541765f5acadb0 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 1 Oct 2024 17:43:25 +0300 Subject: [PATCH 1229/1296] fixed input stacking --- _src/blocks/new-prod-boxes/new-prod-boxes.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.css b/_src/blocks/new-prod-boxes/new-prod-boxes.css index 9e7f2f6aa..5e8c00979 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.css +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.css @@ -701,7 +701,8 @@ } .plan-switcher input[type=radio] { - position: absolute; + position: relative; + display: none; opacity: 0; width: auto; } From 2a83a7cba5d10062227bb6f3a0e419e7e9197190 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 17:55:56 +0300 Subject: [PATCH 1230/1296] fix: product currency --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 2 +- .../product-comparison-table.js | 2 +- _src/blocks/products/products.js | 20 +++---- _src/scripts/scripts.js | 53 ------------------- _src/scripts/utils/utils.js | 1 - 5 files changed, 10 insertions(+), 68 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 734c1b3c3..53cc6c6b2 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -52,7 +52,7 @@ function toModel(productCode, variantId, v) { discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, - currency_iso: v.currency_iso, + currencyIso: v.currency_iso, url: generateProductBuyLink(v, productCode), }; } diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 2d26ce4d9..bfb33fa3d 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -56,7 +56,7 @@ function toModel(productCode, variantId, v) { discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, - currency_iso: v.currency_iso, + currencyIso: v.currency_iso, url: generateProductBuyLink(v, productCode), }; } diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 6b5d3ea4d..75daf0410 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -62,16 +62,11 @@ function toModel(productCode, variantId, v) { actualPrice: v.discount ? +v.discount.discounted_price : +v.price, monthlyBasePrice: customRound(v.price / 12), discountedPrice: v.discount?.discounted_price, - discountedMonthlyPrice: v.discount - ? v.discount.discounted_price / 12 - : 0, - discount: formatPrice(v.discount - ? customRound((v.price - v.discount.discounted_price) * 100) / 100 - : 0, ...formattedPriceParams), - discountRate: v.discount - ? Math.round(((v.price - v.discount.discounted_price) / v.price) * 100) - : 0, - currency_iso: v.currency_iso, + discountedMonthlyPrice: v.discount ? customRound(v.discount.discounted_price / 12) : 0, + discount: v.discount ? customRound((v.price - v.discount.discounted_price) * 100) / 100 : 0, + // eslint-disable-next-line max-len + discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, + currencyIso: v.currency_iso, url: generateProductBuyLink(v, productCode), test: {}, }; @@ -190,7 +185,8 @@ function renderOldPrice(mv, text = '', monthly = '') { mv.subscribe(() => { const currentDomain = getDomain(); - const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; + console.log('mv.model.currency_iso ', mv.model) + const formattedPriceParams = [mv.model.currencyIso, null, currentDomain]; let oldPrice = 0; if (mv.model.discountedPrice && mv.model.discountRate !== 0) { @@ -233,7 +229,7 @@ function renderPrice(mv, text = '', monthly = '', monthTranslation = 'mo') { mv.subscribe(() => { const currentDomain = getDomain(); - const formattedPriceParams = [mv.model.currency_iso, null, currentDomain]; + const formattedPriceParams = [mv.model.currencyIso, null, currentDomain]; let price; if (monthly.toLowerCase() === 'monthly') { diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d7014ec0c..09f7f288f 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -312,59 +312,6 @@ export function pushProductsToDataLayer() { pushToDataLayer('product loaded', dataLayerProduct); } -export function pushProductsToDataLayer2() { - const url = window.location.href; - const isHomepageSolutions = url.split('/').filter(Boolean).pop(); - const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; - - const mapProductData = (products) => { - products.map((product) => { - const { - platformProductId, - productId, - productName, - devices, - subscription, - version, - basePrice, - discount, - discountRate, - currencyIso, - actualPrice, - } = product; - - return Object.fromEntries( - Object.entries({ - ID: platformProductId || productId, - name: productName, - devices, - subscription, - version, - basePrice, - discountValue: discount, - discountRate, - currency: currencyIso, - priceWithTax: actualPrice, - }).filter(([, value]) => value !== undefined), - ); - }); - }; - - if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { - TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); - } - - const dataLayerProduct = { - product: { - [key]: mapProductData(TRACKED_PRODUCTS), - // eslint-disable-next-line max-len - ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), - }, - }; - - pushToDataLayer('product loaded', dataLayerProduct); -} - export function pushTrialDownloadToDataLayer() { const getTrialID = () => ( // eslint-disable-next-line max-len diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 812219d1d..191aa3a27 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -331,7 +331,6 @@ export function setDataOnBuyLinks(element, dataInfo) { if (productId) element.dataset.product = productId; // element.dataset.buyPrice = variation.discounted_price || variation.price || 0; - if (variation.price) element.dataset.buyPrice = variation.price; if (variation.oldPrice) element.dataset.oldPrice = variation.oldPrice; if (variation.currency_label) element.dataset.currency = variation.currency_label; From 9ce5f6969cb62838cf7578a8fb90058077aee40d Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 17:58:12 +0300 Subject: [PATCH 1231/1296] fix: lint --- _src/blocks/products/products.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 75daf0410..e107906f1 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -46,7 +46,6 @@ function customRound(value) { */ function toModel(productCode, variantId, v) { const currentDomain = getDomain(); - const formattedPriceParams = [v.currency_iso, null, currentDomain]; return { productId: v.product_id, productName: v.product_name, @@ -185,7 +184,6 @@ function renderOldPrice(mv, text = '', monthly = '') { mv.subscribe(() => { const currentDomain = getDomain(); - console.log('mv.model.currency_iso ', mv.model) const formattedPriceParams = [mv.model.currencyIso, null, currentDomain]; let oldPrice = 0; From fd02047f0534613f318c41b79f06ee70f181c566 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 1 Oct 2024 17:59:28 +0300 Subject: [PATCH 1232/1296] fix lint --- _src/blocks/products/products.js | 1 - 1 file changed, 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index e107906f1..420dd764f 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -45,7 +45,6 @@ function customRound(value) { * @returns a model */ function toModel(productCode, variantId, v) { - const currentDomain = getDomain(); return { productId: v.product_id, productName: v.product_name, From e4a338f96e617a20e156a85ff6b0cc2d7e7d64e3 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 2 Oct 2024 11:37:25 +0300 Subject: [PATCH 1233/1296] Refactor hreflang tag generation logic --- _src/scripts/scripts.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 8545c9b30..66a36cd9a 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -439,10 +439,10 @@ function addHreflangTags() { const path = window.location.pathname; const pathCount = path.split('/').filter(String).length; - - Object.keys(HREFLANG_MAP).forEach((key) => { - const hreflang = HREFLANG_MAP[key][0]; - const href = `${HREFLANG_MAP[key][1].baseUrl}${path}${pathCount > 1 ? HREFLANG_MAP[key][1].pageType : ''}`; + const HREFLANG_MAP_OBJECT = Object.fromEntries(HREFLANG_MAP); + Object.keys(HREFLANG_MAP_OBJECT).forEach((key) => { + const hreflang = key; + const href = `${HREFLANG_MAP_OBJECT[key].baseUrl}${path}${pathCount > 1 ? HREFLANG_MAP_OBJECT[key].pageType : ''}`; const ln = document.createElement('link'); ln.setAttribute('rel', 'alternate'); ln.setAttribute('hreflang', hreflang); From 1dc99a6906fa57eec6f50f75a5919e791b758fa3 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 2 Oct 2024 12:39:35 +0300 Subject: [PATCH 1234/1296] Remove whole hreflang logic --- _src/scripts/scripts.js | 39 --------------------------------------- 1 file changed, 39 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 66a36cd9a..663b2d567 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -34,27 +34,6 @@ export const DEFAULT_COUNTRY = getDefaultLanguage(); export const METADATA_ANALYTICS_TAGS = 'analytics-tags'; const TARGET_TENANT = 'bitdefender'; -const HREFLANG_MAP = new Map([ - ['en-ro', { baseUrl: 'https://www.bitdefender.ro', pageType: '.html' }], - ['de', { baseUrl: 'https://www.bitdefender.de', pageType: '.html' }], - ['sv', { baseUrl: 'https://www.bitdefender.se', pageType: '.html' }], - ['pt', { baseUrl: 'https://www.bitdefender.pt', pageType: '.html' }], - ['en-sv', { baseUrl: 'https://www.bitdefender.se', pageType: '.html' }], - ['pt-BR', { baseUrl: 'https://www.bitdefender.com.br', pageType: '.html' }], - ['en', { baseUrl: 'https://www.bitdefender.com', pageType: '.html' }], - ['it', { baseUrl: 'https://www.bitdefender.it', pageType: '.html' }], - ['fr', { baseUrl: 'https://www.bitdefender.fr', pageType: '.html' }], - ['nl-BE', { baseUrl: 'https://www.bitdefender.be', pageType: '.html' }], - ['es', { baseUrl: 'https://www.bitdefender.es', pageType: '.html' }], - ['en-AU', { baseUrl: 'https://www.bitdefender.com.au', pageType: '' }], - ['ro', { baseUrl: 'https://www.bitdefender.ro', pageType: '.html' }], - ['nl', { baseUrl: 'https://www.bitdefender.nl', pageType: '.html' }], - ['en-GB', { baseUrl: 'https://www.bitdefender.co.uk', pageType: '.html' }], - ['zh-hk', { baseUrl: 'https://www.bitdefender.com/zh-hk', pageType: '' }], - ['zh-tw', { baseUrl: 'https://www.bitdefender.com/zh-tw', pageType: '' }], - ['x-default', { baseUrl: 'https://www.bitdefender.com', pageType: '.html' }], -]); - window.hlx.plugins.add('rum-conversion', { load: 'lazy', url: '../plugins/rum-conversion/src/index.js', @@ -434,23 +413,6 @@ export default function decorateLinkedPictures(main) { }); } -function addHreflangTags() { - if (document.querySelectorAll('head link[hreflang]').length > 0) return; - - const path = window.location.pathname; - const pathCount = path.split('/').filter(String).length; - const HREFLANG_MAP_OBJECT = Object.fromEntries(HREFLANG_MAP); - Object.keys(HREFLANG_MAP_OBJECT).forEach((key) => { - const hreflang = key; - const href = `${HREFLANG_MAP_OBJECT[key].baseUrl}${path}${pathCount > 1 ? HREFLANG_MAP_OBJECT[key].pageType : ''}`; - const ln = document.createElement('link'); - ln.setAttribute('rel', 'alternate'); - ln.setAttribute('hreflang', hreflang); - ln.setAttribute('href', href); - document.querySelector('head').appendChild(ln); - }); -} - /** * Decorates the main element. * @param {Element} main The main element @@ -464,7 +426,6 @@ export function decorateMain(main) { decorateLinkedPictures(main); decorateSections(main); decorateBlocks(main); - addHreflangTags(); } /** From 954049079cd5a97b0e74ab83f6188c26fb5cc97f Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Wed, 2 Oct 2024 16:29:30 +0300 Subject: [PATCH 1235/1296] make target pid mboxes work --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 10 ++++- _src/scripts/target.js | 42 ++++++++++---------- _src/scripts/utils/utils.js | 1 + 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 53cc6c6b2..47c743984 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -5,6 +5,7 @@ import { getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, getPriceLocalMapByLocale, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; +import { Target } from '../../scripts/target.js'; /** * Utility function to round prices and percentages @@ -102,7 +103,6 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n if (!buyLinkSelector) { return null; } - const url = new URL(window.location.href); let buyLinkPid = pid; if (!buyLinkPid) { @@ -260,7 +260,7 @@ function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars - products, familyProducts, monthlyProducts, priceType, pid, mainProduct, + products, familyProducts, monthlyProducts, priceType, mainProduct, addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem @@ -269,6 +269,12 @@ export default async function decorate(block, options) { block = block.querySelector('.block'); } + const targetCampain = await Target.getCampaign(); + let { pid } = block.closest('.section').dataset; + if (targetCampain) { + pid = targetCampain; + } + const blockParent = block.closest('.section'); blockParent.classList.add('we-container'); diff --git a/_src/scripts/target.js b/_src/scripts/target.js index f5701f810..f6edec052 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -1,33 +1,36 @@ +/* eslint-disable max-classes-per-file */ import { getMetadata, sampleRUM } from './lib-franklin.js'; const ADOBE_TARGET_SESSION_ID_PARAM = 'adobeTargetSessionId'; export class Visitor { static #instanceID = '0E920C0F53DA9E9B0A490D45@AdobeOrg'; + static #instance = null; - static #staticInit = new Promise(resolve => { + + static #staticInit = new Promise((resolve) => { if (window.Visitor) { Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); resolve(); return; } - window.addEventListener("at-library-loaded", () => { + document.addEventListener('at-library-loaded', () => { if (window.Visitor) { Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); } resolve(); - }) + }); }); /** * - * @param {string} url + * @param {string} url * @returns {Promise} */ static async appendVisitorIDsTo(url) { await this.#staticInit; - return !this.#instance || url.includes("adobe_mc") ? url : this.#instance.appendVisitorIDsTo(url); + return !this.#instance || url.includes('adobe_mc') ? url : this.#instance.appendVisitorIDsTo(url); } /** @@ -36,7 +39,7 @@ export class Visitor { */ static async getConsumerId() { await this.#staticInit; - return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ""; + return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ''; } /** @@ -45,10 +48,10 @@ export class Visitor { */ static async getMarketingCloudVisitorId() { await this.#staticInit; - return this.#instance ? this.#instance.getMarketingCloudVisitorID() : ""; + return this.#instance ? this.#instance.getMarketingCloudVisitorID() : ''; } -}; -window.BD = {Visitor, ...window.BD}; +} +window.BD = { Visitor, ...window.BD }; export class Target { /** @@ -61,14 +64,14 @@ export class Target { */ static offers = null; - static #staticInit = new Promise(resolve => { + static #staticInit = new Promise((resolve) => { /** Target is loaded and we wait for it to finish so we can get the offer */ if (window.adobe?.target) { this.#getOffers().then(resolve); return; } - document.addEventListener("at-library-loaded", async () => { + document.addEventListener('at-library-loaded', async () => { await this.#getOffers(); resolve(); }); @@ -80,7 +83,7 @@ export class Target { */ static async getCampaign() { await this.#staticInit; - return this.offers?.["initSelector-mbox"]?.content?.pid || null; + return this.offers?.['initSelector-mbox']?.content?.pid || null; } static async #getOffers() { @@ -89,14 +92,14 @@ export class Target { consumerId: await Visitor.getConsumerId(), request: { id: { - marketingCloudVisitorId: await Visitor.getMarketingCloudVisitorId() + marketingCloudVisitorId: await Visitor.getMarketingCloudVisitorId(), }, execute: { mboxes: [ - { index: 0, name: "initSelector-mbox" } - ] - } - } + { index: 0, name: 'initSelector-mbox' }, + ], + }, + }, }); this.offers = this.offers?.execute?.mboxes?.reduce((acc, mbox) => { @@ -105,13 +108,12 @@ export class Target { acc[mbox.name].type = mbox?.options?.[0]?.type; return acc; }, {}); - } catch (e) { console.warn(e); } } -}; -window.BD = {Target, ...window.BD}; +} +window.BD = { Target, ...window.BD }; /** * Convert a URL to a relative URL. diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index c1a5556d6..c1da4de75 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -356,6 +356,7 @@ export function formatPrice(price, currency, region = null, locale = null) { */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const targetCampain = await Target.getCampaign(); + console.log('targetCampain', targetCampain); const url = new URL(window.location.href); if (!isZuora()) { From 2b32b3a9cc3ea16413e6d2220f13dba5df2291ed Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 2 Oct 2024 17:30:20 +0300 Subject: [PATCH 1236/1296] adding naming on error page --- _src/scripts/scripts.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 09f7f288f..b6196db82 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -650,8 +650,8 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { } else { const allSegments = pathname.split('/').filter((segment) => segment !== ''); const lastSegment = allSegments[allSegments.length - 1]; - const subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); - const subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; + let subSubSubSection = allSegments[allSegments.length - 1].replace('-', ' '); + let subSection = pathname.indexOf('/consumer/') !== -1 ? 'consumer' : 'business'; let subSubSection = 'product'; let tagName = `${locale}:product:${subSubSubSection}`; @@ -660,6 +660,14 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { tagName = `${locale}:consumer:solutions`; } + if (window.errorCode === '404') { + tagName = `${locale}:404`; + subSection = '404'; + subSubSection = undefined; + subSubSubSection = undefined; + pushToDataLayer('page error', {}); + } + pushToDataLayer('page load started', { pageInstanceID: environment, page: { From 3e4f73ae93290a239b700d0547b2f50fe64b3b08 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Thu, 3 Oct 2024 12:22:58 +0300 Subject: [PATCH 1237/1296] [DEX-20216] - Adobe mc on product block fix --- _src/blocks/products/products.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 420dd764f..159b53e89 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -5,7 +5,7 @@ import { createTag, generateProductBuyLink, matchHeights, - setDataOnBuyLinks, formatPrice, + setDataOnBuyLinks, formatPrice, appendAdobeMcLinks, } from '../../scripts/utils/utils.js'; import { getDomain, trackProduct } from '../../scripts/scripts.js'; @@ -449,7 +449,6 @@ export default function decorate(block) { col.querySelectorAll('.button-container a').forEach((link) => { if (link && (link.href.includes('/site/Store/buy/') || link.href.includes('checkout.bitdefender.com'))) { link.href = card.url; - // console.log('test', mv.model.test) const dataInfo = { productId: card.productCode, @@ -464,6 +463,8 @@ export default function decorate(block) { setDataOnBuyLinks(link, dataInfo); } }); + + appendAdobeMcLinks(block); }); }); row.remove(); From a939b287381cf60675e563c064c5bcc0ae308bee Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 3 Oct 2024 16:56:37 +0300 Subject: [PATCH 1238/1296] aligned features columns --- _src/blocks/features/features.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/_src/blocks/features/features.js b/_src/blocks/features/features.js index 3f31f678c..b543f776e 100644 --- a/_src/blocks/features/features.js +++ b/_src/blocks/features/features.js @@ -1,3 +1,5 @@ +import { matchHeights } from "../../scripts/utils/utils.js"; + function expandItem(content) { content.style.height = `${content.scrollHeight}px`; const transitionEndCallback = () => { @@ -134,4 +136,13 @@ export default function decorate(block) { col.appendChild(extractFeatures(col)); }); }); + + const featuresList = block.querySelectorAll('ul'); + if (featuresList) { + featuresList.forEach((list) => { + const featureText = list.previousElementSibling; + featureText.classList.add('feature-text'); + }); + } + matchHeights(block, '.feature-text'); } From e4a2f8367b62587de6c53b4ab374a2a884027183 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Thu, 3 Oct 2024 17:01:28 +0300 Subject: [PATCH 1239/1296] fixed lint --- _src/blocks/features/features.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/features/features.js b/_src/blocks/features/features.js index b543f776e..94d60841c 100644 --- a/_src/blocks/features/features.js +++ b/_src/blocks/features/features.js @@ -1,4 +1,4 @@ -import { matchHeights } from "../../scripts/utils/utils.js"; +import { matchHeights } from '../../scripts/utils/utils.js'; function expandItem(content) { content.style.height = `${content.scrollHeight}px`; From 7e1cc2547f7af9a78e98dbbc5455a3a5498791c1 Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 3 Oct 2024 17:37:02 +0300 Subject: [PATCH 1240/1296] Refactor toModel function to be asynchronous --- .../product-comparison-table.js | 8 ++++---- _src/blocks/products/products.js | 10 +++++----- _src/scripts/utils/utils.js | 14 +++++++++++--- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index bfb33fa3d..c107466a0 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -36,7 +36,7 @@ function customRound(value) { * @param v variant * @returns a model */ -function toModel(productCode, variantId, v) { +async function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -57,7 +57,7 @@ function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: generateProductBuyLink(v, productCode), + url: await generateProductBuyLink(v, productCode), }; } @@ -76,8 +76,8 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const priceAppliedOnTime = document.createElement('p'); priceRoot.appendChild(priceAppliedOnTime); fetchProduct(code, variant) - .then((product) => { - const m = toModel(code, variant, product); + .then(async (product) => { + const m = await toModel(code, variant, product); const currentProduct = { code, variant, product }; fetchedProducts.push(currentProduct); // eslint-disable-next-line camelcase diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 420dd764f..36699ceaf 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -44,7 +44,7 @@ function customRound(value) { * @param v variant * @returns a model */ -function toModel(productCode, variantId, v) { +async function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -65,7 +65,7 @@ function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: generateProductBuyLink(v, productCode), + url: await generateProductBuyLink(v, productCode), test: {}, }; } @@ -100,7 +100,7 @@ class ProductCard { async selectProductVariant(productCode, variantId) { const p = await fetchProduct(productCode, variantId); - this.model = toModel(productCode, variantId, p); + this.model = await toModel(productCode, variantId, p); this.notify(); } @@ -391,10 +391,10 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { */ function renderLowestPrice(code, variant, monthly = '', text = '') { const root = document.createElement('p'); - fetchProduct(code, variant).then((product) => { + fetchProduct(code, variant).then(async (product) => { const currentDomain = getDomain(); const formattedPriceParams = [product.currency_iso, null, currentDomain]; - const m = toModel(code, variant, product); + const m = await toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; // eslint-disable-next-line max-len const price = formatPrice(isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice, ...formattedPriceParams); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index c1da4de75..9dc89961b 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,4 +1,4 @@ -import { Target } from '../target.js'; +import { Target, Visitor } from '../target.js'; import ZuoraNLClass from '../zuora.js'; export const IANA_BY_REGION_MAP = new Map([ @@ -315,7 +315,7 @@ export function getPriceLocalMapByLocale() { return PRICE_LOCALE_MAP.get(locale) || PRICE_LOCALE_MAP.get('en-us'); } -export function generateProductBuyLink(product, productCode, month = null, years = null) { +export async function generateProductBuyLink(product, productCode, month = null, years = null) { if (isZuora()) { return product.buy_link; } @@ -324,7 +324,15 @@ export function generateProductBuyLink(product, productCode, month = null, years const y = product.variation?.years || years; const forceCountry = getPriceLocalMapByLocale().force_country; - return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/?force_country=${forceCountry}`; + const url = new URL(window.location.href); + const targetCampain = await Target.getCampaign(); + const pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); + const buyLink = new URL(`${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/`); + buyLink.searchParams.append('force_country', forceCountry); + if (pid) { + buyLink.searchParams.append('pid', pid); + } + return Visitor.appendVisitorIDsTo(buyLink.href); } export function setDataOnBuyLinks(element, dataInfo) { From a19dcc1ea294c19cf24fa482cf43c65f66864d8f Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 3 Oct 2024 17:43:46 +0300 Subject: [PATCH 1241/1296] Refactor toModel function to be asynchronous --- .../blocks/product-comparison-table/product-comparison-table.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index c107466a0..2b47078b8 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -108,7 +108,7 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const years = variantSplit[1].split('y')[0]; // eslint-disable-next-line max-len - buyLink.href = currentProduct.product.buy_link || generateProductBuyLink(currentProduct, currentProduct.code, units, years); + buyLink.href = currentProduct.product.buy_link || await generateProductBuyLink(currentProduct, currentProduct.code, units, years); const dataInfo = { productId: currentProduct.code, From 8879b57e0cb478b9c9e14decaef51d880f43064a Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 3 Oct 2024 18:07:18 +0300 Subject: [PATCH 1242/1296] Refactor renderStickyNavigation function to be asynchronous and append visitor IDs and pid to non-hash links --- .../sticky-navigation/sticky-navigation.js | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 1b9a47428..2e104249c 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -1,4 +1,6 @@ import { STICKY_NAVIGATION_DATASET_KEY } from '../../scripts/lib-franklin.js'; +import { Target, Visitor } from '../../scripts/target.js'; +import { getMetadata } from '../../scripts/utils/utils.js'; function scrollToAnchorWithOffset(anchorId) { const anchorElement = document.getElementById(anchorId); @@ -53,7 +55,7 @@ function renderStickyNavMenu() { return stickyNavMenu; } -function renderStickyNavigation(block) { +async function renderStickyNavigation(block) { const menuWithButton = document.createElement('div'); menuWithButton.classList.add('menu-with-button'); @@ -73,8 +75,26 @@ function renderStickyNavigation(block) { mobileDropDown.innerText = stickyNavMenu.querySelector('li').innerText; - const stickyNavButton = block.querySelector('.button-container'); - if (stickyNavButton) menuWithButton.appendChild(stickyNavButton); + const stickyNavButtonContainer = block.querySelector('.button-container'); + + const stickyNavLink = stickyNavButtonContainer?.querySelector('a'); + + // append visitor IDs and pid to everything that is not a hash link + if (!stickyNavLink.href.includes('#')) { + const targetCampain = await Target.getCampaign(); + + const pageUrl = new URL(window.location.href); + const buyLinkUrl = new URL(stickyNavLink.href); + + const pid = targetCampain || pageUrl.searchParams.get('pid') || getMetadata('pid'); + if (pid) { + buyLinkUrl.searchParams.set('pid', pid); + } + + stickyNavLink.href = await Visitor.appendVisitorIDsTo(buyLinkUrl.href); + } + + if (stickyNavButtonContainer) menuWithButton.appendChild(stickyNavButtonContainer); block.replaceChildren(mobileDropDown); block.appendChild(menuWithButton); @@ -138,8 +158,8 @@ function onScroll(stickyNav) { updateStickyNavActiveMenuItem(stickyNav); } -export default function decorate(block) { - const stickyNav = renderStickyNavigation(block); +export default async function decorate(block) { + const stickyNav = await renderStickyNavigation(block); // listen to scroll event to stick the nav on the top and update the current visible section document.addEventListener('scroll', () => onScroll(stickyNav)); From 2653f541b5106003f0b52fe02f64a519e6d04afc Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Thu, 3 Oct 2024 18:11:31 +0300 Subject: [PATCH 1243/1296] lint fix --- _src/scripts/target.js | 2 ++ _src/scripts/utils/utils.js | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/scripts/target.js b/_src/scripts/target.js index f6edec052..b8e9b4374 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -39,6 +39,7 @@ export class Visitor { */ static async getConsumerId() { await this.#staticInit; + // eslint-disable-next-line no-underscore-dangle return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ''; } @@ -109,6 +110,7 @@ export class Target { return acc; }, {}); } catch (e) { + // eslint-disable-next-line no-console console.warn(e); } } diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 9dc89961b..4d790fd22 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -364,7 +364,6 @@ export function formatPrice(price, currency, region = null, locale = null) { */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const targetCampain = await Target.getCampaign(); - console.log('targetCampain', targetCampain); const url = new URL(window.location.href); if (!isZuora()) { From b42f9cd22d542bcc1c71b69abccee647a6085655 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Fri, 4 Oct 2024 10:46:55 +0300 Subject: [PATCH 1244/1296] fix: regex for extracting locale --- _src/scripts/scripts.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c71727ff2..ca8ffda3d 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -576,8 +576,9 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); // get locale - const regex = /([a-z]{2}-[a-z]{2})/i; - const locale = pathName.match(regex)[0]; + const regex = /\/([a-z]{2}-[a-z]{2})\//i; // match locale with slashes + // extract locale without slashes + const locale = pathName.match(regex)[1]; if (tags.length) { pushToDataLayer('page load started', { From 37cc09962c5ec45f1aa6faf1d37c11a6fda8f718 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Fri, 4 Oct 2024 10:49:04 +0300 Subject: [PATCH 1245/1296] feat: get footer from AEM exp fragment. --- _src/blocks/footer/footer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index 8fef6f0e0..b1ffdee7f 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -214,7 +214,7 @@ function applyFooterFactorySetup(footerMetadata, block) { // headers in AEM const regex = /\/(zh-hk|zh-tw)\//i; const matches = window.location.href.match(regex); - if (matches || window.location.hostname.includes('www.')) { + if (matches) { runDefaultFooterLogic(block); return; } From 55c8302ba227b919f087ea1d60b5b745972ddf4e Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Fri, 4 Oct 2024 10:55:23 +0300 Subject: [PATCH 1246/1296] fix: console error, racing condition --- _src/blocks/products/products.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 159b53e89..1ae210178 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -464,7 +464,7 @@ export default function decorate(block) { } }); - appendAdobeMcLinks(block); + adobeMcAppendVisitorId(block); }); }); row.remove(); From a8a0bae755126b0fc017893a8ebedaa6ce56f7c9 Mon Sep 17 00:00:00 2001 From: Manuel ENACHE Date: Fri, 4 Oct 2024 10:56:51 +0300 Subject: [PATCH 1247/1296] fix: lint & imports --- _src/blocks/products/products.js | 2 +- _src/scripts/scripts.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 1ae210178..a382fad7d 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -5,7 +5,7 @@ import { createTag, generateProductBuyLink, matchHeights, - setDataOnBuyLinks, formatPrice, appendAdobeMcLinks, + setDataOnBuyLinks, formatPrice, adobeMcAppendVisitorId, } from '../../scripts/utils/utils.js'; import { getDomain, trackProduct } from '../../scripts/scripts.js'; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index ca8ffda3d..32b151813 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -578,7 +578,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { // get locale const regex = /\/([a-z]{2}-[a-z]{2})\//i; // match locale with slashes // extract locale without slashes - const locale = pathName.match(regex)[1]; + const locale = pathName.match(regex)[1]; if (tags.length) { pushToDataLayer('page load started', { From a10876aaaa93cb559a18d08157fc84995c1d7174 Mon Sep 17 00:00:00 2001 From: miordache <62606920+Matei-Iordache@users.noreply.github.com> Date: Fri, 4 Oct 2024 11:16:25 +0300 Subject: [PATCH 1248/1296] Revert "Feature dex 20103 init selector mbox" --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 10 +- .../product-comparison-table.js | 10 +- _src/blocks/products/products.js | 10 +- .../sticky-navigation/sticky-navigation.js | 30 +---- _src/scripts/target.js | 115 ------------------ _src/scripts/utils/utils.js | 18 +-- 6 files changed, 21 insertions(+), 172 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 47c743984..53cc6c6b2 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -5,7 +5,6 @@ import { getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, getPriceLocalMapByLocale, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; -import { Target } from '../../scripts/target.js'; /** * Utility function to round prices and percentages @@ -103,6 +102,7 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n if (!buyLinkSelector) { return null; } + const url = new URL(window.location.href); let buyLinkPid = pid; if (!buyLinkPid) { @@ -260,7 +260,7 @@ function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars - products, familyProducts, monthlyProducts, priceType, mainProduct, + products, familyProducts, monthlyProducts, priceType, pid, mainProduct, addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem @@ -269,12 +269,6 @@ export default async function decorate(block, options) { block = block.querySelector('.block'); } - const targetCampain = await Target.getCampaign(); - let { pid } = block.closest('.section').dataset; - if (targetCampain) { - pid = targetCampain; - } - const blockParent = block.closest('.section'); blockParent.classList.add('we-container'); diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 2b47078b8..bfb33fa3d 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -36,7 +36,7 @@ function customRound(value) { * @param v variant * @returns a model */ -async function toModel(productCode, variantId, v) { +function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -57,7 +57,7 @@ async function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: await generateProductBuyLink(v, productCode), + url: generateProductBuyLink(v, productCode), }; } @@ -76,8 +76,8 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const priceAppliedOnTime = document.createElement('p'); priceRoot.appendChild(priceAppliedOnTime); fetchProduct(code, variant) - .then(async (product) => { - const m = await toModel(code, variant, product); + .then((product) => { + const m = toModel(code, variant, product); const currentProduct = { code, variant, product }; fetchedProducts.push(currentProduct); // eslint-disable-next-line camelcase @@ -108,7 +108,7 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const years = variantSplit[1].split('y')[0]; // eslint-disable-next-line max-len - buyLink.href = currentProduct.product.buy_link || await generateProductBuyLink(currentProduct, currentProduct.code, units, years); + buyLink.href = currentProduct.product.buy_link || generateProductBuyLink(currentProduct, currentProduct.code, units, years); const dataInfo = { productId: currentProduct.code, diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 5ce096c8c..159b53e89 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -44,7 +44,7 @@ function customRound(value) { * @param v variant * @returns a model */ -async function toModel(productCode, variantId, v) { +function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -65,7 +65,7 @@ async function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: await generateProductBuyLink(v, productCode), + url: generateProductBuyLink(v, productCode), test: {}, }; } @@ -100,7 +100,7 @@ class ProductCard { async selectProductVariant(productCode, variantId) { const p = await fetchProduct(productCode, variantId); - this.model = await toModel(productCode, variantId, p); + this.model = toModel(productCode, variantId, p); this.notify(); } @@ -391,10 +391,10 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { */ function renderLowestPrice(code, variant, monthly = '', text = '') { const root = document.createElement('p'); - fetchProduct(code, variant).then(async (product) => { + fetchProduct(code, variant).then((product) => { const currentDomain = getDomain(); const formattedPriceParams = [product.currency_iso, null, currentDomain]; - const m = await toModel(code, variant, product); + const m = toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; // eslint-disable-next-line max-len const price = formatPrice(isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice, ...formattedPriceParams); diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 2e104249c..1b9a47428 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -1,6 +1,4 @@ import { STICKY_NAVIGATION_DATASET_KEY } from '../../scripts/lib-franklin.js'; -import { Target, Visitor } from '../../scripts/target.js'; -import { getMetadata } from '../../scripts/utils/utils.js'; function scrollToAnchorWithOffset(anchorId) { const anchorElement = document.getElementById(anchorId); @@ -55,7 +53,7 @@ function renderStickyNavMenu() { return stickyNavMenu; } -async function renderStickyNavigation(block) { +function renderStickyNavigation(block) { const menuWithButton = document.createElement('div'); menuWithButton.classList.add('menu-with-button'); @@ -75,26 +73,8 @@ async function renderStickyNavigation(block) { mobileDropDown.innerText = stickyNavMenu.querySelector('li').innerText; - const stickyNavButtonContainer = block.querySelector('.button-container'); - - const stickyNavLink = stickyNavButtonContainer?.querySelector('a'); - - // append visitor IDs and pid to everything that is not a hash link - if (!stickyNavLink.href.includes('#')) { - const targetCampain = await Target.getCampaign(); - - const pageUrl = new URL(window.location.href); - const buyLinkUrl = new URL(stickyNavLink.href); - - const pid = targetCampain || pageUrl.searchParams.get('pid') || getMetadata('pid'); - if (pid) { - buyLinkUrl.searchParams.set('pid', pid); - } - - stickyNavLink.href = await Visitor.appendVisitorIDsTo(buyLinkUrl.href); - } - - if (stickyNavButtonContainer) menuWithButton.appendChild(stickyNavButtonContainer); + const stickyNavButton = block.querySelector('.button-container'); + if (stickyNavButton) menuWithButton.appendChild(stickyNavButton); block.replaceChildren(mobileDropDown); block.appendChild(menuWithButton); @@ -158,8 +138,8 @@ function onScroll(stickyNav) { updateStickyNavActiveMenuItem(stickyNav); } -export default async function decorate(block) { - const stickyNav = await renderStickyNavigation(block); +export default function decorate(block) { + const stickyNav = renderStickyNavigation(block); // listen to scroll event to stick the nav on the top and update the current visible section document.addEventListener('scroll', () => onScroll(stickyNav)); diff --git a/_src/scripts/target.js b/_src/scripts/target.js index b8e9b4374..f85d55906 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -1,122 +1,7 @@ -/* eslint-disable max-classes-per-file */ import { getMetadata, sampleRUM } from './lib-franklin.js'; const ADOBE_TARGET_SESSION_ID_PARAM = 'adobeTargetSessionId'; -export class Visitor { - static #instanceID = '0E920C0F53DA9E9B0A490D45@AdobeOrg'; - - static #instance = null; - - static #staticInit = new Promise((resolve) => { - if (window.Visitor) { - Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); - resolve(); - return; - } - - document.addEventListener('at-library-loaded', () => { - if (window.Visitor) { - Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); - } - resolve(); - }); - }); - - /** - * - * @param {string} url - * @returns {Promise} - */ - static async appendVisitorIDsTo(url) { - await this.#staticInit; - return !this.#instance || url.includes('adobe_mc') ? url : this.#instance.appendVisitorIDsTo(url); - } - - /** - * - * @returns {Promise} - */ - static async getConsumerId() { - await this.#staticInit; - // eslint-disable-next-line no-underscore-dangle - return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ''; - } - - /** - * - * @returns {Promise} - */ - static async getMarketingCloudVisitorId() { - await this.#staticInit; - return this.#instance ? this.#instance.getMarketingCloudVisitorID() : ''; - } -} -window.BD = { Visitor, ...window.BD }; - -export class Target { - /** - * Mbox describing an offer - * @typedef {{content: {offer: string, block:string} | {pid}, type: string|null}} Mbox - */ - - /** - * @type {Mbox} - */ - static offers = null; - - static #staticInit = new Promise((resolve) => { - /** Target is loaded and we wait for it to finish so we can get the offer */ - if (window.adobe?.target) { - this.#getOffers().then(resolve); - return; - } - - document.addEventListener('at-library-loaded', async () => { - await this.#getOffers(); - resolve(); - }); - }); - - /** - * https://bitdefender.atlassian.net/wiki/spaces/WWW/pages/1661993460/Activating+Promotions+Enhancements+Target - * @returns {Promise} - */ - static async getCampaign() { - await this.#staticInit; - return this.offers?.['initSelector-mbox']?.content?.pid || null; - } - - static async #getOffers() { - try { - this.offers = await window.adobe?.target?.getOffers({ - consumerId: await Visitor.getConsumerId(), - request: { - id: { - marketingCloudVisitorId: await Visitor.getMarketingCloudVisitorId(), - }, - execute: { - mboxes: [ - { index: 0, name: 'initSelector-mbox' }, - ], - }, - }, - }); - - this.offers = this.offers?.execute?.mboxes?.reduce((acc, mbox) => { - acc[mbox.name] = {}; - acc[mbox.name].content = mbox?.options?.[0]?.content; - acc[mbox.name].type = mbox?.options?.[0]?.type; - return acc; - }, {}); - } catch (e) { - // eslint-disable-next-line no-console - console.warn(e); - } - } -} -window.BD = { Target, ...window.BD }; - /** * Convert a URL to a relative URL. * @param url diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 4d790fd22..191aa3a27 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,4 +1,3 @@ -import { Target, Visitor } from '../target.js'; import ZuoraNLClass from '../zuora.js'; export const IANA_BY_REGION_MAP = new Map([ @@ -315,7 +314,7 @@ export function getPriceLocalMapByLocale() { return PRICE_LOCALE_MAP.get(locale) || PRICE_LOCALE_MAP.get('en-us'); } -export async function generateProductBuyLink(product, productCode, month = null, years = null) { +export function generateProductBuyLink(product, productCode, month = null, years = null) { if (isZuora()) { return product.buy_link; } @@ -324,15 +323,7 @@ export async function generateProductBuyLink(product, productCode, month = null, const y = product.variation?.years || years; const forceCountry = getPriceLocalMapByLocale().force_country; - const url = new URL(window.location.href); - const targetCampain = await Target.getCampaign(); - const pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); - const buyLink = new URL(`${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/`); - buyLink.searchParams.append('force_country', forceCountry); - if (pid) { - buyLink.searchParams.append('pid', pid); - } - return Visitor.appendVisitorIDsTo(buyLink.href); + return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/?force_country=${forceCountry}`; } export function setDataOnBuyLinks(element, dataInfo) { @@ -363,7 +354,6 @@ export function formatPrice(price, currency, region = null, locale = null) { * hk - 51, tw - 52 */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { - const targetCampain = await Target.getCampaign(); const url = new URL(window.location.href); if (!isZuora()) { @@ -373,7 +363,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { if (!pid) { // eslint-disable-next-line no-param-reassign - pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); + pid = url.searchParams.get('pid') || getMetadata('pid'); } data.append('data', JSON.stringify({ @@ -440,7 +430,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const variantSplit = variant.split('-'); const units = variantSplit[0].split('u')[0]; const years = variantSplit[1].split('y')[0]; - const campaign = targetCampain || getParamValue('campaign'); + const campaign = getParamValue('campaign'); const zuoraResponse = await ZuoraNLClass.loadProduct(`${code}/${units}/${years}`, campaign); // zuoraResponse.ok = true; From 1eee86e28b6c2dbd184238f9be1cd634c5c4f111 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 12:12:39 +0300 Subject: [PATCH 1249/1296] removed analytics call --- _src/scripts/scripts.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c71727ff2..c07e18064 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -745,6 +745,7 @@ async function loadLazy(doc) { loadHeader(doc.querySelector('header')); } + // loadTrackers(); await loadBlocks(main); const { hash } = window.location; @@ -765,8 +766,6 @@ async function loadLazy(doc) { loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${templateMetadata}-lazy.css`); } - loadTrackers(); - sampleRUM('lazy'); sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); sampleRUM.observe(main.querySelectorAll('picture > img')); From 32052e7db0c36565fc0b686136b92f592040ff15 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 12:39:53 +0300 Subject: [PATCH 1250/1296] DEX-20103 | moved the target initialisation before the loadBlocks --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index c07e18064..9c3e76046 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -745,7 +745,7 @@ async function loadLazy(doc) { loadHeader(doc.querySelector('header')); } - // loadTrackers(); + loadTrackers(); await loadBlocks(main); const { hash } = window.location; From 9f8c4d2976478648420eddae2407af2c0257185b Mon Sep 17 00:00:00 2001 From: Manuel Enache Date: Fri, 4 Oct 2024 11:02:21 +0300 Subject: [PATCH 1251/1296] Merge pull request #270 from bitdefender/feature-DEX-20103-init-selector-mbox Feature dex 20103 init selector mbox --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 10 +- .../product-comparison-table.js | 10 +- _src/blocks/products/products.js | 10 +- .../sticky-navigation/sticky-navigation.js | 30 ++++- _src/scripts/target.js | 115 ++++++++++++++++++ _src/scripts/utils/utils.js | 18 ++- 6 files changed, 172 insertions(+), 21 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 53cc6c6b2..47c743984 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -5,6 +5,7 @@ import { getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, getPriceLocalMapByLocale, } from '../../scripts/utils/utils.js'; import { trackProduct } from '../../scripts/scripts.js'; +import { Target } from '../../scripts/target.js'; /** * Utility function to round prices and percentages @@ -102,7 +103,6 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n if (!buyLinkSelector) { return null; } - const url = new URL(window.location.href); let buyLinkPid = pid; if (!buyLinkPid) { @@ -260,7 +260,7 @@ function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars - products, familyProducts, monthlyProducts, priceType, pid, mainProduct, + products, familyProducts, monthlyProducts, priceType, mainProduct, addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem @@ -269,6 +269,12 @@ export default async function decorate(block, options) { block = block.querySelector('.block'); } + const targetCampain = await Target.getCampaign(); + let { pid } = block.closest('.section').dataset; + if (targetCampain) { + pid = targetCampain; + } + const blockParent = block.closest('.section'); blockParent.classList.add('we-container'); diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index bfb33fa3d..2b47078b8 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -36,7 +36,7 @@ function customRound(value) { * @param v variant * @returns a model */ -function toModel(productCode, variantId, v) { +async function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -57,7 +57,7 @@ function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: generateProductBuyLink(v, productCode), + url: await generateProductBuyLink(v, productCode), }; } @@ -76,8 +76,8 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const priceAppliedOnTime = document.createElement('p'); priceRoot.appendChild(priceAppliedOnTime); fetchProduct(code, variant) - .then((product) => { - const m = toModel(code, variant, product); + .then(async (product) => { + const m = await toModel(code, variant, product); const currentProduct = { code, variant, product }; fetchedProducts.push(currentProduct); // eslint-disable-next-line camelcase @@ -108,7 +108,7 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const years = variantSplit[1].split('y')[0]; // eslint-disable-next-line max-len - buyLink.href = currentProduct.product.buy_link || generateProductBuyLink(currentProduct, currentProduct.code, units, years); + buyLink.href = currentProduct.product.buy_link || await generateProductBuyLink(currentProduct, currentProduct.code, units, years); const dataInfo = { productId: currentProduct.code, diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index a382fad7d..cf68b7a51 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -44,7 +44,7 @@ function customRound(value) { * @param v variant * @returns a model */ -function toModel(productCode, variantId, v) { +async function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -65,7 +65,7 @@ function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: generateProductBuyLink(v, productCode), + url: await generateProductBuyLink(v, productCode), test: {}, }; } @@ -100,7 +100,7 @@ class ProductCard { async selectProductVariant(productCode, variantId) { const p = await fetchProduct(productCode, variantId); - this.model = toModel(productCode, variantId, p); + this.model = await toModel(productCode, variantId, p); this.notify(); } @@ -391,10 +391,10 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { */ function renderLowestPrice(code, variant, monthly = '', text = '') { const root = document.createElement('p'); - fetchProduct(code, variant).then((product) => { + fetchProduct(code, variant).then(async (product) => { const currentDomain = getDomain(); const formattedPriceParams = [product.currency_iso, null, currentDomain]; - const m = toModel(code, variant, product); + const m = await toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; // eslint-disable-next-line max-len const price = formatPrice(isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice, ...formattedPriceParams); diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 1b9a47428..2e104249c 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -1,4 +1,6 @@ import { STICKY_NAVIGATION_DATASET_KEY } from '../../scripts/lib-franklin.js'; +import { Target, Visitor } from '../../scripts/target.js'; +import { getMetadata } from '../../scripts/utils/utils.js'; function scrollToAnchorWithOffset(anchorId) { const anchorElement = document.getElementById(anchorId); @@ -53,7 +55,7 @@ function renderStickyNavMenu() { return stickyNavMenu; } -function renderStickyNavigation(block) { +async function renderStickyNavigation(block) { const menuWithButton = document.createElement('div'); menuWithButton.classList.add('menu-with-button'); @@ -73,8 +75,26 @@ function renderStickyNavigation(block) { mobileDropDown.innerText = stickyNavMenu.querySelector('li').innerText; - const stickyNavButton = block.querySelector('.button-container'); - if (stickyNavButton) menuWithButton.appendChild(stickyNavButton); + const stickyNavButtonContainer = block.querySelector('.button-container'); + + const stickyNavLink = stickyNavButtonContainer?.querySelector('a'); + + // append visitor IDs and pid to everything that is not a hash link + if (!stickyNavLink.href.includes('#')) { + const targetCampain = await Target.getCampaign(); + + const pageUrl = new URL(window.location.href); + const buyLinkUrl = new URL(stickyNavLink.href); + + const pid = targetCampain || pageUrl.searchParams.get('pid') || getMetadata('pid'); + if (pid) { + buyLinkUrl.searchParams.set('pid', pid); + } + + stickyNavLink.href = await Visitor.appendVisitorIDsTo(buyLinkUrl.href); + } + + if (stickyNavButtonContainer) menuWithButton.appendChild(stickyNavButtonContainer); block.replaceChildren(mobileDropDown); block.appendChild(menuWithButton); @@ -138,8 +158,8 @@ function onScroll(stickyNav) { updateStickyNavActiveMenuItem(stickyNav); } -export default function decorate(block) { - const stickyNav = renderStickyNavigation(block); +export default async function decorate(block) { + const stickyNav = await renderStickyNavigation(block); // listen to scroll event to stick the nav on the top and update the current visible section document.addEventListener('scroll', () => onScroll(stickyNav)); diff --git a/_src/scripts/target.js b/_src/scripts/target.js index f85d55906..b8e9b4374 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -1,7 +1,122 @@ +/* eslint-disable max-classes-per-file */ import { getMetadata, sampleRUM } from './lib-franklin.js'; const ADOBE_TARGET_SESSION_ID_PARAM = 'adobeTargetSessionId'; +export class Visitor { + static #instanceID = '0E920C0F53DA9E9B0A490D45@AdobeOrg'; + + static #instance = null; + + static #staticInit = new Promise((resolve) => { + if (window.Visitor) { + Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); + resolve(); + return; + } + + document.addEventListener('at-library-loaded', () => { + if (window.Visitor) { + Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); + } + resolve(); + }); + }); + + /** + * + * @param {string} url + * @returns {Promise} + */ + static async appendVisitorIDsTo(url) { + await this.#staticInit; + return !this.#instance || url.includes('adobe_mc') ? url : this.#instance.appendVisitorIDsTo(url); + } + + /** + * + * @returns {Promise} + */ + static async getConsumerId() { + await this.#staticInit; + // eslint-disable-next-line no-underscore-dangle + return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ''; + } + + /** + * + * @returns {Promise} + */ + static async getMarketingCloudVisitorId() { + await this.#staticInit; + return this.#instance ? this.#instance.getMarketingCloudVisitorID() : ''; + } +} +window.BD = { Visitor, ...window.BD }; + +export class Target { + /** + * Mbox describing an offer + * @typedef {{content: {offer: string, block:string} | {pid}, type: string|null}} Mbox + */ + + /** + * @type {Mbox} + */ + static offers = null; + + static #staticInit = new Promise((resolve) => { + /** Target is loaded and we wait for it to finish so we can get the offer */ + if (window.adobe?.target) { + this.#getOffers().then(resolve); + return; + } + + document.addEventListener('at-library-loaded', async () => { + await this.#getOffers(); + resolve(); + }); + }); + + /** + * https://bitdefender.atlassian.net/wiki/spaces/WWW/pages/1661993460/Activating+Promotions+Enhancements+Target + * @returns {Promise} + */ + static async getCampaign() { + await this.#staticInit; + return this.offers?.['initSelector-mbox']?.content?.pid || null; + } + + static async #getOffers() { + try { + this.offers = await window.adobe?.target?.getOffers({ + consumerId: await Visitor.getConsumerId(), + request: { + id: { + marketingCloudVisitorId: await Visitor.getMarketingCloudVisitorId(), + }, + execute: { + mboxes: [ + { index: 0, name: 'initSelector-mbox' }, + ], + }, + }, + }); + + this.offers = this.offers?.execute?.mboxes?.reduce((acc, mbox) => { + acc[mbox.name] = {}; + acc[mbox.name].content = mbox?.options?.[0]?.content; + acc[mbox.name].type = mbox?.options?.[0]?.type; + return acc; + }, {}); + } catch (e) { + // eslint-disable-next-line no-console + console.warn(e); + } + } +} +window.BD = { Target, ...window.BD }; + /** * Convert a URL to a relative URL. * @param url diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 191aa3a27..4d790fd22 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,3 +1,4 @@ +import { Target, Visitor } from '../target.js'; import ZuoraNLClass from '../zuora.js'; export const IANA_BY_REGION_MAP = new Map([ @@ -314,7 +315,7 @@ export function getPriceLocalMapByLocale() { return PRICE_LOCALE_MAP.get(locale) || PRICE_LOCALE_MAP.get('en-us'); } -export function generateProductBuyLink(product, productCode, month = null, years = null) { +export async function generateProductBuyLink(product, productCode, month = null, years = null) { if (isZuora()) { return product.buy_link; } @@ -323,7 +324,15 @@ export function generateProductBuyLink(product, productCode, month = null, years const y = product.variation?.years || years; const forceCountry = getPriceLocalMapByLocale().force_country; - return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/?force_country=${forceCountry}`; + const url = new URL(window.location.href); + const targetCampain = await Target.getCampaign(); + const pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); + const buyLink = new URL(`${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/`); + buyLink.searchParams.append('force_country', forceCountry); + if (pid) { + buyLink.searchParams.append('pid', pid); + } + return Visitor.appendVisitorIDsTo(buyLink.href); } export function setDataOnBuyLinks(element, dataInfo) { @@ -354,6 +363,7 @@ export function formatPrice(price, currency, region = null, locale = null) { * hk - 51, tw - 52 */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { + const targetCampain = await Target.getCampaign(); const url = new URL(window.location.href); if (!isZuora()) { @@ -363,7 +373,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { if (!pid) { // eslint-disable-next-line no-param-reassign - pid = url.searchParams.get('pid') || getMetadata('pid'); + pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); } data.append('data', JSON.stringify({ @@ -430,7 +440,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const variantSplit = variant.split('-'); const units = variantSplit[0].split('u')[0]; const years = variantSplit[1].split('y')[0]; - const campaign = getParamValue('campaign'); + const campaign = targetCampain || getParamValue('campaign'); const zuoraResponse = await ZuoraNLClass.loadProduct(`${code}/${units}/${years}`, campaign); // zuoraResponse.ok = true; From 3925b2c3028a416e67d58c5e03d09dc73c200047 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 13:07:22 +0300 Subject: [PATCH 1252/1296] moved loadTrackers before loadBlocks --- _src/scripts/scripts.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 32b151813..ba9523ae6 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -746,6 +746,7 @@ async function loadLazy(doc) { loadHeader(doc.querySelector('header')); } + loadTrackers(); await loadBlocks(main); const { hash } = window.location; @@ -766,8 +767,6 @@ async function loadLazy(doc) { loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${templateMetadata}-lazy.css`); } - loadTrackers(); - sampleRUM('lazy'); sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); sampleRUM.observe(main.querySelectorAll('picture > img')); From 5c411334d982b643f7ded05f4e960f7d958e6080 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 13:13:05 +0300 Subject: [PATCH 1253/1296] fixed sticky navigation --- _src/blocks/sticky-navigation/sticky-navigation.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 2e104249c..2e3ad5986 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -80,14 +80,14 @@ async function renderStickyNavigation(block) { const stickyNavLink = stickyNavButtonContainer?.querySelector('a'); // append visitor IDs and pid to everything that is not a hash link - if (!stickyNavLink.href.includes('#')) { + if (stickyNavLink && !stickyNavLink.href.includes('#')) { const targetCampain = await Target.getCampaign(); const pageUrl = new URL(window.location.href); const buyLinkUrl = new URL(stickyNavLink.href); const pid = targetCampain || pageUrl.searchParams.get('pid') || getMetadata('pid'); - if (pid) { + if (pid && stickyNavLink.href.includes('/buy/')) { buyLinkUrl.searchParams.set('pid', pid); } From 73afc5554919ff73e474fe4f854055d463270816 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 13:31:23 +0300 Subject: [PATCH 1254/1296] added news-bar to LCP_BLOCKS --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index ba9523ae6..51980f7fa 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -22,7 +22,7 @@ import { GLOBAL_EVENTS, } from './utils/utils.js'; -const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list +const LCP_BLOCKS = ['hero', 'news-bar']; // add your LCP blocks to the list const TRACKED_PRODUCTS = []; const TRACKED_PRODUCTS_COMPARISON = []; From ce653b69dd608d8e8ae99d13f5512e60184f33aa Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 13:46:34 +0300 Subject: [PATCH 1255/1296] tried to improve loadEager logic --- _src/scripts/lib-franklin.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 342a73169..444e55ee6 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -752,19 +752,27 @@ export function decorateButtons(element) { export async function waitForLCP(lcpBlocks) { const block = document.querySelector('.block'); const hasLCPBlock = (block && lcpBlocks.includes(block.dataset.blockName)); - if (hasLCPBlock) await loadBlock(block); - - document.body.style.display = null; - const lcpCandidate = document.querySelector('main img'); - await new Promise((resolve) => { - if (lcpCandidate && !lcpCandidate.complete) { - lcpCandidate.setAttribute('loading', 'eager'); - lcpCandidate.addEventListener('load', resolve); - lcpCandidate.addEventListener('error', resolve); - } else { - resolve(); + if (hasLCPBlock) { + document.body.style.display = null; + for (const lcpBlockName of lcpBlocks) { + const lcpBlock = document.querySelector(`.${lcpBlockName}`); + if (!lcpBlock) { + continue; + } + await loadBlock(lcpBlock); } - }); + + const lcpCandidate = document.querySelector('main img'); + await new Promise((resolve) => { + if (lcpCandidate && !lcpCandidate.complete) { + lcpCandidate.setAttribute('loading', 'eager'); + lcpCandidate.addEventListener('load', resolve); + lcpCandidate.addEventListener('error', resolve); + } else { + resolve(); + } + }); + } } /** From d096fa7e85d3059817e22608898f751d3e82c180 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 13:53:11 +0300 Subject: [PATCH 1256/1296] improved waitForLCP further --- _src/scripts/lib-franklin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 444e55ee6..0e946478b 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -753,7 +753,6 @@ export async function waitForLCP(lcpBlocks) { const block = document.querySelector('.block'); const hasLCPBlock = (block && lcpBlocks.includes(block.dataset.blockName)); if (hasLCPBlock) { - document.body.style.display = null; for (const lcpBlockName of lcpBlocks) { const lcpBlock = document.querySelector(`.${lcpBlockName}`); if (!lcpBlock) { @@ -762,6 +761,7 @@ export async function waitForLCP(lcpBlocks) { await loadBlock(lcpBlock); } + document.body.style.display = null; const lcpCandidate = document.querySelector('main img'); await new Promise((resolve) => { if (lcpCandidate && !lcpCandidate.complete) { From 26df1367138688d264cea44f3cf05e5018aa5080 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 14:23:58 +0300 Subject: [PATCH 1257/1296] reverted to old performance for loadEager --- _src/scripts/lib-franklin.js | 32 ++++++++++++-------------------- _src/scripts/scripts.js | 2 +- 2 files changed, 13 insertions(+), 21 deletions(-) diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js index 0e946478b..342a73169 100644 --- a/_src/scripts/lib-franklin.js +++ b/_src/scripts/lib-franklin.js @@ -752,27 +752,19 @@ export function decorateButtons(element) { export async function waitForLCP(lcpBlocks) { const block = document.querySelector('.block'); const hasLCPBlock = (block && lcpBlocks.includes(block.dataset.blockName)); - if (hasLCPBlock) { - for (const lcpBlockName of lcpBlocks) { - const lcpBlock = document.querySelector(`.${lcpBlockName}`); - if (!lcpBlock) { - continue; - } - await loadBlock(lcpBlock); + if (hasLCPBlock) await loadBlock(block); + + document.body.style.display = null; + const lcpCandidate = document.querySelector('main img'); + await new Promise((resolve) => { + if (lcpCandidate && !lcpCandidate.complete) { + lcpCandidate.setAttribute('loading', 'eager'); + lcpCandidate.addEventListener('load', resolve); + lcpCandidate.addEventListener('error', resolve); + } else { + resolve(); } - - document.body.style.display = null; - const lcpCandidate = document.querySelector('main img'); - await new Promise((resolve) => { - if (lcpCandidate && !lcpCandidate.complete) { - lcpCandidate.setAttribute('loading', 'eager'); - lcpCandidate.addEventListener('load', resolve); - lcpCandidate.addEventListener('error', resolve); - } else { - resolve(); - } - }); - } + }); } /** diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 51980f7fa..ba9523ae6 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -22,7 +22,7 @@ import { GLOBAL_EVENTS, } from './utils/utils.js'; -const LCP_BLOCKS = ['hero', 'news-bar']; // add your LCP blocks to the list +const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list const TRACKED_PRODUCTS = []; const TRACKED_PRODUCTS_COMPARISON = []; From 162ef34983daa17cc76f5126296a8eb9e2e58c16 Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 4 Oct 2024 15:50:44 +0300 Subject: [PATCH 1258/1296] fix --- _src/blocks/footer/footer.js | 4 +- _src/blocks/header/header.js | 4 +- _src/blocks/new-prod-boxes/new-prod-boxes.js | 9 +- .../product-comparison-table.js | 4 +- .../products-sideview/products-sideview.js | 3 +- _src/blocks/products/products.js | 4 +- _src/scripts/breadcrumbs.js | 3 +- _src/scripts/scripts.js | 124 +----------------- _src/scripts/utils/utils.js | 122 +++++++++++++++++ 9 files changed, 140 insertions(+), 137 deletions(-) diff --git a/_src/blocks/footer/footer.js b/_src/blocks/footer/footer.js index b1ffdee7f..2a1898aa2 100644 --- a/_src/blocks/footer/footer.js +++ b/_src/blocks/footer/footer.js @@ -1,6 +1,6 @@ import { decorateIcons, getMetadata, loadBlocks } from '../../scripts/lib-franklin.js'; -import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js'; -import { decorateMain, getDomain } from '../../scripts/scripts.js'; +import { adobeMcAppendVisitorId, getDomain } from '../../scripts/utils/utils.js'; +import { decorateMain } from '../../scripts/scripts.js'; function wrapImgsInLinks(container) { const pictures = container.querySelectorAll('picture'); diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index da0f5b3cf..741eef7e0 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -2,9 +2,9 @@ import { getMetadata, decorateIcons, decorateButtons, decorateTags, } from '../../scripts/lib-franklin.js'; -import { adobeMcAppendVisitorId } from '../../scripts/utils/utils.js'; +import { adobeMcAppendVisitorId, getDomain } from '../../scripts/utils/utils.js'; -import { decorateBlockWithRegionId, decorateLinkWithLinkTrackingId, getDomain } from '../../scripts/scripts.js'; +import { decorateBlockWithRegionId, decorateLinkWithLinkTrackingId } from '../../scripts/scripts.js'; function createLoginModal() { const loginModal = document.querySelector('nav > div:nth-child(4)'); diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 47c743984..451b1fefa 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -2,9 +2,14 @@ /* eslint-disable no-undef */ /* eslint-disable max-len */ import { - getMetadata, getBuyLinkCountryPrefix, matchHeights, setDataOnBuyLinks, generateProductBuyLink, getPriceLocalMapByLocale, + getMetadata, + getBuyLinkCountryPrefix, + matchHeights, + setDataOnBuyLinks, + generateProductBuyLink, + getPriceLocalMapByLocale, + trackProduct, } from '../../scripts/utils/utils.js'; -import { trackProduct } from '../../scripts/scripts.js'; import { Target } from '../../scripts/target.js'; /** diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 2b47078b8..93ea25378 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -4,9 +4,9 @@ import { fetchProduct, matchHeights, setDataOnBuyLinks, - generateProductBuyLink, formatPrice, + generateProductBuyLink, formatPrice, trackProduct, + getDomain, } from '../../scripts/utils/utils.js'; -import { getDomain, trackProduct } from '../../scripts/scripts.js'; const fetchedProducts = []; diff --git a/_src/blocks/products-sideview/products-sideview.js b/_src/blocks/products-sideview/products-sideview.js index b2612ae69..32a2a2f5c 100644 --- a/_src/blocks/products-sideview/products-sideview.js +++ b/_src/blocks/products-sideview/products-sideview.js @@ -4,9 +4,8 @@ import { getBuyLinkCountryPrefix, getDatasetFromSection, getPidFromUrl, - renderNanoBlocks, setDataOnBuyLinks, + renderNanoBlocks, setDataOnBuyLinks, getDomain, } from '../../scripts/utils/utils.js'; -import { getDomain } from '../../scripts/scripts.js'; const state = { firstProduct: null, diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index cf68b7a51..13291e6ca 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -5,11 +5,9 @@ import { createTag, generateProductBuyLink, matchHeights, - setDataOnBuyLinks, formatPrice, adobeMcAppendVisitorId, + setDataOnBuyLinks, formatPrice, adobeMcAppendVisitorId, trackProduct, getDomain, } from '../../scripts/utils/utils.js'; -import { getDomain, trackProduct } from '../../scripts/scripts.js'; - // all avaiable text variables const TEXT_VARIABLES_MAPPING = [ { diff --git a/_src/scripts/breadcrumbs.js b/_src/scripts/breadcrumbs.js index 07580fd20..dc635c212 100644 --- a/_src/scripts/breadcrumbs.js +++ b/_src/scripts/breadcrumbs.js @@ -2,10 +2,11 @@ import { createTag, fetchIndex, fixExcelFilterZeroes, + getDomain, } from './utils/utils.js'; // eslint-disable-next-line import/no-cycle -import { decorateBlockWithRegionId, getDomain } from './scripts.js'; +import { decorateBlockWithRegionId } from './scripts.js'; function prependSlash(path) { return path.startsWith('/') ? path : `/${path}`; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index ba9523ae6..534800f9d 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -19,12 +19,10 @@ import { createTag, getDefaultLanguage, getParamValue, - GLOBAL_EVENTS, + GLOBAL_EVENTS, pushProductsToDataLayer, pushToDataLayer, pushTrialDownloadToDataLayer, } from './utils/utils.js'; const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list -const TRACKED_PRODUCTS = []; -const TRACKED_PRODUCTS_COMPARISON = []; export const SUPPORTED_LANGUAGES = ['en']; export const DEFAULT_LANGUAGE = getDefaultLanguage(); @@ -175,10 +173,6 @@ export function getEnvironment(hostname) { return 'dev'; } -export function getDomain() { - return window.location.pathname.split('/').filter((item) => item)[0]; -} - export function getLocalizedResourceUrl(resourceName) { const { pathname } = window.location; const lastCharFromUrl = pathname.charAt(pathname.length - 1); @@ -206,126 +200,10 @@ function setPageLanguage(param) { createMetadata('footer', `${getLocalizedResourceUrl('footer')}`); } -export function pushToDataLayer(event, payload) { - if (!event) { - // eslint-disable-next-line no-console - console.error('The data layer event is missing'); - return; - } - if (!window.adobeDataLayer) { - window.adobeDataLayer = []; - window.adobeDataLayerInPage = true; - } - window.adobeDataLayer.push({ event, ...payload }); -} - export function getTags(tags) { return tags ? tags.split(':').filter((tag) => !!tag).map((tag) => tag.trim()) : []; } -export function trackProduct(product, location = '') { - // eslint-disable-next-line max-len - if (!product && product.length === 0) return; - if (location && location === 'comparison') { - // eslint-disable-next-line max-len - const isDuplicate = TRACKED_PRODUCTS_COMPARISON.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); - if (!isDuplicate) TRACKED_PRODUCTS_COMPARISON.push(product); - } else { - // eslint-disable-next-line max-len - const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); - if (!isDuplicate) TRACKED_PRODUCTS.push(product); - } -} - -export function pushProductsToDataLayer() { - const url = window.location.href; - const isHomepageSolutions = url.split('/').filter(Boolean).pop(); - const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; - - // eslint-disable-next-line arrow-body-style - const mapProductData = (products) => { - return products.map((product) => { - const { - platformProductId, - productId, - productName, - devices, - subscription, - version, - basePrice, - discount, - discountRate, - currencyIso, - actualPrice, - } = product; - - return Object.fromEntries( - Object.entries({ - ID: platformProductId || productId, - name: productName, - devices, - subscription, - version, - basePrice, - discountValue: discount, - discountRate, - currency: currencyIso, - priceWithTax: actualPrice, - }).filter(([, value]) => value !== undefined), - ); - }); - }; - - if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { - TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); - } - - const dataLayerProduct = { - product: { - [key]: mapProductData(TRACKED_PRODUCTS), - // eslint-disable-next-line max-len - ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), - }, - }; - - pushToDataLayer('product loaded', dataLayerProduct); -} - -export function pushTrialDownloadToDataLayer() { - const getTrialID = () => ( - // eslint-disable-next-line max-len - ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) - || getMetadata('breadcrumb-title') - || getMetadata('og:title') - ); - - const url = window.location.href; - const currentPage = url.split('/').filter(Boolean).pop(); - const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; - const downloadType2 = currentPage === 'thank-you' ? 'downloaded' : 'trial'; - - const pushTrialData = () => { - const dataLayerDownload = { - product: { - [downloadType2]: [{ ID: getTrialID() }], - }, - }; - pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); - }; - - const sections = document.querySelectorAll('a.button.modal'); - if (sections.length) { - sections.forEach((button) => { - const href = button.getAttribute('href'); - if (href.includes('fragments/thank-you-for-downloading') || href.includes('fragments/get-bitdefender')) { - button.addEventListener('click', pushTrialData); - } - }); - } else if (currentPage === 'thank-you') { - pushTrialData(); - } -} - export function decorateBlockWithRegionId(element, id) { // we could consider to use `element.setAttribute('s-object-region', id);` in the future if (element) element.id = id; diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 4d790fd22..b28b4a6a8 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,6 +1,8 @@ import { Target, Visitor } from '../target.js'; import ZuoraNLClass from '../zuora.js'; +const TRACKED_PRODUCTS = []; +const TRACKED_PRODUCTS_COMPARISON = []; export const IANA_BY_REGION_MAP = new Map([ [3, { locale: 'en-GB', label: 'united kingdom' }], [4, { locale: 'au-AU', label: 'australia' }], @@ -814,3 +816,123 @@ export function getPidFromUrl() { const url = new URL(window.location.href); return url.searchParams.get('pid') || getMetadata('pid'); } + +export function pushToDataLayer(event, payload) { + if (!event) { + // eslint-disable-next-line no-console + console.error('The data layer event is missing'); + return; + } + if (!window.adobeDataLayer) { + window.adobeDataLayer = []; + window.adobeDataLayerInPage = true; + } + window.adobeDataLayer.push({ event, ...payload }); +} + +export function trackProduct(product, location = '') { + // eslint-disable-next-line max-len + if (!product && product.length === 0) return; + if (location && location === 'comparison') { + // eslint-disable-next-line max-len + const isDuplicate = TRACKED_PRODUCTS_COMPARISON.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); + if (!isDuplicate) TRACKED_PRODUCTS_COMPARISON.push(product); + } else { + // eslint-disable-next-line max-len + const isDuplicate = TRACKED_PRODUCTS.find((p) => p.platformProductId === product.platformProductId && p.variantId === product.variantId); + if (!isDuplicate) TRACKED_PRODUCTS.push(product); + } +} + +export function pushTrialDownloadToDataLayer() { + const getTrialID = () => ( + // eslint-disable-next-line max-len + ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) + || getMetadata('breadcrumb-title') + || getMetadata('og:title') + ); + + const url = window.location.href; + const currentPage = url.split('/').filter(Boolean).pop(); + const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; + const downloadType2 = currentPage === 'thank-you' ? 'downloaded' : 'trial'; + + const pushTrialData = () => { + const dataLayerDownload = { + product: { + [downloadType2]: [{ ID: getTrialID() }], + }, + }; + pushToDataLayer(`${downloadType} downloaded`, dataLayerDownload); + }; + + const sections = document.querySelectorAll('a.button.modal'); + if (sections.length) { + sections.forEach((button) => { + const href = button.getAttribute('href'); + if (href.includes('fragments/thank-you-for-downloading') || href.includes('fragments/get-bitdefender')) { + button.addEventListener('click', pushTrialData); + } + }); + } else if (currentPage === 'thank-you') { + pushTrialData(); + } +} + +export function pushProductsToDataLayer() { + const url = window.location.href; + const isHomepageSolutions = url.split('/').filter(Boolean).pop(); + const key = isHomepageSolutions === 'consumer' ? 'all' : 'info'; + + // eslint-disable-next-line arrow-body-style + const mapProductData = (products) => { + return products.map((product) => { + const { + platformProductId, + productId, + productName, + devices, + subscription, + version, + basePrice, + discount, + discountRate, + currencyIso, + actualPrice, + } = product; + + return Object.fromEntries( + Object.entries({ + ID: platformProductId || productId, + name: productName, + devices, + subscription, + version, + basePrice, + discountValue: discount, + discountRate, + currency: currencyIso, + priceWithTax: actualPrice, + }).filter(([, value]) => value !== undefined), + ); + }); + }; + + if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { + TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); + } + + const dataLayerProduct = { + product: { + [key]: mapProductData(TRACKED_PRODUCTS), + // eslint-disable-next-line max-len + ...(TRACKED_PRODUCTS_COMPARISON.length && { comparison: mapProductData(TRACKED_PRODUCTS_COMPARISON) }), + }, + }; + + pushToDataLayer('product loaded', dataLayerProduct); +} + +export function getDomain() { + return window.location.pathname.split('/').filter((item) => item)[0]; +} From c378d32eb80ec484f6205c7057691876b19b753b Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Fri, 4 Oct 2024 15:58:37 +0300 Subject: [PATCH 1259/1296] removed from scripts.ks --- _src/blocks/box-carousel/box-carousel.js | 3 +-- _src/blocks/marquee/marquee.js | 3 +-- _src/blocks/trusted-main-carousel/trusted-main-carousel.js | 3 +-- _src/scripts/scripts.js | 5 ----- _src/scripts/utils/utils.js | 5 +++++ 5 files changed, 8 insertions(+), 11 deletions(-) diff --git a/_src/blocks/box-carousel/box-carousel.js b/_src/blocks/box-carousel/box-carousel.js index 4e08f4d14..25a290c95 100644 --- a/_src/blocks/box-carousel/box-carousel.js +++ b/_src/blocks/box-carousel/box-carousel.js @@ -1,6 +1,5 @@ import { decorateIcons } from '../../scripts/lib-franklin.js'; -import { debounce } from '../../scripts/utils/utils.js'; -import { isView } from '../../scripts/scripts.js'; +import { debounce, isView } from '../../scripts/utils/utils.js'; export default async function decorate(block) { const [titleEl, ...slides] = [...block.children]; diff --git a/_src/blocks/marquee/marquee.js b/_src/blocks/marquee/marquee.js index 8bacc8c1e..ce8f1b073 100644 --- a/_src/blocks/marquee/marquee.js +++ b/_src/blocks/marquee/marquee.js @@ -1,5 +1,4 @@ -import { debounce, getDatasetFromSection } from '../../scripts/utils/utils.js'; -import { isView } from '../../scripts/scripts.js'; +import { debounce, getDatasetFromSection, isView } from '../../scripts/utils/utils.js'; export default async function decorate(block) { const defaultBackgroundColor = '#004299'; diff --git a/_src/blocks/trusted-main-carousel/trusted-main-carousel.js b/_src/blocks/trusted-main-carousel/trusted-main-carousel.js index 3462b16e7..c5138b1b4 100644 --- a/_src/blocks/trusted-main-carousel/trusted-main-carousel.js +++ b/_src/blocks/trusted-main-carousel/trusted-main-carousel.js @@ -1,5 +1,4 @@ -import { isView } from '../../scripts/scripts.js'; -import { debounce } from '../../scripts/utils/utils.js'; +import { debounce, isView } from '../../scripts/utils/utils.js'; export default async function decorate(block) { const slides = [...block.children]; diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 534800f9d..d98f46a85 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -51,11 +51,6 @@ function initMobileDetector(viewport) { document.body.append(mobileDetectorDiv); } -export function isView(viewport) { - const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; - return !!(element && getComputedStyle(element).display !== 'none'); -} - /** * Creates a meta tag with the given name and value and appends it to the head. * @param {String} name The name of the meta tag diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index b28b4a6a8..014283a2b 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -936,3 +936,8 @@ export function pushProductsToDataLayer() { export function getDomain() { return window.location.pathname.split('/').filter((item) => item)[0]; } + +export function isView(viewport) { + const element = document.querySelectorAll(`[data-${viewport}-detector]`)[0]; + return !!(element && getComputedStyle(element).display !== 'none'); +} From c03b7cad9e4f535e532921eae578dfbf3dbf4d05 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 4 Oct 2024 17:42:44 +0300 Subject: [PATCH 1260/1296] aligned awards images --- _src/blocks/columns/columns.css | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 0e6976496..efdeebb53 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -148,7 +148,15 @@ /* awards styling */ .columns.awards > div { - row-gap: 30px; + gap:30px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; +} + +.columns.awards div > .columns-img-col{ + margin-bottom: 0; } .columns img { @@ -1153,6 +1161,12 @@ main .section.two-columns .right-col .products.plans a.button:any-link { } @media (min-width: 768px) { + .columns.awards > div{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + .v2 .columns > div { flex-direction: row; } From 8af8ce440030d5d39e58b6f8161827e0fbf2a168 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 4 Oct 2024 17:59:02 +0300 Subject: [PATCH 1261/1296] aligned awards images --- _src/blocks/columns/columns.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index efdeebb53..5423e9a6e 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -699,6 +699,10 @@ font-size: var(--heading-font-size-m); margin-bottom: 10px; } + + .columns.awards > div > div{ + flex: unset; + } } @media (min-width: 1200px) { From 6e85c9eb6f7975a960fb569cd6ed966607aead0e Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 4 Oct 2024 18:05:40 +0300 Subject: [PATCH 1262/1296] aligned awards images --- _src/blocks/columns/columns.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 5423e9a6e..2441ba9e7 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -150,8 +150,8 @@ .columns.awards > div { gap:30px; display: flex; - flex-direction: column; flex-wrap: wrap; + flex-direction: row; align-items: center; } @@ -1165,12 +1165,6 @@ main .section.two-columns .right-col .products.plans a.button:any-link { } @media (min-width: 768px) { - .columns.awards > div{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - .v2 .columns > div { flex-direction: row; } From ffacf9657b03cd82b8fa25653b959c6a31705dc6 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Fri, 4 Oct 2024 18:18:24 +0300 Subject: [PATCH 1263/1296] aligned awards images --- _src/blocks/columns/columns.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 2441ba9e7..d7ca548f2 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -557,6 +557,10 @@ order: unset; } + .columns.awards > div > div { + flex: 0; + } + .columns-wrapper { max-width: var(--section-desktop-max-width); padding: 0 var(--section-desktop-padding); @@ -699,10 +703,6 @@ font-size: var(--heading-font-size-m); margin-bottom: 10px; } - - .columns.awards > div > div{ - flex: unset; - } } @media (min-width: 1200px) { @@ -712,6 +712,10 @@ padding-right: 20px; } + .columns.awards > div > div { + flex: 1; + } + .percent-table .columns table tr td:first-of-type { padding-right: 1.5em; } From dce536c0692a050370493aacab394a04636a7246 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Fri, 4 Oct 2024 19:39:21 +0300 Subject: [PATCH 1264/1296] fixed data layer --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 16 +-- .../product-comparison-table.js | 10 +- _src/blocks/products/products.js | 10 +- .../sticky-navigation/sticky-navigation.js | 30 +---- _src/scripts/delayed.js | 5 + _src/scripts/scripts.js | 7 +- _src/scripts/target.js | 114 ------------------ _src/scripts/utils/utils.js | 39 +++--- 8 files changed, 54 insertions(+), 177 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 451b1fefa..623b32a75 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -9,8 +9,9 @@ import { generateProductBuyLink, getPriceLocalMapByLocale, trackProduct, + GLOBAL_V2_LOCALES, + getLocale, } from '../../scripts/utils/utils.js'; -import { Target } from '../../scripts/target.js'; /** * Utility function to round prices and percentages @@ -113,6 +114,11 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n if (!buyLinkPid) { buyLinkPid = url.searchParams.get('pid') || getMetadata('pid'); } + + if (GLOBAL_V2_LOCALES.includes(getLocale())) { + buyLinkPid = 'pid.global_v2'; + } + if (!buyLinkPid) { buyLinkPid = ''; } @@ -265,7 +271,7 @@ function createPlanSwitcher(radioButtons, cardNumber, prodName, prodMonthlyName, export default async function decorate(block, options) { const { // eslint-disable-next-line no-unused-vars - products, familyProducts, monthlyProducts, priceType, mainProduct, + products, familyProducts, monthlyProducts, priceType, pid, mainProduct, addOnProducts, addOnMonthlyProducts, type, hideDecimals, thirdRadioButtonProducts, saveText, addonProductName, } = block.closest('.section').dataset; // if options exists, this means the component is being called from aem @@ -274,12 +280,6 @@ export default async function decorate(block, options) { block = block.querySelector('.block'); } - const targetCampain = await Target.getCampaign(); - let { pid } = block.closest('.section').dataset; - if (targetCampain) { - pid = targetCampain; - } - const blockParent = block.closest('.section'); blockParent.classList.add('we-container'); diff --git a/_src/blocks/product-comparison-table/product-comparison-table.js b/_src/blocks/product-comparison-table/product-comparison-table.js index 93ea25378..033cb5e37 100644 --- a/_src/blocks/product-comparison-table/product-comparison-table.js +++ b/_src/blocks/product-comparison-table/product-comparison-table.js @@ -36,7 +36,7 @@ function customRound(value) { * @param v variant * @returns a model */ -async function toModel(productCode, variantId, v) { +function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -57,7 +57,7 @@ async function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: await generateProductBuyLink(v, productCode), + url: generateProductBuyLink(v, productCode), }; } @@ -76,8 +76,8 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const priceAppliedOnTime = document.createElement('p'); priceRoot.appendChild(priceAppliedOnTime); fetchProduct(code, variant) - .then(async (product) => { - const m = await toModel(code, variant, product); + .then((product) => { + const m = toModel(code, variant, product); const currentProduct = { code, variant, product }; fetchedProducts.push(currentProduct); // eslint-disable-next-line camelcase @@ -108,7 +108,7 @@ createNanoBlock('priceComparison', (code, variant, label, block, productIndex, c const years = variantSplit[1].split('y')[0]; // eslint-disable-next-line max-len - buyLink.href = currentProduct.product.buy_link || await generateProductBuyLink(currentProduct, currentProduct.code, units, years); + buyLink.href = currentProduct.product.buy_link || generateProductBuyLink(currentProduct, currentProduct.code, units, years); const dataInfo = { productId: currentProduct.code, diff --git a/_src/blocks/products/products.js b/_src/blocks/products/products.js index 13291e6ca..b27bd4e64 100644 --- a/_src/blocks/products/products.js +++ b/_src/blocks/products/products.js @@ -42,7 +42,7 @@ function customRound(value) { * @param v variant * @returns a model */ -async function toModel(productCode, variantId, v) { +function toModel(productCode, variantId, v) { return { productId: v.product_id, productName: v.product_name, @@ -63,7 +63,7 @@ async function toModel(productCode, variantId, v) { // eslint-disable-next-line max-len discountRate: v.discount ? Math.floor(((v.price - v.discount.discounted_price) / v.price) * 100) : 0, currencyIso: v.currency_iso, - url: await generateProductBuyLink(v, productCode), + url: generateProductBuyLink(v, productCode), test: {}, }; } @@ -98,7 +98,7 @@ class ProductCard { async selectProductVariant(productCode, variantId) { const p = await fetchProduct(productCode, variantId); - this.model = await toModel(productCode, variantId, p); + this.model = toModel(productCode, variantId, p); this.notify(); } @@ -389,10 +389,10 @@ function renderFeaturedSavings(mv, text = 'Save', percent = '') { */ function renderLowestPrice(code, variant, monthly = '', text = '') { const root = document.createElement('p'); - fetchProduct(code, variant).then(async (product) => { + fetchProduct(code, variant).then((product) => { const currentDomain = getDomain(); const formattedPriceParams = [product.currency_iso, null, currentDomain]; - const m = await toModel(code, variant, product); + const m = toModel(code, variant, product); const isMonthly = monthly.toLowerCase() === 'monthly'; // eslint-disable-next-line max-len const price = formatPrice(isMonthly ? customRound(m.actualPrice / 12) : m.actualPrice, ...formattedPriceParams); diff --git a/_src/blocks/sticky-navigation/sticky-navigation.js b/_src/blocks/sticky-navigation/sticky-navigation.js index 2e3ad5986..1b9a47428 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.js +++ b/_src/blocks/sticky-navigation/sticky-navigation.js @@ -1,6 +1,4 @@ import { STICKY_NAVIGATION_DATASET_KEY } from '../../scripts/lib-franklin.js'; -import { Target, Visitor } from '../../scripts/target.js'; -import { getMetadata } from '../../scripts/utils/utils.js'; function scrollToAnchorWithOffset(anchorId) { const anchorElement = document.getElementById(anchorId); @@ -55,7 +53,7 @@ function renderStickyNavMenu() { return stickyNavMenu; } -async function renderStickyNavigation(block) { +function renderStickyNavigation(block) { const menuWithButton = document.createElement('div'); menuWithButton.classList.add('menu-with-button'); @@ -75,26 +73,8 @@ async function renderStickyNavigation(block) { mobileDropDown.innerText = stickyNavMenu.querySelector('li').innerText; - const stickyNavButtonContainer = block.querySelector('.button-container'); - - const stickyNavLink = stickyNavButtonContainer?.querySelector('a'); - - // append visitor IDs and pid to everything that is not a hash link - if (stickyNavLink && !stickyNavLink.href.includes('#')) { - const targetCampain = await Target.getCampaign(); - - const pageUrl = new URL(window.location.href); - const buyLinkUrl = new URL(stickyNavLink.href); - - const pid = targetCampain || pageUrl.searchParams.get('pid') || getMetadata('pid'); - if (pid && stickyNavLink.href.includes('/buy/')) { - buyLinkUrl.searchParams.set('pid', pid); - } - - stickyNavLink.href = await Visitor.appendVisitorIDsTo(buyLinkUrl.href); - } - - if (stickyNavButtonContainer) menuWithButton.appendChild(stickyNavButtonContainer); + const stickyNavButton = block.querySelector('.button-container'); + if (stickyNavButton) menuWithButton.appendChild(stickyNavButton); block.replaceChildren(mobileDropDown); block.appendChild(menuWithButton); @@ -158,8 +138,8 @@ function onScroll(stickyNav) { updateStickyNavActiveMenuItem(stickyNav); } -export default async function decorate(block) { - const stickyNav = await renderStickyNavigation(block); +export default function decorate(block) { + const stickyNav = renderStickyNavigation(block); // listen to scroll event to stick the nav on the top and update the current visible section document.addEventListener('scroll', () => onScroll(stickyNav)); diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index ad124f4c6..a1f5b7788 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -3,6 +3,7 @@ import { sampleRUM, getMetadata, } from './lib-franklin.js'; +import { pushToDataLayer, pushProductsToDataLayer } from './utils/utils.js'; // eslint-disable-next-line import/no-cycle import { @@ -13,6 +14,10 @@ import { loadBreadcrumbs } from './breadcrumbs.js'; // Core Web Vitals RUM collection sampleRUM('cwv'); +// add products to data layer +pushProductsToDataLayer(); +pushToDataLayer('page loaded'); + // Load breadcrumbs loadBreadcrumbs(); diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index d98f46a85..e9b673a8b 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -19,7 +19,7 @@ import { createTag, getDefaultLanguage, getParamValue, - GLOBAL_EVENTS, pushProductsToDataLayer, pushToDataLayer, pushTrialDownloadToDataLayer, + GLOBAL_EVENTS, pushToDataLayer, pushTrialDownloadToDataLayer, } from './utils/utils.js'; const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list @@ -619,7 +619,6 @@ async function loadLazy(doc) { loadHeader(doc.querySelector('header')); } - loadTrackers(); await loadBlocks(main); const { hash } = window.location; @@ -640,6 +639,8 @@ async function loadLazy(doc) { loadCSS(`${window.hlx.codeBasePath}/scripts/template-factories/${templateMetadata}-lazy.css`); } + loadTrackers(); + sampleRUM('lazy'); sampleRUM.observe(main.querySelectorAll('div[data-block-name]')); sampleRUM.observe(main.querySelectorAll('picture > img')); @@ -740,9 +741,7 @@ async function loadPage() { adobeMcAppendVisitorId('main'); - pushProductsToDataLayer(); pushTrialDownloadToDataLayer(); - pushToDataLayer('page loaded'); loadDelayed(); } diff --git a/_src/scripts/target.js b/_src/scripts/target.js index b8e9b4374..e966fcc7a 100644 --- a/_src/scripts/target.js +++ b/_src/scripts/target.js @@ -3,120 +3,6 @@ import { getMetadata, sampleRUM } from './lib-franklin.js'; const ADOBE_TARGET_SESSION_ID_PARAM = 'adobeTargetSessionId'; -export class Visitor { - static #instanceID = '0E920C0F53DA9E9B0A490D45@AdobeOrg'; - - static #instance = null; - - static #staticInit = new Promise((resolve) => { - if (window.Visitor) { - Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); - resolve(); - return; - } - - document.addEventListener('at-library-loaded', () => { - if (window.Visitor) { - Visitor.#instance = window.Visitor.getInstance(Visitor.#instanceID); - } - resolve(); - }); - }); - - /** - * - * @param {string} url - * @returns {Promise} - */ - static async appendVisitorIDsTo(url) { - await this.#staticInit; - return !this.#instance || url.includes('adobe_mc') ? url : this.#instance.appendVisitorIDsTo(url); - } - - /** - * - * @returns {Promise} - */ - static async getConsumerId() { - await this.#staticInit; - // eslint-disable-next-line no-underscore-dangle - return this.#instance?._supplementalDataIDCurrent ? this.#instance._supplementalDataIDCurrent : ''; - } - - /** - * - * @returns {Promise} - */ - static async getMarketingCloudVisitorId() { - await this.#staticInit; - return this.#instance ? this.#instance.getMarketingCloudVisitorID() : ''; - } -} -window.BD = { Visitor, ...window.BD }; - -export class Target { - /** - * Mbox describing an offer - * @typedef {{content: {offer: string, block:string} | {pid}, type: string|null}} Mbox - */ - - /** - * @type {Mbox} - */ - static offers = null; - - static #staticInit = new Promise((resolve) => { - /** Target is loaded and we wait for it to finish so we can get the offer */ - if (window.adobe?.target) { - this.#getOffers().then(resolve); - return; - } - - document.addEventListener('at-library-loaded', async () => { - await this.#getOffers(); - resolve(); - }); - }); - - /** - * https://bitdefender.atlassian.net/wiki/spaces/WWW/pages/1661993460/Activating+Promotions+Enhancements+Target - * @returns {Promise} - */ - static async getCampaign() { - await this.#staticInit; - return this.offers?.['initSelector-mbox']?.content?.pid || null; - } - - static async #getOffers() { - try { - this.offers = await window.adobe?.target?.getOffers({ - consumerId: await Visitor.getConsumerId(), - request: { - id: { - marketingCloudVisitorId: await Visitor.getMarketingCloudVisitorId(), - }, - execute: { - mboxes: [ - { index: 0, name: 'initSelector-mbox' }, - ], - }, - }, - }); - - this.offers = this.offers?.execute?.mboxes?.reduce((acc, mbox) => { - acc[mbox.name] = {}; - acc[mbox.name].content = mbox?.options?.[0]?.content; - acc[mbox.name].type = mbox?.options?.[0]?.type; - return acc; - }, {}); - } catch (e) { - // eslint-disable-next-line no-console - console.warn(e); - } - } -} -window.BD = { Target, ...window.BD }; - /** * Convert a URL to a relative URL. * @param url diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 014283a2b..29dd26dcc 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -1,8 +1,15 @@ -import { Target, Visitor } from '../target.js'; import ZuoraNLClass from '../zuora.js'; const TRACKED_PRODUCTS = []; const TRACKED_PRODUCTS_COMPARISON = []; + +export function getLocale() { + const regex = /\/([a-z]{2}-[a-z]{2})\//i; // match locale with slashes + // extract locale without slashes + return window.location.pathname.match(regex)[1]; +} + +export const GLOBAL_V2_LOCALES = ['en-bz', 'en-lv']; export const IANA_BY_REGION_MAP = new Map([ [3, { locale: 'en-GB', label: 'united kingdom' }], [4, { locale: 'au-AU', label: 'australia' }], @@ -317,24 +324,21 @@ export function getPriceLocalMapByLocale() { return PRICE_LOCALE_MAP.get(locale) || PRICE_LOCALE_MAP.get('en-us'); } -export async function generateProductBuyLink(product, productCode, month = null, years = null) { +export function generateProductBuyLink(product, productCode, month = null, years = null) { if (isZuora()) { return product.buy_link; } const m = product.variation?.dimension_value || month; const y = product.variation?.years || years; + let pid = ''; - const forceCountry = getPriceLocalMapByLocale().force_country; - const url = new URL(window.location.href); - const targetCampain = await Target.getCampaign(); - const pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); - const buyLink = new URL(`${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/`); - buyLink.searchParams.append('force_country', forceCountry); - if (pid) { - buyLink.searchParams.append('pid', pid); + if (GLOBAL_V2_LOCALES.includes(getLocale())) { + pid = 'pid.global_v2'; } - return Visitor.appendVisitorIDsTo(buyLink.href); + + const forceCountry = getPriceLocalMapByLocale().force_country; + return `${getBuyLinkCountryPrefix()}/${productCode}/${m}/${y}/${pid}?force_country=${forceCountry}`; } export function setDataOnBuyLinks(element, dataInfo) { @@ -365,8 +369,12 @@ export function formatPrice(price, currency, region = null, locale = null) { * hk - 51, tw - 52 */ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { - const targetCampain = await Target.getCampaign(); const url = new URL(window.location.href); + const locale = getLocale(); + if (GLOBAL_V2_LOCALES.includes(locale)) { + // eslint-disable-next-line no-param-reassign + pid = 'global_v2'; + } if (!isZuora()) { let FETCH_URL = 'https://www.bitdefender.com/site/Store/ajax'; @@ -375,7 +383,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { if (!pid) { // eslint-disable-next-line no-param-reassign - pid = targetCampain || url.searchParams.get('pid') || getMetadata('pid'); + pid = url.searchParams.get('pid') || getMetadata('pid'); } data.append('data', JSON.stringify({ @@ -413,7 +421,6 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } - const locale = window.location.pathname.split('/')[1]; const currentPriceSetup = PRICE_LOCALE_MAP.get(locale) || 'en-us'; const newData = JSON.parse(data.get('data')); FETCH_URL = `${FETCH_URL}?force_country=${currentPriceSetup.force_country}`; @@ -430,7 +437,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { body: data, }); - cacheResponse.set(code, response); + // cacheResponse.set(code, response); return findProductVariant(response, variant); } @@ -442,7 +449,7 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { const variantSplit = variant.split('-'); const units = variantSplit[0].split('u')[0]; const years = variantSplit[1].split('y')[0]; - const campaign = targetCampain || getParamValue('campaign'); + const campaign = getParamValue('campaign'); const zuoraResponse = await ZuoraNLClass.loadProduct(`${code}/${units}/${years}`, campaign); // zuoraResponse.ok = true; From db243eaea7b76a06098ecab5736063526967b41a Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Mon, 7 Oct 2024 10:33:20 +0300 Subject: [PATCH 1265/1296] fixed unreadable button text --- _src/styles/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index c34aba38b..618f9a0d0 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -1034,6 +1034,7 @@ a.button span.icon { a.button span.button-text { transition: transform .2s cubic-bezier(.4,0,.2,1); transform: translate(0, 0); + white-space: normal; } a.button:hover span.button-text { From c392a3079ebaf9f9a9642ae4fc7cb4b763cbbf74 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Mon, 7 Oct 2024 10:52:50 +0300 Subject: [PATCH 1266/1296] lint fix --- _src/blocks/columns/columns.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index d7ca548f2..194e75159 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -155,10 +155,6 @@ align-items: center; } -.columns.awards div > .columns-img-col{ - margin-bottom: 0; -} - .columns img { width: 100%; } @@ -711,7 +707,7 @@ padding-left: 20px; padding-right: 20px; } - + /* stylelint-disable-next-line selector-class-pattern */ .columns.awards > div > div { flex: 1; } From 5b4986c09267ebc6a1a20470e50974ea36e2b79e Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Mon, 7 Oct 2024 10:57:05 +0300 Subject: [PATCH 1267/1296] lint fix --- _src/blocks/columns/columns.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 194e75159..09957b1bf 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -586,13 +586,17 @@ padding: 5em 0 3em; margin-top: 0; } - + /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark .columns-img-col img { margin-top: -200px; margin-bottom: -3em; } + .columns.awards > div > div{ + flex:0; + } + .columns-container.chat-options .columns > div > div { padding: 2em; } @@ -707,7 +711,7 @@ padding-left: 20px; padding-right: 20px; } - /* stylelint-disable-next-line selector-class-pattern */ + .columns.awards > div > div { flex: 1; } From 74a909d6d53c88d040f1f542cd20f3b3f08576db Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Mon, 7 Oct 2024 10:59:17 +0300 Subject: [PATCH 1268/1296] lint fix --- _src/blocks/columns/columns.css | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/_src/blocks/columns/columns.css b/_src/blocks/columns/columns.css index 09957b1bf..20457bbda 100644 --- a/_src/blocks/columns/columns.css +++ b/_src/blocks/columns/columns.css @@ -553,9 +553,6 @@ order: unset; } - .columns.awards > div > div { - flex: 0; - } .columns-wrapper { max-width: var(--section-desktop-max-width); @@ -586,6 +583,10 @@ padding: 5em 0 3em; margin-top: 0; } + + .columns.awards > div > div { + flex: 0; + } /* stylelint-disable-next-line selector-class-pattern */ .section.b_mark .columns-img-col img { @@ -593,10 +594,6 @@ margin-bottom: -3em; } - .columns.awards > div > div{ - flex:0; - } - .columns-container.chat-options .columns > div > div { padding: 2em; } From c71f463a69d70d68ba8df7e28a80a0aea651f41d Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Mon, 7 Oct 2024 12:46:03 +0300 Subject: [PATCH 1269/1296] fixed stickynav button --- _src/blocks/sticky-navigation/sticky-navigation.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/blocks/sticky-navigation/sticky-navigation.css b/_src/blocks/sticky-navigation/sticky-navigation.css index 12a41ad8d..5aa0abdc2 100644 --- a/_src/blocks/sticky-navigation/sticky-navigation.css +++ b/_src/blocks/sticky-navigation/sticky-navigation.css @@ -126,6 +126,10 @@ main .section.sticky-navigation-container { text-transform: capitalize; } +.sticky-navigation .button-container a .button-text{ + white-space: nowrap; +} + @media (min-width: 992px) { /* desktop */ .sticky-navigation { border-bottom: 1px solid var(--sticky-nav-border-color); From caa4cad414ef4e9e2cf09c8d27c5bd9b89af026e Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Mon, 7 Oct 2024 13:30:42 +0300 Subject: [PATCH 1270/1296] Refactor getLocale function to handle default locale when no match is found --- _src/scripts/scripts.js | 6 ++---- _src/scripts/utils/utils.js | 8 +++++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index e9b673a8b..afbc23ea0 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -20,6 +20,7 @@ import { getDefaultLanguage, getParamValue, GLOBAL_EVENTS, pushToDataLayer, pushTrialDownloadToDataLayer, + getLocale, } from './utils/utils.js'; const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list @@ -448,10 +449,7 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { const environment = getEnvironment(hostname, languageCountry.country); const tags = getTags(getMetadata(METADATA_ANALYTICS_TAGS)); - // get locale - const regex = /\/([a-z]{2}-[a-z]{2})\//i; // match locale with slashes - // extract locale without slashes - const locale = pathName.match(regex)[1]; + const locale = getLocale(); if (tags.length) { pushToDataLayer('page load started', { diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 29dd26dcc..10e46c7fa 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -6,7 +6,13 @@ const TRACKED_PRODUCTS_COMPARISON = []; export function getLocale() { const regex = /\/([a-z]{2}-[a-z]{2})\//i; // match locale with slashes // extract locale without slashes - return window.location.pathname.match(regex)[1]; + const match = window.location.pathname.match(regex); + const defaultLocale = 'en-us'; + if (match) { + return match[1]; + } + + return defaultLocale; } export const GLOBAL_V2_LOCALES = ['en-bz', 'en-lv']; From bf420fe6d4c1da3196ddb623a02903a03a21bb4e Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 7 Oct 2024 16:45:34 +0300 Subject: [PATCH 1271/1296] DEX-20169 --- _src/scripts/utils/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 4d790fd22..1d84562b6 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -351,8 +351,8 @@ export function formatPrice(price, currency, region = null, locale = null) { if (!price) { return null; } - const loc = region ? IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US' : locale; - return new Intl.NumberFormat(loc, { style: 'currency', currency }).format(price); + // const loc = region ? IANA_BY_REGION_MAP.get(Number(region))?.locale || 'en-US' : locale; + return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price); } /** From a65ed8a26e24e69a87beb42d829adb675e2d43de Mon Sep 17 00:00:00 2001 From: ext-vradulescu Date: Mon, 7 Oct 2024 16:51:23 +0300 Subject: [PATCH 1272/1296] DEX-20169 --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 1d84562b6..837288737 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -347,7 +347,7 @@ export function setDataOnBuyLinks(element, dataInfo) { if (variation.variation_name) element.dataset.variation = variation.variation_name; } -export function formatPrice(price, currency, region = null, locale = null) { +export function formatPrice(price, currency) { if (!price) { return null; } From fcd83491942ed11cb67a6f737af1554c0c3bbda7 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 7 Oct 2024 18:06:33 +0300 Subject: [PATCH 1273/1296] fixed mega menu --- _src/blocks/header/header.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index 741eef7e0..dcbbeb98f 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -442,8 +442,10 @@ async function runDefaultHeaderLogic(block) { }); }); - // TODO: please remove second condition when the banner changes reach - if (window.location.hostname.includes('www.')) { + // TODO: please remove this if statement when the mega menu for these domains gets created in AEM + const regex = /\/(zh-hk|zh-tw)\//i; + const matches = window.location.href.match(regex); + if (matches) { const newScriptFile = document.createElement('script'); newScriptFile.src = '/_src/scripts/vendor/mega-menu/mega-menu.js'; newScriptFile.defer = true; From 499b2a2c6a4f265b4205a2ba020bf91b1e7d6e72 Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 7 Oct 2024 18:10:16 +0300 Subject: [PATCH 1274/1296] fixed linter --- _src/blocks/header/header.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/_src/blocks/header/header.js b/_src/blocks/header/header.js index dcbbeb98f..80eaf6f19 100644 --- a/_src/blocks/header/header.js +++ b/_src/blocks/header/header.js @@ -442,7 +442,8 @@ async function runDefaultHeaderLogic(block) { }); }); - // TODO: please remove this if statement when the mega menu for these domains gets created in AEM + // TODO: please remove this if statement when the mega menu + // for these domains gets created in AEM const regex = /\/(zh-hk|zh-tw)\//i; const matches = window.location.href.match(regex); if (matches) { From 362d8ad912e541ceb908fd71893bf4a38a63060b Mon Sep 17 00:00:00 2001 From: "iconstantin@bitdefender.com" Date: Mon, 7 Oct 2024 18:15:58 +0300 Subject: [PATCH 1275/1296] fixed pid placement in the buy link for new prod boxes --- _src/blocks/new-prod-boxes/new-prod-boxes.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/_src/blocks/new-prod-boxes/new-prod-boxes.js b/_src/blocks/new-prod-boxes/new-prod-boxes.js index 623b32a75..457f10766 100644 --- a/_src/blocks/new-prod-boxes/new-prod-boxes.js +++ b/_src/blocks/new-prod-boxes/new-prod-boxes.js @@ -124,12 +124,10 @@ function dynamicBuyLink(buyLinkSelector, prodName, ProdUsers, prodYears, pid = n } const forceCountry = getPriceLocalMapByLocale().country_code; - let buyLinkHref = new URL(`${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/?force_country=${forceCountry}`); - if (buyLinkPid) { - buyLinkHref.searchParams.append('pid', buyLinkPid); - } + let buyLinkHref = new URL(`${getBuyLinkCountryPrefix()}/${prodName.trim()}/${ProdUsers}/${prodYears}/${buyLinkPid}?force_country=${forceCountry}`); return buyLinkHref; } + async function updateProductPrice(prodName, prodUsers, prodYears, saveText, pid = null, buyLinkSelector = null, billed = null, type = null, hideDecimals = null, perPrice = '') { try { const { fetchProduct, formatPrice } = await import('../../scripts/utils/utils.js'); From 0f161fe674b10f662922b0f2ee0121d4b398fd17 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 8 Oct 2024 12:30:23 +0300 Subject: [PATCH 1276/1296] refactored getDefaultLanguage function --- _src/scripts/utils/utils.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 10e46c7fa..ed088169c 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -147,17 +147,7 @@ export const localisationList = ['zh-hk', 'zh-tw', 'en-us', 'de-de', 'nl-nl', 'f export function getDefaultLanguage() { // TODO: refactor. It's not working as should for en locales. const currentPathUrl = window.location.pathname; - const foundLanguage = localisationList.find((item) => currentPathUrl.indexOf(`/${item}/`) !== -1); - let lang = 'site'; - - if (foundLanguage) { - if (foundLanguage.startsWith('zh-') || foundLanguage.startsWith('en-')) { - lang = foundLanguage.replace('zh-', '').replace('en-', '') || 'site'; - } else { - [, lang] = foundLanguage.split('-'); - } - } - + const lang = currentPathUrl.split('/')[1].split('-')[0]; return lang; } From 3a2eb30feb73bdb8ef2bb9921520af83242f47ba Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 8 Oct 2024 13:42:49 +0300 Subject: [PATCH 1277/1296] removed getDefaultLanguage functionality --- _src/scripts/scripts.js | 9 +++------ _src/scripts/utils/utils.js | 20 -------------------- 2 files changed, 3 insertions(+), 26 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index afbc23ea0..5ba627ea5 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -17,7 +17,6 @@ import { import { adobeMcAppendVisitorId, createTag, - getDefaultLanguage, getParamValue, GLOBAL_EVENTS, pushToDataLayer, pushTrialDownloadToDataLayer, getLocale, @@ -26,8 +25,6 @@ import { const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list export const SUPPORTED_LANGUAGES = ['en']; -export const DEFAULT_LANGUAGE = getDefaultLanguage(); -export const DEFAULT_COUNTRY = getDefaultLanguage(); export const METADATA_ANALYTICS_TAGS = 'analytics-tags'; const TARGET_TENANT = 'bitdefender'; @@ -65,9 +62,10 @@ export function createMetadata(name, value) { } export function getLanguageCountryFromPath() { + const currentPathUrl = window.location.pathname; return { - language: DEFAULT_LANGUAGE, - country: DEFAULT_COUNTRY, + language: currentPathUrl.split('/')[1].split('-')[0], + country: currentPathUrl.split('/')[1].split('-')[1], }; } @@ -537,7 +535,6 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { * @param {Element} doc The container element */ async function loadEager(doc) { - setPageLanguage(getLanguageCountryFromPath(window.location.pathname)); decorateTemplateAndTheme(); await window.hlx.plugins.run('loadEager'); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index ed088169c..32a982f62 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -143,16 +143,8 @@ export function getParamValue(param) { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(param); } -export const localisationList = ['zh-hk', 'zh-tw', 'en-us', 'de-de', 'nl-nl', 'fr-fr', 'it-it', 'ro-ro']; -export function getDefaultLanguage() { - // TODO: refactor. It's not working as should for en locales. - const currentPathUrl = window.location.pathname; - const lang = currentPathUrl.split('/')[1].split('-')[0]; - return lang; -} const cacheResponse = new Map(); -const siteName = getDefaultLanguage(); // eslint-disable-next-line import/prefer-default-export export function createTag(tag, attributes, html) { @@ -405,18 +397,6 @@ export async function fetchProduct(code = 'av', variant = '1u-1y', pid = null) { data.set('data', JSON.stringify(newData)); } - if (siteName === 'uk') { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '3'; - data.set('data', JSON.stringify(newData)); - } - - if (siteName === 'fr') { - const newData = JSON.parse(data.get('data')); - newData.config.force_region = '14'; - data.set('data', JSON.stringify(newData)); - } - const currentPriceSetup = PRICE_LOCALE_MAP.get(locale) || 'en-us'; const newData = JSON.parse(data.get('data')); FETCH_URL = `${FETCH_URL}?force_country=${currentPriceSetup.force_country}`; From 92833a69c8c1ab34ab89bf1012e678935e4a1980 Mon Sep 17 00:00:00 2001 From: Alexandru-Butuza Date: Tue, 8 Oct 2024 13:45:12 +0300 Subject: [PATCH 1278/1296] fixed lint --- _src/scripts/scripts.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 5ba627ea5..02bc1c476 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -184,16 +184,6 @@ export function getLocalizedResourceUrl(resourceName) { return `${pathnameAsArray.join('/')}/${resourceName}`; } -/** - * Sets the page language. - * @param {Object} param The language and country - */ -function setPageLanguage(param) { - document.documentElement.lang = param.language; - createMetadata('nav', `${getLocalizedResourceUrl('nav')}`); - createMetadata('footer', `${getLocalizedResourceUrl('footer')}`); -} - export function getTags(tags) { return tags ? tags.split(':').filter((tag) => !!tag).map((tag) => tag.trim()) : []; } From 50066a79351d58d4d36c3738c8269ce3cc38ebbe Mon Sep 17 00:00:00 2001 From: Matei Iordache Date: Tue, 8 Oct 2024 14:04:53 +0300 Subject: [PATCH 1279/1296] fix-header-metadata --- _src/scripts/scripts.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 02bc1c476..3230e1019 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -525,6 +525,8 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { * @param {Element} doc The container element */ async function loadEager(doc) { + createMetadata('nav', `${getLocalizedResourceUrl('nav')}`); + createMetadata('footer', `${getLocalizedResourceUrl('footer')}`); decorateTemplateAndTheme(); await window.hlx.plugins.run('loadEager'); From 1803bb211bf260541e59d4529cf15181c34c88d0 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 17:10:25 +0300 Subject: [PATCH 1280/1296] Update av free has specific pid --- _src/scripts/utils/utils.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index b969f9f00..2779f6fe9 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -902,7 +902,11 @@ export function pushProductsToDataLayer() { }; if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { - TRACKED_PRODUCTS.push({ productId: TRACKED_PRODUCTS_COMPARISON[0].productId }); + let productId = TRACKED_PRODUCTS_COMPARISON[0].productId; + if (TRACKED_PRODUCTS_COMPARISON[0]['productCode'] === 'av') { + productId = '8430'; + } + TRACKED_PRODUCTS.push({ productId }); } const dataLayerProduct = { From bd84d5285ada518a707deaafc3662e7ab2425086 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 17:17:12 +0300 Subject: [PATCH 1281/1296] adding user detected --- _src/scripts/delayed.js | 3 +- _src/scripts/utils/utils.js | 80 +++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index a1f5b7788..37003f56f 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -3,7 +3,7 @@ import { sampleRUM, getMetadata, } from './lib-franklin.js'; -import { pushToDataLayer, pushProductsToDataLayer } from './utils/utils.js'; +import { pushToDataLayer, sendAnalyticsUserInfo, pushProductsToDataLayer } from './utils/utils.js'; // eslint-disable-next-line import/no-cycle import { @@ -15,6 +15,7 @@ import { loadBreadcrumbs } from './breadcrumbs.js'; sampleRUM('cwv'); // add products to data layer +sendAnalyticsUserInfo(); pushProductsToDataLayer(); pushToDataLayer('page loaded'); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 2779f6fe9..a2e2eaafa 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -3,6 +3,19 @@ import ZuoraNLClass from '../zuora.js'; const TRACKED_PRODUCTS = []; const TRACKED_PRODUCTS_COMPARISON = []; +/** + * Get cookie + * @param {String} name - cookie name + */ +export function getCookie(name) { + const cookie = {}; + document.cookie.split(';').forEach((el) => { + const [key, value] = el.split('='); + cookie[key.trim()] = value; + }); + return cookie[name]; +} + export function getLocale() { const regex = /\/([a-z]{2}-[a-z]{2})\//i; // match locale with slashes // extract locale without slashes @@ -920,6 +933,73 @@ export function pushProductsToDataLayer() { pushToDataLayer('product loaded', dataLayerProduct); } +export async function sendAnalyticsUserInfo() { + window.adobeDataLayer = window.adobeDataLayer || []; + const user = {}; + user.loggedIN = 'false'; + user.emarsysID = getParamValue('ems-uid') || getParamValue('sc_uid') || undefined; + + let userID; + try { + userID = (typeof localStorage !== 'undefined' && localStorage.getItem('rhvID')) || getParamValue('sc_customer') || getCookie('bdcsufp') || undefined; + } catch (e) { + if (e instanceof DOMException) { + userID = getParamValue('sc_customer') || getCookie('bdcsufp') || undefined; + } else { + throw e; + } + } + + user.ID = userID; + user.productFinding = 'campaign page'; + + if (typeof user.ID !== 'undefined') { + user.loggedIN = 'true'; + } else { + const headers = new Headers({ + 'Content-Type': 'application/x-www-form-urlencoded', + Pragma: 'no-cache', + 'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0', + Expires: 'Tue, 01 Jan 1971 02:00:00 GMT', + BDUS_A312C09A2666456D9F2B2AA5D6B463D6: 'check.bitdefender', + }); + + const currentUrl = new URL(window.location.href); + const queryParams = currentUrl.searchParams; + const apiUrl = `https://www.bitdefender.com/site/Main/dummyPost?${Math.random()}`; + const apiWithParams = new URL(apiUrl); + queryParams.forEach((value, key) => { + apiWithParams.searchParams.append(key, value); + }); + + try { + const response = await fetch(apiWithParams, { + method: 'POST', + headers, + }); + + if (response.ok) { + const rhv = response.headers.get('BDUSRH_8D053E77FD604F168345E0F77318E993'); + if (rhv !== null) { + localStorage.setItem('rhvID', rhv); + user.ID = rhv; + user.loggedIN = 'true'; + } + } + } catch (error) { + // console.error('Fetch failed:', error); + } + } + + // Remove properties that are undefined + Object.keys(user).forEach((key) => user[key] === undefined && delete user[key]); + + window.adobeDataLayer.push({ + event: 'user detected', + user, + }); +} + export function getDomain() { return window.location.pathname.split('/').filter((item) => item)[0]; } From d9a3370c9977cd558e18fc0a2463a4258255d939 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 17:44:41 +0300 Subject: [PATCH 1282/1296] fix productFinding value --- _src/scripts/utils/utils.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index a2e2eaafa..22362b8d6 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -841,13 +841,19 @@ export function trackProduct(product, location = '') { } export function pushTrialDownloadToDataLayer() { - const getTrialID = () => ( + let getTrialID = () => ( // eslint-disable-next-line max-len ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) || getMetadata('breadcrumb-title') || getMetadata('og:title') ); + console.log(getTrialID()) + + /*if (TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { + getTrialID = '8430'; + }*/ + const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; @@ -934,6 +940,20 @@ export function pushProductsToDataLayer() { } export async function sendAnalyticsUserInfo() { + const url = window.location.href; + const isHomepageSolutions = url.split('/').filter(Boolean).pop(); + + let productFinding = ''; + if (isHomepageSolutions === 'consumer') { + productFinding = 'solutions page'; + } else if (isHomepageSolutions === 'thank-you') { + productFinding = 'thank you page'; + } else if (TRACKED_PRODUCTS.length || TRACKED_PRODUCTS_COMPARISON.length) { + productFinding = 'product page'; + } else { + productFinding = `${isHomepageSolutions} page`; + } + window.adobeDataLayer = window.adobeDataLayer || []; const user = {}; user.loggedIN = 'false'; @@ -951,7 +971,7 @@ export async function sendAnalyticsUserInfo() { } user.ID = userID; - user.productFinding = 'campaign page'; + user.productFinding = productFinding; if (typeof user.ID !== 'undefined') { user.loggedIN = 'true'; From 0d236f05a2b04f54867a6a6846c67f9861330ed0 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 17:53:06 +0300 Subject: [PATCH 1283/1296] adding free av code --- _src/scripts/utils/utils.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 22362b8d6..03078afce 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -848,11 +848,9 @@ export function pushTrialDownloadToDataLayer() { || getMetadata('og:title') ); - console.log(getTrialID()) - - /*if (TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { + if (TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { getTrialID = '8430'; - }*/ + } const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); From 7243595444660a594f9a896e9de6fe0565a1e773 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 17:58:42 +0300 Subject: [PATCH 1284/1296] update --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 03078afce..acd782a8b 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -848,7 +848,7 @@ export function pushTrialDownloadToDataLayer() { || getMetadata('og:title') ); - if (TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { + if (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { getTrialID = '8430'; } From 8bc26ca1420f8e8e9a9e3bf6751dcd1e75f31eda Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 17:59:14 +0300 Subject: [PATCH 1285/1296] update --- _src/scripts/utils/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index acd782a8b..7c74ce3e6 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -848,7 +848,7 @@ export function pushTrialDownloadToDataLayer() { || getMetadata('og:title') ); - if (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { + if ((TRACKED_PRODUCTS && TRACKED_PRODUCTS[0].productCode === 'av') || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av')) { getTrialID = '8430'; } From 3d5abbb67f2d047a3fa49dfb8c1d5cc8ef16b9c8 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:01:44 +0300 Subject: [PATCH 1286/1296] update --- _src/scripts/delayed.js | 2 +- _src/scripts/utils/utils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index 37003f56f..66cd0dd11 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -15,9 +15,9 @@ import { loadBreadcrumbs } from './breadcrumbs.js'; sampleRUM('cwv'); // add products to data layer -sendAnalyticsUserInfo(); pushProductsToDataLayer(); pushToDataLayer('page loaded'); +sendAnalyticsUserInfo(); // Load breadcrumbs loadBreadcrumbs(); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 7c74ce3e6..d9959cfe4 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -848,7 +848,7 @@ export function pushTrialDownloadToDataLayer() { || getMetadata('og:title') ); - if ((TRACKED_PRODUCTS && TRACKED_PRODUCTS[0].productCode === 'av') || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av')) { + if ((TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode === 'av') || (TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av')) { getTrialID = '8430'; } From b1e0b8e9feecc818f52df0a3151ca6b5a992d083 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:03:41 +0300 Subject: [PATCH 1287/1296] update --- _src/scripts/utils/utils.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index d9959cfe4..d5400d690 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -841,17 +841,20 @@ export function trackProduct(product, location = '') { } export function pushTrialDownloadToDataLayer() { - let getTrialID = () => ( - // eslint-disable-next-line max-len - ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) - || getMetadata('breadcrumb-title') - || getMetadata('og:title') - ); + const getTrialID = () => { + const productCode = TRACKED_PRODUCTS?.[0]?.productCode || TRACKED_PRODUCTS_COMPARISON?.[0]?.productCode; + + return productCode || getMetadata('breadcrumb-title') || getMetadata('og:title') || '8430'; + }; - if ((TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode === 'av') || (TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av')) { - getTrialID = '8430'; + if ( + (TRACKED_PRODUCTS[0]?.productCode === 'av') || + (TRACKED_PRODUCTS_COMPARISON[0]?.productCode === 'av') + ) { + getTrialID = () => '8430'; } + const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; From f8edce33a8018eb4608ec86fc4b5d26b9ff3d3a7 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:05:38 +0300 Subject: [PATCH 1288/1296] update --- _src/scripts/delayed.js | 2 +- _src/scripts/utils/utils.js | 23 ++++++++++------------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index 66cd0dd11..0941f28db 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -16,8 +16,8 @@ sampleRUM('cwv'); // add products to data layer pushProductsToDataLayer(); -pushToDataLayer('page loaded'); sendAnalyticsUserInfo(); +pushToDataLayer('page loaded'); // Load breadcrumbs loadBreadcrumbs(); diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index d5400d690..178605d88 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -841,19 +841,16 @@ export function trackProduct(product, location = '') { } export function pushTrialDownloadToDataLayer() { - const getTrialID = () => { - const productCode = TRACKED_PRODUCTS?.[0]?.productCode || TRACKED_PRODUCTS_COMPARISON?.[0]?.productCode; - - return productCode || getMetadata('breadcrumb-title') || getMetadata('og:title') || '8430'; - }; - - if ( - (TRACKED_PRODUCTS[0]?.productCode === 'av') || - (TRACKED_PRODUCTS_COMPARISON[0]?.productCode === 'av') - ) { - getTrialID = () => '8430'; - } - + let getTrialID = () => ( + // eslint-disable-next-line max-len + ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) + || getMetadata('breadcrumb-title') + || getMetadata('og:title') + ); + + /*if ((TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode === 'av') || (TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av')) { + getTrialID = '8430'; + }*/ const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); From 93b3ba72eab91b771e8fd521db67c0976ef7b1be Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:11:22 +0300 Subject: [PATCH 1289/1296] push sendAnalyticsUserInfo(); --- _src/scripts/delayed.js | 3 +- _src/scripts/scripts.js | 82 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 2 deletions(-) diff --git a/_src/scripts/delayed.js b/_src/scripts/delayed.js index 0941f28db..a1f5b7788 100644 --- a/_src/scripts/delayed.js +++ b/_src/scripts/delayed.js @@ -3,7 +3,7 @@ import { sampleRUM, getMetadata, } from './lib-franklin.js'; -import { pushToDataLayer, sendAnalyticsUserInfo, pushProductsToDataLayer } from './utils/utils.js'; +import { pushToDataLayer, pushProductsToDataLayer } from './utils/utils.js'; // eslint-disable-next-line import/no-cycle import { @@ -16,7 +16,6 @@ sampleRUM('cwv'); // add products to data layer pushProductsToDataLayer(); -sendAnalyticsUserInfo(); pushToDataLayer('page loaded'); // Load breadcrumbs diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 3230e1019..bfc37b993 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -520,6 +520,87 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { } } +export async function sendAnalyticsUserInfo() { + const url = window.location.href; + const isHomepageSolutions = url.split('/').filter(Boolean).pop(); + + let productFinding = ''; + if (isHomepageSolutions === 'consumer') { + productFinding = 'solutions page'; + } else if (isHomepageSolutions === 'thank-you') { + productFinding = 'thank you page'; + } else if (TRACKED_PRODUCTS.length || TRACKED_PRODUCTS_COMPARISON.length) { + productFinding = 'product page'; + } else { + productFinding = `${isHomepageSolutions} page`; + } + + window.adobeDataLayer = window.adobeDataLayer || []; + const user = {}; + user.loggedIN = 'false'; + user.emarsysID = getParamValue('ems-uid') || getParamValue('sc_uid') || undefined; + + let userID; + try { + userID = (typeof localStorage !== 'undefined' && localStorage.getItem('rhvID')) || getParamValue('sc_customer') || getCookie('bdcsufp') || undefined; + } catch (e) { + if (e instanceof DOMException) { + userID = getParamValue('sc_customer') || getCookie('bdcsufp') || undefined; + } else { + throw e; + } + } + + user.ID = userID; + user.productFinding = productFinding; + + if (typeof user.ID !== 'undefined') { + user.loggedIN = 'true'; + } else { + const headers = new Headers({ + 'Content-Type': 'application/x-www-form-urlencoded', + Pragma: 'no-cache', + 'Cache-Control': 'no-store, no-cache, must-revalidate, max-age=0', + Expires: 'Tue, 01 Jan 1971 02:00:00 GMT', + BDUS_A312C09A2666456D9F2B2AA5D6B463D6: 'check.bitdefender', + }); + + const currentUrl = new URL(window.location.href); + const queryParams = currentUrl.searchParams; + const apiUrl = `https://www.bitdefender.com/site/Main/dummyPost?${Math.random()}`; + const apiWithParams = new URL(apiUrl); + queryParams.forEach((value, key) => { + apiWithParams.searchParams.append(key, value); + }); + + try { + const response = await fetch(apiWithParams, { + method: 'POST', + headers, + }); + + if (response.ok) { + const rhv = response.headers.get('BDUSRH_8D053E77FD604F168345E0F77318E993'); + if (rhv !== null) { + localStorage.setItem('rhvID', rhv); + user.ID = rhv; + user.loggedIN = 'true'; + } + } + } catch (error) { + // console.error('Fetch failed:', error); + } + } + + // Remove properties that are undefined + Object.keys(user).forEach((key) => user[key] === undefined && delete user[key]); + + window.adobeDataLayer.push({ + event: 'user detected', + user, + }); +} + /** * Loads everything needed to get to LCP. * @param {Element} doc The container element @@ -538,6 +619,7 @@ async function loadEager(doc) { } pushPageLoadToDataLayer(targetExperimentDetails); + sendAnalyticsUserInfo(); const templateMetadata = getMetadata('template'); const hasTemplate = getMetadata('template') !== ''; From 12696b6d41a26577173a19cd7698ab5bd8d8dea6 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:13:32 +0300 Subject: [PATCH 1290/1296] update --- _src/scripts/scripts.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index bfc37b993..25c9e305c 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -520,17 +520,13 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { } } -export async function sendAnalyticsUserInfo() { +async function sendAnalyticsUserInfo() { const url = window.location.href; const isHomepageSolutions = url.split('/').filter(Boolean).pop(); let productFinding = ''; if (isHomepageSolutions === 'consumer') { productFinding = 'solutions page'; - } else if (isHomepageSolutions === 'thank-you') { - productFinding = 'thank you page'; - } else if (TRACKED_PRODUCTS.length || TRACKED_PRODUCTS_COMPARISON.length) { - productFinding = 'product page'; } else { productFinding = `${isHomepageSolutions} page`; } From d3a30ef766b55f0f4433de5887f214edf576d6d9 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:15:24 +0300 Subject: [PATCH 1291/1296] add sendAnalyticsUserInfo earlier --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 25c9e305c..86aac9cd9 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -19,7 +19,7 @@ import { createTag, getParamValue, GLOBAL_EVENTS, pushToDataLayer, pushTrialDownloadToDataLayer, - getLocale, + getLocale, getCookie, } from './utils/utils.js'; const LCP_BLOCKS = ['hero']; // add your LCP blocks to the list From d9003cf5290c0c39411422824d4a2bd87aa08a1e Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:21:47 +0300 Subject: [PATCH 1292/1296] update --- _src/scripts/scripts.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 86aac9cd9..2353e2ab5 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -522,13 +522,17 @@ function pushPageLoadToDataLayer(targetExperimentDetails) { async function sendAnalyticsUserInfo() { const url = window.location.href; - const isHomepageSolutions = url.split('/').filter(Boolean).pop(); + const isPage = url.split('/').filter(Boolean).pop().toLowerCase(); - let productFinding = ''; - if (isHomepageSolutions === 'consumer') { + let productFinding = 'product page'; + if (isPage === 'consumer') { productFinding = 'solutions page'; - } else { - productFinding = `${isHomepageSolutions} page`; + } else if (isPage === 'thank-you') { + productFinding = 'thank you page'; + } else if (isPage === 'toolbox') { + productFinding = 'toolbox page'; + } else if (isPage === 'downloads') { + productFinding = 'downloads page'; } window.adobeDataLayer = window.adobeDataLayer || []; From 281681df0ecc5980877b49b34e07e6168fa32305 Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:31:26 +0300 Subject: [PATCH 1293/1296] fix: typo --- _src/scripts/scripts.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_src/scripts/scripts.js b/_src/scripts/scripts.js index 2353e2ab5..3610f902b 100644 --- a/_src/scripts/scripts.js +++ b/_src/scripts/scripts.js @@ -524,7 +524,7 @@ async function sendAnalyticsUserInfo() { const url = window.location.href; const isPage = url.split('/').filter(Boolean).pop().toLowerCase(); - let productFinding = 'product page'; + let productFinding = 'product pages'; if (isPage === 'consumer') { productFinding = 'solutions page'; } else if (isPage === 'thank-you') { From 39c774f662abf84f93dfbd5fa8e3f9feda9cb08a Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:41:39 +0300 Subject: [PATCH 1294/1296] fix: lint --- _src/scripts/utils/utils.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 178605d88..396d0a161 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -841,17 +841,13 @@ export function trackProduct(product, location = '') { } export function pushTrialDownloadToDataLayer() { - let getTrialID = () => ( + const getTrialID = () => ( // eslint-disable-next-line max-len ((TRACKED_PRODUCTS && TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode) || (TRACKED_PRODUCTS_COMPARISON && TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode)) || getMetadata('breadcrumb-title') || getMetadata('og:title') ); - /*if ((TRACKED_PRODUCTS.length > 0 && TRACKED_PRODUCTS[0].productCode === 'av') || (TRACKED_PRODUCTS_COMPARISON.length > 0 && TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av')) { - getTrialID = '8430'; - }*/ - const url = window.location.href; const currentPage = url.split('/').filter(Boolean).pop(); const downloadType = currentPage === 'thank-you' ? 'product' : 'trial'; From 8437302bf413745a7007fbea2db3b0e05abe160c Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Tue, 8 Oct 2024 18:43:06 +0300 Subject: [PATCH 1295/1296] fix lint --- _src/scripts/utils/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_src/scripts/utils/utils.js b/_src/scripts/utils/utils.js index 396d0a161..8517bd276 100644 --- a/_src/scripts/utils/utils.js +++ b/_src/scripts/utils/utils.js @@ -915,8 +915,8 @@ export function pushProductsToDataLayer() { }; if (!TRACKED_PRODUCTS.length && TRACKED_PRODUCTS_COMPARISON.length) { - let productId = TRACKED_PRODUCTS_COMPARISON[0].productId; - if (TRACKED_PRODUCTS_COMPARISON[0]['productCode'] === 'av') { + let { productId } = TRACKED_PRODUCTS_COMPARISON[0]; + if (TRACKED_PRODUCTS_COMPARISON[0].productCode === 'av') { productId = '8430'; } TRACKED_PRODUCTS.push({ productId }); From 6623822c7c1b745e437ccef9c41d673c47e9bcac Mon Sep 17 00:00:00 2001 From: ltiseanu Date: Wed, 9 Oct 2024 12:51:30 +0300 Subject: [PATCH 1296/1296] feat: add full width class --- _src/styles/styles.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_src/styles/styles.css b/_src/styles/styles.css index 618f9a0d0..60cac9c05 100644 --- a/_src/styles/styles.css +++ b/_src/styles/styles.css @@ -101,6 +101,10 @@ --cta-background-light-blue: var(--background-light-blue) } +.w-full { + width: 100%; +} + .global-display-none { display: none; }