Shopify - 缩短/更改“排序依据”过滤器列表选项（不仅仅是更改默认顺序）答案

【问题标题】：Shopify - Shorten/change 'Sort By' filter list options (not just changing default order)Shopify - 缩短/更改“排序依据”过滤器列表选项（不仅仅是更改默认顺序）
【发布时间】：2020-04-17 11:39:56
【问题描述】：

我想减少可供用户在我的网站上进行排序的选项数量。默认选项列表太长（例如，不需要按字母顺序排序，这是默认选项之一），我可能也想改写其中一些。

我相信下面的代码是最相关的。我似乎无法找到 sort_options 的存储位置。我正在使用 Debut 主题。

请注意，我并没有尝试创建任何新的排序标准，只是为了减少选项并重命名它们。

              {% if section.settings.sort_enable %}
                <div class="filters-toolbar__item-child">
                  {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                  <label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
                  <div class="filters-toolbar__input-wrapper select-group">
                    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}">
                      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                    {% include 'icon-chevron-down' %}
                  </div>
                </div>
              {% endif %}

【问题讨论】：

看起来您有一个名为 collection 的类，其中包含所有排序选项。您可以尝试查找此类并删除那里的排序选项。

标签： html sorting shopify liquid

【解决方案1】：

使用要隐藏的选项键创建一个变量，然后检查当前选项键是否是 for 循环中该变量的一部分。

{%- assign sortOptionsToSkip = "title-ascending,title-descending" -%}
{%- for option in collection.sort_options -%}
    {%- if sortOptionsToSkip contains option.value -%}
      {%- continue -%}
  {%- endif -%}
  <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
{%- endfor -%}

如果您只需要隐藏字母排序选项，或者只使用以下选项：

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

使用case/when control flow tags 来使用其他选项名称，同样通过键匹配。

{%- for option in collection.sort_options -%}
  <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
    {% case option.value %}
        {%- when "best-selling" -%}
          Best
      {%- when "created-ascending" -%}
            Old first
      {%- else -%}
          {{ option.name }}
      {%- endcase -%}
    </option>
{%- endfor -%}

【讨论】：