i have 4 filters
<div class="filter">
<select
name="date"
id="date"
onchange="FILTER.searchParams(event, 'sort_by_date')"
>
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
{% for option in collection.sort_options %}
{% if option.value == 'created-ascending' or option.value == 'created-descending' %}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
{{ option.name }}
</option>
{% endif %}
{% endfor %}
</select>
<select
name="brands"
id="brands"
onchange="FILTER.searchParams(event, 'filter.p.vendor')"
>
<option value="{{ collection.url }}">ALL</option>
{% for product_vendor in collection.all_vendors %}
<option value="{{product_vendor}}" {% if option.vendor == product_vendor %} selected="selected" {% endif %} >{{ product_vendor }}</option>
{% endfor %}
</select>
<select
name="category"
id="category"
onchange="FILTER.changePath(event)"
>
<option value="/collections/all">ALL</option>
{% for collection in collections %}
<option value="{{ collection.url }}">
{{ collection.title }}
</option>
{% endfor %}
</select>
<div>
<div>price</div>
<div>
<input
type="number"
name=""
id="price-min"
value="0"
onchange="FILTER.searchParams(event, 'filter.v.price.gte')"
/>
<input
type="number"
name=""
id="price-max"
value="100"
onchange="FILTER.searchParams(event, 'filter.v.price.lte')"
/>
</div>
</div>
and when i select option in selector, i need to save option and display it when my page refresh and displaying current filter
js code:
window.FILTER = {
searchParams: function (event, param) {
const { value } = event.target;
const url = new URL(window.location);
url.searchParams.set(param, value);
window.location = url;
},
changePath: function (event) {
const { value } = event.target;
window.location.pathname = value;
},
};
