Shopify テーマ作成 プログラミング

Shopifyでオリジナルテーマを作成しよう~No.5[トップページの作成]~

この記事は約 13 分で読めます。

こんな方におすすめ

  • Shopifyでオリジナルテーマを作成したい
  • Shopifyで商品の情報を取得し、表示したい

はじめに

Shopifyオリジナルテーマを作成しよう、の第5回は「トップページの作成」です。

webサイトを訪れたときに一番最初に出てくるページの作成となります。

今回の学習を通して学べることは主に以下の三つです

  • 画像の表示方法
  • 商品の情報取得、表示
  • 商品の表示数の制限

今回のコードは下記リンクにまとめてあるので参考にしてみてください。(branch:no5)

https://github.com/masa-ino/shopify-training/tree/no5

また、今回のテーマのもとのhtmlは第1回の記事に公開してあるので、そちらからダウンロードをお願いします。

https://agata-code.com/programming/original-no1/

トップページを作成しよう

それではトップページを作成していきます。

templatesフォルダのindex.liquidを修正します。
デフォルトでいろいろ書き込まれていますが、以下のコードに変更してください。

{% section 'toppage-header'%}
{% section 'toppage-products'%}

そして、sectionsフォルダの中に
「toppage-header.liquid」「toppage-products.liquid」
の二つのファイルを作成してください。

sections

toppage-header.liquid

toppage-products.liquid

toppage-header.liquidは一番上の大きな画像を、
toppage-products.liquidは商品を表示します。

トップの画像を表示

まず、トップページの一番上に好きな画像を入れられるように修正していきます。

toppage-header.liquidに下記コードを貼り付けてください
(配布したHTMLファイルのindex.htmlにあるものです。)

<div class="toppage_bg_img mb-5" style="background-image: url('assets/img/index_top.jpg');"></div>

このコードをShopify用に変更してきます。

下記コードに変更してください

<div class="toppage_bg_img mb-5" style="background-image: url('{{section.settings.toppage_header_image | img_url: '1920x'}}');"></div>

{% schema %}
{
	"name": "Toppage Header Image",
	"settings": [
		{
			"type": "image_picker",
			"id": "toppage_header_image",
			"label": "Toppage Header Image"
		}
	]
}
{% endschema %}

解説していきます。

まず、schemaの部分ですが、今回は画像を入れたいため、
typeに "image picker" を指定します。

他のnameやsettingsのところは第3回で説明したとおりです。

続いて背景画像の部分です。

一行目の

{{section.settings.toppage_header_image | img_url: '1920x'}}

で画像を出力しています。

 | img_url: '1920x'

「img_url」で画像ファイルであることを指示、
'1920x'は大きさをしていしています。
配置する画像の大きさに合わせて指定してみてください。
こちらに詳しく書いてあります

https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#img_url

このように自由に画像をカスタマイズできるようになりました。

商品を表示

続いて、商品を表示します。
今回はコレクションを指定し、その中の商品をいくつか表示してみます。

まず、header-products.liquidに下記コード(配布したHTMLファイルのもの)を配置してください。

<div class="main">
    <div class="container">
      <div class="row">
        <a href="product.html" class="col-sm mb-3">
          <div class="card">
            <img class="item_list_img" src="assets/img/clothes1.jpg" alt="">
            <div class="card-body">
              <p class="card-text font-weight-bold">商品タイトル</p>
              <p>¥3,000</p>
            </div>
          </div>
        </a>
        <a href="product.html" class="col-sm mb-3">
          <div class="card">
            <img class="item_list_img" src="assets/img/clothes2.jpg" alt="">
            <div class="card-body">
              <p class="card-text font-weight-bold">商品タイトル</p>
              <p>¥3,000</p>
            </div>
          </div>
        </a>
        <a href="product.html" class="col-sm mb-3">
          <div class="card">
            <img class="item_list_img" src="assets/img/clothes3.jpg" alt="">
            <div class="card-body">
              <p class="card-text font-weight-bold">商品タイトル</p>
              <p>¥3,000</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

こんな感じで表示されました。

