Get active metafield value for dropdown selected

New Member
3 0 0

I have added metafields for products and then via the collection page created custom filters which work:

  {%- for filter in collection.filters -%}
    <script>console.log({{ filter.active_values | json }});</script>
    <div class="form-horizontal">
      <label for="{{ filter.label }}" style="text-transform: capitalize;">{{ filter.label }}</label>

      <select name="{{ filter_value.param_name }}" id="{{ filter_value.param_name }}" class="btn--tertiary" onChange="window.document.location.href=this.options[this.selectedIndex].value;">
      {%- for filter_value in filter.values -%}
         <option value="{{ collection.url }}?{{ filter_value.param_name }}={{ filter_value.value }}">{{ filter_value.label }}</option>
      {%- endfor -%}
  {%- endfor -%}

Which creates nice custom filtering:

Screenshot 2022-11-24 at 10.00.09.png

When a user chooses a drop down item/filter it redirects the user to a page like: 


But I can't work out how to extract the active filter (filter.p.m.custom.categories) value (Knitwear) or get the URL GET param in order to set the dropdown default (selected) value so that the dropdown shows the active filter in place.

I would prefer to do in liquid if possible? or do I have to use JavaScript to sort?

Replies 0 (0)