【shopify】メタフィールドでテーブル表を作ろう

商品詳細のページの、「カートボタン」の上とか下とかに、その商品の特徴である「大きさ、重さ」とかを分かりやすく表を出して伝えたい。

そんな時はありますでしょうか。

そういう時に使う情報を入力する機能がshopifyにはもちろんあります。

↑「説明」という入力エリアで（テキストや表や画像も）登録ができます。
通常そこで自由にテキストなど入力していただいて運用する形になるでしょうか。

しかし、そこに入力するのが面倒くさいというのです。
そうなるとメタフィールドを使うしかないですか？

改造が必要ですね。

表を作るのは面倒くさい。減らしたいという気持ちはわかります。

【設置】メタフィールドを登録する
【入力】数値やテキストの登録はコンマで区切る
【共有】表のためのliquidのコードとcss
【オプション】セルにホバーしたら色を変えたい
【オプション2】センチ数値を自動でインチに変換したい
【AI】イラストを描いてもらった

【設置】メタフィールドを登録する

商品の登録の時に、表のための「メタフィールド」を入力する運用にしたいです。
今回は以下の3つを登録したい。

表のタイトル
表のオプション
表の数字

しかし、
最初は商品管理の画面内にメタフィールドがありません。どうやるの？

メタフィールドは使ったことがございますか？

初耳なら存在も知らない人だっているかも。

「設定」 → 「カスタムデータ」 → 「商品」と進んでください。

「商品」に登録をしていきます。
以下のように登録にしたい。

「定義を追加する」ボタンを押して登録をしていきます。

以下のサンプル画像には半透明のエリアがあると思います。
「ネームスペースとキー」というところのテキストを後でliquidのコードで使用します。

※名前を入力すると、自動で「ネームスペースとキー」にテキストが入るときがありますが、分かりやすいものに自分で変更するのをオススメします。
↑上では、sizeと変更しました。

今回3つとも「+タイプを選択する」の種類は「単一行のテキスト」で良いでしょう。「値のリスト」の方を選択しています。

タイトル用のメタフィールドを登録中の図 — 午前の時間、午後の時間などのタイトルです

数字用のメタフィールドを登録中の図 — 120、300など、あのサイズを入れます

数値はvalueにしました。半角英字で好きな文言にします。

【入力】数値やテキストの登録はコンマで区切る

表のセルにポコポコと上手にテキストを入れていくには入力の仕方に特徴があります。
それはコンマで区切ることです。

テキストとテキストの間に「コンマ」を挟めます。
ちゃんと表になるように数を合わせるように注意してください。
数が合わないと以下のようになったり、項目まるごと表示されないことも。

登録したらすぐに確認する必要がありますね。

【共有】表のためのliquidのコードとcss

「カートボタン」のソースコードがあるliquidファイルを編集します。
「カートボタン」のソースがある場所の辺りで、以下のコードを貼り付けてください。

■ product-template.liquid

