(function () { // ─── CONFIG ─────────────────────────────────────────────────────────────── const TRIGGER_SLUGS = [ // Powerflex "powerflex-beach-trip-collection", "powerflex™-beach-trip-collection", "jungle-trek", "power-chew-phone", "squeaky-fish", "chew-wheel", "jungle-trek-collection-copy", "powerflex™-jungle-trek-collection-copy", "ravi-the-red-panda-copy", "power-chew-phone-copy", "sea-horse", "chomp-carrot", // Chewzilla "chewzilla-deep-sea-mission", "chewzilla®-deep-sea-mission", "deep-sea-mission-x-beach-trip-bundle", "broccoli-crunch", "moo-dengs-mom", "cactus-cowboy", "chatter-chompers", "ibone-chew", "staffy-balboa", "staffy-schwarzenegger", "the-staffinator", "the-staffinator-copy", "cosmic-crater-bone-copy", "chewzilla-musical-bone", "chewzilla-gator", "chewzilla-galactic-quest-collection-copy-1", "chewzilla®-galactic-quest-collection-copy-1", "chewzilla-sea-chomper", "musical-robot", "treat-chew-bundle", "chewzilla-galactic-quest-collection", "chewzilla®-galactic-quest-collection", // collection-level fallbacks "powerflex-durable-toys", "chewzilla-ultra-tough-dog-toys", ]; const AUTO_ROTATE_MS = 7000; const BENEFITS_GRID_SEL = ".dog-benefits-grid"; const TITLE_SELECTOR = ".cpf-title"; const INSERT_BEFORE_SEL = ".chew-meter-card"; // ─── CARD DATA ──────────────────────────────────────────────────────────── const CARDS = [ { id: "mentally-engaged", iconImg: "https://cdn.shopify.com/s/files/1/0599/2919/8777/files/hpsaa.png?v=1788266385", iconAlt: "", text: `Designed to keep dogs mentally engaged & reduce destructive chewing`, }, { id: "loved", iconImg: "https://cdn.shopify.com/s/files/1/0599/2919/8777/files/hpsbb.png?v=1788266430", iconAlt: "", text: `Loved by 130k+ dogs who love to chew`, }, { id: "experts", iconImg: "https://cdn.shopify.com/s/files/1/0599/2919/8777/files/hpscc.png?v=1788266469", iconAlt: "", text: `Designed by trusted dog experts for safer, more satisfying chewing`, }, ]; // ─── CSS ────────────────────────────────────────────────────────────────── const CSS = ` .tcc-wrapper { width: 100%; box-sizing: border-box; padding: 20px 0 8px; } /* Full-width cream card */ .tcc-card { background: #fdf7f0; border-radius: 12px; width: 100%; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 12px 0 12px; gap: 0; } .tcc-body { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 12px; box-sizing: border-box; gap: 0; } /* Viewport — max-width centered between arrows */ .tcc-viewport { flex: 1; min-width: 0; max-width: 383px; margin: 0 auto; overflow: hidden; } .tcc-track { display: flex; flex-wrap: nowrap; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .tcc-slide { flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; } .tcc-row { display: flex; flex-direction: row; gap: 10px; align-items: center; width: 100%; justify-content: center; } .tcc-icon { flex-shrink: 0; width: 65px; height: 65px; object-fit: contain; display: block; } .tcc-text { font-family: "Arial-Bold", Arial, sans-serif; font-size: 15.6px; line-height: 20.8px; font-weight: 700; color: rgba(0, 0, 0, 0.8); text-align: left; flex: 1; } .tcc-accent, .tcc-text .tcc-accent, .tcc-text span.tcc-accent { color: #ff6b00 !important; } /* Dots — centered below body */ .tcc-dots { display: flex; flex-direction: row; gap: 4px; align-items: center; justify-content: center; } .tcc-dot { width: 7px; height: 4px; border-radius: 999px; background: #ffffff; border: none; padding: 0; cursor: pointer; flex-shrink: 0; transition: background 0.25s; } .tcc-dot--active { background: #ff6b00; } /* Arrows — inside .tcc-body, flex siblings of viewport */ .tcc-arrow { flex-shrink: 0; align-self: center; background: none; border: none; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 10px; } .tcc-arrow svg { width: 11px; height: 10px; stroke: #ff6b00; stroke-width: 1.5px; fill: none; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 700px) { .tcc-wrapper { padding: 20px 0px 8px; } .tcc-viewport { max-width: 311px !important; margin: 0 auto; } .tcc-text { font-size: 12px !important; line-height: 16px !important; } .tcc-icon { width: 50px !important; height: 50px !important; } .tcc-row { gap: 8px !important; } } `; // ─── HELPERS ────────────────────────────────────────────────────────────── function injectStyles() { if (document.getElementById("tcc-styles")) return; const s = document.createElement("style"); s.id = "tcc-styles"; s.textContent = CSS; document.head.appendChild(s); } function titleMatchesKeyword() { const path = decodeURIComponent(window.location.pathname.toLowerCase()); console.log("[TCC] path:", path); if (!path.includes("/products/")) { console.log("[TCC] no /products/"); return false; } const raw = path.split("/products/")[1].split("?")[0].split("#")[0]; const slug = raw.replace(/[^\w-]/g, ""); console.log("[TCC] raw slug:", raw, "| cleaned:", slug); const match = TRIGGER_SLUGS.some((s) => { const cleaned = s.replace(/[^\w-]/g, ""); const hit = slug.includes(cleaned); if (hit) console.log("[TCC] matched:", s); return hit; }); console.log("[TCC] result:", match); return match; } function buildCarousel() { const wrapper = document.createElement("div"); wrapper.className = "tcc-wrapper"; wrapper.id = "tcc-wrapper"; const card = document.createElement("div"); card.className = "tcc-card"; // Body: arrow | viewport | arrow — centered, max-width 416px const body = document.createElement("div"); body.className = "tcc-body"; const prevBtn = document.createElement("button"); prevBtn.className = "tcc-arrow tcc-arrow--prev"; prevBtn.setAttribute("aria-label", "Previous slide"); prevBtn.innerHTML = ``; prevBtn.addEventListener("click", () => goTo(currentIndex - 1)); const viewport = document.createElement("div"); viewport.className = "tcc-viewport"; const track = document.createElement("div"); track.className = "tcc-track"; const slides = []; CARDS.forEach((data) => { const slide = document.createElement("div"); slide.className = "tcc-slide"; const row = document.createElement("div"); row.className = "tcc-row"; const img = document.createElement("img"); img.src = data.iconImg; img.alt = data.iconAlt; img.width = 65; img.height = 65; img.loading = "lazy"; img.className = "tcc-icon"; const text = document.createElement("div"); text.className = "tcc-text"; text.innerHTML = data.text; row.appendChild(img); row.appendChild(text); slide.appendChild(row); track.appendChild(slide); slides.push(slide); }); viewport.appendChild(track); const nextBtn = document.createElement("button"); nextBtn.className = "tcc-arrow tcc-arrow--next"; nextBtn.setAttribute("aria-label", "Next slide"); nextBtn.innerHTML = ``; nextBtn.addEventListener("click", () => goTo(currentIndex + 1)); body.appendChild(prevBtn); body.appendChild(viewport); body.appendChild(nextBtn); // Dots below body, still inside card const dots = document.createElement("div"); dots.className = "tcc-dots"; CARDS.forEach((_, i) => { const dot = document.createElement("button"); dot.className = "tcc-dot" + (i === 0 ? " tcc-dot--active" : ""); dot.setAttribute("aria-label", `Slide ${i + 1}`); dot.addEventListener("click", () => goTo(i)); dots.appendChild(dot); }); card.appendChild(body); card.appendChild(dots); wrapper.appendChild(card); return { wrapper, track, viewport, slides, dots }; } function updateDots(dots, idx) { Array.from(dots.children).forEach((d, i) => d.classList.toggle("tcc-dot--active", i === idx) ); } // ─── STATE ──────────────────────────────────────────────────────────────── let currentIndex = 0; let timer = null; let trackEl = null; let dotsEl = null; let slideWidth = 0; function goTo(idx) { currentIndex = (idx + CARDS.length) % CARDS.length; trackEl.style.transform = `translateX(-${currentIndex * slideWidth}px)`; updateDots(dotsEl, currentIndex); startAutoRotate(); } function startAutoRotate() { clearInterval(timer); timer = setInterval(() => goTo(currentIndex + 1), AUTO_ROTATE_MS); } function setBenefitsGridVisibility(visible) { document.querySelectorAll(BENEFITS_GRID_SEL).forEach((el) => { el.style.display = visible ? "" : "none"; }); } function mount() { const isMatch = titleMatchesKeyword(); setBenefitsGridVisibility(!isMatch); if (!isMatch) return; injectStyles(); const existing = document.getElementById("tcc-wrapper"); if (existing) existing.remove(); const { wrapper, track, viewport, slides, dots } = buildCarousel(); trackEl = track; dotsEl = dots; const chewMeter = document.querySelector(INSERT_BEFORE_SEL); if (chewMeter) { chewMeter.insertAdjacentElement("beforebegin", wrapper); } else { const fallback = document.querySelector(".cpf-rating") || document.querySelector(".cpf-title") || document.querySelector(".product__title") || document.querySelector("h1.title") || document.querySelector("h1") || document.querySelector(".product-single__title") || document.querySelector(".product__info-container") || document.querySelector("main"); if (!fallback) return; fallback.insertAdjacentElement("afterend", wrapper); } requestAnimationFrame(() => { slideWidth = viewport.offsetWidth; slides.forEach((s) => { s.style.width = slideWidth + "px"; }); track.style.width = (slideWidth * CARDS.length) + "px"; track.style.transform = "translateX(0)"; startAutoRotate(); }); // Re-measure on resize so mobile/desktop switch works window.addEventListener("resize", () => { requestAnimationFrame(() => { slideWidth = viewport.offsetWidth; slides.forEach((s) => { s.style.width = slideWidth + "px"; }); track.style.width = (slideWidth * CARDS.length) + "px"; trackEl.style.transform = `translateX(-${currentIndex * slideWidth}px)`; }); }); wrapper.addEventListener("mouseenter", () => clearInterval(timer)); wrapper.addEventListener("mouseleave", startAutoRotate); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", mount) } else { mount(); } })();

Cart 0

Sorry, looks like we don't have enough of this product.

Products Sale