開発者ブログ

2025.03.22

ecforceにおけるLiquidファイルの編集について

はじめに

当社ではEC-CUBEやshopify、カラーミーなどEC担当者なら一度は聞いたことがあるオープンソースやASPを使った一般的なECサイトの開発を承ることが多いのですが、EC Forceのカスタマイズを担当する事も多く、意外と情報が少ないことに事に気づきまして、今回Liquidファイルにフォーカスを当ててまとめてみました。

 

ecforceのLiquidファイルとは

Liquidは元々、RubyのフレームワークであるShopifyに由来していますが、ecforceでも似たような用途で利用されており、以下のような特徴があります:

1,テンプレートエンジンとしての役割: LiquidはHTMLの中に埋め込まれる形で動的なデータを処理します。これにより、商品情報、在庫情報、ユーザー情報などをWebページに表示できます。

2,変数やオブジェクトの操作: Liquidでは、変数を埋め込むための構文が用意されています。例えば、{{ product.name }} で商品名を表示するといった具合です。

3,条件分岐と繰り返し処理: Liquidには、条件分岐({% if %}, {% else %}, {% endif %})やループ処理({% for %}, {% endfor %})がサポートされており、これを使って柔軟な表示が可能です。

4,フィルター機能: Liquidでは、フィルターを使って表示するデータの形式を変更できます。例えば、数値をフォーマットしたり、文字列を大文字に変換したりすることができます。

5,セキュリティ: Liquidはセキュリティが強化されており、悪意のあるコードがテンプレートから実行されるのを防ぐ仕組みが整っています。

 

Liquidファイルの具体的な使用例

ecforceのLiquidテンプレートでよく使われる変数をいくつか紹介します。これらの変数を使うことで、サイトの動的コンテンツを柔軟に表示したり操作したりできます。

1. product

商品の詳細情報を取得するための変数です。例えば、商品名や価格、説明文、画像などにアクセスできます。

product.name: 商品名
product.price: 商品の価格
product.description: 商品の説明
product.image: 商品画像
product.url: 商品ページのURL
product.inventory: 在庫数
product.sku: 商品のSKU(識別番号)
例:
{{ product.name }}

{{ product.description }}

価格: ¥{{ product.price | money }}

img src=”{{ product.image | img_url: ‘medium’ }}” alt=”{{ product.name }}”>

2. collection

商品コレクション(カテゴリなど)に関連する情報を取得します。collectionを使うことで、特定のカテゴリに所属する商品一覧を取得できます。

collection.name: コレクション名
collection.products: コレクションに属する商品群
collection.description: コレクションの説明文
例:
{{ collection.name }}の商品一覧

{% for product in collection.products %}

{{ product.name }} – ¥{{ product.price | money }}

{% endfor %}

3. customer

顧客に関連する情報を取得するための変数です。ユーザーがログインしている場合、その情報を表示できます。

customer.name: 顧客の名前
customer.email: 顧客のメールアドレス
customer.orders_count: 顧客が行った注文の数
例:
{% if customer %}

ようこそ、{{ customer.name }} さん!

{% else %}

ログインしてください。

{% endif %}

4. cart

カートに関連する情報を取得します。ユーザーがカートに入れた商品や合計金額などを表示できます。

cart.items: カートに入っている商品のリスト
cart.total_price: カート内の商品合計金額
cart.item_count: カートに入っているアイテムの数
例:
カートの中身

{{ item.quantity }} x {{ item.product.name }} – ¥{{ item.line_price | money }}

{% for item in cart.items %}

{% endfor %}

合計金額: ¥{{ cart.total_price | money }}

 

5. order

注文に関する情報を取得します。注文詳細や顧客の配送先情報などを表示できます。

order.number: 注文番号
order.total_price: 注文の合計金額
order.line_items: 注文に含まれる商品詳細
order.shipping_address: 配送先住所
例:
注文番号: {{ order.number }}

合計金額: ¥{{ order.total_price | money }}

{% for item in order.line_items %}

{{ item.quantity }} x {{ item.product.name }} – ¥{{ item.line_price | money }}

{% endfor %}

6. shop

店舗に関連する情報を取得します。店の名前や住所、営業時間などを表示できます。

shop.name: 店舗名
shop.currency: 通貨の単位(例:JPY)
shop.email: 店舗の連絡先メールアドレス
例:

店舗名: {{ shop.name }}

連絡先: {{ shop.email }}

さいごに

いかがでしたでしょうか?

Shopifyと使い方は似ている部分は多いものの、ecforce独自の文法もあったりするので参考になれば幸いです。

また、このLiquidを使うとカスマイズの範囲が広がるので是非活用して貰えたら嬉しいですが、専門性が伴う作業という事もあり構築のご相談や、既存ECサイトの保守・運用、乗り換えのご相談なども承っています。
「ECサイトを立ち上げたい」「どこに相談したらいい分からない…」「まだ検討中だが相談に乗って欲しい」というお悩みやサイトに関するご相談がありましたら気軽にご連絡ください。

わをんへのお問い合わせはこちらから