การโต้ตอบขั้นสูงใน AMP

Accelerated Mobile Pages (AMP) เป็นโครงการริเริ่มแบบโอเพนซอร์สที่ช่วยให้สร้างเว็บไซต์และโฆษณาที่รวดเร็ว สวยงาม และมีประสิทธิภาพสูงอยู่เสมอ

หากเพิ่งเริ่มใช้ AMP ให้พิจารณาภาพรวมคร่าวๆ ด้วยแหล่งข้อมูลต่อไปนี้

แรงจูงใจ

AMP รองรับเนื้อหาแบบไดนามิกที่สมบูรณ์ด้วยคอมโพเนนต์ UI เช่น ภาพหมุนและไลท์บ็อกซ์ นอกจากนี้ AMP ยังรองรับวิธีง่ายๆ สําหรับคอมโพเนนต์หนึ่งเพื่อทริกเกอร์การทํางานในคอมโพเนนต์อื่นผ่านการดําเนินการ AMP อีกด้วย

แต่ฉันควรทําอย่างไรหากต้องการ

  • ปรับแต่งคอมโพเนนต์ AMP ไหม
  • เช่น แสดงป้ายกํากับที่กําหนดเองซึ่งแสดงสไลด์ปัจจุบันและจํานวนสไลด์ทั้งหมดในภาพหมุน
  • เพิ่มพฤติกรรมที่เก็บสถานะใช่ไหม
  • เช่น ปิดใช้ปุ่ม "Add toรถเข็น&quot หากจํานวนผลิตภัณฑ์ที่ผู้ใช้เลือกมีจําหน่ายมากกว่าความพร้อมจําหน่ายปัจจุบัน

ก่อนหน้านี้ การนําฟีเจอร์อย่าง AMP มาใช้นั้นทําได้ยาก เนื่องจากขาดช่องทางการสื่อสารที่มีประสิทธิภาพระหว่างคอมโพเนนต์ UI กับสถานะการแชร์ไม่ได้ เราได้สร้างคอมโพเนนต์ใหม่ที่มีประสิทธิภาพใน AMP เพื่อแก้ปัญหากรณีการใช้งานเหล่านี้

<amp-bind>

<amp-bind> คือคอมโพเนนต์ AMP ใหม่ที่ให้การโต้ตอบที่กําหนดเองผ่านการเชื่อมโยงข้อมูลและนิพจน์ที่มีลักษณะเหมือน JS Codelab นี้จะแนะนําวิธีใช้ <amp-bind> เพื่อสร้างหน้า AMP ที่มีการโต้ตอบแบบกําหนดเองที่สมบูรณ์

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะต้องสร้างหน้ารายละเอียดผลิตภัณฑ์อีคอมเมิร์ซดังนี้

  • ใช้คอมโพเนนต์ AMP HTML และ AMP เพื่อสร้างหน้าเว็บที่มอบประสบการณ์ที่สมบูรณ์และรวดเร็วให้แก่ผู้ใช้
  • ใช้ <amp-bind> เพื่อเพิ่มการโต้ตอบแบบข้ามองค์ประกอบ
  • ใช้ <amp-state> เพื่อดึงข้อมูลผลิตภัณฑ์เพิ่มเติมตามคําขอ

สิ่งที่จะได้เรียนรู้

  • วิธีใช้การเชื่อมโยงข้อมูลและนิพจน์เพื่อสร้างหน้า 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> คุณจะเพิ่มฟีเจอร์เช่นนี้ไม่ได้&#39 มารับประสบการณ์การใช้งาน <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 ออกจากองค์ประกอบใดก็ได้

รีเฟรชหน้าเว็บแล้วลองเลย การเปลี่ยนสไลด์ในภาพหมุนจะมีผลดังนี้

  1. ทริกเกอร์เหตุการณ์ slideChange...
  2. ซึ่งเรียกการดําเนินการ AMP.setState ว่า...
  3. ซึ่งจะอัปเดตตัวแปรสถานะ selected.slide ...
  4. ซึ่งจะอัปเดตการเชื่อมโยง [class] ในองค์ประกอบ <span> ของตัวบ่งชี้

ดีมาก ตอนนี้เรามีสัญญาณบอกสถานะสไลด์ที่ใช้งานได้แล้ว

คงจะดีถ้าเราเห็นรูปภาพสีเสื้อที่แตกต่างกันเมื่อเปลี่ยนสีที่เลือก หากใช้ 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 วินาทีเพื่อจําลองเวลาในการตอบสนองของเครือข่าย

ส่งคำขอ

คำตอบ

GET /shirts/sizesAndPrices?sku=1001

{"1001: {"sizes": {"XS": 8.99, "S" 9.99}}}

ข้อมูลระยะไกลที่แสดงจากการดึงข้อมูลเหล่านี้จะรวมและอยู่ภายใต้แอตทริบิวต์ id ขององค์ประกอบ เช่นเดียวกับข้อมูล JSON ภายในองค์ประกอบ <amp-state> เช่น ข้อมูลที่แสดงผลจากการตอบกลับตัวอย่างข้างต้นจะเข้าถึงในนิพจน์ได้

นิพจน์

ผลลัพธ์

shirts['1001'].sizes['XS']

8.99

ทีนี้มานําไปใช้กับตัวอย่างอีคอมเมิร์ซของเรากัน ก่อนอื่นมาดึงข้อมูลเสื้อตัวนี้เมื่อเลือก 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> เร็วๆ นี้ และดูว่าคุณสามารถสร้างอะไรได้บ้าง