【第617回】Personalization：Affinity に合わせてポップアップを表示する

<div
  id="tn_popup_slot"
  data-tn-popup-source
  data-category="{{attributes.Popup_Category}}"
  hidden
  style="display:none !important;"
>
  <!-- Backpacks: image banner -->
  <article class="tn-promo-panel" data-panel="backpacks">
    <a
      class="tn-promo-image-link"
      href="https://mcxkknz3m0zj3jqsxn4hm3dp3q-4.pub.sfmc-content.com/f0sn3uhu0p0?view=category&amp;category=backpacks"
      aria-label="Explore TrailNest backpacks"
    >
      <div
        data-image="https://image.s12.sfmc-content.com/lib/fe3311727364047e721170/m/1/Backpacks_Hero.png"
        data-alt="Explore the TrailNest backpack collection"
      ></div>
    </a>
  </article>

  <!-- Tents: YouTube video -->
  <article class="tn-promo-panel" data-panel="tents">
    <div class="tn-promo-copy">
      <p class="tn-promo-eyebrow">TRAILNEST · FIELD NOTES</p>
      <h2 class="tn-promo-title">A little inspiration for your next escape.</h2>
      <p class="tn-promo-description">
        Take a moment to explore. Your next adventure starts here.
      </p>
    </div>

    <div class="tn-promo-video" data-video></div>

    <div class="tn-promo-footer">
      <a
        class="tn-promo-cta"
        href="https://mcxkknz3m0zj3jqsxn4hm3dp3q-4.pub.sfmc-content.com/f0sn3uhu0p0?view=category&amp;category=tents"
      >
        Explore Tents &amp; Shelter
        <span aria-hidden="true">→</span>
      </a>
    </div>
  </article>

  <!-- Apparel: rich HTML -->
  <article
    class="tn-promo-panel tn-promo-apparel"
    data-panel="apparel"
  >
    <div
      class="tn-promo-apparel-visual"
      data-image="https://image.s12.sfmc-content.com/lib/fe3311727364047e721170/m/1/Apparel_Hero.png"
      data-alt="TrailNest outdoor apparel"
    ></div>

    <div class="tn-promo-copy">
      <p class="tn-promo-eyebrow">TRAILNEST · OUTDOOR APPAREL</p>
      <h2 class="tn-promo-title">Ready for every element.</h2>
      <p class="tn-promo-description">
        From cool mornings to changing skies, find your next layer
        for life outdoors.
      </p>

      <div class="tn-promo-tags" aria-label="Collection themes">
        <span>Everyday trails</span>
        <span>Weekend escapes</span>
      </div>

      <a
        class="tn-promo-cta"
        href="https://mcxkknz3m0zj3jqsxn4hm3dp3q-4.pub.sfmc-content.com/f0sn3uhu0p0?view=category&amp;category=apparel"
      >
        Explore Outdoor Apparel
        <span aria-hidden="true">→</span>
      </a>
    </div>
  </article>
</div>

<!-- Content slot for the personalized popup -->
<div id="tn_popup_slot" hidden></div>

<!-- Existing product recommendations -->
<div
  id="product_detail_wpm_recs"
  class="tn-wpm-recommendation-zone"
></div>

<!-- New popup content slot -->
<div id="tn_popup_slot" hidden></div>

<style>
dialog.tn-promo-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(880px, calc(100vw - 64px));
  max-width: 880px;
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #dce5d8;
  border-radius: 22px;
  background: #f6f7ef;
  color: #193526;
  box-shadow: 0 28px 90px rgba(8, 25, 17, .32);
  font-family: Arial, Helvetica, sans-serif;
}

dialog.tn-promo-dialog::backdrop {
  background: rgba(9, 24, 16, .62);
}

.tn-promo-dialog *,
.tn-promo-dialog *::before,
.tn-promo-dialog *::after {
  box-sizing: border-box;
}

.tn-promo-dialog .tn-promo-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(25, 53, 38, .15);
  border-radius: 50%;
  background: #fff;
  color: #193526;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.tn-promo-dialog .tn-promo-close:hover {
  background: #edf2e8;
}

.tn-promo-dialog a:focus-visible,
.tn-promo-dialog button:focus-visible {
  outline: 3px solid #b7813d;
  outline-offset: -4px;
}

.tn-promo-dialog .tn-promo-panel {
  margin: 0;
}

.tn-promo-dialog .tn-promo-image-link,
.tn-promo-dialog .tn-promo-image {
  display: block;
  width: 100%;
}

.tn-promo-dialog .tn-promo-image {
  max-width: none;
  height: auto;
}

.tn-promo-dialog .tn-promo-copy {
  padding: 42px;
}

.tn-promo-dialog .tn-promo-eyebrow {
  margin: 0 48px 14px 0;
  color: #55715a;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
}

.tn-promo-dialog .tn-promo-title {
  margin: 0;
  color: #193526;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1px;
}

.tn-promo-dialog .tn-promo-description {
  margin: 20px 0 0;
  color: #5c6d60;
  font-size: 16px;
  line-height: 1.7;
}

.tn-promo-dialog .tn-promo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #14251b;
}

.tn-promo-dialog .tn-promo-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tn-promo-dialog .tn-promo-footer {
  padding: 28px 42px 36px;
}

.tn-promo-dialog .tn-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 22px;
  border-radius: 999px;
  background: #234b35;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.tn-promo-dialog .tn-promo-cta:hover {
  background: #173923;
}

.tn-promo-dialog .tn-promo-apparel {
  display: grid;
  grid-template-columns: 44% 56%;
}

.tn-promo-dialog .tn-promo-apparel-visual {
  min-height: 480px;
  background: #e4eadc;
}

