Second Announcement Bar

Description

• adding custom bar above announcement bar
• view demo – password: abc
• message me, I will install it for you

Note

• You need to enable announcement bar
• You need to disable close icon in announcement bar
• If you use Personal/Basic Plan, message me, I will install it for you

#1. Install Code

#1.1. First, you need to install Section Loader Supreme Plugin (adding plugin code to Code Injection > Header/Footer is enough)

#1.2. Next, create a page in Not Linked and design your layout

#1.3. Use this code under plugin code in Code Injection > Footer

<script>
(function() {
  const targetUrl = '/test-second-announcement-bar';
  const targetSelector = '.sqs-announcement-bar-custom-location';

  async function loadContent(targetEl) {
    if (targetEl.dataset.wmLoaded) return;
    const fragment = await wm$.getFragment(targetUrl, '#sections, #page-regions');
    if (!fragment) return;
    const sections = Array.from(fragment.querySelectorAll('section.page-section'));
    if (!sections.length) return;
    sections.forEach(section => targetEl.insertAdjacentElement('beforebegin', section));
    targetEl.dataset.wmLoaded = 'true';
    await wm$.reloadSquarespaceLifecycle(sections);
  }

  let tries = 0;
  const timer = setInterval(() => {
    const targetEl = document.querySelector(targetSelector);
    if (window.wm$ && targetEl) {
      clearInterval(timer);
      loadContent(targetEl);
    } else if (++tries > 100) {
      clearInterval(timer);
    }
  }, 100);
})();
</script>
<style>
  span.sqs-announcement-bar-close {
      display: none;
  }
  header#header section {
      padding-top: 0px !important;
  }
  header#header .fluid-engine {
    --row-height-scaling-factor: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
</style>

#1.4. Change Page URL in the code (match with page url in step #1.2)

#2. Customize

#2.1. To add top bar on One Page, you can use this code to Custom CSS

span.sqs-announcement-bar-close {
  	display: none;
  }
  header#header section {
  	padding-top: 0px !important;
  }
  header#header .fluid-engine {
    --row-height-scaling-factor: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

Then use this code to Individual Page Header Injection. Remember to change Page url (see #1.2)

<script>
(function() {
  const targetUrl = '/test-second-announcement-bar';
  const targetSelector = '.sqs-announcement-bar-custom-location';

  async function loadContent(targetEl) {
    if (targetEl.dataset.wmLoaded) return;
    const fragment = await wm$.getFragment(targetUrl, '#sections, #page-regions');
    if (!fragment) return;
    const sections = Array.from(fragment.querySelectorAll('section.page-section'));
    if (!sections.length) return;
    sections.forEach(section => targetEl.insertAdjacentElement('beforebegin', section));
    targetEl.dataset.wmLoaded = 'true';
    await wm$.reloadSquarespaceLifecycle(sections);
  }

  let tries = 0;
  const timer = setInterval(() => {
    const targetEl = document.querySelector(targetSelector);
    if (window.wm$ && targetEl) {
      clearInterval(timer);
      loadContent(targetEl);
    } else if (++tries > 100) {
      clearInterval(timer);
    }
  }, 100);
})();
</script>