商品個別ページで、その商品が属するタグを表示させるために、
product-template.liquidの中に、以下のコードを入れると概ね実現されるのですが、商品タグがスペースを含んだ場合にスペースを区切り文字と認識してしまうようです。解決できますでしょうか。タグをスペース無しで作るというのも考えたのですが、そうするとタグがSEOキーワードとして弱くなるかなと。
-
{% for tag in product.tags %}
- #{{ tag }} {% endfor %}
Topic summary
商品詳細ページでタグを表示し、スペースを含むタグ（例：MICKEY MOUSE）のリンクが%20になり無効化される問題。添付スクリーンショットと該当商品URLで現象が確認された。
初期提案は表示テキストにreplaceフィルターを使う案だったが、URLのハンドルにスペースを含めることは不可（Shopifyのhandle仕様で空白・記号はハイフンへ変換）。
解決策：aタグのhrefにString filter「handleize」を適用し、タグ文字列を正しいハンドル（小文字化＋空白をハイフン化）へ整形する。例：/collections/all/{{ tag | handleize }}。アンカーテキストは #{{ tag }} のままで可。
補足：タグ名の変換を行うアプリ（Tag Manager）にも言及があったが、最終的な対応はhandleizeで十分。
結論：問題はhandleizeの適用で解決。議論はクローズ済みで未解決事項なし。
ご質問の趣旨を把握しかねていますが、記載されましたコードの以下の部分のハイフォンをスペースに置き換えたいということでしょうか？
#{{ 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 (-).
以上ですが、使用経験はありませんが以下のアプリはタグ名を変換できるようなので、場所によっては利用できるかもしれません。
ありがとうございます。
わかりにくい説明で申し訳ありません。
商品ページにタグが表示されて、それらはクリッカブルなのですが、途中にスペースを含むタグ、例えば 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が無効になってしまいます。
確認いただきありがとうございます。
つまりアンカーテキストではなく、aタグのhrefに設定するURLに関するご質問ということですね。
その場合は以下のようにString filterのhandleizeを使えば適切な状態に整形されると思います。
- #{{ tag }}
詳細は下記を確認ください。
https://shopify.dev/api/liquid/filters/string-filters#handle-handleize
1 Like
解決しました！ありがとうございます。