📦 ページテンプレ初級
トップページの商品とページコンテンツ表示
ショップのトップページに、フロントページコレクションの商品を複数レイアウトで表示し、ページコンテンツとニュースブログ記事を組み合わせて表示するテンプレート。最初の商品は大きく、残りは小さくグリッド表示する。
用途
オンラインストアのトップページ構築時に、注目商品とテキストコンテンツをまとめて配置したいとき。フロントページコレクションとニュースブログの連携が必要。
設置場所
templates/index.liquid に配置する。管理画面でコレクション「フロントページ」とブログ「ニュース」、ページ「フロントページ」を事前作成して、ハンドルと内容を設定しておく。
注意点
コレクション『フロントページ』、ブログ『ニュース』、ページ『フロントページ』のハンドルが管理画面で正確に「frontpage」「news」に設定されていることが前提。offset:1 の使用で2番目以降の商品を別レイアウトで表示するため、フロントページコレクションに商品が1件以上存在する必要がある。product_img_url の 'small' と 'thumb' サイズは既存のアセット設定に依存するため、サイズが存在しない場合は CSS で調整する。
コード
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 > Blogs & 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>
出典・ライセンス
- Repository:
- https://github.com/Shopify/liquid
- License:
- MIT
このコードは Shopify 著作の MIT ライセンスソースです。 原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。