Sé que hay varios hilos sobre esto en el desbordamiento de la pila, pero parece que no puedo hacer que esto funcione, ¡y debemos comenzar a funcionar en los próximos días!
Tenemos una tienda Shopify en la que usamos un fancybox (v4+) para recopilar algunos datos de los clientes en la etapa del carrito, y necesito agregar un botón en la parte inferior de lo que puede ser un desplazamiento largo (presentado como acordeones en el fancybox) para que que, especialmente para los usuarios de dispositivos móviles, no es necesario desplazarse hasta la parte superior para cerrar la ventana (y tiene más sentido tener un botón Guardar/Enviar).
Fancybox se llama desde cart-template.liquid que contiene el HTML del carrito usando esta línea:
<a data-fancybox = "prefs" data-src="#preferences-for-lb">Have preferences? Click here to let us know.</a>Esto luego llama a la identificación de div "preferencias-para-lb" que está anidada en una pantalla: ninguno div en la misma página del carrito. Tal como está, el HTML interno del div se completa a partir de un fragmento de Shopify (una forma de mantener el código HTML separado e importarlo para mantener los archivos más pequeños y permitir su reutilización), pero no creo que eso deba importar ya que el HTML se sustituye en la carga de la página , antes de llamar a fancybox.
Cuando agrego un botón para cerrar el fancybox, he intentado agregar muchas variaciones diferentes en $.fancybox.close(); adjunto a eventos onClick en línea y hrefs basados en artículos aquí, incluido parent.$.fancybox.close (no creo que se necesite parent ya que el contenido está en línea en la página del carrito que llama a fancybox). También probé varios otros scripts JQuery/JS, por ejemplo:
¿Cómo cerrar Fancybox con un clic de botón?
Cierre jQuery Fancybox (manualmente) con un enlace
etc...
Donde hay una respuesta de la consola me sale el siguiente error:
cart:1693 TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'cerrar') en HTMLAnchorElement.onclick
Fancybox se llama a través de CDN como se indica a continuación en mi theme.liquid (piense en esto como un contenedor HTML para todas las demás páginas) que debería estar disponible para todas las páginas (y claramente la llamada abierta está funcionando)
<head> .... <!-- lightbox added--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" <!-- Jquery added--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>Realmente no estoy seguro de adónde ir desde aquí, mi nivel de codificación es bastante básico y no he usado JQuery antes, ¡así que estoy muy agradecido por cualquier ayuda!
Para Fancybox v4, no necesita jQuery, use el método API close() ( https://fancyapps.com/docs/ui/fancybox/api ):
Fancybox.close()