How do i show more than 24 promoted articles on the home page?

Answered

11 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Edwin, just copy and paste the below code at your home_page.hbs at the bottom and you can see all your promoted article would be showing on homepage:

     

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

    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}

     

    Note: The above promoted article code can be found in default Copenhagen Theme at Homepage file.

     

     

    Thanks

    Team Diziana

     

    1
  • Brett Bowser
    Zendesk Community Manager

    Hey Edwin,

    It looks like Ifra Saqlain provided a response but it didn't carry over after our maintenance took place over the weekend. I'm copying her response below. Thanks for your help Ifra!

    Hi Edwin, just copy and paste the below code at your home_page.hbs at the bottom and you can see all your promoted article would be showing on homepage:

     

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

    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}

     

    Thanks

    Team Diziana

    0
  • Edwin Woo

    Ifra Saqlain Thank you, i changed the name from "Promoted Articles" to "FAQs" would i need to change 

    <h2>{{t 'promoted_articles'}}</h2> to <h2>{{t 'FAQs'}}</h2>

    https://support.vida.com/hc/en-us

    Also just curious, would it be possible to add like a "Show more" button? I think showing all the articles would be too much. Maybe show the top 10 articles then users can click on the "Show more" button to show all the articles.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Edwin, please follow the below steps to hide more than 10 promoted articles and to add show more button to show all promoted articles:

     

    1). Copy and paste the show more button code inside the promoted articles code just after the <ul> tag on homepage (where you have added the promoted article code).

    <button id="show_more">Show more</button>

     

    Screenshot for the same:

     

    2). Copy and paste the below CSS code at the bottom on style.css file.

    .knowledge-base .article-list >li{
    display:none
    }


    .knowledge-base .article-list > li:nth-child(-n+10),
    .knowledge-base .article-list > li.show_all_items{
    display:block;
    }

     

    Screenshot for the same:

     

    3). Copy and paste the script function on script.js file at the bottom but under the DOM function.

    document.addEventListener('DOMContentLoaded', function() {

    .............



    // Show all promoted article items on homepage - Start

    function showAllItems(){
    var _x = document.querySelector("#show_more");
    _x.addEventListener('click', function(e){
    document.querySelectorAll('.article-list.promoted-articles > li').forEach(function(el){
    el.classList.add('show_all_items');
    })
    })
    }

    showAllItems();

    // End


    });


     

    Screenshot for the same:

     

    I know I'm too late to answer but.... :)

    If any confusion, do let me know.

    Thanks

    Ifra Saqlain

     

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    But the question for the title -

    <h2>{{t 'promoted_articles'}}</h2>  to  <h2>{{t 'FAQs'}}</h2>

     

    It's not possible, you can write FAQ under the <h2> tag or create Dynamic Content for this.

     

    0
  • Edwin Woo

    Ifra Saqlain thank you! It seems to not be working, i think the issue is that i dont have the DOM function 

    document.addEventListener('DOMContentLoaded', function() {

    in the script.js file.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    See the issue in the console tab:

     

     

    Now I have fixed your script code. Now you will have to do only the few below steps:

    1). Remove your all script code from the script.js file.

    2). Copy the below script code.

    /*

    * jQuery v1.9.1 included

    */

    $(document).ready(function() {

    // social share popups

    $(".share a").click(function(e) {

    e.preventDefault();

    window.open(this.href, "", "height = 500, width = 500");

    });

    // show form controls when the textarea receives focus or backbutton is used and value exists

    var $commentContainerTextarea = $(".comment-container textarea"),

    $commentContainerFormControls = $(".comment-form-controls, .comment-ccs");

    $commentContainerTextarea.one("focus", function() {

    $commentContainerFormControls.show();

    });

    if ($commentContainerTextarea.val() !== "") {

    $commentContainerFormControls.show();

    }

    // Expand Request comment form when Add to conversation is clicked

    var $showRequestCommentContainerTrigger = $(".request-container .comment-container .comment-show-container"),

    $requestCommentFields = $(".request-container .comment-container .comment-fields"),

    $requestCommentSubmit = $(".request-container .comment-container .request-submit-comment");

    $showRequestCommentContainerTrigger.on("click", function() {

    $showRequestCommentContainerTrigger.hide();

    $requestCommentFields.show();

    $requestCommentSubmit.show();

    $commentContainerTextarea.focus();

    });

    // Mark as solved button

    var $requestMarkAsSolvedButton = $(".request-container .mark-as-solved:not([data-disabled])"),

    $requestMarkAsSolvedCheckbox = $(".request-container .comment-container input[type=checkbox]"),

    $requestCommentSubmitButton = $(".request-container .comment-container input[type=submit]");

    $requestMarkAsSolvedButton.on("click", function () {

    $requestMarkAsSolvedCheckbox.attr("checked", true);

    $requestCommentSubmitButton.prop("disabled", true);

    $(this).attr("data-disabled", true).closest("form").submit();

    });

    // Change Mark as solved text according to whether comment is filled

    var $requestCommentTextarea = $(".request-container .comment-container textarea");

    $requestCommentTextarea.on("keyup", function() {

    if ($requestCommentTextarea.val() !== "") {

    $requestMarkAsSolvedButton.text($requestMarkAsSolvedButton.data("solve-and-submit-translation"));

    $requestCommentSubmitButton.prop("disabled", false);

    } else {

    $requestMarkAsSolvedButton.text($requestMarkAsSolvedButton.data("solve-translation"));

    $requestCommentSubmitButton.prop("disabled", true);

    }

    });

    // Disable submit button if textarea is empty

    if ($requestCommentTextarea.val() === "") {

    $requestCommentSubmitButton.prop("disabled", true);

    }

    // Submit requests filter form in the request list page

    $("#request-status-select, #request-organization-select")

    .on("change", function() {

    search();

    });

    // Submit requests filter form in the request list page

    $("#quick-search").on("keypress", function(e) {

    if (e.which === 13) {

    search();

    }

    });

    function search() {

    window.location.search = $.param({

    query: $("#quick-search").val(),

    status: $("#request-status-select").val(),

    organization_id: $("#request-organization-select").val()

    });

    }

    $(".header .icon-menu").on("click", function(e) {

    e.stopPropagation();

    var menu = document.getElementById("user-nav");

    var isExpanded = menu.getAttribute("aria-expanded") === "true";

    menu.setAttribute("aria-expanded", !isExpanded);

    });

    if ($("#user-nav").children().length === 0) {

    $(".header .icon-menu").hide();

    }

    // Submit organization form in the request page

    $("#request-organization select").on("change", function() {

    this.form.submit();

    });

    // Toggles expanded aria to collapsible elements

    $(".collapsible-nav, .collapsible-sidebar").on("click", function(e) {

    e.stopPropagation();

    var isExpanded = this.getAttribute("aria-expanded") === "true";

    this.setAttribute("aria-expanded", !isExpanded);

    });

    var ticketForm = location.search.split('ticket_form_id=')[1];

    if(ticketForm == 1500001057501) {

    $('#request_subject').val('Account Cancellation Request');

    $('#request_subject').parent('.request_subject').hide();

    }

    // Show all promoted article items on homepage - Start

    function showAllItems(){

    var _x = document.querySelector("#show_more");

    _x.addEventListener('click', function(e){

    document.querySelectorAll('.article-list.promoted-articles > li').forEach(function(el){

    el.classList.add('show_all_items');

    })

    })

    }

    showAllItems();

    // End

    });
    3). Paste it on your script.js file as it is, because it's your code which I have fixed now. 
    4). Test and then any issue, do let me know. I know it'll definitely work.
     
     
    Thanks
    Ifra Saqlain
     
    0
  • Edwin Woo

    Ifra Saqlain Thanks, i just copied and pasted the script to the script.js file. I also had to edit the home_page.hbs and now the "show more" button shows up. There are a couple of issues now:

    1. The show more button does not work. I added the 11th article and it still shows up with the rest of the articles. 

    2. The spacing and position of the "show more" button does not look right. I think the button should be in the middle of the FAQ section and also the button should be lowered a little bit so its not touching the line.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    It's working, I checked on your homepage:

    Before clicking: Is there a Desktop version of the Vida app? this article hidden now.

     

    After Clicking: Showing now

     

    And button color, position, you can set it via CSS by yourself or send me the UI of button so I'll update the button style and share the code here.

    Thanks

     

    0
  • Edwin Woo

    Ifra Saqlain ok and would it be possible to include a button that says "Shoe Less" once the "Show More" button is clicked?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Yes, it's possible via JS.

     

    Replace your button script code which I provided before with the new below:

    function showAllItems(){
    var _x = document.querySelector("#show_more");
    document.querySelector("#show_more").innerHTML = 'Show more';

    _x.addEventListener('click', function(e){
    document.querySelectorAll('.article-list.promoted-articles > li').forEach(function(el){
    el.classList.add('show_all_items');
    document.querySelector("#show_more").innerHTML = 'Shoe less';
    })
    })
    }


    showAllItems();

     

    Now, go to your home_page.hbs file and remove the hard coded text from the button and your current button would be empty, see below:

    <button id="show_more"> </button>

     

     

    Screenshot for the same:

     

    Thanks

    Ifra Saqlain

     

    0

Please sign in to leave a comment.

Powered by Zendesk