これをShopify用に編集していきます。

まず、一番下に下記コードを貼り付けてください。

{% schema %}
{
	"name": "Toppage Collection",
	"settings": [
		{
			"type": "collection",
			"id": "toppage_collection",
			"label": "Toppage_Collection"
		}
	]
}
{% endschema %}

今回はコレクションを指定したいため、
"type": "collection"
を指定します。

続いて、
<div class="row">の部分を下記コードに変更します。

<div class="row">
      {% assign collection = collections[section.settings.toppage_collection] %}
      {% for product in collection.products %}
      <a href="{{product.url}}" class="col-sm mb-5 h-100">
        <div class="card">
          <img class="item_list_img" src="{{product.featured_image.src | img_url: '1920x'}}" alt="">
          <div class="card-body">
            <p class="card-text font-weight-bold">{{product.title}}</p>
            <p>{{product.price | money}}</p>
          </div>
        </div>
      </a>
      {% endfor %}
</div>

まず、collectionは

collections[section.settings.id名]

のように、指定します。

ただし、これを毎回書くのは大変なので
{% assign %}
を使ってcollectionという変数に格納します。
コレクション内の個別の商品は
collection.products
で取り出すことができます。

基本的にはこれをfor文を使って1つずつ取り出していきます。

商品の情報は、

  • product.url ... 商品URL
  • product.title ... 商品タイトル
  • product.price | money ... 商品の値段を¥マークを付けて表示
  • product.featured_image.src ... 商品の画像を一枚取り出して表示

のようにして取り出すことができます。

詳しくは下記リンクを参考にしてみてください。

https://shopify.dev/docs/admin-api/rest/reference/products/product

それでは表示させてみましょう。
今回はadidasを指定しました。

こんな感じに表示することができました。

商品数を制限する方法

adidasを指定すると4つ商品が出てきました。
ただし、商品の数を指定したいときもあります。
その場合はfor文の外側をpaginateで囲います。

{% paginate collection.products by 3 %}
      {% for product in collection.products %}
      <a href="{{product.url}}" class="col-sm mb-5 h-100">
        <div class="card">
          <img class="item_list_img" src="{{product.featured_image.src | img_url: '1920x'}}" alt="">
          <div class="card-body">
            <p class="card-text font-weight-bold">{{product.title}}</p>
            <p>{{product.price | money}}</p>
          </div>
        </div>
      </a>
      {% endfor %}
{% endpaginate %}

paginate は基本的にはブログなどで次のページに行くときなどに使われますが、
このように指定することでfor文で回す回数を指定することができます。

今回は3を指定したので最大3つ表示されます。

良い感じになりました。

このコレクションの部分を「Sale」などにすると実用的かもしれません。

まとめ

今回は

  • 画像の表示方法
  • 商品の情報取得、表示
  • 商品の表示数の制限

を主に行いました。

今回のコードは下記リンクにまとめてあるので参考にしてみてください。(branch:no5)

https://github.com/masa-ino/shopify-training/tree/no5

なお、質問や要望がありましたら、お問い合わせフォームまたはコメント欄によろしくお願いします。

次回はAboutページを作成していきます。

ページ一覧

全体像の確認

https://agata-code.com/programming/original-no1/

開発環境のセット

https://agata-code.com/programming/original-no2/

ヘッダーの作成

https://agata-code.com/programming/original-no3/

フッターの作成

https://agata-code.com/programming/original-no4/

トップページの作成

https://agata-code.com/programming/original-no5/

Aboutページの作成

https://agata-code.com/programming/original-no6/

お問い合わせフォームの作成

https://agata-code.com/programming/original-no7/

コレクションページの作成

https://agata-code.com/programming/original-no8/

個別商品ページの作成

https://agata-code.com/programming/original-no9/

カートページの作成

https://agata-code.com/programming/original-no10/

ブログの作成

https://agata-code.com/programming/original-no11/

ログイン機能の実施

https://agata-code.com/programming/original-no12/

-Shopify, テーマ作成, プログラミング

© 2021 AGATA CODE Powered by AFFINGER5