Chapter 09

おまけ ~テーマ1.0から2.0への移行~

hiroki
hiroki
2021.12.13に更新

このキャプチャーでは、テーマ1.0を2.0へ移行します。テーマ1.0は、デフォルトテーマのDebutを使用します。すべてのページを移行すると、かなりの工数になります。なので商品ページのみを移行します。

2.0へ移行することで得られるメリット

本書では、Dawn(2.0)にセクション追加キャプチャーでスライダーセクションを追加しています。Debut(1.0)は、スライダーセクションが最初から付いていますが、商品ページなど下階層ページはセクションを追加できません。

2.0から下階層ページにもセクションが追加できるので、1.0から移行しましょう。
商品ページにスライダーセクションを追加するまでを行います。

商品を追加

商品ページが必要なので、仮の商品を追加しておいてください。

  1. [商品管理]をクリック
  2. [すべての商品]をクリック
  3. [商品を追加]をクリック
  4. 仮の情報をいれて、商品を登録してください。

    画像登録しておいてください。値段や割引、配送などとくに決まりはありません。
    公開状況は、アクティブにしておいてください。

コードを編集

  1. [オンラインストア]をクリック

  2. [テーマ]をクリック

  3. 現在のテーマが[Debut]になっていることを確認。[アクション]をクリック

  4. [コードの編集]をクリック

  5. 商品ページのproduct.liquidのコードを丸々コピーしてください。

{% comment %}
  The contents of the product.liquid template 
  can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}
******* 省 ***********
  1. [sections]フォルダ内にmain-product.liquidを新規作成します。
  2. main-product.liquid内に"5"でコピーした内容をペーストします。
  3. ペーストが完了すると[templates]フォルダ内のproduct.liquidは、必要ないので削除します。
  4. main-product.liquidを修正します。このままだとmain-productにschema情報がないのでproduct-templateの読み込みを削除します。
 {% comment %}
   The contents of the product.liquid template 
   can be found in /sections/product-template.liquid
 {% endcomment %}
 
-{% section 'product-template' %}
 {% section 'product-recommendations' %}
******* 省 ***********
  1. {% section 'product-template' %}削除した箇所に、product-templateの内容を丸々コピー&ペーストしてください。
{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

<div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
>
*** 省 ****

{% section 'product-recommendations' %}
  1. [sections]フォルダ内のproduct-template.liquidは、内容が空なので削除します。
  2. [template]フォルダ内にproduct.jsonを新規作成します。product.liquidは削除した上で作業してください。
  3. product.json内に以下のペーストしてください。
{
  "sections": {
    "main": {
      "type": "main-product"
    },
    "product-recommendations": {
      "type": "product-recommendations"
    }
  },
  "order": [
    "main",
    "product-recommendations"
  ]
}

13 jsonのほうでproduct-recommendationsを読み込むように記述したので、main-product.liquidの読み込みは削除しておいてください。

 {% comment %}
   The contents of the product.liquid template can be found in  /sections/product-template.liquid 
 {% endcomment %}
 
 <div class="product-template__container page-width"
  id="ProductSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="product"
  data-enable-history-state="true"
  data-ajax-enabled="{{ settings.enable_ajax }}"
 >
 *** 省 ****
- {% section 'product-recommendations' %}

動作確認

  1. カスタマイズをクリック。
  2. 商品ページの[デフォルトの商品]を選択してください。
  3. セクションが追加できることを確認してください。

以上です。jsonなどの詳しい解説は後日掲載します。