window.mpg = window.mpg || {}; const mpg = window.mpg; /** * 0. Kiểm tra theme hiện tại (Live hay Draft "Combined Listings") */ const isDraftTheme = Boolean( window.Shopify?.theme?.id === 202644095323 || window.Shopify?.theme?.name === 'Combined Listings' || (window.Shopify?.theme?.role && window.Shopify.theme.role !== 'main') || window.location.search.includes('preview_theme_id=202644095323') ); /** * 1. Inject CSS cho Theme Draft (Chỉ chạy trên theme Draft) */ const injectDraftStyles = () => { if (!isDraftTheme || document.getElementById('mpg-draft-card-styles')) return; const style = document.createElement('style'); style.id = 'mpg-draft-card-styles'; style.textContent = ` .grid-product .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card { position: absolute !important; bottom: 8px !important; left: 10px !important; right: 10px !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; z-index: 4 !important; pointer-events: none !important; opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; } .grid-product:hover .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card, .product-card:hover .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card { opacity: 1 !important; transform: translateY(0) !important; } .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card .mpg-swatch__label { display: none !important; } .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card .mpg-swatch__nav { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important; margin: 0 !important; } .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card .mpg-swatch__option { pointer-events: none !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: auto !important; height: auto !important; line-height: 1 !important; font-size: 11px !important; font-weight: 500 !important; color: #111 !important; text-transform: uppercase !important; } .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card .mpg-swatch__option.disabled, .grid-product__image-mask .mpg-swatch.mpg-variant.mpg-card .mpg-swatch__option.blocked { opacity: 0.35 !important; text-decoration: line-through !important; } `; document.head.appendChild(style); }; injectDraftStyles(); /** * 2. Hàm Dọn Dẹp Option thừa (Ẩn option Color chỉ có 1 nút trên UI, nhưng vẫn giữ trong DOM) */ const cleanRedundantCardOptions = () => { const cardSelector = mpg.themeSetting?.product_card?.card_id || '.grid-product, .product-card'; const cards = document.querySelectorAll(cardSelector); cards.forEach((card) => { const variantSwatch = card.querySelector('.mpg-swatch.mpg-variant.mpg-card'); if (variantSwatch) { const vOptionSets = variantSwatch.querySelectorAll('.mpg-swatch__option-set'); vOptionSets.forEach((vSet) => { const vOptions = vSet.querySelectorAll('.mpg-swatch__option'); if (vOptions.length < 2) vSet.style.display = 'none'; }); const visibleSets = Array.from(vOptionSets).filter((s) => s.style.display !== 'none'); if (visibleSets.length === 0) variantSwatch.style.display = 'none'; } }); }; /** * 3. Logic điều phối vị trí Option */ const handleCardOptionsLayout = () => { const cardSelector = mpg.themeSetting?.product_card?.card_id || '.grid-product, .product-card'; const cards = document.querySelectorAll(cardSelector); cards.forEach((card) => { const variantEl = card.querySelector('.mpg-swatch.mpg-variant.mpg-card'); if (!variantEl) return; if (isDraftTheme) { // THEME DRAFT: Bê vào beforeend của image-mask const imageMask = card.querySelector('.grid-product__image-mask'); if (imageMask && variantEl.parentElement !== imageMask) { imageMask.insertAdjacentElement('beforeend', variantEl); } } else { // THEME LIVE: Swap Size lên trước Color dưới meta const groupEl = card.querySelector('.mpg-swatch.mpg-card:not(.mpg-variant)'); if (groupEl && (groupEl.compareDocumentPosition(variantEl) & Node.DOCUMENT_POSITION_FOLLOWING)) { groupEl.parentNode.insertBefore(variantEl, groupEl); } } }); cleanRedundantCardOptions(); }; /** * 4. Ghi đè Callback */ const originalVariantCb = mpg.renderVariantCardContentCallback; mpg.renderVariantCardContentCallback = function () { if (typeof originalVariantCb === 'function') originalVariantCb(); handleCardOptionsLayout(); }; const originalSwatchCb = mpg.renderSwatchCardContentCallback; mpg.renderSwatchCardContentCallback = function () { if (typeof originalSwatchCb === 'function') originalSwatchCb(); handleCardOptionsLayout(); }; /** * 5. Bắt mẫu savings từ DOM ban đầu */ const captureSavingsTemplate = () => { if (!window.mpgSavingsTemplate) { const existingEl = document.querySelector('.grid-product__price--savings'); if (existingEl && existingEl.innerText.trim()) { window.mpgSavingsTemplate = existingEl.innerText.trim(); } } }; if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', captureSavingsTemplate); } else { captureSavingsTemplate(); } /** * 6. Patch themeSetting SAU KHI app khởi tạo xong */ const patchAfterInit = () => { if (!mpg.themeSetting?.product_card) { setTimeout(patchAfterInit, 100); return; } // Đảm bảo cờ showSwatchOnProductCard luôn bật if (!mpg.themeSetting.product_card.price_wrapper_id) { mpg.themeSetting.product_card.price_wrapper_id = '.grid-product__price'; } // Set updatePriceTemplateCustom mpg.updatePriceTemplateCustom = (oldPriceEl, regularPrice, salePrice = null, customRate) => { if (!oldPriceEl || regularPrice === undefined) return; const regNum = Number(regularPrice); const saleNum = salePrice ? Number(salePrice) : null; const haveSalePrice = saleNum && saleNum < regNum; const currencyRate = customRate || mpg.currencyRate || 1; const format = (oldPriceEl.innerText || '').includes(mpg.currency) ? mpg.moneyWithCurrencyFormat : mpg.moneyFormat; const regFormatted = mpg.stripHTML(mpg.formatMoney(regNum * currencyRate * 100, format)); const saleFormatted = saleNum ? mpg.stripHTML(mpg.formatMoney(saleNum * currencyRate * 100, format)) : ''; if (haveSalePrice) { let regPriceEl = oldPriceEl.querySelector('.grid-product__price--original .money'); let salePriceEl = oldPriceEl.querySelector('.money:not(.grid-product__price--original .money)'); if (!regPriceEl || !salePriceEl) { oldPriceEl.innerHTML = ` ${regFormatted} ${saleFormatted} `.trim(); } else { regPriceEl.innerText = regFormatted; salePriceEl.innerText = saleFormatted; } } else { oldPriceEl.innerHTML = `${regFormatted}`; } let savingsEl = oldPriceEl.querySelector('.grid-product__price--savings'); if (haveSalePrice) { captureSavingsTemplate(); const savedPercent = Math.round(((regNum - saleNum) / regNum) * 100); const savedAmountVal = (regNum - saleNum) * currencyRate; const savedAmountFormatted = mpg.stripHTML(mpg.formatMoney(savedAmountVal * 100, format)); let sourceText = (savingsEl && savingsEl.innerText.trim()) || window.mpgSavingsTemplate || 'Save 0%'; const newContent = sourceText.includes('%') ? sourceText.replace(/\d+\s*%?/, `${savedPercent}%`) : sourceText.replace(/[^\d]*[\d.,]+[^\d]*/, savedAmountFormatted); if (!savingsEl) { savingsEl = document.createElement('span'); savingsEl.className = 'grid-product__price--savings'; oldPriceEl.appendChild(savingsEl); } savingsEl.textContent = ` ${newContent} `; savingsEl.style.display = ''; } else { if (savingsEl) savingsEl.style.display = 'none'; } }; injectDraftStyles(); handleCardOptionsLayout(); }; patchAfterInit();

Γλώσσα