Learn how to assign the Ajax Search to the specific Listing Grid with the help of JetSearch and JetEngine plugins for WordPress.
Before you start, check the tutorial requirements:
- Elementor (Free version) or Block editor (Gutenberg)
- JetSearch plugin installed and activated
- JetThemeCore plugin installed and activated
- JetEngine plugin installed and activated with the Listing(s) built
Things to know
This use case is based on the BaliRento dynamic template.
Build a Query
Initially, let’s build a query for the listing that will be displayed on the archive page. To do it, proceed to the WordPress Dashboard > JetEngine > Query Builder and press the “Add New” button.
Name the query (here, “Properties Current Query”) and set the Query Type to “Current WP Query”.
Press the “Add new page type” button in the Posts per page block of the Current WP Query section.
Pick the name of the post type you work with in the Page Type dropdown (for example, we select “Properties.”)
Also, specify the Posts number that will be displayed later in the listing.
Ultimately, press the “Add Query” button.
Then, we want to add another query that will be used for the second listing displayed on the search page. To do so, proceed once again to the WordPress Dashboard > JetEngine > Query Builder and press “Add New”.
Give a name to the query (here, “Properties Query”) and select the Query Type (here, the default “Posts Query”).
Next, we select the Post Type that will be displayed in the listing. Here, we select the “Properties” option.
Also, we press the “Add new sorting parameter” button, select the “By title” option in the Order By field, and the “From lowest to highest values (1, 2, 3; a, b, c)” option in the Order field.
Next, we also head to the Pagination tab and specify the “3” value in the Posts Per Page field so only three posts will be visible in the listing.
When the query is ready, press the “Add Query” button.
Create an Archive Page
Next, you should build an archive page for the post type you work with if you haven’t done it before. It can be done with the help of the JetThemeCore plugin.
Go to WordPress Dashboard > Crocoblock > Theme Builder and press the “Create new page template” button.
In the appeared window, press the “Add Condition” button to specify the conditions.
Select the “Include,” “Archive,” and “All (Your post type name) Archive” options and click the “Create” button.
You can set the header and footer if desired by pressing the “Override theme header/footer” buttons.
However, we will focus on the template’s body, so let’s set it right away. To do so, click the “Override theme body” button.
In the opened menu, select either the “Create template” button to build a template from scratch or the “Add from library” button to pick the previously created template from the list. In our case, we push the “Create template” button.
Set the template’s name (optional) and select the preferred editor (here, we pick “Elementor”). Then, press the “Create” and “Go to editor” buttons.
In the editor, we first add a Heading with the “Search results:” text to indicate that the following listing will contain the search results.
Add the Listing Grid widget/block to the page.
Select the recently created Listing in the corresponding field (here, “Properties Listing”).
Head to the Custom Query tab and activate the Use Custom Query toggle.
Pick the previously built query (in our case, “Properties Current Query”) in the Custom Query dropdown list.
Then, proceed to the Advanced tab and complete the CSS ID field with the desired value, which will later connect this listing with the Ajax Search. For instance, “listing-grid-1”.
Adjust other widget settings as well if needed.
Next, we add one more Heading to the page. This time with the “We recommend:” text.
Then, we add one more Listing Grid widget to the page.
Select the desired Listing in the corresponding field. For example, we select the same “Properties Listing.”
In the Custom Query tab, we select the “Properties Query” that we have built before for this listing.
Next, we proceed to the Posts Query tab. You can adjust any other query for this Listing Grid except the “Current WP Query” one in the Custom Query tab.
Here, we press the “Add Item” button and select the “Meta Query” Type. The Key (name/ID) is set to “top” here as it is the “Radio” meta field’s Name/ID, the Operator is set to “Equal”, and the Value to “yes”. So, only those posts that have the “yes” option selected in the “Top” meta field will be shown in the Listing Grid.
Adjust other widget settings if needed and save the page by pressing the “Publish” button.
Add a Search Page
Navigate to the WordPress Dashboard > Pages directory and create a page by clicking the “Add New” button or selecting an already existing page.
Add an Ajax Search widget to the page.
Paste the search results URL into the Custom Search Results URL field. Also, specify the Listing Grid’s ID in the Target Widget ID (optional) field. Here, “listing-grid-1”
Make sure that the Source used for the Listing Grid and the Ajax Search is the same.
Customize the widget and page additionally if needed, and press the “Publish” button.
Check the Result
Head to the page where the Ajax Search is located.
Enter your request in the search input area and press the “Search” button.
Now, you will be redirected to the “Search Results” archive page. Here, you will see only the first listing filtered, which is the needed one.
The second listing will be left as is.
That’s all about assigning an Ajax Query to the Listing Grid Current Query to limit search results on the archive page with the help of the JetSearch plugin for WordPress.
