Gists

<?php
/** sample of css and js to create a custom loading animation to cover the full facet area
 ** change #facet-container to a id or class of container element for your facets
 ** update css as needed
 ** please see https://facetwp.com/documentation/support/ for questions
 **/

add_action( 'wp_head', function() { ?>
    <style>
		#facet-container {
			position: relative;
		}
		.custom-loader {
			position: absolute;
			background-image: url("/path/to/image");
			background-position: center;
			background-repeat: no-repeat;
		}
    </style>
<?php });

add_action( 'wp_head', function() {
	?>
	<script>
	(function($) {
		$(document).on('facetwp-refresh', function() {
			if (FWP.loaded) {
				$('#facet-container').prepend('<div class="custom-loader facetwp-loading"></div>');
				$('.custom-loader').height( $('#facet-container').height() ).width( $('#facet-container').width() );
			}
		});
	
		$(document).on('facetwp-loaded', function() {
			$('.custom-loader').remove();
		});
	})(jQuery);  
	</script>
	<?php
},100);

<?php

// Add to your (child) theme's functions.php file

add_action( 'wp_head', function() {
?>
<script>
(function($) {
    $(document).on('facetwp-refresh', function() {
        if (! FWP.loaded) {
            FWP.set_hash = function() { /* empty */ }
        }
    });
})(jQuery);
</script>
<?php
}, 100 );

<?php
/** conditionally change templates on ajax refresh, only works for use with facetwp
 ** layout builder templates
 **/
add_action( 'wp_footer', function() {
	?>
    <script>
        (function($) {
            $(document).on('facetwp-refresh', function() {
                if ( 'undefined' !== typeof FWP.facets['categories'] && FWP.facets['categories'].length > 0 ) {
                    FWP.template = 'example_2';
                } else {
                    FWP.template = 'example';
                }
            });
        })(jQuery);
    </script>
	<?php
}, 100 );

<?php
/** adds the post_id to a variable passed during refresh **/
add_action( 'wp_footer', function() {
    if ( is_singular() ) : ?>
        <script>
        (function($) {
            $(document).on('facetwp-refresh', function() {
                FWP_HTTP.post_id = <?php echo get_the_ID(); ?>
            });
        })(jQuery);
        </script>
    <?php endif;
}, 100 );

<?php
/** access post_id in query args of facetwp template settings
 ** if using a visual query you'll first need to conver that to 
 ** advanced query args **/

$post_id = isset( $this->http_params['post_id'] ) ? $this->http_params['post_id'] : 0; // OR use if that doesn't work as expected - FWP()->facet->http_params['get'][ $post_id ]
if ( $post_id < 1 ) {
    $post_id = get_the_id();
}
 

var FWPBB = FWPBB || {};

(function($) {

    // Prevent BB scroll
    FLBuilderLayout._scrollToElement = function(el, callback) {
        var config  = FLBuilderLayoutConfig.anchorLinkAnimations;

        if (el.length > 0) {

            // See _initAnchorLink() within bb-plugin/js/fl-builder-layout.js
            if ( el.hasClass( 'fl-scroll-link' ) || el.hasClass( 'fl-row' ) || el.hasClass( 'fl-col' ) || el.hasClass( 'fl-module' ) ) {
                var ot = el.offset().top,
                    dh = $(document).height(),
                    wh = $(window).height();

                var dest = (ot > dh - wh) ? (dh - wh) : (ot - config.offset);

                $('html, body').animate({ scrollTop: dest }, config.duration, config.easing, function() {
                    if ('undefined' != typeof callback) {
                        callback();
                    }
                });
            }
        }
    }

    // Grids
    FWPBB.init_grids = function() {
        $.each(FWPBB.modules, function(id, obj) {
            if ('grid' === obj.layout) {
                if ('post-grid' === obj.type) {
                    new FLBuilderPostGrid(obj);
                    $('.fl-node-' + id + ' .fl-post-grid').masonry('reloadItems');
                }
                else if ('pp-content-grid' === obj.type) {
                    new PPContentGrid(obj);
                }
                else if ('blog-posts' === obj.type) {
                    new UABBBlogPosts(obj);
                }
            }
            else if ('gallery' == obj.layout) {
                new FLBuilderPostGrid(obj);

                $('.fl-post-gallery-img').each(function() {
                    $(this)[0].style.setProperty('max-width', '100%', 'important');
                });
            }
        });
        clean_pager();
    }

    function clean_pager() {
        $('a.page-numbers').attr('href', '').each(function() {
            $(this).trigger('init');
        });
    }

    // Pagination
    $(document).on('click init', 'a.page-numbers', function(e) {
        e.preventDefault();
        var clicked = $(this);
        var page = clicked.text();

        if (clicked.hasClass('prev')) { // previous
            page = FWP.settings.pager.page - 1;
        }

        if (clicked.hasClass('next')) { // next
            page = FWP.settings.pager.page + 1;
        }

        $('.page-numbers').removeClass('current');
        clicked.addClass('current');

        if (e.type === 'click') {
            FWP.paged = page;
            FWP.soft_refresh = true;
            FWP.refresh();
        }
        else {
            FWP.facets['paged'] = page;
            clicked.attr('href', '?' + FWP.build_query_string());
        }
    });

    // Set Trigger
    $(document).on('facetwp-loaded', function() {
        if (FWP.loaded || FWP.is_bfcache) {
            FWPBB.init_grids();
        }
    });
    $(document).on('facetwp-refresh', function() {
        if ($('.facetwp-template:first').hasClass('facetwp-bb-module')) {
            FWP.template = 'wp';
        }
    });

})(jQuery);

