線上書籍

參考：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; }