how to save and display selected option in select

tailaitai
Shopify Partner
5 0 1

 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;
},
};

 

Reply 1 (1)

made4Uo
Shopify Partner
3807 713 1129

@tailaitai,

 

What do you mean by saving? Saving it for the user or for the store owner?

 

If it is for the user. You can use the localStorage or sessionStorage or cookies. 

 

If it is for the owner of the website, that will be a little complicated. 

 

You can assign a div to call and replace innerHtml or innerText with the value. 

 

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!