FROM CACHE - jp_header
解決済

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

山口
遊覧客
12 0 1

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

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

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

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
990 373 690

成功

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

つまりアンカーテキストではなく、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

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

4件の返信4

Jizo_Inagaki
Shopify Partner
990 373 690

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

#{{ 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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
山口
遊覧客
12 0 1

ありがとうございます。

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

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

スクリーンショット-2021-08-12-10.39.14.jpg

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

 

この商品に対して4つのタグが設定してあり、そのうち ●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
Shopify Partner
990 373 690

成功

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

つまりアンカーテキストではなく、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

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
山口
遊覧客
12 0 1

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