star back image
people4
電飾 電飾
moon
men
shopify ソートの種類を減らしたい

【shopify】ソートの種類を減らしたい

BLOG shopifyWEBログ
読了約:8分

商品の一覧ページなどに「フィルター・ソート機能」が標準で付いていたりすると思います。おそらく以下のような感じです。

ソートには「価格の安いものから順」「高い順」他にも上記のように数種類。
みんな一緒ですか?

要件は「価格順の2個だけ」で、他はいらないですとのこと。

消すのならコメントアウトか、管理画面で設定かな?
そう思ってましたが小一時間さまよいました。

コードの場所を探す

管理画面で選択できるのかな?と場所を探したのですが見つかりません。
ソートのコードがある箇所まで行きましたところ、直接ハードコーディングをされてはいませんでした。

以下のコードです。

<ul class="space-y-1">
  {%- for option in sort_options -%}
    <li class="flex items-center justify-start">
      <input
        type="radio"
        class="filter-checkbox custom-input peer sr-only"
        name="sort_by"
        value="{{ option.value | escape }}"
        @input.debounce="filterFormSubmit"
        id="Sort-drop-down-{{ option.name }}-{{ forloop.index }}"
        {% if option.value == sort_by -%}
          checked
        {%- endif %}
      >
      <label
        for="Sort-drop-down-{{ option.name }}-{{ forloop.index }}"
        class="flex cursor-pointer items-center capitalize hover:text-scheme-accent peer-checked:[&>span:first-child]:bg-current {% if filter_value.count == 0 and filter_value.active == false -%}text-scheme-secondary line-through{%- endif %}"
        {% if filter_value.count == 0
          and filter_value.active == false
        -%}
          disabled
        {% endif %}
      >
        <span
          class="mr-1 inline-block h-2 w-2 rounded-full border-checkbox border-current"
        ></span>
        {{ option.name | escape }}
      </label>
    </li>
  {%- endfor -%}
</ul>

購入のテーマテンプレートで構造が違うかもしれません。
以下のように出力されていました。

valueを使うことになります。

対応方法はoption.valueで出しわけ

forループの中で、ifを使って、必要なフィルタだけ出力するようにすると良いのでは、と教えてもらいました。ありがとう。

{%- for option in sort_options -%}
  {% if option.value == "price-ascending" or option.value == "price-descending"%}

  {%- endif -%}
{%- endfor -%}

optionの設定がどこかにあるんでしょうね。。

冷静になって検索していると公式にも情報がありました。

公式Q&A
https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE-%E4%B8%A6%E3%81%B3%E6%9B%BF%E3%81%88-%E3%81%8B%E3%82%89%E4%B8%8D%E8%A6%81%E3%81%AA%E9%A0%85%E7%9B%AE%E3%82%92%E5%89%8A%E9%99%A4%E3%81%97%E3%81%9F%E3%81%84/td-p/1941804

上のQAではベストセラーだけを消したいようです。

{%- if option.value != 'best-selling' -%}
  {% comment %}〜挟まれる内容〜{% endcomment %}
{%- endif -%}

と対応しています。
私は以下のように2つ絞りで対応しました。

<ul class="space-y-1">
  {%- for option in sort_options -%}
    {% if option.value == "price-ascending" or option.value == "price-descending"%}
    <li class="flex items-center justify-start">
      {% comment %}内容そのまま{% endcomment %}
    </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

price-ascendingとprice-descendingの2つを使いたかったので上記のようにしたところ、ちゃんと2つに絞られましたので要件完了です。

こんなこともわかりません。sortの他にfilterもありますが似たようなコードでした。多分同じ感じかなと想像です。

あとがき

おすすめのAIが無料枠を使い切ったので課金をしないかとバナーで催促してきます。
返事をくれなくなってから不安にもなりましたが、無料で多用したので邪険にもできません。

私はChatGPTさんに戻ってきました。

ChatGPTさんを多用していた頃ですが、とても返答スピードが遅くなっていた時期がありました。課金の無言圧力でしょうか?それで浮気をしたと思われても仕方ありません。ごめんなさい。

かなり長く記録の残っているスレッドや、複数あったスレッドを消去すると、返答スピードが高速に復活したので、こまめにスレッドを閉じることにしています。