/* MYTONE — light-DOM layout for wishlist widgets (positioning + per-context CSS vars; visual style lives in custom CSS inside widget shadow) */ (function () { if (document.getElementById('mytone-wishlist-light')) return; var css = '' + /* Header badge host align (feedback 2026-07-25): the badge is an app block inside Dawn's .header__icons; the host stretches to the 44px row but its inner 28px .badge button sticks to the TOP (measured live: badge cy 78.5 vs cart cy 86.5). align-items centers the inner button in the host; vertical-align covers inline-flow headers. Host is light DOM — unreachable from the adopted shadow sheet, hence this document-level rule. */ 'sledge-wishlist-badge{display:inline-flex;align-items:center;vertical-align:middle;height:100%;}' + '.product__title{position:relative;}' + '.product__title h1{max-width:calc(100% - 60px);}' + '.product__title > div:has(> sledge-wishlist-trigger),.product__title [data-component="wishlist-trigger"]{position:absolute;top:0;right:0;}' + '.product__title sledge-wishlist-trigger{--mytone-wl-pad:14px;--mytone-wl-radius:100%;}' + 'li.grid__item product-component{position:relative;display:block;}' + 'li.grid__item product-component > div:has(> sledge-wishlist-trigger){position:absolute;top:10px;right:10px;z-index:2;}' + '.card-wrapper [data-component="wishlist-trigger"]{position:absolute;top:10px;right:10px;z-index:2;}'; var style = document.createElement('style'); style.id = 'mytone-wishlist-light'; style.textContent = css; document.head.appendChild(style); })(); (function () { // ── CONFIG — behavior switches ────────────────────────────────── var CONFIG = { // Product tags that trigger each state tagComingSoon: 'comingsoon', tagLimited: '在庫限り', tagOnlineOnly: 'オンライン限定', tagNew: 'new', // Metafields (flat "namespace.key") used by the badges metafieldCustomLabel: 'custom.label', metafieldRestockDate: 'date.restock', metafieldHasStore: 'bool.has_store', hasStoreValue: 'あり（在庫◯）', // When a product is BOTH out of stock with a future restock date AND // tagged comingsoon: false = show COMING SOON (current behavior), // true = show BACK ORDERED instead. restockBeatsComingSoon: false, // Per-page behavior excludeSoldOutOnCart: true, // hide sold-out / coming-soon cards on the cart page showAtcOnCart: true, // variant selector + add-to-cart on the cart page showAtcOnWishlist: true, // variant selector + add-to-cart on /pages/wishlist showAtcElsewhere: false, // product page & other pages: badge-only cards redirectToCartAfterAdd: true, // go to /cart after add to cart (like V2) }; // ── T — display texts ─────────────────────────────────────────── var currentLocale = ( window.Shopify && window.Shopify.locale ) || document.documentElement.lang || 'ja'; currentLocale = String(currentLocale) .toLowerCase() .split('-')[0]; var TRANSLATIONS = { ja: { comingsoon: '販売開始', comingsoon_blank: '近日販売開始', restock: '再入荷予定', restockShort: '再入荷', end: '販売終了', limited: '在庫限り', onlineSoldout: '直営店在庫◯', onlineOnly: 'オンライン限定', newBadge: 'NEW', onSale: 'SALE', stay: '入荷待ち', soldout: '完売', pending: "再入荷未定", addToCart: 'カートに追加する', from: '' }, en: { comingsoon: 'COMING SOON', comingsoon_blank: 'Coming soon on sale', restock: 'Restock scheduled', restockShort: 'Restock', end: 'End of Sale', limited: 'Limited', onlineSoldout: 'Real store ◯', onlineOnly: 'Online only', newBadge: 'NEW', onSale: 'SALE', stay: 'Backordered', soldout: 'Sold out', pending: "Backordered", addToCart: 'Add to cart', from: '' } }; var T = TRANSLATIONS[currentLocale] || TRANSLATIONS.ja; // ════════════════════════════════════════════════════════════════ // Implementation — no changes needed below this line // ════════════════════════════════════════════════════════════════ function esc(s) { return String(s == null ? '' : s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); } function money(cents) { try { if (window.sledge && window.sledge.shopifyFormatMoney) return window.sledge.shopifyFormatMoney(cents); } catch (e) { /* fall through */ } return '¥' + Math.round(Number(cents) / 100).toLocaleString('ja-JP'); } function fmtDate(dateString, withTime) { if (!dateString) return ''; var date = new Date(dateString); if (isNaN(date.getTime())) { return ''; } var month = date.getMonth() + 1; var day = date.getDate(); if (!withTime) { return month + '/' + day; } var hours = String(date.getHours()).padStart(2, '0'); var minutes = String(date.getMinutes()).padStart(2, '0'); return month + '/' + day + ' ' + hours + ':' + minutes; } function numericId(id) { var m = String(id == null ? '' : id).match(/(\d+)\s*$/); return m ? m[1] : ''; } window.renderProductCard = function (args) { var p = (args && args.product) || {}; var variants = Array.isArray(p.variants) ? p.variants : []; var v0 = variants[0] || {}; var tags = Array.isArray(p.tags) ? p.tags : []; var mf = p.metafields || {}; var oos = p.availability === 'out of stock'; var restock = mf[CONFIG.metafieldRestockDate]; var restockDate = restock ? new Date(restock) : null; var future = !!(restockDate && !isNaN(restockDate.getTime()) && new Date() < restockDate); var hasStore = mf[CONFIG.metafieldHasStore] === CONFIG.hasStoreValue; var customLabel = mf[CONFIG.metafieldCustomLabel]; var taggedComing = tags.indexOf(CONFIG.tagComingSoon) !== -1; var isRestock = oos && future && (CONFIG.restockBeatsComingSoon || !taggedComing); var isComing = taggedComing && !isRestock; var isSoldOut = !isComing && !isRestock && oos; var isEnd = tags.indexOf(CONFIG.tagLimited) !== -1; var isNew = tags.indexOf(CONFIG.tagNew) !== -1; var isOnlineOnly = tags.indexOf(CONFIG.tagOnlineOnly) !== -1 || mf[CONFIG.metafieldHasStore] === 'なし'; // per-page behavior var path = location.pathname; var isCart = /\/cart\/?$/.test(path); var isWishlistPage = /\/pages\/wishlist(?:$|[/?])/.test(path); var purchasable = !oos && !isComing; if (isCart && CONFIG.excludeSoldOutOnCart && !purchasable) { return '

'; } var showActions = purchasable && ( (isCart && CONFIG.showAtcOnCart) || (isWishlistPage && CONFIG.showAtcOnWishlist) || (!isCart && !isWishlistPage && CONFIG.showAtcElsewhere) ); // price — "from ¥X" when variant prices differ var prices = variants.map(function (v) { return parseFloat(v.price); }).filter(function (n) { return !isNaN(n); }); var minPrice = prices.length ? Math.min.apply(null, prices) : 0; var maxPrice = prices.length ? Math.max.apply(null, prices) : 0; var onSale = variants.some(function (v) { var c = parseFloat(v.compare_at_price); return !isNaN(c) && c > parseFloat(v.price); }); var priceHtml = (maxPrice > minPrice ? esc(T.from) : '') + money(minPrice); // media — primary + hover image var img0 = (p.image && p.image.src) || ''; var img1 = (p.images && p.images[1] && p.images[1].src) || ''; // overlay + strip var overlay = '', strip = ''; if (isComing) { overlay = 'COMING SOON'; var stripText = ''; if (restock && future) { stripText = esc(fmtDate(restock, true)) + ' ' + esc(T.comingsoon); } else if (customLabel) { stripText = esc(customLabel); } else { stripText = esc(T.comingsoon_blank); } strip = '' + stripText + ''; } else if (isRestock) { overlay = 'BACK ORDERED'; strip = '' + esc(fmtDate(restock)) + ' ' + esc(hasStore ? T.restockShort : T.restock) + ( hasStore? ' / ' + esc(T.onlineSoldout): '') + ''; } else if (isSoldOut) { overlay = 'SOLD OUT'; if (isEnd) { // 在庫限りタグあり strip = '' + esc(T.end) + ( hasStore ? ' / ' + esc(T.onlineSoldout) : '') + ''; } else if (customLabel) { strip = '' + esc(customLabel) + ( hasStore ? ' / ' + esc(T.onlineSoldout) : '') + ''; } else { // 在庫限りタグなし strip = '' + esc(T.stay) + ( hasStore? ' / ' + esc(T.onlineSoldout) : '') + ''; } } // top-left chips (only when nothing covers the media) var chips = ''; if (!overlay && !strip) { var chipList = []; if (isNew) chipList.push('' + esc(T.newBadge) + ''); if (isEnd) chipList.push('' + esc(T.limited) + ''); if (onSale) chipList.push('' + esc(T.onSale) + ''); if (chipList.length) chips = '

' + chipList.join('') + '

'; } // variant selector — skip when single variant or Default Title var selectHtml = ''; if (showActions && variants.length > 1) { var opts = variants.map(function (v) { var vOos = v.availability === 'out of stock'; return ''; }).join(''); selectHtml = ''; } var atcHtml = showActions ? '' : ''; var stockLabel = isOnlineOnly ? '' + esc(T.onlineOnly) + '' : ''; // wishlist heart: render the V2-style anchor div — the wishlist module // mounts its managed trigger INTO this anchor (no duplicates). var wishlist = '

'; return '' + '

' + '

' + '' + (img1 ? '

' : '') + ' ' + esc(p.title) + '

' + '' + wishlist + chips + overlay + strip + '

' + '

' + esc(p.title) + '

' + '

' + priceHtml + stockLabel + '

' + selectHtml + atcHtml + '

'; }; // ── add-to-cart (composed click crosses shadow boundaries) ── document.addEventListener('click', function (e) { var path = e.composedPath ? e.composedPath() : [e.target]; var btn = null; for (var i = 0; i < path.length; i++) { var n = path[i]; if (n && n.classList && n.classList.contains('mytone-rv-atc')) { btn = n; break; } } if (!btn || btn.disabled) return; e.preventDefault(); var card = btn.closest('.mytone-rv-card'); var sel = card && card.querySelector('select.mytone-rv-select'); var variantId = (sel && sel.value) || btn.getAttribute('data-variant-id'); if (!variantId) return; btn.classList.add('is-loading'); fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify({ items: [{ id: Number(variantId), quantity: 1 }] }), }).then(function (r) { if (!r.ok) throw new Error('cart add failed: ' + r.status); if (CONFIG.redirectToCartAfterAdd) window.location.href = '/cart'; else btn.classList.remove('is-loading'); }).catch(function (err) { console.warn('[mytone-rv] add to cart failed', err); btn.classList.remove('is-loading'); }); }, true); function findScrollContainer(nav) { var scope = nav.closest('[data-component]') || nav.parentElement.parentElement || nav.parentElement; if (!scope) return null; var elements = Array.from(scope.querySelectorAll('*')); return elements.find(function (element) { var style = getComputedStyle(element); return ( element.scrollWidth > element.clientWidth + 5 && ( style.overflowX === 'auto' || style.overflowX === 'scroll' ) ); }) || null; } function setupSliderCounter(root) { var navs = root.querySelectorAll('.slider-nav'); navs.forEach(function (nav) { if (nav.dataset.counterReady === 'true') return; var prev = nav.querySelector('#nav-prev'); var next = nav.querySelector('#nav-next'); if (!prev || !next) return; var slider = findScrollContainer(nav); if (!slider) return; var counter = document.createElement('span'); counter.className = 'slider-counter'; nav.insertBefore(counter, next); nav.dataset.counterReady = 'true'; /* * navigation */ var scope = nav.closest('[data-component]') || nav.parentElement.parentElement || nav.parentElement; function getValidCardCount() { if (!scope) return 0; return Array.from( scope.querySelectorAll('.mytone-rv-card') ).filter(function (card) { return !card.classList.contains( 'mytone-rv-card--excluded' ); }).length; } function getItemsPerPage() { return window.matchMedia( '(max-width: 749px)' ).matches ? 2 : 5; } function getTotalPages() { var cardCount = getValidCardCount(); var itemsPerPage = getItemsPerPage(); return Math.max( 1, Math.ceil(cardCount / itemsPerPage) ); } function updateCounter() { var total = getTotalPages(); var maxScroll = slider.scrollWidth - slider.clientWidth; var current = 1; if (total > 1 && maxScroll > 0) { var progress = slider.scrollLeft / maxScroll; current = Math.round(progress * (total - 1)) + 1; } if (prev.disabled) { current = 1; } if (next.disabled) { current = total; } current = Math.min( total, Math.max(1, current) ); counter.textContent = current + '/' + total; } slider.addEventListener('scroll', function () { window.requestAnimationFrame(updateCounter); }, { passive: true }); prev.addEventListener('click', function () { window.setTimeout(updateCounter, 350); }); next.addEventListener('click', function () { window.setTimeout(updateCounter, 350); }); window.addEventListener('resize', function () { window.setTimeout(updateCounter, 100); }); var observer = new MutationObserver(updateCounter); observer.observe(slider, { childList: true, subtree: true, attributes: true }); updateCounter(); }); } function initialize() { setupSliderCounter(document); document.querySelectorAll('*').forEach(function (element) { if (element.shadowRoot) { setupSliderCounter(element.shadowRoot); } }); } initialize(); var pageObserver = new MutationObserver(function () { initialize(); }); pageObserver.observe(document.documentElement, { childList: true, subtree: true }); })();

国/地域

バリエーション：HOOK SHELF