Browse By Category

7min
This Navigation Option can be used in combination with other Navigation Options.
﻿
Introduction
This Article will show:
How to include this Navigation Option when including the Blog
The Default Layouts with explanation
How to give the User Feedback on the type of results they are seeing.
Add "use_adv_search" parameter to include for Blog List View
The "use_adv_search" parameter is needed to allow filtering from the URL to apply to your Blog Posts, this can be added to the include for Blog List like so:
HTML
{%- include 'module'
    id: '3'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'created_at'
    sort_order: 'desc'
    use_adv_search: 'true' 
-%}
{%- include 'module'
    id: '3'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'created_at'
    sort_order: 'desc'
    use_adv_search: 'true' 
-%}
﻿
To Include this Option
Include the following liquid to dynamically get a list of available Blog Categories for the User to select:
HTML
{%- include 'modules/siteglide_system/get/get_categories'
    categories_layout: 'default/categories'
    categories_layout_type: 'sidebar' 
-%}
{%- include 'modules/siteglide_system/get/get_categories'
    categories_layout: 'default/categories'
    categories_layout_type: 'sidebar' 
-%}
﻿
The parameters refers to layout which will be used to display the Category links. <code>categories_layout</code>should be the root layout folder where your blog layout is contained. 
The category_layout_type is the sub-folder where the wrapper and item files are stored for filtering the blog list by category. The category_layout_type exists because some blog layouts may have a different partial layout for Categories within a Blog preview, footer or sidebar.
Default Layout Examples with Explanation
wrapper.liquid
HTML
<div class="row no-gutters">
  <div class="col-12">
    <h2>Categories</h2>
    <ul>
      {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
    </ul>
  </div>
</div>
<div class="row no-gutters">
  <div class="col-12">
    <h2>Categories</h2>
    <ul>
      {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
    </ul>
  </div>
</div>
﻿
item.liquid
HTML
<li>
    <a href="{{context.location.pathname}}?category={{this.id}}">{{this.properties.name}}</a>
</li>
<li>
    <a href="{{context.location.pathname}}?category={{this.id}}">{{this.properties.name}}</a>
</li>
﻿
The link should be the slug of your Blog List view followed by ?category={{this.id}}. Siteglide will be able to read the Category id from the URL and populate the List View on refresh. In this example we use the context object to automatically get the slug of the current Blog Page.
User Feedback
You may wish to give the User some feedback about the current filter/ search terms that are applied on the Blog list page. For Categories, you can use <code>context.exports</code> object to get the name of the category you are filtering by:
HTML
{% if context.params.category %}
  Posts about {{context.exports.categories.data[context.params.category].name}}
{% endif %}
{% if context.params.category %}
  Posts about {{context.exports.categories.data[context.params.category].name}}
{% endif %}
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
Browse by Keyword
Browse by Author