AJAXed filter and template

THIS IS OUTDATED TUTORIAL. PLEASE, USE OUT NEW TUTORIAL ABOUT DIRECTORY SITES ON WOOCOMMERCE

Note: More easy way to make AJAXed filter output is to use layout builder and MDTF module. There is no difference between these methods, but layout builder is more easy to use. If you still want to use direct shortcode without page builder, read information below

From 3.6 version of theme, you can add full ajaxed templates. What is the main difference between ajaxed templates and regular. When you filter your content with ajaxed template, your link doesn’t change and always looks good. But ajaxed templates are not so flexible as catalog constructor, because all settings are inside PHP file. I have included 4 predefined templates which are ready for ALAX. All of them are in /mdf_templates folder of theme. If you have PHP skills, you can change them or use as is.

For using ajaxed filter, create blank page and add such shortcode to it:

[mdf_results_by_ajax shortcode='mdf_custom template=template/list post_type=post orderby=date order=desc page=1 per_page=10 pagination=tb' animate=1]

See description of attributes

For template attribute you can use such names of predefined templates:

template/list – List output;
template/column – Columned grid (3 columns);
template/grid – Deal grid (3 columns);
template/grid_full – Deal grid (5 columns);
template/reviewlist – review list;
template/woolist – woocommerce list;
template/woogrid – woocommerce grid;
template/woocolumn – woocommerce columns;

Also, it’s very important to use on this page MTDF filter or widget with enabled AJAX options.

For output link and output template in settings of widget or shortcode, add – self

Lazy image fix

When you use lazy image loading on site (enabled by default), your images will be empty after ajax search, to fix this, go to MDTF – settings – Advanced options and add next code in JavaScript code after AJAX is done field

jQuery('#mdf_results_by_ajax').find('img.lazyimages').each(function(){
       var source = jQuery(this).attr("data-src");
       jQuery(this).attr("src", source).css({'opacity': '1'});
});

Ajaxed WooCommerce product page

You can also create ajaxed WooCommerce filtered page. Logic is the same, but you need to add another shortcode:

[mdf_results_by_ajax shortcode='mdf_products columns=3 per_page=12 pagination=tb' animate=1]

You can set design of product layout in theme option – shop settings
See description of mdf_products