Implementing cookies on a dismissible slide-in panel with AMP

Question

I'm implementing a slide-in-on-scroll newsletter signup form on our site, which is built as AMP-native.

I added a button that hides the div on tap using amp-bind, but I'm struggling to get my head around how to save the closed state with cookies/localStorage in AMP.

I've gone through the favorite button example code - https://ampbyexample.com/advanced/favorite_button/ (as recommended here on SE), but I don't see how it relates to this particular use-case, especially with the use of amp-list.

Based on what I've read and few examples I found the credentials="include" attribute is needed, as is a valid CORS json endpoint and an auto generated client id appended to the endpoint url using AMPs variable substitution, but I'm not sure how to put it all together.

I took a stab hacking something together using the favorite button example, but the tutorial doesn't say much about how to setup the CORS endpoint and that particular example is for storing multiple likes to a single endpoint, as apposed to storing a specific users viewing preferences.

Here is my rough (poking-around-in-the-dark) stab at the code:

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

For the prefs endpoint, I'm guessing I'd need to register a new endpoint in WordPress that outputs simple array with the preferences?

Something along the lines of:

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

I also tried the amp-user-notification component (which has the closed state built in) but that felt a bit hacky and the newsletter embed code (via iframe) doesn't get loaded due to a known bug - https://github.com/ampproject/amphtml/issues/18995).

Any suggestions would be much appreciated.

Chris

Answer 1

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.