メタフィールドを上手く使って商品情報を出力する方法のチュートリアル

はじめに HTMLのテーブル構造って、意外と面倒なんです。 インターネット創世記は、ほとんどのサイトがテーブル構造だったので私自身は慣れっこですが、サイトを設計する際は「ECサイト運営者は基本的にHTMLスキルがないもの」と考えています。 例えできる人材がいたとしても、商品を追加する度にHTMLタグを入力する必要があるのは、設計的にかなり不細工で不親切だと思います。 そんな思いもあって、サムネイルのような注釈つきの商品情報をノーコードで出力させる方法を開発しました。 このカスタマイズでの入出力は以下の通りです。 入力（メタフィールド） 素材：綿100％※生地の厚さ：5.6oz生地の重さ：190g/m生地の種類：天竺糸の太さ：17/-生産国：ベトナム杢グレー：綿80%、ポリエステル20%アッシュ：綿95%、ポリエステル5%ホワイトのみ綿糸縫製 出力 素材 綿100％ ※ 生地の厚さ 5.6oz 生地の重さ 190g/m 生地の種類 天竺 糸の太さ 17/- 生産国 ベトナム 杢グレー：綿80%、ポリエステル20% アッシュ：綿95%、ポリエステル5% ホワイトのみ綿糸縫製 本来はフィールドタイプを「JSON」にした方がより柔軟な出力ができますが、ノーコード管理がコンセプトなので割愛させていただきます。 メタフィールドを作成 Shopify管理画面「設定」より「カスタムデータ」編集画面を開き、商品メタフィールドを新規作成します。 名前：商品情報ネームスペースとキー：custom.specタイプ：複数行のテキスト 「単一行のテキスト＋値のリスト」でも良いのですが、作業的に改行が楽だろうという判断で「複数行のテキスト」を採用しております。 また、ネームスペースとキーを変更する場合は、後のLiquidコードを編集する必要がありますのでご注意ください。 スニペットファイルを作成 「新しいスニペットを追加する」より「product-spec.liquid」を作成し、以下のLiquidコードを貼り付けます。 {%- liquid assign meta_spec = product.metafields.custom.spec if meta_spec != blank echo 'product-spec.css' | asset_url | stylesheet_tag assign meta_spec_split = meta_spec.value | newline_to_br | strip_newlines | split: ' ' assign table_lists = meta_spec_split.first | split: ' ' assign caption_lists = meta_spec_split.last | split: ' ' echo ' ' for table_list in table_lists assign list = table_list | split: '：' echo ' ' echo list.first | prepend: ' ' | append: ' ' echo list.last | replace: '※', ' ※ ' | prepend: ' ' | append: ' ' echo ' ' endfor echo ' ' echo ' ' for caption_list in caption_lists assign list = caption_list | remove: '※' echo list | prepend: ' ' | append: ' ' endfor echo ' ' endif -%} 順に説明します。 2行目の「meta_spec」で作成した商品メタフィールドを定義しており、3行目の分岐でメタフィールドの値が空欄の場合は出力されないようになっております。 4行目で専用のCSSファイルを読み込みます。これは後ほど作成します。 6〜8行目が重要ポイントです。 「newline_to_br」でテキストエリアの改行コードを タグに変換し、「strip_newlines」で改行コードを削除。二重改行部分で分割し2列の配列に変換します。 あ行：あいうえおか行：かきくけこさ行：さしすせそたちつてとなにぬねのはひふへほ ↓ newline_to_br あ行：あいうえお か行：かきくけこ さ行：さしすせそ たちつてと なにぬねの はひふへほ ↓ strip_newlines あ行：あいうえお か行：かきくけこ さ行：さしすせそ たちつてと なにぬねの はひふへほ ↓ split: ' ' "あ行：あいうえお か行：かきくけこ さ行：さしすせそ""たちつてと なにぬねの はひふへほ" 7行目の「table_lists」にて「meta_spec_split」の最初の配列をさらに分割します。 "あ行：あいうえお か行：かきくけこ さ行：さしすせそ" ↓ split: ' ' "あ行：あいうえお""か行：かきくけこ""さ行：さしすせそ" 8行目の「caption_lists」も同様に タグで分割します。 "たちつてと なにぬねの はひふへほ" ↓ split: ' ' "たちつてと""なにぬねの""はひふへほ" あとは分割したそれぞれの文字配列をHTMLに変換します。 10〜18行目はテーブルタグ出力です。 「table_lists」の配列をFor文でループ処理し、さらに「：」で分割。それぞれ タグと タグで出力させます。 タグ内に「※」がある場合は タグが付与されるようにしています。 20〜25行目はリストタグ出力です。 同様に「caption_lists」もFor文でループ処理し、 タグで出力させます。「※」はCSSで出力するので、二重になるのを防ぐために削除しています。 クラス属性値やHTML構造はご自由に編集してください。 アセットファイルを作成 「新しいアセットを追加する」より「product-spec.css」を作成し、テーブル出力用のスタイルを貼り付けます。 .spec-table { width: 100%; border-top: 1px solid #eee; border-collapse: collapse; } .spec-table tr { border-bottom: 1px solid #eee; } .spec-table th, .spec-table td { text-align: left; padding: 1rem 1.5rem; } .spec-caption { font-size: .8em; list-style: none; padding: 0 0 0 1em; } .spec-caption li::before { content: "※"; display: inline-block; width: 1em; margin-left: -1em; } 必要最低限のスタイルなので、ご自由に編集してください。 セクションファイルを編集 商品ページを出力するセクションファイルを開きます。Dawnの場合は「main-product.liquid」が該当します。 ファイル内にある商品説明を出力するLiquidコード「{{ product.description }}」のすぐ下あたりに以下のコードを追加します。 {% render 'product-spec', product: product %} Dawnの場合はdescriptionブロック内になります。 {%- when 'description' -%} {%- if product.description != blank -%} {{ product.description }} {% render 'product-spec', product: product %} {%- endif -%} 基本的にはどこでに出力しても構いませんし、新たにセクションブロックとして登録しても構いません。 以上でテーマ編集は完了です。 冒頭の入力例に習い、商品メタフィールドを登録し出力確認してください。

カートにアイテムが追加されました

メタフィールドを上手く使って商品情報を出力する方法のチュートリアル

メタフィールドから商品情報を出力して作業効率アップを図ろう！

2024年5月

2024年6月