line.propertiesを使用した商品ページのメール通知について

[takizawa]

この度、名入り商品を販売するにあたって、line.propertiesに名前の入力欄を設けました。
それに伴い当該商品を注文いただいた際に、自動送信メールの内容に商品ページによってお客様より入力された内容を表示させたいと考えております。

設定>通知>注文管理>注文確認のテンプレートを以下のように修正したのですが、期待する動作になりませんでした。
プレビュー、テストメール送信、テスト決済有効にした状態でのメール送信のすべてを試しましたが、すべてのメールの内容には、入力された内容は表示されませんでした。

{% if line.variant.title != 'Default Title' %}
	<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}

<!-- Start Custom Code -->
{% assign property_size = line.properties | size %}
{% if property_size > 0 %}
{% for p in line.properties %}
  {% assign first_character_in_key = p.first | truncate: 1, '' %}
  {% unless p.last == blank or first_character_in_key == '_' %}
    <span style="font-size: .875em; color: #999;">{{ p.first }}: {{ p.last }}</span><br>
  {% endunless %}
{% endfor %}
{% endif %}
<!-- End Custom Code -->

{% if line.selling_plan_allocation %}
	<span class="order-list__item-variant">{{ line.selling_plan_allocation.selling_plan.name }}</span><br/>
{% endif %}

【環境】
・使用テーマ：Highlight (v.2.2.1)

[Qcoltd]

質問者様が記載されているコードを、私の開発ストアの注文確認通知のテンプレートに挿入し、実際に試してみました。

結論から言いますと、

私の環境では、注文確認メールに、line.propetiesの内容が表示されました。

そうしますと、コードに問題があるわけではなさそうです。

しかし、では何が原因で質問者様の環境では表示されないのかとなると私には分かりませんでした。

通知メールに、テーマは影響しないと思いますので、ご利用のテーマも関係なさそうです。

> プレビュー、テストメール送信、テスト決済有効にした状態でのメール送信のすべてを試しましたが、

とおっしゃっていらっしゃるので、line.propertiesの登録に何かミスがあり、登録されていなかった、ということもなさそうです。

あと考えられるのは、

propetyのkeyの先頭に"_" (アンダースコア) をつけていらっしゃるか、propertyのvalueが設定されていないかもしれない、ということですが、ここまでテストされていて、そちらを見落とされている可能性も低そうです。

「コードに問題はなさそうです」という報告のみで申し訳ございません。

何かの参考になりましたら幸いです。

(キュー田辺)

[takizawa]

Qcoltd 様

返信いただきありがとうございます。

> 質問者様が記載されているコードを、私の開発ストアの注文確認通知のテンプレートに挿入し、実際に試してみました。

わざわざ、検証までしていただきありがとうございます。

メールテンプレートに追記しましたコードには、特に問題ないとのこと承知しました。それが把握できただけでも助かりました。

となると、line.propertiesの記述の方で何かしらの問題があると考えるべきなのでしょうか。

確かに、名入り商品にて名前を入力した状態で決済画面まで進めた際に、カートには入力された内容が表示されるのですが、それ以降の決済画面においては、入力内容が表示されないといった事象もありました。（この時は使用しているテーマの影響かと考えてました。。。）

念のため、参考にしたサイトと実際のコードを添付いたします。

もしお時間がございましたら、ご確認いただけますと幸いです。

【参考サイト】

https://note.com/tech_malin/n/nc25382597fa7

【ソースコード】

・main-product.liquid

~~~~~~ 省略 ~~~~~~

</product-variants>

<!-- start custom code -->
{%- when 'input_name' -%}
<div>
  <p class="line-item-property__field">
    <label for="{{ block.settings.input_name__label }}">{{ block.settings.input_name__label }}</label>
    <input id="{{ block.settings.input_name__label }}" type="text" name="properties[お名前]" form="product-form-{{ section.id }}" style="margin:0; padding: 1em;">  
  </p>
  <p><small>{{ block.settings.input_name__supplement }}</small></p>
</div>
<!-- endcustom code -->

{%- when 'buy_buttons' -%}

<product-form 
  id="add-to-cart-{{ section.id }}" class="product__form" {% if settings.cart_action == 'overlay' %} data-ajax-cart {% endif %}
  style="display:block"
  {{ block.shopify_attributes }}
>

~~~~~~ 省略 ~~~~~~

{% schema %}
  {
    "name": "t:sections.main-product.name",
    "class": "mount-product-page mount-product-gallery mount-css-slider main-product section-w-margin",
    "tag": "section",
    "blocks": [
      ~~~~~~ 省略 ~~~~~~
      {
        "type": "input_name",
  	"name": "名入り",
  	"limit": 1,
  	"settings": [
  	  {
  	    "type": "text",
  	    "id": "input_name__label",
  	    "label": "ラベル"
  	  },
  	  {
  	    "type": "html",
  	    "id": "input_name__supplement",
  	    "label": "補足説明"
  	  }
  	]
      }
    ],
  }
}

[Qcoltd · Accepted solution]

ご紹介の記事の内容を、開発ストアで試してみました。

「カートに追加する」をし、カート経由で、チェックアウトを行った場合

-> line.propertiesが登録される。

「今すぐ購入」から直接チェックアウトを行った場合

-> line.propertiesが登録されない。

という結果になりました。

質問者様も、「今すぐ購入」を使ってテストされているのではないでしょうか？

「今すぐ購入」から直接チェックアウトを行った場合に、line.propetiesが登録されない、という問題は、海外のコミュニティでも話題になっていました。

https://community.shopify.com/c/shopify-discussions/dynamic-checkout-and-line-item-properties/td-p/3...

最新の投稿(最後の投稿)によると、form要素の中に、line.propetiesのinput要素を置けば、「今すぐ購入」をした時も、line.propetiesが登録されるようです。

実際に、試してみたところ、確かにうまくいきました。

試したコードは下記になります。

                {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
                  <div>
                    <p class="line-item-property__field">
                        <label for="{{ block.settings.nameinput_label }}">{{ block.settings.nameinput_label }}</label>
                        <input id="{{ block.settings.nameinput_label }}" type="text" name="properties[お名前]" form="product-form-{{ section.id }}" style="padding: 1em;">  
                      </p>
                      <p> <small>{{ block.settings.nameinput_hosoku }}</small></p>
                  </div>

このformのコード自体、whenの中なので、名入れのwhenを持ち込むことができない、というか工夫が必要そうですが、そもそも、保守性とベストプラクティスを度外視すれば、schemaを使用する必要はありませんので、whenを記載しないことに問題はないかと思います。whenは使えなくても大丈夫と言うことであれば、いっそ、schemaの追加コードは削除いただいた方が逆に保守性が高まりそうです。

どちらかというと、ご質問内容的には、「特定の商品の時に、line.propetiesのインプットフィールドを表示する」という処理が必要そうな気がします。

ご参考まで。

(キュー田辺)

[takizawa]

Qcoltd 様

情報連携の方ありがとうございました！

無事にメール通知に対して、入力内容を表示させることが出来ました！

結局、「特定の商品の時に、line.propetiesのインプットフィールドを表示する」という処理が知識不足のため、実装することが出来なかったので、schemaでなんとかやりくりしてしまいました。。。

大変助かりました！！