.tn-promo-dialog .tn-promo-apparel-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tn-promo-dialog .tn-promo-apparel .tn-promo-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tn-promo-dialog .tn-promo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 30px;
}

.tn-promo-dialog .tn-promo-tags span {
  padding: 8px 11px;
  border: 1px solid #d8e1d2;
  border-radius: 999px;
  color: #55715a;
  font-size: 11px;
}

.tn-promo-dialog .tn-promo-apparel .tn-promo-cta {
  align-self: flex-start;
}
</style>

<script>
(() => {
  if (window.__tnPopupInstalled) return;
  window.__tnPopupInstalled = true;

  function start() {
    const page = document.querySelector('#trailnest-app');
    if (page?.dataset.pageType !== 'product_detail') return;

    const desktop = matchMedia(
      '(min-width: 1024px) and (hover: hover) and (pointer: fine)'
    );

    const key = 'trailnest:category-popup:last-shown:v1';
    const interval = 24 * 60 * 60 * 1000;
    const allowed = new Set(['backpacks', 'tents', 'apparel']);

    let shown = false;
    let busy = false;
    let active = null;
    let scheduled = false;

    function eligible() {
      if (shown || !desktop.matches || document.hidden) return false;
      if (page.dataset.pageType !== 'product_detail') return false;

      const height =
        document.documentElement.scrollHeight - window.innerHeight;

      if (height <= 0 || window.scrollY / height < 0.5) return false;

      try {
        const saved = localStorage.getItem(key);
        if (saved === null) return true;

        const time = Number(saved);

        return Number.isFinite(time) &&
          time > 0 &&
          Date.now() - time >= interval;
      } catch {
        return false;
      }
    }

    function display() {
      if (!eligible()) return;

      const source = page.querySelector('[data-tn-popup-source]');
      const category = source?.dataset.category;

      if (!allowed.has(category)) return;

      const panel = source.querySelector(
        `[data-panel="${category}"]`
      );

      if (
        !panel ||
        typeof HTMLDialogElement === 'undefined' ||
        !HTMLDialogElement.prototype.showModal
      ) return;

      const dialog = document.createElement('dialog');
      dialog.className = 'tn-promo-dialog';
      dialog.setAttribute(
        'aria-label',
        'TrailNest featured collection'
      );

      const close = document.createElement('button');
      close.type = 'button';
      close.className = 'tn-promo-close';
      close.setAttribute('aria-label', 'Close promotion');
      close.autofocus = true;
      close.textContent = '×';
      close.addEventListener('click', () => dialog.close());

      const content = panel.cloneNode(true);
      dialog.append(close, content);

      dialog.addEventListener('click', event => {
        if (event.target !== dialog) return;

        const rect = dialog.getBoundingClientRect();

        if (
          event.clientX < rect.left ||
          event.clientX > rect.right ||
          event.clientY < rect.top ||
          event.clientY > rect.bottom
        ) {
          dialog.close();
        }
      });

      dialog.addEventListener('close', () => {
        dialog.querySelectorAll('iframe').forEach(frame => {
          frame.remove();
        });

        dialog.remove();

        if (active === dialog) active = null;
      }, { once: true });

      document.body.append(dialog);

      try {
        dialog.showModal();
        localStorage.setItem(key, String(Date.now()));
      } catch (error) {
        dialog.remove();
        console.warn('[TrailNest popup] Display skipped.', error);
        return;
      }

      shown = true;
      active = dialog;
      observer.disconnect();

      content.querySelectorAll('[data-image]').forEach(slot => {
        const image = document.createElement('img');
        image.className = 'tn-promo-image';
        image.src = slot.dataset.image;
        image.alt = slot.dataset.alt || '';
        slot.replaceChildren(image);
      });

      const video = content.querySelector('[data-video]');

      if (video) {
        const frame = document.createElement('iframe');

        frame.src =
          'https://www.youtube.com/embed/ADKEjMZM3bw' +
          '?autoplay=0&playsinline=1';

        frame.title = 'TrailNest featured YouTube video';
        frame.allow =
          'encrypted-media; picture-in-picture; fullscreen';

        frame.allowFullscreen = true;
        frame.referrerPolicy = 'strict-origin-when-cross-origin';

        video.replaceChildren(frame);
      }
    }

    async function attempt() {
      if (busy || !eligible()) return;

      // Skip display if cross-tab coordination is unavailable.
      if (!navigator.locks?.request) return;

      busy = true;

      try {
        await navigator.locks.request(
          'trailnest-category-popup',
          display
        );
      } catch (error) {
        console.warn('[TrailNest popup] Display skipped.', error);
      } finally {
        busy = false;
      }
    }

    function schedule() {
      if (scheduled || shown) return;

      scheduled = true;

      requestAnimationFrame(() => {
        scheduled = false;
        void attempt();
      });
    }

    const observer = new MutationObserver(schedule);

    observer.observe(page, {
      childList: true,
      subtree: true,
      attributes: true
    });

    window.addEventListener('scroll', schedule, { passive: true });

    window.addEventListener('resize', () => {
      if (!desktop.matches && active?.open) active.close();
      schedule();
    });

    desktop.addEventListener('change', () => {
      if (!desktop.matches && active?.open) active.close();
      schedule();
    });

    document.addEventListener('visibilitychange', schedule);

    window.addEventListener('pagehide', () => {
      if (active?.open) active.close();
    });

    schedule();
  }

  if (document.readyState === 'loading') {
    document.addEventListener(
      'DOMContentLoaded',
      start,
      { once: true }
    );
  } else {
    start();
  }
})();
</script>

&sf_personalization_wpm

localStorage.removeItem('trailnest:category-popup:last-shown:v1');