Header footer (#51)

* Working on the header * Updating the footer * Fetching header and footer from the crosswalk entry * Linting
hlxsites · Nov 29, 2023 · e15c607 · e15c607
1 parent cda6e84
commit e15c607
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
@@ -58,11 +58,16 @@ export default async function decorate(block) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
 
+  let baseFooterUrl = '/fragments/footer/master';
+  if (window.location.hostname !== 'www.24petwatch.com') {
+    baseFooterUrl = 'https://main--24petwatch-crosswalk--hlxsites.hlx.live/fragments/footer/master';
+  }
+
   // fetch footer content
-  const footerPath = cfg.footer || '/fragments/footer/master';
+  const footerPath = cfg.footer || baseFooterUrl;
   const resp = await fetch(`${footerPath}.plain.html`, window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {});
 
-  if (false) {
+  if (resp.ok) {
     const html = await resp.text();
 
     // decorate footer DOM

diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -12,6 +12,21 @@ import { trackGTMEvent } from '../../scripts/lib-analytics.js';
 let positionY = 0;
 const SCROLL_STEP = 25;
 
+const urls = {
+  usa: {
+    url: '/',
+    name: 'US',
+    icon: 'icon-flagusa',
+    lang: 'en-US',
+  },
+  canada: {
+    url: '/ca/',
+    name: 'Canada',
+    icon: 'icon-flagcanada',
+    lang: 'en-CA',
+  },
+};
+
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
     const nav = document.getElementById('nav');
@@ -105,11 +120,18 @@ function toggleMenu(nav, navSections, closeAll = null) {
 }
 
 function decorateLanguageSelector(block) {
+  let currentCountry = urls.usa;
+  let alternateCountry = urls.canada;
+  if (window.location.pathname.startsWith('/ca/')) {
+    currentCountry = urls.canada;
+    alternateCountry = urls.usa;
+  }
+
   const languageSelector = document.createElement('li');
   languageSelector.classList.add('language-selector');
-  languageSelector.innerHTML = `<span class="icon icon-flagusa"></span>
+  languageSelector.innerHTML = `<span class="icon ${currentCountry.icon}"></span>
       <ul>
-        <li><a href="https://www.24petwatch.com/ca" hreflang="en-CA" rel="alternate" title="Canada"><span class="icon icon-flagcanada"></span>Canada</a></li>
+        <li><a href="${alternateCountry.url}" hreflang="${alternateCountry.lang}" rel="alternate" title="${alternateCountry.name}"><span class="icon ${alternateCountry.icon}"></span>${alternateCountry.name}</a></li>
       </ul>`;
   block.querySelector(':scope > ul').prepend(languageSelector);
 
@@ -176,11 +198,15 @@ export default async function decorate(block) {
   // fetch nav content
   const navMeta = getMetadata('nav');
   block.textContent = '';
+  let baseHeaderUrl = '/fragments/header/master';
+  if (window.location.hostname !== 'www.24petwatch.com') {
+    baseHeaderUrl = 'https://main--24petwatch-crosswalk--hlxsites.hlx.live/fragments/header/master';
+  }
 
-  const navPath = navMeta ? new URL(navMeta).pathname : '/fragments/header/master';
+  const navPath = navMeta ? new URL(navMeta).pathname : baseHeaderUrl;
   const resp = await fetch(`${navPath}.plain.html`);
 
-  if (false) {
+  if (resp.ok) {
     const html = await resp.text();
 
     // decorate nav DOM