Filtering blog posts by custom metafield

Technical Q&A
, ,
1

In my store i have created a custom metafield in blog posts that takes a “list of products” so for each recipe i write i can tag the products used.

I have this code to show it in the front end and it works

{% if article.metafields.custom.ingredients %}
  
    ### Products Used
    
      {% assign list_metafield = article.metafields.custom.ingredients.value %}
      {% for item in list_metafield %}
        - {% assign product_id_cleaned = item.id | remove: "gid://shopify/Product/" %}
            {% assign product = all_products[product_id_cleaned] %}

          
            {% if product.featured_image %}
            
              
            
            {% endif %}

          
            {{ item.title }}
        
      {% endfor %}
    

  

{% endif %}

Now in my blogs page https://philsgranola.myshopify.com/blogs/blog (main-blog.liquid)

{%- paginate blog.articles by section.settings.per_page -%}
  
    

    
      {%- for article in blog.articles %}
        {%- assign product_handles = '' %}

        {%- for item in article.metafields.custom.ingredients %}
          {%- assign product_handle = item.handle %}
          {%- if product_handle %}
            {%- assign product_handles = product_handles | append: product_handle | append: ',' %}
          {%- endif %}
        {%- endfor %}

        

          

{{ article.title }}

        

      {%- endfor %}
    

    {%- if paginate.pages > 1 -%}
      {%- render 'pagination', paginate: paginate -%}
    {%- endif -%}
  

{%- endpaginate -%}

I want to create a drop down that will fetch any products that have been used in the ingredients metafield and show them in a drop down. When you click on each product you will be able to filter the recipes

same as here https://philsgranola.gr/en/recipes/

what i tried isnt working and just shows a drop-down that says “select products”) and the data-products class isnt being populated

what am i doing wrong?

store password:phils