{"id":39004,"date":"2025-10-18T23:21:39","date_gmt":"2025-10-18T21:21:39","guid":{"rendered":"https:\/\/www.hakoit.com\/?page_id=39004"},"modified":"2025-10-20T12:47:52","modified_gmt":"2025-10-20T10:47:52","slug":"test-productos","status":"publish","type":"page","link":"https:\/\/www.hakoit.com\/test-productos\/","title":{"rendered":"Cat\u00e1logo de Productos"},"content":{"rendered":"

[et_pb_section fb_built=\u00bb1″ fullwidth=\u00bbon\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb background_color=\u00bbrgba(0,0,0,0.39)\u00bb background_image=\u00bbhttps:\/\/www.hakoit.com\/wp-content\/uploads\/2025\/10\/store.jpg\u00bb background_blend=\u00bbcolor\u00bb module_alignment=\u00bbcenter\u00bb min_height=\u00bb30vh\u00bb da_disable_devices=\u00bboff|off|off\u00bb global_colors_info=\u00bb{}\u00bb da_is_popup=\u00bboff\u00bb da_exit_intent=\u00bboff\u00bb da_has_close=\u00bbon\u00bb da_alt_close=\u00bboff\u00bb da_dark_close=\u00bboff\u00bb da_not_modal=\u00bbon\u00bb da_is_singular=\u00bboff\u00bb da_with_loader=\u00bboff\u00bb da_has_shadow=\u00bbon\u00bb][et_pb_fullwidth_post_title meta=\u00bboff\u00bb featured_image=\u00bboff\u00bb text_color=\u00bblight\u00bb _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb text_orientation=\u00bbcenter\u00bb hover_enabled=\u00bb0″ text_shadow_style=\u00bbpreset5″ global_colors_info=\u00bb{}\u00bb title_font=\u00bb|||on|||||\u00bb title_font_size=\u00bb35px\u00bb sticky_enabled=\u00bb0″][\/et_pb_fullwidth_post_title][\/et_pb_section][et_pb_section fb_built=\u00bb1″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb da_disable_devices=\u00bboff|off|off\u00bb global_colors_info=\u00bb{}\u00bb da_is_popup=\u00bboff\u00bb da_exit_intent=\u00bboff\u00bb da_has_close=\u00bbon\u00bb da_alt_close=\u00bboff\u00bb da_dark_close=\u00bboff\u00bb da_not_modal=\u00bbon\u00bb da_is_singular=\u00bboff\u00bb da_with_loader=\u00bboff\u00bb da_has_shadow=\u00bbon\u00bb][et_pb_row _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n

Cat\u00e1logo de Productos \/ Pedidos por WhatsApp<\/h1>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_code disabled_on=\u00bbon|on|on\u00bb admin_label=\u00bbv1″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb disabled=\u00bbon\u00bb global_colors_info=\u00bb{}\u00bb] Cat\u00e1logo de Productos \u2014 R\u00e9plica<\/title> <\/p>\n<style> \/* Reset b\u00e1sico \/ {box-sizing:border-box;margin:0;padding:0;font-family:Inter, system-ui, Arial, sans-serif} body{background:#f5f6fb;color:#222;padding:24px} h1{font-size:20px;margin-bottom:18px} \/* Contenedor productos \/ .contenedor-productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .producto{background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(17,24,39,0.06);overflow:hidden;display:flex;flex-direction:column} .producto .imagen{height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f0f2f7} .producto img{max-width:100%;max-height:100%;object-fit:cover} .info{padding:12px 14px;flex:1} .titulo{font-size:16px;margin-bottom:6px} .precio{font-size:18px;color:#111;font-weight:600;margin-bottom:8px} .metadatos .meta{margin-bottom:8px} label{display:block;font-size:12px;color:#555;margin-bottom:6px} select{width:100%;padding:8px;border-radius:6px;border:1px solid #e0e4ee;background:#fff} .agregar{border:0;background:#4741d7;color:#fff;padding:10px;margin:12px;border-radius:8px;cursor:pointer;font-weight:600} .agregar:active{transform:translateY(1px)} \/ Carrito fijo \/ #carrito-icon{position:fixed;right:18px;bottom:18px;background:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,0.12);cursor:pointer} #carrito-icon .contador{position:absolute;top:-6px;right:-6px;background:#ff3b30;color:#fff;border-radius:50%;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px} #carrito-container{position:fixed;right:-380px;top:0;bottom:0;width:360px;background:#fff;box-shadow:-20px 0 40px rgba(2,6,23,0.08);padding:18px;transition:right .28s cubic-bezier(.2,.9,.2,1);z-index:9999} #carrito-container.open{right:0} #carrito-container h3{margin-bottom:12px} #carrito-lista{list-style:none;max-height:60vh;overflow:auto;margin-bottom:12px} #carrito-lista li{padding:8px 6px;border-bottom:1px dashed #eee;display:flex;justify-content:space-between;align-items:center} .eliminar{color:#999;margin-left:8px;cursor:pointer} #total{font-weight:700} #enviar-whatsapp{display:block;width:100%;padding:10px;text-align:center;background:#25D366;color:white;border-radius:8px;text-decoration:none;font-weight:600} #vaciar-carrito{display:inline-block;margin-top:8px;color:#666;cursor:pointer;font-size:13px} \/ Preloader \/ #preloader{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10000} .lds-roller{display:inline-block;position:relative;width:64px;height:64px} .lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px} .lds-roller div:after{content:\"\";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#4741d7;top:3px;left:29px} .lds-roller div:nth-child(1){transform:rotate(0deg)} .lds-roller div:nth-child(2){transform:rotate(45deg)} .lds-roller div:nth-child(3){transform:rotate(90deg)} .lds-roller div:nth-child(4){transform:rotate(135deg)} .lds-roller div:nth-child(5){transform:rotate(180deg)} .lds-roller div:nth-child(6){transform:rotate(225deg)} .lds-roller div:nth-child(7){transform:rotate(270deg)} .lds-roller div:nth-child(8){transform:rotate(315deg)} @keyframes lds-roller{0%{opacity:1}100%{opacity:0}} \/ Peque\u00f1os estilos responsivos \/ @media (max-width:600px){#carrito-container{width:100%;} .producto .imagen{height:140px}} <\/style>\n<p><\/head><body>   <\/p>\n<div id=\"preloader\" aria-hidden=\"true\"> <\/p>\n<div class=\"lds-roller\" aria-hidden=\"true\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<p> <\/div>\n<p> <\/p>\n<div id=\"contenedor-productos\" class=\"contenedor-productos\" aria-live=\"polite\"><\/div>\n<p>  <\/p>\n<div id=\"carrito-icon\" title=\"Abrir carrito\"> <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M7 4h-2l-1 2v2h2l3 9h8l3-7h-11\" stroke=\"#111\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg> <\/p>\n<div class=\"contador\" id=\"carrito-contador\">0<\/div>\n<p> <\/div>\n<p> <\/p>\n<aside id=\"carrito-container\" role=\"dialog\" aria-label=\"Carrito de compras\"> <\/p>\n<h3>Mi Pedido<\/h3>\n<p> <\/p>\n<div id=\"cerrar-carrito\" style=\"position:absolute;right:12px;top:12px;cursor:pointer;font-size:18px\">\u2715<\/div>\n<p> <\/p>\n<div id=\"carrito-vacio-mensaje\" style=\"color:#666;margin-bottom:8px\">El carrito est\u00e1 vac\u00edo<\/div>\n<p> <\/p>\n<ul id=\"carrito-lista\"><\/ul>\n<p> <\/p>\n<div style=\"margin-top:8px\">Total: $<span id=\"total\">0<\/span> USD<\/div>\n<p> <a id=\"enviar-whatsapp\" href=\"#\">Enviar por WhatsApp<\/a> <\/p>\n<div id=\"vaciar-carrito\">Vaciar carrito<\/div>\n<p> <\/aside>\n<p> <script> \/\/ URL p\u00fablica del Google Apps Script (tal como en el c\u00f3digo original). Si necesitas usar otra URL, c\u00e1mbiala aqu\u00ed. const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzsQm_tMoh4FUp_PaKWrqSAONRYFOJe0LCSa4KBDmnwfxH0Di4xUI028PR08V8vw6a7\/exec';   const preloader = document.getElementById('preloader'); const contenedorProductos = document.getElementById('contenedor-productos'); function formatearPrecio(precio){ \/\/ Muestra sin decimales y separador de miles if (typeof precio !== 'number') precio = Number(precio) || 0; return precio.toLocaleString('en-US', {maximumFractionDigits:0}); } \/\/ Mostrar preloader function showLoader(){ preloader.style.display = 'block'; } function hideLoader(){ preloader.style.display = 'none'; } showLoader(); \/\/ Petici\u00f3n para obtener productos (JSON) fetch(API_URL) .then(r => { if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); }) .then(data => { renderProductos(data || []); }) .catch(err => { console.error('Error al obtener productos:', err); contenedorProductos.innerHTML = '<\/p>\n<div style=\"grid-column:1\/-1;padding:20px;background:#fff;border-radius:10px\">No se pudieron cargar los productos.<\/div>\n<p>'; }) .finally(()=> hideLoader()); function renderProductos(productos){ contenedorProductos.innerHTML = ''; productos.forEach((producto, index) => { const card = document.createElement('article'); card.className = 'producto'; \/\/ Imagen const imgWrap = document.createElement('div'); imgWrap.className = 'imagen'; const img = document.createElement('img'); img.alt = producto.titulo || 'Imagen'; img.decoding = 'async'; img.src = producto.imagen || ''; imgWrap.appendChild(img); \/\/ Info const info = document.createElement('div'); info.className = 'info'; const titulo = document.createElement('h4'); titulo.className = 'titulo'; titulo.textContent = producto.titulo || 'Sin t\u00edtulo'; const precio = document.createElement('div'); precio.className = 'precio'; precio.textContent = '$' + formatearPrecio(producto.precio) + ' USD'; info.appendChild(titulo); info.appendChild(precio); \/\/ Metadatos\/atributos const metaCont = document.createElement('div'); metaCont.className = 'metadatos'; metaCont.id = 'atributo' + index; if (producto.atributos && Object.keys(producto.atributos).length>0){ Object.entries(producto.atributos).forEach(([nombreAtributo, valores]) => { \/\/ Filtrar valores vac\u00edos const cleaned = (Array.isArray(valores) ? valores : []).filter(Boolean); if (cleaned.length===0) return; const meta = document.createElement('div'); meta.className = 'meta'; const label = document.createElement('label'); label.setAttribute('for', nombreAtributo.toLowerCase()+index); label.textContent = nombreAtributo + ':'; const select = document.createElement('select'); select.id = nombreAtributo.toLowerCase()+index; const placeholder = document.createElement('option'); placeholder.value = ''; placeholder.disabled = true; placeholder.selected = true; placeholder.textContent = 'Seleccionar ' + nombreAtributo.toLowerCase(); select.appendChild(placeholder); cleaned.forEach(v=>{ const o = document.createElement('option'); o.value = v; o.textContent = v; select.appendChild(o); }); meta.appendChild(label); meta.appendChild(select); metaCont.appendChild(meta); }); } \/\/ Bot\u00f3n agregar const btn = document.createElement('button'); btn.className = 'agregar'; btn.type = 'button'; btn.textContent = 'Agregar al carrito'; \/\/ Guardar datos en dataset para no tener que serializar en HTML btn.dataset.nombre = producto.titulo || ''; btn.dataset.precio = String(producto.precio || 0); btn.dataset.index = String(index); card.appendChild(imgWrap); card.appendChild(info); card.appendChild(metaCont); card.appendChild(btn); contenedorProductos.appendChild(card); }); \/\/ Inicializar la funcionalidad una vez a\u00f1adidos los elementos inicializarFuncionalidad(); } function inicializarFuncionalidad(){ const productos = document.querySelectorAll('.producto'); const carritoLista = document.getElementById('carrito-lista'); const totalEl = document.getElementById('total'); const carritoContainer = document.getElementById('carrito-container'); const carritoIcon = document.getElementById('carrito-icon'); const carritoContador = document.getElementById('carrito-contador'); const cerrarCarrito = document.getElementById('cerrar-carrito'); const enviarWhatsAppButton = document.getElementById('enviar-whatsapp'); const carritoVacioMensaje = document.getElementById('carrito-vacio-mensaje'); const vaciarCarritoButton = document.getElementById('vaciar-carrito'); let carrito = []; let carritoTotal = 0; function actualizarUI(){ carritoLista.innerHTML = ''; carrito.forEach((p, i)=>{ const li = document.createElement('li'); li.textContent = `${p.nombre} - $${formatearPrecio(p.precio)}`; const eliminar = document.createElement('span'); eliminar.className = 'eliminar'; eliminar.innerHTML = '\u2715'; eliminar.title = 'Eliminar'; eliminar.style.marginLeft = '8px'; eliminar.addEventListener('click', ()=>{ carrito.splice(i,1); carritoTotal -= p.precio; actualizarUI(); }); li.appendChild(eliminar); carritoLista.appendChild(li); }); totalEl.textContent = formatearPrecio(carritoTotal); carritoContador.textContent = String(carrito.length); carritoVacioMensaje.style.display = carrito.length===0 ? 'block' : 'none'; } carritoIcon.addEventListener('click', ()=>{ carritoContainer.classList.toggle('open'); }); cerrarCarrito.addEventListener('click', ()=> carritoContainer.classList.remove('open')); vaciarCarritoButton.addEventListener('click', ()=>{ carrito = []; carritoTotal = 0; actualizarUI(); }); \/\/ Enviar por WhatsApp enviarWhatsAppButton.addEventListener('click', (e)=>{ e.preventDefault(); if (carrito.length===0){ alert('El carrito est\u00e1 vac\u00edo'); return; } const carritoTexto = carrito.map(p => `${p.nombre} - $${formatearPrecio(p.precio)}`).join('\\n'); const mensajeWhatsApp = 'Mi Pedido:\\n' + carritoTexto + '\\nTOTAL: $' + formatearPrecio(carritoTotal) + ''; \/\/ Reemplaza el n\u00famero con el destino que quieras (incluye c\u00f3digo de pa\u00eds, sin +) const telefono = '34603890220'; const url = `https:\/\/wa.me\/${telefono}?text=${encodeURIComponent(mensajeWhatsApp)}`; window.open(url, '_blank'); }); \/\/ Asignar eventos a botones \"Agregar\" reci\u00e9n creados document.querySelectorAll('.agregar').forEach(button => { button.addEventListener('click', ()=>{ const nombre = button.dataset.nombre || ''; const precio = Number(button.dataset.precio) || 0; const idx = button.dataset.index; \/\/ Validar selects en su bloque const selects = document.querySelectorAll(`#atributo${idx} select`); for (const s of selects){ if (s.value===''){ alert('Por favor, selecciona todas las opciones antes de agregar al carrito.'); s.focus(); return; } } let nombreConVariantes = nombre; for (const s of selects){ nombreConVariantes += ` - ${s.previousElementSibling ? s.previousElementSibling.textContent.replace(':','') : 'opci\u00f3n'}: ${s.value}`; } \/\/ A\u00f1adir vibraci\u00f3n visual al icono carritoIcon.animate([{transform:'scale(1)'},{transform:'scale(1.08)'},{transform:'scale(1)'}],{duration:350}); carrito.push({nombre:nombreConVariantes,precio}); carritoTotal += precio; actualizarUI(); \/\/ Abrir carrito en pantallas grandes if (window.innerWidth > 768) carritoContainer.classList.add('open'); }); }); \/\/ Inicializar estado actualizarUI(); } <\/script><\/body>[\/et_pb_code][et_pb_code admin_label=\u00bbv1″ _builder_version=\u00bb4.27.4″ _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb] <\/p>\n<style> \/ Reset b\u00e1sico \/ {box-sizing:border-box;margin:0;padding:0;font-family:Inter, system-ui, Arial, sans-serif} body{background:#f5f6fb;color:#222;padding:24px} h1{font-size:20px;margin-bottom:18px} \/* Contenedor productos \/ .contenedor-productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .producto{background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(17,24,39,0.06);overflow:hidden;display:flex;flex-direction:column} .producto .imagen{height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f0f2f7} .producto img{max-width:100%;max-height:100%;object-fit:cover} .info{padding:12px 14px;flex:1} .titulo{font-size:16px;margin-bottom:6px} .precio{font-size:18px;color:#111;font-weight:600;margin-bottom:8px} .metadatos .meta{margin-bottom:8px} label{display:block;font-size:12px;color:#555;margin-bottom:6px} select{width:100%;padding:8px;border-radius:6px;border:1px solid #e0e4ee;background:#fff} .agregar{border:0;background:#4741d7;color:#fff;padding:10px;margin:12px;border-radius:8px;cursor:pointer;font-weight:600} .agregar:active{transform:translateY(1px)} \/ Carrito fijo \/ #carrito-icon{position:fixed;right:18px;bottom:18px;background:#fff;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,0.12);cursor:pointer} #carrito-icon .contador{position:absolute;top:-6px;right:-6px;background:#ff3b30;color:#fff;border-radius:50%;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px} #carrito-container{position:fixed;right:-380px;top:0;bottom:0;width:360px;background:#fff;box-shadow:-20px 0 40px rgba(2,6,23,0.08);padding:18px;transition:right .28s cubic-bezier(.2,.9,.2,1);z-index:9999} #carrito-container.open{right:0} #carrito-container h3{margin-bottom:12px} #carrito-lista{list-style:none;max-height:60vh;overflow:auto;margin-bottom:12px} #carrito-lista li{padding:8px 6px;border-bottom:1px dashed #eee;display:flex;justify-content:space-between;align-items:center} .eliminar{color:#999;margin-left:8px;cursor:pointer} #total{font-weight:700} #enviar-whatsapp{display:block;width:100%;padding:10px;text-align:center;background:#25D366;color:white;border-radius:8px;text-decoration:none;font-weight:600} #vaciar-carrito{display:inline-block;margin-top:8px;color:#666;cursor:pointer;font-size:13px} \/ Preloader \/ #preloader{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10000} .lds-roller{display:inline-block;position:relative;width:64px;height:64px} .lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px} .lds-roller div:after{content:\"\";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#4741d7;top:3px;left:29px} .lds-roller div:nth-child(1){transform:rotate(0deg)} .lds-roller div:nth-child(2){transform:rotate(45deg)} .lds-roller div:nth-child(3){transform:rotate(90deg)} .lds-roller div:nth-child(4){transform:rotate(135deg)} .lds-roller div:nth-child(5){transform:rotate(180deg)} .lds-roller div:nth-child(6){transform:rotate(225deg)} .lds-roller div:nth-child(7){transform:rotate(270deg)} .lds-roller div:nth-child(8){transform:rotate(315deg)} @keyframes lds-roller{0%{opacity:1}100%{opacity:0}} \/ Peque\u00f1os estilos responsivos \/ @media (max-width:600px){#carrito-container{width:100%;} .producto .imagen{height:140px}} <\/style>\n<p>   <\/p>\n<div id=\"preloader\" aria-hidden=\"true\"> <\/p>\n<div class=\"lds-roller\" aria-hidden=\"true\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<p> <\/div>\n<p> <\/p>\n<div id=\"contenedor-productos\" class=\"contenedor-productos\" aria-live=\"polite\"><\/div>\n<p>  <\/p>\n<div id=\"carrito-icon\" title=\"Abrir carrito\"> <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M7 4h-2l-1 2v2h2l3 9h8l3-7h-11\" stroke=\"#111\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg> <\/p>\n<div class=\"contador\" id=\"carrito-contador\">0<\/div>\n<p> <\/div>\n<p> <\/p>\n<aside id=\"carrito-container\" role=\"dialog\" aria-label=\"Carrito de compras\"> <\/p>\n<h3>Mi Pedido<\/h3>\n<p> <\/p>\n<div id=\"cerrar-carrito\" style=\"position:absolute;right:12px;top:12px;cursor:pointer;font-size:18px\">\u2715<\/div>\n<p> <\/p>\n<div id=\"carrito-vacio-mensaje\" style=\"color:#666;margin-bottom:8px\">El carrito est\u00e1 vac\u00edo<\/div>\n<p> <\/p>\n<ul id=\"carrito-lista\"><\/ul>\n<p> <\/p>\n<div style=\"margin-top:8px\">Total: $<span id=\"total\">0<\/span> USD<\/div>\n<p> <a id=\"enviar-whatsapp\" href=\"#\">Enviar por WhatsApp<\/a> <\/p>\n<div id=\"vaciar-carrito\">Vaciar carrito<\/div>\n<p> <\/aside>\n<p> <script> \/\/ URL p\u00fablica del Google Apps Script (tal como en el c\u00f3digo original). Si necesitas usar otra URL, c\u00e1mbiala aqu\u00ed. const API_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbzsQm_tMoh4FUp_PaKWrqSAONRYFOJe0LCSa4KBDmnwfxH0Di4xUI028PR08V8vw6a7\/exec';   const preloader = document.getElementById('preloader'); const contenedorProductos = document.getElementById('contenedor-productos'); function formatearPrecio(precio){ \/\/ Muestra sin decimales y separador de miles if (typeof precio !== 'number') precio = Number(precio) || 0; return precio.toLocaleString('en-US', {maximumFractionDigits:0}); } \/\/ Mostrar preloader function showLoader(){ preloader.style.display = 'block'; } function hideLoader(){ preloader.style.display = 'none'; } showLoader(); \/\/ Petici\u00f3n para obtener productos (JSON) fetch(API_URL) .then(r => { if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); }) .then(data => { renderProductos(data || []); }) .catch(err => { console.error('Error al obtener productos:', err); contenedorProductos.innerHTML = '<\/p>\n<div style=\"grid-column:1\/-1;padding:20px;background:#fff;border-radius:10px\">No se pudieron cargar los productos.<\/div>\n<p>'; }) .finally(()=> hideLoader()); function renderProductos(productos){ contenedorProductos.innerHTML = ''; productos.forEach((producto, index) => { const card = document.createElement('article'); card.className = 'producto'; \/\/ Imagen const imgWrap = document.createElement('div'); imgWrap.className = 'imagen'; const img = document.createElement('img'); img.alt = producto.titulo || 'Imagen'; img.decoding = 'async'; img.src = producto.imagen || ''; imgWrap.appendChild(img); \/\/ Info const info = document.createElement('div'); info.className = 'info'; const titulo = document.createElement('h4'); titulo.className = 'titulo'; titulo.textContent = producto.titulo || 'Sin t\u00edtulo'; const precio = document.createElement('div'); precio.className = 'precio'; precio.textContent = '$' + formatearPrecio(producto.precio) + ' USD'; info.appendChild(titulo); info.appendChild(precio); \/\/ Metadatos\/atributos const metaCont = document.createElement('div'); metaCont.className = 'metadatos'; metaCont.id = 'atributo' + index; if (producto.atributos && Object.keys(producto.atributos).length>0){ Object.entries(producto.atributos).forEach(([nombreAtributo, valores]) => { \/\/ Filtrar valores vac\u00edos const cleaned = (Array.isArray(valores) ? valores : []).filter(Boolean); if (cleaned.length===0) return; const meta = document.createElement('div'); meta.className = 'meta'; const label = document.createElement('label'); label.setAttribute('for', nombreAtributo.toLowerCase()+index); label.textContent = nombreAtributo + ':'; const select = document.createElement('select'); select.id = nombreAtributo.toLowerCase()+index; const placeholder = document.createElement('option'); placeholder.value = ''; placeholder.disabled = true; placeholder.selected = true; placeholder.textContent = 'Seleccionar ' + nombreAtributo.toLowerCase(); select.appendChild(placeholder); cleaned.forEach(v=>{ const o = document.createElement('option'); o.value = v; o.textContent = v; select.appendChild(o); }); meta.appendChild(label); meta.appendChild(select); metaCont.appendChild(meta); }); } \/\/ Bot\u00f3n agregar const btn = document.createElement('button'); btn.className = 'agregar'; btn.type = 'button'; btn.textContent = 'Agregar al carrito'; \/\/ Guardar datos en dataset para no tener que serializar en HTML btn.dataset.nombre = producto.titulo || ''; btn.dataset.precio = String(producto.precio || 0); btn.dataset.index = String(index); card.appendChild(imgWrap); card.appendChild(info); card.appendChild(metaCont); card.appendChild(btn); contenedorProductos.appendChild(card); }); \/\/ Inicializar la funcionalidad una vez a\u00f1adidos los elementos inicializarFuncionalidad(); } function inicializarFuncionalidad(){ const productos = document.querySelectorAll('.producto'); const carritoLista = document.getElementById('carrito-lista'); const totalEl = document.getElementById('total'); const carritoContainer = document.getElementById('carrito-container'); const carritoIcon = document.getElementById('carrito-icon'); const carritoContador = document.getElementById('carrito-contador'); const cerrarCarrito = document.getElementById('cerrar-carrito'); const enviarWhatsAppButton = document.getElementById('enviar-whatsapp'); const carritoVacioMensaje = document.getElementById('carrito-vacio-mensaje'); const vaciarCarritoButton = document.getElementById('vaciar-carrito'); let carrito = []; let carritoTotal = 0; function actualizarUI(){ carritoLista.innerHTML = ''; carrito.forEach((p, i)=>{ const li = document.createElement('li'); li.textContent = `${p.nombre} - $${formatearPrecio(p.precio)}`; const eliminar = document.createElement('span'); eliminar.className = 'eliminar'; eliminar.innerHTML = '\u2715'; eliminar.title = 'Eliminar'; eliminar.style.marginLeft = '8px'; eliminar.addEventListener('click', ()=>{ carrito.splice(i,1); carritoTotal -= p.precio; actualizarUI(); }); li.appendChild(eliminar); carritoLista.appendChild(li); }); totalEl.textContent = formatearPrecio(carritoTotal); carritoContador.textContent = String(carrito.length); carritoVacioMensaje.style.display = carrito.length===0 ? 'block' : 'none'; } carritoIcon.addEventListener('click', ()=>{ carritoContainer.classList.toggle('open'); }); cerrarCarrito.addEventListener('click', ()=> carritoContainer.classList.remove('open')); vaciarCarritoButton.addEventListener('click', ()=>{ carrito = []; carritoTotal = 0; actualizarUI(); }); \/\/ Enviar por WhatsApp enviarWhatsAppButton.addEventListener('click', (e)=>{ e.preventDefault(); if (carrito.length===0){ alert('El carrito est\u00e1 vac\u00edo'); return; } const carritoTexto = carrito.map(p => `${p.nombre} - $${formatearPrecio(p.precio)}`).join('\\n'); const mensajeWhatsApp = 'Mi Pedido:\\n' + carritoTexto + '\\nTOTAL: $' + formatearPrecio(carritoTotal) + '*'; \/\/ Reemplaza el n\u00famero con el destino que quieras (incluye c\u00f3digo de pa\u00eds, sin +) const telefono = '34603890220'; const url = `https:\/\/wa.me\/${telefono}?text=${encodeURIComponent(mensajeWhatsApp)}`; window.open(url, '_blank'); }); \/\/ Asignar eventos a botones \"Agregar\" reci\u00e9n creados document.querySelectorAll('.agregar').forEach(button => { button.addEventListener('click', ()=>{ const nombre = button.dataset.nombre || ''; const precio = Number(button.dataset.precio) || 0; const idx = button.dataset.index; \/\/ Validar selects en su bloque const selects = document.querySelectorAll(`#atributo${idx} select`); for (const s of selects){ if (s.value===''){ alert('Por favor, selecciona todas las opciones antes de agregar al carrito.'); s.focus(); return; } } let nombreConVariantes = nombre; for (const s of selects){ nombreConVariantes += ` - ${s.previousElementSibling ? s.previousElementSibling.textContent.replace(':','') : 'opci\u00f3n'}: ${s.value}`; } \/\/ A\u00f1adir vibraci\u00f3n visual al icono carritoIcon.animate([{transform:'scale(1)'},{transform:'scale(1.08)'},{transform:'scale(1)'}],{duration:350}); carrito.push({nombre:nombreConVariantes,precio}); carritoTotal += precio; actualizarUI(); \/\/ Abrir carrito en pantallas grandes if (window.innerWidth > 768) carritoContainer.classList.add('open'); }); }); \/\/ Inicializar estado actualizarUI(); } <\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cat\u00e1logo de Productos \/ Pedidos por WhatsApp<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-39004","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Cat\u00e1logo de Productos - Hako IT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hakoit.com\/test-productos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cat\u00e1logo de Productos - Hako IT\" \/>\n<meta property=\"og:description\" content=\"Cat\u00e1logo de Productos \/ Pedidos por WhatsApp\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hakoit.com\/test-productos\/\" \/>\n<meta property=\"og:site_name\" content=\"Hako IT\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hakoit\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-20T10:47:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hakoit.com\/wp-content\/uploads\/2019\/07\/Hako-Consultori\u0301aIT.png\" \/>\n\t<meta property=\"og:image:width\" content=\"220\" \/>\n\t<meta property=\"og:image:height\" content=\"215\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Hako_it\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/test-productos\\\/\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/test-productos\\\/\",\"name\":\"Cat\u00e1logo de Productos - Hako IT\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#website\"},\"datePublished\":\"2025-10-18T21:21:39+00:00\",\"dateModified\":\"2025-10-20T10:47:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/test-productos\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hakoit.com\\\/test-productos\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/test-productos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/www.hakoit.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cat\u00e1logo de Productos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#website\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/\",\"name\":\"Hako IT\",\"description\":\"Soluciones de Software: Desarrollo - Consultor\u00eda de IT - Analytics -Marketing Digital. \u2713 Proponemos soluciones\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hakoit.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#organization\",\"name\":\"Hako IT\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Hako-Consultori\u0301a-1.png\",\"contentUrl\":\"https:\\\/\\\/www.hakoit.com\\\/wp-content\\\/uploads\\\/2019\\\/02\\\/Hako-Consultori\u0301a-1.png\",\"width\":597,\"height\":584,\"caption\":\"Hako IT\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hakoit.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hakoit\\\/\",\"https:\\\/\\\/x.com\\\/Hako_it\",\"https:\\\/\\\/www.instagram.com\\\/hako_it\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@hako-it\"]}]}<\/script>\n","yoast_head_json":{"title":"Cat\u00e1logo de Productos - Hako IT","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hakoit.com\/test-productos\/","og_locale":"es_ES","og_type":"article","og_title":"Cat\u00e1logo de Productos - Hako IT","og_description":"Cat\u00e1logo de Productos \/ Pedidos por WhatsApp","og_url":"https:\/\/www.hakoit.com\/test-productos\/","og_site_name":"Hako IT","article_publisher":"https:\/\/www.facebook.com\/hakoit\/","article_modified_time":"2025-10-20T10:47:52+00:00","og_image":[{"width":220,"height":215,"url":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2019\/07\/Hako-Consultori\u0301aIT.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@Hako_it","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.hakoit.com\/test-productos\/","url":"https:\/\/www.hakoit.com\/test-productos\/","name":"Cat\u00e1logo de Productos - Hako IT","isPartOf":{"@id":"https:\/\/www.hakoit.com\/#website"},"datePublished":"2025-10-18T21:21:39+00:00","dateModified":"2025-10-20T10:47:52+00:00","breadcrumb":{"@id":"https:\/\/www.hakoit.com\/test-productos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hakoit.com\/test-productos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hakoit.com\/test-productos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.hakoit.com\/"},{"@type":"ListItem","position":2,"name":"Cat\u00e1logo de Productos"}]},{"@type":"WebSite","@id":"https:\/\/www.hakoit.com\/#website","url":"https:\/\/www.hakoit.com\/","name":"Hako IT","description":"Soluciones de Software: Desarrollo - Consultor\u00eda de IT - Analytics -Marketing Digital. \u2713 Proponemos soluciones","publisher":{"@id":"https:\/\/www.hakoit.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hakoit.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.hakoit.com\/#organization","name":"Hako IT","url":"https:\/\/www.hakoit.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.hakoit.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2019\/02\/Hako-Consultori\u0301a-1.png","contentUrl":"https:\/\/www.hakoit.com\/wp-content\/uploads\/2019\/02\/Hako-Consultori\u0301a-1.png","width":597,"height":584,"caption":"Hako IT"},"image":{"@id":"https:\/\/www.hakoit.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hakoit\/","https:\/\/x.com\/Hako_it","https:\/\/www.instagram.com\/hako_it\/","https:\/\/www.youtube.com\/@hako-it"]}]}},"_links":{"self":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages\/39004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/comments?post=39004"}],"version-history":[{"count":21,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages\/39004\/revisions"}],"predecessor-version":[{"id":39054,"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/pages\/39004\/revisions\/39054"}],"wp:attachment":[{"href":"https:\/\/www.hakoit.com\/hako-api\/wp\/v2\/media?parent=39004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}