【Day 11】Button Template 应用 part 2

昨天原本要连同 Confirm buttom 一起讲的～，但平均一下每天的文章量，今天再接着讲另一个按钮类型吧！

Confirm Button Template

看中文字就知道我们大概要做的是一个确认按钮。
所以说，既然是确认，那就只会有两个选项。如下

if event.message.type == 'text':
    mtext = event.message.text
    if "嗨" in mtext:
        message.append(
            TemplateSendMessage(
                alt_text='Confirm template',
                template=ConfirmTemplate(
                    text='有看懂吗',
                        actions=[
                        MessageTemplateAction(
                            label='Yes',
                            text='Yes',
                        ),
                        MessageTemplateAction(
                            label='No',
                            text='No',
                        )
                    ]
                )
            )
        )

应该容易看得出差别，就是把 template= 改成 ConfirmTemplate。
我们来看看他原本的 json 里面所有的属性

{
  "type": "template",
  "altText": "this is a confirm template",
  "template": {
      "type": "confirm",
      "text": "Are you sure?",
      "actions": [
          {
            "type": "message",
            "label": "Yes",
            "text": "yes"
          },
          {
            "type": "message",
            "label": "No",
            "text": "no"
          }
      ]
  }
}

Confirm Template 就没有所谓的 title（标题）了，他直接就是 text。

然後我们上次也有看到，这次有有看到，在 json 里面有一个 part 是这个：

{
  "type": "message",
  "label": "Yes",
  "text": "yes"
}

action的 type 也分成很多种，基本上用 Message 就已足够应付大部分了。
其余的部分：label、text 都跟昨天讲的一样。

Carousel Button template

这是一个可以横向选择的多排按钮！

先来看看这个 json

{
  "type": "template",
  "altText": "this is a carousel template",
  "template": {
      "type": "carousel",
      "columns": [
          {
            "thumbnailImageUrl": "https://example.com/bot/images/item1.jpg",
            "imageBackgroundColor": "#FFFFFF",
            "title": "this is menu",
            "text": "description",
            "defaultAction": {
                "type": "uri",
                "label": "View detail",
                "uri": "http://example.com/page/123"
            },
            "actions": [
                {
                    "type": "postback",
                    "label": "Buy",
                    "data": "action=buy&itemid=111"
                },
                {
                    "type": "postback",
                    "label": "Add to cart",
                    "data": "action=add&itemid=111"
                },
                {
                    "type": "uri",
                    "label": "View detail",
                    "uri": "http://example.com/page/111"
                }
            ]
          },
          {
            "thumbnailImageUrl": "https://example.com/bot/images/item2.jpg",
            "imageBackgroundColor": "#000000",
            "title": "this is menu",
            "text": "description",
            "defaultAction": {
                "type": "uri",
                "label": "View detail",
                "uri": "http://example.com/page/222"
            },
            "actions": [
                {
                    "type": "postback",
                    "label": "Buy",
                    "data": "action=buy&itemid=222"
                },
                {
                    "type": "postback",
                    "label": "Add to cart",
                    "data": "action=add&itemid=222"
                },
                {
                    "type": "uri",
                    "label": "View detail",
                    "uri": "http://example.com/page/222"
                }
            ]
          }
      ],
      "imageAspectRatio": "rectangle",
      "imageSize": "cover"
  }
}

他可以制作像以下这样的横向移动的按钮模板