ShopifyでLine Item Propertyを簡易に追加できるブロックを作る

目的

• Shopifyの商品詳細ページに、テーマディタの操作のみで簡易にLine Item Propertyを追加できるブロックを作成する

• アプリは使用しない

Line Item Propertyは「名入れ」などの付属情報を注文に追加する際に用いられます。
IEなどのレガシーブラウザを除けば実装自体はそれほど難しくないものの、追加や変更の度に毎回テーマファイルを触るのは手間なので、テーマエディタで設定可能なブロックを作成します。

手法の検討

Line Item Propertyで作った要素を配置する場合、商品名や価格や購入ボタンがまとまっている商品詳細用のセクション内のブロックに配置することになると思います。
セクションであればセクションファイルを作成してテーマに入れるだけで良いのですが、ブロックの場合は以下の作業が必要です。

• ブロック用のliquidファイルの作成

• 商品詳細を表示させているセクションファイル内に、ブロックを配置する記述を追加

基本的にはサンプルコードのコピーペーストで済むとはいえ、追加対象となるセクションファイルの中を多少は読む必要があります。
ただしテーマごとに違いはあるものの、目印になる記述を見つければそれほど難しくはないはずです。

ブロックで配置可能なタイプ

サンプルコードで追加できるのは以下のタイプです。

• text(一行テキスト)

• textarea(複数行テキスト)

• select(ドロップダウン型リスト)

• radio(ラジオボタン/複数配置して一つを選ぶ)

• checkbox(チェックボックス)

• date(年月日)

• color(色)

1ブロックで上記タイプの内の1つを配置できるので、ブロック数に余裕があれば複数追加することも可能です。

未対応機能

以下には対応していません。

• 複数選択可能なラジオボタン
  当ブロックを複数個並べれば対応できますが、おそらく各テーマの影響を取り除くCSSが必要になると思います。

• 必須設定
  購入ボタンを包含するformタグにはnovalidate属性が追加されている場合が多く、inputタグにrequired属性をつけても検証されません。
  対応するにはnovalidate属性を削除するか、JSを使う必要があり、今回は機能をつけていません。

サンプルコード

以降にサンプルコードを記載します。
いくつか注意点がありますので、購入を検討される方は確認ください。

注意点

• Dawn(ver 9.0.0)テーマへの組み込みが前提ですが、Shopify製のテーマであればおそらく違いはないと思います。
  サードパーティー製テーマの場合でも必要な情報さえわかれば組み込み可能だと思います。

• コピーペーストで作業を進められますが、記述箇所を探す部分では注意が必要です

• IEなどのレガシーブラウザ非対応です

• 機能の追加や変更にはShopifyのテーマカスタマイズの知識が必要です

• 返金不可設定です