HIDE

Facet for Bricks

Since the release of Piotnet Grid 2.0 (Beta) on September 8th, 2022, you can use Facets to filter the Query Loop of Bricks Builder or apply for more advanced benefits.

Tutorials

1. Apply Facet & Grid combination, or Piotnet Template in Bricks Builder:

Step 1: Create your own Card, Grid, Facet, or Piotnet Template.

Step 2: In Bricks Panel Editor > Piotnet Category > Add new a Facet, Grid, or Template element.

Step 3: Choose your appropriate Facet, Grid, or Piotnet Template query as in the illustrations below.

In the Facet Element > Grid Type > choose Piotnet Grid

 

2. Apply Facets for Query Loop of Bricks:

Step 1: Setup in Piotnet Grid Editor.

Create your own Facets depending on your objects/needs. For example, a Facet for Filters and another one for Pagination.

Step 2: Setup in Bricks Editor.

Please browse the basic structure below to easily understand how to operate Facets versus Query Loop of Bricks.

You need to pay attention to two notes:

  • The Query Loop is only functional if it is covered by a Layout format (Section, Block, Div, Container).
  • The Facets and Query Loop are not covered by the same closest Parent Layout format. They are separated by Containers in the example structure.

Facet Element Setup:

For instance: Create two Facet elements as below.

  • Select a Facet: Choose appropriate your Facet
  • Grid Type: pick Bricks Element
  • Bricks Query: select appropriate query – Query Loop/Loop Items
  • Cache: This function boosts results returning speed after triggering Facets.

 

Query Loop Setup:

Query Loop can be used for Layout Formats or other elements.

For instance: pick a Container > enable “Use query loop

Then set up Detailed Query: please refer to Bricks Query Control

You can add more elements such as an image, text, product price, and so on.

After that, scroll to Piotnetgrid Facets Apply > implement the corresponding Facets. (Mandatory)

3. Archive Template:

To create an Archive Template with Facets, for example, WooCommerce Product Archive (Shop Page):

Perform the same progress as in #Item 2 > Click on Settings > Template Settings > Conditions > Add Condition

  • Choose Archive
  • Archive type: Select Post Type.
  • Archive post types: Choose Products.

Then go to your URL/shop to check the result.