Пагинация Товаров На Странице Каталога
#1
Отправлено 03 Апрель 2012 - 17:18
#3
Отправлено 05 Апрель 2012 - 13:03
Gooos (03 Апрель 2012 - 17:18) писал:
Куда подевалась ссылка в пагинации на первую страницу, при выборе 5-ой?
pagination.jpg
pagination2.jpg
<!-- Блок возможности изменения лимитов выдачи --> <div class="pager"> <p class="amount"> <strong>{GOODS_PAGES_RESULTS} товар{GOODS_PAGES_RESULTS | gen_word_end("","а","ов")} в категории</strong> </p> <div class="limiter"> <label>Показывать по:</label> <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> <label>результатов</label> </div> <!-- Страницы --> {% IF show_pages %} <div class="pages"> <strong>Страница:</strong> <ol> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <li> <a class="previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> <img src="{ASSETS_IMAGES_PATH}i_pager-prev.gif" alt="Предыдущая" /> </a> </li> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <li class="current">{goods_pages.PAGE}</li> {% ELSE %} <li><a href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a></li> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <li> <a class="next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> <img src="{ASSETS_IMAGES_PATH}i_pager-next.gif" alt="Следующая" /> </a> </li> {% ENDIF %} </ol> </div> {% ENDIF %} <!-- /Страницы --> </div> <!-- /Блок возможности изменения лимитов выдачи -->
Получится следующий результат:
В тему пагинации думаю Вам будет интересна ещё и такая возможность, переключения страниц через клавиатуру. Для этого достаточно вставить следующий код в шаблоны "Товары", "Поиск", "Просмотр акции":
<div class="arrow-helper"> {% IF show_pages %} {% IF GOODS_PAGES_SHOW_PREVIOUS %} <a class="previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница">←</a> {% ENDIF %} <span title="Используйте клавиатуру для большего удобства при просмотре товаров размещенных в {% IF CATEGORY_NAME=Каталог товаров %}каталоге электронных сигарет{% ELSE %}категории «{CATEGORY_NAME}»{% ENDIF %}">Ctrl</span> {% IF GOODS_PAGES_SHOW_NEXT %} <a class="next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница">→</a> {% ENDIF %} {% ENDIF %} </div>
и добавить вот такой код в файле main.js, в самом самом конце этого файла:
$(document).ready(function(){ // Навигация стрелочками по страницам со списками document.onkeyup = NavigateThrough; function NavigateThrough (event) { if (!document.getElementById) return; if (window.event) event = window.event; if (event.ctrlKey) { var link = null; switch (event.keyCode ? event.keyCode : event.which ? event.which : null) { case 0x25: link = $('.previous_page')[0]; break; case 0x27: link = $('.next_page')[0]; break; } if (link && link.href) document.location = link.href; } } });
Появится и заработает переключалка страниц, которая выглядит вот так:
P.S. Для понимания какие переменные есть в шаблоне воспользуйтесь вставкой переменной
{print_vars}для понимания какая информация есть в массивах,
{print_arrays}
#4
Отправлено 06 Апрель 2012 - 13:04
Смешно конечно показывать пример, но всё-же:
Страницы: <<< Первая ... 6 7 8 9 10 11 12 ... Последняя >>>
support (05 Апрель 2012 - 13:03) писал:
{print_vars}для понимания какая информация есть в массивах,
{print_arrays}
#5
Отправлено 13 Апрель 2012 - 08:53
<!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи --> <form action=""> <table class="goodsListingTopNavigation"> <tr> <td> <!-- Список фильтров, которые сейчас действуют на результаты поиска --> {% FOR goods_filters %} <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" /> {% ENDFOR %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %} </td> <td class="alignCenter viewSelector"> <!-- Переключатель режима просмотра --> {% IF GOODS_VIEW_TYPE=2 %} <a href="?goods_view_type=1" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong> {% ELSE %} <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> <a href="?goods_view_type=2" title="Отображать список товаров в виде списка">Список</a> {% ENDIF %} <!-- /Переключатель режима просмотра --> </td> <td class="alignRight"> </td> </tr> </table> </form> <!-- END Блок выбора параметра по которому производится сортировка списка товаров --> {% ENDIF %} <!-- END Фильтры показываются только если есть товары в категории --> <!-- Goods list --> {% IF goods_empty %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.jpg" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ELSE %} <h3>Нет товаров в категории</h3> {% ENDIF %} <!-- Если производили фильтрацию товаров в категории --> {% ELSE %} <h3>Нет товаров для выбранных условий</h3> {% ENDIF %} {% ELSE %} {% IF GOODS_VIEW_TYPE=2 %} <!-- Список товаров. Список --> {% FOR goods %} <div class="listing"> <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.jpg" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div> <div class="contm"> <h3><a href="{goods.URL}">{goods.NAME}</a></h3> <p> {goods.DESCRIPTION_SHORT} </p> <p> Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br /> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </p> <p> <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a> </p> </div> <div class="clr"></div> </div> {% ENDFOR goods %} <!-- /Список товаров. Список --> {% ELSE %} <!-- Список товаров. Таблица --> <table> {% FOR goods %} <td class="goodsListItem"> {%IF goods.MAX_DISCOUNT_EXPIRED_AT%} <div style="position:absolute;right:0;top:0;background:url({ASSETS_IMAGES_PATH}birka.jpg);width:50px;height:50px;">{goods.MAX_DISCOUNT}</div> {%ENDIF%} <div class="goodsListItemBlock withBorder cornerAll"> <table class="goodsListItemImage"> <tr> <td> <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a> </td> </tr> </table> <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3> <div class="goodsListItemPriceNew"> <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a> </div> <div class="goodsListItemPriceOld"> {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a> {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %} <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a> {% ENDIF %} </div> </div> </td> {goods.index | is_divided("3","</tr><tr>","")} {% ENDFOR goods %} </table> <!-- /Список товаров. Таблица --> {% ENDIF %} {% ENDIF %} что надо заменить на: <!-- Блок возможности изменения лимитов выдачи --> <div class="pager"> <p class="amount"> <strong>{GOODS_PAGES_RESULTS} товар{GOODS_PAGES_RESULTS | gen_word_end("","а","ов")} в категории</strong> </p> <div class="limiter"> <label>Показывать по:</label> <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> <label>результатов</label> </div> <!-- Страницы --> {% IF show_pages %} <div class="pages"> <strong>Страница:</strong> <ol> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <li> <a class="previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> <img src="{ASSETS_IMAGES_PATH}i_pager-prev.gif" alt="Предыдущая" /> </a> </li> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <li class="current">{goods_pages.PAGE}</li> {% ELSE %} <li><a href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a></li> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <li> <a class="next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> <img src="{ASSETS_IMAGES_PATH}i_pager-next.gif" alt="Следующая" /> </a> </li> {% ENDIF %} </ol> </div> {% ENDIF %} <!-- /Страницы --> </div> <!-- /Блок возможности изменения лимитов выдачи -->
#6
Отправлено 17 Апрель 2012 - 04:36
Что, куда и вместо чего вставить?
#7
Отправлено 17 Апрель 2012 - 19:47
<!-- Страницы --> {% IF show_pages %} <div class="pages"> <strong>Страница:</strong> <ol> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <li> <a class="previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> <img src="{ASSETS_IMAGES_PATH}i_pager-prev.gif" alt="Предыдущая" /> </a> </li> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <li class="current">{goods_pages.PAGE}</li> {% ELSE %} <li><a href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a></li> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <li> <a class="next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> <img src="{ASSETS_IMAGES_PATH}i_pager-next.gif" alt="Следующая" /> </a> </li> {% ENDIF %} </ol> </div> {% ENDIF %} <!-- /Страницы -->
А так же обновить файл main.js для клавиатурной навигации.
#8
Отправлено 18 Апрель 2012 - 05:03
Vaccina (17 Апрель 2012 - 19:47) писал:
<!-- Страницы --> {% IF show_pages %} <div class="pages"> <strong>Страница:</strong> <ol> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <li> <a class="previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> <img src="{ASSETS_IMAGES_PATH}i_pager-prev.gif" alt="Предыдущая" /> </a> </li> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <li class="current">{goods_pages.PAGE}</li> {% ELSE %} <li><a href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a></li> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <li> <a class="next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> <img src="{ASSETS_IMAGES_PATH}i_pager-next.gif" alt="Следующая" /> </a> </li> {% ENDIF %} </ol> </div> {% ENDIF %} <!-- /Страницы -->
А так же обновить файл main.js для клавиатурной навигации.
что конкретно заменить этим блоком, если я его в своем коде не нашла вообще?
и что значит обновить файл main.js для клавиатурной навигации? как это сделать?
#9
Отправлено 18 Апрель 2012 - 21:16
Вы привели свой код, и в нем можно найти блоки отмеченные комментарием <!-- Страницы --> <!-- /Страницы -->
Это и есть тот блок который необходимо изменить.
Цитата
Это описано в сообщении http://forum.storela...dpost__p__18803
Цитата
#10
Отправлено 19 Апрель 2012 - 04:01
#11
Отправлено 19 Апрель 2012 - 22:05
<!-- Страницы --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страница:</span> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <li> <a class="pp-page previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> Предыдущая </a> </li> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <a class="pp-page next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> Следующая </a> {% ENDIF %} </div> {% ENDIF %} <!-- /Страницы -->
#12
Отправлено 20 Апрель 2012 - 02:33
#13
Отправлено 20 Апрель 2012 - 23:17
Попробуйте следующий измененный код
<!-- Страницы --> {% IF show_pages %} <div class="pagination"> <span class="pp-title">Страница:</span> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <a class="pp-page previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> Предыдущая </a> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <a class="pp-page next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> Следующая </a> {% ENDIF %} </div> {% ENDIF %} <!-- /Страницы -->
#14
Отправлено 21 Апрель 2012 - 07:23
#15
Отправлено 23 Апрель 2012 - 20:49
#16
Отправлено 23 Апрель 2012 - 21:37
Vaccina (23 Апрель 2012 - 20:49) писал:
#17
Отправлено 24 Апрель 2012 - 21:34
Не для темы "Сияние" так как таких классов и стилей там нет.
#18
Отправлено 24 Апрель 2012 - 22:24
Vaccina (24 Апрель 2012 - 21:34) писал:
Не для темы "Сияние" так как таких классов и стилей там нет.
как сделать такую же пагинацию для шаблона сияние?
#19
Отправлено 27 Апрель 2012 - 01:46
<!-- Страницы --> {% IF show_pages %} <div class="pagination"> {% IF GOODS_PAGES_SHOW_PREVIOUS %} <a class="pp-page previous_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_PREVIOUS}" title="Предыдущая страница (← + Ctrl)"> ← </a> {% ENDIF %} {% FOR goods_pages %} {% IF goods_pages.CURRENT %} <span class="pp-page pp-current">{goods_pages.PAGE}</span> {% ELSE %} <a class="pp-page" href="{GOODS_PAGINATE_URL | url_amp}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a> {% ENDIF %} {% ENDFOR %} {% IF GOODS_PAGES_SHOW_NEXT %} <a class="pp-page next_page" href="{GOODS_PAGINATE_URL | url_amp}&page={GOODS_PAGES_NEXT}" title="Следующая страница (Ctrl + →)"> → </a> {% ENDIF %} </div> {% ENDIF %} <!-- /Страницы -->
далее в файле стилей необходимо будет внести изменения - убрать стандартные стили.
Найти
.pagination .pp-current { background: none repeat scroll 0 0 #9D4881; border: 1px solid #7E3A68; color: #FFFFFF; margin-right: 4px; padding: 3px 6px; }
заменить на
.pagination .pp-current { color: #000000; }
далее найти
.pagination a { background: none repeat scroll 0 0 #EBF5FE; border: 1px solid #ABE3FE; color: #003366; margin-right: 4px; padding: 3px 6px; text-align: center; text-decoration: none; }
заменить на
.pagination a { color: #000; text-align: center; text-decoration: underline; }
далее
.pagination { color: #666666; display: block; font: 12px Verdana,Geneva,sans-serif; padding: 10px 0; }
заменить на
.pagination { color: #666666; display: block; font: 12px Verdana,Geneva,sans-serif; padding: 10px 0; text-align: center; }
далее найти
.pagination .pp-title { background: none repeat scroll 0 0 #EBF5FE; border: 1px solid #ABE3FE; color: #003366; font-family: Verdana,Geneva,sans-serif; margin-right: 4px; padding: 3px 6px; }
заменить на
.pagination .pp-title { color: red; font-family: Verdana,Geneva,sans-serif; }
далее найти
.pagination a:hover, .pp-paginate a:active { background: none repeat scroll 0 0 #FFFFCC; border: 1px solid #FFE19B; color: #CC6600; }
заменить на
.pagination a:hover, .pp-paginate a:active { color: #CC6600; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных