How to Build a Listing with Filters via Lovable

Proceed to WordPress Dashboard > JetEngine > Query Builder and click the “Add New” button. Type the query Name and select the “Custom Content Type Query” option as a Query Type.

In the query you created, enable the Register REST API Endpoint toggle. Then, set up the Endpoint Namespace and Endpoint Path. 

You receive the REST API Endpoint URL; keep it, as we will use it in the prompt later. 

Now, let’s move to the Query Arguments settings – here, we add the parameters that will filter the listing. 

For example, we add the “type” and “format” parameters with multiple values in the Default Value column to have multiple-choice filters on our site. Additionally, there are four more parameters to get a range filter for the price (“price_from” and “price_to” parameters) and a date filter (“date_from” and “date_to” parameters). 

Then, scroll down to the Query tab and click the “Add New” button. 

Select the field in the Field input to which the parameter is attached. Choose the provider from the Compare dropdown (select “In the list” option for the multiple-choice fields). 

For the Value, click the “Dynamic Tag” icon and choose the “Query Variable” option. In the newly opened pop-up, set the Variable Name – it should be equal to the Query Argument you used earlier. 

Additionally, enable the Exclude this clause from the query if the dynamic value is empty option.

If you need a range filter and have Query Arguments similar to “price_from” and “price_to”, then add two more tabs in the Query section. 

The settings should be identical to those we described previously. However, the provider in the Compare input should be “Greater or equal (>=)” for the first tab and “Less or equal(<=)” for the second one. 

Click the “Update Query” button.

Now, proceed to the Lovable platform and sign in or log in. 

The prompt should include information about the site you need to create, such as its type and purpose, as well as the main functions that are expected to be implemented. You can also share some existing sites as examples and any other context that may be helpful for the builder. 

It should also be noted that the data should be retrieved from the REST API, and the URLs you saved earlier should be shared. It is recommended to describe the specific data that will be obtained from the URLs. If you use the CCT as a source, describe what meta fields from the CCT. When you use the query as a source, you can copy an item from the Preview results section for the AI builder. 

If you need a single page to exist on the site, request its creation and share the Endpoint URL from which the single page will be obtained. 

As in this case, we need the filters to be added. We need to clarify the specific filters required, such as a select filter, a range, or a radio. The options for the filters should also be added. If the values are dynamic, you can get them from the REST API. 

Here is a prompt we used in this case. 

I want to build a website, which is a showcase of other websites built with Crocoblock plugins, like this - https://crocoblock.com/websites-made-with-elementor-and-crocoblock/

You can grab the data by the API from here - https://demo.crocoblock.com/lab/wp-json/jet-cct/websites

I need a listing of the websites with filters by used plugins, website type, and topic, and optionally by author. Also, I need the single page for the website, based on the data from the API. A single website could be retrieved from the API by such a URL - https://demo.crocoblock.com/lab/wp-json/jet-cct/websites/{_ID}, where {_ID} you need to replace with the actual item ID.

Allowed plugins for the filters

JetEngine
JetSmartFilters
JetFormBuilder
JetThemeCore
JetElements
JetMenu
JetTabs
JetWooBuilder
JetProductGallery
JetCompareWishlist
JetPopup
JetTricks
JetReviews
JetSearch
JetAppointment
JetBooking
JetBlog

Allowed types

E-Commerce
Directory
Personal Blog
Portfolio
Corporate Website
Landing Page
News Portal
Online Magazine
Membership Site
Forum / Community
Educational Website
Nonprofit / Charity
Government Website
Web App / SaaS
Booking Website
Event Website
Resume / CV Website
Affiliate / Review Website
Marketplace
Wiki / Knowledge Base
Podcast Website
Restaurant / Menu Website

Allowed topics

Fashion
Technology
Lifestyle
Travel
Food
Health & Fitness
Personal Finance
Education
Entertainment
Photography
Parenting
Home & Garden
DIY & Crafts
Beauty
Automotive
Business
Marketing
Sports
News & Politics
Gaming
Music
Art & Design
Real Estate
Science
Spirituality & Religion
Pets
Environment & Nature
Careers & Jobs
Relationships & Dating
Reviews & Product Comparisons

Example of the API URL with filter parameters

https://demo.crocoblock.com/lab/wp-json/jet-cct/websites/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer

Here is a description of all API response props (which also can be used as request parameters in _filters)

_ID - Item ID;
website_name - Website Name;
website_url - Website URL;
preview_image - Preview Image;
developer_name - Developer Name;
plugins_used - Plugins Used;
website_type - Website Type;
website_topic - Website Topic;
description - Description;
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;

Paste the prompt into the Lovable input and click the arrow-shaped icon or the “Enter” button.

Here is the site we got: https://croc-showcase-hub.lovable.app/ 

The list of sites is visible, as well as the filters on the left side. 

The filters work properly; we select the site type and topic, and we get the correct results.