Amphtml: AMP pagination and filter in amp-form (server-side filter/sort)

[hussainanver52]

I want to create a search form in amp page the form and displat returned data is working fine, but i wanted to know how to add

1. load more button
2. filter popup

I tried following implementations but didn't workout

1. added form inside the submit-success element but it generates errors
2. added amp-list but cannot use post method and with get method also i am not able to append data with some pagination.
3. tried to submit form externally using tap event but no use

any help would be appreciated

[aghassemi]

/to @mkhatib @rudygalfi

[mkhatib]

load more button

load more to append results on the shown list might be difficult the only way I can think of right now might be some usage with amp-list but I'd have to experiment a bit with this to see how can this work.

However, loading more results in-place of the shown list (basically next page) is doable. You can render a new hidden field inside amp-success that has the page number and another submit button. Like the following:

<form ...>
  <input type=search>
  <input type=submit value="Search">

  <div submit-success>
        <template type="amp-mustache">
            <h1>Page {{currentPage}} out of {{numOfPages}}:</h1>
            <ul>
                {{#results}}<li>{{{title}}}</li>{{/results}}
            </ul>
            <input type="hidden" name="nextPage" value="{{currentPage + 1}}">
            <input type="submit" value="Next Page">
        </template>
  </div>
</form>

I think something like this might work, though might require a bit more work, let me know if this makes sense.

filter popup

I am not sure what does this mean, can you elaborate a bit more to what is the behavior you're looking for?

added form inside the submit-success element but it generates errors

Yes, form is not allowed to be rendered yet inside amp-mustache, feel free to open a bug so we can investigate allowing this in the future, but for now it is not allowed.

added amp-list but cannot use post method and with get method also i am not able to append data with some pagination.

Would you be able to post a full example (jsbin or a gist somewhere) so we can play around with this?

[hussainanver52]

Thank you for the help
I want to append the result below existing result and load more should be below the search results every time. for example i have 10 records in page and when user clicks load more it should append another 10 results starting from 11th row and load more should come in 21st row, likewise.

Popup
there will be a floating button and when clicked it should open lightbox with a from for filter and when user clicks apply or submits form lightbox should be closed and the result page should be updated

My code is same

<form ...>
  <input type=search>
  <input type=submit value="Search">

  <div submit-success>
        <template type="amp-mustache">
            <ul>
                {{#results}}<li>{{{title}}}</li>{{/results}}
            </ul>
        </template>
  </div>
</form>

[mkhatib]

I want to append the result below existing result and load more should be below the search results every time. for example i have 10 records in page and when user clicks load more it should append another 10 results starting from 11th row and load more should come in 21st row, likewise.

I don't think this is possible with our current implementation. @rudygalfi is this is a use case we want to explore more?

there will be a floating button and when clicked it should open lightbox with a from for filter and when user clicks apply or submits form lightbox should be closed and the result page should be updated

I doubt this is currently possible in the current setup either. We're exploring more ideas here. One thing that could help is allowing the usage of input[form] attribute to refer to the form without being a descendent. I think we'll end up supporting this, but haven't explored it yet.

[devanes]

I want to append the result below existing result and load more should be below the search results every time. for example i have 10 records in page and when user clicks load more it should append another 10 results starting from 11th row and load more should come in 21st row, likewise.

This kind of way to load more results seems to be very effective in terms of UX. See for example here:
https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/
So it would be nice if there is or will be a way to make this work.

[devanes]

I have gotten it to work with nested accordions. The first amp-list calls a template. The json contains only one item, with the actual array of results being a value of this single item. That allows me to use a template for the amp-list which first displays the array of results (from the single item) using section format and then contains an accordion with a second amp-list call which uses a recursive call to the template in which it is used.

HTML

<amp-list width="auto" height="1000" layout="fixed-height" src="examples1.json" template="results-list"> </amp-list>
    <template type="amp-mustache" id="results-list">
        {{#results}}
        <div><a href="{{url}}">{{title}}</a></div>
        {{/results}}
        <amp-accordion class="hidden-header"
                       disable-session-states>
            <section>
                <h4>
                    <span class="show-more">Show more {{nextpage}}</span>
                </h4>
                <amp-list width="auto" height="1000" layout="fixed-height" src="examples{{nextpage}}.json" template="results-list">
                </amp-list>
            </section>
        </amp-accordion>
    </template>

JSON
In the second result nextpage = 3 and so on.

{
 "items": [
   {
     "nextpage" : 2,
     "results": [
       {
         "title": "amp-carousel1",
         "url": "/components/amp-carousel/"
       },
       {
         "title": "amp-img1",
         "url": "/components/amp-img/"
       },
       {
         "title": "amp-ad1",
         "url": "/components/amp-ad/"
       },
       {
         "title": "amp-accordion1",
         "url": "/components/amp-accordion/"
       }
     ]
   }
 ]
}

The rest is just CSS to get the clicked 'show more' links to be hidden.

CSS

section[expanded] > .-amp-accordion-header .show-more{
    display: none;
}
amp-accordion.hidden-header section[expanded] h4 {
    border: none;
}

[aghassemi]

@sebastianbenz Candidate for AmpByExample?

[hussainanver52]

@devanes thank you for your reply and help.
I am sorry currently I am busy with some other work, will be back to you with results once i am free
once again thank you very much for help

[sebastianbenz]

@devanes I love this! This is probably one of the most creative uses of amp-list I've seen. It'd be super awesome if you could contribute an example to ampbyexample.

[sebastianbenz]

Just realized that you need to define the max height initially, which makes this less appealing in practice. Wondering if there is a workaround...

[devanes]

@sebastianbenz I just used the fixed-height layout from the initial example for now, which is indeed not practical if there's other content underneath (which will usually be the case). I notice amp-list doesn't seem to support container. I'm not really great at CSS (more a backend developer). Will try some more next week, but if you have any suggestions, that would be great. Getting this to work is basically essential for my project. If I can't, I will have to forget about using AMP.

[devanes]

As height is a required attribute for amp-list, the only way this is really going to work, depending on the size of each item and the possible number of items is to set the height of the both amp-list tags to a very high number and just don't put any content underneath the list, so no footers or anything. You still get an unnecessary large page with a lot of whitespace at the bottom, but unless amp-list starts supporting the container layout which allows it to expand naturally, this is probably the only way.

[src-code]

We played around with something similar, minus the accordion, on one of our projects that needed infinite scroll, but had concerns about the increasing DOM depth as the nesting grows. Would be great if there was a way to avoid that problem via new amp-list syntax.

[choumx]

/cc @choumx

[ericlindley-g]

FYI that we're looking into better support for server-side sorting and filtering that might look similar to the solution here (and possibly enable "load more" on button tap, as well)

Added language in title to distinguish this from #8368 (client-side sort/filter)
Should I pass this to you, @choumx ?

[aghassemi]

@ericlindley-g @choumx Important requirement to consider here as stated by @unitydynamics:

_"I'm using the amp-form module to perform a page updated without a page reload. It's working fine. My search results are displayed to the user via an amp-mustache template. BUT when the user clicks into a result and then later hits the back button the results are gone. I need a way to save the state of the page."_

I think this should be handled at amp-bind level. Essentially we need a method to select a subset of bind-state and push it to the history API so when user pops the history, previous bind values would be restored and a mutation would happen.

Maybe something like AMP.pushHistoryState(<array of bind state keys>, <optional_fragment>)

Note that this is related but independent of updating the URL with sort/filter fragments (hence fragment part being optional)

[choumx]

Is non-navigational search that common? I'm having trouble thinking of major websites that use that pattern. The largest issue is the difficulty in sharing/bookmarking search results page.

[aghassemi]

Regardless of whether search/page number/sort criteria actually make it to URL or not, we don't want to refresh the whole page on back button (specially considering it break out of the AMP viewer experience).

So if we take our amp-list approach for a simple case of paginations, we have

<amp-list [src]="'https://api.mydomain.com/id/?page=' + pageNumber">
...
<button on="tap:setState(pageNumber: pageNumber+1)" >next page</button>

this works fine except we are not pushing anything to the history stack so back button will not work as expected (i.e. taking user back to pageNumber-1)

would be nice to support:

<amp-list [src]="'https://api.mydomain.com/id/?page=' + pageNumber">
...
<button on="tap:setState(pageNumber: pageNumber+1), pushHistoryState('pageNumber')" >next page</button>

now back button will change pageNumber back to its previous value and triggers a [src] reevaluation making the list show the previous page results again.

[ericlindley-g]

One bit of complexity here is that it would make bind run at load time, which until now hasn't been allowed, due to a number of UX ramifications.

I'm tempted to de-couple filter/sort from this history question, so the larger feature isn't blocked on it—can it be treated as a separate issue, or does the approach for filter/sort depend on the choice here?

Also, qq: does the history API use local storage?

[unitydynamics]

@choumx It isn't popular today because the best way to do for legacy browsers without pushState is to hide state client-side in hidden form fields (which tend to be preserved by all browsers). And as you noted the URL will not update. History API.... fairly widely supported now... it would allow search patterns like mine to use ajax and update the URL. I mention it here because AMP is interested in user experience right? No round trip or refresh of the entire page sounds like a goal that fits. For those of us building Web apps we really want to take control of that back/forward button.

[aghassemi]

Closing since server-side approach is possible with amp-bind now and https://github.com/ampproject/amphtml/issues/9128 exists for history related part.

Client-side approach is tracked under #8691 and #9113

[MediaSmackShahzad]

Hi Everyone
How can I load blog posts through Load More button?
I want to create a blog page where when a user clicks on "Load More Button" then new posts appear in AMP theme.