0

我正在我们的网站上实现一个滑动式滚动时事通讯注册表单，它是作为 AMP 原生构建的。

我添加了一个使用 amp-bind 隐藏 div 的按钮，但我很难弄清楚如何在 AMP 中使用 cookie/localStorage 保存关闭状态。

我已经浏览了最喜欢的按钮示例代码 - https://ampbyexample.com/advanced/favorite_button/（在 SE 上推荐），但我看不出它与这个特定用例有何关系，尤其是与使用放大器列表。

根据我读过的内容和几个示例，我发现需要 credentials="include" 属性，有效的 CORS json 端点和使用 AMP 变量替换附加到端点 url 的自动生成的客户端 ID 也是如此，但我不是确定如何将它们放在一起。

我使用最喜欢的按钮示例一起刺破了一些东西，但是本教程并没有说明如何设置 CORS 端点，并且该特定示例用于将多个喜欢存储到单个端点，而不是存储特定用户查看喜好。

这是我对代码的粗略（在黑暗中摸索）刺探：

<form method="post"
id="side-newsletter-wrap"
action-xhr="/prefs&clientId=CLIENT_ID(prefs)"
target="_top"
on="submit:AMP.setState({
        showSideNewsletter: !showSideNewsletter
    });
    submit-error:AMP.setState({
        showSideNewsletter: !showSideNewsletter
    });">
    <button on="tap:side-newsletter-wrap.hide" class="close-button"><i     
    class="fa fa-times"></i></button>
    <amp-list width="320"
        height="360"
        credentials="include"
        items="."
        single-item
        src="/prefs&clientId=CLIENT_ID(prefs)">
        <template type="amp-mustache">
        {{#.}}
            <?php winefolly_load_fragment('newsletter-embed'); ?>
        {{/.}}
        {{^.}}{{/.}}
        </template>
    </amp-list>
</form>

对于 prefs 端点，我猜我需要在 WordPress 中注册一个新端点，该端点输出带有首选项的简单数组？

类似于以下内容：

{
    showSideNewsletter: "true",
    winesIndexView: "grid",
    winesIndexSort: "title"
}

我还尝试了 amp-user-notification 组件（它内置了关闭状态），但感觉有点笨拙，并且由于已知错误，通讯嵌入代码（通过 iframe）没有被加载 - https://github .com/ampproject/amphtml/issues/18995）。

任何建议将不胜感激。

克里斯

4

1 回答 1

0

You're right amp-user-notification is the correct approach. Is there a way to implement the newsletter form in AMP until the amp-iframe bug is fixed?

Another way is to use amp-access, which allows you to change the layout of the page on page load. You have to store the user preference server-side though using the READER_ID to identify the user. Storing this server-side is required as you might not be able to write cookies if the page is served from the AMP Cache due to ITP 2.0.

于 2018-11-23T07:55:17.023 回答