shopifyの「商品ページ」でliquidにるカスタマイズした例文コード

shopifyの「商品ページ」でliquidにるカスタマイズした例文コード

こちらは、Shopifyの商品ページで利用できるLiquidコードの例です。商品ページのカスタマイズには様々な方法がありますが、以下の例は商品の価格をカスタマイズする方法や、商品の詳細説明の表示方法などを示しています。

例1：価格の表示方法をカスタマイズする

{% if product.price_min < product.compare_at_price_min %}
<span class="sale-price">{{ product.price_min | money }}</span>
<span class="compare-at-price">{{ product.compare_at_price_min | money }}</span>
{% else %}
<span class="regular-price">{{ product.price_min | money }}</span>
{% endif %}

この例では、商品の価格をカスタマイズする方法を示しています。このLiquidコードでは、商品の価格がセール価格と通常価格の2種類ある場合に対応しています。商品の価格が通常価格の場合には、regular-priceというクラス名を持つspanタグで価格を表示します。商品の価格がセール価格の場合には、sale-priceというクラス名を持つspanタグでセール価格を表示し、compare-at-priceというクラス名を持つspanタグで元の通常価格を表示します。

以下は、上記のコードの行ごとに解説したものです。

{% if product.price_min < product.compare_at_price_min %}

この行は、もし商品の最小価格（product.price_min）が商品の比較対象価格（product.compare_at_price_min）よりも低い場合に、以下のコードを実行するための条件文です。

<span class="sale-price">{{ product.price_min | money }}</span>
<span class="compare-at-price">{{ product.compare_at_price_min | money }}</span>

この部分は、商品の最小価格が比較対象価格よりも低い場合に表示されるHTML要素を表しています。1つ目の行は、商品の最小価格を表示し、2つ目の行は、商品の比較対象価格を表示します。表示される価格は、"| money"というフィルターを使って、通貨の形式に変換されます。

{% else %}

この行は、条件文が満たされない場合に実行するコードの始まりを示しています。つまり、商品の最小価格が比較対象価格よりも低くない場合に以下のコードが実行されます。

<span class="regular-price">{{ product.price_min | money
}}</span>

この部分は、商品の最小価格が比較対象価格よりも低くない場合に表示されるHTML要素を表しています。商品の最小価格を表示し、"| money"フィルターを使って通貨の形式に変換します。
上記のコードは、Shopifyの商品ページで使用することができます。商品の最小価格が比較対象価格よりも低い場合にはセール価格と定価を表示し、商品の最小価格が比較対象価格よりも低くない場合には、通常価格を表示します。

例2：商品の詳細説明を表示する

{% if product.description != '' %}
<h2 class="product-description-title">商品説明</h2>
<div class="product-description">{{ product.description }}</div>
{% endif %}

この例では、商品ページに商品の詳細説明を表示する方法を示しています。このLiquidコードでは、商品の説明が空でない場合に限り、product-description-titleというクラス名を持つh2タグで「商品説明」というタイトルを表示し、product-descriptionというクラス名を持つdivタグで商品の詳細説明を表示します。

【メモ】
「product-description-title」は、Shopifyの標準的なクラス名ではありません。このクラス名は、テーマの開発者が独自に作成したクラス名で、商品ページで商品の説明のタイトルを表すために使われているものです。テーマごとにクラス名が異なるため、使用するテーマのドキュメンテーションを参照して、詳細を確認する必要があります。

以下は、コードの解説です。

{% if product.description != '' %}

この条件式は、商品の説明が存在する場合にのみ、説明のタイトルと内容を表示するための制御を行います。商品説明が空である場合は、この条件式のブロック内のコードは実行されません。
「!= ''」は、値が空の場合に条件が成立しないことを意味します。つまり、商品の説明が空でない場合に、条件式内のコードが実行されます。
Shopifyの商品ページでは、商品の説明が空の場合があります。このため、上記のコードでは、商品説明が空でない場合に、説明を表示するようにしています。このように条件分岐を使用することで、必要な場合にだけ必要なコードを実行できるようになります。

