見出し画像

#07　製品ページのカスタマイズ方法

WEB-YoNet｜Shopifyでオリジナルテーマ制作

このページを見ることで商品詳細ページのカスタマイズ方法がわかります。

product.liquid にある元々のコードを削除する

①「templates」フォルダの「product.liquid」を開く
②記載されているコードを「Ctrl」キー＋「A」で全選択し、削除する


商品名と商品画像を呼び出すLiquidを追加する

商品名と商品画像の情報を取得して、変数に代入するコードを追加します。

{% assign current_product = product.selected_or_first_available_varian %}
{% assign product_image = current_product.featured_image | default: product.featured_image %}


商品名と商品画像の変数を作成する

①商品名の変数　　assign current_product
②商品画像の変数　assign product_image

※assignは変数を定義するときに使う

①商品名の変数　assign current_product

◆liquidの解説
{% assign current_product = product.selected_or_first_available_varian %}

product.selected_or_first_available_varian
→ 現在選択されている商品情報を変数に代入する

（例）商品サイズ（大・中・小）を選べる商品の場合
現在選ばれているサイズは何か？中サイズ？小サイズが選ばれている？
「現在どのサイズが選択されているのか」の情報を取得するためにproduct.selected_or_first_available_varian を使う

→お客様が選択したオプションが何かを取得する

②商品画像の変数　assign product_image

◆liquidの解説
{% assign product_image = current_product.featured_image | default: product.featured_image %}

current_product.featured_image
①商品名の変数「current_product」の最初に登録されている画像「featured_image」を変数 product_imageに代入する


| default: product.featured_image　とは？
| default → デフォルト値（初期値）を決めることができるフィルター
このフィルターを使うことで、
初期値を「featured_image」を指定することができる。


変数を定義したコードの下にBootstrapのHTMLコードと
Liquidコードを記述していきます。

<div class="container">
   <div class="row">
       <div class="col-md-6 col-12">
           <img class="img-fluid" src="{{ product_image | img_url: 'large' }}" alt="{{ product_image.alt }}" id="ProductMainImage">
           {% for image in product.images %}
               <img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt }}">
           {% endfor %}
       </div>
       <div class="col-md-6 col-12">
           <h1>{{ product.title }}</h1>
           <p>{{ current_product.price | money_with_currency }}</p>

           {% form 'product', product, class:"product-form", id:"AddTpCartForm" %}
               <div class="mb-3">
                   <select name="id" id="productSelect" class="form-select">
                       {% for variant in product.variants %}
                           {% if variant.available %}
                               <option value="{{ variant.id }}">
                                   {{ variant.title }}
                               </option>
                           {% else %}
                               <option value="{{ variant.id }}" disabled="disabled">
                                   {{ variant.title }}
                               </option>                                   
                           {% endif %}
                       {% endfor %}
                   </select>
               </div>
               <div class="mb-3">
                   <input type="number" class="form-control" name="quantity" id="Quantity" value="1" min="1">
               </div>

               <button type="submit" name="add" id="AddToCard" class="btn btn-secondary btn-lg w-100 rounded-0">
                   カートに入れる
               </button>
               {{ form | payment_button }}
           {% endform %}
       </div>
   </div>
</div>


商品画像・タイトル・価格を呼び出すLiquidを追加する


商品画像と画像alt をLiquidで呼び出す

<img class="img-fluid" src="{{ product_image | img_url: 'large' }}" alt="{{ product_image.alt }}" id="ProductMainImage">

product_image　商品画像を呼び出すLiquid
| img_url: 'large'　画像のサイズを指定するフィルター
product_image.alt　商品画像のaltを呼び出すLiquid

商品画像が複数枚登録されていれば表示する

{% for image in product.images %}
　<img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt }}">
{% endfor %}

→ product.images（商品画像）があれば、あるだけすべて画像を表示する

image.src　画像が保存してあるURLを取得する
| img_url: 'medium'　画像のサイズを指定するフィルター
image.alt　画像のaltを呼び出すLiquid

商品タイトルと商品価格を表示する

<h1>{{ product.title }}</h1>
<p>{{ current_product.price | money_with_currency }}</p>

product.title　商品タイトルを取得する
current_product.price　①商品名の変数「current_product」の価格
| money_with_currency　通貨表示が含まれているHTML形式で金額表示
（例）￥100 JPY


商品オプションをセレクトボタンで選択できるようにフォームタグを呼び出すLiquidを追加する


直訳＋自己解釈のため日本語等がわかりにくですがご了承ください。

LiquidでHTMLのフォームを作る場合、
特定のエンドポイントにフォームを送信するために、
必要な入力要素と一緒にHTMLフォーム要素を生成します。

例えば、フォームタイプがproductの場合
<input type="hidden" name="form_type" value="product" />
のようなHTMLがタグが生成されます。

フォームが機能するためには、
フォームタイプをエンドポイントに送信する必要があります。

製品ページでフォームを作るので、
フォームタイプは product に設定します。
しかし、使用可能なフォームタイプは全部で 13種類あります。

フォームのタグを追加するLiquid

{% form 'product', product, class:"product-form", id:"AddTpCartForm" %}
　内容
{% endform %}

form 'product'　フォームタイプをproductに指定している

