filter a blog by date, old to new, new to old, z-a, and

Mohd_Shariq
Shopify Partner
3 0 0

Hello dear,

 

i want create a custom blog filter  by featured, old to new, new to old, a-z, and a-z. without app

 

Please help how can create this 

 

Thanks and regard

Reply 1 (1)

EcomGraduates
Shopify Partner
588 48 77
  1. Navigate to the template file for the blog you want to add the filter to (usually called "blog.liquid").
  2. Add a form to the top of the file where users can select the sorting option they want. The form should have a select element with options for "featured", "old to new", "new to old", "a-z", and "z-a".
  3. Add a switch case statement to the top of the loop that displays the blog posts. This switch case should check the selected option and sort the blog posts accordingly.

 

here is an example  

<form>
  <label for="sort-by">Sort By:</label>
  <select id="sort-by" name="sort-by">
    <option value="featured">Featured</option>
    <option value="old-new">Old to New</option>
    <option value="new-old">New to Old</option>
    <option value="a-z">A-Z</option>
    <option value="z-a">Z-A</option>
  </select>
  <input type="submit" value="Sort">
</form>

{% assign posts = blog.articles %}
{% case sort-by %}
  {% when 'featured' %}
    {% assign posts = blog.articles | where: 'featured', true %}
  {% when 'old-new' %}
    {% assign posts = blog.articles | sort: 'published_at' %}
  {% when 'new-old' %}
    {% assign posts = blog.articles | sort: 'published_at' | reverse %}
  {% when 'a-z' %}
    {% assign posts = blog.articles | sort: 'title' %}
  {% when 'z-a' %}
    {% assign posts = blog.articles | sort: 'title' | reverse %}
{% endcase %}

{% for post in posts %}
  ... code to display each blog post ...
{% endfor %}