h2要素で、商品説明のタイトルを表します。class属性には、「product-description-title」というクラス名が設定されています。このクラス名は、テーマの開発者が独自に作成したクラス名で、商品ページで商品の説明のタイトルを表すために使われているものです。

<div class="product-description">{{ product.description }}</div>

div要素で、商品説明の内容を表します。class属性には、「product-description」というクラス名が設定されています。このクラス名は、テーマの開発者が独自に作成したクラス名で、商品ページで商品の説明の内容を表すために使われているものです。{{
product.description }}は、現在表示している商品の説明を出力するために使用されます。{{ }}はLiquidタグと呼ばれ、Shopifyのテンプレートエンジンの一部です。このタグを使用することで、商品情報を動的に表示することができます。

以上のように、このコードは、ShopifyのテンプレートエンジンのLiquidを使用して、商品ページに商品の説明を表示するために必要なHTMLタグを生成するものです。

例3：カスタムオプションの表示方法をカスタマイズする

{% if product.options.size > 0 %}
<h2 class="product-options-title">オプション</h2>
<ul class="product-options-list">
{% for option in product.options %}
<li class="product-option">
<span class="product-option-label">{{ option.name }}</span>
{% assign values = option.values | join: ', ' %}
<span class="product-option-value">{{ values }}</span>
</li>
{% endfor %}
</ul>
{% endif %}

この例では、商品ページにカスタムオプションを表示する方法を示しています。このLiquidコードでは、商品にオプションが設定されている場合に限り、product-options-titleというクラス名を持つh2タグで「オプション」というタイトルを表示し、product-options-listというクラス名を持つulタグでオプションをリスト表示します。そして、product-optionというクラス名を持つliタグで各オプションを表示します。オプションのラベルは、product-option-labelというクラス名を持つspanタグで表示し、オプションの値は、product-option-valueというクラス名を持つspanタグで表示します。また、assignタグを使用して、オプションの値をカンマ区切りの文字列として結合しています。

{% if product.options.size > 0 %}

最初の行は、現在表示されている製品にオプションがある場合にのみ、オプションを表示するための条件分岐です。製品がオプションを持っていない場合は、このブロックはスキップされます。

<h2 class="product-options-title">オプション</h2>

次の行は、オプションのセクションの見出しを定義しています。この例では、「オプション」というテキストを含むh2タグが使用されます。

この行は、オプションリストを定義するために使用されます。ここで使用されているulタグは、リストアイテムを表すliタグを含みます。

{% for option in product.options %}

次の行は、製品のオプションリストをループしているforループです。ここでは、ループ内でoptionという変数が使用され、これは現在のオプションを表します。
「option」という変数は、ShopifyのLiquidテンプレートエンジンのforループ構文内で使用される変数で、現在反復処理されている製品オプションを表します。
Shopifyストアで製品を作成する際、オプションを追加することができます。例えば、サイズや色、素材など、製品の特性を表すさまざまなオプションを追加できます。これらのオプションは、製品の「options」というプロパティに格納され、それぞれ「name」と「values」という2つのプロパティを持ちます。

次の行は、オプションリストの各アイテムを含むliタグを定義しています。ここで使用されているクラス名「product-option」は、このリストアイテムが製品オプションであることを示します。

<span class="product-option-label">{{ option.name }}</span>

次の行は、オプション名を表示するために使用されます。ここで使用されているクラス名「product-option-label」は、オプション名を表しています。オプション名は、option.nameというLiquid変数から取得されます。

{% assign values = option.values | join: ', ' %}
<span class="product-option-value">{{ values }}</span>

<span class="product-option-value">{{ values }}</span>
最後に、オプションの値を表示するために使用されます。ここで使用されているクラス名「product-option-value」は、オプションの値を表しています。オプションの値は、option.valuesというLiquid変数から取得され、joinフィルターを使用して、カンマ区切りの文字列に変換されます。
このようにして、ShopifyのLiquidテンプレートエンジンを使用して、製品ページでオプションを表示することができます。

