/* ========================================================================= MPG Custom: 1. Fix click propagation & tabindex trên Card 2. Dependent Dropdown (Fabric -> Color) GIỐNG HỆT STYLE DROPDOWN MÀU 3. Ẩn ô màu ở Fabric, giữ nguyên mũi tên & popup portal gốc 4. Chống giật State Lock + Full Data Logs ========================================================================= */ (function () { // 1. Tự động inject CSS đồng bộ & ẩn ô màu ở Fabric if (!document.getElementById('mpg-custom-card-style')) { const style = document.createElement('style'); style.id = 'mpg-custom-card-style'; style.textContent = ` /* Ẩn ô vuông màu ở Fabric (cả trên summary lẫn danh sách dropdown portal) */ .mpg-custom-fabric-wrap .mpg-dropdown__summary-image, .mpg-custom-fabric-nav .mpg-dropdown__option-image, .mpg-portal .mpg-custom-fabric-nav .mpg-dropdown__option-image { display: none !important; } /* Đảm bảo text tên Fabric căn đều sang trái như bình thường */ .mpg-custom-fabric-wrap .mpg-dropdown__summary-value, .mpg-portal .mpg-custom-fabric-nav .mpg-dropdown__option-value { margin-left: 0 !important; padding-left: 0 !important; } /* Ẩn hoàn toàn subgroup không được chọn để triệt tiêu vĩnh viễn chữ 'undefined' */ .mpg-card .mpg-swatch__option-set[data-subgroup-hidden="true"] { display: none !important; } `; document.head.appendChild(style); } // 2. Chống click xuyên thẻ link Card & thêm tabindex + gắn Log click Color const fixMpgCardClick = () => { document.querySelectorAll('.mpg-swatch.mpg-card:not([tabindex="1"])').forEach((swatchEl) => { swatchEl.setAttribute('tabindex', '1'); swatchEl.addEventListener('click', (e) => e.stopPropagation()); }); document.querySelectorAll('.mpg-dropdown__summary:not([tabindex="1"])').forEach((summaryEl) => { summaryEl.setAttribute('tabindex', '1'); summaryEl.addEventListener('click', (e) => e.stopPropagation()); }); document.querySelectorAll('.mpg-swatch__option:not([tabindex="1"])').forEach((optEl) => { optEl.setAttribute('tabindex', '1'); // Gắn log khi click chọn màu trong Color Dropdown if (!optEl.hasAttribute('data-log-attached')) { optEl.setAttribute('data-log-attached', 'true'); optEl.addEventListener('click', function () { const optionSet = optEl.closest('.mpg-swatch__option-set'); const fabric = optionSet?.getAttribute('os-name') || 'Option'; const color = optEl.getAttribute('o-value'); const vid = optEl.getAttribute('v-id'); const card = optEl.closest('.mpg-card'); const handle = card?.getAttribute('p-handle'); if (fabric !== 'Fabric') { console.log( '%c[MPG Log] 🎨 Click chọn Color:', 'color: #16a34a; font-weight: bold; font-size: 11px;', { fabric, color, valueId: vid, cardHandle: handle } ); } }); } }); }; // 3. Khởi tạo dropdown phụ thuộc (CHỈ CHẠY CHO SUBGROUP DROPDOWNS) const initSubgroupCardDropdowns = () => { const swatchCards = document.querySelectorAll('.mpg-swatch.mpg-card'); swatchCards.forEach((card) => { const optionSets = Array.from(card.querySelectorAll('.mpg-swatch__option-set:not(.mpg-custom-fabric-wrap)')); if (optionSets.length < 2) return; // KIỂM TRA BẢO VỆ 1: Phải là các option set dạng Dropdown const isDropdownSets = optionSets.every((set) => set.classList.contains('mpg-dropdown-swatch') || set.querySelector('.mpg-dropdown__details, .mpg-dropdown__summary') ); if (!isDropdownSets) return; // KIỂM TRA BẢO VỆ 2: Kiểm tra data group của Grouptify (bỏ qua nếu không phải subgroup) const groupId = card.getAttribute('group-id'); if (window.mpg) { const allGroups = window.mpg.groups || (typeof window.mpg.getGroups === 'function' ? window.mpg.getGroups(true) : []); const groupData = allGroups?.find((g) => g.id === groupId); if (groupData && !groupData.has_subgroup) return; } // KIỂM TRA BẢO VỆ 3: Đặc trưng Subgroup (ít nhất 1 option set không có active hoặc bị 'undefined') const hasUndefinedOrUnselected = optionSets.some((set) => { const summaryVal = set.querySelector('.mpg-dropdown__summary-value')?.textContent?.trim(); const hasSelected = set.querySelector('.mpg-swatch__option.selected'); return !hasSelected || summaryVal === 'undefined'; }); if (!card.dataset.activeFabric && !hasUndefinedOrUnselected) return; // ===== XỬ LÝ SUBGROUP CARD ===== let fabricWrap = card.querySelector('.mpg-custom-fabric-wrap'); // Xác định Fabric active chính xác let activeFabricName = card.dataset.activeFabric; if (!activeFabricName) { const selectedOpt = card.querySelector('.mpg-swatch__option.selected'); if (selectedOpt) { activeFabricName = selectedOpt.closest('.mpg-swatch__option-set')?.getAttribute('os-name'); } } if (!activeFabricName) { const validSet = optionSets.find((set) => { const val = set.querySelector('.mpg-dropdown__summary-value')?.textContent?.trim(); return val && val !== 'undefined'; }); activeFabricName = validSet ? validSet.getAttribute('os-name') : optionSets[0].getAttribute('os-name'); } card.dataset.activeFabric = activeFabricName; // Hàm thực hiện chuyển đổi Fabric const handleFabricSwitch = (selectedFabric) => { const oldFabric = card.dataset.activeFabric; card.dataset.activeFabric = selectedFabric; // Cập nhật text trên summary của Fabric dropdown const fabSummaryVal = fabricWrap.querySelector('.mpg-dropdown__summary-value'); if (fabSummaryVal) fabSummaryVal.textContent = selectedFabric; const fabLegendVal = fabricWrap.querySelector('.mpg-swatch__label-value'); if (fabLegendVal) fabLegendVal.textContent = selectedFabric; // Cập nhật class selected cho danh sách Fabric fabricWrap.querySelectorAll('.mpg-swatch__option').forEach((opt) => { if (opt.getAttribute('o-value') === selectedFabric) opt.classList.add('selected'); else opt.classList.remove('selected'); }); // Ẩn/Hiện option set màu tương ứng optionSets.forEach((set) => { const osName = set.getAttribute('os-name'); if (osName === selectedFabric) { set.style.setProperty('display', 'flex', 'important'); set.removeAttribute('data-subgroup-hidden'); const colorLabelOpt = set.querySelector('.mpg-swatch__label-option'); if (colorLabelOpt) colorLabelOpt.textContent = 'Color'; // Kích hoạt màu đầu tiên của Fabric mới const firstOpt = set.querySelector('.mpg-swatch__option:not(.disabled):not(.blocked)') || set.querySelector('.mpg-swatch__option'); if (firstOpt) { const optVal = firstOpt.getAttribute('o-value'); const vid = firstOpt.getAttribute('v-id'); console.log( '%c[MPG Log] 🔄 Đổi Fabric:', 'color: #2563eb; font-weight: bold; font-size: 11px;', { card: card.getAttribute('p-handle'), fromFabric: oldFabric, toFabric: selectedFabric, autoSelectedColor: optVal, valueId: vid } ); firstOpt.click(); const summaryVal = set.querySelector('.mpg-dropdown__summary-value'); if (summaryVal && optVal) summaryVal.textContent = optVal; const summaryImg = set.querySelector('.mpg-dropdown__summary-image'); const optImg = firstOpt.querySelector('.mpg-dropdown__option-image'); if (summaryImg && optImg) summaryImg.style.cssText = optImg.style.cssText; const colorLabelVal = set.querySelector('.mpg-swatch__label-value'); if (colorLabelVal && optVal) colorLabelVal.textContent = optVal; } } else { set.style.setProperty('display', 'none', 'important'); set.setAttribute('data-subgroup-hidden', 'true'); } }); }; // TẠO DROPDOWN FABRIC DÙNG ĐÚNG CLASS & STRUCTURE CỦA GROUPTIFY DROPDOWN if (!fabricWrap) { fabricWrap = document.createElement('div'); fabricWrap.className = 'mpg-dropdown-swatch mpg-swatch__option-set mpg-custom-fabric-wrap'; fabricWrap.setAttribute('os-type', 'group-option'); fabricWrap.setAttribute('os-name', 'Fabric'); fabricWrap.setAttribute('tabindex', '1'); fabricWrap.addEventListener('click', (e) => e.stopPropagation()); fabricWrap.addEventListener('mousedown', (e) => e.stopPropagation()); const fabricNavHtml = optionSets .map((set, idx) => { const name = set.getAttribute('os-name'); const isSelected = name === activeFabricName; return ` `; }) .join(''); fabricWrap.innerHTML = ` `; // Gắn sự kiện click cho các option Fabric fabricWrap.querySelectorAll('.mpg-custom-fabric-nav .mpg-swatch__option').forEach((opt) => { opt.addEventListener('click', function (e) { e.stopPropagation(); const targetFabric = this.getAttribute('o-value'); handleFabricSwitch(targetFabric); }); }); card.insertBefore(fabricWrap, card.firstChild); } else { // Đồng bộ summary text nếu card re-render const fabSummaryVal = fabricWrap.querySelector('.mpg-dropdown__summary-value'); if (fabSummaryVal && fabSummaryVal.textContent !== activeFabricName) { fabSummaryVal.textContent = activeFabricName; } const fabLegendVal = fabricWrap.querySelector('.mpg-swatch__label-value'); if (fabLegendVal && fabLegendVal.textContent !== activeFabricName) { fabLegendVal.textContent = activeFabricName; } } // Ẩn/Hiện option sets theo Fabric đang chọn optionSets.forEach((set) => { const osName = set.getAttribute('os-name'); if (osName === activeFabricName) { set.style.setProperty('display', 'flex', 'important'); set.removeAttribute('data-subgroup-hidden'); const colorLabelOpt = set.querySelector('.mpg-swatch__label-option'); if (colorLabelOpt) colorLabelOpt.textContent = 'Color'; } else { set.style.setProperty('display', 'none', 'important'); set.setAttribute('data-subgroup-hidden', 'true'); } }); }); }; // 4. Hàm thực thi chung const runAll = () => { fixMpgCardClick(); initSubgroupCardDropdowns(); }; // 5. Hook vào callback render của Grouptify if (window.mpg) { const originalCallback = window.mpg.renderSwatchCardContentCallback; window.mpg.renderSwatchCardContentCallback = function () { if (typeof originalCallback === 'function') { try { originalCallback(); } catch (e) {} } runAll(); }; } // 6. Khởi chạy khi DOM sẵn sàng if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', runAll); } else { runAll(); } // 7. Observer tối ưu có debounce let observerTimeout; if (document.body) { const observer = new MutationObserver(() => { clearTimeout(observerTimeout); observerTimeout = setTimeout(runAll, 80); }); observer.observe(document.body, { childList: true, subtree: true }); } })();

Active filters:

No products found.