Blog in product page to show only articles tagged with product handle (Dawn Theme)

Blog in product page to show only articles tagged with product handle (Dawn Theme)

snowsnowsnow
Visitor
2 0 0

Hi everyone,

 

Is there anyway to make the blog section in a product page to show only articles tagged with the product handle?

I'm using Dawn Theme.

 

For example, if a product url is:

mystore.myshopify.com/products/chair

 

the blog section added to the product page shows only articles with the "chair" tag.

 

I wouldn't mind editing the code for the whole site, if it's not possible to apply this function to the product page only.

 

I already tried some custom liquid code section, like this one:

 

{% assign product_handle = product.handle %}

{% for article in blogs['blog'].articles %}

{% if article.tags contains product_handle %}
<div > <a href="{{ article.url }}" title="{{ article.title | escape }}"> <div>{{ article.image.src | img_url: 'large' | img_tag: article.title }}</div> <div>{{ article.title }}</div> </a> </div>

{% endif %}
{% endfor %}

 

and while it works, it lacks all the proper formatting that comes with the proper blog section.

 

Thanks!

 

Replies 6 (6)

PaulNewton
Shopify Partner
6447 587 1367

With some inverse modification to continue(autoskip ) part of a loop,  you would take the logic you've put together and find the article loop in whatever the "blog section" is for your specific theme. And wrap that logic with your logic.

 

Do the tag check like your doing but when it's NOT a match use the {% continue%} tags to make the current article that doesn't have a tag match get skipped.

{% if article.tags contains product_handle %}
<div > <a href="{{ article.url }}" title="{{ article.title | escape }}"> <div>{{ article.image.src | img_url: 'large' | img_tag: article.title }}</div> <div>{{ article.title }}</div> </a> </div>
{% else %}
{% continue %}
{% comment %} The rest of the default article code goes here inside the else & endif {% endcomment %}
{% endif %}

 

💣Keeping in mind that contains makes matching tags fuzzy so trying to match "contains red" would also match any tag with those characters so a "credit"  tag would create a false positive.

 

https://shopify.dev/api/liquid/tags/continue 

 

If you need this customized for you then contact me , info in sig. Please provide context: store url, theme name, post url and detail.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


snowsnowsnow
Visitor
2 0 0

Thanks for your reply!

I'm wondering whether it's possible to use this alternative solution:

 

in product.json I found this code:

 

"bc5f8046-4abc-421d-a43b-3f7675c32a92": {
"type": "featured-blog",
"settings": {
"heading": "Blog posts",
"heading_size": "h2",
"blog": "news",
"post_limit": 3,
"columns_desktop": 3,
"color_scheme": "background-1",
"show_image": true,
"show_date": false,
"show_author": false,
"show_view_all": true,
"padding_top": 36,
"padding_bottom": 36
}
},

 

 

If I could change ["blog": "news"] to a dynamic data like ["blog": "{{ product.handle }}"] , then I could use a different blog for every product. That would work for me.

Bu I tried to use ["blog": "{{ product.handle }}"] and it doesn't work. The Shopify code editor says : can't include Liquid syntax ('{{', '}}', '{%' or '%}') "without valid dynamic sources"

 

Any advice?

 

Thanks!

 

PaulNewton
Shopify Partner
6447 587 1367

That's a JSON template you cannot use liquid templating syntax there.

Solve the initial problem in the simplest way first then explore unknowns before complicating it.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


jiane
Tourist
7 0 1

Hi, I'm looking for a solution like this. Where do you put the above code? I placed it in my "Custom Liquid" section for my Product Page but it's not working. Am I missing something?

 

PaulNewton
Shopify Partner
6447 587 1367

You have to modify the underlying code itself that shows the blog articles for your specific theme, it's not done by arbitrarily adding custom-liquid theme settings.

 

Custom-liquid setting would primarily be to design and make a completely custom blog/article display.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Boki97
Shopify Partner
62 5 4

Here is the code that I used on the Dawn theme. It works fine. 
So I'm pulling the collection handle and splitting it into multiple words and if the article title matches any of those words it will put that article on the collection page. Here is the code:

{% assign collection_handle = collection.handle | replace: '-', ' ' | split: ' ' %}
{% assign article_count = 0 %}

{% for article in blogs['your-blog-handle'].articles %}
{% if article.handle contains collection_handle.first or article.handle contains collection_handle[1] %}
{% if article_count < 3 %}

<a href="{{ article.url }}" class="article_link">
<div class="article_collection">
<img
srcset="{%- if article.image.src.width >= 165 -%}{{ article.image.src | image_url: width: 165 }} 165w,{%- endif -%}
{%- if article.image.src.width >= 360 -%}{{ article.image.src | image_url: width: 360 }} 360w,{%- endif -%}
{%- if article.image.src.width >= 533 -%}{{ article.image.src | image_url: width: 533 }} 533w,{%- endif -%}
{%- if article.image.src.width >= 720 -%}{{ article.image.src | image_url: width: 720 }} 720w,{%- endif -%}
{%- if article.image.src.width >= 1000 -%}{{ article.image.src | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if article.image.src.width >= 1500 -%}{{ article.image.src | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ article.image.src | image_url }} {{ article.image.src.width }}w"
src="{{ article.image.src | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}loading="lazy"{% endunless %}
width="{{ article.image.width }}"
height="{{ article.image.height }}"
>
<h2>{{ article.title }}</h2>
<div class="article-card__info caption-with-letter-spacing h5">

<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>


<span>{{ article.author }}</span>

</div>

<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>


</div>
{% assign article_count = article_count | plus: 1 %}
{% else %}
{% break %}
</a>
{% endif %}

{% endif %}

{% endfor %}