Recently, CheckMates introduced banners aimed at encouraging our community users to log in or register. This fairly simple idea has already proved successful, so I thought it could be helpful to ...
Updated 28 days ago
Version 2.0
Blog Post
This is fantastic! I'd love to know how you coded this in the custom components and how you used custom tags for this solution.
It's a bit complicated to explain as it requires components, CSS, and layout changes.
At a high level, I created two new components (one for blogs, one for regular forums) that embed several of the components of the BlogArticlePage and ForumTopicPage in a DIV that is hidden.
Why? So Google can still index the post, but the end user will see the prompt to log in.
To reference a component in another component, do something like the following:
<@component id="topic-message" />The exact components you will embed depend on your existing page layouts.
To determine IF a post is gated, I use something like the following:
<#-- This query should only return a single result if the tag is set in the post. Otherwise it should return zero results -->
<#assign gated_query = "SELECT custom_tag_scope FROM messages WHERE custom_tags.id = 'isgated' AND id = '${id}'" />
<#assign gated_result = rest("2.0", "/search?q=" + gated_query?url).data.size!0 />
<#if gated_result gt 0 >
<#assign gated = true />
<#else>
<#assign gated = false />
</#if>isgated is the ID of my Custom Tag and it's an "is present" type.
Based on that plus other logic (some blogs aren't gated by design, for instance), we can render a partial message in place of the topic-message component.
That code fragment looks like this:
<#assign subject = (page.context.thread.topicMessage.subject)!"" />
<h2 itemprop="name" class="message-subject">
<span class="lia-message-unread">
<div class="lia-message-subject" style="font-size: 22px;color: #2d2e31;margin-bottom: 5px;">${subject?no_esc}</div>
</span>
</h2>
<#assign body = (page.context.thread.topicMessage.body)!"" />
<div class="short-message" style="font-size: 16px;"> ${utils.html.truncate(1200, body, "...")?no_esc} </div>
<div class="footer_bottom"> <div></div> </div
<span>TO READ THE FULL POST</span>
<div class="buttons">
<a class="read-more" href="yourRegistrationURL" target="_blank">REGISTER</a>
<a class="read-more" href="yourLoginURL" target="_blank">SIGN IN</a>
</div>
<span class="extra-info">it's simple and free</span>
<@component id="thread-pager" />The body is truncated to 1200 characters (you can obviously adjust this).
Also, to make it easy to assign the custom tag to the message, I added the modbar-toggle component to the ForumMessage and BlogArticle layouts, which allows me to easily set the is_gated flag easily.