Creamos terminales de punto de venta pensadas para cada tipo de negocio
Conoce las ventajas de cada terminal: internet ilimitado sin costo, conectividad con accesorios, 5 años de garantía y envíos gratis a todo México
`
: "";
const cuotas_slider = cuotasMetafield_slider?.value || "";
const descripcion_slider_new = descripcionMetafield_slider?.value || "";
const features_slider = listadoIconosMetafield_slider?.references?.edges.map(({ node }) => ({
icono: node.icono?.reference?.image?.url || '',
texto: node.texto?.value || ''
})) || [];
const cardWrapper_slider = document.createElement("div");
cardWrapper_slider.classList.add("card_wrapper");
const productCard_slider = document.createElement("div");
productCard_slider.classList.add("product-card");
const variantId_slider = variant_slider?.id.split("/").pop();
const media_slider = product_slider.media.edges[0]?.node;
const smallUrl = cardImageMetafield_slider?.reference?.image?.small;
const largeUrl = cardImageMetafield_slider?.reference?.image?.large;
const stickerUrl = sticker_image?.reference?.image?.url || sticker_image?.reference?.url || "";
//const imageUrl_slider = cardImageMetafield_slider?.reference?.image?.url || media_slider?.image?.url || media_slider?.previewImage?.url || product_slider.featuredImage?.url;
let compareAtPrice_slider = variant_slider?.compareAtPrice?.amount ? parseFloat(variant_slider.compareAtPrice.amount) : null;
let currentPrice_slider = parseFloat(variant_slider.price.amount);
let clase_tag_extra_slider = "";
let monto_cuota_slider = cuotas_slider ? currentPrice_slider / cuotas_slider : "";
monto_cuota_slider = Math.round(monto_cuota_slider).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
let discountPercentage_slider = compareAtPrice_slider ? Math.round((1 - (currentPrice_slider / compareAtPrice_slider)) * 100) : null;
let tag_sticker = "";
if (mostrar_sticker_promo.value == "true") {
tag_sticker = `
`;
}
let tag_discount_special_slider = "";
if (`${product_slider.title}` === "Clip Plus 2" || `${product_slider.title}` === "Clip Pro 2" || `${product_slider.title}` === "Clip Total 2") {
//html_extrabadge_slider = '';
}
compareAtPrice_slider = compareAtPrice_slider ? compareAtPrice_slider.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) : null;
currentPrice_slider = currentPrice_slider.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
productCard_slider.innerHTML = `
${cuotas_slider ? `
`;
container_slider.appendChild(cardWrapper_slider);
cardWrapper_slider.appendChild(productCard_slider);
});
}
fetchProducts_slider().then(() => {
initSliderControls_slider();
});
function initSliderControls_slider() {
const track = document.getElementById('product-collection_slider');
const dots = document.getElementById('sliderDots');
const leftBtn = document.querySelector('.arrow.left');
const rightBtn = document.querySelector('.arrow.right');
let currentIndex = 0;
let slides = Array.from(track.children);
let isMobile = window.matchMedia('(max-width: 768px)');
let onScrollHandler = null;
let autoplayInterval = null;
// === helpers ===
const getVisibleSlides = () => 1; // mobile = 1
const slideWidth = () => slides[0]?.offsetWidth || 0;
function scrollToSlide(index) {
const w = slideWidth();
if (!w) return;
const target = Math.max(0, Math.min(index, slides.length - getVisibleSlides()));
track.scrollTo({ left: Math.round(w * target), behavior: 'smooth' });
currentIndex = target;
updateDots();
updateArrows();
}
function updateDots() {
dots.querySelectorAll('.dot').forEach((dot, i) => {
dot.classList.toggle('active', i === currentIndex);
});
}
function updateArrows() {
const maxIndex = slides.length - getVisibleSlides();
leftBtn.disabled = currentIndex <= 0;
rightBtn.disabled = currentIndex >= maxIndex;
leftBtn.classList.toggle("disabled", leftBtn.disabled);
rightBtn.classList.toggle("disabled", rightBtn.disabled);
}
function setupDots() {
const visible = getVisibleSlides();
const total = slides.length;
const count = Math.max(1, total - visible + 1);
dots.innerHTML = '';
for (let i = 0; i < count; i++) {
const dot = document.createElement('span');
dot.className = 'dot';
dot.addEventListener('click', () => {
scrollToSlide(i);
restartAutoplay();
});
dots.appendChild(dot);
}
updateDots();
updateArrows();
}
function handleScroll() {
const w = slideWidth();
if (!w) return;
const index = Math.round(track.scrollLeft / w);
if (index !== currentIndex) {
currentIndex = index;
updateDots();
updateArrows();
}
}
function debounce(fn, wait) {
let t;
return () => { clearTimeout(t); t = setTimeout(fn, wait); };
}
// === autoplay ===
function startAutoplay() {
stopAutoplay();
autoplayInterval = setInterval(() => {
const maxIndex = slides.length - getVisibleSlides();
let nextIndex = currentIndex + 1;
if (nextIndex > maxIndex) nextIndex = 0;
scrollToSlide(nextIndex);
}, 4000); // cada 4s
}
function stopAutoplay() {
if (autoplayInterval) {
clearInterval(autoplayInterval);
autoplayInterval = null;
}
}
function restartAutoplay() {
stopAutoplay();
startAutoplay();
}
// === modo slider ON (solo mobile) ===
function enableMobileSlider() {
slides = Array.from(track.children);
dots.style.display = 'block';
leftBtn.style.display = 'none';
rightBtn.style.display = 'none';
track.scrollLeft = 0;
setupDots();
requestAnimationFrame(() => {
scrollToSlide(0);
});
onScrollHandler = debounce(handleScroll, 30);
track.addEventListener('scroll', onScrollHandler);
window.addEventListener('resize', onResizeRecalc);
startAutoplay();
}
// === modo desktop (grid) ===
function disableMobileSlider() {
stopAutoplay();
dots.innerHTML = '';
dots.style.display = 'none';
leftBtn.style.display = 'none';
rightBtn.style.display = 'none';
if (onScrollHandler) {
track.removeEventListener('scroll', onScrollHandler);
onScrollHandler = null;
}
window.removeEventListener('resize', onResizeRecalc);
track.scrollLeft = 0;
currentIndex = 0;
}
function onResizeRecalc() {
requestAnimationFrame(() => scrollToSlide(currentIndex));
}
function applyMode() {
if (isMobile.matches) {
enableMobileSlider();
} else {
disableMobileSlider();
}
}
applyMode();
isMobile.addEventListener('change', () => {
disableMobileSlider();
applyMode();
});
leftBtn.addEventListener('click', () => {
scrollToSlide(currentIndex - 1);
restartAutoplay();
});
rightBtn.addEventListener('click', () => {
scrollToSlide(currentIndex + 1);
restartAutoplay();
});
}
-${discountPercentage_slider}%
${html_extrabadge_slider}
${tag_discount_special_slider}
${tag_sticker}
${product_slider.title}
${descripcion_slider_new}
$${currentPrice_slider}
${compareAtPrice_slider ? `$${compareAtPrice_slider}` : ''}
${discountPercentage_slider ? `` : ''}
${cuotas_slider} MSI de $${monto_cuota_slider}
` : ''}
Explorar terminales
Compra tu lector con envío gratis aquí o en tu tienda más cercana
.avif)
