{"title":"Lente","description":"{% comment %}\n  Plantilla \"Tipo de Índice\" con Drawer (al estilo 2da imagen)\n  - Muestra la colección \"lente\" (cambia el handle si difiere).\n  - Cada producto se ve en una fila: icono a la izquierda, texto al centro, precio + radio a la derecha.\n  - Al pulsar \"Próximo\", se agrega la variante al carrito y se va a \/cart.\n{% endcomment %}\n\n{% layout 'page' %}\n\n\u003c!-- Overlay oscuro --\u003e\n\u003cdiv id=\"drawerOverlay\" class=\"drawer-overlay\"\u003e\u003c\/div\u003e\n\n\u003c!-- Drawer lateral --\u003e\n\u003cdiv id=\"drawerLente\" class=\"drawer\"\u003e\n  \u003cdiv class=\"drawer-header\"\u003e\n    \u003ch2\u003eTipo de Índice\u003c\/h2\u003e\n    \u003cbutton id=\"cerrarDrawerBtn\" class=\"close-drawer\"\u003e×\u003c\/button\u003e\n  \u003c\/div\u003e\n  \u003cp\u003eSelecciona el índice que deseas:\u003c\/p\u003e\n\n  \u003c!-- Listado de productos --\u003e\n  {% assign coleccion_indice = collections['lente'] %}\n  {% if coleccion_indice and coleccion_indice.products.size \u0026gt; 0 %}\n    \u003cdiv id=\"listaIndices\" class=\"indice-list\"\u003e\n      {% for prod in coleccion_indice.products %}\n        {% assign primerVariante = prod.variants.first %}\n        \n        \u003c!-- Fila para cada producto --\u003e\n        \u003clabel class=\"indice-item\"\u003e\n          \u003c!-- Radio para seleccionarlo. Hacemos 'visibility:hidden' pero manteniendo el espacio,\n               o 'opacity:0;width:0' para ocultarlo. Queremos un clic en toda la fila. --\u003e\n          \u003cinput type=\"radio\" name=\"indiceSeleccionado\" style=\"position:absolute; opacity:0; width:1px; height:1px;\"\u003e\n          \u003c!-- Contenedor fila --\u003e\n          \u003cdiv class=\"item-content\"\u003e\n            \u003c!-- Parte izquierda: icono\/imágen del producto --\u003e\n            \u003cdiv class=\"item-left\"\u003e\n              {% if prod.featured_image %}\n                \u003cimg src=\"{{%20prod.featured_image.src%20|%20img_url:%20'60x60'%20}}\" alt=\"{{ prod.title }}\" class=\"indice-icon\"\u003e\n              {% else %}\n                \u003cdiv class=\"indice-icon-placeholder\"\u003e\n                  \u003csvg width=\"36\" height=\"36\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u003e\n                    \u003ccircle cx=\"18\" cy=\"18\" r=\"10\"\u003e\u003c\/circle\u003e\n                  \u003c\/svg\u003e\n                \u003c\/div\u003e\n              {% endif %}\n              \u003cdiv class=\"item-text\"\u003e\n                \u003ch3 class=\"item-title\"\u003e{{ prod.title }}\u003c\/h3\u003e\n                \u003c!-- Opcional: una descripción cortita --\u003e\n                \u003cp class=\"item-desc\"\u003e{{ prod.description | truncate: 80 }}\u003c\/p\u003e\n              \u003c\/div\u003e\n            \u003c\/div\u003e\n            \n            \u003c!-- Parte derecha: precio y, si hay, un select o hidden variant --\u003e\n            \u003cdiv class=\"item-right\"\u003e\n              \u003cdiv class=\"item-price\"\u003e\n                \u003c!-- Precio base del producto (o usar la 1ra variante) --\u003e\n                \u003cspan\u003e{{ prod.price | money }}\u003c\/span\u003e\n              \u003c\/div\u003e\n              \u003c!-- Si hay múltiples variantes, un \u003cselect\u003e; de lo contrario, un span con data-variant-id --\u003e\n              {% if prod.variants.size \u0026gt; 1 %}\n                \u003cselect class=\"variantSelect\"\u003e\n                  {% for var in prod.variants %}\n                    \u003coption value=\"{{ var.id }}\"\u003e\n                      {{ var.title }} — {{ var.price | money }}\n                    \u003c\/option\u003e\n                  {% endfor %}\n                \u003c\/select\u003e\n              {% else %}\n                \u003cspan class=\"onlyVariant\" data-variant-id=\"{{ primerVariante.id }}\" style=\"display:none;\"\u003e\u003c\/span\u003e\n              {% endif %}\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/label\u003e\n      {% endfor %}\n    \u003c\/div\u003e\n\n    \u003c!-- Botón “Próximo” --\u003e\n    \u003cdiv class=\"drawer-footer\"\u003e\n      \u003cbutton id=\"btnProximo\" class=\"btn-proximo\"\u003ePróximo\u003c\/button\u003e\n    \u003c\/div\u003e\n  {% else %}\n    \u003cp style=\"padding:1rem;\"\u003eNo hay productos en la colección \"lente\".\u003c\/p\u003e\n  {% endif %}\n\u003c\/div\u003e\n\n\u003c!-- ESTILOS CSS --\u003e\n\u003cstyle\u003e\n\/* Overlay *\/\n.drawer-overlay {\n  display:none;\n  position:fixed;\n  top:0; left:0;\n  width:100vw; height:100vh;\n  background-color: rgba(0,0,0,0.5);\n  z-index:9998;\n}\n\/* Drawer *\/\n.drawer {\n  position:fixed;\n  top:0; right:-400px;\n  width:400px; height:100vh;\n  background:#fff; z-index:9999;\n  transition: right 0.3s ease;\n  display:flex; flex-direction:column;\n  padding:1rem;\n  box-shadow:-2px 0 5px rgba(0,0,0,0.1);\n}\n.drawer.open {\n  right:0; \/* se muestra *\/\n}\n.drawer-header {\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  margin-bottom:0.5rem;\n}\n.close-drawer {\n  background:transparent; border:none;\n  font-size:1.5rem; cursor:pointer;\n}\n\/* Lista de productos =\u003e estilo filas *\/\n.indice-list {\n  flex:1;\n  overflow-y:auto;\n  display:flex; \n  flex-direction:column;\n  gap:1rem;\n}\n\/* Cada 'fila' de producto *\/\n.indice-item {\n  display:block;\n  border:1px solid #ddd;\n  border-radius:8px;\n  padding:0.5rem;\n  cursor:pointer;\n  transition:border-color 0.2s, box-shadow 0.2s;\n}\n.indice-item:hover {\n  border-color:#aaa;\n  box-shadow:0 2px 8px rgba(0,0,0,0.06);\n}\n\/* Resaltar si se marca *\/\ninput[type=\"radio\"]:checked + .item-content {\n  outline:2px solid #4f46e5;\n  outline-offset:-0.5rem;\n  background-color:#faf9ff;\n  border-radius:6px;\n}\n\/* Contenido en la fila *\/\n.item-content {\n  display:flex;\n  justify-content:space-between;\n  align-items:center;\n  gap:1rem;\n}\n\/* Parte izquierda: icono + texto *\/\n.item-left {\n  display:flex;\n  align-items:center;\n  gap:0.5rem;\n}\n.indice-icon {\n  width:60px; height:60px;\n  border-radius:50%;\n  object-fit:cover;\n  border:2px solid #eee;\n}\n.indice-icon-placeholder {\n  width:60px; height:60px;\n  border-radius:50%;\n  background:#f2f2f2;\n  display:flex; align-items:center; justify-content:center;\n}\n.item-text {\n  display:flex;\n  flex-direction:column;\n}\n.item-title {\n  margin:0; font-size:1rem; font-weight:600;\n}\n.item-desc {\n  margin:0; font-size:0.85rem; color:#555;\n}\n\/* Parte derecha: precio + \u003cselect\u003e (si hay) *\/\n.item-right {\n  display:flex;\n  align-items:center; \n  gap:0.5rem; \/* entre precio y select *\/\n}\n.item-price span {\n  font-weight:bold; color:#333;\n}\n\/* Footer con botón *\/\n.drawer-footer {\n  border-top:1px solid #ddd;\n  padding-top:1rem;\n  text-align:right;\n}\n.btn-proximo {\n  background:#4f46e5;\n  color:#fff;\n  border:none;\n  border-radius:6px;\n  padding:0.7rem 1.2rem;\n  cursor:pointer;\n  transition:background 0.3s;\n}\n.btn-proximo:hover {\n  background:#4338ca;\n}\n\u003c\/style\u003e\n\n\u003c!-- JS: Abre drawer, cierra con overlay, “Próximo” =\u003e add to cart --\u003e\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n  const overlay = document.getElementById('drawerOverlay');\n  const drawer = document.getElementById('drawerLente');\n  const btnCerrar = document.getElementById('cerrarDrawerBtn');\n  const btnProximo = document.getElementById('btnProximo');\n  const listaIndices = document.getElementById('listaIndices');\n\n  \/\/ Abrir drawer al cargar\n  drawer.classList.add('open');\n  overlay.style.display = 'block';\n\n  \/\/ Botón “X” =\u003e cierra\n  btnCerrar.addEventListener('click', () =\u003e {\n    drawer.classList.remove('open');\n    overlay.style.display = 'none';\n  });\n\n  \/\/ Clic en overlay =\u003e cierra\n  overlay.addEventListener('click', (e) =\u003e {\n    if(e.target===overlay){\n      drawer.classList.remove('open');\n      overlay.style.display='none';\n    }\n  });\n\n  \/\/ “Próximo”\n  btnProximo.addEventListener('click', async () =\u003e {\n    \/\/ 1. Verificar un radio esté marcado\n    const radioSel = listaIndices.querySelector('input[name=\"indiceSeleccionado\"]:checked');\n    if(!radioSel){\n      alert('Por favor, selecciona un índice antes de continuar.');\n      return;\n    }\n    \/\/ 2. Buscar item-content contenedor\n    const card = radioSel.closest('.indice-item');\n    if(!card){\n      alert('Error: no se encontró la tarjeta del producto.');\n      return;\n    }\n    \/\/ 3. Determinar variantId\n    let variantId=null;\n    const selectVar=card.querySelector('.variantSelect');\n    if(selectVar){\n      variantId=selectVar.value;\n    } else {\n      const onlyVar=card.querySelector('.onlyVariant');\n      if(onlyVar) variantId=onlyVar.getAttribute('data-variant-id');\n    }\n    if(!variantId){\n      alert('No se encontró la variante para este índice.');\n      return;\n    }\n\n    \/\/ 4. AJAX a \/cart\/add.js\n    try{\n      const formData=new FormData();\n      formData.append('id',variantId);\n      formData.append('quantity',1);\n\n      const resp=await fetch('\/cart\/add.js',{\n        method:'POST',\n        body:formData\n      });\n      if(!resp.ok) throw new Error(`HTTP error: ${resp.status}`);\n\n      \/\/ 5. Redirigir a \/cart\n      window.location.href='\/cart';\n    } catch(err){\n      console.error(err);\n      alert('Error al agregar al carrito. Intente de nuevo.');\n    }\n  });\n});\n\u003c\/script\u003e\n","products":[{"product_id":"1-61-indice-alto-progressive-clear_standard-2","title":"1.61 Índice alto","description":"*Más delgado que 1,57 Índice medio\n\n*Para prescripción moderada","brand":"LensAdvizor","offers":[{"title":"Default Title","offer_id":44235564253362,"sku":"","price":1475.0,"currency_code":"DOP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0513\/7852\/0242\/files\/94be43fe-937.png?v=1715085200"},{"product_id":"lentes-de-gafas-estandar-copia-1","title":"Indice 1.61 alto","description":"\u003cdiv data-v-11dbd15f=\"\" class=\"lens-type-name\"\u003e\u003c\/div\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"lens-describe\"\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\n\u003cp data-v-11dbd15f=\"\"\u003e\u003cspan\u003eMás delgado que 1,57 Índice medio\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\n\u003cp data-v-11dbd15f=\"\"\u003e\u003cspan\u003ePara prescripción moderada\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Óptica Keona","offers":[{"title":"Default Title","offer_id":45319537033394,"sku":null,"price":650.0,"currency_code":"DOP","in_stock":true}]},{"product_id":"indice-1-61-alto-copia","title":"1.61 Índice alto (Pro) De primera calidad","description":"\u003cdiv data-v-11dbd15f=\"\" class=\"lens-type-name\"\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"lens-type-name\"\u003e\u003c\/div\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"lens-describe\"\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\n\u003cp data-v-11dbd15f=\"\"\u003e\u003cspan\u003eSerie MR™ para lentes más delgadas y livianas\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\n\u003cp data-v-11dbd15f=\"\"\u003e\u003cspan\u003eAlta resistencia al impacto y a la carga estática\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\n\u003cp data-v-11dbd15f=\"\"\u003e\u003cspan\u003eBuena resistencia a la tracción\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Óptica Keona","offers":[{"title":"Default Title","offer_id":45319538213042,"sku":null,"price":650.0,"currency_code":"DOP","in_stock":true}]},{"product_id":"1-57-indice-medio","title":"1.57 Índice medio","description":"\u003cdiv data-v-11dbd15f=\"\" class=\"lens-type-name\"\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"lens-type-name\"\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"lens-describe\"\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\u003c\/div\u003e\n\u003cdiv data-v-11dbd15f=\"\" class=\"text-item\"\u003e\n\u003cp data-v-11dbd15f=\"\"\u003e\u003cspan\u003e1.57 Índice medio\u003c\/span\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"Óptica Keona","offers":[{"title":"Default Title","offer_id":45319539130546,"sku":null,"price":0.0,"currency_code":"DOP","in_stock":true}]}],"url":"https:\/\/www.opticakeona.com\/collections\/lente.oembed","provider":"Óptica Keona","version":"1.0","type":"link"}