Dynamically show Most Viewed Posts

Hello,

I have a bunch of blog posts in my app and track the total # of unique views for each. Is there a way to create a list that dynamically shows say the 10 posts with the highest views? Right now, I just manually populate a “Most Popular” sheet and display the list, but I’d like to automate this.

One possible solution I thought of was just using my All Posts sheet, sort by # of Views and then limited the # of entries to 10. But how do I do it without showing the “See All” link? I tried to use CSS to hide the link, but it hides all the “See All” links and not just the one for this specific list.

div data-test=“app-horizontal-list” cols=“10” class=“sc-cCwQvm ccaWIF”
div class=“sc-xGAYn jEdJtV”
div class=“sc-kYQaHc BatEQ”>Most Popular </div
button data-test=“see-all” class=“sc-cSiBin eXcwcg”>See All</button
div

Thanks

2 Likes

Here it is @Joe_Gabriele

<pre><span><style>
[data-test="see-all"] {
display: none;
}

This code works with every type of list

1 Like

Thanks Lucas, but I have 6 other Inline lists on the same page, so the above code hides the “See All” for 6 vs just 1 particular Inline List. Anyway to isolate the button to just 1 particular list?

What you could do is add a filter condition to your inline list such that it only shows posts where views is greater than X.

But assuming that you want to show (say, for example) just 10 posts, then the tricky part would be dynamically determining the correct value for X. There should be a way to do it, but I’d need to think about that for a bit…

You can take a look at my app at: https://getjourneyer.com.

On the Home Tab, you’ll see several Inline Lists for “Featured”, “Most Popular” and then for different Continents. All lists are limited to display 10 as there could eventually be 100’s for each continent. I would like the option for people to click “See All” for the Continent lists, but for “Most Popular”, the “See All” option just doesn’t make much sense, especially when users can view all Posts under the Journey’s tab.

I would agree with @Darren_Murphy’s idea, but yes, determining the right cutoff point for a filter is tricky. I’m wondering if @Lucas_Pires’s idea with the CSS would work if you added an nthe child [1] or something like that to single out the first instance of ‘See All’.

2 Likes

I was trying here, but have no idea to do it

Maybe I’l just use the CSS to Hide as users can still go to the other Continent Lists via the Categories Tab. Thanks!

@Darren_Murphy gave you a good point too if you determine the right cutoff point for a filter

Here’s also what I did in one of my apps. You can use the filter (or the code) and add some “See All” button below. In my opinion it’s more intuitive, like facebook does

1 Like

Yea the tricky part is that because the app is fairly new, there isnt much view data. But that could be a decent solution down the road when I do have a better idea where the best cut off would be. Would be something I’d have to keep on top of though.

In your example, did you just set buttons to link to a deep link?

1 Like

In this case I set
Button > Link to screen > Relation based in what users Liked/Commented (List)

2 Likes

Your lucky day! :tada:

Thank @marcioferlan, he helpes me a lot and helped me to find this!

Obs:

This :nth-of-type (1) has to match the ordinal of the component that represents the inline, you know? If there are other components above the first inline, this ordinal has to be adjusted.

<style>
div[id*='screenScrollView'] > div > div:nth-of-type(1) button[data-test='see-all'] {
  display: none;
}
</style>
3 Likes

Awesome! Noob question, I know CSS can go in a Rich Text field, but how about HTML?

Also, the list I am adjusting is the 3rd list on the page, would I adjust the (1) to (3)?

Same

Actually, you gotta count how many components you have above. The order your component is in, you put the number

1 Like

Ahh so that’s how it works! Is that the “nth” part?

1 Like

So I tried putting everything from #1-13 in the (#) section and nothing worked to make the See All disappear. Am I doing something wrong?

div[id*='screenScrollView'] > div > div:nth-of-type(10) button[data-test='see-all'] { display: none; }

I counted and the inline list you want to put is 11th, so put (11)

Yea I tried 11 and still shows it. I also went the live site incase the display in Glide didnt show the update, but still shows. Very strange!

Try (3) and tell me

Ive tried using 1 - 13 lol