{
"version": 3,
"sources": ["/cdn/shop/t/69/assets/myom-reviews.js?nocache=1791303652"],
"sourcesContent": ["/*\n * MYOM reviews: 5-star photo/video reviews from the Loox Storefront API in an equal-height card grid.\n * Vanilla JS, no dependencies. Everything from the API goes into the DOM via textContent or validated\n * URL attributes; innerHTML is never used with API data.\n *\n * Selection rule: every card is a 5-star product review with at least one photo or video.\n * - rating=5 is filtered server-side (the API supports a `rating` filter).\n * - \"has media\" is filtered client-side (no such API filter). sort=featured puts photo/video reviews\n * first, so one page of limit=250 normally holds the whole pool; we page further only while a page\n * still yields qualifying reviews, up to MAX_REQUESTS per page load.\n * - Store reviews (/store-reviews) carry no media in this API, so they can never qualify and are not fetched.\n * - The pool is then ordered newest first (client-side, by review date), so the grid and \"Show more\"\n * run in date order while the fetch itself keeps the featured sort that gathers the pool in one request.\n * - Only complete rows are shown; fewer than MIN_CARDS qualifying reviews hides the section.\n * - The merged, filtered pool is cached in sessionStorage for CACHE_TTL_MS.\n *\n * API (public store ID in the URL, CORS-restricted to the store's domain, Cache-Control max-age=60):\n * GET {base}/product-reviews/bottomline -> { totalReviews, averageRating }\n * GET {base}/product-reviews?rating=5&sort=featured&direction=desc&limit=250&page=N&total=T\n * -> { reviews: [...], pagination: { page, total, hasMore } }\n */\n(function () {\n 'use strict';\n\n var API_BASE = 'https://storefront-api.loox.io/storefront/v1/store/';\n var PAGE_LIMIT = 250; // API maximum\n var MAX_REQUESTS = 6; // review-list requests per page load (bottomline not counted)\n var CACHE_TTL_MS = 60 * 1000; // matches the API's own max-age=60\n var CACHE_VERSION = 'v3';\n\n var dateFormat;\n try {\n dateFormat = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });\n } catch (e) {\n dateFormat = null;\n }\n\n var numberFormat;\n try {\n numberFormat = new Intl.NumberFormat('en-GB');\n } catch (e) {\n numberFormat = null;\n }\n\n function el(tag, className, text) {\n var node = document.createElement(tag);\n if (className) node.className = className;\n if (text !== undefined && text !== null) node.textContent = String(text);\n return node;\n }\n\n // If a product thumbnail 404s (e.g. a product since deleted), drop the ![]()
so the thumbnail box shows empty.\n function removeOnError(img) {\n img.addEventListener('error', function () {\n if (img.parentNode) img.parentNode.removeChild(img);\n });\n return img;\n }\n\n function safeUrl(value, allowHttpUpgrade) {\n if (typeof value !== 'string' || !value) return null;\n var url;\n try {\n url = new URL(value, window.location.origin);\n } catch (e) {\n return null;\n }\n if (url.protocol === 'http:' && allowHttpUpgrade) url.protocol = 'https:';\n if (url.protocol !== 'https:') return null;\n return url.href;\n }\n\n function formatDate(iso) {\n if (!iso) return '';\n var d = new Date(iso);\n if (isNaN(d.getTime())) return '';\n return dateFormat ? dateFormat.format(d) : d.toLocaleDateString();\n }\n\n function formatCount(n) {\n return numberFormat ? numberFormat.format(n) : String(n);\n }\n\n function clampRating(value) {\n var n = Math.round(Number(value));\n if (!isFinite(n)) return 0;\n return Math.min(5, Math.max(0, n));\n }\n\n function starSvg(empty) {\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('viewBox', '0 0 24 24');\n svg.setAttribute('aria-hidden', 'true');\n svg.setAttribute('focusable', 'false');\n if (empty) svg.setAttribute('class', 'is-empty');\n var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n path.setAttribute('d', 'M12 2.5l2.95 6.1 6.7.9-4.9 4.7 1.2 6.7L12 17.7l-5.95 3.2 1.2-6.7-4.9-4.7 6.7-.9z');\n svg.appendChild(path);\n return svg;\n }\n\n function stars(rating, label) {\n var n = clampRating(rating);\n var wrap = el('span', 'myom-reviews__stars');\n wrap.setAttribute('role', 'img');\n wrap.setAttribute('aria-label', label || ('Rated ' + n + ' out of 5 stars'));\n for (var i = 1; i <= 5; i++) wrap.appendChild(starSvg(i > n));\n return wrap;\n }\n\n function verifiedBadge() {\n var badge = el('span', 'myom-review-card__verified');\n var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('viewBox', '0 0 20 20');\n svg.setAttribute('aria-hidden', 'true');\n svg.setAttribute('focusable', 'false');\n svg.setAttribute('fill', 'currentColor');\n var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');\n path.setAttribute('d', 'M10 1.5l2.2 1.6 2.7-.3 1 2.5 2.5 1-.3 2.7 1.6 2.2-1.6 2.2.3 2.7-2.5 1-1 2.5-2.7-.3L10 18.5l-2.2-1.6-2.7.3-1-2.5-2.5-1 .3-2.7L.3 9.8l1.6-2.2-.3-2.7 2.5-1 1-2.5 2.7.3zm-1.1 11.3l5-5-1.4-1.4-3.6 3.6-1.8-1.8-1.4 1.4z');\n svg.appendChild(path);\n badge.appendChild(svg);\n badge.appendChild(el('span', null, 'Verified'));\n return badge;\n }\n\n function reviewerName(review) {\n var name = review && review.reviewer && review.reviewer.name;\n return typeof name === 'string' && name.trim() ? name.trim() : 'Anonymous';\n }\n\n function mediaOf(review) {\n var media = review && Array.isArray(review.media) ? review.media : [];\n return media.filter(function (m) {\n if (!m || (m.type !== 'photo' && m.type !== 'video')) return false;\n if (!safeUrl(m.url)) return false;\n if (m.type === 'video' && !safeUrl(m.thumbnailUrl)) return false; // the card needs a poster image\n return true;\n });\n }\n\n function reviewTime(review) {\n var t = Date.parse(review.date || review.createdAt || '');\n return isNaN(t) ? 0 : t;\n }\n\n // Newest first; ties keep the API's featured order (stable sort via index).\n function sortNewestFirst(pool) {\n return pool\n .map(function (review, index) { return { review: review, index: index, t: reviewTime(review) }; })\n .sort(function (a, b) { return b.t - a.t || a.index - b.index; })\n .map(function (entry) { return entry.review; });\n }\n\n function qualifies(review) {\n return !!review && typeof review === 'object' && typeof review.id === 'string' &&\n clampRating(review.rating) === 5 && mediaOf(review).length > 0;\n }\n\n function productRow(product) {\n if (!product || typeof product !== 'object') return null;\n var name = typeof product.name === 'string' ? product.name.trim() : '';\n var image = safeUrl(product.imageUrl);\n var href = safeUrl(product.url, true);\n if (!name && !image) return null;\n\n var row = el('div', 'myom-review-card__product');\n var thumb = el('span', 'myom-review-card__product-thumb');\n if (image) {\n var img = el('img');\n img.src = image;\n img.alt = '';\n img.loading = 'lazy';\n img.decoding = 'async';\n img.width = 40;\n img.height = 40;\n thumb.appendChild(removeOnError(img));\n }\n row.appendChild(thumb);\n\n if (href) {\n var link = el('a', 'myom-review-card__product-link', name || 'View product');\n link.href = href;\n row.appendChild(link);\n } else {\n row.appendChild(el('span', 'myom-review-card__product-name', name));\n }\n return row;\n }\n\n /* sessionStorage cache of the filtered pool (per store ID), 60 s */\n function cacheKey(storeId) {\n return 'myom-reviews:' + CACHE_VERSION + ':' + storeId;\n }\n\n function readCache(storeId) {\n try {\n var raw = window.sessionStorage.getItem(cacheKey(storeId));\n if (!raw) return null;\n var data = JSON.parse(raw);\n if (!data || typeof data.t !== 'number' || Date.now() - data.t > CACHE_TTL_MS) return null;\n if (!Array.isArray(data.pool)) return null;\n return data;\n } catch (e) {\n return null;\n }\n }\n\n function writeCache(storeId, data) {\n try {\n window.sessionStorage.setItem(cacheKey(storeId), JSON.stringify(data));\n } catch (e) {\n /* storage disabled or full: ignore */\n }\n }\n\n function MyomReviews(root) {\n this.root = root;\n this.storeId = (root.getAttribute('data-store-id') || '').trim();\n this.apiBase = (root.getAttribute('data-api-base') || API_BASE) + encodeURIComponent(this.storeId);\n this.perPage = Math.max(1, Math.min(48, parseInt(root.getAttribute('data-per-page'), 10) || 8));\n this.desktopColumns = Math.max(1, Math.min(6, parseInt(root.getAttribute('data-columns'), 10) || 4));\n this.minCards = Math.max(1, parseInt(root.getAttribute('data-min-cards'), 10) || 4);\n this.shopName = root.getAttribute('data-shop-name') || 'MYOM Shop';\n\n this.grid = root.querySelector('[data-grid]');\n this.status = root.querySelector('[data-status]');\n this.error = root.querySelector('[data-error]');\n this.showMore = root.querySelector('[data-show-more]');\n this.summary = root.querySelector('[data-summary]');\n this.summarySkeleton = root.querySelector('[data-summary-skeleton]');\n this.lightbox = root.querySelector('[data-lightbox]');\n this.sectionWrap = root.closest('.shopify-section') || root.closest('.section') || root;\n\n this.pool = []; // qualifying reviews, in featured order\n this.seen = {};\n this.cards = []; // rendered , one per pool entry\n this.target = this.perPage; // how many cards the visitor has asked for\n this.nextPage = null; // { page, total } while the API has more pages\n this.lastPageYielded = true;\n this.requests = 0; // review-list requests this page load (exposed for verification)\n this.bottomline = null;\n this.loading = false;\n this.lastFocus = null;\n\n if (!this.storeId || !this.grid) return;\n\n var self = this;\n if (this.showMore) {\n this.showMore.addEventListener('click', function () { self.loadMore(); });\n }\n this.mq900 = window.matchMedia('(max-width: 900px)');\n this.mq560 = window.matchMedia('(max-width: 560px)');\n var onChange = function () { self.applyLayout(); };\n if (this.mq900.addEventListener) {\n this.mq900.addEventListener('change', onChange);\n this.mq560.addEventListener('change', onChange);\n } else {\n this.mq900.addListener(onChange);\n this.mq560.addListener(onChange);\n }\n this.setupLightbox();\n\n this.loadSummary();\n this.loadInitial();\n }\n\n MyomReviews.prototype.columns = function () {\n if (this.mq560.matches) return 1;\n if (this.mq900.matches) return 2;\n return this.desktopColumns;\n };\n\n MyomReviews.prototype.fetchJson = function (url) {\n return fetch(url, { headers: { Accept: 'application/json' } }).then(function (response) {\n if (!response.ok) throw new Error('Loox API responded ' + response.status);\n return response.json();\n });\n };\n\n MyomReviews.prototype.pageUrl = function (page, total) {\n var url = this.apiBase + '/product-reviews?rating=5&sort=featured&direction=desc&limit=' + PAGE_LIMIT + '&page=' + page;\n if (typeof total === 'number' && isFinite(total)) url += '&total=' + total;\n return url;\n };\n\n MyomReviews.prototype.loadSummary = function () {\n if (!this.summary) return;\n var self = this;\n var cached = readCache(this.storeId);\n if (cached && cached.bottomline) {\n this.renderSummary(cached.bottomline);\n return;\n }\n this.fetchJson(this.apiBase + '/product-reviews/bottomline').then(function (data) {\n self.renderSummary(data);\n self.persist();\n }).catch(function () {\n if (self.summarySkeleton) self.summarySkeleton.hidden = true;\n });\n };\n\n MyomReviews.prototype.renderSummary = function (bottomline) {\n var total = Number(bottomline && bottomline.totalReviews);\n var average = Number(bottomline && bottomline.averageRating);\n if (this.summarySkeleton) this.summarySkeleton.hidden = true;\n if (!isFinite(total) || !isFinite(average) || total <= 0) return;\n this.bottomline = { totalReviews: total, averageRating: average };\n var ratingText = average.toFixed(1);\n var starsEl = this.summary.querySelector('[data-summary-stars]');\n if (starsEl) {\n starsEl.textContent = '';\n starsEl.appendChild(stars(average, 'Rated ' + ratingText + ' out of 5'));\n }\n var ratingEl = this.summary.querySelector('[data-summary-rating]');\n if (ratingEl) ratingEl.textContent = ratingText + '/5';\n var countEl = this.summary.querySelector('[data-summary-count]');\n if (countEl) countEl.textContent = formatCount(total) + ' reviews';\n this.summary.hidden = false;\n };\n\n MyomReviews.prototype.persist = function () {\n writeCache(this.storeId, {\n t: Date.now(),\n pool: this.pool,\n nextPage: this.nextPage,\n lastPageYielded: this.lastPageYielded,\n bottomline: this.bottomline\n });\n };\n\n MyomReviews.prototype.setBusy = function (busy) {\n this.grid.setAttribute('aria-busy', busy ? 'true' : 'false');\n };\n\n MyomReviews.prototype.announce = function (text) {\n if (this.status) this.status.textContent = text;\n };\n\n MyomReviews.prototype.hideSkeletons = function () {\n Array.prototype.forEach.call(this.grid.querySelectorAll('[data-skeleton]'), function (node) {\n node.hidden = true;\n });\n };\n\n MyomReviews.prototype.hideSection = function () {\n this.hideSkeletons();\n this.setBusy(false);\n this.sectionWrap.hidden = true;\n this.sectionWrap.style.display = 'none';\n this.announce('');\n };\n\n /* Absorb one API page into the pool. Returns how many new qualifying reviews it added. */\n MyomReviews.prototype.absorb = function (data) {\n var list = data && Array.isArray(data.reviews) ? data.reviews : [];\n var pagination = data && data.pagination && typeof data.pagination === 'object' ? data.pagination : {};\n var added = 0;\n for (var i = 0; i < list.length; i++) {\n var review = list[i];\n if (!qualifies(review) || this.seen[review.id]) continue;\n this.seen[review.id] = true;\n this.pool.push(review);\n added++;\n }\n if (added) this.pool = sortNewestFirst(this.pool);\n var page = parseInt(pagination.page, 10);\n var total = parseInt(pagination.total, 10);\n this.nextPage = pagination.hasMore && isFinite(page) && page >= 1\n ? { page: page + 1, total: isFinite(total) ? total : null }\n : null;\n this.lastPageYielded = added > 0;\n return added;\n };\n\n /* Worth asking the API for another page? Featured sort front-loads media, so a page with no\n qualifying reviews means the remaining pages have none either. */\n MyomReviews.prototype.canFetchMore = function () {\n return !!this.nextPage && this.lastPageYielded && this.requests < MAX_REQUESTS;\n };\n\n /* Fetch pages until the pool covers `needed` cards or there is nothing more worth fetching. */\n MyomReviews.prototype.fill = function (needed) {\n var self = this;\n if (this.pool.length >= needed || !this.canFetchMore()) return Promise.resolve();\n this.requests++;\n return this.fetchJson(this.pageUrl(this.nextPage.page, this.nextPage.total)).then(function (data) {\n self.absorb(data);\n self.persist();\n return self.fill(needed);\n });\n };\n\n MyomReviews.prototype.loadInitial = function () {\n var self = this;\n this.setBusy(true);\n this.announce('Loading reviews');\n\n var cached = readCache(this.storeId);\n if (cached) {\n cached.pool.forEach(function (review) {\n if (qualifies(review) && !self.seen[review.id]) {\n self.seen[review.id] = true;\n self.pool.push(review);\n }\n });\n this.pool = sortNewestFirst(this.pool);\n this.nextPage = cached.nextPage || null;\n this.lastPageYielded = cached.lastPageYielded !== false;\n this.fromCache = true;\n } else {\n this.nextPage = { page: 1, total: null };\n this.lastPageYielded = true;\n }\n\n this.fill(this.target).then(function () {\n self.finishLoad();\n }).catch(function () {\n if (self.pool.length >= self.minCards) {\n self.finishLoad();\n return;\n }\n self.hideSkeletons();\n self.setBusy(false);\n if (self.error) self.error.hidden = false;\n self.announce('Reviews could not be loaded');\n });\n };\n\n MyomReviews.prototype.finishLoad = function () {\n if (this.pool.length < this.minCards) {\n this.hideSection();\n return;\n }\n this.renderCards();\n this.applyLayout();\n this.hideSkeletons();\n this.setBusy(false);\n };\n\n MyomReviews.prototype.loadMore = function () {\n if (this.loading || !this.showMore) return;\n var self = this;\n var previousVisible = this.visibleCount();\n this.target += this.perPage;\n this.loading = true;\n\n var label = this.showMore.querySelector('[data-show-more-label]');\n var originalLabel = label ? label.textContent : '';\n this.showMore.disabled = true;\n if (label) label.textContent = 'Loading\u2026';\n this.setBusy(true);\n\n this.fill(this.target).catch(function () {\n self.announce('More reviews could not be loaded. Please try again.');\n }).then(function () {\n self.loading = false;\n self.renderCards();\n self.applyLayout();\n self.setBusy(false);\n self.showMore.disabled = false;\n if (label) label.textContent = originalLabel;\n var card = self.cards[previousVisible];\n if (card && !card.hidden) {\n var focusTarget = card.querySelector('button, a');\n if (focusTarget) focusTarget.focus({ preventScroll: true });\n }\n });\n };\n\n /* Bring the grid's cards into line with the pool: one card per review, in pool (newest-first) order.\n Existing cards are reused by review ID; new ones are created hidden until applyLayout decides. */\n MyomReviews.prototype.renderCards = function () {\n var byId = {};\n this.cards.forEach(function (card) { byId[card.getAttribute('data-review-id')] = card; });\n var cards = [];\n for (var i = 0; i < this.pool.length; i++) {\n var review = this.pool[i];\n var card = byId[review.id];\n if (!card) {\n card = this.renderCard(review);\n card.hidden = true;\n }\n cards.push(card);\n this.grid.appendChild(card); // appendChild moves an existing node, so this also reorders\n }\n this.cards.forEach(function (card) {\n if (cards.indexOf(card) === -1 && card.parentNode) card.parentNode.removeChild(card);\n });\n this.cards = cards;\n };\n\n /* Cards to show: min(target, pool) rounded down to whole rows at the current column count. */\n MyomReviews.prototype.visibleCount = function () {\n var cols = this.columns();\n var available = Math.min(this.target, this.cards.length);\n return Math.floor(available / cols) * cols;\n };\n\n MyomReviews.prototype.applyLayout = function () {\n if (this.sectionWrap.hidden) return;\n var visible = this.visibleCount();\n if (visible === 0 && this.cards.length) {\n this.hideSection();\n return;\n }\n for (var i = 0; i < this.cards.length; i++) this.cards[i].hidden = i >= visible;\n\n var moreAvailable = this.cards.length > visible || this.canFetchMore();\n if (this.showMore) this.showMore.hidden = !moreAvailable;\n if (visible) this.announce('Showing ' + visible + ' reviews');\n };\n\n /* A review photo that fails to load would leave a blank square: drop that card and re-flow. */\n MyomReviews.prototype.dropCard = function (card) {\n var index = this.cards.indexOf(card);\n if (index === -1) return;\n this.cards.splice(index, 1);\n this.pool.splice(index, 1);\n if (card.parentNode) card.parentNode.removeChild(card);\n this.persist();\n this.applyLayout();\n };\n\n MyomReviews.prototype.renderCard = function (review) {\n var self = this;\n var name = reviewerName(review);\n var card = el('li', 'myom-review-card');\n card.setAttribute('data-review-id', review.id);\n card.setAttribute('data-rating', String(clampRating(review.rating)));\n\n var media = el('div', 'myom-review-card__media');\n var first = mediaOf(review)[0];\n var img = el('img');\n img.src = first.type === 'video' ? safeUrl(first.thumbnailUrl) : safeUrl(first.url);\n img.alt = (first.type === 'video' ? 'Video from ' : 'Photo from ') + name + \"'s review\";\n img.loading = 'lazy';\n img.decoding = 'async';\n img.width = 600;\n img.height = 600;\n img.addEventListener('error', function () { self.dropCard(card); });\n media.appendChild(img);\n if (first.type === 'video') media.classList.add('myom-review-card__media--video');\n card.appendChild(media);\n\n var body = el('div', 'myom-review-card__body');\n\n var meta = el('div', 'myom-review-card__meta');\n meta.appendChild(el('span', 'myom-review-card__name', name));\n if (review.verified) meta.appendChild(verifiedBadge());\n var dateText = formatDate(review.date || review.createdAt);\n if (dateText) {\n var time = el('time', 'myom-review-card__date', dateText);\n var iso = review.date || review.createdAt;\n if (typeof iso === 'string') time.setAttribute('datetime', iso);\n meta.appendChild(time);\n }\n body.appendChild(meta);\n\n body.appendChild(stars(review.rating, name + ' rated it ' + clampRating(review.rating) + ' out of 5 stars'));\n\n var text = typeof review.body === 'string' ? review.body.trim() : '';\n body.appendChild(el('p', 'myom-review-card__text', text));\n\n var more = el('button', 'myom-review-card__more', 'Read full review');\n more.type = 'button';\n more.setAttribute('aria-label', 'Read full review by ' + name);\n more.addEventListener('click', function () { self.openLightbox(review, more); });\n body.appendChild(more);\n\n var product = productRow(review.product);\n if (product) body.appendChild(product);\n\n card.appendChild(body);\n return card;\n };\n\n /* Lightbox: native