📄 ページテンプレート初級

商品一覧ページのテンプレート

複数の商品リストを統合して、タイトル・説明・商品数・個別商品情報を HTML で出力するページテンプレート。配列の連結、条件分岐、ループ処理を含む基本的な Liquid の使用例。

用途

商品カタログページやセクション別商品一覧で、複数のデータソースをマージして表示したいとき。商品名・価格・説明文を一覧形式で出す場面で使う。

設置場所

templates/ 配下に products.liquid として配置。管理画面で「テンプレート」設定時に自動マッピングされるか、liquid ファイルとして直接呼び出す。

注意点

products と more_products の両変数がストアから渡されていることが前提。price フィルターと prettyprint、paragraph フィルターは古い Liquid バージョン（2005年頃）の custom filters なため、現在の Shopify Liquid では `| money` や標準フィルターに置き換える必要がある。description 文字列を '~' で split している箇所は区切り文字を店舗データに合わせて調整する。

タグ:productlooparrayconcatconditionallegacy

コード

50 行 / liquid

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />

    <title>products</title>

    <meta name="ROBOTS" content="ALL" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="Copyright" content="(c) 2005 Copyright content:  Copyright design: Tobias Luetke" />
    <!-- (c) Copyright 2005 by Tobias Luetke All Rights Reserved. -->
  </head>

  <body>
    {% assign all_products = products | concat: more_products  %}
    <h1>{{ description | split: '~' | first }}</h1>

    <h2>{{ description | split: '~' | last }}</h2>

    <h2>There are currently {{all_products | count}} products in the {{section}} catalog</h2>

    {% if cool_products %}
      Cool products :)
    {% else %}
      Uncool products :(
    {% endif %}

    <ul id="products">

      {% for product in all_products %}
        <li>
          <h2>{{product.name}}</h2>
          Only {{product.price | price }}

          {{product.description | prettyprint | paragraph }}

          {{ 'it rocks!' | paragraph }}

        </li>
      {% endfor %}

    </ul>

  </body>
</html>

出典・ライセンス

Source:: Shopify/liquid/example/server/templates/products.liquid
Repository:: https://github.com/Shopify/liquid
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

商品一覧ページのテンプレート

コード

出典・ライセンス

関連項目

ページテンプレート

リダイレクト

トップページの基本テンプレート

固定ページのテンプレート

ページの基本テンプレート

固定ページのテンプレート