Liquid、JavaScriptなどに関する質問
販売元(Vender)に入力した英字が全て強制的に小文字になってしまいます。
text-transform: uppercase;
で英字が大文字になるという事はよく見かけるのですが、小文字になるという現象ははじめてです。
text-transform: lowercase;
という小文字になるCSSがあると思いますが、base.cssやproductやcart関係などCSSを何度も検索しているのですが引っかからず原因が分からないです。
"text-transform"で検索、"lowercase"で検索、VScodeで全体検索をかけましたが引っかからずでしたのでCSSが原因ではなさそうです。
使用テーマは、Dawnのバージョン7.0.1です。
どなたか原因分かりますでしょうか?
追記:ソースコードを見たらソースの時点で小文字に変換されている(CSSが原因だったら大文字・小文字が入り交じる)ので確実にCSSが原因ではないことが分かりました。
他に原因って何かありますでしょうか…?
解決済! ベストソリューションを見る。
成功
Aoi_16さん、こんにちは。
情報の共有ありがとうございます。
原因は
{% assign vendor_handle = product.vendor | handle %}
の箇所でhandleフィルタを使っているためです。
https://shopify.dev/api/liquid/basics#modifying-handles にあるように、handleフィルタは常にlowercaseに変換します。
画面上にvendorの文字列を表示したいだけであればhandleフィルタは不要ですので、外していただければ小文字にならないと思います。
以上、よろしくお願いします。
Aoi_16さん、はじめまして。
Tsunの小笠原と申します。
> 販売元(Vender)に入力した英字が全て強制的に小文字になってしまいます。
問題を完全に理解できていないため、いくつか質問させてください。
・販売元の入力値、期待する結果、実際の結果の3点を記載いただくことは可能でしょうか?
(そのまま記載が難しければ多少表記を変えたものでも大丈夫です。)
・以前は発生していなかったが、急に発生したのでしょうか?
それとも販売元を表示する実装をしてみて気づいた問題でしょうか?
・販売元を表示している実装の部分がわかるのであれば、どのような実装か記載することは可能でしょうか?
(実際のコードを見てみないとなんとも判断できないため。そのまま記載が難しければ多少表記を変えたものでも大丈夫です)
お手数ですが、よろしくお願いいたします。
ご返信ありがとうございます。
>・販売元の入力値、期待する結果、実際の結果の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が原因ではない事は断定できています。
他に原因が見当たらず…何かわかる事はありますでしょうか…?
成功
Aoi_16さん、こんにちは。
情報の共有ありがとうございます。
原因は
{% assign vendor_handle = product.vendor | handle %}
の箇所でhandleフィルタを使っているためです。
https://shopify.dev/api/liquid/basics#modifying-handles にあるように、handleフィルタは常にlowercaseに変換します。
画面上にvendorの文字列を表示したいだけであればhandleフィルタは不要ですので、外していただければ小文字にならないと思います。
以上、よろしくお願いします。
ありがとうございます!!
仰る通りhandleフィルタが原因で解決しました!
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024