1. TOP
  2. Shopify
  3. 【Shopify】（随時更新）開発Tips - #番外編
詳しくはこちら
Shopify
 | 

【Shopify】（随時更新）開発Tips - #番外編

Shopifyで開発時に忘れがちな内容や便利なテクニックをまとめました。

ぜひ開発時の参考にしてみてください。

 

■バックナンバー

目次

コード編

liquidで使用可能な演算子一覧

演算子 解説
== 等しい
!= 等しくない
> 大きい
< 未満
>= 以上
<= 以下
or または
and どちらも

参考ドキュメント：Logical and comparison operators

グローバル変数を定義する

config/settings_schema.jsonで以下のように記述すると、どのファイルでもアクセス可能なグローバル変数を定義できます。

（上半分は関係ないです）

 

[
  {
    "name": "theme_info",
    "theme_name": "Minimal",
    "theme_author": "Shopify",
    "theme_version": "11.7.20",
    "theme_documentation_url": "https:\/\/docs.shopify.com\/manual\/more\/official-shopify-themes\/minimal",
    "theme_support_url": "https:\/\/support.shopify.com\/"
  },
  ・
  ・
  ・
  {
    "name": {
      "ja": "名前（なんでも大丈夫）"
    },
    "settings": [
      {
        "type": "text",
        "id": "呼び出し時に使う変数名",
        "label": "名前（なんでも大丈夫）",
        "default": "呼び出される値"
      }
    ]
  }
]

以下にサンプルを用意しました。

呼び出すには、{{ settings.id }}の形式で記述します。

 

{
  "name": {
    "ja": "URL_HOGE"
  },
  "settings": [
    {
      "type": "text",
      "id": "url_hoge",
      "label": "URL_HOGE",
      "default": "https://hoge.com"
    }
  ]
}

// 呼び出し時
<p>{{ settings.url_hoge }}</p>

// サイト上での表示
<p>https://hoge.com</p>

変数の値が存在する時のみ実行される条件式

変数の値が空の場合はfalse、値が存在する場合はtrueのような条件式を書きたい場合はunlessとblankを使います。

 

{% assign hoge = '' %}

{% if hoge == true %}
  <p>出力される…</p>
{% endunless %}

{% unless hoge == blank %}
  <p>出力されない！</p>
{% endunless %}

if文でtrue判定をすると、変数の値が空でもtrueになってしまいます。

 

blankは値が空かどうかを判定できます。

参考ドキュメント：Truthiness and falsiness in Liquid

管理者ログイン判別

Stack Overflowの質問参照：https://stackoverflow.com/questions/17470921/howto-check-if-current-visitor-is-shops-admin

for文を途中で抜け出す

{% break %}を使います。

 

{% for product in collection.products %}
  {% if hoge == 1 %}
    {% break %}
  {% endif %}
{% endfor %}

参考ドキュメント：Iteration tags

img_urlフィルターで利用可能なサイズパラメータ

masterを指定すると、オリジナルの画像URLが取得できます。

{{ product | img_url: 'master' }}

その他の指定方法は以下の通りです。

値 解説
300x300 幅と高さどちらも指定
300x 幅のみ指定
x300 高さのみ指定
master オリジナルサイズ

参考ドキュメント：img_url

カスタムフィールドを追加できるアプリ

WordPressのカスタムフィールドのように、Shopifyでもアプリを使うことで、商品などに項目（サブタイトルや特別な識別タグなど）を追加できます。

解説記事：【Shopifyアプリ】Custom Fields使ってみた！商品情報を一括追加・編集！

アプリページ：Custom Fields

一般設定編

テストで購入をする

Shopifyペイメントという機能を有効にすることで、テスト購入ができるようになります。

参考ドキュメント：Shopify ペイメントのテスト

会員登録をしている場合のみ購入できるようにする

管理画面 > 設定 > チェックアウト > 顧客アカウントから設定できます。

 

・

・

・

 

■バックナンバー

関連記事