Бесконечная ajax подгрузка каталога

9 июня 2018 г.

Здравствуйте! У вас есть потрясающая статья про ajax подгрузку товаров https://www.hostcms.ru/documentation/modules/shop/frontend/ajax-loading-items/. Однако работает пример таким образом, что подгружает один раз, вторую страницу. Как сделать так, чтобы он автоматически подгружал новые и новые страницы?

Я добавил костыль на js, но есть ли решение с использованием возможностей HostCMS? Можно ли как-то динамически проверять количество оставшихся страница и вызывать заново?

<xsl:if test="not(/shop/ajax/node())">
         <SCRIPT type="text/javascript">
            <xsl:comment>
               <xsl:text disable-output-escaping="yes">
                  <![CDATA[
                  $(function() {
                     var counter = 2;
                     $(window).scroll(function() {
                        if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                           $('#getContent')
                              .click()
                              .prop('onclick', null)
                              .off('click');

                           var current_page_url = $("#getContent").attr("onclick").toString();
                           $("#getContent").attr("onclick", current_page_url.replace(/(\d+)/g, counter+1));
                           counter++;
                        }
                     });
                  });
               ]]>
               </xsl:text>
            </xsl:comment>
         </SCRIPT>
      </xsl:if>

Ускорение сайтов / Любые работы по сайту / Обращайтесь в nivaks-studio.ru

9 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

nikolajgromkov,
в xsl шаблоне можете сделать js переменную в которой будет путь до следующей страницы и в скрипте по этому пути подгружать данные

HostDev.pw - модули для HostCMS, Telegram: @hostdev

9 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

nikolajgromkov писал(а):

Как сделать так, чтобы он автоматически подгружал новые и новые страницы?

Когда скроллер достигает к концу страницы срабатывает функция $.showShopItems
В свою очередь в нем передается POST на следующую страницу page-*

<a class="btn btn-primary full-width margin-top-30 load-more-items" onclick="$(this).find('i').addClass('fa-spin'); $.showShopItems('{.//shop_group[@id=$group]/url}page-{/shop/page + 2}/')">
<i class="fa fa-refresh"></i> Показать еще
</a>

nikolajgromkov писал(а):

Можно ли как-то динамически проверять количество оставшихся страница и вызывать заново?

Вы имеете ввиду показывать информацию загружено: Страница N из Count(N) ?

E-mail: info@syrbek.ru / телега: @syrbek /skype: activexm / syrbek.ru / Поддержка сайтов / г. Москва [HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, Git, SVN, Redmine]

9 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

Seri писал(а):

Вы про пример по ссылке?
В том то и дело что он остаётся на второй странице и никаких следующих страниц нет

Ускорение сайтов / Любые работы по сайту / Обращайтесь в nivaks-studio.ru

9 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

nikolajgromkov писал(а):

В том то и дело что он остаётся на второй странице и никаких следующих страниц нет

Посмотреть можно как это у вас работает?

10 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

Seri писал(а):

Посмотреть можно как это у вас работает?

Конечно! Вот ссылка на группу http://new.snezhnoe.studio/shop/zimnie-palto-zhakety/ В ней 18 товаров, 6 на одну страницу. Поэтому если пролистать вниз будет показано только 12

Ускорение сайтов / Любые работы по сайту / Обращайтесь в nivaks-studio.ru

10 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

Вообще кусок кода в примере удалеяет саму кнопку подгрузки после срабатывания

jDivItems.find('a.load-more-items').remove();

Ускорение сайтов / Любые работы по сайту / Обращайтесь в nivaks-studio.ru

10 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

nikolajgromkov писал(а):

Вообще кусок кода в примере удалеяет саму кнопку подгрузки после срабатывания
jDivItems.find('a.load-more-items'

.remove();

Все верно. Вы должны из показанного контейнера class="shop_items_list" удалить предыдущий класс class="loading" и загрузить тем ответом которого получаете в JSON.
У вас в ответе JSON прилетает:

<div class="heading">
  <h1 class="display-5">Зимние пальто, жакеты</h1>
</div>
<div class="shop_block">
  <div class="shop_items_list">
    <div class="items-wrap">
      <div class="row">
       
      </div>
      <div id="divContent"></div>
    </div>
    <div id="loading" class="loading"> <a href="#" id="getContent" onclick="$.showShopItems('/shop/zimnie-palto-zhakety/page-3/')"> <img src="/assets/i/loader.png" alt="" /> </a> </div>
  </div>
</div>
</div>

Вам надо исключить заголовок:

<div class="heading"> <h1 class="display-5">Зимние пальто, жакеты</h1>

И ответ JSON добавить в конец контейнера class="shop_items_list"
Надо сделать так что бы ответ JSON был такой:

13 июня 2018 г.

Re: Бесконечная ajax подгрузка каталога

Seri писал(а):

И ответ JSON добавить в конец контейнера class="shop_items_list"
Надо сделать так что бы ответ JSON был такой:

Благодарю вас! Всё отлично работает.

Ускорение сайтов / Любые работы по сайту / Обращайтесь в nivaks-studio.ru

Авторизация