Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Now blogs are displayed like this, i.e. globally for all products because I have created 1 template. I would like to create metafields to throw 2 links from each product and call them as blog entries.
How to replace it so that when the metafields were completed, it would take entries from them, and if not, globally?
{% liquid assign firstArticleToRender = nil assign firstBlogHandle = nil assign secondArticleToRender = nil assign secondBlogHandle = nil assign articlesCounter = 0 %} {% for blogPage in section.settings.all_blogs.links %} {% if articlesCounter == 2 %}{% break %}{% endif %} {% for articleItem in blogs[blogHandle].articles %} {% if articlesCounter == 2 %}{% break %}{% endif %} {% if articleItem.handle == articleHandle %} {% if firstArticleToRender == nil %} {% liquid assign firstArticleToRender = articleItem assign firstBlogHandle = blogHandle %} {% else %} {% liquid assign secondArticleToRender = articleItem assign secondBlogHandle = blogHandle %} {% endif %} {% endif %} {% assign articlesCounter = articlesCounter | plus: 1 %} {% endfor %} {% endfor %} <div class="blog-section page-width"> <div class="blog-section__description-container"> <div class="blog-section__icon"> {% if section.settings.select == "svg" %} {% if section.settings.svg_code != blank %} <div class="blog-section__image"> {{ section.settings.svg_code }} </div> {% endif %} {% elsif section.settings.select == "img" %} {% if section.settings.image != blank %} <img class="blog-section__image" srcset="{% if section.settings.image.width >= 80 %}{{ section.settings.image | image_url: width: 80 }} 80w,{% endif %} {% if section.settings.image.width >= 100 %}{{ section.settings.image | image_url: width: 100 }} 100w,{% endif %} {% if section.settings.image.width >= 150 %}{{ section.settings.image | image_url: width: 150 }} 150w,{% endif %} {{ section.settings.image | image_url }} {{ section.settings.image.width }}w" alt="{{ section.settings.image.alt | escape }}" src="{{ section.settings.image | image_url }}" loading="lazy" /> {% endif %} {% endif %} </div> {% if section.settings.header != nil %} <div class="blog-section__header">{{ section.settings.header | replace: '<', '<' | replace: '>', '>' | replace: '&nbsp;', ' ' }}</div> {% endif %} {% if section.settings.description != nil %} <p class="blog-section__paragraph">{{ section.settings.description }}</p> {% endif %} </div> <div class="blog-section__blog-card-container"> {%- liquid assign firstArticleHandle = section.settings.first_article | split: '/' assign secondArticleHandle = section.settings.second_article | split: '/' -%} {% render "card-blog", article: firstArticleToRender, blog_title: blogs[firstBlogHandle].title, blog_url: blogs[firstBlogHandle].url %} {% render "card-blog", article: secondArticleToRender, blog_title: blogs[secondBlogHandle].title, blog_url: blogs[secondBlogHandle].url %} {% if firstArticleHandle != blank and secondArticleHandle != blank %} {% render "card-blog", article: section.settings.first_article, blog_title: firstArticleHandle.first, blog_url: firstArticleHandle.first | prepend: '/blogs/' %} {% render "card-blog", article: section.settings.second_article, blog_title: secondArticleHandle.first, blog_url: secondArticleHandle.first | prepend: '/blogs/' %} {% elsif firstArticleHandle != blank or secondArticleHandle != blank %} {% if firstArticleHandle != blank %} {% render "card-blog", article: section.settings.first_article, blog_title: firstArticleHandle.first, blog_url: firstArticleHandle.first | prepend: '/blogs/' %} {% endif %} {% render "card-blog", article: firstArticleToRender, blog_title: blogs[firstBlogHandle].title, blog_url: blogs[firstBlogHandle].url %} {% if secondArticleHandle != blank %} {% render "card-blog", article: section.settings.second_article, blog_title: secondArticleHandle.first, blog_url: secondArticleHandle.first | prepend: '/blogs/' %} {% endif %} {% else %} {% if firstArticleToRender != nil %} {% render "card-blog", article: firstArticleToRender, blog_title: blogs[firstBlogHandle].title, blog_url: blogs[firstBlogHandle].url %} {% endif %} {% if secondArticleToRender != nil %} {% render "card-blog", article: secondArticleToRender, blog_title: blogs[secondBlogHandle].title, blog_url: blogs[secondBlogHandle].url %} {% endif %} {% endif %} </div> {% if section.settings.button_link != nil and section.settings.button_label != nil %} <a href="{{ section.settings.button_link }}" class="blog-section__button btn {% if section.settings.select_button_style == "primary1" %} btn--primary-1 {% elsif section.settings.select_button_style == "primary2" %} btn--primary-2 {% elsif section.settings.select_button_style == "secondary1" %} btn--secondary-1 {% elsif section.settings.select_button_style == "secondary2" %} btn--secondary-2 {% elsif section.settings.select_button_style == "underline" %} btn--tetrary-1 {% endif %} "> {{ section.settings.button_label }} </a> {% endif %} </div>
It looks like you are using very complex solution to achieve this, and it will affect store performance as well. You can just create a metafield and add comma separated articles list there and parse it in liquid. It will simplify the process.
If it is helpful to you, please give me a thumbs up as recognition and also mark it as the solution if applicable.
Thanks!
I already have 2 links in metafields that I display like this and I get 2 links but how to replace them in blog post rendering <script> let relatedLinks = {{ product.metafields.custom.related_product_with_blog_post }}; let firstLink = relatedLinks[0] let secondLink = relatedLinks[1] console.log(firstLink); console.log(secondLink); </script>
If it is list then you should first convert into json to use in javascript like
let relatedLinks = {{ product.metafields.custom.related_product_with_blog_post | json }};
ok, I have the links pulled out, what next? is there any way to link them to blogs?
Do you need them on javascript ?
and what is stored in link here ?
you can just iterate over those links and use aricles liquid object to pull particular article
{% for related_product_with_blog_post_link in product.metafields.custom.related_product_with_blog_post.value %}
{% assign articleHandle = related_product_with_blog_post_link | split: "/blogs/" | last %}
{% assign blogHandleParts = articleHandle | split :"/" %}
{% assign blogHandle = blogHandleParts | first %}
{% assign _blog = blogs[blogHandle] %}
{% assign _article = articles[articleHandle] %}
{% render "card-blog", article: _article, blog_title: _blog.title, blog_url: related_product_with_blog_post_link %}
{% endfor %}
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025