記事を読む前に…。
実はこの記事の文章書いたの、一年以上前でした。
ずっとEvernoteに眠っておりました…。
少し情報が古いかもしれないけど、まぁ使えるんじゃないかな。
アップデートすることもあるかも。
Shopifyの商品に、独自で入力欄を追加して欲しいという要望があったので忘備録だよー。
今回は通常のテキストボックスなんかのフォーム項目と、ファイルアップロード機能を追加しています。
ファイルアップロードが曲者だけど、意外となんとかなる。
さあいってみましょう。
まずは商品ページ用にオリジナルのテンプレートを追加。
- テーマのtemplates/product.liquidを複製
- 複製したファイル名をproduct.hoge.liquidに変更
- 作ったファイルを開いて、「{% section ‘product-template’ %}」を検索
- 「{% section ‘product-hoge-template’ %}」に変更して保存
- テーマのsections/product-template.liquidを複製
- 複製したファイル名をproduct-hoge-template.liquidに変更
追加するフォーム項目を作るよ。
- Line Item Property – Shopify UI Elements Generator にアクセス。Shopify公式のフォーム項目生成ツールだよ。ここで生成できるのは通常のフォーム項目のみ
- Set your form field のところで作成したい部品を生成。右のPreviewで実際の表示が確認できるよ
- 出来たら下部のGrab your codeにあるコードをコピー
作ったフォーム項目をテンプレートに入れるよ。
- さっき作ったsections/product-hoge-template.liquidを開きます
- 「type=”submit”」を検索。これがある箇所が「カートに追加」ボタンの場所
- ↑より前に、コピーしたコードを追加
- （これはオプション）ペーストされたコードはpタグで囲まれてるので、気になる人はdivタグなどに直しておこう
ファイルアップロード機能を追加したい人はさらに下記をどうぞ。
- さっき作ったsections/product-hoge-template.liquidを開きます
- 「form ‘product’, product, class: form_class 」を検索、テーマによってはHTMLのformタグになってるかも
- コード内に「, enctype: ‘multipart/form-data’」を追加。HTMLのformタグになってる場合は「 enctype=”multipart/form-data”」って入れてね。
- もしコード内に「novalidate」がある場合はとっておいたほうが良いみたい…。自分が触ったコードにはnovalidateなかったので未確認。
- 「type=”submit”」を検索。これがある箇所が「カートに追加」ボタンの場所
- ↑より前に、下記のコードを追加。
<div class="line-item-property__field">
<label for="custom_photo">ほげ</label>
<input required class="required" id="custom_photo" type="file" name="properties[ほげ]" class="product-form__input">
</div>上記は必須入力項目になってるので、必須にしなくていい人はinputタグから「required class=”required”」を抜いてちょ。
ここまで出来たら、商品に独自のテンプレートを適用させてみよう。
- 修正したテーマをtheme kitなりなんなりでShopifyにアップロードしとく
- Shopify管理画面の商品管理から、独自の入力項目を表示させたい商品をクリック
- ページ右下の「テーマテンプレート」のドロップダウンから、「product.hoge」を選択
- 実際の商品ページに追加した項目が表示されていればOK！
※ファイルアップロードが出来ない場合は記事の最後の方にヒントを書いてみたよ。確認してみてね。
どうせならカートにもカスタマイズ項目の内容を表示したいよね。
さあやってみよう。既に表示されてる人は下記抜かしてOK！
- sections/cart-template.liquid を開くよ。ない場合はtemplates/cart.liquidかも。
- 「{{ item.product.title }}」で検索。
- 検索したコードの下に、下記をコピペしてね
{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}修正したテーマをアップロードして表示確認してみよう。
これでカートにも入力した項目が表示されているはず。やったね！
さらにさらに、お客さんとスタッフに送られる購入通知メールにもカスタマイズした内容を表示させちゃうよ！
- 管理画面から「設定＞通知」を開く。
- 注文管理の注文の確認（一番上）を開くよ。これがお客さんに送られるメール。
- メール本文 (HTML)内を「{{ line.title }}」で検索。表示されない場合はカギカッコをとってみたりしてみてね。
- 検索したコードの下に、下記をコピペしてね。
<span class="order-list__item-variant">
{% for p in line.properties %}
{% unless p.last == blank %} / {{ p.first }} :
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
{% endunless %}
{% endfor %}
</span><br/>保存して、もう一つスタッフに送られるメールも直すよ。
- 管理画面から「設定＞通知」を開く。
- スタッフ注文通知の新しい注文を開くよ。
- 上記同様メール本文 (HTML)内を「{{ line.title }}」で検索。みつけたらすぐ下に同じコードをコピペしよう。
保存したら、実際にテスト注文をしてみよう。
メール内にカスタムで追加した内容が表示されてればおっけー！
ちなみに、Shopifyにファイルアップロード機能を追加しても、特に追加料金はかからないみたい。
有料アプリで対応するとなると結構な月額費用が取られちゃうので、できればコードで解決してあげれると良いよね。
ファイルアップロードが出来ない場合
ファイルアップロードの項目は表示されているのに、アップロードされていないっぽい場合。商品をカートに入れる動作がajaxで制御されていないかな？
ajaxだとファイルアップロードがうまく動かないみたいなので、ページ遷移の方法に変更しよう。
ページ遷移への変更方法はテーマによってまちまちだと思うけど、管理人の使っていたテーマは管理画面のテーマカスタマイズから変更できた。
theme.js内のajax制御をコメントアウトしたら出来たって報告も見つけたので、参考にしてみてー（この記事最後で紹介している参考サイト一覧の、最後のサイトだよ）。
参考にさせていただいたサイト
日本語で画像つきで詳しく解説してくれているサイト。ほんっとありがとうございます！
Shopifyの商品ページにカスタム内容の入力フォームを追加する | グラフィックデザイナー奮闘記
Shopifyの商品ページにデータアップロード用のボタンを用意する | グラフィックデザイナー奮闘記
Shopify公式が解説しているカスタマイズ方法、懇切丁寧
Product pages – Get customization information for products – Shopify Community
ファイルアップロードでひっかかったときに参考にしたShopify Communityのスレ
Customers to upload image – Shopify Community
Solved: Custom File Upload Not Showing In Cart – Shopify Community
