Перейти к содержимому


Фото
* * * * * 5 голосов

Бесконечная прокрутка (aka Новости вконтакте)

прокрутка товары список товаров бесконечная прокрутка

  • Чтобы отвечать, сперва войдите на форум
31 ответов в теме

#1 Romalibert

Romalibert
  • Пользователь
  • 82 сообщений
  • Дизайн, Программирование, Заказчик
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 19.11.2013 - 11:13

Добрый день, хочу поделиться несложной реализацией бесконечной прокрутки, для этого нужно добавить скрипт в папку js в вашем шаблоне(прикрепил к письму, нужно сменить тип txt на js), далее убрать {include file='pagination.tpl'}(только первую, нижнюю оставляем) чтобы листалка страниц осталась только снизу, ну и сам код:

<script>window.jQuery || document.write("<script src='jquery-1.7.2.js'>\x3C/script>")</script>
    
    <script src="design/{$settings->theme}/js/jquery.infinitescroll.js"></script>
    
    <script>
    $('.products').infinitescroll({
        navSelector      : ".pagination",
        nextSelector     : ".next_page_link",
        itemSelector     : ".products li",
    });
        </script>
 

Прикол в том, что боты и люди без включённого JS будут видеть просто странички, а у остальных ajax-ом будут подгружаться товары

 

Вот гит проекта https://github.com/p...infinite-scroll

 

Вроде указал всё верно, шаблон моего сайта сильно кастромизирован+ пишу с работы, будут вопросы-пишите в лс или сюда.

 

 

Так-же посоветую подключить кнопку наверх, дабы не пришлось листать всё обратно юзерам

Прикрепленные файлы:



#2 ps-simpla

ps-simpla

    Модератор в запасе :)

  • Модератор
  • 1 016 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Пермский край

Опубликовано 19.11.2013 - 11:21

:)  хм, попробую потом на проекте каком нибудь, спасибо



#3 Rash

Rash
  • Пользователь
  • 450 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x
  • Откуда:Russian Federation

Опубликовано 19.11.2013 - 11:30

Спасибо, когда то давно была надобность у кого-то в этом  :)



#4 vidicar

vidicar
  • Пользователь
  • 123 сообщений
  • Заказчик
  • Версия CMS:2.x
  • Откуда:Киев

Опубликовано 19.11.2013 - 15:10

А может кто-то за дополнительную плату мне сделать такое?))

У самих не получается чейт.



#5 ps-simpla

ps-simpla

    Модератор в запасе :)

  • Модератор
  • 1 016 сообщений
  • Дизайн, Программирование, Верстка
  • Версия CMS:2.x
  • Откуда:Пермский край

Опубликовано 19.11.2013 - 19:26

а вот интересно как поисковики отреагирую на новость то что нету пагинации? :huh:

прошу прощения, думал надо оба кода удалить 



#6 Romalibert

Romalibert
  • Пользователь
  • 82 сообщений
  • Дизайн, Программирование, Заказчик
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 21.11.2013 - 08:10

Решение вроде рабочее, отслеживал путешествия роботов через метрики и через IPS Suricata, боты по страничкам бродят:

11/20/2013-08:09:11.046258 www.xxx.ru [**] /catalog/xxxxxxxxxx?page=4 [**] Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots) [**] 178.154.202.251:15591 -> *.*.*.*:80
11/20/2013-08:09:24.169574 www.xxx.ru [**] /catalog/xxxxxxxxxx?page=8 [**] Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots) [**] 178.154.202.251:15591 -> *.*.*.*:80
11/20/2013-08:09:37.353369 www.xxx.ru [**] /catalog/xxxxxxxxxx?page=2 [**] Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots) [**] 178.154.202.251:15591 -> *.*.*.*:80
 

что касательно данной реализации: на мобильных работает, на стандартном браузере андройда сразу 2 страницы подгружает, поэтому в настройках симплы стоит сделать товаров поменьше на страницу(это критично при медленном мобильном интернете), на опере мини не работает, показывается пагинация, на всех браузерах в т.ч. IE8+ работает, единственное, если человек перешёл на вторую страницу через пагинацию то у него скрипт работать не будет и он дальше будет сёрфить сайт пагинацией(что лично я считаю несомненным плюсом), на айпадах скрипт грузится долго(это при полном сжатии сайта через ngx_pagespeed и использовании CDN), небольшой процент от посетителей с айпадами сёрфили сайт пагинацией.

