商品個別ページで、その商品が属するタグを表示させる

[山口]

商品個別ページで、その商品が属するタグを表示させるために、

product-template.liquidの中に、以下のコードを入れると概ね実現されるのですが、商品タグがスペースを含んだ場合にスペースを区切り文字と認識してしまうようです。解決できますでしょうか。タグをスペース無しで作るというのも考えたのですが、そうするとタグがSEOキーワードとして弱くなるかなと。

<ul>
{% for tag in product.tags %}
<li><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
{% endfor %}
</ul>

[Jizo_Inagaki]

ご質問の趣旨を把握しかねていますが、記載されましたコードの以下の部分のハイフォンをスペースに置き換えたいということでしょうか？

#{{ tag }}

その場合は以下のようにフィルターを使えば一応スペースにはなるかと思います。

#{{ tag | replace: '-', ' ' }}

https://shopify.dev/api/liquid/filters/string-filters#replace

なお、URL末尾につくハンドルに関してスペースを加えた状態にしたいということであれば不可能だと思われます。
詳細は以下を参照ください。

https://shopify.dev/api/liquid/basics/handle

By default, a handle is the object's title in lowercase with any spaces and special characters replaced by hyphens (-).

以上ですが、使用経験はありませんが以下のアプリはタグ名を変換できるようなので、場所によっては利用できるかもしれません。

https://apps.shopify.com/tag-manager?locale=ja

[山口]

ありがとうございます。

わかりにくい説明で申し訳ありません。

商品ページにタグが表示されて、それらはクリッカブルなのですが、途中にスペースを含むタグ、例えば MICKEY MOUSEなどで問題が発生します。

 

https://shop.robotrobot.com/products/17779292

この商品に対して４つのタグが設定してあり、そのうち ●MICKEY MOUSEだけが、途中にスペースを含んでいます。

タグのURLが

MICKEY MOUSE以外は、スペースを含んでおらず、以下のように問題ないのですが、

https://shop.robotrobot.com/collections/all/McDonald's

MICKEY MOUSEのようにスペースを含んだ場合、スペースが%20になってしまい、URLが無効になってしまいます。

https://shop.robotrobot.com/collections/all/MICKEY%20MOUSE

[Jizo_Inagaki · Accepted solution]

確認いただきありがとうございます。

つまりアンカーテキストではなく、aタグのhrefに設定するURLに関するご質問ということですね。

その場合は以下のようにString filterのhandleizeを使えば適切な状態に整形されると思います。

<li><a href="/collections/all/{{ tag | handleize }}">#{{ tag }}</a></li>

詳細は下記を確認ください。

https://shopify.dev/api/liquid/filters/string-filters#handle-handleize

[山口]

解決しました！ありがとうございます。