Загрузить еще Не работает список усилителей на странице со списком товаров - PullRequest
Новая
       8

Загрузить еще Не работает список усилителей на странице со списком товаров

0 голосов
/ 30 мая 2018

Здесь я получаю первые 20 сведений о продукте, которые отображаются при загрузке страницы и при нажатии кнопки «Показать больше», я выбираю следующие 20 продуктов и добавляю их к предыдущим результатам.

В браузере Mozilla Firefox загрузитеКнопка «больше» работает нормально при первой загрузке страницы, но когда я перезагружаю страницу, кнопка «загрузить больше» не работает.

В браузере Chrome кнопка «больше» не работает при первой загрузке страницы, но когда я нажимаю на браузеркнопка назад и кнопка вперёд работают.

Я не получаю никаких ошибок.Я не могу понять, в чем проблема. 

    <amp-state id="productsState" src="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"></amp-state>
<amp-state id="product">
    <script type="application/json">
        {
        "start":20,
        "hasMorePages": true
        }
    </script>
</amp-state>

<amp-list src="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc" [src]="productsState.items" width="320" height="2000" [height]="productsState.items.length * 200" class="m1">
    <template type="amp-mustache">
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_eCommerceThumbNailHolder eCommerceThumbNailHolder">
            <div class="js_swatchProduct">
                <a class="pdpUrl" title="{{name}}" href="{{seoFriendlyUrl}}" id="{{productId}}">
                    <amp-img alt="{{name}}" title="{{name}}" src="http&#58;&#47;&#47;{{productImageSmallUrl}}" class="productThumbnailImage"
                    height="140"
                    width="170">
                    </amp-img>
                </a>
            </div>
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        {{#outOfStock}}
            <div class="stock">Out Of Stock</div>
        {{/outOfStock}}
        <div>
            <a class="eCommerceProductLink pdpUrl" title="{{name}}" href="{{seoFriendlyUrl}}" id="detailLink_{{productId}}"><span>{{name}}</span></a>
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_plpPriceList">
            <span><b>&#x20b9;{{listPrice}}</b></span>
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_plpPriceSavingPercent">
        {{#showPercent}}
            <span>({{youSavePercent}}% off)</span>
        {{/showPercent}}
        </div>
    </li>
    <li class="content navigation ampsiteHeaderNavigation">
        <div class="js_plpPriceOnline">
            <span><b>&#x20b9;{{price}}</b></span>
        </div>
    </li>
    </template>
</amp-list>
<form method="GET" action="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"
    action-xhr="/solrSearchAmp?productCategoryId=14030181&sortResults=customerRating-desc"
    target="_top"
    on="submit-success: AMP.setState({
            productsState: {
            items: productsState.items.concat(event.response.items),
            },
            product:{
            start: product.start + 20,
            hasMorePages: event.response.hasMorePages
            }
        });">
    <input type="hidden" name="start" value="20" [value]="product.start">
    <input type="submit"
    value="Show more"
    class="ampstart-btn caps m1 show"
    [class] = "(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
</form>

1 Ответ

0 голосов
/ 30 мая 2018

Вы должны всегда проверять правильное значение start.Первоначально он определяется как: productsState.start.Однако в вашей форме вы устанавливаете и получаете к нему доступ через product.start.

Если вы добавите #development=1 к URL, вы можете отладить текущее состояние усилителя в консоли браузера с помощью: AMP.printState().

...