Jump to content
Официальный форум поддержки Simpla

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

Romalibert

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

 Share Followers 3

Recommended Posts

Romalibert

Romalibert

Posted
Posted

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

Link to post
Share on other sites
ps-simpla

ps-simpla

Posted
Posted

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

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

Link to post
Share on other sites
Romalibert

Romalibert

Posted
  • Author
Posted

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

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

Link to post
Share on other sites
  • 2 weeks later...
chubr

chubr

Posted
Posted

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

 

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

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

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

Link to post
Share on other sites
  • 2 months later...
Romalibert

Romalibert

Posted
  • Author
Posted

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

 

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

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

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

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

Link to post
Share on other sites
eXtatic

eXtatic

Posted
Posted

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

 

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

 

Link to post
Share on other sites
tsybart

tsybart

Posted
Posted

 

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

 

<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>
Link to post
Share on other sites
eXtatic

eXtatic

Posted
Posted

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

 

 

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

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

Link to post
Share on other sites
Reni

Reni

Posted
Posted

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

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

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

Link to post
Share on other sites
eXtatic

eXtatic

Posted
Posted

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

Link to post
Share on other sites
Romalibert

Romalibert

Posted
  • Author
Posted

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

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

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

Link to post
Share on other sites
eXtatic

eXtatic

Posted
Posted

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

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

Link to post
Share on other sites
Romalibert

Romalibert

Posted
  • Author
Posted

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

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

Link to post
Share on other sites
chubr

chubr

Posted
Posted

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

 

{$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>
Link to post
Share on other sites
  • 3 months later...
vzh08

vzh08

Posted
Posted

 

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

 

{$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>

Link to post
Share on other sites
  • 2 weeks later...
Sid_Vishez

Sid_Vishez

Posted
Posted

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Followers 3
Go to topic listing
×
×
  • Create New...