Skip to content
Para que o teu treino de peso livre seja eficiente, temos à disposição centenas de produtos das mais reputadas marcas do mercado.
- Choosing a selection results in a full page refresh.
Cannot place order, conditions not met:
/**
* SOLUÇÃO DEFINITIVA: Shopify + Ella + Customily
* Foca em Observação de URL e Sincronização de Slider
*/
(function() {
const CONFIG = {
selectors: {
mainImg: '.product-single__photo img, .featured-image',
thumbnails: '.product-single__thumb img, .slider-nav img',
canvas: '#customily-canvas',
swatches: '.swatch-element, .single-option-selector'
},
debounceTime: 100
};
function getVariantFromUrl() {
const urlParams = new URLSearchParams(window.location.search);
const variantId = urlParams.get('variant');
if (!variantId || !window.product) return null;
return window.product.variants.find(v => v.id == variantId);
}
function hasCustomilyDesign() {
const canvasContainer = document.querySelector(CONFIG.selectors.canvas);
// Verifica se o Customily injetou algo além do placeholder
return canvasContainer && canvasContainer.children.length > 0;
}
function syncEllaSlider(imageUrl) {
if (!imageUrl) return;
// Remove parâmetros de redimensionamento do Shopify para comparação limpa
const cleanUrl = (url) => url.split('?')[0].replace(/(_\d+x\d+|_master|_small)/g, '');
const targetBase = cleanUrl(imageUrl);
const thumbnails = document.querySelectorAll(CONFIG.selectors.thumbnails);
for (let thumb of thumbnails) {
const thumbSrc = thumb.getAttribute('src') || thumb.getAttribute('data-src');
if (thumbSrc && cleanUrl(thumbSrc).includes(targetBase)) {
// Em vez de só trocar o SRC, simulamos o clique para o Ella mover o Slider (Slick/Swiper)
thumb.click();
return true;
}
}
return false;
}
const updateUI = debounce(() => {
if (hasCustomilyDesign()) return;
const variant = getVariantFromUrl();
if (!variant || !variant.featured_image) return;
// 1. Atualiza Imagem Principal (Fallback caso o slider falhe)
const mainImg = document.querySelector(CONFIG.selectors.mainImg);
if (mainImg) mainImg.src = variant.featured_image.src;
// 2. Sincroniza Slider/Thumbs
syncEllaSlider(variant.featured_image.src);
}, CONFIG.debounceTime);
// --- OBSERVADORES ---
// 1. Monitora mudanças na URL (Troca de variante via Swatches ou Selects)
let lastUrl = location.href;
const urlObserver = new MutationObserver(() => {
if (location.href !== lastUrl) {
lastUrl = location.href;
updateUI();
}
});
urlObserver.observe(document.querySelector('body'), { childList: true, subtree: true });
// 2. Monitora o Customily (Aparecimento/Desaparecimento do Design)
const canvasElement = document.querySelector(CONFIG.selectors.canvas);
if (canvasElement) {
const customilyObserver = new MutationObserver(() => {
// Se o design sumiu, restauramos a variante
if (!hasCustomilyDesign()) updateUI();
});
customilyObserver.observe(canvasElement, { childList: true, subtree: true });
}
// Helper: Debounce
function debounce(fn, ms) {
let timeout;
return () => {
clearTimeout(timeout);
timeout = setTimeout(() => fn.apply(this, arguments), ms);
};
}
// Execução inicial
setTimeout(updateUI, 500);
})();
