Liquid Snippets by ALSEL
📦 ページテンプレ初級

トップページの商品とページコンテンツ表示

ショップのトップページに、フロントページコレクションの商品を複数レイアウトで表示し、ページコンテンツとニュースブログ記事を組み合わせて表示するテンプレート。最初の商品は大きく、残りは小さくグリッド表示する。

用途
オンラインストアのトップページ構築時に、注目商品とテキストコンテンツをまとめて配置したいとき。フロントページコレクションとニュースブログの連携が必要。
設置場所
templates/index.liquid に配置する。管理画面でコレクション「フロントページ」とブログ「ニュース」、ページ「フロントページ」を事前作成して、ハンドルと内容を設定しておく。
注意点
コレクション『フロントページ』、ブログ『ニュース』、ページ『フロントページ』のハンドルが管理画面で正確に「frontpage」「news」に設定されていることが前提。offset:1 の使用で2番目以降の商品を別レイアウトで表示するため、フロントページコレクションに商品が1件以上存在する必要がある。product_img_url の 'small' と 'thumb' サイズは既存のアセット設定に依存するため、サイズが存在しない場合は CSS で調整する。
タグ:frontpageproductcollectionblogpagehero-product

コード

48 行 / liquid
<div id="frontproducts"><div id="frontproducts-top"><div id="frontproducts-bottom">
<h2 style="display: none;">Featured Items</h2>
{% for product in collections.frontpage.products limit:1 offset:0 %}
  <div class="productmain">
   <a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a>
   <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
   <div class="description">{{ product.description | strip_html | truncatewords: 18 }}</div>
  <p class="money">{{ product.price_min | money }}</p>
  </div>
{% endfor %}
{% for product in collections.frontpage.products offset:1 %}
  <div class="product">
   <a href="{{ product.url }}"><img src="{{ product.featured_image | product_img_url: 'thumb' }}" alt="{{ product.title | escape }}" /></a>
   <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
     <p class="money">{{ product.price_min | money }}</p>
  </div>
{% endfor %}
</div></div></div>

<div id="mainarticle">
  {% assign article = pages.frontpage %}

  {% if article.content != "" %}
    <h2>{{ article.title }}</h2>
    <div class="article-body textile">
      {{ article.content }}
    </div>
  {% else %}
    <div class="article-body textile">
    In <em>Admin &gt; Blogs &amp; Pages</em>, create a page with the handle <strong><code>frontpage</code></strong> and it will show up here.<br />
    {{ "Learn more about handles" | link_to: "http://wiki.shopify.com/Handle" }}
    </div>
  {% endif %}

</div>
<br style="clear: both;" />
<div id="articles">
  {% for article in blogs.news.articles offset:1  %}
    <div class="article">
    <h2>{{ article.title }}</h2>
    <div class="article-body textile">
      {{ article.content }}
    </div>
  </div>
  {% endfor %}
</div>

出典・ライセンス

License:
MIT

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

関連項目