По поводу юзабилити, после внедрения кол-во просмотренных страниц сократилось вдвое(оно и понятно почему), конверсии,  глубина просмотра, кол-во отказов осталось на среднестатистических для этого месяца показателях, вобщем всё норм, можно запиливать в продакшн.



#7 chubr

chubr
  • Пользователь
  • 73 сообщений
  • Заказчик
  • Версия CMS:2.x
  • Откуда:Псков

Опубликовано 30.11.2013 - 08:45

хм, не получилось. Скрипт подключил, а вот пингинация не заменилась

 

как я понимаю, скрипт надо вставить в index_content.tpl

а {include file='pagination.tpl'} надо убрать сверху в products.tpl  — но у меня эта строчка есть только снизу

все верно? или что я делаю не так?



#8 tsybart

tsybart
  • Пользователь
  • 222 сообщений

Опубликовано 11.02.2014 - 18:06

Версия 2.1.5

Не заработало



#9 Romalibert

Romalibert
  • Пользователь
  • 82 сообщений
  • Дизайн, Программирование, Заказчик
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 11.02.2014 - 18:14

хм, не получилось. Скрипт подключил, а вот пингинация не заменилась

 

как я понимаю, скрипт надо вставить в index_content.tpl

а {include file='pagination.tpl'} надо убрать сверху в products.tpl  — но у меня эта строчка есть только снизу

все верно? или что я делаю не так?

ссылку в лс скинь, посмотрю=)



#10 eXtatic

eXtatic
  • Пользователь
  • 60 сообщений
  • Откуда:Архангельск

Опубликовано 12.02.2014 - 10:35

Понять не могу куда код воткнуть. Шаблон ситимаркет.

500c8dcf9e0f.jpg



#11 Romalibert

Romalibert
  • Пользователь
  • 82 сообщений
  • Дизайн, Программирование, Заказчик
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 12.02.2014 - 15:20

Понять не могу куда код воткнуть. Шаблон ситимаркет.

500c8dcf9e0f.jpg

код в products.tpl в самый низ



#12 eXtatic

eXtatic
  • Пользователь
  • 60 сообщений
  • Откуда:Архангельск

Опубликовано 12.02.2014 - 16:23

Поставил. Не работает....

 

<div id="page_title">
    <p><a href="./">Главная</a>
    {if $category}
        {foreach from=$category->path item=cat} » <a class='link_2' href="catalog/{$cat->url}">{$cat->name|escape}</a>{/foreach}
        {if $brand}» <a class='link_2' href="catalog/{$cat->url}/{$brand->url}">{$brand->name|escape}</a>{/if}
    {elseif $brand}» <a class='link_2' href="brands/{$brand->url}">{$brand->name|escape}</a>
    {elseif $keyword}» Поиск
    {/if}
    </p>    
    <h1>
    {if $keyword}Поиск {$keyword|escape}
    {elseif $page}{$page->name|escape}
    {else}{$category->name|escape} {$brand->name|escape} {$keyword|escape}
    {/if}
    </h1>    
</div>


{if $current_page_num==1 && $category->description}<div id="category_description">{if $page->body}<p>{$page->body}</p>{/if}{$category->description}</div>{/if}
{if $brand->description && $current_page_num==1}<div id="category_description"><h2>{$brand->name}</h2>{$brand->description}</div>{/if}
{if $features || $category->brands}
    <div id="features">
    <ul>
    {if $category->brands}
        <li>
        <p class="name">Бренды</p>
        <p class="values">
        <a href="catalog/{$category->url}" class='hover_mouse{if !$brand->id} selected{/if}'>Все</a>
        {foreach name=brands item=b from=$category->brands}
        <a href="catalog/{$category->url}/{$b->url}" class='hover_mouse{if $b->id == $brand->id} selected{/if}' data-brand="{$b->id}">{$b->name|escape}</a>
        {/foreach}
        </p>
        </li>
    {/if}


    {if $features}
        {foreach $features as $f}
        <li>
        <p class="name" data-feature="{$f->id}">{$f->name}:</p>
        <p class="values">
        <a href="{url params=[$f->id=>null, page=>null]}" class='hover_mouse{if !$smarty.get.$f@key} selected{/if}'>Все</a>
        {foreach $f->options as $o}<a href="{url params=[$f->id=>$o->value, page=>null]}" class='hover_mouse{if $smarty.get.$f@key == $o->value} selected{/if}'>{$o->value|escape}</a>{/foreach}
        </p>
        </li>
        {/foreach}
    {/if}
    </ul>
    </div>
{/if}


