Modals With Facet WP

Support
#1

I have a Looper displaying a grid of Modal elements (restaurants). I am using FacetWP for live filtering. The modals function properly on first load, but if you select a filter term and then click a modal, it does not give the correct pop-up. It gives the pop-up for the item that was there before filtering. If you refresh the page with the new filter in the URL, the modals work correctly. I suspect this is because the html for the actual pop-up is not within the container that facet-wp is affecting.

Can you point me in the right direction so that modals work correctly even after selecting a filter term?

Thanks

#2

Hello Fidelis,

Thanks for writing in! Is the contents of the Modal connected with the Looper? You may need to use URL parameters. If your FacetWP filtering is using AJAX, you would need to have custom coding so that the AJAX events will also change the contents of the Modal. Be advised that custom AJAX coding is beyond the scope of our support under our Support Policy. You might need to hire a 3rd party developers to do this customizations for you.

Meanwhile, we would also love to check out your page and see how you have set up those Looper and Modal elements. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#3

Ok awesome! thanks @ruenel

The column is the consumer and then it has the modal and various elements within it. I am not using modal as a consumer because I needed more than just a headline and graphic setup. You will see that the modal is positioned absolute so that it covers the whole column. There are various term loopers within the column as well.

Secure note added

I am so thankful for you taking the time :slight_smile:

Josh

#4

Hello Fidelis,

I have logged in and investigated the page. Please be aware that FacetWP is not fully supported with the Looper feature in the theme nor the plugin itself supports Loopers. As I have analyzed, FacetWP plugin uses AJAX to fetch and load the post items while the Looper feature on the page needs to reload the page to dynamically fetch and load post items. This is why on first load of the page, the modals has the correct data. As soon as your click any of the FacetWP displayed taxonomies, since the page does not reload, the modal still has the same contents. Regretfully what you are trying to accomplish cannot work with this set up. If you need sorting or filtering options, perhaps this Looper with Sorting/Filtering demonstration can help you:

Best Regards.

#5

Ok thank you for investigating that for me @ruenel!
I have watched that video but unfortunately it only applies to sorting and not filtering.

I have implemented an alternate method with the modals by using the Toggle Hash feature and the correct popup loads. However the issue here is that the #hashtag in the URL does not go away when you close the modal. The issue with this is that sometimes the modal reopens unexpectedly because the URL is not clearing.

Do you know of a way to remove the hash from the URL when you close the modal?

You can see it in practice on the home page now.

#6

Hey Fidelis,

Regretfully, that is not possible. That would require custom development, which, as you might already know, is beyond the scope of our support.

If you need a custom solution, please check out our Elite service here: https://theme.co/elite

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.