{% #### メタフィールド--表の育成 #### %}
{%- if product.metafields.custom.size_titles -%}
<div class="size-table-div">
  <div class="size-table-row header">
    <div class="size-table-cell">SIZE</div><!-- ここに固定のテキストを追加 -->
    {% assign size_names = product.metafields.custom.size.value | remove: '"' | remove: '[' | remove: ']' | split: ',' %}
    {% for size in size_names %}
    <div class="size-table-cell">{{ size }}</div>
    {% endfor %}
  </div>

  {% assign size_titles = product.metafields.custom.size_titles.value | remove: '"' | remove: '[' | remove: ']' | split: ',' %}
  {% assign sizes_list = product.metafields.custom.value.value | remove: '"' | remove: '[' | remove: ']' | split: ' ' %}
  {% for i in (0..size_titles.size) %}
    {% assign size_values = sizes_list[i] | split: ',' %}
    {% if size_values.size > 0 %}
      <div class="size-table-row">
        <div class="size-table-cell">{{ size_titles[i] }}</div>
        {% for value in size_values %}
          <div class="size-table-cell">{{ value }}</div>
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
</div>
{%- endif -%}

↑コードにproduct.metafieldsというテキスト箇所があると思います。商品（product）のメタフィールドを使うんだなと思ってください。

product.metafields.の後ろに続くcustom.size_titlesが、先に登録したメタフィールドの「ネームスペースとキー」です。

こんな感じで「ネームスペースとキー」を利用するのですね。

2行目からの{%- if product.metafields.custom.size_titles -%}から最後の{%- endif -%}までifで挟んだのは、custom.size_titles（例：午前の時間、午後の時間）の入力があったらば表を表示したいというif文になります。

{{ size }}、{{ size_titles[i] }}、{{ value }}というところが、テキストに差し代わるところです。

5行目のSIZE</div><!– ここに固定のテキストを追加 –>の箇所は、「SIZE」というテキスト入力も面倒なのでしたくないと言うことでソース上にガチ固定で記入されています。

マジですか。

※こんな感じでHTML出力してほしい。

<div class="size-table-div">
  <div class="size-table-row header">
    <div class="size-table-cell">SIZE</div> <!-- 固定 -->
    <div class="size-table-cell">M</div>
    <div class="size-table-cell">L</div>
    <div class="size-table-cell">XL</div>
  </div>
  <div class="size-table-row">
    <div class="size-table-cell">4</div>
    <div class="size-table-cell">3.5</div>
    <div class="size-table-cell">22</div>
    <div class="size-table-cell">36</div>
  </div>
  <div class="size-table-row">
    <div class="size-table-cell">4.5</div>
    <div class="size-table-cell">4</div>
    <div class="size-table-cell">22.5</div>
    <div class="size-table-cell">37</div>
  </div>
  <!-- 追加の行をここに挿入していきたい -->
</div>

■ css

.size-table-div {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.size-table-div .size-table-row {
  display: table-row;
}
.size-table-div .size-table-cell {
  display: table-cell;
  padding: 8px;
  text-align: center;
  border: 1px solid #6c6c6c;
  margin: 0;
  box-sizing: border-box;
}
.size-table-div .size-table-row.header {
  background-color: #E6E6E6;
}
.size-table-div .size-table-row.header .size-table-cell {
  font-weight: 400;
}
.size-table-div .size-table-row:hover {
  background-color: #E6E6E6;
}
.size-table-div .size-table-cell.hover-target {
  background-color: #aaa !important;
}
.size-table-div .size-table-cell.hover {
  background-color: #E6E6E6;
}
.size-table-div .size-table-row.header .size-table-cell {
  border: 1px solid #6c6c6c;
}

表の専用cssです。

以上になります。メモでした。
以下はオプションです。

【オプション】セルにホバーしたら色を変えたい

hoverしたらセルの色が変わるのはcssのみで再現可能という記事をいくつも拝見します。しかしshopifyでうまくいかないことがあります。

テンプレートにもよりますが、何のcssが邪魔しているのかを追いかけるのも大変な時があります。

■ javascript

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var cells = document.querySelectorAll('.size-table-div .size-table-cell');

    cells.forEach(function (cell) {
        cell.addEventListener('mouseenter', function () {
            cell.classList.add('hover-target');
            Array.from(cell.parentNode.children).forEach(function (sibling) {
                sibling.classList.add('hover');
            });

            var index = Array.from(cell.parentNode.children).indexOf(cell);
            var rows = cell.closest('.size-table-div').querySelectorAll('.size-table-row');
            rows.forEach(function (row) {
                var targetCell = row.children[index];
                if (targetCell !== cell) {
                    targetCell.classList.add('hover');
                }
            });
        });

        cell.addEventListener('mouseleave', function () {
            cell.classList.remove('hover-target');
            Array.from(cell.parentNode.children).forEach(function (sibling) {
                sibling.classList.remove('hover');
            });

            var index = Array.from(cell.parentNode.children).indexOf(cell);
            var rows = cell.closest('.size-table-div').querySelectorAll('.size-table-row');
            rows.forEach(function (row) {
                var targetCell = row.children[index];
                if (targetCell !== cell) {
                    targetCell.classList.remove('hover');
                }
            });
        });
    });
  });
</script>

色を変える必要がない場合はスクリプトは不要です。

【オプション2】センチ数値を自動でインチに変換したい

cmの値（数字）を自動でinchに変換したい。
インチサイズをいちいち入力するのが面倒くさいと言うのです。

{% #### メタフィールド--表の育成 by インチ #### %}
{%- if product.metafields.custom.size_titles -%}
<div class="size-table-div">
  <div class="size-table-row header">
    <div class="size-table-cell">SIZE</div><!-- ここに固定のテキストを追加 -->
    {% assign size_names = product.metafields.custom.size.value | remove: '"' | remove: '[' | remove: ']' | split: ',' %}
    {% for size in size_names %}
    <div class="size-table-cell">{{ size }}</div>
    {% endfor %}
  </div>

  {% assign size_titles = product.metafields.custom.size_titles.value | remove: '"' | remove: '[' | remove: ']' | split: ',' %}
  {% assign sizes_list = product.metafields.custom.value.value | remove: '"' | remove: '[' | remove: ']' | split: ' ' %}
  {% for i in (0..size_titles.size) %}
    {% assign size_values = sizes_list[i] | split: ',' %}
    {% if size_values.size > 0 %}
      <div class="size-table-row">
        <div class="size-table-cell">{{ size_titles[i] }}</div>
        {% for value in size_values %}
          {% assign value_in_inches = value | divided_by: 2.54 | round: 1 %}
          <div class="size-table-cell">{{ value_in_inches }}</div>
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
</div>
{%- endif -%}

変換のための味噌な部分は20〜21行目のところになります。

{% assign value_in_inches = value | divided_by: 2.54 | round: 1 %}
<div class="size-table-cell">{{ value_in_inches }}</div>

1インチが2.54センチという計算で書き換えます。

表をセンチとインチの2つの表を入れたいという時にどうでしょうか。
後出しで要件の追加はやめてほしいですね。

【AI】イラストを描いてもらった

今回の記事のキャッチ画像で使わせてもらいます「Memeplex.app」で作成した画像です。誰でもgoogleアカウントでログインして使えます。

この記事にピッタリなイラストのための考えたリクエストは、「宇宙船のモニターに、グリーンのラインでグリッド表示された宇宙マップが映し出された」です。
選んだモードは以下の3つです。

映画の一場面
ハリウッドSF風
UnrealEngine5風

思ったように出力ができていたのですごい嬉しいです。

宇宙生活を楽しくデザインする