{if $products}
    {include file='pagination.tpl'}
    <ul class="tiny_products">
    {foreach $products as $product}
    <li class="product">{include file='tpl_products_blocks.tpl'}</li>
    {/foreach}    Просмотров: {$product->views}
    </ul>
    {include file='pagination.tpl'}
{else}<h4 style='padding:50px 0;'>Сейчас здесь нет предложений<br />Попробуйте зайти позже</h4>{/if}


{literal}
<script>
$(function() {
    // Раскраска строк характеристик
    $("#features li:even").addClass('even');
    // Выбор вариантов
    $('select[name=variant]').change(function() {
        price = $(this).find('option:selected').attr('price');
        compare_price = '';
        if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
            compare_price = $(this).find('option:selected').attr('compare_price');
        $(this).find('option:selected').attr('compare_price');
        $(this).closest('form').find('span').html(price);
        $(this).closest('form').find('strike').html(compare_price);
        return false;
    });
});
</script>


<script>window.jQuery || document.write("<script src='jquery-1.7.2.js'>\x3C/script>")</script>
    
    <script src="design/{$settings->theme}/js/jquery.infinitescroll.js"></script>
    
    <script>
    $('.products').infinitescroll({
        navSelector      : ".pagination",
        nextSelector     : ".next_page_link",
        itemSelector     : ".products li",
    });
        </script>


{/literal}
 

 



#13 tsybart

tsybart
  • Пользователь
  • 222 сообщений

Опубликовано 16.02.2014 - 13:41

Поставил. Не работает....

 

<div id="page_title">
    <p><a href="./">Главная</a>
    {if $category}
        {foreach from=$category->path item=cat} » <a class='link_2' href="catalog/{$cat->url}">{$cat->name|escape}</a>{/foreach}
        {if $brand}» <a class='link_2' href="catalog/{$cat->url}/{$brand->url}">{$brand->name|escape}</a>{/if}
    {elseif $brand}» <a class='link_2' href="brands/{$brand->url}">{$brand->name|escape}</a>
    {elseif $keyword}» Поиск
    {/if}
    </p>    
    <h1>
    {if $keyword}Поиск {$keyword|escape}
    {elseif $page}{$page->name|escape}
    {else}{$category->name|escape} {$brand->name|escape} {$keyword|escape}
    {/if}
    </h1>    
</div>


{if $current_page_num==1 && $category->description}<div id="category_description">{if $page->body}<p>{$page->body}</p>{/if}{$category->description}</div>{/if}
{if $brand->description && $current_page_num==1}<div id="category_description"><h2>{$brand->name}</h2>{$brand->description}</div>{/if}
{if $features || $category->brands}
    <div id="features">
    <ul>
    {if $category->brands}
        <li>
        <p class="name">Бренды</p>
        <p class="values">
        <a href="catalog/{$category->url}" class='hover_mouse{if !$brand->id} selected{/if}'>Все</a>
        {foreach name=brands item=b from=$category->brands}
        <a href="catalog/{$category->url}/{$b->url}" class='hover_mouse{if $b->id == $brand->id} selected{/if}' data-brand="{$b->id}">{$b->name|escape}</a>
        {/foreach}
        </p>
        </li>
    {/if}


    {if $features}
        {foreach $features as $f}
        <li>
        <p class="name" data-feature="{$f->id}">{$f->name}:</p>
        <p class="values">
        <a href="{url params=[$f->id=>null, page=>null]}" class='hover_mouse{if !$smarty.get.$f@key} selected{/if}'>Все</a>
        {foreach $f->options as $o}<a href="{url params=[$f->id=>$o->value, page=>null]}" class='hover_mouse{if $smarty.get.$f@key == $o->value} selected{/if}'>{$o->value|escape}</a>{/foreach}
        </p>
        </li>
        {/foreach}
    {/if}
    </ul>
    </div>
{/if}


