はじめに

shopifyの案件をやったので、備忘録を書くよ。
shopify-cliでもいいけどローカルの監視が超楽だからTheme Kitを使用。

前提条件

shopifyアカウントを取得済み
Homebrew使用

手順

1.Shopify Theme Kitのインストール
2-1.テーマキットのパスワードを取得（プライベートアプリ使用の場合）
2-2.テーマキットのパスワードを取得（Theme Kit Access使用の場合。こちらが推奨されてる）
3.テーマをダウンロード
4.環境別にconfigを設定
5.Theme Kitのよく使うコマンド
6.vscodeにプラグインを入れる

1.Shopify Theme Kitのインストール

$ brew tap shopify/shopify
$ brew install themekit

全て完了したら動作確認

$ theme version
An update for Themekit is available. To update please run `theme update`
ThemeKit 1.1.6 darwin/amd64

アップデートしてねって言われたので、アップデート

$ theme version
ThemeKit 1.3.0 darwin/amd64

2-1.テーマキットのパスワードを取得（プライベートアプリ使用の場合）

1.shopifyにログインして左のメニューの「アプリ管理」を開いて下の方の「プライベートアプリを管理する」をクリック

2.プライベートアプリを作成する

3.アプリの詳細と権限の設定

必要な権限にチェック入れる

4.保存→作成
5.作成したプライベートアプリの詳細のAdmin APIにAPI情報が書いてあるのでパスワードをコピーしておく

2-2.テーマキットのパスワードを取得（Theme Kit Access使用の場合。こちらが推奨されてる）

Theme Kit Accessをショップに追加する
必要情報を入力しパスワード作成する
2に記入したメールアドレスにきたリンクにアクセスするとパスワードが表示される
※セキュリティのため、1度しか表示されないので、必ずメモして保管する

3.テーマをダウンロード

以下でテーマの情報を呼び出したりダウンロードできるので、お好みで新規作成するか、既存テーマをカスタマイズする

[API-password]は2で取得したパス
[store.myshopify.com]は該当ショップのurl
[theme name]はテーマの名称（新規の場合は任意の名前）
[theme id]はテーマのid（今shopify上で選択しているテーマのIDを取得参照）

今shopify上で選択しているテーマのIDを取得

theme get --list -p=[API-password] -s=[store.myshopify.com]

以下のように返ってくる
[theme id（テーマのid）][live（テーマを使用している場合）] Debut（テーマ名称）

Available theme versions:
  [111111111][live] Debut
  [222222222] OtherTheme

テーマを新規作成

$ theme new --password=[API-password] --store=[store.myshopify.com] --name=[theme name]

テーマを指定してダウンロード

theme get -p=[API-password] -s=[store.myshopify.com] -t=[theme id]

4.環境別にconfigを設定

config.ymlを作成してテーマと同じ階層に置く

   # 開発環境
  development:
    password: APIのパスワード
    theme_id: テーマID
    store: ストア名

本番環境を作ったら

本番環境と開発環境が別れている場合は環境別に操作するために、それぞれにプライベートアプリ（またはTheme Kit Access）を設定してパスとテーマIDを取得し以下のように書く。

  # 本番環境
  production:
    password: APIのパスワード
    theme_id: テーマID
    store: ストア名

  # 開発環境
  development:
    password: APIのパスワード
    theme_id: テーマID
    store: ストア名

これで
"--env=[環境名]" でデプロイや監視をしわける。

5.Theme Kitのよく使うコマンド

Theme Kit command reference

テーマの監視（変更を検知して自動的にアップロード）

※エラーが出る時は**「 --allow-live」**をつける

  theme watch --env=development --allow-live

最新テーマをダウンロード（gitでいうとpull）

  theme download --env=production --allow-live

テーマのデプロイ

本番環境にデプロイ

  theme deploy --env=production --allow-live

個別でファイルをデプロイ

  theme deploy assets/ファイル --env=development --allow-live

すべての環境にまとめてdeploy

  theme deploy -a --allow-live

※まとめてデプロイする場合、setting.jsonもデプロイされるので、
本番と開発の設定などに差分がでてきたら、
ローカルが本番の最新の設定であることを確認してからじゃないと
設定もなにもかも上書きされちゃう。
アプリを使用してたらアプリが吐き出すIDなんかが違って動かないとか起こる

6.vscodeにプラグインを入れる

おすすめプラグイン
Shopify Liquid 構文の強調表示、フォーマット、コード補完など。
Shopify Liquid Template Snippets スニペット - 例えばassignって入力したら{% assign variable = value %}ってすぐ使えるようにスニペットを呼び出す

おまけ

変数の中身はjsonで見る

  <script>
    console.log("{{template}}");
    console.log("{{template.name}}");
  </script>

ログインしているかどうか

参考 : 会員登録後に会員登録完了ページに遷移させたい

  {% unless customer %}
    isLogin = false;
  {% else %}
    isLogin = true;
  {% endunless %}
  if(!isLogin) {
    ログインしてないときの処理
  }

商品情報をajaxで取得

https://{shopifyのurl}/products/{productのurl}.json

商品のurlがhttps://hogehoge.com/products/111111の場合、
https://hogehoge.com/products/111111.jsonで取得できる

Product API reference

  var storeUrl = "https://hogehoge.com/"; 
  var productId = "111111";
  var url = storeUrl + '/products/' + productId + '.json';

  $.ajax({
    url: url,
    success: function(data) {
      console.log(data);
    }
  });

リンク

必要な時に何回も探しちゃったリンク集

Liquid reference - liquidの記述

Section schema - スキーマの設定
Input settings - スキーマの入力設定

Cart notes and attributes - Cart attributes カートへの入力項目追加。配送日時とか。
Collect additional customer information - 登録画面で入力項目を追加してnoteにセット

shopifyのテーマをいじってみた感想

ドキュメントが豊富なのでやりやすい。
スキーマとスニペットのあわせ技で更新が楽。スニペットでテンプレ化してスキーマでの繰り返し入力を呼び出したり。
jsonベースだから扱いやすい