Help Center
How to Create a Single Page for the CCT REST API Item

How to Create a Single Page for the CCT REST API Item

This guide explains creating a Single page for the CCT REST API item to display the selected item's data on a static page.

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetEngine plugin installed and activated with the REST API module enabled and the endpoint added

Enable the Custom Content Types Module

Before following the other steps, go to WordPress Dashboard > JetEngine > JetEngine > Modules and activate the Custom Content Types module.

Don’t forget to press the “Save” button.

custom content types module enabled

Check an Endpoint Connection

Proceed to JetEngine > REST API Endpoints tab and connect an endpoint. Once the endpoint is connected, the green “Connected” label appears in front of the Status field.

rest api endpoints connected

Creating WordPress Pages

Proceed to the WordPress Dashboard > Pages tab and create two static pages. The first page displays the Listing Grid widget that lists all items from the endpoint. The second page shows the data related to the item you clicked on. At this stage, leave the pages empty and copy the link to the second page, as it will be needed for the next step.

rest api single page link

Adding an Options Page

To create an Options Page, open the WordPress Dashboard >  JetEngine > Options Pages. Add a new Text meta field type to the page in the Fields tab. Save the changes and proceed to the newly created Options page on the WordPress Dashboard. Follow the Options Page Overview to learn how to set it up.

text field in the options pages settings

Open the options page you have just edited. The text field should be filled in with the second-page link, as suggested in the previous step.

completed text field on the options page

Building a Listing Template for the REST API Endpoint

The Listing template for the REST API endpoint item will be used on the first page. To create the listing template, go to JetEngine > Listings and click the “Add New” button. Select the “REST API Endpoint” as the Listing source and choose the needed endpoint.

Complete the Listing item name field and select the desired Listing view.

Press the “Create Listing Item” button.

rest api endpoint listing pop-up

Choose the preferred page builder editor. In this case, it is the Elementor. Once the page opens, add a Dynamic Field widget to output the desired data from the endpoint. 

Pick “Post/Term/User/Object Data” as the Source, and then in the Object Field, select all the needed fields to be displayed from the endpoint. 

dynamic field object field options in elementor

Then drag and drop the Dynamic Link widget to the page. Select “Options” as the Source, and the text field from the Options page containing the link to the page to redirect in the Option dropdown.

Enable the Add Query Arguments toggle and insert ‘item_id=%current_id%’ in the appeared field.

dynamic link options source with query arguments added in elementor

Creating Another Listing Template for the Same REST API Endpoint

Start building one more listing template that will be used on the second page.

The listing template should have the same source you created — the REST API endpoint. This template is how one item will look on its ‘single page’. 

Therefore, add more Dynamic Field widgets to create a more detailed item layout.

Building a Custom REST API Query in the Query Builder

Go to JetEngine > Query Builder to create a custom REST API query that allows you to display the item on a single REST API page according to which item you clicked on the first page.

single rest api general settings

Proceed with adding the query and select the endpoint. Press the dynamic tag button next to the Value field and choose the “Query Variable” option.

selected endpoint in the rest api query

The key can be found in the Preview of the endpoint.

key value in the preview

The Variable Name in the settings is the same as you wrote in the Dynamic Link widget.

variable name field completed

Here is a little reminder of what was written in the Dynamic Link Query Arguments field.

query arguments field in the elementor page builder

Displaying Listing Templates in the Listing Grid Widgets

It is finally time to add the listing templates to the Listing Grid widgets.

Go to the first and the second page. Drag and drop the Listing Grid widget to each page, and select the listing templates for the first and second pages accordingly.

Here is an example of how the listing template can be added to the first page:

main rest api listing used in elementor

And that’s how it looks on the second page:

secondary rest api listing used in elementor

Enabling Custom Query in the Listing Grid Widget

Once the custom REST API query is ready, you must select it in the Listing Grid widget on the second page. It can be performed in the Custom Query tab.

Enable the Use Custom Query toggle and select the needed item in the Custom Query dropdown menu.

custom query selected in elementor

Check the result. Mind that the link in the primary Listing Grid contains a query argument.

rest api single query argument

The query argument allows displaying the data of the item you just clicked on, which creates a ‘single page’ for the REST API item.

rest api single page item id in the link

The result is achieved; now you know how to create a single page for the REST API item on your WordPress website with the help of the JetEngine plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.