I'm working on a Shopify store and need to filter blog articles based on specific handles and display them in a Swiper component. However, I'm having trouble correctly handling array-like structures in Liquid to achieve this. Here's the specific case I'm dealing with: I need to filter a list of blog articles using an array of handles and display only the articles that match these handles. Below is my current Liquid code: {{ "knowledge-hub-section.css" | asset_url | stylesheet_tag }} {% assign blogs_handles = "5-best-materials-for-a-basketball-backboard,guide-to-installing-basketball-hoops-onto-brick-walls,4-tips-to-properly-maintain-a-basketball-hoop-base" | split: ',' %} {% assign custom_articles = '' %} {% for article in blogs["news"].articles %} {% if blogs_handles contains article.handle %} {% if custom_articles == '' %} {% assign custom_articles = article %} {% else %} {% assign custom_articles = custom_articles | append: ',' | append: article %} {% endif %} {% endif %} {% endfor %} Issues: The articles do not seem to be displaying correctly. Handling the custom_articles array and ensuring it properly stores and iterates over the filtered articles. Desired Outcome: I want to filter blog articles using the handles specified in the blogs_handles array and display x properties of them. What I've Tried: Using the split filter to create an array of handles. Iterating through the blog articles and appending matching articles to a custom_articles array. Splitting the custom_articles string back into an array and iterating over it to render the articles. Questions: How can I correctly filter and store the articles in an array-like structure? What is the best way to handle and iterate over these filtered articles in Liquid?
Jese Leos
August 19, 2024
Verified user
Filter Articles by Handles: We iterate through blogs["news"].articles and check if the article.handle is in the blogs_handles array. Store the Filtered Articles: We concatenate the handles of matching articles into a string (custom_articles) and then split this string back into an array (custom_articles_array). Display Articles in Swiper Component: We iterate over the custom_articles_array, find each article by its handle, and then display it within the Swiper component. {{ "knowledge-hub-section.css" | asset_url | stylesheet_tag }} {% assign blogs_handles = "5-best-materials-for-a-basketball-backboard,guide-to-installing-basketball-hoops-onto-brick-walls,4-tips-to-properly-maintain-a-basketball-hoop-base" | split: ',' %} {% assign custom_articles = '' %} {% assign custom_articles_array = '' %} {% for article in blogs["news"].articles %} {% if blogs_handles contains article.handle %} {% if custom_articles == '' %} {% assign custom_articles = article %} {% else %} {% assign custom_articles = custom_articles | append: ',' | append: article %} {% endif %} {% endif %} {% endfor %} {% assign custom_articles_array = custom_articles | split: ',' %} <div class="swiper-container"> <div class="swiper-wrapper"> {% for handle in custom_articles_array %} {% assign article = blogs["news"].articles | where: "handle", handle | first %} {% if article %} <div class="swiper-slide"> <h2>{{ article.title }}</h2> <p>{{ article.excerpt }}</p> <a href="{{ article.url }}">Read more</a> </div> {% endif %} {% endfor %} </div> <!-- Add Swiper navigation buttons --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Include Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> var swiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); </script>