Title1

Title2

Title3

2-8 carousel

參考:https://developers.line.biz/flex-simulator/

carousel 樣版(商品展示畫面)


    //---------------------------------- carousel(商品展示)
    let messages = [{
      "type": "flex",
      "altText": "商品展示",//訊息副標題
      "contents": {
        "type": "carousel",
        "contents": carouselTemplate()
      }
    }];

 

carouselTemplate()


/**======================================
  carousel 樣版
=======================================*/
function carouselTemplate(){
  let messages = [];
  let title = '商品1'
  let content = '商品單位: ' + '個' + ' \n';
  content += '商品單價: ' + '100' + '元\n';
  content += '商品內容商品內容商品內容商品內容\n';
  content += '商品內容商品內容商品內容商品內容\n';
  content += '商品內容商品內容商品內容商品內容\n';
  content += '商品內容商品內容商品內容商品內容\n';
  content += '----------------------\n';
  messages.push({
    "type": "bubble",
    "size": "micro",
    "hero": {
      "type": "image",
      "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg",//圖片
      "size": "full",
      "aspectMode": "cover",
      "aspectRatio": "320:213"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "sm",
      "paddingAll": "13px",
      "contents": [
        {
          "type": "text",
          "text": title,//標題
          "weight": "bold",
          "size": "sm",
          "wrap": true
        },
        {
          "type": "text",
          "text": content,//內容
          "color": "#8C8C8C",
          "size": "sm",
          "wrap": true
        }, 
        {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+1',                     //訊息標題
                "text":  '+1' + ' ' + title //  訊息內容
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+2',                     //訊息標題
                "text":  '+2' + ' ' + title //  訊息內容
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+5',                     //訊息標題
                "text":  '+5' + ' ' + title //  訊息內容
              }
            }
          ]
        }
      ]
    }
  });
  messages.push({
    "type": "bubble",
    "size": "micro",
    "hero": {
      "type": "image",
      "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg",//圖片
      "size": "full",
      "aspectMode": "cover",
      "aspectRatio": "320:213"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "sm",
      "paddingAll": "13px",
      "contents": [
        {
          "type": "text",
          "text": title,//標題
          "weight": "bold",
          "size": "sm",
          "wrap": true
        },
        {
          "type": "text",
          "text": content,//內容
          "color": "#8C8C8C",
          "size": "sm",
          "wrap": true
        }, 
        {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+1',                     //訊息標題
                "text":  '+1' + ' ' + title //  訊息內容
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+2',                     //訊息標題
                "text":  '+2' + ' ' + title //  訊息內容
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+5',                     //訊息標題
                "text":  '+5' + ' ' + title //  訊息內容
              }
            }
          ]
        }
      ]
    }
  });
  messages.push({
    "type": "bubble",
    "size": "micro",
    "hero": {
      "type": "image",
      "url": "https://scdn.line-apps.com/n/channel_devcenter/img/flexsnapshot/clip/clip10.jpg",//圖片
      "size": "full",
      "aspectMode": "cover",
      "aspectRatio": "320:213"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "sm",
      "paddingAll": "13px",
      "contents": [
        {
          "type": "text",
          "text": title,//標題
          "weight": "bold",
          "size": "sm",
          "wrap": true
        },
        {
          "type": "text",
          "text": content,//內容
          "color": "#8C8C8C",
          "size": "sm",
          "wrap": true
        }, 
        {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+1',                     //訊息標題
                "text":  '+1' + ' ' + title //  訊息內容
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+2',                     //訊息標題
                "text":  '+2' + ' ' + title //  訊息內容
              }
            },
            {
              "type": "button",
              "style": "link",
              "height": "sm",
              "action": {
                "type": "message",
                "label": '+5',                     //訊息標題
                "text":  '+5' + ' ' + title //  訊息內容
              }
            }
          ]
        }
      ]
    }
  });

  return messages;
}