Перейти к содержанию
Официальный форум поддержки Simpla

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

Romalibert

Автор Romalibert,
в Готовые решения

 Поделиться Подписчики 3

Рекомендуемые сообщения

Romalibert

Romalibert

Опубликовано
Опубликовано

Добрый день, хочу поделиться несложной реализацией бесконечной прокрутки, для этого нужно добавить скрипт в папку 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/paulirish/infinite-scroll

 

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

 

 

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

jquery.infinitescroll.txt

Ссылка на сообщение
Поделиться на другие сайты
ps-simpla

ps-simpla

Опубликовано
Опубликовано

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

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

Ссылка на сообщение
Поделиться на другие сайты
Romalibert

Romalibert

Опубликовано
  • Автор
Опубликовано

Решение вроде рабочее, отслеживал путешествия роботов через метрики и через 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), небольшой процент от посетителей с айпадами сёрфили сайт пагинацией.

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

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...
chubr

chubr

Опубликовано
Опубликовано

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

 

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

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

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

Ссылка на сообщение
Поделиться на другие сайты
  • 2 месяца спустя...
Romalibert

Romalibert

Опубликовано
  • Автор
Опубликовано

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

 

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

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

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

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

Ссылка на сообщение
Поделиться на другие сайты
eXtatic

eXtatic

Опубликовано
Опубликовано

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

 

<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}
 

 

Ссылка на сообщение
Поделиться на другие сайты
tsybart

tsybart

Опубликовано
Опубликовано

 

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

 

<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>
Ссылка на сообщение
Поделиться на другие сайты
eXtatic

eXtatic

Опубликовано
Опубликовано

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

 

 

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

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

Ссылка на сообщение
Поделиться на другие сайты
tsybart

tsybart

Опубликовано
Опубликовано

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

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

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

Ссылка на сообщение
Поделиться на другие сайты
Reni

Reni

Опубликовано
Опубликовано

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

post-17044-0-58743700-1392837275_thumb.jpg

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

Ссылка на сообщение
Поделиться на другие сайты
eXtatic

eXtatic

Опубликовано
Опубликовано

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

Ссылка на сообщение
Поделиться на другие сайты
Romalibert

Romalibert

Опубликовано
  • Автор
Опубликовано

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

К слову...у меня так и не работает. Как только не извращался...

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

Ссылка на сообщение
Поделиться на другие сайты
eXtatic

eXtatic

Опубликовано
Опубликовано

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

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

Ссылка на сообщение
Поделиться на другие сайты
Romalibert

Romalibert

Опубликовано
  • Автор
Опубликовано

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

установи браузер firefox, установи дополнение firebug и там всё есть, потом погугли что такое селекторы и потестируй скрипт в отладочной консоли сначала, если есть какие-то ошибки то увидишь их, дальше гуглишь что за ошибка и решаешь её.

Ссылка на сообщение
Поделиться на другие сайты
chubr

chubr

Опубликовано
Опубликовано

В дефолтной теме все работает как надо, а вот в своей, уже не получается, кто может глянуть, в чем проблема?

 

{$wrapper = 'index_content.tpl' scope=parent}
{* Список товаров *}

{$wrapper = 'index_content.tpl' scope=parent}
{* Страница товара *}

<div id="leader" class="container">

 <div class="margin clearfix">
			
			{if $keyword}
			<h1 class="align-center">Поиск {$keyword|escape}</h1>
			{elseif $page}
			<div class="title">
			<h1 class="align-center">{$page->name|escape}</h1>
			</div>
			{else}
			<h1 class="align-center">{$category->name|escape} {$brand->name|escape} {$keyword|escape}</h1>
			{/if}
			<!--{if $current_page_num==1}<div class="wpsc_category_details"><span class="category-description">{* Описание категории *}{$category->description}</span></div>{/if}-->


        </div>
    </div>
	
	{* Основа контента*}
	<div id="content-wrapper">
	<div id="checkout" class="row container">
		<div class="margin">



<!--Каталог товаров-->
{if $products}

{* Сортировка *}
{if $products|count>0}
<table class="filters">
<td><th>
<div class="sort">
	сперва: 
	<a {if $sort=='position'} class="selected"{/if} href="{url sort=position page=null}">новинки</a>, <a {if $sort=='name'}     class="selected"{/if} href="{url sort=name page=null}">названию</a>, <a {if $sort=='price'}    class="selected"{/if} href="{url sort=price page=null}">самое дешёвое</a>
</div>
</td></th>
</table>
{/if}

<!-- Список товаров-->
 <ul class="product-list">
	<div class='row clearfix'>
			{foreach $products as $product}
			<li class="product-listing yes-image" style="width:196px">      	
            <div class="padding">
												

			<!-- Выбор варианта товара -->
			<form class="variants" action="/cart">
				  
				    <div class="product-meta" style="width:196px;height:196px" >
						{if $product->image}
                        <div class="imagecol" style="margin:0;padding:0;text-align:center;width:196px;height:196px;line-height:196px;">
							<a href="products/{$product->url}">
								<img class="product_image" alt="{$product->name|escape}" src="{$product->image->filename|resize:196:196}" style="margin:0 auto;width:auto;"/>
                            </a>
                        </div><!--close imagecol-->
						{/if} 
						{if $product->variants|count > 0}						
						<div class="wpsc_product_price ">
						{foreach $product->variants as $v}
							<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} style="display:none;"/>
						{/foreach}
							{if $v->compare_price > 0}<span class="sale-icon">Распродажа!</span>{/if}
							<span class="pricedisplay" {if $v->compare_price > 0}style="color: red!important;"{/if}>{$v->price|convert} {$currency->sign|escape}</span>					
                        </div>
						{else}
						<div class="wpsc_product_price ">
                            <span id="product_price_4682" class="pricedisplay">Нет в наличии</span>					
                        </div>
						{/if}
					</div><!--close product-meta-->
				 
					<div class="producttext productcol">
						<h3 class="prodtitles">
							<a data-product="{$product->id}" class="wpsc_product_title" href="products/{$product->url}">{$product->name|escape}</a>
						</h3>
					</div><!--close producttext-->
			</form>  
						
			</div><!--close padding-->
			</li><!--close product-listing-->
			{/foreach}
	</div>
