Skip to content

Instantly share code, notes, and snippets.

@bigdigital
Last active February 8, 2018 15:26
Show Gist options
  • Save bigdigital/4725959ae5f155d53cc603a65bfdf26f to your computer and use it in GitHub Desktop.
Save bigdigital/4725959ae5f155d53cc603a65bfdf26f to your computer and use it in GitHub Desktop.
The7 enable AJAX for "Product Filter for WooCommerce" plugin
<script>
function fixWooIsotope() {
if (dtGlobals.isPhone) {
jQuery(window).trigger("scroll");
return;
}
var $container = jQuery('.iso-container');
var $dataAttrContainer = $container,
i = 0,
contWidth = parseInt($dataAttrContainer.attr("data-width")),
contNum = parseInt($dataAttrContainer.attr("data-columns")),
desktopNum = parseInt($dataAttrContainer.attr("data-desktop-columns-num")),
tabletHNum = parseInt($dataAttrContainer.attr("data-h-tablet-columns-num")),
tabletVNum = parseInt($dataAttrContainer.attr("data-v-tablet-columns-num")),
phoneNum = parseInt($dataAttrContainer.attr("data-phone-columns-num")),
contPadding = parseInt($dataAttrContainer.attr("data-padding"));
$container.addClass("cont-id-"+i).attr("data-cont-id", i);
jQuery(window).off("columnsReady");
$container.off("columnsReady.fixWooIsotope").one("columnsReady.fixWooIsotope.IsoInit", function() {
$container.addClass("dt-isotope").IsoInitialisation('.iso-item', 'masonry', 400);
$container.isotope("on", "layoutComplete", function () {
$container.trigger("IsoReady");
});
});
$container.on("columnsReady.fixWooIsotope.IsoLayout", function() {
$container.isotope("layout");
});
$container.one("columnsReady.fixWooIsotope", function() {
jQuery(".preload-me", $container).heightHack();
});
$container.one("IsoReady", function() {
$container.IsoLayzrInitialisation();
});
jQuery(window).off("debouncedresize.fixWooIsotope").on("debouncedresize.fixWooIsotope", function () {
$container.calculateColumns(contWidth, contNum, contPadding, desktopNum, tabletHNum, tabletVNum, phoneNum, "px");
if(contPadding > 10){
$container.addClass("mobile-paddings");
}
}).trigger("debouncedresize.fixWooIsotope");
jQuery(window).trigger("scroll");
}
function fixWooOrdering() {
jQuery('.woocommerce-ordering-div select').each(function(){
jQuery(this).customSelect();
});
}
</script>
add_action( 'wp_ajax_nopriv_prdctfltr_respond_550', 'the7_prdctfltr_ajax_config', 9 );
add_action( 'wp_ajax_prdctfltr_respond_550', 'the7_prdctfltr_ajax_config', 9 );
function the7_prdctfltr_ajax_config() {
dt_woocommerce_configure_template( 'shop' );
presscore_config_base_init();
}
@bigdigital
Copy link
Author

bigdigital commented Jan 31, 2018

How to run ajax on the archive pages with the following config

  1. Go to WooCommerce > Settings > Product Filter > Installation and Advanced Options page
  2. Enable “Use AJAX On Product Archives”
  3. Set “.wf-container.woo-hover” to “AJAX Wrapper jQuery Selector” field
  4. Add following code to “AJAX jQuery and JS Refresh”
window.fixWooOrdering();
window.fixWooIsotope();
  1. Go to Theme Options -> woocommerce -> Product list and select Responsiveness mode to “Browser with based”

  2. Go to Theme Options -> Advanced -> Custom JS and add JS code from custom.js section

  3. Add PHP code to child theme function.php file from function.php section

@bigdigital
Copy link
Author

If this does not work for you, you can also try to replace
var $container = jQuery('.iso-container');
to
var $container = jQuery('.wf-container.dt-isotope');

into javascript code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment