【第619回】Personalization：トップページに中央強調型カルーセルを表示する

<style>
.tn-center-recs {
  --tn-green: #234b35;
  --tn-ink: #183426;
  --tn-card-width: min(78%, 380px);
  --tn-edge: 20px;

  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 0 24px;
  color: var(--tn-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.tn-center-recs *,
.tn-center-recs *::before,
.tn-center-recs *::after {
  box-sizing: border-box;
}

.tn-center-recs__intro {
  margin: 0 0 12px;
  text-align: center;
}

.tn-center-recs__eyebrow {
  margin: 0 0 10px;
  color: var(--tn-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
}

.tn-center-recs__description {
  margin: 0;
  color: #647369;
  font-size: 15px;
  line-height: 1.6;
}

.tn-center-recs__track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 24px var(--tn-edge) 34px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.tn-center-recs__track::-webkit-scrollbar {
  display: none;
}

.tn-center-recs__item {
  flex: 0 0 var(--tn-card-width);
  min-width: 0;
  margin: 0;
  scroll-snap-align: center;
}

.tn-center-recs__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e0e7dc;
  border-radius: 22px;
  background: #fff;
  transform: scale(.88);
  transform-origin: center;
  box-shadow: 0 3px 12px rgba(24, 52, 38, .035);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.tn-center-recs__item.is-active .tn-center-recs__card {
  transform: scale(1);
  border-color: #a6ba9d;
  box-shadow:
    0 18px 32px rgba(24, 52, 38, .10),
    0 3px 8px rgba(24, 52, 38, .04);
}

.tn-center-recs__image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 20px;
  background: #f3f6ee;
}

.tn-center-recs__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.tn-center-recs__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 22px;
}

.tn-center-recs__label {
  margin: 0 0 10px;
  color: #6d806b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.tn-center-recs__name {
  margin: 0 0 18px;
  color: var(--tn-ink);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -.4px;
  overflow-wrap: anywhere;
}

.tn-center-recs__price {
  margin: auto 0 22px;
  color: var(--tn-green);
  font-size: 25px;
  font-weight: 700;
}

.tn-center-recs__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 13px 19px;
  border-radius: 999px;
  background: var(--tn-green);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.tn-center-recs__cta:hover {
  background: #183c29;
}

.tn-center-recs__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 0;
}

.tn-center-recs__controls[hidden] {
  display: none;
}

.tn-center-recs__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d6e0d0;
  border-radius: 50%;
  background: #fff;
  color: var(--tn-green);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(24, 52, 38, .04);
}

.tn-center-recs__button:hover:not(:disabled) {
  border-color: var(--tn-green);
  background: var(--tn-green);
  color: #fff;
}

.tn-center-recs__button:disabled {
  opacity: .35;
  cursor: default;
}

