【Shopify学習】Liquid Tips集【随時更新】
この記事を書いている僕は、2020年からShopifyエキスパートで働いて、現在はShopifyフリーランスエンジニアとして活動しています。
ブログをしっかり書こうと思うと、まとまった時間が必要で、書きたいことが書けないので、Liquid Tips集としてメモ的に利用して、まとめていきます。
ぜひ開発時の参考にしてみてください。
カウントする方法
{% assign loops = 0 %}
まず、変数を作成して、0を代入する。
{% for product in collection.products limit: number_of_related_products %}
{% assign loops = loops | plus: 1 %}
{% endfor %}
for文で回し、１をプラスさせる。
条件文で、その数でなかったらなどにして使用する。
{% if loops != 0 %}
{% endif %}
Liquid CSS読み込み方法
記述方法
{{ '〇〇' | asset_url | stylesheet_tag }}例:FAQページだけCSSを反映させたい場合
faq.cssをassetsフォルダー内に作って
page.faq.liquidに
{{ ‘faq.css’ | asset_url | stylesheet_tag }}を記述すれば反映。
便利なLiquid ジェネレーター
Shopify構築上級講座で習いました♪
めちゃめちゃ便利
Shopify Liquid ジェネレーター
Shopify Liquid ジェネレーター
商品タグでコントロール
{% if product.tags contains 'hello' %}
<!-- logic performed -->
{% else %}
<!-- other logic performed -->
{% endif %}JavaScriptとLiquidを連携させてJSを実行する方法
まずJSファイルをテーマのAssetsフォルダ内に作成。
例）main.js
そして、テーマのLayoutフォルダのtheme.liquidのbodyタグ（閉じタグ）の前に
<script src="{{ 'main.js' | asset_url }}"></script>と記述すれば完成。
読み込みできているか確認するために
main.jsの中に
alert(1);と記述して、アラートが出たら問題なく連携できているのでOKです♫
セクションエブリウェアに対応させるためのスキーマ
これで、セクションを作って、GUIで追加可能。
シンプル実装。
{% schema %}
{
"name": "コンタクトフォーム",
"tag": "section",
"class": "spaced-section",
"presets": [
{
"name": "コンタクトフォーム"
}
]
}
{% endschema %}JSONファイルに初期時実装するための記述方法
{
"name": "Contact-form",
"sections": {
"main": {
"type": "main-page"
},
"form": {
"type": "contact-form"
}
},
"order": [
"main",
"form"
]
}ログインしているかどうかの条件文
{% if customer %}
// ログイン時に行う処理
{% endif %}url(ハンドル）で条件文
{% if page.handle == 'ハンドル' %}
// ハンドルのページのみ表示するコンテンツ
{% endif %}逆にしたいなら
{% if page.handle != 'ハンドル' %}
// ハンドルのページ以外で表示するコンテンツ
{% endif %}調整しておくと良い項目
customer.first_name
customer.last_name
の順番と内容
OS2.0で、セクションをどのページにも使用できるようにする
Schemaに、この記述を追記
"presets": [
{
"name": "セクションの名前"
}
]OS2.0で、セクションを指定のテンプレートだけに制御する実装
"presets": [
{
"name": "About Image with text"
}
],
"templates": ["page"]Shopify CLI コマンド
ログイン
$ shopify login [--store ] セクションをピンポイントでCSSを当てる方法
動的なセクションにCSSを指定すると
全部変わるので
HTMLにLiquidを入れて
<div class="section-{{ section.id }}">と記述すると、個別のセクション番号
section-〇〇〇〇〇〇
が出力されるので、
そこにCSSを指定すれば解決です。
セクションをfor文で出力したあとに個別でCSSを当てる方法
これも動的になるので、
HTMLにLiquidを入れて
<div class="section-{{ forloop.index }}">と記述すると
その順番で出力されるので
そこにCSSを指定すれば解決です。