<?php

// See https://facetwp.com/how-to-use-hooks/
add_action( 'wp_head', function() {
?>
<script>
(function($) {
    $(document).on('facetwp-refresh', function() {
        FWP_HTTP.term_id = '<?php echo get_queried_object_id(); ?>';
    });
})(jQuery);
</script>
<?php
}, 100 );


// To access it (within your Query Arguments box)
$term_id = (int) $this->http_params['term_id'];

(function($) {
    $(document).on('facetwp-refresh', function() {
        /**
         * If the "makes" facet has some active selections, then preseve ALL its choices
         * This uses FWP.frozen_facets to prevent a re-render
         */
        if (0 < FWP.facets['makes'].length) {
            FWP.frozen_facets['makes'] = 'soft';
        }
    });
})(jQuery);

<script>
	(function($) {
		$(function() {

			/*
			After FacetWP reloads, store any updates into a cookie
			*/

			$(document).on('facetwp-loaded', function() {
        			if ( typeof FLBuilder == 'undefined' ) {
					var date = new Date();
					var facets = window.location.search;
					date.setTime(date.getTime()+(24*60*60*1000));
					document.cookie = "facetdata="+facets+"; expires="+date.toGMTString()+"; path=/";
        			}
			});

			/*
			When FacetWP first initializes, look for the "facetdata" cookie
			If it exists, set window.location.search= facetdata
			*/

			$(document).on('facetwp-refresh', function() {
				if (! FWP.loaded && typeof FLBuilder == 'undefined' ) {
					var facets = window.location.search;
					var facetdata = readCookie('facetdata');
					if (null != facetdata && '' != facetdata && facets != facetdata) {
						document.cookie = 'facetdata=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
						window.location.search = facetdata;
					}
				}
			});

			/*
			Cookie handler
			*/
			function readCookie(name) {
				var nameEQ = name + "=";
				var ca = document.cookie.split(';');
				for(var i=0;i < ca.length;i++) {
					var c = ca[i];
					while (c.charAt(0)==' ') c = c.substring(1,c.length);
					if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
				}
				return null;
			}
		});
	})(jQuery);
	</script>

<?php

/** reset a facet (facet 2) on submission of different facet (facet 1)
 ** change 'search' to name of facet 1
 ** change 'product_categories' to the name of the facet 2
 **/
add_action( 'wp_footer', function() {
	?>
    <script>
        (function($) {
            $(document).on('facetwp-refresh', function() {
                if ( 'undefined' !== typeof FWP.facets['search'] && FWP.facets['search'].length < 1 ) {
                    FWP.facets['product_categories'] = [];
                }
            });
        })(jQuery);
    </script>
	<?php
}, 100 );

<?php

/** scoll on loaded only if pager is the change in facet **/
add_action( 'wp_head', function() { ?>

    <script>
        (function($) {
            $(document).on('facetwp-refresh', function() {
                if ( FWP.soft_refresh == true ) {
                    FWP.enable_scroll = true;
                } else {
                    FWP.enable_scroll = false;
                }
            });
            $(document).on('facetwp-loaded', function() {
                if ( FWP.enable_scroll == true ) {
                    $('html, body').animate({ scrollTop: 0 }, 500);
                }
            });
        })(jQuery);
    </script>

<?php } );