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 和 class 都是預先定義的，應保持不變。然後您可以將這些作為參考來設定對話方塊的樣式以符合您的需求。

<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 撰寫