Related Posts

Collection

​

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.

Page Elements

​

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.

Data

​

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

Code

​

We added the following code to the Post page:

1. Import the modules we need to work with data and navigation.

2. When the Post page loads, run the getAndLoadRelatedPosts() function with the current post data:

   1. Get the current post’s data using the getPost() function.

   2. 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. 

   3. Load the related posts repeater with the data, triggering the onItemReady event handler.

3. Add an wixLocation.onChange() event to call this function again after the user clicks on a related post

4. 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.