Product image zoom does not work when check to optimize html – theme shopkeeper

If the problem only occurs when “optimize HTML” is active, then we should look at where the HTML is different (broken), probably for the div with class="fresco zoom". Could you copy/paste your optimized HTML to pastebin.com or to a gist.github.com and provide me the link?

Hi,
Here is optimized HTML of my product page
https://gist.github.com/nguyenthixuan151/4f3ada27d1114d65e3251b3caa3afa59

Thanks for your quickly response!

OK, problem is with a space gone missing;

<adata-fresco-group="product-gallery" data-fresco-options="

should obviously be

<a data-fresco-group="product-gallery" data-fresco-options="

If I’m not mistaking this is fixed in the development version of AO which you can download from github, could you give that a try?

frank
frank

I’ll try and give you result. Thank you!

Hi, it’s not better to me ??

hmm … did you you clear your page caches?

Sorry for late response. I cleared all browser cache, plugin cache but still see <adata-fresco-group in page source.
Thanks for your help!

confirmed. problem is the HTML going in is … ugly, throwing off the (probably somewhat naive) HTML optimizer;

	                	<a 

		                	data-fresco-group="product-gallery" 
		                	data-fresco-options="ui: 'outside', thumbnail: 'https://pckasseintegration.inbusinessclients.no/wp-content/uploads/pckasse_upload/Chenille_1503749725-570x466.png'" 
		                	data-fresco-group-options="overflow: true, thumbnails: 'vertical', onClick: 'close'" 
		                	data-fresco-caption="" 

		                	class="fresco zoom" 

		                	href="https://pckasseintegration.inbusinessclients.no/wp-content/uploads/pckasse_upload/Chenille_1503749725.png"

		                	>

which after HTML optimization becomes:

<adata-fresco-group="product-gallery"
data-fresco-options="ui: 'outside', thumbnail: 'https://pckasseintegration.inbusinessclients.no/wp-content/uploads/pckasse_upload/Chenille_1503749725-570x466.png'"
data-fresco-group-options="overflow: true, thumbnails: 'vertical', onClick: 'close'"
data-fresco-caption=""class="fresco zoom"href="https://pckasseintegration.inbusinessclients.no/wp-content/uploads/pckasse_upload/Chenille_1503749725.png">

So that’s not good. You could either disable HTML optimization (it’s the least important one anyhow) or you could use this code-snippet that seems to fix things for me;

add_filter('autoptimize_html_after_minify','fresco_zoom_fixer');
function fresco_zoom_fixer($in) {
	return preg_replace_callback(
                '/<a(data[^>]*)>/',
                create_function(
                    '$matches',
                    '
						$_tmp="<a $matches[1]>";
						$_tmp=str_replace("\n"," ",$_tmp);
						$_tmp=str_replace("\"class","\" class",$_tmp);
						$_tmp=str_replace("\"href","\" href",$_tmp);
						return $_tmp;
					'
                ),
                $in
            );
}

hope this helps,
frank

The filter works. Thanks for your support so much. Very quick ??

happy it works. did that fresco zoom come with your theme, or is it part of a plugin?

It’s come with theme shopkeeper.

hey @nguyenthixuan151;
this commit should fix the problem in the HTML minifier proper, meaning you could remove the code snippet. could you test?

thanks!
frank