</ul>


{include file='pagination.tpl'}	
<!-- Список товаров (The End)-->

{else}
Товары не найдены
{/if}	
<!--Каталог товаров (The End)-->

<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     : ".product-list li",
    });
        </script>
Ссылка на сообщение
Поделиться на другие сайты
  • 3 месяца спустя...
vzh08

vzh08

Опубликовано
Опубликовано

 

В дефолтной теме все работает как надо, а вот в своей, уже не получается, кто может глянуть, в чем проблема?

 

{$wrapper = 'index_content.tpl' scope=parent}
{* Список товаров *}

{$wrapper = 'index_content.tpl' scope=parent}
{* Страница товара *}

<div id="leader" class="container">

 <div class="margin clearfix">
			
			{if $keyword}
			<h1 class="align-center">Поиск {$keyword|escape}</h1>
			{elseif $page}
			<div class="title">
			<h1 class="align-center">{$page->name|escape}</h1>
			</div>
			{else}
			<h1 class="align-center">{$category->name|escape} {$brand->name|escape} {$keyword|escape}</h1>
			{/if}
			<!--{if $current_page_num==1}<div class="wpsc_category_details"><span class="category-description">{* Описание категории *}{$category->description}</span></div>{/if}-->


        </div>
    </div>
	
	{* Основа контента*}
	<div id="content-wrapper">
	<div id="checkout" class="row container">
		<div class="margin">



<!--Каталог товаров-->
{if $products}

{* Сортировка *}
{if $products|count>0}
<table class="filters">
<td><th>
<div class="sort">
	сперва: 
	<a {if $sort=='position'} class="selected"{/if} href="{url sort=position page=null}">новинки</a>, <a {if $sort=='name'}     class="selected"{/if} href="{url sort=name page=null}">названию</a>, <a {if $sort=='price'}    class="selected"{/if} href="{url sort=price page=null}">самое дешёвое</a>
</div>
</td></th>
</table>
{/if}

<!-- Список товаров-->
 <ul class="product-list">
	<div class='row clearfix'>
			{foreach $products as $product}
			<li class="product-listing yes-image" style="width:196px">      	
            <div class="padding">
												

			<!-- Выбор варианта товара -->
			<form class="variants" action="/cart">
				  
				    <div class="product-meta" style="width:196px;height:196px" >
						{if $product->image}
                        <div class="imagecol" style="margin:0;padding:0;text-align:center;width:196px;height:196px;line-height:196px;">
							<a href="products/{$product->url}">
								<img class="product_image" alt="{$product->name|escape}" src="{$product->image->filename|resize:196:196}" style="margin:0 auto;width:auto;"/>
                            </a>
                        </div><!--close imagecol-->
						{/if} 
						{if $product->variants|count > 0}						
						<div class="wpsc_product_price ">
						{foreach $product->variants as $v}
							<input id="variants_{$v->id}" name="variant" value="{$v->id}" type="radio" class="variant_radiobutton" {if $v@first}checked{/if} style="display:none;"/>
						{/foreach}
							{if $v->compare_price > 0}<span class="sale-icon">Распродажа!</span>{/if}
							<span class="pricedisplay" {if $v->compare_price > 0}style="color: red!important;"{/if}>{$v->price|convert} {$currency->sign|escape}</span>					
                        </div>
						{else}
						<div class="wpsc_product_price ">
                            <span id="product_price_4682" class="pricedisplay">Нет в наличии</span>					
                        </div>
						{/if}
					</div><!--close product-meta-->
				 
					<div class="producttext productcol">
						<h3 class="prodtitles">
							<a data-product="{$product->id}" class="wpsc_product_title" href="products/{$product->url}">{$product->name|escape}</a>
						</h3>
					</div><!--close producttext-->
			</form>  
						
			</div><!--close padding-->
			</li><!--close product-listing-->
			{/foreach}
	</div>
</ul>


{include file='pagination.tpl'}	
<!-- Список товаров (The End)-->

{else}
Товары не найдены
{/if}	
<!--Каталог товаров (The End)-->

<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     : ".product-list li",
    });
        </script>

Замени на <script>

$('.product-list').infinitescroll({

navSelector : ".pagination",

nextSelector : ".next_page_link",

itemSelector : ".product-list li",

});

</script>

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...
Sid_Vishez

Sid_Vishez

Опубликовано
Опубликовано

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

А странно, почему вот эти параметры остались на среднестатистических уровнях. Т.е. эффект только в юзабилити?

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
 Поделиться
Подписчики 3
Перейти к списку тем
×
×
  • Создать...