Adding Advanced Custom Fields Google Maps to WooCommerce Quick View Pro

Screenshot of a WooCommerce Quick View Pro modal displaying an Advanced Custom Fields Google Maps field

One of the (many, many) cool things about Elliot Condon’s Advanced Custom Fields (ACF) plugin is the ability to add Google Maps to a custom field. Implementation is fairly straightforward, once you pick up your Google developer’s API key.

Just One Small Problem

We ran into a problem recently when trying to display the contents of a custom Google Maps field in a modal.

Now, there is a documented issue where Google Maps won’t display in a modal after it’s been revealed using .show. There are potential solutions available (here and here, for example). HOWEVER, those apply to modals that are created when the DOM is rendered and remain hidden until a show action is executed.

Unfortunately, those solutions don’t work for the WooCommerce Quick View Pro plugin. While this plugin is awesome, it doesn’t create the modal until an action is fired, such as when a user clicks a button. However, ACF relies on the modal having already been created.

So, when you add Google Maps using Advanced Custom Fields, you get a box with a grey border… and no map:

Screenshot of Advanced Custom Fields Google Maps field with grey-bordered box and no map
This is where the Google Map should be displayed

I banged my head against the wall repeatedly over the course of four days trying to figure this one out!

In the end, as is so often the case, the fix ended up being pretty easy.

The problem is the ACF jQuery file is loaded in the DOM before the modal is created. The solution for Quick View Pro is to load that jQuery after we generate the HTML.

Let’s assume you’re using a function to generate that HTML. Modify your function to call the jQuery file:

This function assumes you’ve named the ACF jQuery file “bsd-maps.js.” Substitute your own name here.

Now, upload your functions.php file, refresh your page, and click the View Details link. Your map should now be displayed!

Screenshot of a WooCommerce Quick View Pro modal displaying an Advanced Custom Fields Google Maps field
Success! And yes, we (heavily) modified the Quick View Pro modal!

Demo

You can view a demo of this by clicking the “See Details” link for one of our on-site demo classes on our test site. Here’s the link: https://wp.battlestardigital.com/quick-view-pro-test-page/. No guarantees we’ll keep the page there forever, though… it is, after all, a test site!

If you ran into a similar problem with the Quick View Pro plugin, this should work for you.


Related Articles

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
CONTACT US

Drop us a line

Schedule a complimentary consultation today.
0
Would love your thoughts, please comment.x
()
x