{"product_id":"sandalias-hilo","title":"Sandalias Hilo","description":"\u003cdiv class=\"c-sw\"\u003e\n  \u003cspan class=\"sw-lbl\"\u003eColor - \u003cspan id=\"selected-color-name\"\u003eBeige\u003c\/span\u003e\u003c\/span\u003e\n  \u003cdiv class=\"sg-sw\"\u003e\n    \u003cbutton type=\"button\" class=\"sw-btn active\" data-color=\"Beige\" data-slide-index=\"1\" style=\"--swatch-bg: #caab84;\" title=\"Beige\"\u003e\u003c\/button\u003e\n    \n    \u003cbutton type=\"button\" class=\"sw-btn\" data-color=\"Negro\" data-slide-index=\"4\" style=\"--swatch-bg: #1a1a1a;\" title=\"Negro\"\u003e\u003c\/button\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n  .c-sw {\n    margin: 20px 0;\n  }\n  .sw-lbl {\n    display: block;\n    font-size: 14px; \n    color: #2b2b2b;\n    margin-bottom: 12px;\n    font-family: \"New York\", -apple-system-serif, \"Playfair Display\", \"Georgia\", \"Times New Roman\", serif;\n    font-weight: 400;\n    letter-spacing: 0.1px;\n    -webkit-font-smoothing: antialiased;\n  }\n  #selected-color-name {\n    font-weight: 400;\n  }\n  .sg-sw {\n    display: flex;\n    gap: 12px;\n  }\n  .sw-btn {\n    width: 44px; \n    height: 44px;\n    border-radius: 9px;\n    border: 1px solid transparent;\n    background: var(--swatch-bg);\n    cursor: pointer;\n    position: relative;\n    box-sizing: border-box;\n    padding: 0;\n  }\n  .sw-btn.active {\n    border: 1.5px solid #8c867a !important; \n    box-shadow: inset 0 0 0 3px #ffffff;\n  }\n  .sw-btn:focus {\n    outline: none;\n  }\n\u003c\/style\u003e\n\n\u003cscript\u003e\n  (function() {\n    function inicializarSelectorColor() {\n      \/\/ Función para mover las imágenes del carrusel\n      function moverCarruselPorPosicion(numeroFoto) {\n        const miniaturas = document.querySelectorAll('.product__thumbnail-item button, .thumbnail-list__item button, .product__thumb, .thumbnail-item, .product-single__thumbnail');\n        \n        if (miniaturas \u0026\u0026 miniaturas.length \u003e= numeroFoto) {\n          miniaturas[numeroFoto - 1].click();\n        } else {\n          const diapositivas = document.querySelectorAll('.product__media-item, .swiper-slide, .slick-slide, .product-main-slide');\n          if (diapositivas \u0026\u0026 diapositivas.length \u003e= numeroFoto) {\n            diapositivas[numeroFoto - 1].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n          }\n        }\n      }\n\n      \/\/ Oculta constantemente el selector nativo original del tema\n      function ocultarSelectorNativoColor() {\n        const etiquetas = document.querySelectorAll('label, span, legend, h4, .form__label');\n        etiquetas.forEach(el =\u003e {\n          const texto = (el.innerText || \"\").toLowerCase().trim();\n          if (texto === 'color' || texto.includes('color -') || texto.includes('beige')) {\n            const contenedor = el.closest('.product-form__input, .variant-wrapper, fieldset, div[class*=\"variant\"]');\n            if (contenedor \u0026\u0026 !contenedor.classList.contains('c-sw')) {\n              contenedor.style.setProperty('display', 'none', 'important');\n            }\n          }\n        });\n      }\n      setInterval(ocultarSelectorNativoColor, 100);\n\n      \/\/ Sincronización inversa: Mantiene el botón activo correcto si Shopify refresca la vista\n      function actualizarBotonesVisuales() {\n        const opcionesNativas = document.querySelectorAll('.product-form__input input:checked, [class*=\"variant\"] select, .swatch-element input:checked');\n        let colorActivoNativo = \"\";\n\n        opcionesNativas.forEach(el =\u003e {\n          if (el.tagName === 'SELECT') {\n            colorActivoNativo = el.options[el.selectedIndex]?.text || el.value || \"\";\n          } else {\n            colorActivoNativo = el.value || el.getAttribute('data-value') || \"\";\n          }\n        });\n\n        if (colorActivoNativo) {\n          colorActivoNativo = colorActivoNativo.trim().toLowerCase();\n          document.querySelectorAll('.sw-btn').forEach(btn =\u003e {\n            const btnColor = btn.dataset.color.trim().toLowerCase();\n            if (btnColor === colorActivoNativo) {\n              if (!btn.classList.contains('active')) {\n                document.querySelectorAll('.sw-btn').forEach(x =\u003e x.classList.remove('active'));\n                btn.classList.add('active');\n                document.getElementById('selected-color-name').textContent = btn.dataset.color;\n              }\n            }\n          });\n        }\n      }\n      document.addEventListener('change', actualizarBotonesVisuales);\n      setInterval(actualizarBotonesVisuales, 300);\n\n      \/\/ Evento principal al hacer clic en tus botones personalizados\n      document.addEventListener('click', function(e) {\n        const boton = e.target.closest('.sw-btn');\n        if (!boton) return;\n        \n        e.preventDefault();\n        \n        document.querySelectorAll('.sw-btn').forEach(x =\u003e x.classList.remove('active'));\n        boton.classList.add('active');\n        document.getElementById('selected-color-name').textContent = boton.dataset.color;\n        \n        \/\/ Mueve el carrusel a su foto (1 o 4)\n        moverCarruselPorPosicion(parseInt(boton.getAttribute('data-slide-index')));\n\n        \/\/ Sincroniza el cambio hacia Shopify nativo\n        const valorLimpio = boton.dataset.color.trim();\n        const opcionesNativas = document.querySelectorAll('.product-form__input input, .product-form__input label, .swatch-element, [class*=\"variant\"] option, [class*=\"swatch\"], [class*=\"color-swatch\"]');\n        \n        opcionesNativas.forEach(el =\u003e {\n          const textoEl = (el.innerText || el.value || el.getAttribute('aria-label') || el.getAttribute('data-value') || \"\").trim();\n          \n          if (\/\\d\/.test(textoEl) \u0026\u0026 textoEl.length \u003c 4) return; \/\/ Salta tallas\n\n          if (textoEl === valorLimpio || textoEl.toLowerCase() === valorLimpio.toLowerCase()) {\n            if (el.tagName === 'INPUT') {\n              el.checked = true;\n              el.dispatchEvent(new Event('change', { bubbles: true }));\n            } else if (el.tagName === 'OPTION') {\n              let select = el.closest('select');\n              if(select) {\n                select.value = el.value;\n                select.dispatchEvent(new Event('change', { bubbles: true }));\n              }\n            } else {\n              el.click();\n            }\n          }\n        });\n      });\n    }\n\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', inicializarSelectorColor);\n    } else {\n      inicializarSelectorColor();\n    }\n  })();\n\u003c\/script\u003e","brand":"Mi tienda","offers":[{"title":"35.5 \/ Beige","offer_id":57668079321470,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"35.5 \/ Negro","offer_id":57668079354238,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"36 \/ Beige","offer_id":57668079387006,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"36 \/ Negro","offer_id":57668079419774,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"37 \/ Beige","offer_id":57668079452542,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"37 \/ Negro","offer_id":57668079485310,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"38 \/ Beige","offer_id":57668079518078,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"38 \/ Negro","offer_id":57668079550846,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"39 \/ Beige","offer_id":57668079583614,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":true},{"title":"39 \/ Negro","offer_id":57668079616382,"sku":null,"price":17.99,"currency_code":"EUR","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1008\/4804\/2366\/files\/ChatGPTImage11jul2026_23_22_56.png?v=1783805585","url":"https:\/\/luzdemoda.com\/products\/sandalias-hilo","provider":"LuzDeModa","version":"1.0","type":"link"}