Overview

This filter lets you modify the final output array, before it’s converted to JSON and returned to the client (via AJAX).

Parameters

  • $output | array | An associative array of output data (see below)
  • $params | array | An associative array of input parameters (see below)
$output = [
    'facets' => [
        'the_facet_name' => 'HTML output',
        'another_facet' => 'HTML output',
    ],
    'template' => 'HTML string',
    'settings' => [
        'the_facet_name' => [
            'setting1' => 'value'
        ]
    ],
    'pager' => 'HTML output',
    'sort' => 'HTML output',
];

$params contains the data (selected values, etc.) passed in client-side from AJAX.

$params = [
    'facets' => [
        [
            'facet_name' => 'the_facet_name',
            'selected_values' => [ 1, 2, 3 ],
        ],
        [
            'facet_name' => 'another_facet',
            'selected_values' => [ 4, 5 ],
        ],
    ),
    'template' => 'my_template',
    'http_params' => [
        'uri' => 'the/page/url'
    ],
    'extras' => [
        'sort' => 'default',
        'pager' => true,
    ],
    'paged' => 1
];

Examples

Modify a Slider facet setting

In this example, we modify the “start” setting for a Slider facet with name “price”. On first load, the slider will only show items with a price between 500 and 1000:

add_filter( 'facetwp_render_output', function( $output, $params ) {
    $output['settings']['price']['start'] = [ 500, 1000 ];
    return $output;
}, 10, 2 );

Customize a Date Range facet’s date picker range

The following code forces the range of the date picker of a Date Range facet between a specific date and today:

// Replace "my-daterange-facet" with the name of your Date Range facet
add_filter( 'facetwp_render_output', function( $output, $params ) {
    $output['settings']['my-daterange-facet']['range']['min']['minDate'] = '2022-01-01';
    $output['settings']['my-daterange-facet']['range']['min']['maxDate'] = date( 'Y-m-d' ); // Today
  return $output;
}, 10, 2 );

Disable the search box for all fSelect facets

The following example disables the search box for all fSelect facets on the page:

add_filter( 'facetwp_render_output', function( $output ) {
    $facets = FWP()->helper->get_facets();
    foreach ( $facets as $facet ) {
        if ( 'fselect' == $facet['type'] ) {
            $output['settings'][ $facet['name'] ]['showSearch'] = false;
        }
    }
    return $output;
});

Modify the template HTML

This example modifies a Listing Builder template’s output HTML, which is contained in $output['template']. The code inserts a <div> element with class header in the .fwpl-layout container element, above the results:

add_filter( 'facetwp_render_output', function( $output, $params ) {
  $output['template'] = preg_replace('/<div class=\"fwpl-layout(.*?)\">/', '<div class="fwpl-layout$1"><div class="header"></div>', $output['template']);
  return $output;
}, 10, 2 );

More examples

See also