Ver tus
Pedidos

<script>
(() => {
const SCRIPT_NAME = 'wpeSplideButtons';
const controlWrapperSelector = '.wpe-splide-buttons';
if (undefined === window.wpeData) { window.wpeData = []; }
if (undefined === window.wpeData.scripts) { window.wpeData.scripts = []; }
if (undefined === window.wpeData.splideControls) { window.wpeData.splideControls = {}; }
if (undefined !== window.wpeData.scripts[SCRIPT_NAME]) { return; }
window.wpeData.scripts[SCRIPT_NAME] = true;
const updateButtons = (buttons, newIndex) => {
buttons.forEach((btn, idx) => {
if (idx === newIndex) {
btn.setAttribute('aria-pressed', 'true');
btn.setAttribute('data-active', 'true');
btn.classList.add('active');
} else {
btn.setAttribute('aria-pressed', 'false');
btn.setAttribute('data-active', 'false');
btn.classList.remove('active');
}
});
};
document.addEventListener('DOMContentLoaded', () => {
const controlWrappers = document.querySelectorAll(controlWrapperSelector);
const init = () => {
Array.from(controlWrappers).forEach(el => {
let sliderId = el.dataset.wpeSplideId;
if(!sliderId) return;
sliderId = sliderId.replace('brxe-', '');
if(!window.bricksData || !window.bricksData.splideInstances) return;
const sliderInstance = bricksData.splideInstances[sliderId];
// --- CAMBIO PARA EFECTO CARRUSEL ---
// Forzamos que el tipo sea 'slide' o 'loop' y no 'fade'
sliderInstance.options = {
...sliderInstance.options,
type: 'slide',
rewind: true,
speed: 400, // Velocidad del desplazamiento en ms
easing: 'cubic-bezier(0.25, 1, 0.5, 1)', // Movimiento fluido
};
// -----------------------------------
window.wpeData.splideControls[el.id] = sliderInstance;
const buttons = el.querySelectorAll('button');
const slides = sliderInstance.Components.Elements.slides;
buttons.forEach((btn, idx) => {
btn.setAttribute('data-index', idx);
if(slides[idx]) btn.setAttribute('aria-controls', slides[idx].id);
btn.addEventListener('click', event => {
const slideIndex = parseInt(event.currentTarget.dataset.index, 10);
sliderInstance.go(slideIndex);
updateButtons(buttons, slideIndex);
});
btn.addEventListener('mouseenter', event => {
const slideIndex = parseInt(event.currentTarget.dataset.index, 10);
sliderInstance.go(slideIndex);
updateButtons(buttons, slideIndex);
});
});
updateButtons(buttons, 0);
sliderInstance.on('move', (newIndex) => {
updateButtons(buttons, newIndex);
});
});
};
setTimeout(init, 500); // Aumentado a 500ms para asegurar que Bricks cargue Splide
});
})();
</script>/* --- ESTADO BASE --- */
.wpe-splide-buttons button {
/* CAMBIO: Línea izquierda ahora es gris por defecto (ajustá el #ccc a tu gusto) */
border-left: 4px solid #e0e0e0;
/* Fondo transparente base */
background: transparent;
/* Espaciado */
padding: 10px 20px;
width: 100%;
text-align: left;
/* Forzamos que la letra NO cambie de grosor ni tamaño */
font-weight: 500;
transform: none !important; /* BLOQUEA ZOOM */
/* Transición suave: le puse 0.3s para que el cambio de color sea elegante */
transition: border-color 0.3s ease, background 0.3s ease;
}
/* --- ESTADO ACTIVO & HOVER --- */
.wpe-splide-buttons button.active,
.wpe-splide-buttons button:hover {
/* 1. La línea cambia de gris al color primario */
border-left-color: var(--primary);
/* Opcional: un fondo muy sutil para resaltar el hover */
background: rgba(0, 0, 0, 0.02);
/* Aseguramos que NO haya cambios de fuente */
font-weight: 500;
}