.tn-center-recs__status {
  min-width: 64px;
  color: #647369;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tn-center-recs a:focus-visible,
.tn-center-recs button:focus-visible,
.tn-center-recs__track:focus-visible {
  outline: 3px solid #b17c37;
  outline-offset: -3px;
}

@media (max-width: 600px) {
  .tn-center-recs__track {
    gap: 12px;
  }

  .tn-center-recs__card {
    transform: scale(.92);
  }

  .tn-center-recs__body {
    padding: 18px;
  }

  .tn-center-recs__name {
    font-size: 19px;
  }

  .tn-center-recs__price {
    font-size: 23px;
  }

  .tn-center-recs__description {
    padding: 0 18px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tn-center-recs__card {
    transition: none;
  }
}
</style>

{{#if data.length}}
<div
  class="tn-center-recs"
  data-tn-center-carousel
  role="region"
  aria-label="TrailNest recommended products"
  aria-roledescription="carousel"
>
  <div class="tn-center-recs__intro">
    <p class="tn-center-recs__eyebrow">
      TRAILNEST · YOUR NEXT ADVENTURE
    </p>

    <p class="tn-center-recs__description">
      Explore the gear. Find your next favorite.
    </p>
  </div>

  <div
    class="tn-center-recs__track"
    role="list"
    tabindex="0"
    aria-label="Recommended products. Scroll to explore."
  >
    {{#each data}}
      <div
        class="tn-center-recs__item"
        role="listitem"
      >
        <article class="tn-center-recs__card">
          <a
            class="tn-center-recs__image-link"
            href="{{subVar 'url'}}"
            aria-label="{{subVar 'name'}}"
            draggable="false"
          >
            <img
              class="tn-center-recs__image"
              src="{{subVar 'image'}}"
              alt=""
              loading="lazy"
              decoding="async"
              draggable="false"
            />
          </a>

          <div class="tn-center-recs__body">
            <p class="tn-center-recs__label">
              TRAILNEST GEAR
            </p>

            <h3 class="tn-center-recs__name">
              {{subVar 'name'}}
            </h3>

            <p class="tn-center-recs__price">
              ¥ <span data-tn-price>{{subVar 'price'}}</span>
            </p>

            <a
              class="tn-center-recs__cta"
              href="{{subVar 'url'}}"
              draggable="false"
            >
              <span>Explore this gear</span>
              <span aria-hidden="true">↗</span>
            </a>
          </div>
        </article>
      </div>
    {{/each}}
  </div>

  <div
    class="tn-center-recs__controls"
    hidden
  >
    <button
      class="tn-center-recs__button"
      type="button"
      data-tn-prev
      aria-label="Previous product"
    >
      ←
    </button>

    <span
      class="tn-center-recs__status"
      data-tn-status
      role="status"
      aria-live="polite"
      aria-atomic="true"
    ></span>

    <button
      class="tn-center-recs__button"
      type="button"
      data-tn-next
      aria-label="Next product"
    >
      →
    </button>
  </div>
</div>
{{/if}}

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

  const instances = new Map();

  const reducedMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  );

  function setup(root) {
    const track = root.querySelector(
      ".tn-center-recs__track"
    );

    const items = Array.from(
      root.querySelectorAll(".tn-center-recs__item")
    );

    const previous = root.querySelector("[data-tn-prev]");
    const next = root.querySelector("[data-tn-next]");
    const status = root.querySelector("[data-tn-status]");

    const controls = root.querySelector(
      ".tn-center-recs__controls"
    );

    if (
      !track ||
      !items.length ||
      !previous ||
      !next ||
      !status ||
      !controls
    ) {
      return null;
    }

    // Start with the second product centered when possible.
    // The first product remains visible on the left.
    let activeIndex = items.length >= 3 ? 1 : 0;

    let frame = 0;
    let resizeFrame = 0;
    let pointerStart = null;
    let moved = false;
    let blockClickUntil = 0;

    // Format numeric JPY prices without decimal places.
    root.querySelectorAll("[data-tn-price]").forEach(
      function (node) {
        const raw = node.textContent.trim();

        if (!/^-?\d+(\.\d+)?$/.test(raw)) return;

        const amount = Number(raw);
        if (!Number.isFinite(amount)) return;

        node.textContent = new Intl.NumberFormat("ja-JP", {
          maximumFractionDigits: 0
        }).format(amount);
      }
    );

    function paint(index) {
      activeIndex = index;

      items.forEach(function (item, itemIndex) {
        item.classList.toggle(
          "is-active",
          itemIndex === index
        );
      });

      previous.disabled = index === 0;
      next.disabled = index === items.length - 1;

      const label = (index + 1) + " / " + items.length;

      if (status.textContent !== label) {
        status.textContent = label;
      }
    }

    function nearestIndex() {
      const trackRect = track.getBoundingClientRect();
      const center = trackRect.left + track.clientWidth / 2;

      let nearest = 0;
      let distance = Infinity;

      items.forEach(function (item, index) {
        const rect = item.getBoundingClientRect();

        const current = Math.abs(
          rect.left + rect.width / 2 - center
        );

        if (current < distance) {
          nearest = index;
          distance = current;
        }
      });

      return nearest;
    }

    function goTo(index, animate) {
      const target = Math.max(
        0,
        Math.min(items.length - 1, index)
      );

      const trackRect = track.getBoundingClientRect();
      const itemRect = items[target].getBoundingClientRect();

      const left =
        track.scrollLeft +
        itemRect.left +
        itemRect.width / 2 -
        trackRect.left -
        track.clientWidth / 2;

      const smooth = animate && !reducedMotion.matches;

      track.scrollTo({
        left: left,
        behavior: smooth ? "smooth" : "auto"
      });

      if (!smooth) {
        paint(target);
      }
    }

    function layout() {
      const width = track.clientWidth;
      if (!width) return;

      const cardWidth = Math.min(
        380,
        width * (width < 640 ? 0.8 : 0.44)
      );

      root.style.setProperty(
        "--tn-card-width",
        cardWidth + "px"
      );

      root.style.setProperty(
        "--tn-edge",
        Math.max(0, (width - cardWidth) / 2) + "px"
      );

      goTo(activeIndex, false);
    }

    // Highlight the product closest to the center.
    track.addEventListener(
      "scroll",
      function () {
        if (frame) return;

        frame = requestAnimationFrame(function () {
          frame = 0;
          paint(nearestIndex());
        });
      },
      { passive: true }
    );

    previous.addEventListener("click", function () {
      goTo(nearestIndex() - 1, true);
    });

    next.addEventListener("click", function () {
      goTo(nearestIndex() + 1, true);
    });

    // Keyboard navigation when the track itself is focused.
    track.addEventListener("keydown", function (event) {
      if (event.target !== track) return;

      if (event.key === "ArrowLeft") {
        event.preventDefault();
        goTo(nearestIndex() - 1, true);
      } else if (event.key === "ArrowRight") {
        event.preventDefault();
        goTo(nearestIndex() + 1, true);
      } else if (event.key === "Home") {
        event.preventDefault();
        goTo(0, true);
      } else if (event.key === "End") {
        event.preventDefault();
        goTo(items.length - 1, true);
      }
    });

    // Reduce accidental navigation after a swipe.
    track.addEventListener(
      "pointerdown",
      function (event) {
        pointerStart = {
          x: event.clientX,
          y: event.clientY
        };

        moved = false;
        blockClickUntil = 0;
      },
      { passive: true }
    );

    track.addEventListener(
      "pointermove",
      function (event) {
        if (!pointerStart) return;

        const distance = Math.hypot(
          event.clientX - pointerStart.x,
          event.clientY - pointerStart.y
        );

        if (distance > 10) {
          moved = true;
        }
      },
      { passive: true }
    );

    function finishPointer(event) {
      if (moved || event.type === "pointercancel") {
        blockClickUntil = performance.now() + 500;
      }

      pointerStart = null;
    }

    track.addEventListener(
      "pointerup",
      finishPointer,
      { passive: true }
    );

    track.addEventListener(
      "pointercancel",
      finishPointer,
      { passive: true }
    );

    track.addEventListener(
      "click",
      function (event) {
        if (
          event.target.closest("a") &&
          performance.now() < blockClickUntil
        ) {
          event.preventDefault();
          event.stopImmediatePropagation();
        }
      },
      true
    );

    controls.hidden = items.length < 2;
    paint(activeIndex);

    const resizeObserver = new ResizeObserver(function () {
      cancelAnimationFrame(resizeFrame);

      resizeFrame = requestAnimationFrame(layout);
    });

    resizeObserver.observe(track);
    layout();

    return function cleanup() {
      resizeObserver.disconnect();
      cancelAnimationFrame(frame);
      cancelAnimationFrame(resizeFrame);
    };
  }

  function scan() {
    // Release observers for content removed by WPM.
    instances.forEach(function (cleanup, root) {
      if (!root.isConnected) {
        cleanup();
        instances.delete(root);
      }
    });

    // Initialize newly rendered WPM carousels.
    document.querySelectorAll(
      "[data-tn-center-carousel]"
    ).forEach(function (root) {
      if (instances.has(root)) return;

      const cleanup = setup(root);

      if (cleanup) {
        instances.set(root, cleanup);
      }
    });
  }

  function start() {
    const scope = document.getElementById("trailnest-app");
    if (!scope) return;

    const observer = new MutationObserver(scan);

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

    scan();
  }

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

<div id="home_recs" class="recommendation-zone" hidden></div>

<script>
(function () {
  const params = new URLSearchParams(location.search);

  if (params.get("tn_carousel_preview") !== "1") return;

  const slot = document.getElementById("home_recs");
  if (!slot) return;

  slot.id = "home_wpm_recs";
  slot.className = "tn-home-wpm-zone";
  slot.hidden = false;
})();
</script>

<script>
(function () {
  const params = new URLSearchParams(location.search);

  if (params.get("tn_carousel_preview") !== "1") return;

  const slot = document.getElementById("home_recs");
  if (!slot) return;

  slot.id = "home_wpm_recs";
  slot.className = "tn-home-wpm-zone";
  slot.hidden = false;
})();
</script>

home: "#home_recs",

const selectors = {
  order_confirmation: "#order_confirmation_recs_row_1"
};