[Resolved] Bug + Fix: wpv-woo-product-image Lightbox breaks in Ajax paginated Views

[Author]

Posts

[Brian]

I just wanted to report a bug with Views and the WooCommerce Views plugins' [wpv-woo-product-image] shortcode, as well as a temporary fix for anyone else running into this problem.

When using the [wpv-woo-product-image] shortcode (which displays the native Woocommerce Product Image with a Lightbox/Enlarge link tag) in the Content Template for a View paginated using Ajax, the clicked image fails to load in a lightbox/modal and links directly to the image instead. It's important to note that this only occurs on pages being loaded by Ajax after the initial page load - so in most cases page 2 and on. The first page of results will work fine.

The issue here is that a prettyPhoto function that runs on page-load is a requirement for the [wpv-woo-product-image] shortcode to function, however this function does not run after loading an additional pages using Ajax pagination.

This can be amended by simply by adding the following code to the 'JS editor' tab of the 'Filter Editor' section in your View, as shown in the attached image.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
  
  !function(a){a(function(){a("a.zoom").prettyPhoto({hook:"data-rel",social_tools:!1,theme:"pp_woocommerce",horizontal_padding:20,opacity:.8,deeplinking:!1}),a("a[data-rel^='prettyPhoto']").prettyPhoto({hook:"data-rel",social_tools:!1,theme:"pp_woocommerce",horizontal_padding:20,opacity:.8,deeplinking:!1})})}(jQuery);
	
});

The above code runs each time Ajax Pagination is completed (ie, clicking next page on an Ajax paginated View) and simply re-runs the prettyPhoto function needed to check the page for any links to images with the data-rel="prettyPhoto" attribute/property in the link.

I hope this helps anyone else running into this issue as well as with future versions of the Toolset plugins. As always, can't say enough about the Toolset system and team.

Thanks,
Cameron B.
(On Behalf of Brian)

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Cameron

Thanks for posting this and sharing your solution.

This has come up before, and related issues where functionality is lost after ajax updates, which happens because the relevant part of the DOM is recreated and the original elements that libraries or events were attached to are lost and they need re-attaching to the replacement DOM elements.

In my case with prettyPhoto if I recall correctly I simply ran the init function again, but your solution is more targeted.

Users can insert the wrapper JS code for the js_event_wpv_pagination_completed event via the "JS front-end events" button which appears when the custom JS editor is open.

[Brian]

Absolutely and not a problem at all.
Thank you for you further insight into the issue being experienced.

I would note that this code can also be used in the Layouts CSS and JS panel (for those using the Layouts plugin) to act as a sidewide fix in cases where a developer has created a large number of views requiring the fix. In my case, I simply added the code, slightly cleaned up, in my Child Theme's custom JS file.

And Nigel, the credit all goes to you, as you are the one who provided that PrettyPhoto function, albeit in a different wrapper for a similar but different case usage:
https://toolset.com/forums/topic/parametric-search-issues-after-searching/

I'm unsure if the above thread ever resulted in a bugfix, however the issue is resolved for me using the above mentioned script/code.

I will go ahead and mark this as resolved, thanks again Nigel.

- Cameron