`; mediaLinkEl.insertAdjacentHTML('afterbegin', imgHTML); firstImageEl = mediaLinkEl.querySelector('.card__main-image'); } } if (!mpg.useMetafieldForCardImage) return; const imageUrl = product?.cardImage?.reference?.image?.url; if (!firstImageEl || !imageUrl) return; mpg.updateProductImage(firstImageEl, imageUrl, 'image'); } async function updateProductCardVideo(prod, prodCardEl) { if (!mpg.useMetafieldForCardVideo || !prod?.handle) return; const product = await mpg.getProductByHandle(prod.handle); const mediaLinkEl = prodCardEl?.querySelector('a.media.js-prod-link'); if (!mediaLinkEl) return; if (!document.getElementById('mpg-video-fix-style')) { const style = document.createElement('style'); style.id = 'mpg-video-fix-style'; style.innerHTML = ` .cn_custom_card_video .card__main-image { display: none !important; } .cn_custom_card_video deferred-media, .cn_custom_card_video video { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit; } `; document.head.appendChild(style); } const existingVideoEl = mediaLinkEl.querySelector('deferred-media'); let mainImageEl = mediaLinkEl.querySelector('.card__main-image'); const videoRef = product?.cardVideo?.reference; const hasNewVideo = !!videoRef; if (!hasNewVideo) { if (existingVideoEl) existingVideoEl.remove(); mediaLinkEl.classList.remove('cn_custom_card_video'); if (mainImageEl) { mainImageEl.style.display = ''; } return; } const posterUrl = videoRef.previewImage?.url || ''; const source = videoRef.sources?.find(s => s.format === 'mp4') || videoRef.sources?.[0]; if (!source) return; if (existingVideoEl) { const currentVideoSource = existingVideoEl.querySelector('source'); if (currentVideoSource && currentVideoSource.src.includes(source.url.split('?')[0])) { 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.load(); const playPromise = newlyInsertedVideo.play(); if (playPromise !== undefined) playPromise.catch(() => {}); } } 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; }); }