How to show truncated articles to non-members while avoiding slow page loading? Answered

September 28, 2023 09:18
8 comments

Hi! I am trying to build a members-only blog, so I’m looking to put a paywall half-way down all the articles shown on the site.

The simplest solution would be to create two versions of the rich text element:

text element 1 is the full-length text, shown only to premium members
text element 2 is the truncated text (maybe 800px tall) that is shown to non-premium members as a preview

However, I’m concerned that this will result in slow page loading, as we’re loading that same rich text from the CMS twice.

What are our other options? Is there some code I can implement that will adjust the height of the rich text element from a height of 800px to “auto” if the user is a logged-in paying user?

Comments

8 comments

John Matias
- September 28, 2023 09:19
Could you use an overlay on top of the rich text element? Maybe it has some opacity or a gradient on it with a vertical height based on viewport percentage. Then the element is hidden when they sign up or login.

0
Eric Button
- September 28, 2023 09:20
this might work, but then there’d be a long section of emptiness until you get to the “related articles” section…

0
Julian Galluzzo
- September 28, 2023 09:21
Hey Eric Button - good news - we have a guide on that! https://webflow.com/made-in-webflow/website/gate-full-articles

0
Eric Button
- September 28, 2023 09:22
Thanks Julian Galluzzo! My one concern is that this still requires more content to load on the page than is ideal, and is suboptimal for SEO. (Also we’d have version control issues if we have the first bit of every article duplicated in our CMS)

Is there any way to add a class to an element IF the user is a paying user? We could change the height of the div this way. This would solve these problems… 🙏

0

Chukwudi

September 28, 2023 09:22

Hi Eric,

If you're looking to add a class to an element IF the user is a paying user, you may have to do that with the custom script below.

<script>
window.$memberstackDom.getCurrentMember().then((member) => {
  if (member.data) {
    const planConnections = member.data["planConnections"];
    if (planConnections && planConnections.length > 0) {
      let hasPaidPlan = false;      
      for (const plan of planConnections) {     
        if (plan.type !== "FREE") {
          hasPaidPlan = true;
          break;
        }
      }
      
      if (hasPaidPlan) {
        // Get the element by its ID or any other selector
          const myElement = document.getElementById("myElementId");
      // Add a class to the element
          myElement.classList.add("newClassName");
      }
    }
  }
});
</script>

Remember to replace myElementId with the element ID on your website and newClassName with the class name you want to add to the element.

Eric Button
- September 28, 2023 09:23
works perfectly, thank you!

0
Chukwudi
- September 28, 2023 09:24
You're welcome, Eric 🙂

0
Duncan from Memberstack
- September 28, 2023 09:24
Eric Button and Chukwudi Also checkout these two data attributes which might help.

https://memberstack.slack.com/archives/C01FDDM9U3F/p1691419586304419

0

Please sign in to leave a comment.