amp-access-laterpay

簡介

amp-access-laterpay 讓發布商能輕鬆與付款基礎架構平台 LaterPay 整合。它以 AMP Access 為基礎，且需要 AMP Access。

設定

在標頭中匯入 amp-access 元件。

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

amp-access 也需要匯入 amp-analytics。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

當然還有 amp-access-laterpay 元件。

<script async custom-element="amp-access-laterpay" src="https://cdn.ampproject.org/v0/amp-access-laterpay-0.2.js"></script>

新增組態，指定供應商和 amp-access 的供應商特定組態

<script id="amp-access" type="application/json">
{
  "vendor": "laterpay",
  "laterpay": {
    "articleTitleSelector": ".preview > h3",
    "sandbox": true
  }
}
</script>

控制可見度

所有使用者都可看見此區段。此情況下不需要特殊標記。

文章

這是文章預覽。

<section class="preview">
  <h3>The Article</h3>
  <p>
    This is a preview of the article.
  </p>
</section>

只有在授權請求的回應中，access 和 error 屬性的值都評估為 FALSE 時，才會顯示此區段。具有不同購買選項的 LaterPay 對話方塊將在此處呈現

<section amp-access="NOT error AND NOT access" amp-access-hide>

此處顯示的 ID 和類別都是預先定義的，應保持不變。然後您可以將這些作為參考來設定對話方塊的樣式以符合您的需求。

<div id="amp-access-laterpay-dialog" class="amp-access-laterpay"></div>

當取得授權請求時，如果存在 error 屬性，則會顯示此區段

糟糕... 發生錯誤。

<section amp-access="error" amp-access-hide>
  Oops... Something broke.
</section>

使用 amp-access 屬性來控制每個元件的可見度。運算式必須評估為布林值。如果評估為 TRUE，則會顯示該區段。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus luctus nunc ut elit cursus, et imperdiet diam vehicula. Duis et nisi sed urna blandit bibendum et sit amet erat. Suspendisse potenti. Curabitur consequat volutpat arcu nec elementum. Etiam a turpis ac libero varius condimentum. Maecenas sollicitudin felis aliquam tortor vulputate, ac posuere velit semper.

<div amp-access="access" amp-access-hide>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
    luctus nunc ut elit cursus, et imperdiet diam vehicula.
    Duis et nisi sed urna blandit bibendum et sit amet erat.
    Suspendisse potenti. Curabitur consequat volutpat arcu nec
    elementum. Etiam a turpis ac libero varius condimentum.
    Maecenas sollicitudin felis aliquam tortor vulputate,
    ac posuere velit semper.
</div>

需要更多說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時聯繫其他 AMP 使用者，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性貢獻。

在 GitHub 上編輯範例

作者： @trodrigues