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

Your cart (0)

Your cart is currently empty.

Recently viewed products

'unearth the uncommon'

Product Comparison

Your cart