Accelerated Mobile Pages (AMP) เป็นโครงการริเริ่มแบบโอเพนซอร์สที่ช่วยให้สร้างเว็บไซต์และโฆษณาที่รวดเร็ว สวยงาม และมีประสิทธิภาพสูงอยู่เสมอ
หากเพิ่งเริ่มใช้ AMP ให้พิจารณาภาพรวมคร่าวๆ ด้วยแหล่งข้อมูลต่อไปนี้
แรงจูงใจ
AMP รองรับเนื้อหาแบบไดนามิกที่สมบูรณ์ด้วยคอมโพเนนต์ UI เช่น ภาพหมุนและไลท์บ็อกซ์ นอกจากนี้ AMP ยังรองรับวิธีง่ายๆ สําหรับคอมโพเนนต์หนึ่งเพื่อทริกเกอร์การทํางานในคอมโพเนนต์อื่นผ่านการดําเนินการ AMP อีกด้วย
แต่ฉันควรทําอย่างไรหากต้องการ
- ปรับแต่งคอมโพเนนต์ AMP ไหม
- เช่น แสดงป้ายกํากับที่กําหนดเองซึ่งแสดงสไลด์ปัจจุบันและจํานวนสไลด์ทั้งหมดในภาพหมุน
- เพิ่มพฤติกรรมที่เก็บสถานะใช่ไหม
- เช่น ปิดใช้ปุ่ม "Add toรถเข็น" หากจํานวนผลิตภัณฑ์ที่ผู้ใช้เลือกมีจําหน่ายมากกว่าความพร้อมจําหน่ายปัจจุบัน
ก่อนหน้านี้ การนําฟีเจอร์อย่าง AMP มาใช้นั้นทําได้ยาก เนื่องจากขาดช่องทางการสื่อสารที่มีประสิทธิภาพระหว่างคอมโพเนนต์ UI กับสถานะการแชร์ไม่ได้ เราได้สร้างคอมโพเนนต์ใหม่ที่มีประสิทธิภาพใน AMP เพื่อแก้ปัญหากรณีการใช้งานเหล่านี้
<amp-bind>
<amp-bind>
คือคอมโพเนนต์ AMP ใหม่ที่ให้การโต้ตอบที่กําหนดเองผ่านการเชื่อมโยงข้อมูลและนิพจน์ที่มีลักษณะเหมือน JS Codelab นี้จะแนะนําวิธีใช้ <amp-bind>
เพื่อสร้างหน้า AMP ที่มีการโต้ตอบแบบกําหนดเองที่สมบูรณ์
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะต้องสร้างหน้ารายละเอียดผลิตภัณฑ์อีคอมเมิร์ซดังนี้
|
สิ่งที่จะได้เรียนรู้
- วิธีใช้การเชื่อมโยงข้อมูลและนิพจน์เพื่อสร้างหน้า AMP ที่ยอดเยี่ยมและอินเทอร์แอกทีฟด้วย
<amp-bind>
สิ่งที่ต้องมี
- เบราว์เซอร์ที่คุณเลือก
- เครื่องมือแก้ไขข้อความที่ต้องการ
- Node.js และ NPM
- โค้ดตัวอย่าง
- ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
ดาวน์โหลดโค้ด
ขั้นแรก ให้ดาวน์โหลดโค้ดเริ่มต้นสําหรับ Codelab เป็นไฟล์ ZIP
หรือผ่าน Git:
git clone https://github.com/googlecodelabs/advanced-interactivity-in-amp.git
การพึ่งพาการติดตั้ง
แตกไฟล์เก็บถาวร (หากจําเป็น) และไปยังไดเรกทอรี ติดตั้งทรัพยากร Dependency ด้วยการเรียกใช้ npm install
cd advanced-interactivity-in-amp-codelab npm install
เรียกใช้เซิร์ฟเวอร์การพัฒนา
เริ่มต้นเซิร์ฟเวอร์การพัฒนาด้วย node.js:
node app.js
ไปที่ http://localhost:3000 ในเว็บเบราว์เซอร์เพื่อดูหน้า AMP ที่ทํางานอยู่
Bamperplate ของ AMP
หน้า AMP คือหน้า HTML ที่มีข้อจํากัดบางอย่างเพื่อประสิทธิภาพที่เชื่อถือได้ หน้า AMP มีมาร์กอัปพิเศษเล็กน้อยที่ระบุได้ว่าเป็นหน้า AMP สําหรับ Google Search
หน้า AMP ของ Barebones มีลักษณะดังนี้
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
คอมโพเนนต์ AMP
โค้ดเริ่มต้น (static/index.html
) ของเราสร้างขึ้นจากหน้า AMP ที่มีเนื้อหาของหน้า (รูปภาพ ข้อความ ฯลฯ) รวมถึงคอมโพเนนต์ AMP บางอย่าง ซึ่งรวมถึง
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
คอมโพเนนต์ AMP มีฟังก์ชันการทํางานเพิ่มเติมและคอมโพเนนต์ UI ที่เพิ่มการโต้ตอบที่หลากหลายลงในหน้า AMP โค้ดเริ่มต้นจะใช้คอมโพเนนต์ AMP ต่อไปนี้
<amp-carousel>
- ภาพหมุนที่แสดงมุมมองหลายรายการของผลิตภัณฑ์
<amp-mustache>
- ระบบเทมเพลตเพื่อแสดงผลการตอบสนองของเซิร์ฟเวอร์จากแบบฟอร์ม AMP
<amp-form>
- เพิ่มฟังก์ชันการทํางานพิเศษสําหรับองค์ประกอบ
<form>
ที่จําเป็นสําหรับหน้า AMP <amp-selector>
- ช่วยให้เลือกองค์ประกอบขององค์ประกอบในกลุ่มได้ตั้งแต่ 1 องค์ประกอบขึ้นไป สามารถใช้เป็นแหล่งที่มาของอินพุตสําหรับแบบฟอร์ม AMP
การโต้ตอบขั้นพื้นฐาน
โค้ดเริ่มต้นมีการโต้ตอบพื้นฐานดังนี้
- ภาพหมุน (
<amp-carousel>
) แสดงมุมมองหลายรายการของผลิตภัณฑ์ - เพิ่มผลิตภัณฑ์ลงในรถเข็นของผู้ใช้ (ผ่าน
<amp-form>
) ได้โดยแตะที่ปุ่ม "เพิ่มลงในรถเข็น&คําขอราคาเสนอ; ที่ด้านล่างของหน้า
ลองปัดภาพหมุน แล้วแตะปุ่ม &โควต้า เพิ่มลงในรถเข็น
ปรับปรุงประสบการณ์การใช้งาน
โค้ดเริ่มต้นจะให้ประสบการณ์ที่แปลกประหลาดแก่ผู้ใช้ เราสามารถปรับปรุงได้ 2 วิธีดังนี้
- เพิ่มตัวบ่งชี้ที่แสดงสไลด์ปัจจุบันและจํานวนสไลด์ทั้งหมด
- เมื่อผู้ใช้เลือกสีเสื้ออื่น ให้เปลี่ยนภาพหมุนของรูปภาพเพื่อแสดงรูปภาพเสื้อในสีที่เลือก
ก่อนที่จะเปิดตัวคอมโพเนนต์ <amp-bind>
คุณจะเพิ่มฟีเจอร์เช่นนี้ไม่ได้' มารับประสบการณ์การใช้งาน <amp-bind>
โดยตรงและเพิ่มฟีเจอร์ใหม่เหล่านี้ลงในโค้ดตัวอย่างของเรากัน
ติดตั้งส่วนขยาย<amp-bind>
<amp-bind>
คือคอมโพเนนต์ AMP ใหม่ที่ให้การโต้ตอบที่กําหนดเองผ่านการเชื่อมโยงข้อมูลและนิพจน์ที่มีลักษณะเหมือน JS หากต้องการใช้ <amp-bind>
คุณต้องติดตั้งในหน้า
เปิดไฟล์ static/index.html
และเพิ่มสคริปต์ต่อไปนี้ลงในรายการคอมโพเนนต์ AMP ในส่วน <head>
ของหน้าเว็บ
<script async custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
เพิ่มตัวบ่งชี้สไลด์
<amp-bind>
ทํางานโดยการเชื่อมโยงแอตทริบิวต์ขององค์ประกอบกับนิพจน์ที่กําหนดเอง นิพจน์เหล่านี้สามารถอ้างอิง "state" (ข้อมูล JSON ที่เปลี่ยนแปลงได้) เราจะเริ่มต้นสถานะนี้ผ่านคอมโพเนนต์ <amp-state>
ที่รวมอยู่ใน <amp-bind>
ได้
มาเริ่มตัวแปรสถานะเพื่อติดตามดัชนีของสไลด์ที่แสดงในปัจจุบันในภาพหมุนของรูปภาพกัน เปิด static/index.html
และเพิ่มข้อมูลต่อไปนี้ที่ด้านบนของหน้า <body>
(ก่อนส่วนหัว)
<amp-state id="selected">
<script type="application/json">
{
"slide": 0
}
</script>
</amp-state>
ข้อมูลภายในองค์ประกอบ <amp-state>
จะเข้าถึงได้โดยรหัสที่เกี่ยวข้อง ตัวอย่างเช่น เราอาจอ้างอิงถึงตัวแปรนี้ตามส่วนย่อยของนิพจน์ต่อไปนี้
selected.slide // Evaluates to 0.
ถัดไป ให้อัปเดตตัวแปรนี้เมื่อผู้ใช้เปลี่ยนสไลด์บนภาพหมุนโดยเพิ่มคําสั่ง "on" ไปยังองค์ประกอบ <amp-carousel> ที่มีอยู่:
<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel"
on="slideChange:AMP.setState({selected: {slide: event.index}})">
เมื่อใดก็ตามที่สไลด์ของ <amp-carousel>
แสดงสไลด์ การดําเนินการ AMP.setState
จะถูกเรียกด้วยอาร์กิวเมนต์ต่อไปนี้
{
selected: {
slide: event.index
}
}
นิพจน์ event.index
จะประเมินดัชนีสไลด์ใหม่ และการดําเนินการ AMP.setState()
จะรวมออบเจ็กต์นี้ตามสถานะปัจจุบัน ค่านี้แทนที่ค่าปัจจุบันของ selected.slide
ด้วยค่า event.index
จากนั้นให้ใช้ประโยชน์จากตัวแปรสถานะนี้ที่ติดตามสไลด์ที่แสดงอยู่ในปัจจุบัน และสร้างตัวบ่งชี้สไลด์ ค้นหาองค์ประกอบตัวบ่งชี้สไลด์ (มองหา <!-- TODO: "Add a slide indicator" -->
) และเพิ่มการเชื่อมโยงต่อไปนี้ไปยังองค์ประกอบย่อย
<!-- TODO: "Add a slide indicator" -->
<p class="dots">
<!-- The <span> element corresponding to the current displayed slide
will have the 'current' CSS class. -->
<span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
<span [class]="selected.slide == 1 ? 'current' : ''"></span>
<span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>
[class]
คือการเชื่อมโยงที่เปลี่ยนแอตทริบิวต์ class
และสามารถใช้เพื่อเพิ่มหรือนําคลาส CSS ออกจากองค์ประกอบใดก็ได้
รีเฟรชหน้าเว็บแล้วลองเลย การเปลี่ยนสไลด์ในภาพหมุนจะมีผลดังนี้
- ทริกเกอร์เหตุการณ์
slideChange
... - ซึ่งเรียกการดําเนินการ
AMP.setState
ว่า... - ซึ่งจะอัปเดตตัวแปรสถานะ
selected.slide
... - ซึ่งจะอัปเดตการเชื่อมโยง
[class]
ในองค์ประกอบ<span>
ของตัวบ่งชี้
ดีมาก ตอนนี้เรามีสัญญาณบอกสถานะสไลด์ที่ใช้งานได้แล้ว
การเปลี่ยนรูปภาพใน <amp-carousel>
คงจะดีถ้าเราเห็นรูปภาพสีเสื้อที่แตกต่างกันเมื่อเปลี่ยนสีที่เลือก หากใช้ amp-bin-in เราจะทําได้โดยการเชื่อมโยง [src]
ในองค์ประกอบ <amp-img>
ภายใน <amp-carousel>
อย่างไรก็ตาม ก่อนอื่นเราต้องเริ่มต้นข้อมูลสถานะด้วย URL แหล่งที่มาของภาพของเสื้อสีแต่ละสี มาลองทํากับองค์ประกอบ <amp-state>
ใหม่กัน
<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
<script type="application/json">
{
"1001": {
"color": "black",
"image": "./shirts/black.jpg"
},
"1002": {
"color": "blue",
"image": "./shirts/blue.jpg"
},
"1010": {
"color": "brown",
"image": "./shirts/brown.jpg"
},
"1014": {
"color": "dark green",
"image": "./shirts/dark-green.jpg"
},
"1015": {
"color": "gray",
"image": "./shirts/gray.jpg"
},
"1016": {
"color": "light gray",
"image": "./shirts/light-gray.jpg"
},
"1021": {
"color": "navy",
"image": "./shirts/navy.jpg"
},
"1030": {
"color": "wine",
"image": "./shirts/wine.jpg"
}
}
</script>
</amp-state>
องค์ประกอบ <amp-state>
นี้มีออบเจ็กต์ JSON ที่แมปสตริงตัวระบุเสื้อ (เช่น SKU) กับ URL สีและรูปภาพของเสื้อที่เกี่ยวข้อง อาร์เรย์ JSON จะทํางานที่นี่ได้เช่นกัน แต่การใช้ออบเจ็กต์ช่วยให้เราทําสิ่งที่ยอดเยี่ยมซึ่งคุณจะเห็นได้เร็วๆ นี้
เราเข้าถึง URL รูปภาพผ่านตัวระบุเสื้อเชิ้ตได้ เช่น shirts['10014'].color
ประเมินเป็น "dark green"
และ shirts['10030'].image
จะแสดง URL ของรูปภาพสําหรับสี "wine" เสื้อ
หากเราเพิ่มตัวแปรสถานะอื่นที่ติดตาม SKU ที่เลือก เราจะเชื่อมโยงนิพจน์กับองค์ประกอบ <amp-img>
เพื่ออัปเดตแอตทริบิวต์ src
ได้เมื่อ SKU ที่เลือกมีการเปลี่ยนแปลง เพิ่มคีย์ sku
ใหม่ลงใน JSON องค์ประกอบ amp-state#selected
' ที่มีอยู่:
<amp-state id="selected">
<script type="application/json">
{
"slide": 0,
"sku": "1001"
}
</script>
</amp-state>
เพิ่มการดําเนินการ "on" ไปยัง <amp-selector>
ที่อัปเดตตัวแปร selected.sku
เมื่อมีการเลือกสีใหม่
<amp-selector name="color"
on="select:AMP.setState({selected: {sku: event.targetOption}})">
จากนั้นเพิ่มการเชื่อมโยงไปยังองค์ประกอบ <amp-img>
ภายใน <amp-carousel>
(มองหา <!-- TODO: "Changing images in amp-carousel-->"
):
<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img width=200 height=250 src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg"
[src]="shirts[selected.sku].image"></amp-img>
หมายเหตุ: ในทางปฏิบัติ รูปภาพแต่ละรูปในภาพหมุนมีแนวโน้มที่จะมี src
ต่างกัน การดําเนินการนี้ทําได้โดยแทนที่รูปภาพเดียวด้วยอาร์เรย์ของรูปภาพ เพื่อความเรียบง่าย Codelab จะใช้รูปภาพเดียวในการขยายขนาด
จากนั้นรีเฟรชหน้าเว็บและเลือกสีอื่นสําหรับเสื้อ เมื่อคุณอัปเดตแล้ว ระบบจะอัปเดตภาพหมุนเพื่อแสดงเสื้อที่มีสีที่เลือก
จะเกิดอะไรขึ้นหากข้อมูลที่เชื่อมโยงมีขนาดใหญ่หรือซับซ้อนเกินกว่าจะเรียกข้อมูลเมื่อโหลดหน้าเว็บ จะเกิดอะไรขึ้นหาก SKU แต่ละรายการมีราคาที่ต้องใช้เวลานานในการค้นหา การค้นหาราคาสําหรับ SKU สําหรับสินค้าที่ไม่ได้ดูจะทําให้สูญเปล่า
กําลังดึงข้อมูลขนาดที่ใช้ได้สําหรับเสื้อ
มาใช้ประโยชน์จากความสามารถในการดึงข้อมูลระยะไกลเพื่อค้นหาราคา SKU ในตัวอย่าง Codelab ของเรากัน เซิร์ฟเวอร์การพัฒนา Express.js ของเราใน app.js
มีปลายทาง /shirts/sizes?shirt=<sku>
อยู่แล้ว ซึ่ง SKU เสื้อจะแสดงขนาดและราคาที่พร้อมให้บริการสําหรับแต่ละขนาดอยู่แล้ว โดยจะส่งการตอบสนองล่าช้ากว่าปกติ 1 วินาทีเพื่อจําลองเวลาในการตอบสนองของเครือข่าย
ส่งคำขอ | คำตอบ |
|
|
ข้อมูลระยะไกลที่แสดงจากการดึงข้อมูลเหล่านี้จะรวมและอยู่ภายใต้แอตทริบิวต์ id
ขององค์ประกอบ เช่นเดียวกับข้อมูล JSON ภายในองค์ประกอบ <amp-state>
เช่น ข้อมูลที่แสดงผลจากการตอบกลับตัวอย่างข้างต้นจะเข้าถึงในนิพจน์ได้
นิพจน์ | ผลลัพธ์ |
|
|
ทีนี้มานําไปใช้กับตัวอย่างอีคอมเมิร์ซของเรากัน ก่อนอื่นมาดึงข้อมูลเสื้อตัวนี้เมื่อเลือก SKU ใหม่ เพิ่มการเชื่อมโยง [src]
ลงในองค์ประกอบ amp-state#shirts
ของเรา:
<!-- When `selected.sku` changes, update the `src` attribute and fetch
JSON at the new URL. Then, merge that data under `id` ("shirts"). -->
<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku">
จากนั้น มาทําเครื่องหมายขนาดที่ใช้ได้สําหรับ SKU ดังกล่าวให้ชัดเจนกัน คลาส CSS ของ "unavailable"
เพิ่มเส้นทแยงมุมผ่านองค์ประกอบ เราเพิ่มองค์ประกอบดังกล่าวลงในองค์ประกอบภายใน amp-selector[name="size"]
ที่สอดคล้องกับขนาดที่ไม่พร้อมใช้งานได้
<amp-selector name="size">
<table>
<tr>
<!-- If 'XS' size is available for selected SKU, return empty string.
Otherwise, return 'unavailable'. -->
<td [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'">
<div option="XS">XS</div>
</td>
<td [class]="shirts[selected.sku].sizes['S'] ? '' : 'unavailable'">
<div option="S">S</div>
</td>
<td [class]="shirts[selected.sku].sizes['M'] ? '' : 'unavailable'">
<div option="M">M</div>
</td>
<td [class]="shirts[selected.sku].sizes['L'] ? '' : 'unavailable'">
<div option="L">L</div>
</td>
<td [class]="shirts[selected.sku].sizes['XL'] ? '' : 'unavailable'">
<div option="XL">XL</div>
</td>
</tr>
</table>
</amp-selector>
โหลดหน้านี้ซ้ําแล้วลองใช้ การเลือก SKU ใหม่ (สีเสื้อ) จะทําให้ขนาดที่ถูกขีดฆ่าออก (หลังจากที่เกิดความล่าช้าสั้นๆ)
จะมีปัญหาเล็กๆ น้อยๆ ใช่ไหม เช่น เสื้อสีดําคือสีเริ่มต้นตามค่าเริ่มต้น เราจะต้องเพิ่มข้อมูลขนาดและราคาของเสื้อสีดําลงใน amp-state#shirts
...
<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku">
<script type="application/json">
{
"1001": {
"color": "black",
"image": "./shirts/black.jpg",
"sizes": {
"XS": 8.99,
"S": 9.99
}
},
<!-- ... -->
...และอัปเดตสถานะเริ่มต้นขององค์ประกอบที่เกี่ยวข้อง
<amp-selector name="size">
<table>
<tr>
<!-- If 'XS' size is available for selected SKU, return empty string.
Otherwise, return 'unavailable'. -->
<td [class]="shirts[selected.sku].sizes['XS'] ? '' : 'unavailable'">
<div option="XS">XS</div>
</td>
<td [class]="shirts[selected.sku].sizes['S'] ? '' : 'unavailable'">
<div option="S">S</div>
</td>
<!-- Add the ‘unavailable' class to the next three <td> elements
to be consistent with the available sizes of the default SKU. -->
<td class="unavailable"
[class]="shirts[selected.sku].sizes['M'] ? '' : 'unavailable'">
<div option="M">M</div>
</td>
<td class="unavailable"
[class]="shirts[selected.sku].sizes['L'] ? '' : 'unavailable'">
<div option="L">L</div>
</td>
<td class="unavailable"
[class]="shirts[selected.sku].sizes['XL'] ? '' : 'unavailable'">
<div option="XL">XL</div>
</td>
</tr>
</table>
</amp-selector>
ราคาเสื้อที่มีการเปลี่ยนแปลง
เมื่อแสดงขนาดที่ใช้ได้อย่างถูกต้องแล้ว มาตรวจสอบราคาที่ถูกต้องกัน
ร้านจําหน่ายสินค้า AMPPAREL ของเรามีราคาแปลกตาทั้งสําหรับเสื้อและเสื้อ ทั้งสีและขนาด ซึ่งหมายความว่าเราจําเป็นต้องใช้ตัวแปรใหม่เพื่อติดตามขนาดที่ผู้ใช้เลือก เพิ่มการกระทําใหม่ลงในองค์ประกอบขนาด <amp-selector>
:
<!-- When an element is selected, set the `selectedSize` variable to the
value of the "option" attribute of the selected element. -->
<amp-selector name="size"
on="select:AMP.setState({selectedSize: event.targetOption})">
โปรดทราบว่าเราไม่กําหนดค่าของ selectedSize
ผ่านองค์ประกอบ amp-state#selected
เนื่องจากเราตั้งใจไม่ให้ขนาดเริ่มต้นตามค่าเริ่มต้น และต้องการบังคับให้ผู้ใช้เลือกขนาดแทน
เพิ่มองค์ประกอบ <span>
ใหม่ที่รวมป้ายกํากับราคาและเปลี่ยนข้อความเริ่มต้นเป็น "---" เนื่องจากไม่มีการเลือกขนาดเริ่มต้น
<h6>PRICE :
<!-- Display the price of the selected shirt in the selected size if available.
Otherwise, display the placeholder text '---'. -->
<span [text]="shirts[selected.sku].sizes[selectedSize] || '---'">---</span>
</h6>
พร้อมราคาที่ถูกต้องแล้ว ลองใช้เลย
ปุ่มที่เปิดใช้ตามเงื่อนไข
เกือบเสร็จแล้ว! ต่อไปนี้ให้ปิดใช้ปุ่ม "Add toรถเข็น" เมื่อขนาดที่เลือกไม่พร้อมใช้งาน
<!-- Disable the "ADD TO CART" button when:
1. There is no selected size, OR
2. The available sizes for the selected SKU haven't been fetched yet
-->
<input type="submit" value="ADD TO CART" disabled
class="mdl-button mdl-button--raised mdl-button--accent"
[disabled]="!selectedSize || !shirts[selected.sku].sizes[selectedSize]">
เรามีหน้ารายละเอียดผลิตภัณฑ์อีคอมเมิร์ซแบบอินเทอร์แอกทีฟที่มีขนาดและราคาของตัวแปรแต่ละรายการสําหรับ SKU แต่ละรายการ โดยดึงข้อมูลแบบตามคําขอจากปลายทาง JSON ระยะไกล
หากพบปัญหา โปรดดู static/final.html
เพื่อหาโซลูชันที่สมบูรณ์
เราหวังว่า Codelab นี้จะแสดงให้เห็นถึงประสิทธิภาพและความยืดหยุ่นในการสร้างหน้า AMP แบบอินเทอร์แอกทีฟด้วย <amp-bind>
ดูข้อมูลเพิ่มเติมได้ที่<amp-bind>เอกสารประกอบ
เราอยากได้รับความคิดเห็น โปรดส่งคําขอฟีเจอร์ คําแนะนํา หรือรายงานข้อบกพร่องมาให้เรา หากสนใจที่จะทดสอบ <amp-bind>
กับผู้ใช้จริง ให้พิจารณาสมัครทดลองใช้ต้นทาง
เราตื่นเต้นที่จะได้เปิดตัว <amp-bind>
เร็วๆ นี้ และดูว่าคุณสามารถสร้างอะไรได้บ้าง