shopify Theme KitとVSCodeで楽々テーマ編集

# はじめに
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のインストール

```bash
$ brew tap shopify/shopify
$ brew install themekit
```

全て完了したら動作確認

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

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

```bash
$ theme version
ThemeKit 1.3.0 darwin/amd64
```

## 2-1.テーマキットのパスワードを取得（プライベートアプリ使用の場合）
1.shopifyにログインして左のメニューの「アプリ管理」を開いて下の方の「プライベートアプリを管理する」をクリック
![スクリーンショット-2021-07-02-17.46.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166550/a6792609-651b-fd2b-87af-1d6113b49a38.jpeg)
2.プライベートアプリを作成する
![スクリーンショット 2021-07-02 17.46.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166550/b2430317-5a21-0c0a-a2ac-91dde589dd2c.png)
3.アプリの詳細と権限の設定
![スクリーンショット 2021-07-02 17.49.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166550/3997724d-2ecc-cb4f-3344-4e95563e44e6.png)
必要な権限にチェック入れる
![スクリーンショット 2021-07-02 17.49.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166550/20a050da-a883-9122-4b57-20564f92222a.png)

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


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

1. [Theme Kit Access](https://apps.shopify.com/theme-kit-access?shpxid=664a01af-F715-4DCC-7561-21034140A8B8)をショップに追加する
2. 必要情報を入力しパスワード作成する
3. 2に記入したメールアドレスにきたリンクにアクセスするとパスワードが表示される
※セキュリティのため、1度しか表示されないので、必ずメモして保管する

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

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

### 今shopify上で選択しているテーマのIDを取得
```bash
theme get --list -p=[API-password] -s=[store.myshopify.com]
```

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

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


### テーマを新規作成
```bash
$ theme new --password=[API-password] --store=[store.myshopify.com] --name=[theme name]
```

### テーマを指定してダウンロード
```bash
theme get -p=[API-password] -s=[store.myshopify.com] -t=[theme id]
```


## 4.環境別にconfigを設定
config.ymlを作成してテーマと同じ階層に置く

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

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

  # 開発環境
  development:
    password: APIのパスワード
    theme_id: テーマID
    store: ストア名
```
これで
"--env=[環境名]" でデプロイや監視をしわける。

## 5.Theme Kitのよく使うコマンド
[Theme Kit command reference](https://shopify.dev/tools/theme-kit/command-reference)

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

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

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

### 最新テーマをダウンロード（gitでいうとpull）
```sh
  theme download --env=production --allow-live
```

### テーマのデプロイ

#### 本番環境にデプロイ

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

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

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

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

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



## 6.vscodeにプラグインを入れる
おすすめプラグイン
[Shopify Liquid](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) 構文の強調表示、フォーマット、コード補完など。
[Shopify Liquid Template Snippets](https://marketplace.visualstudio.com/items?itemName=killalau.vscode-liquid-snippets) スニペット - 例えばassignって入力したら{% assign variable = value %}ってすぐ使えるようにスニペットを呼び出す

## おまけ

### 変数の中身はjsonで見る
```javascript
  <script>
    console.log("{{template}}");
    console.log("{{template.name}}");
  </script>
```
### ログインしているかどうか

参考 : [会員登録後に会員登録完了ページに遷移させたい](https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E5%BE%8C%E3%81%AB%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E5%AE%8C%E4%BA%86%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E9%81%B7%E7%A7%BB%E3%81%95%E3%81%9B%E3%81%9F%E3%81%84-%E3%81%9F%E3%81%A0%E3%81%97-%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E3%81%82%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AF%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E6%88%BB%E3%81%97%E3%81%9F%E3%81%84/m-p/951773#M1295)

```liquid
  {% 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](https://shopify.dev/api/ajax/reference/product)

```javascript
  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](https://shopify.dev/api/liquid) - liquidの記述

[Section schema](https://shopify.dev/themes/architecture/sections/section-schema) - スキーマの設定
[Input settings](https://shopify.dev/themes/architecture/settings/input-settings) - スキーマの入力設定

[Cart notes and attributes](https://shopify.dev/themes/architecture/templates/cart#cart-notes-and-attributes) - Cart attributes カートへの入力項目追加。配送日時とか。
[Collect additional customer information](https://shopify.dev/themes/customer-engagement/additional-customer-information) - 登録画面で入力項目を追加してnoteにセット


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