【Shopify学習】Liquid Tips集【随時更新】

Liquid Shopify

この記事を書いている僕は、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文で回し、1をプラスさせる。

条件文で、その数でなかったらなどにして使用する。

{% 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 ジェネレーター

商品タグでコントロール

{% 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を指定すれば解決です。