Display blog posts with a specific tag that blogs have - Shopify
For example, if the blog contains the tag Vegan, and needs to show related blogs that contain the tag Vegan,
if the blog has the tag is egg show related blogs with egg tag.
now my code now shows the same related blogs for all the blogs on the website, even if the tag doesn't match or is not applied to that blog. here is the blog with tags tinyurl.com/294769gb
<div class="wrapper">
<h4 style="margin-left: 1%;">Related Recipes</h4>
<div class="res">
{% for article in blogs.Recipes.articles limit:8 %}
{% if article.tags contains 'Vegan' %}
<div class="njohn_search_otherpage">
<a href="{{ article.url }}" title="{{ article.title | escape }}">
<div class="crop">{{ article.image.src | img_url: 'medium' | img_tag: article.title }}</div>
<div>{{ article.title }}</div> </a> </div>
{% endif %}
{% endfor %}
</div>
</div>
Related
I have created a template and under that, I am assigning 5 categories of blogs but it isn't sorting them all, it is sorting them one by one. can anyone help me with this?
{% assign blog_handles = "skin-care,hair-care,foot-care,sun-care,learn" | split: ","| sort:'published_at' %}
{% for handle in blog_handles %}
{% for article in blogs[handle].articles limit: %}
<div class="blog-articles__article article">
<div class="card-wrapper underline-links-hover">
<div class="card article-card card--card article-card__image--medium card--media color-background-1" style="--ratio-percent: 52.33333333333333%;">
<div class="card__inner ratio" style="--ratio-percent: 52.33333333333333%;">
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect">
<img
srcset="{{ article.image.src | img_url: '533x' }}"
src="{{ article.image.src | img_url: '533x' }}"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
loading="lazy">
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading h2">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
<div class="article-card__info caption-with-letter-spacing h5">
<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</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>
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
Thanks in Advance!
The sort filter should be applied to your loop object which contains the published_at info (your handle list doesn't).
Something like that (not tested) should work:
{% assign articles = blogs[handle].articles | sort:'published_at' %}
{% for article in articles %}
Do something
{% endfor %}
I have a problem with the visibility of description of ARTICLES in block's post, they are showing other content but not the first paragraph of the article, as it supposed to do.
print screen
here is the code (just the part of the BLOG)
<div class="lp-section blog-section">
<h2>
Blog
</h2>
<ul>
{% set rec_posts = blog_recent_posts("default", 3) %}
{% for rec_post in rec_posts %}
<li>
<div class="lp-block">
{% if rec_post.featured_image %}
<a class="resource__post-image"
alt="{{ rec_post.featured_image_alt_text }}"
style="background-image: url('{{ rec_post.featured_image }}');"
href="{{ rec_post.absolute_url }}">
</a>
{% endif %}
{% set featured_tag = rec_post.topic_list | first %}
{% if featured_tag %}
<div class="content content-description">
<div>
<span class="keyword">{{ featured_tag }}</span>
{% endif %}
<h3>{{ rec_post.name }}</h3>
<p class="description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
</div>
<div>
<a class="ghost-cta" href="{{ rec_post.absolute_url }}">
Read more
</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<a class="link" href="https://ai.reportlinker.com/en/resources/blog">+ More articles </a>
</div>
Could somebody please help me please?
I have different versions of products that I would like to display on the product card. I created a proper field in the metafields section, but I am unable to implement it.
I have a code ready, but it does not work as I would like it because nothing is displayed, neither the image, nor the name of the product, nor the price.
How should I change the code to make it work?
<ul class="recommended-products">
{% if product.metafields.my_fields.product_version != blank %}
{% assign product_version = product.metafields.my_fields.product_version %}
<li>
<a href="{{ product_version.url }}" target="_blank">
<img src="{{ product.metafields.my_fields.product_version.featured_image | img_url: '100x' }}">
<div>
<p>{{ product_version.title }}</p>
<p class="uaf__price">{{product_version.price | money }}</p>
</div>
</a>
</li>
{% endif %}
</ul>
I want to show collection related products best selling on shopify cart page. I tried some product loop but doesn't work.
This is my code which i added:
<div class="row products">
{% if collection.best-selling.products.size > 0 %}
{% for product in collection.best-selling.products %}
<li>
<img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />
<a class="shop-now" href="{{ product.url }}">{{ product.title | escape }}</a>
</li>
{% endfor %}
{% endif %}
</div>
Anybody got any idea how to fix this
There are a few mistakes in yout code.
Liquid error
When targeting a specific collection you must use the collections keyword, not collection ( collection is available only on the collection page and returns that collection). So you should use here collections.best-selling.
This is deprecated product_img_url: 'medium' don't used named size such as small/medium/large etc..., use numbered sizes like 600x600 (where this is WIDTHxHEIGHT without cropping or changing the aspect ratio of the image).
HTML validation error
Outputting a li without it being in ul or ol is invalid HTML code and this will make your HTML code validation fail.
Your code should look like this
This assumes that you have a collection with a handle best-selling.
<div class="row products">
{% if collections.best-selling.products.size > 0 %}
<ul>
{% for product in collections.best-selling.products %}
<li>
<img src="{{ product.featured_image | product_img_url: '600x' }}" alt="{{ product.title | escape }}" />
<a class="shop-now" href="{{ product.url }}">{{ product.title | escape }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
I am working on a Hubspot COS website and I need to be able to run custom queries on blog posts and display a list of those blog posts in a module on the home page and in the sidebar on the website.
Where do I start? I have tried using the RSS module, but it is not specific enough for my needs.
If you have any advise it would be much appreciated. Thanks!
I was able to use blog_recent_topic_posts() to solve this problem:
<div class="row-fluid">
{% set posts = blog_recent_topic_posts('3904474513', 'featured-resource', 3) %}
{% for post in posts %}
{% set topics = post.topic_list %}
<div class="span4 resource">
<div class="resource-icon{% for topic in topics %} {{ topic.slug }}{% endfor %}"></div>
<img src="{{ post.featured_image }}" alt="{{ post.name }}">
<div class="resource-text">
<p class="r-type">
{% for topic in topics %}
{% unless topic == 'featured resource' %}
{{ topic.name }}
{% endunless %}
{% endfor %}
</p>
<h3 class="r-title">{{ post.name }}</h3>
</div>
</div>
{% endfor %}
</div>