How to hide the content of a certain blog for the anonymous users?

[Myko_P]

The idea is to hide the content of a certain blog for the anonymous users. The blog title (link) should be still visible to them from the main page. But when they will try to go inside the blog, they should see no blog content but only "please register" message with the registration link.

Thank you!

[VikasB]

@Myko_P

It would require the customization. I think you want something like this(pop will be displayed for logged out user)

https://community.cengage.com/t5/Community-Exclusive/ct-p/Platforms

[nehaSharma]

@Myko_P 

In order to achieve this, you need to add a different class (for e.g. 'secured-content') to that particular content which you wish to hide from logged out users.

This can be achieved using CSS or Jquery, e.g. :

<#if user.anonymous>
<style>
  .secured-content {
     display: none;
  }
</style>
</#if>

[Myko_P]

Thanks, @VikasB ! It looks like exactly the thing I need. Can you share with me the code or give me the direction to how to create such kind of custom component?

[VikasB · Accepted solution]

@Myko_P

You need to put these script in the page header. 
Here is the script to get the page id. You just need to pass the restricted blog id

<#assign restrictedAccess   = false >
<#assign currentUrl         =  coreNode.webUi.url >
<#assign redictionUrl       = webUi.getUserLoginPageUrl(currentUrl) >
<#assign referrerUrl        = http.request.referrer!coreNode.webUi.url >

<#function isRestrictedCat currentNodeList restrictedNode >
    <#list restrictedNode as node>
        <#if currentNodeList?seq_contains(node)>
            <#return true>
        </#if>
    </#list>
    <#return false>
</#function>
<#--
<#assign checkID = 'BlogID'>
-->
<#assign checkIDArray = ["Platforms","UnlimitedProfDev"] >

<#attempt>
  <#assign restrictedNodeList = [] >
  <#list coreNode.ancestors?reverse as ansc >
     <#assign restrictedNodeList = restrictedNodeList + [ansc.id]  >
  </#list>
  <#assign restrictedNodeList = restrictedNodeList + [coreNode.id]  >
  <#if isRestrictedCat(restrictedNodeList , checkIDArray) && user.anonymous >
 
  
    <#assign restrictedAccess  = true >
  </#if> 
<#recover>

</#attempt>

Here is another script which will run on document ready and will get the values from above script. 

<script>
    $(document).ready(function(){
        var restrictedAccess    = ${restrictedAccess?string};
        var currentPageUrl      = '${currentUrl}';
        var referrerPageUrl     = '${referrerUrl}';
        var baseUrl             = window.location.origin;
        if(restrictedAccess){
            setTimeout(function(){
                $('#premiumModal').modal('show');
            }, 700);
        }
        $('#premiumModal').one('hidden.bs.modal',function(){
            if(currentPageUrl != referrerPageUrl){
                window.location = referrerPageUrl;
            }else{
                window.location = baseUrl;
            }
        }).modal('hide');
    });
</script>

[Myko_P]

Thanks @VikasB , your example helped me a lot 

[Myko_P]

@VikasBSo I should make the custom component (#premiumModal in your example) and after that put both code snippets (Freemarker with the restricted Blog ID and JS with the modal component name) in the community wrapper (header) to get your solution work for my case?

[Myko_P]

Hi @VikasB,
I am still trying to implement your solution but have no luck with that for now. Could you please share the whole custom component code, including the modal html/css?

Should I make the custom component and put inside all the parts together: freemarker script, JS code and the modal HTML/CSS in the following sequence?

1. Freemarker script

2. JS code

3. Modal's HTML/CSS

Or should I put some of these in the community header (wrapper)?

Thank you!

[VikasB]

@Myko_P

All the code snippets(JS, Freemarker, HTML) are on the same page so order does not make any difference.  It would not be possible to share the whole component code but I can help you to figure out the issue. 

1. Create a custom component and add code to it. 
2. Add it to the standard header component on studio Page tab so it can work on all the pages.

[Myko_P]

Thanks, @VikasB

hidden.bs.modal

The code snippet you provided requires Bootstrap, right?

Unfortunately, due to the technical issues with our legacy custom skin code, I can't use Bootstrap in our project. But I can use Bulma instead.

One thing I found that when you are using Bulma you can activate the modal by just adding the is-active modifier on the .modal container.  The second thing is the Bulma does not include any JavaScript interaction. You will have to implement the class toggle by yourself if you need . So I tried to partially use the approach which was mentioned previously by @nehaSharma and wrote the following custom component:

<#if user.anonymous>
<!-- Modal card custom styles-->
...some code...
<!-- Modal card end-->
</#if>

Could I just pass the required Board IDs using FreeMarker only with no JS involved? Thank you so much for your help!