【SHOPLINE】SHOPLINE言語 Handlebarsまとめ

はじめに

SHOPLINEのテーマ開発では、テンプレート言語として「Handlebars」が使われています。この記事では、公式ドキュメントをもとに、SHOPLINEで使えるHandlebarsの基本構文や主なコード例を日本語で分かりやすくまとめます。

Handlebarsとは？

Handlebarsは、HTMLテンプレート内で動的にデータを表示するための記述方法で、二重中括弧で値を埋め込みます。SHOPLINEのテーマ編集では、商品名や価格などを自動で表示するのに使います。

こちらの記事は、Shopifyのセクションを自作できる方向けの記事です。
初心者向けの記事ではないため、細かなことは記載いたしません。わからない部分はご自分で調べてご利用ください。
SHOPLINEのフォルダ構造はおおよそShopifyと同じなので、Shopifyでセクションを自作できる方には簡単にコード編集が可能かと思います。

cssファイルの読み込み

↑Developperページはこちら

{{snippet "stylesheet" href=(asset_url "c_contact.css")}}
もしくは
{{ stylesheet_tag (asset_url 'c_concept.css') }}

JSファイルの読み込み

<script src="{{asset_url 'product-info.js'}}" defer="defer"></script>
もしくは
{{ script_tag (asset_url 'product-info.js') }}

assetsフォルダからの画像読み込み

↑Developperページはこちら

<img src="{{ asset_url 'image-instagram.png' }}">

CDNからの画像読み込み

↑Developperページはこちら

 <img src="{{ file_img_url 'slide1.jpeg' }}" alt="Slide 1">

プレイスホルダーSVG

↑Developperページはこちら

{{ placeholder_svg_tag 'image' 'my-custom-class' }}
collection-1
collection-2
collection-3
collection-4
collection-5
collection-6
image
lifestyle-1
lifestyle-2
product-1
product-2
product-3
product-4
product-5
product-6

if文・if else文

↑Developperページはこちら

{{#if product.available }}
  This product is available!
{{else}}
  This product is sold out!
{{/if}}

if else文
{{#if product.type == 'Red' }}
  This is a red option!
{{else if product.type == 'Yellow' }}
  This is a yellow option!
{{/if}}

unless文

↑Developperページはこちら

{{#unless product.available }}
  This product is available!
{{else}}
  This product is sold out!
{{/unless}}

contain（arrayに◯が含まれていれば）

↑Developperページはこちら

{{ assign 'array' (JSONparse '["a", "b", "c", "d"]') }}

{{#contains array "d"}}
  This will be rendered.
{{else}}
  This will not be rendered.
{{/contains}}

boolean

↑Developperページはこちら

'==',等しい
'===',厳密に等しい（型も比較）
'!=',等しくない
'!==',厳密に等しくない（型も）
'>',より大きい
'>=',以上
'<',より小さい
'<=',以下
'&&',かつ（AND）
'||',または（OR）

例）
{{#if (boolean 1 '==' 1)}}
  等しい時に表示されます
{{/if}}
{{#if a == 1 || b == 2}}
  どちらかの条件が当てはまった場合に表示されます
{{/if}}

when

↑Developperページはこちら

{{#case product.type}}
  {{#when 'Red'}}
    it's is a red potion.
  {{/when}}
  {{#when 'Yellow'}}
    it's is a yellow potion.
  {{else}}
    it's is a potion.
  {{/when}}
{{/case}}


{{#case product.tags}}
  {{#when 'Love' 'Red'}}
    it's a love or red potion.
  {{/when}}
  {{#when 'Yellow' 'Blue'}}
    it's is a yellow or blue potion.
  {{else}}
    it's is a potion.
  {{/when}}
{{/case}}

for文

↑Developperページはこちら

{{#for collection.products as |product|}}
  {{product.title}}
{{else}}
  There are no products in this collection.
{{/for}}


出力
  Silk Gown
  Wool Coat
  Velvet Dress
  Linen Shirt
  Silk Gown
  Cotton Blouse
  Denim Jeans
  Gift Card
  Wool Coat
  Flannel Shirt
  Silk Scarf
  Cashmere Sweater
  Leather Jacket
  Silk Tie
  Pearl Necklace
  Lace Gloves
  Fur Hat
  Canvas Backpack
  
  
  
※BLOCKはforの中でしか出力されない
{{#for section.blocks as |block|}}
  <div class="swiper-slide">
    <picture class="slide-img">
      <source media="(max-width: 768px)" srcset="{{ block.settings.image_sp }}">
      <source media="(min-width: 769px)" srcset="{{ block.settings.image_pc }}">
        <img src="{{ block.settings.image_noimg }}" alt="image" loading="lazy">
    </picture>
  </div>
{{/for}}

最後に

まだまだ情報の少ないSHOPLINE、AIに聞いてもまともな答えを出してくれないことも多いですよね。今回の記事が少しでもお役に立てたのであれば嬉しいです。

今回の記事、SHOPLINEサイト作成の参考になりましたでしょうか？もしよろしければ、Xでのシェアよろしくお願いいたします。

また、お仕事のご依頼もお待ちしております❗