{"id":49273,"date":"2025-08-27T08:59:01","date_gmt":"2025-08-27T08:59:01","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49273"},"modified":"2025-09-16T09:00:06","modified_gmt":"2025-09-16T09:00:06","slug":"how-to-build-listing-with-filters-via-lovable","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/","title":{"rendered":"How to Build a Listing with Filters via Lovable"},"content":{"rendered":"\n

Learn how to build a dynamic listing with filters using the Lovable AI website builder. This tutorial walks you through connecting your WordPress data via JetEngine\u2019s <\/em>REST API endpoints, setting up filters, and generating a fully functional directory website with Lovable.<\/p>\n\n\n\n

From our WordPress and AI Builders Integration using Crocoblock: Bolt and Lovable Cases<\/strong><\/a> article, you can learn about the integration with Crocoblock. In this guide, we focus on setting up the listing with filters. <\/p>\n\n\n\n

Setting Up a Query Builder Source<\/h2>\n\n\n\n
\n

Proceed to WordPress Dashboard > JetEngine > Query Builder<\/em><\/strong> and click the \u201cAdd New<\/strong>\u201d button. Type the query Name<\/strong> and select the \u201cCustom Content Type Query<\/a>\u201d option as a Query Type<\/strong>.<\/p>\n\n\n\n

\"query<\/a><\/div>\n<\/div><\/div>\n\n\n\n

REST API Activation<\/h2>\n\n\n\n
\n

In the query you created, enable the Register REST API Endpoint<\/strong> toggle. Then, set up the Endpoint Namespace<\/strong> and Endpoint Path<\/strong>.\u00a0<\/p>\n\n\n\n

You receive the REST API Endpoint URL<\/strong>; keep it, as we will use it in the prompt later.\u00a0<\/p>\n\n\n\n

\"register<\/a><\/div>\n\n\n\n

Now, let\u2019s move to the Query Arguments<\/strong> settings \u2013 here, we add the parameters that will filter the listing. <\/p>\n\n\n\n

For example, we add the \u201ctype\u201d and \u201cformat\u201d parameters with multiple values in the Default Value <\/strong>column to have multiple-choice filters on our site. Additionally, there are four more parameters to get a range filter for the price (\u201cprice_from\u201d and \u201cprice_to\u201d parameters) and a date filter (\u201cdate_from\u201d and \u201cdate_to\u201d parameters). <\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

Then, scroll down to the Query <\/strong>tab and click the \u201cAdd<\/strong> New<\/strong>\u201d button. <\/p>\n\n\n\n

Select the field in the Field <\/strong>input to which the parameter is attached. Choose the provider from the Compare <\/strong>dropdown (select \u201cIn the list\u201d option for the multiple-choice fields). <\/p>\n\n\n\n

For the Value<\/strong>, click the \u201cDynamic Tag<\/strong><\/a>\u201d icon and choose the \u201cQuery Variable\u201d option. In the newly opened pop-up, set the Variable Name<\/strong> \u2013 it should be equal to the Query Argument<\/strong> you used earlier. <\/p>\n\n\n\n

Additionally, enable the Exclude this clause from the query if the dynamic value is empty <\/strong>option.<\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

If you need a range filter and have Query Arguments<\/strong> similar to \u201cprice_from\u201d and \u201cprice_to\u201d, then add two more tabs in the Query <\/strong>section. <\/p>\n\n\n\n

The settings should be identical to those we described previously. However, the provider in the Compare<\/strong> input should be \u201cGreater or equal (>=)\u201d for the first tab and \u201cLess or equal(<=)\u201d for the second one. <\/p>\n\n\n\n

\"query<\/a><\/div>\n\n\n\n

Click the \u201cUpdate Query<\/strong>\u201d button.<\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

Ensure that you retain the REST API Endpoint URL<\/strong>, the list of parameters you added to the Query Arguments<\/strong>, and the Example of the REST API Endpoint URL with Query Arguments<\/strong>, as this information will be used in the prompt.<\/p><\/div><\/div>\n<\/div><\/div>\n\n\n\n

Creating a Prompt<\/h2>\n\n\n\n
\n

Now, proceed to the Lovable<\/a> platform and sign in or log in. <\/p>\n\n\n\n

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. <\/p>\n\n\n\n

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 <\/strong>as a source, describe what meta fields from the CCT<\/strong>. When you use the query as a source, you can copy an item from the Preview results<\/strong> section for the AI builder.\u00a0<\/p>\n\n\n\n

\"item<\/a><\/div>\n\n\n\n

If you need a single page to exist on the site, request its creation and share the Endpoint URL<\/strong> from which the single page will be obtained. <\/p>\n\n\n\n

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.\u00a0<\/p>\n\n\n\n

Here is a prompt we used in this case. <\/p>\n\n\n\n

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\/\n\nYou can grab the data by the API from here - https:\/\/demo.crocoblock.com\/lab\/wp-json\/jet-cct\/websites\n\nI 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.\n\nAllowed plugins for the filters\n\nJetEngine\nJetSmartFilters\nJetFormBuilder\nJetThemeCore\nJetElements\nJetMenu\nJetTabs\nJetWooBuilder\nJetProductGallery\nJetCompareWishlist\nJetPopup\nJetTricks\nJetReviews\nJetSearch\nJetAppointment\nJetBooking\nJetBlog\n\nAllowed types\n\nE-Commerce\nDirectory\nPersonal Blog\nPortfolio\nCorporate Website\nLanding Page\nNews Portal\nOnline Magazine\nMembership Site\nForum \/ Community\nEducational Website\nNonprofit \/ Charity\nGovernment Website\nWeb App \/ SaaS\nBooking Website\nEvent Website\nResume \/ CV Website\nAffiliate \/ Review Website\nMarketplace\nWiki \/ Knowledge Base\nPodcast Website\nRestaurant \/ Menu Website\n\nAllowed topics\n\nFashion\nTechnology\nLifestyle\nTravel\nFood\nHealth & Fitness\nPersonal Finance\nEducation\nEntertainment\nPhotography\nParenting\nHome & Garden\nDIY & Crafts\nBeauty\nAutomotive\nBusiness\nMarketing\nSports\nNews & Politics\nGaming\nMusic\nArt & Design\nReal Estate\nScience\nSpirituality & Religion\nPets\nEnvironment & Nature\nCareers & Jobs\nRelationships & Dating\nReviews & Product Comparisons\n\nExample of the API URL with filter parameters\n\nhttps://demo.crocoblock.com\/lab\/wp-json\/jet-cct\/websites\/?cct_author_id=1&_orderby=_ID&_order=desc&_ordertype=integer\n\nHere is a description of all API response props (which also can be used as request parameters in _filters)\n\n_ID - Item ID;\nwebsite_name - Website Name;\nwebsite_url - Website URL;\npreview_image - Preview Image;\ndeveloper_name - Developer Name;\nplugins_used - Plugins Used;\nwebsite_type - Website Type;\nwebsite_topic - Website Topic;\ndescription - Description;\ncct_author_id - Item Author;\ncct_created - Created Date;\ncct_modified - Modified Date;\ncct_status - Status;\n_cct_search - Search string, type: string;\n_cct_search_by - Comma separated field names list to search only by these fields, type: string;\n_limit - Items limit, type: number;\n_offset - Items offset, type: number;\n_orderby - Order items by field, type: string;\n_order - Order - asc or desc, type: string;\n_ordertype - Order value type - integer, float, timestamp, date, string, type: string;\n_filters - JSON-encoded filters string, type: string;\n<\/code><\/pre>\n\n\n
<\/svg><\/div>
Things to know<\/div>
Please note that the prompt is provided as an example, so feel free to customize it according to your specific needs.<\/p><\/div><\/div>\n\n\n\n
Paste the prompt into the Lovable input and click the arrow-shaped icon or the \u201cEnter<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n
Check the Result<\/h2>\n\n\n\n
\n
Here is the site we got: https:\/\/croc-showcase-hub.lovable.app\/<\/a> <\/p>\n\n\n\n
The list of sites is visible, as well as the filters on the left side. <\/p>\n\n\n\n
\"the<\/a><\/div>\n\n\n\n
The filters work properly; we select the site type and topic, and we get the correct results. <\/p>\n\n\n\n
\"filters<\/a><\/div>\n<\/div><\/div>\n\n\n\n
That\u2019s it. Now you know how to create a listing with the filters using the JetEngine <\/em>WordPress plugin and Lovable builder.  <\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine Rest API endpoints and create a searchable directory website.<\/p>\n","protected":false},"author":20,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[583],"yoast_head":"\nHow to Build a Listing with Filters via Lovable \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine REST API endpoints and create a searchable directory website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Listing with Filters via Lovable \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine REST API endpoints and create a searchable directory website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-16T09:00:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/query-created-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/\",\"name\":\"How to Build a Listing with Filters via Lovable \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-08-27T08:59:01+00:00\",\"dateModified\":\"2025-09-16T09:00:06+00:00\",\"description\":\"Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine REST API endpoints and create a searchable directory website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Build a Listing with Filters via Lovable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Listing with Filters via Lovable \u2014 JetEngine | Crocoblock","description":"Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine REST API endpoints and create a searchable directory website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/","og_locale":"en_US","og_type":"article","og_title":"How to Build a Listing with Filters via Lovable \u2014 JetEngine | Crocoblock","og_description":"Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine REST API endpoints and create a searchable directory website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/","og_site_name":"Help Center","article_modified_time":"2025-09-16T09:00:06+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/08\/query-created-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/","name":"How to Build a Listing with Filters via Lovable \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-08-27T08:59:01+00:00","dateModified":"2025-09-16T09:00:06+00:00","description":"Learn how to build a listing with filters in Lovable using WordPress data. Connect JetEngine REST API endpoints and create a searchable directory website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-build-listing-with-filters-via-lovable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Build a Listing with Filters via Lovable"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/49273"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/20"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=49273"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49273"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}