販売元（Vender）に英字が小文字になる

[aoi_16]

販売元（Vender）に入力した英字が全て強制的に小文字になってしまいます。

text-transform: uppercase;

で英字が大文字になるという事はよく見かけるのですが、小文字になるという現象ははじめてです。

text-transform: lowercase;

という小文字になるCSSがあると思いますが、base.cssやproductやcart関係などCSSを何度も検索しているのですが引っかからず原因が分からないです。

"text-transform"で検索、"lowercase"で検索、VScodeで全体検索をかけましたが引っかからずでしたのでCSSが原因ではなさそうです。

使用テーマは、Dawnのバージョン7.0.1です。

どなたか原因分かりますでしょうか？

追記：ソースコードを見たらソースの時点で小文字に変換されている（CSSが原因だったら大文字・小文字が入り交じる）ので確実にCSSが原因ではないことが分かりました。

他に原因って何かありますでしょうか…？

[ogasawarakyohei]

Aoi_16さん、はじめまして。

Tsunの小笠原と申します。

> 販売元（Vender）に入力した英字が全て強制的に小文字になってしまいます。

問題を完全に理解できていないため、いくつか質問させてください。

・販売元の入力値、期待する結果、実際の結果の3点を記載いただくことは可能でしょうか？

(そのまま記載が難しければ多少表記を変えたものでも大丈夫です。)

・以前は発生していなかったが、急に発生したのでしょうか？

それとも販売元を表示する実装をしてみて気づいた問題でしょうか？

・販売元を表示している実装の部分がわかるのであれば、どのような実装か記載することは可能でしょうか？

(実際のコードを見てみないとなんとも判断できないため。そのまま記載が難しければ多少表記を変えたものでも大丈夫です)

お手数ですが、よろしくお願いいたします。

[aoi_16]

ご返信ありがとうございます。

>・販売元の入力値、期待する結果、実際の結果の3点を記載いただくことは可能でしょうか？

(そのまま記載が難しければ多少表記を変えたものでも大丈夫です。)

販売元の入力値

Hello World

期待する結果

Hello World

実際の結果

hello world

--------

・以前は発生していなかったが、急に発生したのでしょうか？

私は依頼を受けて構築しているのですが、マーチャントの過去のテーマで確認しても発生していたので以前から発生していたものと思われます。

--------

・販売元を表示している実装の部分がわかるのであれば、どのような実装か記載することは可能でしょうか？

<!--販売元-->
{%- when 'product-vendor' -%}
{% assign vendor_handle = product.vendor | handle %}
<div class="product_vendor">
<p>{{ vendor_handle }}</p>
</div>
<!--//販売元-->

小文字・大文字を制御するCSSはテーマファイル全体に検索をかけても見つからず、もしCSSが原因ならソース表示では大文字で記入したところは大文字になるのですが、ソース表示で見たら大文字で記入した文字が小文字に変換されていたのでCSSが原因ではない事は断定できています。

他に原因が見当たらず…何かわかる事はありますでしょうか…？

[ogasawarakyohei · Accepted solution]

Aoi_16さん、こんにちは。

情報の共有ありがとうございます。

原因は

{% assign vendor_handle = product.vendor | handle %}

の箇所でhandleフィルタを使っているためです。

https://shopify.dev/api/liquid/basics#modifying-handles にあるように、handleフィルタは常にlowercaseに変換します。

画面上にvendorの文字列を表示したいだけであればhandleフィルタは不要ですので、外していただければ小文字にならないと思います。

以上、よろしくお願いします。

[aoi_16]

ありがとうございます！！

仰る通りhandleフィルタが原因で解決しました！