[Shopify]カートにアンケートを設置して注文管理画面に表示する!複数選択編(Dawn)82/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
以前、カートにアンケートを設置するブロックを作成しました。その時はラジオボタンで一つだけ選択できる仕様でしたが、今回は複数回答できるアンケートブロックを作ってみました。
レイアウトは前回同様です。今回も任意のアンケートで必須の項目ではないです。
▼単一選択バージョンはこちら
✔︎今回のゴール
カート
注文画面
◆CMSの特徴
前回と同じ
共通カラー設定:小計をクリックするとカラー設定ができます。
✔︎設置手順
Step1 カートの既存セクションファイルにブロックを追加
管理画面>テーマ>コード編集>セクション>main-cart-footer.liquidを開く
まずはSchema内のBlockに下記をコピペ。
◆Schema
{
"type": "q-multi",
"name": "アンケート(複数選択)",
"settings": [
{
"type": "richtext",
"id": "heading",
"label": "見出し",
"default": "<p>好きな色はなんですか?</p>"
},
{
"type": "text",
"id": "attribute",
"label": "注文管理画面に表示する名称",
"default": "興味があるもの"
},
{
"type": "header",
"content": "設問1"
},
{
"type": "text",
"id": "id1",
"label": "ID(他の設問と被らないように)",
"default": "1",
"info": "半角英数字"
},
{
"type": "text",
"id": "q1",
"label": "設問",
"default": "インスタ",
"info" : "空欄にすると設問が非表示になります"
},
{
"type": "header",
"content": "設問2"
},
{
"type": "text",
"id": "id2",
"label": "ID(他の設問と被らないように)",
"default": "2",
"info": "半角英数字"
},
{
"type": "text",
"id": "q2",
"label": "設問",
"default": "Twitter",
"info" : "空欄にすると設問が非表示になります"
},
{
"type": "header",
"content": "設問3"
},
{
"type": "text",
"id": "id3",
"label": "ID(他の設問と被らないように)",
"default": "3",
"info": "半角英数字"
},
{
"type": "text",
"id": "q3",
"label": "設問",
"default": "TikTok",
"info" : "空欄にすると設問が非表示になります"
},
{
"type": "header",
"content": "設問4"
},
{
"type": "text",
"id": "id4",
"label": "ID(他の設問と被らないように)",
"default": "4",
"info": "半角英数字"
},
{
"type": "text",
"id": "q4",
"label": "設問",
"default": "Note",
"info" : "空欄にすると設問が非表示になります"
}
]
}
さらに、SchemaのSetting内に下記を追記
※前回の単一選択と同じSchemaです。前回のをすでに入れている場合はスキップしてください。
{
"type": "richtext",
"id": "heading",
"label": "見出し",
"default": "<p>好きな色はなんですか?</p>"
},
{
"type": "color",
"id": "color_f_bd",
"label": "◆アンケートエリアの枠",
"default": "#fff"
},
{
"type": "color",
"id": "color_f_bg",
"label": "◆アンケートエリアの背景",
"default": "#dedede"
},
{
"type": "header",
"content": "カラー"
},
{
"type": "color",
"id": "color_bd",
"label": "◆ボタンの枠",
"default": "#dedede"
},
{
"type": "color",
"id": "color_bg",
"label": "◆ボタンの背景",
"default": "#fff"
},
{
"type": "color",
"id": "color_txt",
"label": "◆ボタンのテキスト",
"default": "#000"
},
{
"type": "paragraph",
"content": "選択した時"
},
{
"type": "color",
"id": "color_bd_ck",
"label": "◆ボタンの枠",
"default": "#fff"
},
{
"type": "color",
"id": "color_bg_ck",
"label": "◆ボタンの背景",
"default": "#000"
},
{
"type": "color",
"id": "color_txt_ck",
"label": "◆ボタンのテキスト",
"default": "#fff"
}
次にHTMLを編集します。
ここから先は
18,285字
/
2画像
この記事が気に入ったらサポートをしてみませんか?