' + '' + '

' + '

'; document.body .appendChild( overlay ); overlay .querySelector( '.lp-universal-guide-close' ) .addEventListener( 'click', closeGuide ); overlay.addEventListener( 'click', function (event) { if ( event.target === overlay ) { closeGuide(); } } ); } function buildGuideImage( guide ) { if ( !guide.imageUrl ) { return ''; } return ( '' ); } function buildGuideList( items ) { if ( !items || !items.length ) { return ''; } var output = '

' + escapeHtml( items[i] ) + '

'; return output; } function openGuide( key, event ) { var guide = GUIDES[key]; if (!guide) { return; } if (event) { event.preventDefault(); event.stopPropagation(); } var overlay = document.getElementById( 'lp-universal-guide-overlay' ); if (!overlay) { return; } overlay.querySelector( '.lp-universal-guide-title' ).textContent = guide.title || ''; overlay.querySelector( '.lp-universal-guide-description' ).textContent = guide.description || ''; overlay.querySelector( '.lp-universal-guide-media' ).innerHTML = buildGuideImage( guide ); overlay.querySelector( '.lp-universal-guide-list-wrap' ).innerHTML = buildGuideList( guide.items ); overlay.querySelector( '.lp-universal-guide-note' ).textContent = guide.note || ''; overlay.classList.add( 'is-open' ); overlay.setAttribute( 'aria-hidden', 'false' ); document.body .classList.add( 'lp-universal-guide-open' ); var closeButton = overlay.querySelector( '.lp-universal-guide-close' ); if (closeButton) { closeButton.focus(); } } function closeGuide() { var overlay = document.getElementById( 'lp-universal-guide-overlay' ); if (!overlay) { return; } overlay.classList.remove( 'is-open' ); overlay.setAttribute( 'aria-hidden', 'true' ); document.body .classList.remove( 'lp-universal-guide-open' ); } function decorateGuideText() { var candidates = document.querySelectorAll( 'p, span, small, div, a, button' ); for ( var i = 0; i < candidates.length; i += 1 ) { var element = candidates[i]; if ( element.closest( '.lp-universal-guide-overlay' ) ) { continue; } /* * 只处理纯文字元素， * 避免整个Step变成链接。 */ if ( element.children.length > 0 ) { continue; } var key = findGuideKey( element.textContent ); if (!key) { continue; } element.setAttribute( 'data-lp-guide-trigger', key ); element.classList.add( 'lp-guide-text-trigger' ); element.setAttribute( 'role', 'button' ); element.setAttribute( 'tabindex', '0' ); element.setAttribute( 'aria-haspopup', 'dialog' ); element.setAttribute( 'aria-controls', 'lp-universal-guide-overlay' ); } } /* * ========================= * 全局事件 * ========================= */ function handleDocumentClick( event ) { var target = event.target; if ( !target || !target.closest ) { return; } /* * ===================================================== * Shopify主题产品Gallery Thumbnail * ===================================================== * 用户点击主题自带Thumbnail时： * 1. 不阻止主题自己的click事件 * 2. 只暂停APO Preview继续覆盖主图 * 3. 下一次点击APO Background / Frame时再恢复Preview */ var themeThumbnail = target.closest( '.thumbnail,' + '.thumbnail-list__item button,' + '.thumbnail-list__item a,' + '.product__media-thumbnail,' + '.product-thumbnail,' + '[data-thumbnail-id],' + '[data-product-thumbnail],' + '.swiper-thumbs .swiper-slide' ); if ( themeThumbnail && !themeThumbnail.closest( '.mw-apo-container,' + '.mw-option,' + '.lp-background-option,' + '.lp-frame-option' ) ) { state.manualMediaMode = true; window.clearTimeout( state.previewTimer ); log( 'Luminipet：用户点击产品Thumbnail，暂停APO主图覆盖。' ); /* * 这里只return当前Luminipet处理函数， * 不preventDefault / stopPropagation， * 所以Shopify主题Gallery仍然正常切换。 */ return; } var guideTrigger = target.closest( '[data-lp-guide-trigger]' ); if (guideTrigger) { openGuide( guideTrigger.getAttribute( 'data-lp-guide-trigger' ), event ); return; } var backgroundGroup = target.closest( '.lp-background-option' ); if (backgroundGroup) { syncBackground( backgroundGroup, target ); return; } var frameGroup = target.closest( '.lp-frame-option' ); if (frameGroup) { syncFrame( frameGroup, target ); } } function handleDocumentChange( event ) { var target = event.target; if ( !target || !target.closest ) { return; } var backgroundGroup = target.closest( '.lp-background-option' ); if (backgroundGroup) { syncBackground( backgroundGroup, target ); return; } var frameGroup = target.closest( '.lp-frame-option' ); if (frameGroup) { syncFrame( frameGroup, target ); } } function handleDocumentKeydown( event ) { if ( event.key === 'Escape' ) { closeGuide(); return; } if ( event.key !== 'Enter' && event.key !== ' ' ) { return; } var trigger = event.target.closest ? event.target.closest( '[data-lp-guide-trigger]' ) : null; if (trigger) { openGuide( trigger.getAttribute( 'data-lp-guide-trigger' ), event ); } } function handleSubmit( event ) { if ( event.target && formBelongsToCurrentProduct( event.target ) ) { setProductFormVariantId( state.currentVariantId ); } } function handleFormData( event ) { if ( event.target && formBelongsToCurrentProduct( event.target ) && event.formData ) { event.formData.set( 'id', state.currentVariantId ); } } /* * ========================= * 初始化 * ========================= */ function initialize() { var parsed = parsePreviewConfig(); if ( !parsed || !parsed.data || !parsed.data.productId ) { return false; } window[GLOBAL_KEY] = true; /* * 标记当前为 Portrait Preview 页面。 * APO Custom CSS 的价格移动/隐藏样式只在此 class 下生效， * 避免 Gift 产品价格被 Portrait 逻辑影响。 */ document.documentElement.classList.add( 'lp-portrait-preview-enabled' ); document.dispatchEvent( new CustomEvent( 'luminipet:preview-config-ready' ) ); state.configElement = parsed.element; state.config = parsed.data; state.productRoot = parsed.element.closest( '[id^="shopify-section-"]' ) || parsed.element.closest( 'section' ) || document; state.backgroundOptionIndex = detectBackgroundOptionIndex(); state.currentVariantId = String( state.config .selectedVariantId || ( getVariants()[0] ? getVariants()[0].id : '' ) ); var currentVariant = getCurrentVariant(); if ( currentVariant && state.backgroundOptionIndex >= 0 && currentVariant.options ) { state.selectedBackground = currentVariant.options[ state.backgroundOptionIndex ] || ''; } injectGuideStyles(); createGuideModal(); decorateGuideText(); document.addEventListener( 'click', handleDocumentClick, true ); document.addEventListener( 'change', handleDocumentChange, true ); document.addEventListener( 'keydown', handleDocumentKeydown, true ); document.addEventListener( 'submit', handleSubmit, true ); document.addEventListener( 'formdata', handleFormData, true ); /* * APO每个Step切换时 * 会动态重建HTML。 */ state.observer = new MutationObserver( function () { window.clearTimeout( state.observerTimer ); state.observerTimer = window.setTimeout( function () { decorateGuideText(); syncSelectionsFromPage(); }, 120 ); } ); state.observer.observe( document.body, { childList: true, subtree: true } ); window.setTimeout( syncSelectionsFromPage, 350 ); window.setTimeout( syncSelectionsFromPage, 900 ); console.log( 'Luminipet：Background、Frame、Variant/Product Metafield、Photo Guide和Size Guide已加载。' ); return true; } function boot(attempt) { if ( initialize() ) { return; } if ( attempt >= 40 ) { console.warn( 'Luminipet：找不到#lp-preview-config，请检查产品模板Custom Liquid。' ); return; } window.setTimeout( function () { boot( attempt + 1 ); }, 250 ); } if ( document.readyState === 'loading' ) { document.addEventListener( 'DOMContentLoaded', function () { boot(0); } ); } else { boot(0); } })(); (function () { var GLOBAL_KEY = '__LP_MOVE_PRICE_ABOVE_APO_NEXT_V8__'; if (window[GLOBAL_KEY]) return; window[GLOBAL_KEY] = true; var timer = null; /* * Price 只属于带 #lp-preview-config 的 Portrait 产品。 * Gift 产品没有这个配置，因此完全跳过价格移动。 */ function hasPreviewConfig() { return Boolean( document.getElementById( 'lp-preview-config' ) ); } function isVisible(element) { if (!element) return false; var style = window.getComputedStyle(element); return ( style.display !== 'none' && style.visibility !== 'hidden' && element.getClientRects().length > 0 ); } /* * 真实价格外层： * .price-wrapp * 注意是两个p。 */ function findProductPrice() { return ( document.querySelector( '.product__info-container .price-wrapp[id^="price-"]' ) || document.querySelector( '.product__info-container .price-wrapp' ) ); } /* * APO的Next Step不是button， * 而是div.mw-group__button-next。 */ function findVisibleButtonRow() { var rows = document.querySelectorAll( '.mw-group__button' ); for (var i = 0; i < rows.length; i++) { var nextButton = rows[i].querySelector( '.mw-group__button-next' ); if ( nextButton && /next\s*step/i.test( nextButton.textContent || '' ) && isVisible(rows[i]) && isVisible(nextButton) ) { return rows[i]; } } return null; } function movePrice() { if (!hasPreviewConfig()) { return; } var price = findProductPrice(); var buttonRow = findVisibleButtonRow(); if ( !price || !buttonRow || !buttonRow.parentNode ) { return; } price.classList.add( 'lp-price-before-apo-next' ); /* * 把真实价格区块插入按钮行前面。 */ if ( price.parentNode !== buttonRow.parentNode || price.nextElementSibling !== buttonRow ) { buttonRow.parentNode.insertBefore( price, buttonRow ); } } function scheduleMove() { if (!hasPreviewConfig()) { return; } clearTimeout(timer); timer = setTimeout(movePrice, 30); setTimeout(movePrice, 250); setTimeout(movePrice, 700); } document.addEventListener( 'click', scheduleMove, true ); document.addEventListener( 'change', scheduleMove, true ); document.addEventListener( 'shopify:section:load', scheduleMove ); document.addEventListener( 'luminipet:preview-config-ready', scheduleMove ); /* * APO切换步骤时可能重新生成按钮。 */ var observer = new MutationObserver( function () { scheduleMove(); } ); observer.observe(document.body, { childList: true, subtree: true }); setTimeout(movePrice, 100); setTimeout(movePrice, 500); setTimeout(movePrice, 1200); setTimeout(movePrice, 2500); console.log( 'Luminipet：Price V8（仅Portrait）已加载。' ); })(); /* ========================================================= LUMINIPET GIFT PHOTO GUIDE + APPAREL SIZE GUIDE V1 --------------------------------------------------------- 功能： 1. Gift产品沿用Portrait的Photo Guide 2. T-Shirt独立Size Guide 3. Sweatshirt独立Size Guide 4. Hoodie独立Size Guide 注意： - Portrait页面完全不执行这段代码 - 不碰Background - 不碰Frame - 不碰Variant - 不碰Price - 不碰Add to Cart ========================================================= */ (function () { 'use strict'; /* ===================================================== 只运行一次 ===================================================== */ var GLOBAL_KEY = '__LUMINIPET_GIFT_GUIDES_V1__'; if (window[GLOBAL_KEY]) { return; } /* * Portrait已有原来的完整Guide系统。 * 发现 #lp-preview-config 时直接退出， * 避免两个Guide系统重复运行。 */ if ( document.getElementById( 'lp-preview-config' ) ) { return; } window[GLOBAL_KEY] = true; /* ===================================================== GUIDE IMAGES Photo Guide：已直接沿用你现在Portrait的图片。 Size Guide：只需要替换下面3个URL。 ===================================================== */ var PHOTO_GUIDE_IMAGE_URL = 'https://cdn.shopify.com/s/files/1/0749/6531/9848/files/e877267d119f3aa3371fd9ada02abc34_a51eb9b2-83b1-4add-8375-92cbd0ac440a.webp?v=1784266842'; var SIZE_GUIDE_IMAGE_URLS = { tshirt: 'https://cdn.shopify.com/s/files/1/0749/6531/9848/files/tshirt-size-guide.webp?v=1787651368', sweatshirt: 'https://cdn.shopify.com/s/files/1/0749/6531/9848/files/sweatshirt-size-guide.webp?v=1787651368', hoodie: 'https://cdn.shopify.com/s/files/1/0749/6531/9848/files/hoodie-size-guide.webp?v=1787651368' }; /* ===================================================== TEXT NORMALIZE ===================================================== */ function normalizeText( value ) { return String( value || '' ) .replace(/\s+/g, ' ') .trim() .toLowerCase(); } /* ===================================================== ESCAPE HTML ===================================================== */ function escapeHtml( value ) { return String( value || '' ) .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, '''); } /* ===================================================== GUIDE DATA ===================================================== */ function getPhotoGuide() { return { title: 'How to Choose the Best Pet Photo', imageUrl: PHOTO_GUIDE_IMAGE_URL, imageAlt: 'Photo guide for creating a custom pet portrait', description: 'A clear, well-lit photo helps our artists capture your pet’s expression, colors and unique details.', items: [ 'Choose a sharp, high-resolution photo.', 'Natural daylight works best.', 'Make sure the face, eyes and key features are clearly visible.', 'Avoid blurry photos, screenshots and heavy filters.', 'You may upload separate photos when your pets are not together.' ], note: 'Not sure which photo to use? Upload your favorite one. Our artists will contact you if another image is needed.' }; } function getSizeGuide( type ) { var url = SIZE_GUIDE_IMAGE_URLS[ type ]; if (!url) { return null; } return { title: 'Size Guide', imageUrl: url, imageAlt: type + ' size guide', description: 'Use the size chart below to find the best fit before placing your order.', items: [], note: '' }; } /* ===================================================== CREATE POPUP ===================================================== */ function createPopup() { if ( document.getElementById( 'lp-gift-guide-overlay' ) ) { return; } var overlay = document.createElement( 'div' ); overlay.id = 'lp-gift-guide-overlay'; overlay.className = 'lp-gift-guide-overlay'; overlay.setAttribute( 'aria-hidden', 'true' ); overlay.innerHTML = '

