デイトラshopifyアドバンスコース学習方法!40代はスクールやめた方が良い?[第5-6週]

開発テーマ：Shopify CLI のコマンド shopify theme dev で 同期しているときに表示されているテーマ

Shopify ブラウザエディターで変更したコード👈️VS Code へ反映しない

コマンド👇️

Shopifyのテーマの読み込まれる順

Layout > Templetes > Sections >Blocks > Snippets > Config > Assets > Locals

theme.liquid
　全てのベース。これがないとテーマとしてアップロードしてもエラー

　Shopfiyの独自関数（ content_for_layout）で各ページの内容を動的表示する

password.liquid
　ティザーページのベースファイル

page.json 👈️ セクション追加できる

page.liquid 👈️ セクション追加できない

Shopfiyの独自関数（ content_for_layout）で各ページの内容を動的表示する

今日のメモ

OS 1.0 から OS 2.0 への移行手順（今日の学習内容）

• Templatesフォルダの liquid ファイルの中身を切り取り
• Sectionフォルダに Templatesフォルダ で切り取ったファイルの中身を貼り付け（貼り付ける liquid ファイルを作成する）
• 中身が空になっている Templatesフォルダの liquid ファイルを jsonファイルにする
• jsonファイルにコードを記載する

Assetsフォルダ

• CSS、JavaScript、画像など、テーマ外観のファイルを置くフォルダ
• CSS・JSを編集するときはファイルを追加して記述（利用頻度：高）
• CSS・JSファイルにliquidの拡張子を付けると、Liquidの記述ができる

Localesフォルダ

• 言語ファイルを置くフォルダ
• 日本語表現の編集できる
• 日本語がない場合は、ja.jsonとして追加（ en.default.json がデフォルトなのでコピーして日本語訳を作成する）
• Shopifyで公開言語に設定した言語が反映される
• ブラウザで Shopify の設定から直接変更できる（その場合、shopify theme pull 必要か）

👇️OS 1.0 から OS 2.0 へ移行する手順として大まかに共通していること

①. Templateのliquidファイルが読込んでいるSectionのliquidファイル

（中身をSectionのliquidファイルへ切り取り＆貼り付け or Templateのliquidファイルの中身を全削除）

②. Templateのliquidファイル

③. ①のあとにjsonファイルへ変更

👇️ヘッダーとフッターにもセクションを追加できるようにする設定

①. header と footer については、Sectionフォルダ内に JSON ファイルを作成

　header-group.json

　footer-group.json

②. liquid ファイルは theme.liquid

③. {% section ‘header’ %} 👉️ {% sections ‘header-group’ %} へ変更する

④. {% section ‘footer %} 👉️ {% sections ‘footer-group’ %} へ変更する

これでヘッダー、フッターにもセクション追加できる

（反対にヘッダー、フッターに指定したセクションタイプだけ表示させないという設定もできる）

Liquidオブジェクト 👉️ Shopifyのデータをウェブサイトに表示できる

Shopifyでのオブジェクト 👉️ ストアにあるデータやテーマに保存されているデータ（データを出力・表示するために使用）

{{ product.title }}
{{ product.description}}

よく使うプロダクトオブジェクト

• product.available
• product.collections
• product.content
• product.description
• product.featured_image
• product.featured_media
• product.first_available_variant
• product.handle
• product.id
• product.images
• product.options
• product.price
• product.selected_variant
• product.selected_or_first_available_variant
• product.tags
• product.title
• product.type
• product.url
• product.variants
• product.vendor

コレクションプロパティー

• product.images
• product.collections
• product.options
• product.variants

👇️Liquid（オブジェクト、タグ、フィルター）の一覧

Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid

This cheat sheet is an interactive reference for the Liquid templating language that will help you build ecommerce templ...

www.shopify.com

リレーションプロパティ = ネストされたプロパティ

　👉️階層構造 = 他のオブジェクトや複数のプロパティを含む

　👉️「オブジェクト内のオブジェクト」としてアクセス可能

　👉️つまりより深い情報までたどれる

🧐やっぱりルート構造🧐

グローバルオブジェクト

どのテンプレートにも表示できる

タグ

「順次」「分岐」「繰り返し」：基本的にはこの３つのみ

タグの種類

Conditional Tags（条件分岐）👇️主な3つ

• 　if（真）
• 　unless（偽）
• 　case

Iteration Tags（繰り返しタグ）
Theme Tags（テーマタグ）
Variable Tags（変数タグ）

Iteration tags

• for（forloop 👉️ 繰り返し文でよく使うので抑える！）
• else
• break
• continue
• cycle
• tablerow
• paginate

forloopのコード👇️

{% for page in pages -%}
  {%- if forloop.length > 0 -%}
    {{ page.title }}{% unless forloop.last %}, {% endunless -%}
  {%- endif -%}
{% endfor %}

For文のタグパラメーター

• limit
• offset
• range