Display blogs by tag filters dawn theme

[benorama89]

Hi all,

I have blog which is for recipes and i want to display certain blog posts / recipe's on collection pages or product pages which is filtered by tags.

Currently the only work around i have is creating multiple category's under blogs which is not ideal.

Lets say for instance, one collection is cheese. Then i want all blog posts with the tag cheese to show up on this page.

Any help would be appreciated. 

[PaulNewton]

For less than 50 articles try the following starting point if you have an OS2.0 theme custom-liquid section or block for the relevant template types(collection,product,etc).

Beyond 50 articles you will need much more advanced approaches because of forloop pagination limits.

This is a common topic on the forums to search "related blog articles by tag" if you need to DIY it alone.

{%- assign blog_handle = "recipes" -%}
{%- assign blog_tag = "cheese" -%}

{%- liquid 
  # Paul Newton related blog articles by tag example
  assign related_blog = blogs[blog_handle]
  assign object = collection | default: product
  if object.tags contains blog_tag
    # this will only loop over the first 50 articles after that you must start using pagination, or advanced tricks like map filter, where filter, or frontend ajax,
    for article in related_blog.articles 
      if article contains blog_tag
        echo  article.title | link_to: article.url
      endif
    endfor
  endif

-%}

[benorama89]

Thanks for this, however wouldn’t that mean that only one tag is displayed
on all blog posts?

What if I have multiple pages which need tag specific blogs on each page?

[PaulNewton]

You adapt the code to suit to need.

So you'd change what the tag is based on the product either using the handle, or a metafield definition.

{%- assign object = collection | default: product -%}
{%- assign blog_tag = object.metafields.content.related_blog_tag -%}

Or go over all the products, or collections tags and match against a special tag that contains a special value like related_blog_tag_ that indicates which tag to use, i.e. related_blog_tag_cheese for the cheese collection.

Then get the tag in liquid:

{%- liquid 
  assign object = collection | default: product

  for tag in object.tags
    if object.tag contains "related_blog_tag_"
      assign blog_tag = tag | remove: "related_blog_tag_"
    endif
  endfor 
-%}

 Or pre underscore the special tags if you later need to try and hide them on the frontend (i.e. _related_blog_tag_cheese )

But what that actual final logic takes work.

[joelferrell]

I did something similar to below... It's not perfect as it has to load all the blog posts and then filter them out. 

Set a metafield on your collection page that refers to the tag found on the blog post you want to show. For example: I set a metafield of "swings" on a few of my blog posts and then select the corresponding blog using a section setting.

{% schema %}
{
  "name": "Blog posts Tagged",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "Blog"
    },
    {
      "type": "range",
      "id": "blog_posts_count",
      "label": "Blog posts to show",
      "min": 3,
      "max": 12,
      "step": 3,
      "default": 12
     }
]
}
{% endschema %}

I set a limit of 3 (start_limit variable), but you can change that as needed. As mentioned above, you can't load over 50 without pagination, but unless you have a lot of posts, it shouldn't be a problem. Just increase the blog_posts_count

{%- assign blog = section.settings.blog -%}
{%- assign tag_metafield = collection.metafields.custom_fields.blog_tag -%}
{%- assign start_limit = 1 -%}

{%- for article in blog.articles limit: section.settings.blog_posts_count -%}
    {%- if article.tags contains tag_metafield and start_limit <= 3 -%}
          {%- assign start_limit = start_limit | plus: 1 -%}
              
          <div class="block-list__item 1/2--tablet 1/3--lap-and-up {% if section.settings.stack_mobile and forloop.index == 3 %}hidden-tablet{% endif %}">
                {%- render 'article-item', article: article, featured: false -%}
          </div>
    {%- endif -%}
{%- endfor -%}