Bricks

This add-on lets you add facets to your Bricks Builder “Posts”, “Query Loop“, and archive listings.

Supported elements

The following Bricks elements are supported:

• Posts
• Products
• Query Loop (built into Container, Block, or Div elements)

Using a “Posts” element

1. 

   Within Bricks, add a new “Posts” element to your page.

2. 

   In the element settings, toggle the Use FacetWP checkbox.

3. 

   After creating some facets, paste their shortcode(s) into a Shortcode element.

Add pagination to a “Posts” element

If you need pagination in a “Posts” element, enable it with its “Pagination > Show” setting. Alternatively, you can add a Pager facet to the page.

Note that using a separate “Pagination” element with a “Posts” element will not work with FacetWP.

Using a “Products” element

The “Products” Element, which is available if you have WooCommerce installed, is supported since version 0.5 of the add-on. The instructions are the same as for the Posts element.

Add pagination to a “Products” element

The “Products” element does not have a “Pagination” setting (like the “Posts” element), but you can add a Pager facet to the page.

Note that using a separate “Pagination” or “Products Pagination” element with a “Products” element will not work with FacetWP.

Using a “Query Loop” feature

To set up the “Query Loop” feature for use with FacetWP, follow these steps:

1. Within Bricks, create a new Div element. This will be the wrapper element that FacetWP needs to auto-detect the listing.
2. Next, add a Container, Block, or Div element (this will be our Query Loop).

3. 

   Within this element, toggle the Use query loop checkbox, then toggle the Use FacetWP checkbox after it appears. Adjust the Query as needed by clicking the “∞” icon.

4. 

   To add some example dynamic data, add a new Heading element and set its content to {post_title}.

5. 

   Finally, in the Structure area (right sidebar), nest the elements so that it looks like Div > Query Loop > Heading.

   Note: “Query Loop” is the element from step 2.

Query Loop – setup video

Here is a short video demonstrating the above Query Loop setup steps. It also shows how to add a Shortcode element with a facet shortcode above the Query Loop:

Add pagination to a “Query Loop” element

If you need pagination in a “Query Loop” element, you can add a separate “Pagination” element.

To work properly with FacetWP, this element needs to be in the same parent container as the Container, Block, or Div element for which the Query Loop and FacetWP are enabled.

Next, make sure to select this Container, Block, or Div element in the “Pagination” element’s “Query” setting.

Alternatively, you can add a Pager facet to the page.

Change query arguments or manually add FacetWP support to elements

The “Use FacetWP” setting should be used where available. However, it is also possible to manually enable FacetWP on a query element, by setting the "facetwp" => true query argument with Bricks’ “bricks/posts/query_vars” filter.

This filter can also be used to customize other query arguments. It works for “Posts”, “Products”, and “Query Loop” elements.

Add the following code to your Bricks child theme’s functions.php, and change the value of $element_id to your element’s unique ID.

This element ID consists of a string of random characters that can be found in the field above the element’s settings, where it is preceded with #brxe-.

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
  if ( $element_id === 'yjqekk' ) { // change 'yjqekk'  to your element's unique element ID
    $query_vars['facetwp'] = true;
  }
  return $query_vars;
}, 10, 3 );

Fix the AJAX add to cart button

Bricks has an “AJAX add to cart” setting, located under: Bricks > Settings > WooCommerce > AJAX add to cart:

If you enable this setting, you’ll notice that the “Add to cart” button no longer works after interacting with facets. To fix this, Bricks’ button script needs to be re-initialized after each AJAX load, by adding the following script to your (child) theme’s functions.php:

How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
<?php
add_action( 'facetwp_scripts', function() {
?>
<script>
  document.addEventListener('facetwp-loaded', function() {
    if ( FWP.loaded ) {
      // bricksWooAjaxAddToCartInit(); // Works in Bricks versions before v1.9.2
      bricksWooAjaxAddToCartFn.run(); // Works in Bricks v1.9.2 +
    }
  });
</script>
<?php
}, 100 );

See also

• Using FacetWP with WooCommerce
• Using FacetWP with Elementor
• Using FacetWP with Beaver Builder
• The Pager + Load more facet type