JavaScript nach FacetWP Refresh ausführen

Wird ein FacetWP Filter aktiviert, kann es passieren, dass nach dem Ajax-Refresh der Seite JavaScript-Code erneut ausgeführt werden muss. Ein typisches Beispiel dafür ist Syntax-Highlighting per prism.js. Der Syntax-Highlighter funktioniert per JavaScript und hebt entsprechende Code-Blöcke farbig hervor.

Nach dem FacetWP Refresh fehlt diese Hervorhebung jedoch. Um das zu beheben kann man einfach eine JavaScript-Datei einbinden, die beliebigen Code nach dem Refresh ausführt. Um die Datei einzubinden, folgenden Code in die functions.php des Themes einfügen:

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script( 'my', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery', 'pure-code-syntax-block-prism' ), '', true );
} );

Anschließend den gewünschten JavaScript-Code in die Datei /js/script.js hinzufügen:

(function($) {
    $(document).on('facetwp-loaded', function() {
        Prism.highlightAll();
     });
})(jQuery);

Soll der JavaScript-Code stattdessen vor dem Refresh ausgeführt werden, sieht der Code wie folgt aus:

(function($) {
    $(document).on('facetwp-refresh', function() {
        // code to execute
     });
})(jQuery);

Schreibe einen Kommentar