![見出し画像](https://assets.st-note.com/production/uploads/images/91662438/rectangle_large_type_2_2119f6629f4a6df9e0a3ffaae5b60aaa.png?width=1200)
[Shopify]メタフィールドのJSON使って商品ページにグラフを表示できるブロック(Dawn)65/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
コーヒー豆販売しているお店とかって、苦味や甘味とかスッキリ度とかがグラフや星マークの数とかで分かりやすく表示されていますよね。
商品詳細にその商品のステータスが一目でわかるようなブロックを追加してみました。
メタフィールドのJSONを使用します。
対象テーマ:Dawn
※コーディングの解説記事ではありません。
✔️今回のゴール
![](https://assets.st-note.com/img/1669011931573-NApfChKqut.png?width=1200)
![](https://assets.st-note.com/img/1669011928831-gY26PRR3Bz.png?width=1200)
◆CMSの特徴
![](https://assets.st-note.com/img/1669012079129-NUxcW2A8fz.png?width=1200)
![](https://assets.st-note.com/img/1669012109209-b41fnbYni7.png?width=1200)
横棒グラフのカラーを変更することができます。
✔️設置手順
Step1 メタフィールドの商品で定義追加
![](https://assets.st-note.com/img/1669114781829-OQqtAIPtxv.png?width=1200)
コンテンツタイプをJSONにして作成。
![](https://assets.st-note.com/img/1669114811207-ykAidyl4um.png?width=1200)
![](https://assets.st-note.com/img/1669114823497-r5Olzv7rCS.png?width=1200)
名前:なんでもOK
→グラフにしてみました
ネームスペースとキー:custom.graph
コンテンツタイプ:JSON
ルール:空欄でもOK
下記のメタフィールドが追加されましたのでどこかにメモしておきます。
product.metafields.custom.graph
Step2 商品詳細にJSONを挿入
今回は
・項目
・グラフ指標 1〜5の数字を入れて5段階で表現してみます
・低い値の時の文言
・高い値の時の文言
の4つの値を設定できるようにします。
◆JSON
[
{
"text": "使いやすさ",
"number": 3,
"low": "低",
"high": "高"
}
]
"number": 3, → 数字にしたいのでダブルクォーテーションなし
"high": "高" →最後カンマなし
(動画ではLowとHighが反対になっていましたね。。。w)
◆フォーマット
[
{
"text": "文字",
"number": 数字,
"low": "文字",
"high": "文字"
}
]
Step3 既存のプロダクトリキッドのセクションファイルにコードを追加
管理画面>コード編集>セクション>main-product.liquidを開く
![](https://assets.st-note.com/img/1669115128922-CkRRun5Hvs.png)
![](https://assets.st-note.com/img/1669115132759-cCgl1vYw6r.png)
1)下記をSchemaのBlock内に追記
![](https://assets.st-note.com/img/1669115164789-A5OQoqsOzQ.png?width=1200)
,
{
"type": "graph",
"name": "グラフ",
"settings": [
{
"type": "color",
"id": "color_bk",
"label": "グラフカラー",
"default": "#4a4a4a"
}
]
}
2)HTMLを記載していきます。
ここから先は
2,110字
/
4画像
この記事が気に入ったらサポートをしてみませんか?