Romalibert Опубликовано 19 ноября, 2013 Жалоба Поделиться Опубликовано 19 ноября, 2013 Добрый день, хочу поделиться несложной реализацией бесконечной прокрутки, для этого нужно добавить скрипт в папку 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 Опубликовано 19 ноября, 2013 Жалоба Поделиться Опубликовано 19 ноября, 2013 хм, попробую потом на проекте каком нибудь, спасибо Цитата Ссылка на сообщение Поделиться на другие сайты
Rash Опубликовано 19 ноября, 2013 Жалоба Поделиться Опубликовано 19 ноября, 2013 Спасибо, когда то давно была надобность у кого-то в этом Цитата Ссылка на сообщение Поделиться на другие сайты
vidicar Опубликовано 19 ноября, 2013 Жалоба Поделиться Опубликовано 19 ноября, 2013 А может кто-то за дополнительную плату мне сделать такое?))У самих не получается чейт. Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 19 ноября, 2013 Жалоба Поделиться Опубликовано 19 ноября, 2013 а вот интересно как поисковики отреагирую на новость то что нету пагинации? прошу прощения, думал надо оба кода удалить Цитата Ссылка на сообщение Поделиться на другие сайты
Romalibert Опубликовано 21 ноября, 2013 Автор Жалоба Поделиться Опубликовано 21 ноября, 2013 Решение вроде рабочее, отслеживал путешествия роботов через метрики и через 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 -> *.*.*.*:8011/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 -> *.*.*.*:8011/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), небольшой процент от посетителей с айпадами сёрфили сайт пагинацией.По поводу юзабилити, после внедрения кол-во просмотренных страниц сократилось вдвое(оно и понятно почему), конверсии, глубина просмотра, кол-во отказов осталось на среднестатистических для этого месяца показателях, вобщем всё норм, можно запиливать в продакшн. Цитата Ссылка на сообщение Поделиться на другие сайты
chubr Опубликовано 30 ноября, 2013 Жалоба Поделиться Опубликовано 30 ноября, 2013 хм, не получилось. Скрипт подключил, а вот пингинация не заменилась как я понимаю, скрипт надо вставить в index_content.tplа {include file='pagination.tpl'} надо убрать сверху в products.tpl — но у меня эта строчка есть только снизувсе верно? или что я делаю не так? Цитата Ссылка на сообщение Поделиться на другие сайты
tsybart Опубликовано 11 февраля, 2014 Жалоба Поделиться Опубликовано 11 февраля, 2014 Версия 2.1.5Не заработало Цитата Ссылка на сообщение Поделиться на другие сайты
Romalibert Опубликовано 11 февраля, 2014 Автор Жалоба Поделиться Опубликовано 11 февраля, 2014 хм, не получилось. Скрипт подключил, а вот пингинация не заменилась как я понимаю, скрипт надо вставить в index_content.tplа {include file='pagination.tpl'} надо убрать сверху в products.tpl — но у меня эта строчка есть только снизувсе верно? или что я делаю не так?ссылку в лс скинь, посмотрю=) Цитата Ссылка на сообщение Поделиться на другие сайты
eXtatic Опубликовано 12 февраля, 2014 Жалоба Поделиться Опубликовано 12 февраля, 2014 Понять не могу куда код воткнуть. Шаблон ситимаркет. Цитата Ссылка на сообщение Поделиться на другие сайты
Romalibert Опубликовано 12 февраля, 2014 Автор Жалоба Поделиться Опубликовано 12 февраля, 2014 Понять не могу куда код воткнуть. Шаблон ситимаркет.код в products.tpl в самый низ Цитата Ссылка на сообщение Поделиться на другие сайты
eXtatic Опубликовано 12 февраля, 2014 Жалоба Поделиться Опубликовано 12 февраля, 2014 Поставил. Не работает.... <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 Опубликовано 16 февраля, 2014 Жалоба Поделиться Опубликовано 16 февраля, 2014 Поставил. Не работает.... <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> Цитата Ссылка на сообщение Поделиться на другие сайты
just_simao Опубликовано 16 февраля, 2014 Жалоба Поделиться Опубликовано 16 февраля, 2014 ТС, спасибо большое. Нужна вещь. Цитата Ссылка на сообщение Поделиться на другие сайты
eXtatic Опубликовано 17 февраля, 2014 Жалоба Поделиться Опубликовано 17 февраля, 2014 По всякому пробовал. Не работает и все тут. Помогите.Может jQuery не той версии подключена? <script>window.jQuery || document.write("<script src='jquery-1.7.2.js'>\x3C/script>")</script> это писать обызательно? Цитата Ссылка на сообщение Поделиться на другие сайты
tsybart Опубликовано 17 февраля, 2014 Жалоба Поделиться Опубликовано 17 февраля, 2014 Не нужно. И код <script> $('.tiny_products').infinitescroll({ navSelector : ".pagination", nextSelector : ".next_page_link", itemSelector : ".tiny_products li", }); </script> в конец файла products.tpl Цитата Ссылка на сообщение Поделиться на другие сайты
Reni Опубликовано 19 февраля, 2014 Жалоба Поделиться Опубликовано 19 февраля, 2014 А чем предложенный вариант по функционалу отличается от увеличения количества отображаемых товаров на странице? Поставил 1000 и вот тебе бесконечная прокрутка. Цитата Ссылка на сообщение Поделиться на другие сайты
eXtatic Опубликовано 20 февраля, 2014 Жалоба Поделиться Опубликовано 20 февраля, 2014 Этот вариант понемногу подгружает) А 1000 товаров на медленных соединениях будет долго грузиться.К слову...у меня так и не работает. Как только не извращался... Цитата Ссылка на сообщение Поделиться на другие сайты
Romalibert Опубликовано 20 февраля, 2014 Автор Жалоба Поделиться Опубликовано 20 февраля, 2014 Этот вариант понемногу подгружает) А 1000 товаров на медленных соединениях будет долго грузиться.К слову...у меня так и не работает. Как только не извращался...открой отладочную консоль и посмотри все ли селекторы у тебя правильно в скрипте указаны и всё-ли отрабатывается Цитата Ссылка на сообщение Поделиться на другие сайты
eXtatic Опубликовано 20 февраля, 2014 Жалоба Поделиться Опубликовано 20 февраля, 2014 открой отладочную консоль и посмотри все ли селекторы у тебя правильно в скрипте указаны и всё-ли отрабатываетсяЗнать бы еще как её открыть) Цитата Ссылка на сообщение Поделиться на другие сайты
Romalibert Опубликовано 20 февраля, 2014 Автор Жалоба Поделиться Опубликовано 20 февраля, 2014 Знать бы еще как её открыть)установи браузер firefox, установи дополнение firebug и там всё есть, потом погугли что такое селекторы и потестируй скрипт в отладочной консоли сначала, если есть какие-то ошибки то увидишь их, дальше гуглишь что за ошибка и решаешь её. Цитата Ссылка на сообщение Поделиться на другие сайты
chubr Опубликовано 21 февраля, 2014 Жалоба Поделиться Опубликовано 21 февраля, 2014 В дефолтной теме все работает как надо, а вот в своей, уже не получается, кто может глянуть, в чем проблема? {$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> Цитата Ссылка на сообщение Поделиться на другие сайты
vzh08 Опубликовано 22 мая, 2014 Жалоба Поделиться Опубликовано 22 мая, 2014 В дефолтной теме все работает как надо, а вот в своей, уже не получается, кто может глянуть, в чем проблема? {$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> Цитата Ссылка на сообщение Поделиться на другие сайты
chubr Опубликовано 22 мая, 2014 Жалоба Поделиться Опубликовано 22 мая, 2014 Замени на <script>$('.product-list').infinitescroll({navSelector : ".pagination",nextSelector : ".next_page_link",itemSelector : ".product-list li",});</script>Не получилось( Цитата Ссылка на сообщение Поделиться на другие сайты
Sid_Vishez Опубликовано 4 июня, 2014 Жалоба Поделиться Опубликовано 4 июня, 2014 Р...., конверсии, глубина просмотра, кол-во отказов осталось на среднестатистических для этого месяца показателях, вобщем всё норм, можно запиливать в продакшн.А странно, почему вот эти параметры остались на среднестатистических уровнях. Т.е. эффект только в юзабилити? Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.