CODEWITHSUNDEEP
javascriptshopifyliquid
Varshini
Varshini

Reputation: 153

How to make the Shopify collections sort by option show the selected value? It goes back to the default 'Sort By' after loading

When a user clicks on an option e.g. Price, low to high - the page refreshes but the select dropdown goes back to default which says "Sort by" instead of showing Price, low to high. Is there a way to make it show that the Price, low to high is currently selected?

Currently, my code is:

<div class="collection-sorting styled-select mr3-l mb2-l">
  {%- assign selected = collection.sort_by | default: collection.default_sort_by -%}
  <select name="sort_by" onchange="location = this.value;" id="sorting">

    <option value="placeholder" disabled {% if selected == false %}selected{% endif %}>
      {{ 'collection.sort.title' | t }} by
    </option>

    {% for option in collection.sort_options %}
      <option value="?sort_by={{ option.value }}" {% if value == selected %}selected{% endif %}>
        {{ option.name }}
      </option>
    {% endfor %}

    {% comment %} Clear sorting {% endcomment %}
    <option value="{{ collection.url }}">Clear</a>
  </select>
  {% include 'inline-icon' with svg: 'icon-arrow-down.svg', class: 'current-color-stroke' %}
</div>

Upvotes: 1

Views: 1889

Answers (1)

Vladimir
Vladimir

Reputation: 2559

Add the following above your select:

{%- assign selected = collection.sort_by | default: collection.default_sort_by -%}

Upvotes: 2

Related Questions