What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

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

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

Replies 2 (2)

EcomGraduates
Shopify Partner
784 68 112
  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 %}

 


 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner



smilenaren
Shopify Partner
2 0 2

doesn't work on sort button click any other solution?