Shopifyで名入れ欄を商品詳細ページに作る(メール出力を含む):メモ

Cat WEBサイト構築Tag by cubismer
窓辺

タイトルに「名入れ欄」と書きましたが、他の用途や形に対してもいろいろと応用できるかと思います。

[追記:2022.6.21]
OS2.0のセクションで構築された商品詳細ページでは当記事の内容では不足するため、以下を参照ください。

実現したいこと

  • 商品詳細画面で名入れ欄を作る
  • メールに入力内容を出力する

メタフィールド(カスタムフィールド)やアプリは使いません。

実現方法

商品詳細画面で名入れ欄を作る
  1. ツールを使ってコードを生成
  2. liquidテンプレート(product-template.liquidなど)に生成したコードを追加

{% comment %}
テーマによって詳細は違うはずだが、以下のformで囲まれた中であれば、概ねどこでも問題ないはず
{% endcomment %}
{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}

<p class="line-item-property__field">
　<label for="">名入れ希望の方は入力ください。</label>
  {% comment %}
  name="properties[Name-printed]" と書いているが、Debutテーマの場合はこの Name-printed の部分がカートなどに表示される項目名になってしまうので注意
  {% endcomment %}
　<input class="product-form__input" id="" type="text" name="properties[Name-printed]" placeholder="Desired name"></textarea>
</p>

カートに出力される際の項目名に関しては、Debutテーマであればcart-template.liquid内の以下の中を書き換えると変更は可能ではと思われる。ハードコーディングになるのであまりお勧めできないが。


<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

{% comment %}上記を以下のように書き換える{% endcomment %}

{% if p.first == "Name-printed" %}
 {% asset p.first = "名入れ" %}
{% endif %}
<span class="product-details__item-label" data-cart-item-property-name>{{ p.first }}: </span>

または以下の方法が考えられる。

  • properties[]に日本語を使う(例:properties[名入れ])
  • 言語ファイルとtフィルターで翻訳できるように整える

用途的に内部的に使うだけなど、チェックアウト画面に出したくない場合は以下のように先頭にアンダーバー(_)をつけることで対応可能。


<p class="line-item-property__field">
　<label for="">名入れ希望の方は入力ください。</label>
　<input class="product-form__input" id="" type="text" name="properties[_Name-printed]" placeholder="Desired name"></textarea>
</p>
メールに入力内容を出力する
  1. 「設定>通知」で目的のテンプレートを選ぶ(顧客への自動返信のメールは「注文の確認」)
  2. テンプレート内のforで囲まれている部分を探し、そこにコードを記述する

{% comment %}
 購入した商品に関する情報を出力するループ
 このループ内に記載する
{% endcomment %}
{% for line in subtotal_line_items %}

{% comment %}
 入力欄のname属性に入れた文字列を指定する
{% endcomment %}
{{ line.properties.Name-printed }}

問題点

本来の管理画面のエクスポートでは対応できないので、Matrixify(旧:Excelify) のようなAPIをつかって独自に注文用CSVをエクスポートするアプリを利用するが必要があります。

この点では、備考欄を追加して名入れに対応した方がスムーズに運用ができるかもしれません。

もっとも、ユーザーとしては商品別に名入れ欄があった方が利便性が高いとも思われますので、運用に適したアプリを探して用いるという選択肢も検討に値します。

アプリで対応する場合

Custom Product Options

この機能を求めてGoogleなどで検索すると「Custom Product Options」という無料のアプリが出てくるが、それが有料になったのか、デベロッパが変わったのか、こちらは有料のアプリ。

手軽に項目や表示を変更できる、項目自体もカラービッカーやプルダウンなど豊富。ファイルアップローダーまである。

インストール時は手動と自動が選べるが、アンインストール時には手動でコードを削除しなければならない。

アプリを消すと設定データが消えると書かれているが、他のアプリ同様48時間の猶予もないのかは未検証。

アプリを使っても通常の注文用CSVには出力されないので、エクスポート用の別アプリを使う必要がある。

結び

ツールで作ったものであればなんでも値は取れそうですし、それらの構造から推測すればツールにないものでも作れるでしょうから、いろいろと応用は効きそうです。

アプリなしで作ることの是非はありますが、この程度で月額いくらを払い続けるというのもちょっと考えてしまうので、自作も選択肢に入るかと思います。

もちろん管理画面から操作できる必要がある場合はアプリが必須となるため、有料であっても使う必要性は十分にあります。

また、何らかの方法で注文用CSVへの出力まで可能なアプリがあるなら、やはり有料でも導入するべきかと思います(そういうアプリがあるのかわかりませんが)。

8人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。