{if $products}
    {include file='pagination.tpl'}
    <ul class="tiny_products">
    {foreach $products as $product}
    <li class="product">{include file='tpl_products_blocks.tpl'}</li>
    {/foreach}    Просмотров: {$product->views}
    </ul>
    {include file='pagination.tpl'}
{else}<h4 style='padding:50px 0;'>Сейчас здесь нет предложений<br />Попробуйте зайти позже</h4>{/if}


{literal}
<script>
$(function() {
    // Раскраска строк характеристик
    $("#features li:even").addClass('even');
    // Выбор вариантов
    $('select[name=variant]').change(function() {
        price = $(this).find('option:selected').attr('price');
        compare_price = '';
        if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
            compare_price = $(this).find('option:selected').attr('compare_price');
        $(this).find('option:selected').attr('compare_price');
        $(this).closest('form').find('span').html(price);
        $(this).closest('form').find('strike').html(compare_price);
        return false;
    });
});
</script>


<script>window.jQuery || document.write("<script src='jquery-1.7.2.js'>\x3C/script>")</script>
    
    <script src="design/{$settings->theme}/js/jquery.infinitescroll.js"></script>
    
    <script>
    $('.products').infinitescroll({
        navSelector      : ".pagination",
        nextSelector     : ".next_page_link",
        itemSelector     : ".products li",
    });
        </script>


{/literal}
 

 

Попробуйте так:

 

<script>
    $('.tiny_products').infinitescroll({
        navSelector      : ".pagination",
        nextSelector     : ".next_page_link",
        itemSelector     : ".tiny_products li",
    });
        </script>



#14 just_simao

just_simao
  • Пользователь
  • 192 сообщений
  • Дизайн, Верстка
  • Версия CMS:2.x

Опубликовано 16.02.2014 - 18:34

ТС, спасибо большое. Нужна вещь.



#15 eXtatic

eXtatic
  • Пользователь
  • 60 сообщений
  • Откуда:Архангельск

Опубликовано 17.02.2014 - 09:22

По всякому пробовал. Не работает и все тут. Помогите.
Может jQuery не той версии подключена?

 

 

<script>window.jQuery || document.write("<script src='jquery-1.7.2.js'>\x3C/script>")</script>
 

это писать обызательно?



#16 tsybart

tsybart
  • Пользователь
  • 222 сообщений

Опубликовано 17.02.2014 - 12:39

Не нужно. И код 

<script>
    $('.tiny_products').infinitescroll({
        navSelector      : ".pagination",
        nextSelector     : ".next_page_link",
        itemSelector     : ".tiny_products li",
    });
        </script>

в конец файла products.tpl



#17 Reni

Reni
  • Пользователь
  • 67 сообщений
  • Версия CMS:2.x
  • Откуда:Санкт-Петербург

Опубликовано 19.02.2014 - 22:14

А чем предложенный вариант по функционалу отличается от увеличения количества отображаемых товаров на странице? 

Прикрепленный файл  kolvo.JPG   20,87К   107 раз скачано

Поставил 1000 и вот тебе бесконечная прокрутка.



#18 eXtatic

eXtatic
  • Пользователь
  • 60 сообщений
  • Откуда:Архангельск

Опубликовано 20.02.2014 - 09:22

Этот вариант понемногу подгружает) А 1000 товаров на медленных соединениях будет долго грузиться.
К слову...у меня так и не работает. Как только не извращался...



#19 Romalibert

Romalibert
  • Пользователь
  • 82 сообщений
  • Дизайн, Программирование, Заказчик
  • Версия CMS:2.x
  • Откуда:Москва

Опубликовано 20.02.2014 - 12:54

Этот вариант понемногу подгружает) А 1000 товаров на медленных соединениях будет долго грузиться.
К слову...у меня так и не работает. Как только не извращался...

открой отладочную консоль и посмотри все ли селекторы у тебя правильно в скрипте указаны и всё-ли отрабатывается



#20 eXtatic

eXtatic
  • Пользователь
  • 60 сообщений
  • Откуда:Архангельск

Опубликовано 20.02.2014 - 15:05

открой отладочную консоль и посмотри все ли селекторы у тебя правильно в скрипте указаны и всё-ли отрабатывается

Знать бы еще как её открыть)







Также с меткой «прокрутка, товары, список товаров, бесконечная прокрутка»

0 пользователей читают эту тему

0 пользователей, 0 гостей, 0 скрытых