Display related posts in your blog post page
Play with the example below to see what you can do:
Open this example as a template so you can see how everything works in the Editor.
What We Built
In this example we add a repeater to our blog post page to display posts that share the same hashtag. We also added a repeater to display Popular posts.
How We Built It
For this example we used one of the database collections automatically added to your site if you have a blog:
Blog/Posts collection: Contains information about each blog post.
In the Post page on our site we added 2 repeaters.
Popular posts repeater: Displays the 3 most popular posts. Connected to Blog/Posts collection via the Popular Posts dataset
Related posts repeater: Displays 3 posts related to the current post. Connected to Blog/Posts collection via code.
The repeaters contain page elements to display data from the blog posts and buttons connected to the relevant post page URLs.
We added a Popular Posts dataset to connect data in our Blog/Posts collection with the popular posts repeater. We set the following in the dataset’s settings:
Number of items to display is 3 so only 3 posts are displayed in the repeater
Sort the Like Count from high to low so the most popular posts are displayed
We added the following code to the Post page:
Import the modules we need to work with data and navigation.
When the Post page loads, run the getAndLoadRelatedPosts() function with the current post data:
Get the current post’s data using the getPost() function.
Query the Blog/Posts collection, checking for the first 3 posts that are not the current post and contain any of the current post’s hashtags.
Load the related posts repeater with the data, triggering the onItemReady event handler.
Add an wixLocation.onChange() event to call this function again after the user clicks on a related post
In the onItemReady() handler, set the post title, image, and date and post url link for each repeater item from the 3 items in the related post data.
To start using Corvid: Go to the Wix Editor > Dev Mode > Turn on Dev Mode