2020.10.1

【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のような条件式を書きたい場合はunlessblankを使います。

 

{% 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 ペイメントのテスト

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

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

 

 

■バックナンバー

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア