Product Category Page Title

Description

• adding title to Product Category Page to top banner section, instead of default text
• buy me a coffee

#1. Install Code

#1.1. First, adding a blank section to top of Store Page with a random text, something like this

#1.2. Hover on top right of section > Click EDIT SECTION > at Design > Anchor Link > enter word: top-banner-title

#1.3. Click Gear icon on Store Page

Next, click Advanced > Page Header Code Injection

#1.4. Add this code to right box

<!-- 07.26c22v3 Product Category Page Title -->
<script>
window.CategoryPageTitleConfig = {
  bannerSelector: 'section[id*="top-banner-title"]',
  textContainerSelector: '.sqs-html-content',
  categorySelectors: [
    '.product-list-nav .category-link.active',
    '.product-list-category-link.active',
    '[aria-current="page"].category-link',
    'h2.nested-category-title'
  ],
  useTitleFallback: true,
  titleSeparators: /\s[\u2014\u2013|]\s/,
  titleExclude: [],
  preventFlash: true,
  maxWait: 10000,
  pollInterval: 200
};
</script>
<script>
(function () {
  var cfg = window.CategoryPageTitleConfig;
  if (!cfg) return;

  var FLAG = 'catPageTitleDone';
  var STYLE_ID = 'cat-page-title-fouc';

  function isEditMode() {
    return document.body && document.body.classList.contains('sqs-edit-mode-active');
  }

  function getExcludeList() {
    var list = (cfg.titleExclude || []).slice();
    try {
      var ctx = window.Static && window.Static.SQUARESPACE_CONTEXT;
      if (ctx && ctx.website) {
        if (ctx.website.siteTitle) list.push(ctx.website.siteTitle);
        if (ctx.collection && ctx.collection.title) list.push(ctx.collection.title);
      }
    } catch (e) {}
    return list.map(function (s) { return s.replace(/\s+/g, ' ').trim().toLowerCase(); }).filter(Boolean);
  }

  function injectFoucStyle() {
    if (!cfg.preventFlash || document.getElementById(STYLE_ID)) return;
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = cfg.bannerSelector + ' ' + cfg.textContainerSelector + '{visibility:hidden;}';
    document.head.appendChild(style);
  }

  function removeFoucStyle() {
    var style = document.getElementById(STYLE_ID);
    if (style) style.remove();
  }

  function getFromDom() {
    for (var i = 0; i < cfg.categorySelectors.length; i++) {
      var el = document.querySelector(cfg.categorySelectors[i]);
      if (el) {
        var text = el.textContent.replace(/\s+/g, ' ').trim();
        if (text) return text;
      }
    }
    return null;
  }

  function getFromTitle() {
    if (!cfg.useTitleFallback) return null;
    var raw = (document.title || '').replace(/\s+/g, ' ').trim();
    if (!raw) return null;
    var parts = raw.split(cfg.titleSeparators);
    var exclude = getExcludeList();
    for (var i = 0; i < parts.length; i++) {
      var seg = parts[i].trim();
      if (seg && exclude.indexOf(seg.toLowerCase()) === -1) return seg;
    }
    return null;
  }

  function getCategoryName() {
    return getFromDom() || getFromTitle();
  }

  function findTextEl(container) {
    var el = container.querySelector('h1,h2,h3,h4,h5,h6,p') || container.firstElementChild || container;
    while (el.children.length === 1 && el.children[0].textContent.trim() === el.textContent.trim()) {
      el = el.children[0];
    }
    return el;
  }

  function apply() {
    if (isEditMode()) { removeFoucStyle(); return true; }

    var banner = document.querySelector(cfg.bannerSelector);
    if (!banner) return false;

    var container = banner.querySelector(cfg.textContainerSelector);
    if (!container) return false;

    var name = getCategoryName();
    if (!name) { removeFoucStyle(); return true; }

    var target = findTextEl(container);
    if (target.textContent.trim() !== name) target.textContent = name;

    banner.dataset[FLAG] = 'true';
    removeFoucStyle();
    return true;
  }

  function start() {
    var banner = document.querySelector(cfg.bannerSelector);
    if (banner && banner.dataset[FLAG] === 'true') return;
    if (apply()) return;
    var deadline = Date.now() + (cfg.maxWait || 10000);
    var iv = setInterval(function () {
      if (apply() || Date.now() > deadline) {
        clearInterval(iv);
        removeFoucStyle();
      }
    }, cfg.pollInterval || 200);
  }

  injectFoucStyle();
  setTimeout(removeFoucStyle, (cfg.maxWait || 10000) + 500);

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start);
  } else {
    start();
  }
  window.addEventListener('load', start);
  window.addEventListener('mercury:load', function () {
    var banner = document.querySelector(cfg.bannerSelector);
    if (banner) delete banner.dataset[FLAG];
    injectFoucStyle();
    start();
  });
})();
</script>

#2. Customize

nothing now