`; mediaLinkEl.insertAdjacentHTML('afterbegin', imgHTML); mainImageEl = mediaLinkEl.querySelector('.card__main-image'); } } // Tình huống 1: Revert từ Video về lại Ảnh if (!hasNewVideo) { if (existingVideoEl) existingVideoEl.remove(); mediaLinkEl.classList.remove('cn_custom_card_video'); if (mainImageEl) { mainImageEl.style.display = ''; mainImageEl.setAttribute('loading', 'eager'); // Ép mobile load ảnh ngay lập tức // FIX 3: Backup gỡ loader - Đề phòng trường hợp event load của hàm Image bị hụt trên mobile if (mainImageEl.complete) { removeLoader(); } else { mainImageEl.addEventListener('load', removeLoader, { once: true }); mainImageEl.addEventListener('error', removeLoader, { once: true }); } } return; } // Tình huống 2: Có Video mới cần tải (giữ nguyên logic cũ của bạn) const posterUrl = videoRef.previewImage?.url || ''; const source = videoRef.sources?.find(s => s.format === 'mp4') || videoRef.sources?.[0]; if (!source) return; const videoHTML = `

`; mediaLinkEl.classList.add('cn_custom_card_video'); if (mainImageEl) { mainImageEl.style.display = 'none'; } if (existingVideoEl) { existingVideoEl.outerHTML = videoHTML; } else { mediaLinkEl.insertAdjacentHTML('afterbegin', videoHTML); } const newlyInsertedVideo = mediaLinkEl.querySelector('video'); if (newlyInsertedVideo) { newlyInsertedVideo.addEventListener('loadeddata', removeLoader); newlyInsertedVideo.addEventListener('error', removeLoader); newlyInsertedVideo.load(); const playPromise = newlyInsertedVideo.play(); if (playPromise !== undefined) { playPromise.catch(error => console.warn('Autoplay blocked:', error)); } } } async function updateProductLabel(prod, prodCardEl) { if (!prod?.handle) return; const product = await mpg.getProductByHandle(prod.handle); if (!product) return; const labelContent = product.metafield?.value; const labelHTML = `

${labelContent}

`; const labelFatherEl = prodCardEl?.querySelector('.card__media'); if (!labelFatherEl) return; const currentLabelEl = labelFatherEl.querySelector( '.product-label-container' ); if (!labelContent) { if (currentLabelEl) { currentLabelEl.remove(); } return; } if (labelContent && !currentLabelEl) { labelFatherEl.insertAdjacentHTML('afterbegin', labelHTML); return; } if (labelContent && currentLabelEl) { currentLabelEl.outerHTML = labelHTML; } } function updateWishlistButton(prod, prodCardEl) { const wishlistButtonEl = prodCardEl.parentElement.querySelector( 'wishlist-button-collection' ); if (!wishlistButtonEl || !prod?.handle) return; wishlistButtonEl.setAttribute('data-product-handle', prod.handle); } function updateReviewLink(prod, prodCardEl) { const reviewLinkEl = prodCardEl?.querySelector('.starrating-link'); if (!reviewLinkEl || !prod?.handle) return; reviewLinkEl.href = `/products/${prod.handle}#stamped-main-widget`; } function updateReviewBadge(prod, prodCardEl) { if (!prod?.id || !prod?.title) return; const reviewContainerEl = prodCardEl?.querySelector( '.stamped-product-reviews-badge' ); if (!reviewContainerEl) return; const cacheKey = `mpg_review_badge_${prod.id}`; const cachedBadge = sessionStorage.getItem(cacheKey); if (cachedBadge) { reviewContainerEl.innerHTML = cachedBadge; return; } const originalReviewBadge = reviewContainerEl.innerHTML; fetch('https://stamped.io/api/widget/badges', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ apiKey: 'pubkey-50708uyDEcwW728jE74Q3B82VY6rqs', storeUrl: 'saltycrush.myshopify.com', productIds: [{ productId: prod.id, productTitle: prod.title, }, ], }), }) .then((response) => response.json()) .then((data) => { const reviewBadge = data?.[0]?.badge; if (reviewBadge) { reviewContainerEl.innerHTML = reviewBadge; sessionStorage.setItem(cacheKey, reviewBadge); } else { reviewContainerEl.innerHTML = originalReviewBadge; } }) .catch((error) => { console.error('Error:', error); reviewContainerEl.innerHTML = originalReviewBadge; }); }