相較於純文字的訊息推播，卡片式訊息 Flex Message 能更有效的呈現訂單資訊，本文說明該如何設計訂單推播的卡片式訊息。
三個步驟：設計外觀、替換參數、貼入到訊息推播內文
步驟一：設計 Flex Message 外觀
進入 LINE 官方的 Flex Message Simulator，點擊 View as JSON，將欄位中文字的全選後刪除：
複製以下文字，貼入空白處後點擊 Apply：
{
"type": "bubble",
"header": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "訂單狀態：{{order_status}}",
"weight": "bold",
"color": "#ffffff",
"size": "sm"
}
],
"backgroundColor": "#27AE60",
"paddingTop": "19px",
"paddingAll": "12px",
"paddingBottom": "16px"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "訂單詳情",
"weight": "bold",
"size": "xl",
"margin": "md",
"color": "#1f2d3d"
},
{
"type": "box",
"layout": "vertical",
"margin": "lg",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "訂單姓名：",
"size": "sm",
"color": "#555555",
"flex": 0
},
{
"type": "text",
"text": "{{customer_full_name}}",
"size": "sm",
"color": "#111111",
"align": "end"
}
]
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "訂單編號：",
"size": "sm",
"color": "#555555",
"flex": 0
},
{
"type": "text",
"text": "{{order_number}}",
"size": "sm",
"color": "#111111",
"align": "end"
}
]
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "總金額：",
"size": "sm",
"color": "#555555",
"flex": 0
},
{
"type": "text",
"text": "{{order_total}}",
"size": "sm",
"color": "#111111",
"align": "end"
}
]
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "付款方式：",
"size": "sm",
"color": "#555555",
"flex": 0
},
{
"type": "text",
"text": "{{order_payment_method}}",
"size": "sm",
"color": "#111111",
"align": "end"
}
]
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "text",
"text": "訂購時間：",
"size": "sm",
"color": "#555555",
"flex": 0
},
{
"type": "text",
"text": "{{order_date}}",
"size": "sm",
"color": "#111111",
"align": "end"
}
]
},
{
"type": "separator",
"margin": "lg"
},
{
"type": "text",
"text": "訂購項目：",
"size": "sm",
"color": "#555555",
"margin": "lg"
},
{
"type": "text",
"text": "{{order_items_nums}}",
"size": "sm",
"color": "#111111",
"wrap": true
},
{
"type": "separator",
"margin": "lg"
},
{
"type": "text",
"text": "訂單備註：",
"size": "sm",
"color": "#555555",
"margin": "lg"
},
{
"type": "text",
"text": "{{order_customer_note}}",
"size": "sm",
"color": "#111111",
"wrap": true
}
],
"backgroundColor": "#F2F2F2",
"cornerRadius": "md",
"paddingAll": "13px"
}
],
"paddingAll": "20px",
"backgroundColor": "#ffffff"
},
"footer": {
"type": "box",
"layout": "vertical",
"spacing": "sm",
"contents": [
{
"type": "button",
"style": "primary",
"height": "sm",
"action": {
"type": "uri",
"label": "查看完整訂單",
"uri": "https://oberonlai.blog"
}
},
{
"type": "text",
"text": "如有任何問題，請直接回覆此訊息",
"color": "#aaaaaa",
"size": "xxs",
"align": "center"
}
],
"flex": 0
}
}
完成後可以看到左側欄出現以下卡片：
中間欄位是卡片的架構，如果要修改裡面的內容點擊對應的元素即可，譬如要修改最上方訂單狀態的背景顏色為黑色，點選 header 裡面的 box 元素，右側欄就會出現該元素的設定欄位，將 backgroundColor 改為 #222222 即可，不知道色碼的話可以用這個工具取得：
要修改「訂單詳情」四個字，點選中間欄 text [訂單詳情]，將 text 欄位的文字替換即可：
其他需要顯示的訂單欄位，會用兩個大括弧包住，這是在設定推播內文時右側欄的可帶入參數， 兩個大括弧包住的內容會在推播時替換成正確的訂單資訊，如果要新增其他訂單資訊的話，像是 ATM 轉帳帳號，可以用複製的方式來新增。
先選取訂單時間的上層的 box，然後點擊中間欄位上方工具列裡面的複製按鈕：
複製成功後選取 text [訂單通知] 下方的第一個 box， 選項後點擊中間欄位上方工具列裡面的貼上按鈕：
選取到剛剛貼上的 box 之後，再利用中間欄位上方工具列的上箭頭，把它調整到訂單時間 box 的下方：
最後把剛剛新增的 box 裡面的 text [訂購時間：] 欄位的文字改成轉帳帳號：
步驟二：替換可帶入參數
接下來先回到網站後台的訊息推播內文設定裡面，找到轉帳帳號的可帶入參數，點擊後複製起來：
回到 Flex Message Simulator，點選 text [轉帳帳號：] 下方的欄位，將剛剛複製起來帶有兩個大括號的參數貼入：
當卡片的內容都設計完成都帶入兩個大括號的參數後， 最後要替換的是「查看完整訂單」按鈕連結的網址，由於在 Flex Message Simulator 裡面按鈕網址必須是要以 http 開頭的文字， 因此如果直接替換成訂單連結的參數會導致卡片內容無法預覽：
因此請務必確保其他欄位皆設計完成後，再將按鈕連結替換成帶有大括號的可帶入參數。
步驟三：貼入訊息推播內文
完成卡片的設計之後，可以先用模擬功能推播給自己看看，但前提是要先把網址欄位替換成實際的網址才會收得到，記得不能用參數，原因如上所述。點選右上方的 Send 即可：
這時候收到的內文訂單欄位全都是帶有兩個大括號的參數是正常的， 因為這個測試推播並沒有透過網站來進行訂單資料的替換，因此僅會顯示文字欄位裡面設定的內容，也就是大括號參數。
確認要顯示的欄位沒有遺漏之後，我們要再把查看完整訂單的網址替換成參數，然後點選右上角的 View as JSON，就能看到推播所需的內文，點擊下方 Copy 按鈕，直接貼進推播訊息的內文設定之中， 設定完成後顧客就可以收到卡片訊息：
注意事項
- OrderNotify 尚未支援主動推播功能，因此無法推播商品卡片資訊
- OrderNotify 尚未支援商品圖片參數，因此無法顯示圖片
- Flex Message 僅支援官方帳號推播，不支援 LINE Notify
