Search code examples
amp-html

Is it possible to use a few parameters in amp-state src?


I want to send a few parameters via amp-state request to my server in order to get my products list sorted by different parameters(sort by and page number). I have such code:

<amp-list id="paged-amp-list"
      layout="fixed-height"
      height="700"
      src="{$current_url}?ajax"
      [src]="'{$current_url}?ajax&page=' + pageNumber + '&orderBy=' + pageOrderBy"
      single-item>
    <template type="amp-mustache">
        <p class="info">Page {{currentPage}} of {{totalPages}}</p>
        {{ #products }}
        <div class="item">
        <amp-img
            class="product-image"
            src="{{ cover.large.url }}"
            width="{{ cover.large.width }}"
            height="{{ cover.large.height }}"
            layout="responsive">
        </amp-img>
      </div>
      {{ /products }}
    </template>
</amp-list>
<div class="nav">
<button class="prev"
      on="tap: AMP.setState({
            pageNumber: pageNumber - 1
          })">Prev
</button>
<button class="next"
      on="tap: AMP.setState({
          pageNumber: pageNumber ? pageNumber + 1 : 2, pageOrderBy: asc
        })">Next
</button>
</div>
<amp-state id="page"
       src="{$current_url}?ajax"
       [src]="'{$current_url}?ajax&page=' + pageNumber + '&orderBy=' + pageOrderBy">
</amp-state>

So when I press button "prev" I just send a page number value to request(and it works correctly) but when I press "Next" I want to send page number and new products ordering value but the value orderBy is never filled. Even if I create a new button with single parameter "pageOrderBy" I still get the same result, parameter "orderBy" everytime is null.

Thank in advance for any suggestion.


Solution

  • I have found my mistake. I forgot to quote pageOrderBy value like "asc". So now it works and it' possible