How to Build a Listing with Filters via Bolt

In this tutorial, we describe how to create a website using only WordPress, Crocoblock’s JetEngine plugin, and Bolt as an AI Builder. For this case, you don’t need any builder as Elementor, Divi, etc. For additional details, see the article on WordPress and AI Builders Integration using Crocoblock: Bolt and Lovable Cases.

In our case, we will create a website that showcases mugs as products. Mugs are added to our WordPress website as Custom Content Type (CCT) items.

Also, you can display posts on your new website built with AI Builder by configuring the Query Builder. For that, you can refer to the How to Build Listing with Filters via Lovable tutorial.

Setting up a CCT as a Source

To display items (e.g., mugs) on a new website, a CCT should be created, and CCT items should be added to the WordPress website. For that, explore the How to Create Custom Content Type tutorial.

In the General Settings of the CCT, enable the Register get items/item REST API Endpoint toggle.

The URLs that appear in Endpoint URL should be provided in the AI builder prompt:

• The first one returns all items for a listing;
• The second one returns a single item for a Single page.

Next, click the “Parameters Overview” link and include all the information from the pop-up in your prompt. This helps the builder better understand the data structure, as these parameters define how data from custom fields and the content type can be requested or filtered.

Writing a Prompt for a Website with a Listing and Filters

A well-structured AI builder prompt should include:

• Project description: Specify the site type, its goal, main functionality, and examples of similar sites;
• Data source: Specify REST API usage and provide the corresponding URLs. Include returned data details: for the CCT, it’s a list of available meta fields;
• Filters: Describe required filters and their type (checkbox, radio, select). Include possible values or note if they’re dynamic via the API;
• Single pages: If needed, indicate that single pages should be created and provide the endpoint URL returning the data.

As an example, we create such a prompt:

I want to build a website that showcases mugs as products.

You can grab the data from the API here:
https://example.com/wp-json/jet-cct/mugs

The website should display a listing of mugs with filters for material (ceramic, glass, porcelain) and price range.

Here is a description of all API response props (which also can be used as request parameters in _filters):
_ID - Item ID;
mug_name - Mug name;
mug_desc - Mug desc;
mug_image - Mug image;
product_url - Product URL;
regular_price - Regular price;
mug_materials - Mug materials;
cct_author_id - Item Author;
cct_created - Created Date;
cct_modified - Modified Date;
cct_status - Status;
_cct_search - Search string, type: string;
_cct_search_by - Comma separated field names list to search only by these fields, type: string;
_limit - Items limit, type: number;
_offset - Items offset, type: number;
_orderby - Order items by field, type: string;
_order - Order - asc or desc, type: string;
_ordertype - Order value type - integer, float, timestamp, date, string, type: string;
_filters - JSON-encoded filters string, type: string;

Request URL with parameters example:
https://example.com/wp-json/jet-cct/mugs/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer

When displaying the price, make sure to cast it to a number before formatting, for example:
Number(mug.regular_price).toFixed(2)

When displaying the price, make sure to cast it to a number before formatting, for example:
Number(regular_price).toFixed(2)

To create a Single page, you can include such a line in the prompt:

To create a single page for a website, use the API endpoint: 
https://example.com/wp-json/jet-cct/websites/{_ID}. Replace {_ID} with the actual item ID to retrieve the data for that specific website.

After entering such a prompt into the Bolt text input area, we create a website with a listing and filters.

Then, we verify that the filters are working correctly.

That’s all. Now you know how to build a dynamic WordPress listing with filters using JetEngine and Bolt AI Builder.