T-Shirts

/* Tire Time - "Pairs great with" upsell row for the cart drawer. Uses Shopify's product recommendations API, pre-selects the shopper's size from the first cart item, adds with one tap, then fires the theme's cart:update event so the drawer re-renders. */ (() => { if (window.__ttUpsell) return; window.__ttUpsell = true; const MAX = 6; const cache = {}; let busy = false; let lastEmptyKey = null; let timer; const root = (window.Shopify && Shopify.routes && Shopify.routes.root) || '/'; const money = (c) => '$' + (c / 100).toFixed(2); const strip = (u) => (u || '').split('?')[0].replace(/^https?:/, ''); const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"' }[c])); const style = document.createElement('style'); style.textContent = ` .tt-upsell{padding:16px 24px 8px;border-top:1px solid var(--color-border,#ddd);margin-top:8px} .tt-upsell h4{margin:0 0 10px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em} .tt-upsell__row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch} .tt-upsell__card{flex:0 0 140px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;font-size:13px} .tt-upsell__card img{width:140px;height:140px;object-fit:cover;border-radius:6px;display:block;background:#f2f2f2} .tt-upsell__title{font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:inherit} .tt-upsell__meta{opacity:.75} .tt-upsell__card select{width:100%;padding:4px 6px;font-size:13px;border:1px solid #ccc;border-radius:4px;background:#fff;color:#000} .tt-upsell__btn{padding:7px 0;font-size:13px;font-weight:700;border:0;border-radius:6px;background:#dd1c1d;color:#fff;cursor:pointer} .tt-upsell__btn[disabled]{opacity:.6;cursor:default}`; document.head.appendChild(style); const getRecs = (pid) => { if (!cache[pid]) { cache[pid] = fetch(`${root}recommendations/products.json?product_id=${pid}&limit=10&intent=related`) .then((r) => (r.ok ? r.json() : { products: [] })) .then((d) => d.products || []) .catch(() => []); } return cache[pid]; }; const optIdx = (p, re) => (p.options || []).findIndex((o) => re.test(typeof o === 'string' ? o : o.name)); // Pick an available variant in the chosen size, preferring the colour shown in the product's main photo. const pickVariant = (p, size) => { const si = optIdx(p, /size/i); const main = strip(p.featured_image); const avail = p.variants.filter((v) => v.available && (si < 0 || v.options[si] === size)); return avail.find((v) => v.featured_image && strip(v.featured_image.src) === main) || avail[0]; }; async function render() { const host = document.querySelector('.cart-drawer__items'); if (!host || host.querySelector('.tt-upsell') || busy) return; busy = true; try { const cart = await fetch(`${root}cart.js`).then((r) => r.json()); if (!cart.items.length) return; const key = cart.items.map((i) => i.variant_id).join(','); if (key === lastEmptyKey) return; const inCart = new Set(cart.items.map((i) => i.product_id)); let mySize = null; (cart.items[0].options_with_values || []).forEach((o) => { if (/size/i.test(o.name)) mySize = o.value; }); let recs = []; for (const item of cart.items) { recs = recs.concat(await getRecs(item.product_id)); if (recs.length >= MAX * 2) break; } const seen = new Set(); recs = recs .filter((p) => p.available && !inCart.has(p.id) && !seen.has(p.id) && seen.add(p.id)) .slice(0, MAX); if (!recs.length) { lastEmptyKey = key; return; } const target = document.querySelector('.cart-drawer__items'); if (!target || target.querySelector('.tt-upsell')) return; const box = document.createElement('div'); box.className = 'tt-upsell'; box.innerHTML = '

Pairs great with

'; const row = box.querySelector('.tt-upsell__row'); recs.forEach((p) => { const si = optIdx(p, /size/i); const ci = optIdx(p, /colou?r/i); const sizes = si < 0 ? [] : [...new Set(p.variants.filter((v) => v.available).map((v) => v.options[si]))]; const def = sizes.includes(mySize) ? mySize : sizes.includes('L') ? 'L' : sizes[0]; const v0 = pickVariant(p, def); if (!v0) return; const img = (v0.featured_image && v0.featured_image.src) || p.featured_image || ''; const label = (v) => money(v.price) + (ci >= 0 ? ' · ' + v.options[ci] : ''); const card = document.createElement('div'); card.className = 'tt-upsell__card'; card.innerHTML = `

${esc(p.title)}

${esc(label(v0))}

${sizes.length ? `` : ''} `; const sel = card.querySelector('select'); const btn = card.querySelector('button'); const meta = card.querySelector('.tt-upsell__meta'); if (sel) { sel.addEventListener('change', () => { const v = pickVariant(p, sel.value); if (v) meta.textContent = label(v); }); } btn.addEventListener('click', async () => { const v = pickVariant(p, sel ? sel.value : null); if (!v) return; btn.disabled = true; btn.textContent = 'Adding…'; try { const res = await fetch(`${root}cart/add.js`, { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ items: [{ id: v.id, quantity: 1 }] }), }); if (!res.ok) throw new Error('add failed'); const updated = await fetch(`${root}cart.js`).then((r) => r.json()); const ev = new Event('cart:update', { bubbles: true }); ev.detail = { resource: updated, sourceId: 'tt-upsell', data: { source: 'tt-upsell', itemCount: updated.item_count, variantId: String(v.id) }, }; document.dispatchEvent(ev); } catch (e) { btn.disabled = false; btn.textContent = 'Try again'; } }); row.appendChild(card); }); if (row.children.length) target.appendChild(box); } catch (e) { /* fail quietly: the cart still works without the upsell row */ } finally { busy = false; } } const schedule = (ms) => { clearTimeout(timer); timer = setTimeout(render, ms); }; new MutationObserver(() => schedule(250)).observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['open'], }); document.addEventListener('cart:update', () => schedule(600)); render(); })();.

Off-Road Collection

★★★★★30-day Guarantee 🇨🇦

Find Me Offline T-Shirt

Weekends Are for Bad Ideas T-Shirt

Salt Air Mud Hair T-Shirt

Bad Decisions dept T‑Shirt

Weekend Forecast T-Shirt

Critter Report T-Shirt

Trail Condition Report T-Shirt

Running On Empty T-Shirt

One More Trail T-Shirt

Emotional Support Vehicle T-Shirt

Zero Bars T‑Shirt

No Signal T-Shirt

Pairs great with