I know there are several threads on this on stack overflow, but I can't seem to get this working, and we are due to go live in the next couple of days!
We have Shopify store where we are using a fancybox (v4+) to collect some data from customers at the cart stage, and I need to add a button at the bottom of what can be a long scroll (presented as accordions in the fancybox) so that for mobile users especially don't need to scroll to the top to close the window (and it just makes more sense to have a save/submit button).
The Fancybox is called from the cart-template.liquid which holds the cart HTML using this line:
<a data-fancybox = "prefs" data-src="#preferences-for-lb">Have preferences? Click here to let us know.</a>
This then calls the div id "preferences-for-lb" which is nested in a display:none div on the same cart page. As it stands the div's inner HTML is populated from a shopify snippet (a way of keeping HTML code separate an importing to keep files smaller and allow reuse), but I don't think that should matter as the HTML is substituted in at page load, before the fancybox is called.
When I add button to close the fancybox I have tried to add many different variations on $.fancybox.close(); attached to inline onClick events and a hrefs based on articles here, including parent.$.fancybox.close (don't believe parent should be needed as the content is inline in the cart page which calls the fancybox). I have also tried various other JQuery/JS scripts, e.g:
How to close Fancybox from a button click?
Close jQuery Fancybox (manually) with a link
etc...
Where there is a console response I get the following error:
cart:1693 Uncaught TypeError: Cannot read properties of undefined (reading 'close') at HTMLAnchorElement.onclick
Fancybox is called via CDN as per below in my theme.liquid (think of this as a HTML wrapper for all other pages) which should make it available to all pages (and clearly the open call is working)
<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>
I am really not sure where to go from here, my coding level is pretty basic and I have not used JQuery before, so really grateful for any help!
