Selectively hiding Help Center components using Curlybars

Have more questions? Submit a request

41 Comments

  • Jason Fouchier
    Comment actions Permalink

    Hey All,

         I basically followed the same path that Amy Gracer had posted with mixed results. It removes the subject/title, but I am having issues hiding the rest of the data in the row. Does this need to be a JavaScript function, or can it be done in the HTML with the handlebars stuff?

     

    Thanks,

         Jason Fouchier

    0
  • Amy Gracer
    Comment actions Permalink

    Hi Jason,

    What exactly are you trying to do? 

    My code from the requests_page is as follows. Hides any request with a type=task. 

      --Amy

     

    <thead>
    <tr>
    <th>{{t 'subject'}}</th>
    <th>{{t 'id'}}</th>
    <th>
    {{#is current_filter.identifier 'my'}} {{#link 'requests' sort_by='created_at'}}{{t 'created'}}{{/link}} {{else}} {{t 'requester'}}
    {{/is}}
    </th>
    <th>{{#link 'requests' sort_by='updated_at'}}{{t 'last_activity'}}{{/link}}</th>
    <th>
    {{t 'status'}}
    </th>
    {{!--<th>
    Type
    </th>--}}
    </tr>
    </thead>

    <tbody>
    {{#each requests}}
    {{#isnt type "task"}}

    <tr {{#is status 'closed'}} class="request-closed" {{/is}}>
    <td class="request-info requests-table-info">
    <a href="{{url}}" class="striped-list-title" title="{{subject}}">
    {{#if subject}} {{subject}} {{else}} {{excerpt description characters=50}} {{/if}}
    </a>

    <!-- Visible on mobile -->
    <div class="requests-table-meta meta-group">
    <span class="meta-data">#{{id}}</span>
    <span class="meta-data">{{date created_at timeago=true}}</span>
    <span class="status-label status-label-{{status}}" title="{{status_description}}">
    {{status_name}}
    </span>
    </div>
    </td>
    <td>#{{id}}</td>
    <td>
    {{#is ../current_filter.identifier 'my'}} {{date created_at timeago=true}} {{else}} {{requester.name}} {{/is}}
    </td>
    <td>{{date updated_at timeago=true}}</td>
    <td class="requests-table-status">
    <span class="status-label status-label-{{status}}" title="{{status_description}}">
    {{status_name}}
    </span>
    </td>



    </tr>{{/isnt}}
    {{/each}}

    </tbody>
    </table>
    0
  • Jason Fouchier
    Comment actions Permalink

    Hi Amy,

         Thanks for the fast response and code example. It turns out that I had a misplaced </div> tucked away in the code, snug as a bug in a rug. The example you provided helped me find the little culprit, everything is working as intended now. Thanks a million.

     

    Thanks,

         Jason Fouchier

    0
  • Amy Gracer
    Comment actions Permalink

    dastardly <div>s!

     

    Glad you're all set!

    0
  • Niraj Makwana
    Comment actions Permalink

    Can we hide the category so it is doesn't show to signed- in users, but does show to Agents and Managers? 

    it be would be a hidden section for just agents and managers to view and access?

    0
  • Trapta
    Comment actions Permalink

    Hi @Niraj Makwana,

    You can always set the visibility of articles in any section to agents and managers. Once the visibility of all the articles in a section is set to agents and managers, the section will automatically become hidden for end-users and anonymous users.

    The same goes for the category, if the articles of each section in a category are marked to be visible for agents and managers only, the category will automatically become hidden for end-users and anonymous users.

    Let me know if this solves your issue.

    Team Diziana

    0
  • Ashley Russell
    Comment actions Permalink

    I have been following this article and have tried a few of the solutions but I fear they may not apply to me since I'm using a different theme. I know there isn't much support I can get for this, but I thought I'd try anyways. 

    I'm using the delta theme - it has all of our categories, sections, and articles in a side nav bar but the categories and sections aren't clickable. Like the image below. I want to hide the entire FAQ section. We have all of these answers in one article but I want the answer bot to pull up each one individually so I'm making an article for each question. 

    I want everyone to be able to search for terms in our FAQ using the answer bot but I don't want every article to show in the side nav. Is there a way to hide the category and section even if that category/section isn't a clickable url on the site? It still exists but I can't seem to get those articles to hide. This is the category: https://guide.lightform.com/hc/en-us/categories/360002625813 

     

    0
  • Chris Stock
    Comment actions Permalink

    Ashley Russell that should be possible to do using helpers. I assume you've got some handlebars markup for your sidebar that looks something like: {{#each categories}}? Within that each you'll have the HTML for your list, so you should just be able to wrap that in an {{#isnt category.id 12345678}}. Difficult to know exactly without seeing your template, but something like this should work.

     

    0
  • Ashley Russell
    Comment actions Permalink

    Hi Chris,

     

    I do have the {{each categories}} on our home_page.hbs theme and wrapped in the isnt markup. Doesn't seem to have worked. Could it be because the category page isn't actually a clickable page? I've attached the home page code with my edit. Any advice is extremely appreciated! 

    <div style="text-align:left;">
    <section class="title-block">
    <p> </p>
    <h1>Lightform Guide</h1>
    <h2>Welcome to the Lightform Guide. Learn all about Lightform devices and how to create epic content with Lightform Creator.</h2>
    <img src="{{asset 'final_fam-crop-close-1.png'}}" alt="LF1 and Lightform Creator" />


    <!-- <div class="embed"><iframe src="//www.youtube-nocookie.com/embed/uFTlzqI7ldw" width="560" height="315" frameborder="0" allowfullscreen=""></iframe></div> -->

    <div style="text-align:left;">
    <p>&nbsp;</p>
    <a class="btn btn--primary btn-homepage" href="https://guide.lightform.com/hc/en-us/articles/360012911733">Get Started</a>
    <a class="btn btn--primary btn-homepage" href="https://guide.lightform.com/hc/en-us/articles/360012546274">Download Lightform Creator</a>
    </div>
    </div>
    <p>&nbsp;</p>
    </section>

     

     

     

     

     

    <section class="submit-ticket">
    <h3 class="h3">Didn’t find what you were looking for?</h3>
    <p class="h5">Contact support@lightform.com</p>
    {{link 'new_request' class='btn btn--default'}}
    </section>

    <!-- <p>Lightform Guide is an early set of tutorials, software downloads and resources to get you started with Lightform's Private Beta. These articles are intended to be thorough and self explanatory, however, since we are constantly adding new features it is almost a guarantee that information will be missing, wrong, or outdated.</p>
    <p>We appreciate your participation in this program and efforts to help improve Lightform before our public launch.</p>

    <div class="callout callout--danger">
    <h4 class="callout__title">Evaluation Purposes Only</h4>
    <p>Please note that your participation in the Early Access Program is under NDA which limits your use of the LF1 and Lightform Creator software to <strong>confidential evaluation purposes only</strong>. Commercial use is strictly prohibited.</p>
    </div>-->

    <!--
    <section class="section activity">
    {{recent_activity scope='community'}}
    </section>
    -->


    <!-- <h3>Featured Articles</h3> -->
    {{#is settings.toggle_category_list 'yes'}}
    {{#if categories}}
    <section class="home-categories">
    <ul class="list-unstyled">
    {{#each categories}}
    {{#isnt id 360002625813}}
    <li class="home-categories__item">
    <a href="{{url}}" class="home-categories__link">
    <div class="home-categories__icon home-categories__icon--{{id}}">
    <svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle stroke="#FFB74D" fill="#FFD550" cx="30" cy="30" r="30"/><g stroke="#8D6E63" stroke-linejoin="round"><g transform="translate(29.5 30.5)"><path stroke-linecap="round" d="M12.78 8.28L9.03 4.53 5.28 8.28"/><circle cx="9.03" cy="9.03" r="9"/><path d="M9.03 13.53v-9" stroke-linecap="round"/></g><g stroke-linecap="round"><path d="M40.03 20.03v-3h-19.5v-3h-7.5v23.25a2.25 2.25 0 1 0 4.5 0V20.03h25.5v6.75M15.28 39.53h10.5"/></g></g></g></svg>
    </div>
    <div class="home-categories__content">
    <h2 class="h3 home-categories__title">{{name}}</h2>
    <p>{{excerpt description characters=55}}</p>
    </div>
    </a>
    </li>
    {{/isnt}}
    {{/each}}
    </ul>
    </section>
    {{/if}}

    {{/is}}


    {{#is settings.toggle_home_tabs 'yes'}}
    <div class="tabs home-tabs">
    <div class="tabs-menu">
    <span class="tabs-link is-active"><span class="fa fa-star-o"></span> {{t 'promoted_articles'}}</span>
    <!--<span class="tabs-link"><span class="fa fa-clock-o"></span> {{t 'community'}}</span>-->
    </div>
    <div class="tab">
    <div class="tab-articles">
    <ul class="tab-articles__list list-unstyled">
    {{#each promoted_articles}}
    <li class="tab-articles__item">
    <a class="tab-articles__title" href="{{url}}">{{title}}</a>
    <p class="tab-articles__discr">{{excerpt body characters=100}}</p>
    </li>
    {{/each}}
    </ul>
    </div>
    </div>
    <div class="tab is-hidden">
    {{#if help_center.community_enabled}}
    <div class="recent-activity">
    {{recent_activity scope='community'}}
    </div>
    {{/if}}
    </div>
    </div>

    {{/is}}
    <section class="section hero">
    <div class="hero-inner">
    {{search submit=false instant=true class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    {{#isnt id 360002625813}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">{{name}}</h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/isnt}}
    {{else}}
    {{#each sections}}
    <li class="blocks-item {{#if internal}}blocks-item-internal{{/if}}">
    <a href='{{url}}' class="blocks-item-link">
    <h4 class="blocks-item-title">
    {{name}}
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </h4>
    <p class="blocks-item-description">{{excerpt description}}</p>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    {{#if promoted_articles}}
    <section class="articles">
    <h3>{{t 'promoted_articles'}}</h3>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section activity">
    {{recent_activity}}
    </section>
    </div>

    0
  • Amie B
    Comment actions Permalink

    Hey Ashlee, 

    You can easily hide code which will then render that part hidden/ not visible to the end-user on the help center. I'm having a little trouble from your screenshot in your post, compared to your HC homepage, trying to figure out exactly what you want to hide so I can show you how to do it. 

    Are you able to load up a screenshot of your full hc homepage, or screenshot of full screen of the HC and then show me on there what exactly you want to hide? 

    I think I also found you on linkedin and send an invite to connect. Feel free to accept and I'll be happy to chat with you on there if you like for help. :)

    Best,

    Amie

    0
  • Marc Binns
    Comment actions Permalink

    Hello everyone,

    There's a lot of useful information here and in related articles, but sadly nothing quite covered what I'm struggling to achieve.

    I would like to create an if statement based on a users' segment, so I can show/hide content if they are a member of a particular segment. Unfortunately, it is not enough to just use their role.
    Having studied the documentation on "Curlybars" it doesn't seem that the user segment information is exposed, so how can I achieve this?

    Thank you for your time and efforts!
    -Marc

    0

Please sign in to leave a comment.

Powered by Zendesk