コレクションの複合タグの絞り込みurlについて

日本語 ディスカッション 技術的なQ＆A

Topic summary

コレクションの複合タグで商品を絞り込むURLについて、タグ区切りに「,（カンマ）」と「+（プラス）」のどちらが正しいかが主題です。実際には両方とも動作する例が確認されています。

  • 調査結果として、公式に明記した資料は見つかっていません。
  • ただし、Shopify Community内のスタッフ回答への言及や、shopify.dev のチュートリアルコードでは、複数タグを join('+') で連結しており、「+」が正式な方法らしいという見方が示されています。
  • 一方で、カンマ区切りを裏づける資料は確認できていません。

その後の追加確認では、半角スペースをURLエンコードした %20 でも同様に使える可能性が報告されました。これはURLエンコードでスペースが + として扱われることに関連すると考えられています。

結論としては、「+」が有力ですが、公式根拠は未提示で、カンマや %20 がなぜ有効なのかは未解明のままです。

Summarized with AI on March 8. AI used: gpt-5.4.
1

コレクションの複合タグの絞り込みURLは、
下記のように「カンマ区切り」でも「プラス区切り」でもどちらでも有効なようですが、
本来どちらが正解かご存知の方いますか？

① https://.myshopify.com/collections//yellow**,cap,xxl> ② https://.myshopify.com/collections//yellow**+cap+xxl

2

興味があったので少し調べてみましたが、公式な情報は見つからなかったものの、以下のスレッドのShopifyスタッフの方の回答の返答内には+が正式な方法と書かれているのを見つけました。ただし根拠となるドキュメントの提示はありません。

https://community.shopify.com/c/Shopify-Design/Filter-Blogs-by-tags-multiple-tags/m-p/449432/highlight/true#M116519

The method you’re suggesting is the correct way to filter blogs by multiple tags with the URL. This URL displayed all the blogs associated with both tags.

また、以下のチュートリアル内にプラスでつなぐ記述がありました。

https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags#add-a-drop-down-menu-to-collection-pages

if (newTags.length) {
  var query = newTags.join('+');
  window.location.href = '/collections/{{ collection.handle }}/' + query;
}

他方、今回調べた範囲ではカンマ区切りの方法は出てきませんでした。

ここまでを踏まえますと「プラス区切り」が正解に思いますが、推測の域は出ずその点申し訳ありません。
またすでに確認済みの事柄ばかりでしたら申し訳ありません。

2 Likes
3

URLのクエリーパラメータで調べていたところ、「スペースは+に置換する」というのを見つけたので、
半角スペースも試してみたところ、もう一つ発見しました。
**半角スペースをURLエンコードした「%20」**も使えるようです。

③ https://.myshopify.com/collections//yellow**%20cap%20xxl

1 Like