Shopify テーマ開発の世界を歩いてみる 🫗

$ shopify version 
Current Shopify CLI version: 3.45.0
💡 Version 3.49.4 available!

$ shopify theme init
?  Name of the new theme:
✔ maeda-test-store
Cloning https://github.com/Shopify/dawn.git into ${YOUR_CURRENT_DIR}/maeda-test-store

$ shopify theme dev --store https://${YOUR_SHOPI_ID}.myshopify.com/

$ shopify theme push
> 1. Dawn [live]
  2. Dawn [unpublished]
  3. Development (c990ce-Seiyanonotopasokon) [development] [yours]

? Select theme to push to xn-r8j8auyl1k.myshopify.com (You chose: Dawn [live])
? Are you sure you want to push to your live theme? (You chose: yes)
┏━━ Pushing theme files to Dawn (#161139523860) on xn-r8j8auyl1k.myshopify.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃                                                                                                                                                                                                100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (24.13s) ━━
✓ Your theme was pushed successfully

  View your theme:
  https://xn-r8j8auyl1k.myshopify.com/

  Customize this theme in the Theme Editor:
  https://xn-r8j8auyl1k.myshopify.com/admin/themes/161139523860/editor

$ shopify theme push --unpublished --json        
? Theme name
> Dawn

{"theme":{"id":161141457172,"name":"Dawn","role":"unpublished","shop":"xn-r8j8auyl1k.myshopify.com","editor_url":"https://xn-r8j8auyl1k.myshopify.com/admin/themes/161141457172/editor","preview_url":"https://xn-r8j8auyl1k.myshopify.com/?preview_theme_id=161141457172"}}

.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers

<section class="page-width">
  <h3>{{ section.settings.title }}</h3>
  <dl>
    {% for block in section.blocks %}
      <dt>{{ block.settings.question }}</dt>
      <dd>{{ block.settings.answer }}</dd>
    {% endfor %}
  </dl>
</section>

{% schema %}
{
  "name": "FAQ",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "FAQ",
      "default": "FAQたいとる"
    }
  ],
  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ項目",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "質問を入力してください",
          "default": "デフォの質問だよ"
        },
        {
          "type": "text",
          "id": "answer",
          "label": "答えを入力してください",
          "default": "デフォの答えだよ"
        }
      ]
    }
  ],
  "presets": [
    {"name": "FAQ"}
  ]
}
{% endschema %}

$ shopify populate products --help
╭─ error ──────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  Command populate:products not found.                                        │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

{%- if product.metafields.custom.release_date.value -%}
  <p>{{ block.settings.text }}</p>
{%- endif -%}

{% schema %}
...
{
  "type": "release_date",
  "name": "発売日",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "default": "発売日：",
      "label": "発売日"
    }
  ]
},
...

