Liquid, JavaScript, themes, sales channels
Hi,
I am using the debut theme and I wanted to add a filter dropdown that shows all the collections and filters according to it.
Is this possible?
Also, a little bit more complex, but using the new metafields, is it possible to filter products with that?
Thanks!
You can refer https://shopify.dev/api/liquid/objects/filter
Hope it helps!
Hmm unfortunately not. A little bit above my knowledge level.
I'm just looking to add additional filter options on my page.
Regarding listing the collections, I figured I would need to pull all the collections, list them with their relevant URL. Won't exactly be a filter, rather more of a menu, but it could work.
Then the metafields part is a little more complex. No idea on that aspect.
This is what I was thinking. I'm able to populate the dropdown fine, but I don't know how to initiate the URLs.
{% if section.settings.menu != blank %}
<div class="filters-toolbar__item-child">
<label class="filters-toolbar__label select-label" for="FilterCollections">Collections</label>
<div class="filters-toolbar__input-wrapper select-group">
<select class="filters-toolbar__input hidden" name="FilterCollections" id="FilterCollections" aria-describedby="a11y-refresh-page-message a11y-selection-message">
{% for link in linklists[section.settings.menu].links %}
{%- assign new_url = link.url -%}
<option value="new_url">{{ link.title | escape}}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endif %}
UPDATE:
I got it to work like this but I guess I need to modify also theme.js. Will update again.
{% if section.settings.menu != blank %}
<div class="filters-toolbar__item-child">
<label class="filters-toolbar__label select-label" for="FilterCollections">Collections</label>
<div class="filters-toolbar__input-wrapper select-group">
<select class="filters-toolbar__input hidden" name="FilterCollections" id="FilterCollections" aria-describedby="a11y-refresh-page-message a11y-selection-message">
{% for link in linklists[section.settings.menu].links %}
<option value="{{ link.url }}">{{ link.title | escape}}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endif %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024