I have a blog of recipes, with each blogpost being assigned metafield value of a list of products that are being used in that recipe blogpost. I am creating the vice-versa of this, where on each product page, I want to have a custom section basically exactly like “featured-blog” or blog posts section that only displays blogposts which include that main product in their metafield product list.
This is pretty much just edits off of the featured-blog.liquid section in Dawn theme code,
but it does not render the article card. I took some code and mashed it together so I am unsure of what alot of it does but I assumed related_products_ids is an array filled with the article.id that was appended from the for loop of article in the articles array that contain the product.title of the product in the template. Then it should run the for loop for ul and li and render each article containing the metafield product that is to be shown, but it does not. Please help!
{% assign related_articles = "" %}
{% for article in blogs.recipes.articles %}
{% if article.metafields.product_info.related_products contains product.title %}
{% assign related_articles = related_articles | append: article.id | append: "," %}
{% endif %}
{% endfor %}
{% assign related_articles_ids = related_articles | split: "," %}
{%- liquid
assign posts_displayed = related_articles_ids.size
if section.settings.post_limit <= posts_displayed or section.settings.post_limit <= 8
assign posts_exceed_limit = true
assign posts_displayed = section.settings.post_limit
endif
-%}
{% if related_articles %}
<div class="blog color-{{ section.settings.color_scheme }} gradient{% if section.settings.heading == blank %} no-heading{% endif %}">
<div class="page-width-desktop isolate{% if posts_displayed < 3 %} page-width-tablet{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.heading == blank -%}
<div class="title-wrapper-with-link{% if posts_displayed > 2 %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2
id="SectionHeading-{{ section.id }}"
class="blog__title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{{ section.settings.heading }}
{{ posts_displayed }}
</h2>
{%- if section.settings.blog != blank
and section.settings.show_view_all
and section.settings.post_limit < posts_displayed
-%}
<a
href="{{ section.settings.blog.url }}"
class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
{{ 'sections.featured_blog.view_all' | t }}
</a>
{%- endif -%}
</div>
{%- endunless -%}
<slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul
id="Slider-{{ section.id }}"
class="blog__posts articles-wrapper contains-card contains-card--article{% if settings.blog_card_style == 'standard' %} contains-card--standard{% endif %} grid grid--peek grid--2-col-tablet grid--{{ section.settings.columns_desktop }}-col-desktop slider {% if posts_displayed > 2 %}slider--tablet{% else %}slider--mobile{% endif %}"
role="list"
>
{%- if posts_displayed > 0 -%}
{%- for i in (1..posts_displayed) limit: section.settings.post_limit -%}
{% assign article = related_articles_ids[i] %}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="blog__post grid__item article slider__slide slider__slide--full-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'article-card',
blog: section.settings.blog,
article: article,
media_aspect_ratio: 1.66,
show_image: section.settings.show_image,
show_date: section.settings.show_date,
show_author: section.settings.show_author,
show_excerpt: true
%}
</li>
{%- endfor -%}