Как сделать подгрузку товара через "показать еще" Есть решение

Как можно сделать подгрузку товара на странице категории через кнопку "показать еще"?

4 ответа

  • 1
    Богдан Юкин 1 октября 2015 05:45 # Решение

    Разобрался сам.

    Отредактировал clear.shop.js подпилив срабатывание Lazy Load c .onclick по <div id="myelement">


  • 6
    Roman 7 июля 2017 21:03 #

    К сожалению, нельзя редактировать свои сообщения. Поэтому выкладываю еще более доработанный код. (предыдущий пост можно удалить)


    на странице:

    {if isset($pages_count) && $pages_count > 1}
    
    <div style="text-align: center; margin-top: 50px;"><a id="myelement" style="border-bottom: 1px dashed; cursor: pointer; display: none; font-size: 17px;">Показать еще на этой странице</a></div>
    
    <div class="block lazyloading-paging" data-loading-str="[`Loading...`]" style="text-align: center;">
    {wa_pagination total=$pages_count attrs=['class' => "menu-h"]}
    </div>
    
    {/if}


    в js:

    //LAZYLOADING
        if ($.fn.lazyLoad) {
        
            var paging = $('.lazyloading-paging');
            if (!paging.length) {
                return;
            }
            // check need to initialize lazy-loading
            var current = paging.find('li.selected');
            if (current.children('a').text() != '1') {
                //return;
            }
            //paging.hide();
            var current = paging.find('li.selected');
            var next = current.next();
            if (next.length) {
                $('#myelement').show();
            } else {
                $('#myelement').hide();
            }
            var loading_str = paging.data('loading-str') || 'Loading...';
            var win = $(window);
            
            // prevent previous launched lazy-loading
            win.lazyLoad('stop');
            
            // check need to initialize lazy-loading
            var next = current.next();
            
            //!!! if (next.length) {
            document.getElementById('myelement').onclick = function() {
                win.lazyLoad({
                    container: '#product-list .product-list',
                    load: function() {
                        win.lazyLoad('sleep');
        
                        //var paging = $('.lazyloading-paging').hide();
                        var paging = $('.lazyloading-paging');
                        
                        // determine actual current and next item for getting actual url
                        var current = paging.find('li.selected');
                        var next = current.next();
                        var url = next.find('a').attr('href');
                        if (!url) {
                            win.lazyLoad('stop');
                            return;
                        }
        
                        var product_list = $('#product-list .product-list');
                        var loading = paging.parent().find('.loading').parent();
                        if (!loading.length) {
                            loading = $('<div style="text-align: center;"><i class="icon16 loading"></i>'+loading_str+'</div>').insertBefore('#myelement');
                        }
        
                        loading.show();
                        $.get(url, function(html) {
                            var tmp = $('<div></div>').html(html);
                            if ($.Retina) {
                                tmp.find('#product-list .product-list img').retina();
                            }
                            product_list.append(tmp.find('#product-list .product-list').children());
                            //var tmp_paging = tmp.find('.lazyloading-paging').hide();
                            var tmp_paging = tmp.find('.lazyloading-paging');
                            paging.replaceWith(tmp_paging);
                            paging = tmp_paging;
                            
                            // check need to stop lazy-loading
                            var current = paging.find('li.selected');
                            var next = current.next();
                            if (next.length) {
                                //!!! win.lazyLoad('wake');
                            } else {
                                $('#myelement').hide();
                                //!!! win.lazyLoad('stop');
                            }
                            
                            loading.hide();
                            tmp.remove();
                        });
                    }
                });
            }
        
        }


    • +2
      devellopah devellopah 10 апреля 2018 18:27 #

      блин, чувак, это бесценно! Ты сохранил мне кучу человеко-часов!

  • 2
    Roman 7 июля 2017 20:42 #

    Спасибо! Немного усовершенствовал.
    Теперь:
    - есть одновременно пагинация и "показать еще"
    - когда js отключен - "показать еще" не показывается


    на странице:

    {if isset($pages_count) && $pages_count > 1}
    <a id="myelement" style="border-bottom: 1px dashed; cursor: pointer; display: none;">Показать еще на этой странице</a>
    <div class="block lazyloading-paging" data-loading-str="[`Loading...`]">
    {wa_pagination total=$pages_count attrs=['class' => "menu-h"]}
    </div>
    {/if}

    в JS:


    //LAZYLOADING
    
        if ($.fn.lazyLoad) {
    
        
    
            var paging = $('.lazyloading-paging');
    
            if (!paging.length) {
    
                return;
    
            }
    
            // check need to initialize lazy-loading
    
            var current = paging.find('li.selected');
    
            if (current.children('a').text() != '1') {
    
                //return;
    
            }
    
            //paging.hide();
    
            $('#myelement').show();
    
            var loading_str = paging.data('loading-str') || 'Loading...';
    
            var win = $(window);
    
            
    
            // prevent previous launched lazy-loading
    
            win.lazyLoad('stop');
    
            
    
            // check need to initialize lazy-loading
    
            var next = current.next();
    
            //!!! if (next.length) {
    
            document.getElementById('myelement').onclick = function() {
    
                win.lazyLoad({
    
                    container: '#product-list .product-list',
    
                    load: function() {
    
                        win.lazyLoad('sleep');
    
        
    
                        //var paging = $('.lazyloading-paging').hide();
    
                        var paging = $('.lazyloading-paging');
    
                        
    
                        // determine actual current and next item for getting actual url
    
                        var current = paging.find('li.selected');
    
                        var next = current.next();
    
                        var url = next.find('a').attr('href');
    
                        if (!url) {
    
                            win.lazyLoad('stop');
    
                            return;
    
                        }
    
        
    
                        var product_list = $('#product-list .product-list');
    
                        var loading = paging.parent().find('.loading').parent();
    
                        if (!loading.length) {
    
                            loading = $('<div><i class="icon16 loading"></i>'+loading_str+'</div>').insertBefore(paging);
    
                        }
    
        
    
                        loading.show();
    
                        $.get(url, function(html) {
    
                            var tmp = $('<div></div>').html(html);
    
                            if ($.Retina) {
    
                                tmp.find('#product-list .product-list img').retina();
    
                            }
    
                            product_list.append(tmp.find('#product-list .product-list').children());
    
                            //var tmp_paging = tmp.find('.lazyloading-paging').hide();
    
                            var tmp_paging = tmp.find('.lazyloading-paging');
    
                            paging.replaceWith(tmp_paging);
    
                            paging = tmp_paging;
    
                            
    
                            // check need to stop lazy-loading
    
                            var current = paging.find('li.selected');
    
                            var next = current.next();
    
                            if (next.length) {
    
                                //!!! win.lazyLoad('wake');
    
                            } else {
    
                                $('#myelement').hide();
    
                                //!!! win.lazyLoad('stop');
    
                            }
    
                            
    
                            loading.hide();
    
                            tmp.remove();
    
                        });
    
                    }
    
                });
    
            }
    
        
    
        }



  • 1
    Евгений Е. 3 ноября 2015 04:52 #

    Код в студию!

    • +1
      Богдан Юкин Богдан Юкин 3 ноября 2015 06:18 #

      Если я ничего не забыл. То что-то типа того:



      //LAZYLOADING

      if ($.fn.lazyLoad) {

      var paging = $('.lazyloading-paging');

      if (!paging.length) {

      return;

      }

      // check need to initialize lazy-loading

      var current = paging.find('li.selected');

      if (current.children('a').text() != '1') {

      return;

      }

      paging.hide();

      var loading_str = paging.data('loading-str') || 'код img src картинки-анимашки на время загрузки';

      var win = $(window);

      // prevent previous launched lazy-loading

      win.lazyLoad('stop');

      // check need to initialize lazy-loading if (next.length)

      var next = current.next();

      document.getElementById('myElement').onclick = function() {

      win.lazyLoad({

      container: '#product-list .product-list',

      load: function() {

      win.lazyLoad('sleep');

      var paging = $('.lazyloading-paging').hide();

      // determine actual current and next item for getting actual url

      var current = paging.find('li.selected');

      var next = current.next();

      var url = next.find('a').attr('href');

      if (!url) {

      win.lazyLoad('stop');

      return;

      }

      var product_list = $('#product-list .product-list');

      var loading = paging.parent().find('.loading').parent();

      if (!loading.length) {

      loading = $('<div style="position:absolute;bottom:-90px;left:225px">'+loading_str+'</div>').insertBefore(paging);

      }

      loading.show();

      $.get(url, function(html) {

      var tmp = $('<div></div>').html(html);

      if ($.Retina) {

      tmp.find('#product-list .product-list img').retina();

      }

      product_list.append(tmp.find('#product-list .product-list').children());

      var tmp_paging = tmp.find('.lazyloading-paging').hide();

      paging.replaceWith(tmp_paging);

      paging = tmp_paging;

      // check need to stop lazy-loading

      var current = paging.find('li.selected');

      var next = current.next();

      if (next.length) {

      // закомментил win.lazyLoad('wake');

      } else {

      $('#myElement').hide();

      //закомментил win.lazyLoad('stop');

      }

      loading.hide();

      tmp.remove();

      });

      }

      });

      }

      }

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите