ShopifyのTheme開発をやっていて、単純だけど発想に驚いたので共有してみました。
今回は、Liquidのオブジェクトで生成されるHTMLタグにCSSのclass名を指定できないかと思い調べていました！
言葉ではわかりにくいので、コードを書いて説明
{{ 'ログイン' | customer_login_link }}
を使うと
<a href="/account/login" id="customer_login_link">ログイン</a>
を生成してくれる。
この生成してくれるHTMLにクラスを持たせようと思いましたが
{{ 'ログイン' | customer_login_link | class: login-link}}
こんなことはできず…
replace: を使ってHTMLを置き換え
参考にしたのはこちら
https://stackoverflow.com/questions/48530148/add-a-class-to-a-shopify-liquid-link
{{ 'ログイン' | customer_login_link | replace: '<a', '<a class="login-link"'}}
Liquidのreplaceを使って生成される文字列を置き換えてあげる。
他に見ていた記事には、Liquidのオブジェクトにはクラス名は指定できないと書かれていて、ガッガリした次の瞬間に、感動いたしました。
他のことにも応用できそうなので参考にされてみてください。
↧