Bubble.ioのRepeating GroupからSendGridに複数のアイテムを送ってメールに表示する方法

ユースケースとして、ECアプリでの複数のショッピングアイテムを受領確認証に入れ込んでSendGridでメールを飛ばす場合を想定する。

まずこのあたりの話はマニュアルの[Handlebar]あたりを見ていくとわかる。

基本は、SendGridのダイナミックテンプレートで作る際にDesign EditorではなくてCode Editorを使って記述していく必要がある。

以下のテストデータには二つのアイテムが入っているが、これをループしてEmailに表示したい。

//テストデータ
{
    "order_details": [
      {
        "qty": 3,
        "unitPrice": 3000
      },
      {
        "qty": 5,
        "unitPrice": 5000
      }
    ]
}

基本的な方法は以下の様に、ループ表示したい場所に入れるだけで、eachで囲まれた部分がループして表示される。

<!--テンプレート -->
<ol>
  {{#each order_details}}
   <li>Q'ty: {{this.qty}} : Unit Price: {{this.unitPrice}}</li>
  {{/each}}
</ol>

あとはBubbleからこのJSONデータを受け渡せば良いがこのあたりの方法は以下のビデオの9分前後を見てください。RepeatingGroupからのデータをJSONフォーマットに直して送るだけでOK!

ただし、一点留意事項があり、bubbleのSendGridプラグインを使って送る場合だが、RGからの情報がうまく伝わらない。

この場合はAPI Connector で直接APIを記述すればOK。order_detailsを配列で受け渡す必要があるので、[ ]でくくる必要があることに留意。

"dynamic_template_data": {
				 "order_id": "<orderId>",
     ////色々なTAGを記述可能////
				"order_details": [<order_details>]
}