Collection条件を有効にする

Collections 条件を使うには、テーマに小さなテンプレートファイルが1つ必要です。このファイルがないと、アプリはストアフロントで商品がどのコレクションに属しているかを判別できないため、コレクションを対象にしたカウントダウンは表示されません。

この作業はテーマごとに1回だけ行います。必要な場合はアプリが通知します。カウントダウンビルダーに警告バナーが表示され、サポートに代行を依頼したい場合は Request setup ボタンも使えます。

ノート

ほかの条件（All Products、Select products、Product variants、Page、Customer、Language、Country）にはこのファイルは不要です。必要なのは Collections だけです。

ファイルを追加する手順

1. テーマのコードエディタを開く

   Shopify管理画面で オンラインストア → テーマ に移動します。対象のテーマで …（その他の操作）ボタンをクリックし、コードを編集 を選択します。

   

   その他の操作 → コードを編集から、テーマのコードエディタを開きます。

2. 新しいテンプレートファイルを作成する

   Templates フォルダで Add a new template をクリックし、タイプが liquid の search テンプレートを選んで、次の名前を付けます。

   samiCountdownsProductsJson

   Shopifyは templates/search.samiCountdownsProductsJson.liquid として保存します。

   

   samiCountdownsProductsJsonという名前のsearchテンプレートを作成します。

3. 内容を置き換える

   Shopifyが新しいファイルに入力した内容をすべて削除し、代わりに次の内容を貼り付けます。

   {%- layout none -%}
   {%- paginate search.results by 1000 -%}
       [{%- for product in search.results -%}
           {%- unless forloop.first -%},{%- endunless -%}
           {
               "id":{{-product.id-}},
               "title":{{-product.title | json-}},
               "handle":{{-product.handle | json-}},
               "price":"{{-product.price-}}",
               "price_max":"{{-product.price_max}}",
               "price_min":"{{-product.price_min}}",
               "type":{{-product.type | json-}},
               "created_at":"{{-product.created_at | date: "%Y-%m-%d %H:%M" -}}",
               "published_at":"{{-product.published_at | date: "%Y-%m-%d %H:%M" -}}",
               "tags": {{-product.tags | json-}},
               "vendor": {{-product.vendor | json-}},
               "featured_image":"{{-product.featured_image-}}",
               "url":"{{-product.url-}}",
               "collections":{{-product.collections | map: 'id' | json-}},
               "compare_at_price":"{{-product.compare_at_price-}}",
               "compare_at_price_max": "{{-product.compare_at_price_max-}}",
               "compare_at_price_min": "{{-product.compare_at_price_min-}}",
               "price_varies": "{{-product.price_varies-}}",
               "compare_at_price_varies": "{{-product.compare_at_price_varies-}}",
               "images":[
               {%- for image in product.images -%}{%- unless forloop.first -%},
               {%- endunless -%}{"id":{{-image.id-}},
               "src":{{-image.src | json-}}}{%- endfor -%}],
               "first_available_variant":{"id":{{-product.selected_or_first_available_variant.id | times: 1 -}}},
               "available":{{-product.available | json-}},
               "options": {{-product.options | json-}},
               "variants":[
                   {%- for variant in product.variants -%}{%- unless forloop.first -%},
                       {%- endunless -%}
                       {
                       "id":{{-variant.id-}},
                       "title":{{-variant.title | json}},
                       "name":{{-variant.name | json}},
                       "price":{{-variant.price-}},
                       "compare_at_price":{{-variant.compare_at_price | times: 1-}},
                       "available":{{-variant.available-}},
                       "sku":{{-variant.sku | json -}},
                       "weight":"{{-variant.weight-}}",
                       "weight_unit": "{{-variant.weight_unit-}}",
                       "inventory_quantity":{{-variant.inventory_quantity-}},
                       "option1":  {{-variant.option1| json-}},
                       "option2":  {{-variant.option2| json-}},
                       "option3":  {{-variant.option3| json-}},
                       "options":  {{-variant.options| json-}},
                       "selected": {%- if variant.selected -%}  {{-variant.selected-}} {%- elsif product.selected_or_first_available_variant.id == variant.id -%} true  {%- else -%} false {%- endif -%}
                       }
                   {%- endfor -%}
               ]
           }
       {%- endfor -%}]
   {%- endpaginate -%}

4. ファイルを保存する

   コードエディタで Save をクリックします。

5. アプリに戻ってTheme integrationを開く

   Countdown Timer Bar Samitaに戻り、Theme integration ページを開いて、このテーマでアプリが変更を認識するようにします。

6. Collection条件をテストする

   カウントダウンを開き、条件を Collections に設定してコレクションを1つ選び、Active で保存します。その後、ライブのストアフロントで、そのコレクションに含まれる商品を開きます。カウントダウンが表示されるはずです。

   コレクションに含まれない商品も確認してください。何も表示されなければ正常です。

このファイルの役割

これは、商品情報をウェブページではなくデータとして返す検索テンプレートです。各商品が属するコレクションも含まれます。この情報は、通常はストアフロントのアプリでは取得できません。アプリはCollection条件を確認する必要があるときに、バックグラウンドでこのファイルをリクエストします。お客様に表示されることはありません。

知っておきたいこと

• テーマごとに必要です。 テーマを変更したり新しいテーマをインストールしたりした場合は、そのテーマにもファイルを追加します。
• 名前は正確に入力してください。 大文字も含めて samiCountdownsProductsJson です。入力ミスがあるとファイルが見つからず、ページにエラーも表示されません。
• 読み取り専用です。 このファイルは、テーマの動作や外観を変更しません。

ノート

テーマのコードの編集に不安がある場合は、カウントダウンビルダーの警告バナーにある Request setup ボタンで、サポートとのチャットを開けます。サポートが代わりに追加します。サポートに直接問い合わせることもできます。

次のステップ

• 表示条件
• テーマ連携
• カウントダウンが表示されない
• サポートに問い合わせる