window.mpg = window.mpg || {}; mpg._cache = mpg._cache || { products: {}, prices: {}, pendingProducts: {}, pendingPrices: {} }; // --- 0. CALLBACK HOOK CHÍNH THỨC CỦA MPG (CHẠY ĐỒNG BỘ NGAY KHI RENDER CARD -> 0MS FLICKER) --- mpg.setupCollapseHandlersCustom = (optionSetNode, style = 'prod_style', onclick = 'mpg.toggleShowValue(this)') => { if (!optionSetNode) return; const collapsePosition = mpg.merchantConfig?.[style]?.expand_button_position || 'right'; const collapseLayout = mpg.merchantConfig?.[style]?.option_set_layout || 'default'; const collapseLimit = mpg.merchantConfig?.[style]?.value_limit_max || 4; if (collapseLayout === 'collapse') { const navNode = optionSetNode.querySelector('.mpg-swatch__nav:not([class*="mpg-dropdown"])'); if (navNode) { const existedCollapseLimitNode = navNode.querySelector('.mpg-swatch__nav-limit'); if (existedCollapseLimitNode) existedCollapseLimitNode.remove(); const optionNodes = [...navNode.querySelectorAll('.mpg-swatch__option')]; optionNodes.forEach((optionNode) => (optionNode.style.display = '')); const visibleOptionNodes = optionNodes.filter((optionNode) => mpg.isVisibleNode(optionNode)); // CHỈ ÁP DỤNG CHO PRODUCT CARD (.mpg-card) if (optionSetNode.closest('.mpg-card') || style === 'card_style') { const selectedOption = navNode.querySelector('.mpg-swatch__option.selected'); if (selectedOption && !selectedOption.classList.contains('mpg-promoted-option')) { selectedOption.classList.add('mpg-promoted-option'); selectedOption.style.setProperty('order', '-1', 'important'); const selectedIndex = visibleOptionNodes.indexOf(selectedOption); const isHiddenInitially = selectedOption.style.display === 'none' || selectedIndex >= collapseLimit; if (isHiddenInitially) { selectedOption.style.setProperty('display', 'grid', 'important'); const optionToHide = visibleOptionNodes[collapseLimit - 1]; if (optionToHide && optionToHide !== selectedOption) { optionToHide.classList.add('mpg-demoted-option'); optionToHide.style.setProperty('display', 'none', 'important'); } } } } if (visibleOptionNodes.length > collapseLimit) { visibleOptionNodes.forEach((optionNode, i) => { if (optionNode.classList.contains('mpg-promoted-option')) { // Giữ nguyên hiển thị dạng grid } else if (optionNode.classList.contains('mpg-demoted-option')) { optionNode.style.display = 'none'; } else if (i + 1 > collapseLimit) { optionNode.style.display = 'none'; } }); const collapseLimitHTML = ` `; const insertPosition = collapsePosition === 'left' ? 'afterbegin' : 'beforeend'; navNode.insertAdjacentHTML(insertPosition, collapseLimitHTML); } } } }; // 1. Fetch Storefront GraphQL API mpg.getProductByHandleCustom = async (handle) => { if (!handle) return null; if (mpg._cache.products[handle] && ('stockStatus' in mpg._cache.products[handle])) { return mpg._cache.products[handle]; } if (mpg._cache.pendingProducts[handle]) return mpg._cache.pendingProducts[handle]; const fetchPromise = (async () => { const storedProduct = window.sessionStorage.getItem(`mpg_stored_product[${handle}]`); if (storedProduct) { try { const parsed = JSON.parse(storedProduct); if (parsed && typeof parsed === 'object' && ('stockStatus' in parsed)) { mpg._cache.products[handle] = parsed; return parsed; } } catch (e) {} } const query = ` query getProductByHandle @inContext(language: ${window.Shopify?.locale?.toUpperCase()?.split('-')?.[0] || 'EN'}, country: ${window.Shopify?.country?.toUpperCase() || 'US'}) { productByHandle(handle: "${handle}") { id title handle tags metafield(namespace: "soulandwolf", key: "Clearance") { value } stockStatus: metafield(namespace: "soulandwolf", key: "stock_status_id") { value } options(first: 3) { name values } variants(first: 250) { nodes { id title availableForSale compareAtPrice { amount } price { amount } metafield(namespace: "soulandwolf", key: "price_vip") { value } retailPrice: metafield(namespace: "soulandwolf", key: "price_retail") { value } tradePrice: metafield(namespace: "soulandwolf", key: "price_trade") { value } wsPrice: metafield(namespace: "soulandwolf", key: "price_wholesale") { value } } } selectedOrFirstAvailableVariant { id availableForSale compareAtPrice { amount } price { amount } metafield(namespace: "soulandwolf", key: "price_vip") { value } retailPrice: metafield(namespace: "soulandwolf", key: "price_retail") { value } tradePrice: metafield(namespace: "soulandwolf", key: "price_trade") { value } wsPrice: metafield(namespace: "soulandwolf", key: "price_wholesale") { value } } } } `; try { const response = await fetch(`https://${window.Shopify.shop}/api/2025-10/graphql.json`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': mpg.merchantConfig.storefront_access_token, }, body: JSON.stringify({ query }), }); if (!response.ok) return null; const data = await response.json(); const product = data.data?.productByHandle; if (!product) return null; product.options.forEach((option) => { option.values = [...new Set(option.values)]; }); if ( product.options.length === 1 && ['Title', 'Titre', 'Titel', 'Titula'].includes(product.options[0].name) && product.options[0].values.length === 1 ) product.options = []; mpg._cache.products[handle] = product; window.sessionStorage.setItem(`mpg_stored_product[${handle}]`, JSON.stringify(product)); return product; } catch (e) { return null; } finally { delete mpg._cache.pendingProducts[handle]; } })(); mpg._cache.pendingProducts[handle] = fetchPromise; return fetchPromise; }; // 2. Fetch AJAX Request /products/${handle}.js mpg.getProductPriceByHandle = async (handle) => { if (!handle) return null; if (mpg._cache.prices[handle]) return mpg._cache.prices[handle]; if (mpg._cache.pendingPrices[handle]) return mpg._cache.pendingPrices[handle]; const fetchPromise = (async () => { const stored = window.sessionStorage.getItem(`mpg_ajax_product[${handle}]`); if (stored) { try { const parsed = JSON.parse(stored); mpg._cache.prices[handle] = parsed; return parsed; } catch (e) {} } try { const res = await fetch(`/products/${handle}.js`); if (!res.ok) return null; const data = await res.json(); mpg._cache.prices[handle] = data; window.sessionStorage.setItem(`mpg_ajax_product[${handle}]`, JSON.stringify(data)); return data; } catch (e) { return null; } finally { delete mpg._cache.pendingPrices[handle]; } })(); mpg._cache.pendingPrices[handle] = fetchPromise; return fetchPromise; }; mpg.resolveVariant = (product, prodCardEl) => { const cardVariantId = prodCardEl.closest('[data-variant-id]')?.dataset?.variantId; if (cardVariantId && product.variants?.nodes?.length) { const matched = product.variants.nodes.find(v => v.id.includes(cardVariantId)); if (matched) return matched; } return product.variants?.nodes?.[0] || product.selectedOrFirstAvailableVariant; }; mpg.updatePriceCustom = async (prodCardEl, alternateProd) => { if (!prodCardEl || !alternateProd?.handle) return; const product = await (mpg.getProductByHandleCustom ? mpg.getProductByHandleCustom(alternateProd.handle) : mpg.getProductByHandle(alternateProd.handle)); if (!product) return; const variant = mpg.resolveVariant(product, prodCardEl); const basePrice = Number(variant?.price?.amount || 0); const compareAtPrice = Number(variant?.compareAtPrice?.amount || 0); let retailPrice = 0; try { const metaVal = variant?.retailPrice?.value; if (metaVal) { const parsed = typeof metaVal === 'string' && metaVal.startsWith('{') ? JSON.parse(metaVal) : metaVal; retailPrice = Number(typeof parsed === 'object' ? parsed.amount : parsed) || 0; } } catch (e) { retailPrice = 0; } if (!retailPrice || retailPrice <= 0) retailPrice = compareAtPrice > 0 ? compareAtPrice : basePrice; let vipPrice = 0; try { const metaValue = variant?.metafield?.value; if (metaValue) { const parsed = typeof metaValue === 'string' && metaValue.startsWith('{') ? JSON.parse(metaValue) : metaValue; vipPrice = Number(typeof parsed === 'object' ? parsed.amount : parsed) || 0; } } catch (e) { vipPrice = 0; } let tradePrice = 0; try { const metaVal = variant?.tradePrice?.value; if (metaVal) { const parsed = typeof metaVal === 'string' && metaVal.startsWith('{') ? JSON.parse(metaVal) : metaVal; tradePrice = Number(typeof parsed === 'object' ? parsed.amount : parsed) || 0; } } catch (e) { tradePrice = 0; } if (alternateProd.handle === 'argon-cast-iron-chiminea-black-kai50014bk') { try { const ajaxData = await mpg.getProductPriceByHandle(alternateProd.handle); const cardVariantId = prodCardEl.closest('[data-variant-id]')?.dataset?.variantId; const ajaxVariant = ajaxData?.variants?.find(v => String(v.id) === String(cardVariantId)) || ajaxData?.variants?.[0]; if (ajaxVariant?.price) tradePrice = ajaxVariant.price / 100; } catch (e) {} } let wsPrice = 0; try { const metaVal = variant?.wsPrice?.value; if (metaVal) { const parsed = typeof metaVal === 'string' && metaVal.startsWith('{') ? JSON.parse(metaVal) : metaVal; wsPrice = Number(typeof parsed === 'object' ? parsed.amount : parsed) || 0; } } catch (e) { wsPrice = 0; } const customerTags = window.mpg?.settings?.customer_tags || []; const isCustomerVip = customerTags.includes('VIP'); // Bổ sung thêm window.customer?.group do store này dùng biến đó const customerGroup = window.algoliaShopify?.customerGroup || window.customer?.group || ''; const isCustomerTrade = customerGroup.includes('trade') && !customerGroup.includes('wholesale'); const isCustomerWholesale = customerGroup.includes('wholesale'); const isCustomerB2B = isCustomerTrade || isCustomerWholesale; let displayPrice = basePrice; if (isCustomerWholesale && wsPrice > 0 && wsPrice < basePrice) displayPrice = wsPrice; else if (isCustomerTrade && tradePrice > 0) displayPrice = tradePrice; else if (isCustomerVip && vipPrice > 0 && vipPrice < basePrice) displayPrice = vipPrice; const hasVipDiscount = (!isCustomerB2B && vipPrice > 0 && vipPrice < (retailPrice || basePrice)); const isSale = !isCustomerB2B && (compareAtPrice > displayPrice); const isSoldOut = !variant.availableForSale; const isSliderCard = !!prodCardEl.closest('.swiper-slide'); const format = (val) => mpg.formatMoney(val * 100 * (mpg.currencyRate || 1), mpg.moneyFormat); // --- 1. CẬP NHẬT THEME CARD GỐC (.f-price) --- const priceWrapper = prodCardEl.querySelector('.f-price'); if (priceWrapper) { priceWrapper.classList.remove('f-price--on-sale', 'f-price--vip', 'f-price--sold-out'); if (isSoldOut) priceWrapper.classList.add('f-price--sold-out'); else if (hasVipDiscount) priceWrapper.classList.add('f-price--vip'); else if (isSale) priceWrapper.classList.add('f-price--on-sale'); } prodCardEl.querySelectorAll('.f-price__regular .f-price-item--regular').forEach(el => { el.innerText = format(displayPrice); }); const salePriceEl = prodCardEl.querySelector('.f-price__sale .f-price-item--sale'); const saleRrpEl = prodCardEl.querySelector('.f-price__sale .f-price-item__price'); if (salePriceEl) salePriceEl.innerText = format(displayPrice); if (saleRrpEl) saleRrpEl.innerText = (!isCustomerB2B && isSale) ? format(compareAtPrice) : ''; const retailWrapper = prodCardEl.querySelector('.f-price__retail'); const retailPriceEl = prodCardEl.querySelector('.f-price__retail .f-price-item__price'); if (retailWrapper) { if (retailPrice > displayPrice) { if (retailPriceEl) retailPriceEl.innerText = format(retailPrice); retailWrapper.style.display = ''; } else { retailWrapper.style.display = 'none'; } } // --- 2. CẬP NHẬT RIÊNG CHO TMSP SLIDER CARD (.tradePriceWrap) --- const tmspPriceContainer = prodCardEl.querySelector('.shopify_pdp_first_ytfydz__product-price-container, .tradePriceWrap'); if (tmspPriceContainer) { // Cập nhật giá chính (Trade/Display price) const tmspRegularPrice = tmspPriceContainer.querySelector('.f-price--trade .f-price-item--regular') || tmspPriceContainer.querySelector('.f-price-item--regular:not(:has(s))'); if (tmspRegularPrice) { tmspRegularPrice.innerText = ` ${format(displayPrice)}`; } // Cập nhật giá RRP (gạch ngang ) const tmspRrpEl = tmspPriceContainer.querySelector('s.f-price-item__price, s'); if (tmspRrpEl) { const targetRrp = retailPrice > displayPrice ? retailPrice : (compareAtPrice > displayPrice ? compareAtPrice : 0); if (targetRrp > 0) { tmspRrpEl.innerText = ` ${format(targetRrp)}`; if (tmspRrpEl.parentElement) tmspRrpEl.parentElement.style.display = ''; } else if (tmspRrpEl.parentElement) { tmspRrpEl.parentElement.style.display = 'none'; } } } // Khung VIP Tease const fPriceVipContainer = prodCardEl.querySelector('.f-price__vip'); if (fPriceVipContainer) { if (isSliderCard) { const regularEl = fPriceVipContainer.querySelector('.f-price-item--regular'); const vipPriceEl = fPriceVipContainer.querySelector('.f-price-item--vip .f-price-item__price'); if (regularEl) regularEl.innerText = format(retailPrice); if (vipPriceEl) vipPriceEl.innerText = format(displayPrice); } else { const vipItemRegular = fPriceVipContainer.querySelector('.f-price-item--regular'); const vipItemVip = fPriceVipContainer.querySelector('.f-price-item--vip'); const vipDiscountEl = fPriceVipContainer.querySelector('.f-price-item__discount'); const targetRegularPrice = vipItemRegular?.querySelector('.f-price-item__price'); const targetVipPrice = vipItemVip?.querySelector('.f-price-item__price'); if (hasVipDiscount) { if (isCustomerVip) { if (targetVipPrice) targetVipPrice.innerText = format(vipPrice); else if (vipItemVip) vipItemVip.innerText = format(vipPrice); if (targetRegularPrice) targetRegularPrice.innerText = format(retailPrice); else if (vipItemRegular) vipItemRegular.innerText = format(retailPrice); if (vipDiscountEl) vipDiscountEl.innerText = `Save ${format(retailPrice - vipPrice)}`; } else { if (vipItemRegular) { if (targetRegularPrice) targetRegularPrice.innerText = format(displayPrice); else vipItemRegular.innerText = format(displayPrice); } if (vipItemVip) { if (targetVipPrice) targetVipPrice.innerText = format(vipPrice); else vipItemVip.innerText = format(vipPrice); } if (vipDiscountEl) vipDiscountEl.innerText = `Save ${format(displayPrice - vipPrice)}`; } fPriceVipContainer.style.display = ''; } else { fPriceVipContainer.style.display = 'none'; } } } // --- 3. CẬP NHẬT ALGOLIA CARD CONTAINER (Giữ nguyên) --- const isAlgoliaMain = prodCardEl.querySelector('.ais-hit--price'); const isAlgoliaAuto = prodCardEl.querySelector('.aa-item--price'); const algoliaContainer = isAlgoliaMain || isAlgoliaAuto; if (algoliaContainer) { const prefix = isAlgoliaMain ? 'ais' : 'aa'; const priceClass = isAlgoliaMain ? 'ais-hit--price-striked' : 'aa-item--price-striked'; const trWrapper = algoliaContainer.querySelector(`.${prefix}-tr-price`); const wsWrapper = algoliaContainer.querySelector(`.${prefix}-ws-price`); if (trWrapper) { const trPriceEl = trWrapper.querySelector(`.${prefix}-tr-price__price`); const rrpCustomWrapper = algoliaContainer.querySelector(`.${prefix}-retail-price-custom`); const rrpStrikedEl = algoliaContainer.querySelector(`.${prefix}-retail-price-custom__price--striked`); if (trPriceEl) trPriceEl.innerText = format(displayPrice); if (rrpCustomWrapper) { if (retailPrice > displayPrice) { if (rrpStrikedEl) rrpStrikedEl.innerText = format(retailPrice); rrpCustomWrapper.style.display = ''; } else { rrpCustomWrapper.style.display = 'none'; } } } else if (wsWrapper) { const wsPriceEl = wsWrapper.querySelector(`.${prefix}-ws-price__price`); const rrpCustomWrapper = algoliaContainer.querySelector(`.${prefix}-retail-price-custom`); const rrpNormalEl = algoliaContainer.querySelector(`.${prefix}-retail-price-custom__price`); if (wsPriceEl) wsPriceEl.innerText = format(displayPrice); if (rrpCustomWrapper) { if (retailPrice > displayPrice) { if (rrpNormalEl) rrpNormalEl.innerText = format(retailPrice); rrpCustomWrapper.style.display = ''; } else { rrpCustomWrapper.style.display = 'none'; } } } else { let activePriceEl = algoliaContainer.querySelector(`.${prefix}-retail-price-custom`); let vipWrapper = algoliaContainer.querySelector(`.${prefix}-vip-price`); let strikedWrapper = algoliaContainer.querySelector(`.${priceClass}`); if (activePriceEl) activePriceEl.innerText = format(displayPrice); if (hasVipDiscount) { if (!vipWrapper) { const insertHTML = ``; if (strikedWrapper) strikedWrapper.insertAdjacentHTML('beforebegin', insertHTML); else algoliaContainer.insertAdjacentHTML('beforeend', insertHTML); vipWrapper = algoliaContainer.querySelector(`.${prefix}-vip-price`); } const lbl = vipWrapper.querySelector(`.${prefix}-vip-price__label`); const prc = vipWrapper.querySelector(`.${prefix}-vip-price__price`); if (lbl) lbl.innerText = 'VIP'; if (prc) prc.innerText = format(vipPrice); vipWrapper.style.display = ''; } else if (vipWrapper) { vipWrapper.remove(); } if (isSale) { if (!strikedWrapper) { algoliaContainer.insertAdjacentHTML('beforeend', ``); strikedWrapper = algoliaContainer.querySelector(`.${priceClass}`); } const strikedInner = strikedWrapper.querySelector('span'); if (strikedInner) strikedInner.innerText = format(compareAtPrice); else strikedWrapper.innerText = format(compareAtPrice); } else if (strikedWrapper) { strikedWrapper.remove(); } } } }; mpg.handleSwatchOnCardChange = async ({ group, prodCardEl, prod }) => { if (!prodCardEl || !prod?.handle) return; const settings = window.mpg?.settings || {}; const t = settings.translations || {}; const product = await (mpg.getProductByHandleCustom ? mpg.getProductByHandleCustom(prod.handle) : mpg.getProductByHandle(prod.handle)); if (!product) return; const variant = product.selectedOrFirstAvailableVariant; const price = Number(variant?.price?.amount || 0); const compareAtPrice = Number(variant?.compareAtPrice?.amount || 0); let vipPrice = 0; try { const metaValue = variant?.metafield?.value; if (metaValue) vipPrice = Number(JSON.parse(metaValue)?.amount || 0); } catch (e) {} const isClearance = product.metafield?.value === "true"; const isInStoreOnly = product.in_store_only?.value === "true"; const isSoldOut = !variant.availableForSale; const isVip = (settings.customer_tags || []).includes('VIP') && vipPrice > 0 && vipPrice < price; const isOnSale = compareAtPrice > price; const isPreOrder = Number(product.stockStatus?.value ?? -1) === 3; const isBestSeller = (product.tags || []).some(tag => tag.toLowerCase() === 'best seller'); const formEl = prodCardEl.querySelector('.product-card__actions'); if (formEl) { const inputVariantEl = formEl.querySelector('input[name="id"]'); const inputProductEl = formEl.querySelector('input[name="product-id"]'); if (inputVariantEl) inputVariantEl.value = variant.id?.split('/')?.pop(); if (inputProductEl) inputProductEl.value = product.id?.split('/')?.pop(); } let badgeContainer = prodCardEl.querySelector('.product-card__badge'); if (!badgeContainer) { const imageWrapper = prodCardEl.querySelector('.product-card__image-wrapper, .shopify_pdp_first_ytfydz__product-image'); if (imageWrapper) { imageWrapper.insertAdjacentHTML('beforeend', '
'); badgeContainer = prodCardEl.querySelector('.product-card__badge'); } } if (badgeContainer) { badgeContainer.innerHTML = ''; const appendBadgeOnce = (htmlStr, badgeText) => { const existingTexts = Array.from(badgeContainer.querySelectorAll('.f-badge')).map(el => el.innerText.trim().toLowerCase()); if (!existingTexts.includes(badgeText.trim().toLowerCase())) { badgeContainer.insertAdjacentHTML('beforeend', htmlStr); } }; if (isInStoreOnly) appendBadgeOnce(`${t.in_store_only || 'In-store only'}`, t.in_store_only || 'In-store only'); if (isBestSeller) appendBadgeOnce(``, 'Best Seller'); if (isPreOrder) { appendBadgeOnce(``, 'Preorder'); } else if (isSoldOut && settings.pcard_show_badge_soldout) { appendBadgeOnce(`${t.sold_out || 'Sold out'}`, t.sold_out || 'Sold out'); } else if (isVip && settings.pcard_show_badge_vip) { appendBadgeOnce(`${t.vip_discount || 'VIP'}`, t.vip_discount || 'VIP'); } else if (isClearance && settings.pcard_show_badge_clearance) { appendBadgeOnce(`${t.clearance || 'Clearance'}`, t.clearance || 'Clearance'); } else if (isOnSale && settings.pcard_show_sale_badge) { let badgeText = t.on_sale || 'Sale'; const type = settings.pcard_sale_badge_type; if (type === 'percentage' || type === 'fixed_amount') { let amountStr = type === 'percentage' ? `${Math.round(((compareAtPrice - price) * 100) / compareAtPrice)}%` : mpg.formatMoney((compareAtPrice - price) * 100 * (mpg.currencyRate || 1), mpg.moneyFormat); badgeText = (t.save_price_html || 'Save {{ amount }}').replace('{{ amount }}', amountStr); } appendBadgeOnce(`${badgeText}`, badgeText); } const toHandle = (str) => typeof str === 'string' ? str.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') : ''; const newHandles = (settings.new_tags || []).map(toHandle); const hotHandles = (settings.hot_tags || []).map(toHandle); const comingHandles = (settings.coming_tags || []).map(toHandle); (product.tags || []).forEach(tag => { const tagHandle = toHandle(tag); if (tagHandle === 'best-seller' || tagHandle === 'preorder' || tagHandle === 'pre-order') return; if (newHandles.includes(tagHandle)) appendBadgeOnce(`${tag}`, tag); else if (hotHandles.includes(tagHandle)) appendBadgeOnce(`${tag}`, tag); else if (comingHandles.includes(tagHandle)) appendBadgeOnce(`${tag}`, tag); }); } await mpg.updatePriceCustom(prodCardEl, prod); // Điều chỉnh lại vị trí nếu có sự thay đổi mpg.adjustSelectedSwatchPosition(prodCardEl); }; // HÀM HỖ TRỢ XỬ LÝ THEO PHẠM VI (QUÉT BỔ SUNG) mpg.adjustSelectedSwatchPosition = (scope = document) => { const maxToShow = window.mpg?.merchantConfig?.card_style?.value_limit_max || window.mpg?.merchant_config?.card_style?.value_limit_max || 3; let navs = []; if (scope.querySelectorAll) { navs = Array.from(scope.querySelectorAll('.mpg-card .mpg-swatch__nav')); } else if (scope.closest && scope.closest('.mpg-card')) { navs = Array.from(scope.querySelectorAll('.mpg-swatch__nav')); } navs.forEach(nav => { if (!nav.closest('.mpg-card')) return; if (nav.dataset.mpgPositionInit === 'true') return; const selectedOption = nav.querySelector('.mpg-swatch__option.selected'); if (!selectedOption) return; const options = Array.from(nav.querySelectorAll('.mpg-swatch__option')); const selectedIndex = options.indexOf(selectedOption); const isHiddenInitially = selectedOption.style.display === 'none' || selectedIndex >= maxToShow; selectedOption.classList.add('mpg-promoted-option'); selectedOption.style.setProperty('order', '-1', 'important'); if (isHiddenInitially) { selectedOption.style.setProperty('display', 'grid', 'important'); const optionToHide = options[maxToShow - 1]; if (optionToHide && optionToHide !== selectedOption) { optionToHide.classList.add('mpg-demoted-option'); optionToHide.style.setProperty('display', 'none', 'important'); } console.log('[SWATCH POSITION LOG] Promote hidden option:', { promotedOption: selectedOption.getAttribute('o-value') || selectedOption.innerText?.trim(), demotedOption: optionToHide?.getAttribute('o-value') || optionToHide?.innerText?.trim(), maxToShow }); } else { console.log('[SWATCH POSITION LOG] Promote visible option:', { promotedOption: selectedOption.getAttribute('o-value') || selectedOption.innerText?.trim(), selectedIndex }); } nav.dataset.mpgPositionInit = 'true'; }); }; // 3. HOOK CHÈN SWATCH VÀO ĐÚNG VỊ TRÍ TRÊN CARD CỦA TMSPSLOT if (!mpg._tmspslotThroneHooked) { mpg._tmspslotThroneHooked = true; const originalSitOnCardThrone = mpg.sitOnCardThrone; mpg.sitOnCardThrone = (swatch, product) => { if (typeof originalSitOnCardThrone === 'function') { originalSitOnCardThrone(swatch, product); } // Tự động gắn swatch vào sau .f-price trên các card của slider tmspslot const sliderCards = document.querySelectorAll( '.tmspslot .swiper-slide, [data-slid] .swiper-slide, .shopify_pdp_first_ytfydz .swiper-slide' ); sliderCards.forEach((card) => { const link = card.querySelector('a[href*="/products/"]'); if (!link || mpg.getHandle(link.href) !== product?.handle) return; if (card.querySelector('.mpg-swatch.mpg-card:not(.mpg-variant)')) return; const fPrice = card.querySelector('[class*="product-price-container"].f-price') || card.querySelector('.f-price'); if (fPrice) { fPrice.insertAdjacentHTML('afterend', swatch); } }); }; } // 4. RENDER HOẶC CĂN CHỈNH SWATCH VÀO AFTEREND CỦA .f-price mpg.renderSwatchesOnSliderCard = async (cardEl, handle) => { if (!cardEl || !handle) return; const fPriceContainer = cardEl.querySelector('[class*="product-price-container"].f-price') || cardEl.querySelector('.f-price'); if (!fPriceContainer) return; // A. Nếu card đã có swatch rồi -> chỉ cần đảm bảo vị trí nằm ngay sau .f-price const existingSwatch = cardEl.querySelector('.mpg-swatch.mpg-card:not(.mpg-variant)'); if (existingSwatch?.querySelector('.mpg-swatch__option')) { if (fPriceContainer.nextElementSibling !== existingSwatch) { fPriceContainer.insertAdjacentElement('afterend', existingSwatch); } mpg.adjustSelectedSwatchPosition(cardEl); return; } // Tránh render trùng lặp nếu đang fetch if (cardEl.dataset.mpgRendering === 'true') return; cardEl.dataset.mpgRendering = 'true'; try { // Đảm bảo cardEl có class khớp với card_id trong theme setting const cardIdClass = mpg.themeSetting?.product_card?.card_id?.replace(/^\./, '') || 'product-card'; cardEl.classList.add('product-card'); // B. Lấy productId từ mpg.groups hoặc fetch dữ liệu const allGroups = typeof mpg.getGroups === 'function' ? mpg.getGroups(true) : (mpg.groups || []); let pInGroup = null; allGroups.find(g => Array.isArray(g.products) && (pInGroup = g.products.find(p => p.handle === handle))); let productId = pInGroup?.id; if (!productId) { const prodData = await (mpg.getProductByHandleCustom ? mpg.getProductByHandleCustom(handle) : mpg.getProductPriceByHandle(handle)); productId = prodData?.id; } if (!productId) return; const prodObj = { id: String(productId), handle: handle }; // C. Gọi hàm render chuẩn của Grouptify await mpg.renderSwatchCard(prodObj); if (typeof mpg.renderVariantCard === 'function') { mpg.renderVariantCard(prodObj); } // Đưa swatch về đúng vị trí sau f-price nếu cần const renderedSwatch = cardEl.querySelector('.mpg-swatch.mpg-card:not(.mpg-variant)'); if (renderedSwatch && fPriceContainer.nextElementSibling !== renderedSwatch) { fPriceContainer.insertAdjacentElement('afterend', renderedSwatch); } mpg.adjustSelectedSwatchPosition(cardEl); } catch (e) { console.error('[MPG TMSPSLOT RENDER ERROR]:', e); } finally { cardEl.dataset.mpgRendering = 'false'; } }; // 5. QUÉT VÀ KHỞI TẠO SWIPER CARDS & TẤT CẢ CARD TRÊN TRANG mpg.initTmspslotCards = async () => { const tmspSlot = document.querySelector('.tmspslot, [data-slid]'); // Nếu có slot tmsp nhưng chưa có data-state="loaded" thì bỏ qua, đợi lần quét tiếp theo if (tmspSlot && tmspSlot.getAttribute('data-state') !== 'loaded') return; // Chỉ lấy các swiper-slide khi slot đã có data-state="loaded" const cards = document.querySelectorAll( '.tmspslot[data-state="loaded"] .swiper-slide, [data-slid][data-state="loaded"] .swiper-slide' ); if (!cards.length) return; mpg.adjustSelectedSwatchPosition(document); cards.forEach(async (cardEl) => { const link = cardEl.querySelector('a[href*="/products/"]'); if (!link) return; const match = link.href.match(/\/products\/([^\/\?#]+)/); const handle = match ? match[1] : null; if (!handle) return; mpg.renderSwatchesOnSliderCard(cardEl, handle); if (cardEl.dataset.mpgProcessed) return; cardEl.dataset.mpgProcessed = 'true'; try { await mpg.handleSwatchOnCardChange({ prodCardEl: cardEl, prod: { handle } }); } catch (e) {} }); }; if (window.mpgTmspslotInterval) clearInterval(window.mpgTmspslotInterval); window.mpgTmspslotInterval = setInterval(() => mpg.initTmspslotCards(), 500); if (window.mpgTmspslotInterval) clearInterval(window.mpgTmspslotInterval); window.mpgTmspslotInterval = setInterval(() => mpg.initTmspslotCards(), 500); // QUÉT VÀ KHỞI TẠO SWIPER CARDS & TẤT CẢ CARD TRÊN TRANG mpg.initTmspslotCards = async () => { mpg.adjustSelectedSwatchPosition(document); const cards = document.querySelectorAll( '.tmspslot .swiper-slide, [data-slid] .swiper-slide, .shopify_pdp_first_ytfydz .swiper-slide' ); cards.forEach(async (cardEl) => { const link = cardEl.querySelector('a[href*="/products/"]'); if (!link) return; const match = link.href.match(/\/products\/([^\/\?#]+)/); const handle = match ? match[1] : null; if (!handle) return; mpg.renderSwatchesOnSliderCard(cardEl, handle); if (cardEl.dataset.mpgProcessed) return; cardEl.dataset.mpgProcessed = 'true'; try { await mpg.handleSwatchOnCardChange({ prodCardEl: cardEl, prod: { handle } }); } catch (e) {} }); }; if (window.mpgTmspslotInterval) clearInterval(window.mpgTmspslotInterval); window.mpgTmspslotInterval = setInterval(() => mpg.initTmspslotCards(), 500);

Dining Room

Bathrooms

Schots

Iver

Leather Collection

Teak Furniture

Our Bestsellers

Handles & Knobs

Pressed Metal

Lighting Favourites

Fireplace Favourites

Outdoor Favourites

Dining Room

Bathrooms

Schots

Iver

Leather Collection

Teak Furniture

Handles & Knobs

Pressed Metal

Collection: Hooks

Picture Rail Hooks

Wall & Robe Hooks

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Choose your option

Recently viewed products

Popular Searches

'unearth the uncommon'

Your cart (0)

Product Comparison

Sort By

Your cart