建立座位表

重要事項：本文件不適用於您目前選取的格式廣告！

座位表是票務業者網路應用程式的重要組成部分，但在 AMP 中實作可能會很困難。請繼續閱讀以瞭解如何透過結合可用的 AMP 元件在 AMP 中實作座位表。

實作以下所述做法的即時範例可在此取得。

需要的 AMP 元件

讓我們先檢閱需要的元件

amp-pan-zoom

amp-pan-zoom 可讓您透過點擊兩下和雙指撥動來縮放和平移內容。此元件作為座位表實作的基礎。

amp-list

amp-list 從 CORS JSON 端點動態擷取內容，並使用提供的範本進行轉譯。用於擷取目前的座位表可用性，以便使用者始終獲得最新的資料。

amp-bind

amp-bind 為頁面新增互動性。此處需要用來追蹤已選取多少個座位。

amp-selector

amp-selector 代表一個控制項，可呈現選項選單，並讓使用者從中選擇。整個座位表可以視為選項選單，其中每個座位都是一個選項。透過讓您使用 CSS 運算式，它可以更輕鬆地設定選取座位的樣式。例如，以下運算式會在選取座位後將其填滿橘色。

rect[selected].seat {
  fill: var(--orange-theme);
}

需求

若要將座位表繪製為 SVG，其中每個座位都以 rect 元素表示，您需要有關每個座位的資訊：位置 x 和 y、width 和 height，以及可能的 rx 和 ry 以使矩形的角變圓。
每個座位的唯一識別碼，可用於進行預訂。
整個座位表的寬度和高度測量值，用於 viewbox 屬性中。

繪製座位表

座位表透過 amp-list 和 amp-mustache 轉譯。從 amp-list 呼叫接收到資料後，您可以使用所述資料來迭代座位

<svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
{{#seats}}
<rect option="{{id}}" role="button" tabindex="0" class="seat {{unavailable}}" x="{{x}}" y="{{y}}" width="{{width}}" height="{{height}}" rx="{{rx}}" ry="{{ry}}"/>
{{/seats}}
</svg>

設定無法使用座位的樣式

在上述範例中，{{unavailable}} 是 JSON 端點傳回的欄位值，用於設定無法使用座位的樣式。此方法不允許您在座位無法使用時移除 option="" 等屬性，因為範本無法包裝整個頁面的 <html> 元素。

另一種更詳細的方法是重複標記，如下所示

{{#available }}<rect option="" role="button" tabindex="0" class="seat" x="" y="" width="" height="" rx="" ry=""/>{{/available }}
{{^available}}<rect role="button" tabindex="0" class="seat unavailable" x="" y="" width="" height="" rx="" ry=""/>{{/available }}

調整座位表大小

除非您的座位表大小是固定的，否則很難調整包含座位表的 amp-list 大小。amp-list 需要固定尺寸，或使用 layout="fill" (以使用父容器的可用空間)。有兩種方法可以解決此問題

在您知道頁首和頁尾等其他元件使用的空間後，計算頁面上的可用空間。此計算可以使用 CSS 中的 calc 運算式完成，並將其指定為 amp-list 父 div 的 min-height。
在知道頁面版面配置的高度時，使用彈性版面配置。

設定 amp-pan-zoom 的樣式

如果使用上一節中描述的方法，amp-pan-zoom 也需要使用 layout="fill"。

提示 – 為了在座位表周圍保留一些空白區域，並使其仍然是縮放和平移區域的一部分

為 svg 新增一個包裝 div
新增邊距

如果您沒有包裝 div，而是改為在 SVG 中新增邊界，則邊界不會成為縮放和平移區域的一部分。

處理狀態

當使用者點擊不同的座位時，可以使用 amp-state，透過以下方式追蹤變數中選取的座位 id

為每個座位新增 amp-bind 運算式，以將選取的座位新增至清單
或使用 amp-selector 和動作 on="select:AMP.setState({selectedSeats: event.selectedOptions})"，以便將所有選取的座位新增至清單

雖然第一種方法不需要額外的元件 amp-selector，但它可能會使座位表變得非常慢，因為每個 amp-bind 運算式都會在每次座位選取/取消選取時進行評估。

第二種方法也允許您減少範本將轉譯的每個座位的 amp-bind 運算式的重複。

最終 HTML 結構

作為參考，以下是座位表的最終 HTML

<div class="seatmap-container">
  <amp-list layout="fill" src="/json/seats.json" binding="no" items="." single-item noloading>
    <template type="amp-mustache">
      <amp-pan-zoom layout="fill" class="seatmap">
        <amp-selector multiple on="select:AMP.setState({
          selectedSeats: event.selectedOptions
        })" layout="fill">
          <div class="svg-container">
            <svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 {{width}} {{height}}">
            {{#seats}}
              <rect option="{{id}}" role="button"
               tabindex="0" class="seat {{unavailable}}"
              x="{{x}}" y="{{y}}"
              width="{{width}}" height="{{height}}"
              rx="{{rx}}" ry="{{ry}}"/>
            {{/seats}}
            </svg>
          </div>
        </amp-selector>
      </amp-pan-zoom>
    </template>
  </amp-list>
</div>

作者： @kul3r4
貢獻者： @pbakaus