【メモ】
「assign values」とは、ShopifyのLiquidテンプレート言語で使用されるコマンドの1つで、変数に値を代入するために使用されます。

具体的には、以下のように使用します。

{% assign variable_name = value %}

これは、変数「variable_name」に「value」という値を代入することを意味します。この値は、文字列、数値、真偽値、配列など、さまざまなデータ型を持つことができます。
ShopifyのLiquidテンプレートでは、変数の値を代入するために「assign」コマンドを使用する必要があります。変数に値を代入することで、テンプレート内でその変数を使用することができます。たとえば、以下のように変数を使用することができます。

<p>{{ variable_name }}</p>

これは、変数「variable_name」に代入された値を表示するためのコードです。テンプレート内のどこでも変数を使用することができます。また、変数は他の変数から値を取得することもできます。

ShopifyのLiquidテンプレートでは、変数名には文字、数字、アンダースコア（ _ ）が使用できます。ただし、先頭に数字を使用することはできません。また、変数名は大文字と小文字を区別するため、同じ名前の変数を2つ定義することができます。

下記のコードは、Shopifyの商品ページのテンプレートファイル（product.liquid）に記述することができます。
product.liquidは、ショップの商品ページのHTMLコードを生成するためのテンプレートファイルであり、以下のようなデフォルトのコードが含まれています。

{% extends 'product-base.liquid' %}

{% assign product = product.selected_or_first_available_variant %}

{% capture current %}product-{{ product.id }}{% endcapture %}

{% unless product.available %}
{% capture sold_out %}{{ 'products.product.sold_out' | t }}{% endcapture %}
{% include 'sold-out' %}
{% endunless %}

<div class="product-single {% if section.settings.show_vendor %}has-vendor{% endif %}" data-section-id="{{ section.id }}" data-product-id="{{ product.id }}" data-product-handle="{{ product.handle }}" data-product-title="{{ product.title | escape }}" data-variant-title="{{ product.title | escape }}" data-product-url="{{ product.url }}">
<div class="product-single__photos" {% if product.images.size > 1 %}data-aos="zoom-in"{% endif %}>
{% section 'product-template' %}
</div>

<div class="product-single__meta {% if section.settings.show_vendor %}has-vendor{% endif %}">
<div class="product-single__meta-row product-single__meta-row--title">
<h1 class="product-single__title">{{ product.title }}</h1>
</div>

<div class="product-single__meta-row product-single__meta-row--price">
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span class="product-single__price" data-product-price>
{{ product.price | money }}
</span>

{% if product.compare_at_price_max > product.price_max %}
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product-single__sale-price" data-product-sale-price>
{{ product.compare_at_price_max | money }}
</span>
{% endif %}
</div>

<div class="product-single__meta-row product-single__meta-row--vendor" {% unless section.settings.show_vendor %}style="display: none"{% endunless %}>
<span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
<span>{{ product.vendor }}</span>
</div>

{% if section.settings.show_sku %}
<div class="product-single__meta-row product-single__meta-row--sku">
<span class="visually-hidden">{{ 'products.product.sku' | t }}</span>
<span>{{ product.sku }}</span>
</div>
{% endif %}

{% if product.options.size > 1 %}
{% assign option_index = 0 %}
{% for option in product.options %}
{% capture option_index %}{{ option_index | plus: 1 }}{% endcapture %}
<div class="product-single__meta-row product-single__meta-row--option" data-variant-option-name="{{ option.name }}">
<label for="{{ option.name | handle }}" class="product-single__option">{{ option.name }}</label>

<div class="product-single__option-wrapper">
{% assign option_index = forloop.index0 %}
{% include 'product-option' with option %}
</div>
</div>
{% endfor %}
{% endif %}

以下は、product.liquidにおいて、先程のカスタマイズコードを実際に記述するべき部分を示したものです。