Example Description
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
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:
-
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.
Related Examples
Did this help?
|
Thanks for your feedback!

Trending Posts
Create your own custom trending posts feed.

Beginner

Related Items
Recommend products based on price, brand and more.

Intermediate

Custom Post Page
Create your own customised blog post page.

Intermediate