Shopifyでオリジナルテーマを作成しよう～No.9[個別商品ページの作成]～

2022年12月28日

こんな方におすすめ

Shopifyでテーマカスタマイズしたい人
Shopifyで商品ページを作成したい人
関連商品を表示したい人

はじめに

Shopifyオリジナルテーマを作成しよう、の第9回は「個別商品ページの作成」です。

下の画像のようなページを作成します。

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

商品ページの作成方法
関連商品の表示方法

今回のコードは下記リンクにまとめてあるので参考にしてみてください。（branch：no9）

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

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

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

個別商品ページを作成しよう

デフォルトテンプレートの解説

まず、デフォルトの解説から行います。

Shopifyの個別商品ページは「templates\product.liquid」で編集できます。

デフォルトでは下記コードが入っています。

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">
{% for image in product.images %}
  <a href="{{ image.src | img_url: 'large' }}">
    <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
  </a>
{% endfor %}
<h1>{{ product.title }}</h1>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
  <select name="id" id="productSelect">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - sold out
        </option>
      {% endif %}
    {% endfor %}
  </select>
  {{ current_variant.price | money }}
  <label for="Quantity">quantity</label>
  <input type="number" id="Quantity" name="quantity" value="1" min="1">
  <button type="submit" name="add" id="AddToCart">Add to cart</button>
</form>
<div>{{ product.description }}</div>

上から順に解説していきます

{% assign current_variant = product.selected_or_first_available_variant %}・・・選択したバリエーション、または一番上のバリエーションを変数に格納します

このように商品には色やサイズなど種類がたくさんあるため、現状態ではこの一番上のバリエーションを表示するよ、という意味です。

{% assign featured_image = current_variant.featured_image | default: product.featured_image %}・・・現在のバリエーションの画像（デフォルトでは一番上の画像）を表示するよ、というものです。
もし、青色の靴の写真が用意されていて、バリエーションが「blue」だったら、その写真が表示されるよ、と言うものです。

上記画像のようになります。

{% for image in product.images %}・・・商品の画像を順番に表示します
{{ product.title }}・・・商品のタイトル
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">・・・これをformタグに指定することで、カートにデータを送ることができます。
基本的にはこのコードで問題ありません
selectの中は以下の通りです

<!-- セレクトボックスの設置 -->
  <select name="id" id="productSelect">
    <!-- バリエーションを1つずつ取り出す -->
    {% for variant in product.variants %}
    <!-- バリエーションがあったら、id,title,priceを取得 -->
      {% if variant.available %}
        <option value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
      <!-- バリエーションがなかったらsold out を表示 -->
        <option disabled="disabled">
          {{ variant.title }} - sold out
        </option>
      {% endif %}
    {% endfor %}
  </select>

{{ current_variant.price | money }}・・・現在のバリエーションの値段を表示
<input type="number" id="Quantity" name="quantity" value="1" min="1">・・・数量を入力
{{ product.description }}・・・商品詳細

このようになっています。

それでは、この機能を活かして、独自デザインに変更します。

独自デザインに修正

product.liquidを下記コードに書き換えてください。

{% render 'breadcrumbs' %}
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<div class="main">
  <div class="container">
    <div class="row mb-5">
      <div class="col-sm">
        <img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" alt=""
          class="product_big_img">
        <div class="row row-cols-sm-3 mt-3">
          {% for image in product.images %}
          <div class="col">
            <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}" class="product_small_img">
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="col-sm">
        <h2 class="mb-3 f30">{{ product.title }}</h2>
        <p class="f26">{{ current_variant.price | money }}</p>
        <p class="my-5">{{ product.description }}</p>

        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
          <div class="form-row">
            <div class="form-group col-md-4">
              <label for="id">種類</label>
              <select name="id" id="productSelect" class="form-control">
                {% for variant in product.variants %}
                {% if variant.available %}
                <option value="{{ variant.id }}">
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                </option>
                {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - sold out
                </option>
                {% endif %}
                {% endfor %}
              </select>
            </div>
            <div class="form-group col-md-4">
              <label for="number">数量</label>
              <input type="number" id="Quantity" name="quantity" class="form-control" value="1" min="1">
            </div>
          </div>
          <button type="submit" name="add" id="AddToCart" class="mx-auto btn btn-dark">カートに入れる</button>
        </form>
      </div>
    </div>
  </div>
</div>

デフォルトのコードのデザインのみを変えた感じになります。