, product,　この記述を消したらエラーになる
↓
このproductは productオブジェクトであり、
カートにアイテムを追加できるようにするには、
フォームのパラメータとして product オブジェクトを与える必要がある



出力されるHTMLタグ
<form method="post" action="/cart/add" id="AddTpCartForm" accept-charset="UTF-8" class="product-form" enctype="multipart/form-data">

<input type="hidden" name="form_type" value="product" />

※value="product"がフォームタイプである

フォームタイプの13つのタイプ

① {% form 'activate_customer_password' %}　　顧客パスワード
② {% form 'contact' %}　　連絡先
③ {% form 'currency' %}　通貨
④ {% form 'customer' %}　顧客
⑤ {% form 'create_customer' %}　　会員登録？
⑥ {% form 'customer_address' %}　　顧客住所
⑦ {% form 'customer_login' %}　　ログイン
⑧ {% form 'guest_login' %}　　ゲストログイン
⑨ {% form 'new_comment' %}　　コメント
⑩ {% form 'product' %}　 製品
⑪ {% form 'recover_customer_password' %}　顧客パスワード再設定
⑫ {% form 'reset_customer_password' %}　　顧客パスワードのリセット
⑬ {% form 'storefront_password' %}　　フロントパスワード

今回、使うフォームのタイプは　{% form 'product' %}　 製品タイプです。


続きのコードの解説です。

商品のオプションの在庫があれば、セレクトボタンで選択可能にして、在庫がない場合はグレーアウトして表示だけして選択できないようにする

<select name="id" id="productSelect" class="form-select">
　{% for variant in product.variants %}
　　{% if variant.available %}
　　　<option value="{{ variant.id }}">
　　　　{{ variant.title }}
　　　</option>
　　{% else %}
　　　<option value="{{ variant.id }}" disabled="disabled">
　　　　{{ variant.title }}
　　　</option>
　　{% endif %}
　{% endfor %}
</select>


◆ 商品オプションの数だけ繰り返す
{% for variant in product.variants %}
　繰り返す内容
{% endfor %}


◆ もし、オプションの在庫があれば、
　 オプションIDと、オプションの名前を表示する
　 オプションの在庫がなければ、
　 オプションIDと、オプションの名前を表示するが、
　 選択できないようにグレーアウトさせる

{% if variant.available %}
　<option value="{{ variant.id }}">
　　{{ variant.title }}
　</option>
{% else %}
　<option value="{{ variant.id }}" disabled="disabled">
　　{{ variant.title }}
　</option>
{% endif %}

今すぐ購入ボタンを表示する

{{ form | payment_button }}

管理画面でPaypalを設定していれば、Paypalで決済するボタンを表示することができる

| payment_button　このフィルターで今すぐ購入ボタンを追加できる

もし、今すぐ購入ボタンを表示したくない場合、
ダイナミックセクションに登録させることで、今すぐ購入ボタンを設置したりしなかったりできます。


今すぐ購入ボタンをダイナミックセクションにする

セクションに今すぐ購入ボタンのコードを追加します。

管理画面から今すぐ購入ボタンを追加・削除を設定できるようにする

◆手順
①「sections」フォルダに「product-template.liquid」を作成する
②「templates」フォルダの「product.liquid」のコードを切り抜き
　「product-template.liquid」にペーストする
③ 「product.liquid」にコードを追加する
④「product-template.liquid」にスキーマのJSONを追加する
　（編集内容：スキーマを作成し管理画面から追加の決済方法を
　　追加するか削除するかを選択できるようにするコード）
⑤「product-template.liquid」を編集する

③ 「product.liquid」にコードを追加する

「product.liquid」に以下のコードを追加します。

{% section 'product-template' %}


④「product-template.liquid」にスキーマのJSONを追加する

ファイルの一番下に、以下のJSONコードを追加します。

{% schema %}
{
    "name": "Products",
    "settings": [
        {
            "type": "checkbox",
            "id": "dynamic_buttons_checkbox",
            "label": "ダイナミックボタンを表示する",
            "default": false
        }
    ]
}
{% endschema %}


⑤「product-template.liquid」を編集する

管理画面のダイナミックボタンを表示するのチェックがあれば、ダイナミックボタンが表示されるための条件文を追加します。

{{ form | payment_button }}　付近にLiquidコードを追加します。

{% if section.settings.dynamic_buttons_checkbox == true %}
 {{ form | payment_button }}
{% endif %}


もし、ダイナミックボタンを表示するのチェックがあれば、ボタンを表示する

{% if section.settings.dynamic_buttons_checkbox == true %}
　{{ form | payment_button }}
{% endif %}

section.settings.dynamic_buttons_checkbox
セクションファイルで設定したsettingsのスキーマにid名でアクセスする
"settings": [
　{
　　"type": "checkbox",
　　"id": "dynamic_buttons_checkbox",
　　"label": "ダイナミックボタンを表示する",
　　"default": false
　}

◆これでスキーマで設定したsettingの内容にアクセスできる
section.settings.id名

◆ if section.settings.dynamic_buttons_checkbox == true
管理画面のカスタマイズの箇所で、製品ページで
ダイナミックボタンを表示するのメニューで、
チェックがあれば、ボタンを表示する


この記事が気に入ったらサポートをしてみませんか？