Selectively hiding Help Center components using Curlybars

Return to top
Have more questions? Submit a request

47 Comments

  • Jason Fouchier

    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
    Community Moderator

    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

    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
    Community Moderator

    dastardly <div>s!

     

    Glad you're all set!

    0
  • Niraj Makwana

    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
    Community Moderator

    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

    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
    Community Moderator

    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

    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

    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

    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
  • Akhter, Shahroze

    Hi Jake Bantz is there a way to hide #article-sidenav from category pages that do not contain multiple articles?

    0
  • Jake Bantz

    Hi Akhter, Shahroze,

    I don't see any elements in my Copenhagen theme with the id of article-sidenav, but I did notice on the article template, that there is an article-sidebar class. If this is not what you're seeking, you can perhaps find a similar parameter to target (like I do below) on the template you're viewing.

    On that article template I was able to use an #isnt conditional statement to check the article count of the current section and conditionally hide the article-sidebar if there is only 1 article. Just after the <aside> tag with the class of article-sidebar, I added:

    {{#isnt section.article_count 1}}

    Then just before the close of the aside tag (</aside>), I added {{/isnt}} to manage the appropriate sidebar content based on the condition. I hope this helps!

    1
  • Akhter, Shahroze

    Hi Jake Bantz this works thanks a lot!!

    Can i get your advice on another thing - i was looking for an easier way to accomplish this. We have a form with a drop down and when a user selects a value from the drop down i want to show some text beneath it in a paragraph tag. Is there a way in Zendesk to achieve this can i create a hidden field on the form and hide/show it and change its text based on the drop down's selected value?

    The only way i was able to do it was to pick the drop down's ID and create a new node beneath it with javascript. 

    0
  • Jake Bantz

    Hi Akhter, Shahroze,

    You're executing one of the ways I've seen this done - to use some DOM manipulation/injection based on the selected value.

    Alternatively, you could indeed use some "dummy" ticket fields and add some text to their end-user descriptions which fits the messages you want to include (then anyone in your Support account could modify the text rather than needing to know how to code/update the template). It would be pretty simple to use CSS to hide these fields by default and then use some Javascript to reveal/hide the desired items (for example, only reveal the repurposed title/description and not reveal the actual ticket field input). This does come with some possible concerns:

    1. The agents in Support would see these "dummy" ticket fields in the sidebar of the ticket interface. Without a custom app to hide these fields, this could clutter things and be confusing for some agents.
    2. To have separate messages, you would either have to use Javascript to inject other text into the ticket field description (needs coding knowledge), or for every option that needs extra instruction, a new ticket field would have to be used.

    This workflow is unsupported, but should work by principal. Whether or not this is worth the work is up to you as it certainly is beyond the normal expected functionality of the end-user ticket form.

    0
  • Sarah Wambold

    Hello,

    Great information in this post! I am hoping someone can build on what is shared here to help solve our issue.

    Our guide uses the Lotus theme.

    We need to hide the selection “Feature Requests | Inventory” from the topics drop down on this page the New Community Posts page: https://support.shippingeasy.com/hc/en-us/community/posts/new

    On the new_community_post_page.hbs, at line 54, we are attempting to wrap the {{select 'topic'}} in code that essentially says “{{#isnt topic.id 200250979}}”. We found that topic id code by reading the code of the page.
    However, using the topic.id code did not work.

    Our question is: what do we need to write instead so that the specific option “Feature Requests | Inventory” is no longer an option from the drop down menu?

    The goal is to keep the "Feature Request | Inventory" page viewable, but no longer able to make posts about this topic. We have already closed comments on all existing posts and hidden the 'create a new post' link on the page. Removing this from the topic list is the last step.

    Thank you in advance for any help or direction!

     

    0
  • Nicole S.
    Zendesk Community Team

    Hey Sarah - We shared your question in this week's Zendesk Community Digest, so hopefully that will give it some additional visibility and some other users will chime in soon!

     
    0

Please sign in to leave a comment.

Powered by Zendesk