' + '' + '

' + '

'; document.body.appendChild( overlay ); var closeButton = overlay.querySelector( '.lp-gift-guide-close' ); if (closeButton) { closeButton.addEventListener( 'click', closeGuide ); } overlay.addEventListener( 'click', function (event) { if ( event.target === overlay ) { closeGuide(); } } ); } /* ===================================================== BUILD IMAGE ===================================================== */ function buildImage( guide ) { if ( !guide || !guide.imageUrl ) { return ''; } return ( '' ); } /* ===================================================== BUILD LIST ===================================================== */ function buildList( items ) { if ( !items || !items.length ) { return ''; } var output = '

' + escapeHtml( items[i] ) + '

'; return output; } /* ===================================================== OPEN GUIDE ===================================================== */ function openGuide( guide, event ) { if (!guide) { return; } if (event) { event.preventDefault(); event.stopPropagation(); } createPopup(); var overlay = document.getElementById( 'lp-gift-guide-overlay' ); if (!overlay) { return; } var title = overlay.querySelector( '.lp-gift-guide-title' ); var description = overlay.querySelector( '.lp-gift-guide-description' ); var media = overlay.querySelector( '.lp-gift-guide-media' ); var listWrap = overlay.querySelector( '.lp-gift-guide-list-wrap' ); var note = overlay.querySelector( '.lp-gift-guide-note' ); if (title) { title.textContent = guide.title || ''; } if (description) { description.textContent = guide.description || ''; } if (media) { media.innerHTML = buildImage( guide ); } if (listWrap) { listWrap.innerHTML = buildList( guide.items ); } if (note) { note.textContent = guide.note || ''; } overlay.classList.add( 'is-open' ); overlay.setAttribute( 'aria-hidden', 'false' ); document.body.classList.add( 'lp-gift-guide-open' ); } /* ===================================================== CLOSE GUIDE ===================================================== */ function closeGuide() { var overlay = document.getElementById( 'lp-gift-guide-overlay' ); if (!overlay) { return; } overlay.classList.remove( 'is-open' ); overlay.setAttribute( 'aria-hidden', 'true' ); document.body.classList.remove( 'lp-gift-guide-open' ); } /* ===================================================== FIND HELP TEXT ===================================================== */ function findGuideTrigger( startElement ) { var current = startElement; /* * 向上最多找6层， * 兼容APO Help Text里的span/div。 */ for ( var i = 0; i < 6; i += 1 ) { if ( !current || current === document.body ) { break; } var text = normalizeText( current.textContent ); if ( text === 'photo guide' ) { return { element: current, type: 'photo' }; } if ( text === 'size guide' ) { return { element: current, type: 'size' }; } current = current.parentElement; } return null; } /* ===================================================== DETECT APPAREL SIZE GUIDE ===================================================== */ function getSizeGuideType( element ) { if (!element) { return ''; } /* * T-Shirt */ if ( element.closest( '.lp-size-guide-tshirt' ) ) { return 'tshirt'; } /* * Sweatshirt */ if ( element.closest( '.lp-size-guide-sweatshirt' ) ) { return 'sweatshirt'; } /* * Hoodie */ if ( element.closest( '.lp-size-guide-hoodie' ) ) { return 'hoodie'; } return ''; } /* ===================================================== DECORATE HELP TEXT ===================================================== */ function decorateGuideText() { var candidates = document.querySelectorAll( 'p, span, small, div, a, button' ); for ( var i = 0; i < candidates.length; i += 1 ) { var element = candidates[i]; if ( element.closest( '.lp-gift-guide-overlay' ) ) { continue; } /* * 只处理纯文字节点， * 避免整组Option变成链接。 */ if ( element.children.length > 0 ) { continue; } var text = normalizeText( element.textContent ); if ( text !== 'photo guide' && text !== 'size guide' ) { continue; } element.classList.add( 'lp-gift-guide-trigger' ); element.setAttribute( 'role', 'button' ); element.setAttribute( 'tabindex', '0' ); } } /* ===================================================== CLICK ===================================================== */ document.addEventListener( 'click', function (event) { var result = findGuideTrigger( event.target ); if (!result) { return; } /* * Photo Guide * 所有Gift产品共用同一张 */ if ( result.type === 'photo' ) { openGuide( getPhotoGuide(), event ); return; } /* * Size Guide */ if ( result.type === 'size' ) { var sizeType = getSizeGuideType( result.element ); if (!sizeType) { console.warn( 'Luminipet：Gift Size Guide未识别到产品类型。请检查Size Option的CSS Class。' ); return; } var guide = getSizeGuide( sizeType ); if (!guide) { console.warn( 'Luminipet：Gift Size Guide图片URL为空：', sizeType ); return; } openGuide( guide, event ); } }, true ); /* ===================================================== KEYBOARD ===================================================== */ document.addEventListener( 'keydown', function (event) { if ( event.key === 'Escape' ) { closeGuide(); return; } if ( event.key !== 'Enter' && event.key !== ' ' ) { return; } if ( !event.target || !event.target.classList || !event.target.classList.contains( 'lp-gift-guide-trigger' ) ) { return; } event.target.click(); }, true ); /* ===================================================== APO动态加载 ===================================================== */ var observerTimer = null; var observer = new MutationObserver( function () { window.clearTimeout( observerTimer ); observerTimer = window.setTimeout( decorateGuideText, 120 ); } ); observer.observe( document.body, { childList: true, subtree: true } ); /* ===================================================== INIT ===================================================== */ createPopup(); decorateGuideText(); window.setTimeout( decorateGuideText, 300 ); window.setTimeout( decorateGuideText, 900 ); console.log( 'Luminipet：Gift Photo Guide + Apparel Size Guide V1已加载。' ); })();

Country/region