if (!customElements.get('product-form')) {
  customElements.define(
    'product-form',
    class ProductForm extends HTMLElement {
      constructor() {
        super();

        this.form = this.querySelector('form');
        this.form.querySelector('[name=id]').disabled = false;
        this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
        this.cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');
        this.submitButton = this.querySelector('[type="submit"]');

        if (document.querySelector('cart-drawer')) this.submitButton.setAttribute('aria-haspopup', 'dialog');

        this.hideErrors = this.dataset.hideErrors === 'true';
      }
...

...
{
    "name": {
      "ja": "テストです"
    },
    "settings": [
      {
        "type": "header",
        "content": {
          "ja": "ヘッダーです"
        }
      },
      {
        "type": "checkbox",
        "id": "test_check",
        "label": {
          "ja": "チェックしてください"
        },
        "default": true
      },
      {
        "type": "text",
        "id": "test_text",
        "label": {
          "ja": "入力してください"
        },
        "info": {
          "ja": "お知らせとかとか"
        }
      },
      {
        "type": "color",
        "id": "test_color_text",
        "label": {
          "ja": "色を決めてください"
        },
        "default": "#3a3a3a"
      }
    ]
},
...

{{ settings.test_text }}

├── templates
│   ├── 404.json
│   ├── article.json
│   ├── blog.json
│   ├── cart.json
│   ├── collection.json
│   ├── customers
│   │   ├── account.json
│   │   ├── activate_account.json
│   │   ├── addresses.json
│   │   ├── login.json
│   │   ├── order.json
│   │   ├── register.json
│   │   └── reset_password.json
│   ├── gift_card.liquid
│   ├── index.json
│   ├── list-collections.json
│   ├── page.contact.json
│   ├── page.json
│   ├── password.json
│   ├── product.json
│   └── search.json

{
  "wrapper": "div#div_id.div_class[attribute-one=value]",
  "sections": {
    "main": {
      "type": "main-product"
    }
  },
  "order": [
    "main"
  ]
}

<div id="div_id" class="div_class" attribute-one="value">
    <!-- main-product.liquid section が描画される -->
</div>

name: Deploy Shopify Theme

on:
  push:
    branches:
      - '**'

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Setup Shopify Theme Kit
      run: |
        curl -s https://shopify.dev/themekit.py | sudo python3
      shell: bash

    - name: Deploy theme to Shopify
      run: |
        theme deploy --password=${{ secrets.SHOPIFY_THEME_PASSWORD }} --store=${{ secrets.SHOPIFY_STORE_URL }} --themeid=${{ secrets.SHOPIFY_THEME_ID }}
      shell: bash

[API] Invalid API key or access token (unrecognized login or wrong password)

name: Deploy Shopify Theme

on:
  push:
    branches:
      - '**'

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Setup Shopify Theme Kit
      run: |
        curl -s https://shopify.dev/themekit.py | sudo python3
      shell: bash

    - name: Get theme ID by branch name
      id: get-theme-id
      run: |
        THEME_NAME=$(echo "${GITHUB_REF##*/}") #現在のブランチ名
        THEME_ID=$(theme get --list --password=${{ secrets.SHOPIFY_THEME_PASSWORD }} --store=${{ secrets.SHOPIFY_STORE_URL }} | grep $THEME_NAME | awk '{print $1}' | tr -d '[]') # テーマ ID を取得
        echo "THEME_ID=$THEME_ID" >> $GITHUB_ENV
      shell: bash

    - name: Deploy theme to Shopify
      run: |
        theme deploy --password=${{ secrets.SHOPIFY_THEME_PASSWORD }} --store=${{ secrets.SHOPIFY_STORE_URL }} --themeid=${{ env.THEME_ID }}
      shell: bash

Run theme deploy --*** --store=*** --themeid=xxxxxxxxxx
[development] 293|293 [=================================================]  100 %

[development] 293|293 [=================================================]  100 %
[development] 293 files, No Change: 293

${HOME}/Library/Application Support/Shopify/Themekit/variables

SHOPIFY_THEME_PASSWORD: xxxxxxxxxxxxxxxxxxx
SHOPIFY_THEME_ID: "xxxxxxxxxxxx"
SHOPIFY_STORE_URL: xxxxx.myshopify.com

development:
  password: ${SHOPIFY_THEME_PASSWORD}
  theme_id: ${SHOPIFY_THEME_ID}
  store: ${SHOPIFY_STORE_URL}

$ theme get --list
Available theme versions:
  [aaaaa][live] Dawn
  [bbbbb] Development (c990ce-Seiyanonotopasokon)
  [ccccc] Dawn
  [ddddd] Dawn
  [eeeee] maeda-test-store/main
  [fffff] maeda-test-store/feature-mod-sample-section-tex

{% schema %}
  {
    "name": "",
    "class": "",
    "settings": [
    
    ]
  }
{% endschema %}

$ brew update
$ brew install bfg
$ bfg --version
bfg 1.14.0

$ git --version
git version 2.40.0

// `bfg` コマンド実行時のディレクトリ構造。
bfg/
├── sample-repo.git/
└── passwords.txt

// ログイン
$ shopify theme dev --store https://${YOUR_SHOPI_ID}.myshopify.com/
// テーマ名の一覧を表示
$ shopify theme list
// テーマへの反映（共有要件次第では非公開ステータスを付ける）
$ shopify theme push --unpublished
? Theme name
> xxxxx
┏━━ Pushing theme files to xxxxx (#xxxxxxxxxx) on xxx.myshopify.com ━━━━━━━━
┃                                                                                                              100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (35.15s) ━━
✓ Your theme was pushed successfully

  View your theme:
  https://xxx.myshopify.com/?preview_theme_id=xxxxxxxxxx

  Customize this theme in the Theme Editor:
  https://xxx.myshopify.com/admin/themes/xxxxxxxxxx/editor

shopify theme dev --store https://${YOUR_SHOPI_ID}.myshopify.com --theme-editor-sync

$ shopify theme dev --theme-editor-sync
// 〜 管理画面でいろいろ編集！ 〜 // 
// `config/settings_data.json` に差分が入る // 
$ shopify theme push
> テストテーマ
┏━━ Pushing theme files to テストテーマ (#xxxxxxxxx) on xxxxx.myshopify.com ━
┃                                                                                                       100%
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ (42.51s) ━━
✓ Your theme was pushed successfully

  View your theme:
  https://xxxxx.myshopify.com/?preview_theme_id=xxxxxxxxx

  Customize this theme in the Theme Editor:
  https://xxxxx.myshopify.com/admin/themes/xxxxxxxxx/editor

shopify theme pull --store ${ストアID} // -i ${ダウンロードしたいテーマのID} でもOK

<p>
  {{ product.description }}
</p>

<p> </p> // `product.description` を囲っていた p タグ
<p>こんにちは。<meta charset="utf-8"><span data-mce-fragment="1">こんにちは。</span><meta charset="utf-8"><span data-mce-fragment="1">こんにちは。</span></p>
<p><span data-mce-fragment="1"><meta charset="utf-8">こんにちは。<meta charset="utf-8">こんにちは。</span></p>
<p><span data-mce-fragment="1"><meta charset="utf-8">こんにちは。</span></p>
<p></p>

data-mce-fragmentはHTMLやWeb開発における特定の属性の一つで、
主にTinyMCEというリッチテキストエディタを使ったコンテンツの編集に関連しています。
TinyMCEはWeb上で使われるリッチテキストエディタの一つで、
ユーザーがフォーマットされたテキストを入力できるようにするものです。

<div>
  {{ product.description }}
</div>

<div>
  <p>こんにちは。<meta charset="utf-8"><span data-mce-fragment="1">こんにちは。</span><meta charset="utf-8"><span data-mce-fragment="1">こんにちは。</span></p>
  <p><span data-mce-fragment="1"><meta charset="utf-8">こんにちは。<meta charset="utf-8">こんにちは。</span></p>
  <p><span data-mce-fragment="1"><meta charset="utf-8">こんにちは。</span></p>
</div>