Featured articles
Sometimes, you want to show an article list filtered by a certain label. Our extension allows you to do that and show that list on any Help Center page.
At Lotus Themes, we offer an elegant and user-friendly way to show these forms:
as tiles.
Now your customers will see all available forms in a convenient and modern way.
Additionally, you can add an icon to each ticket form tile so your Submit a Request
page will look even better.
-
Unpack the downloaded
zip
file. There will be the following files:-
lotus-featured-articles.js
-
Readme.txt
-
-
In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.
-
Click the theme you want to edit to open it.
-
Click the Edit code button.
-
In the Assets section, click Add asset, then browse to select your files.
Select the
lotus-featured-articles.js
file from unpackedzip
. The files are added to your list of asset files. -
In your theme code configuration page under the templates directory, click the
document_head.hbs
file. -
In the
document_head.hbs
file, paste the following snippet:<script src="{{asset 'lotus-featured-articles.js'}}"></script>
-
In your theme code configuration page, click
on a template where you would like to display the list. Paste
the following code snippet:
<div class="lt-container lt-info-block-container lt-mb-9 is-hidden" x-data="window.Theme.featuredArticles('faq', 5)" x-init="fetchArticles()" x-cloak data-deatured-articles> <div class="lt-container-inner"> <h2 class="lt-fs-4 lt-fs-lg-2 lt-fw-bold">Featured articles</h2> <ul class="lt-row lt-row-cols-3 lt-list-unstyled"> <template x-for="(article, index) in featuredArticlesList" :key="index"> <li class=""> <a :href="article.html_url"> <span class="lt-fw-bold lt-d-sm-block lt-mb-2" x-text="article.name"></span> <span class="lt-fs-lg-6 lt-d-sm-block" x-text="LotusUtils.truncate(article.body, 100)"></span> </a> </li> </template> </ul> </div> </div>
- Click Publish.
By default, articles are filtered by the faq
label.
The maximum number of articles to show is 6, and each article's description
is truncated up to 100. You can customize these settings for sure.
Name | Type | Default | Description |
---|---|---|---|
label
|
String
|
faq
|
A label name to filter articles. |
limit
|
Number
|
6
|
The maximum number of articles to show. |
-
|
Number
|
100
|
The number of characters to display from the start of the article's body. |