Скрипт постраничной навигации на jQuery для Website X5

Перейти к контенту

Главное меню:

Статьи
 
Скрипт постраничной навигации на jQuery для Website X5
Все статьи → Websitex5CMS    Websitex5    
Скрипт постраничной навигации на jQuery для Website X5
фото

 В этом скрипте я объединил два  jQuery плагина: один из них разбивает контент длинного блока на страницы (по заданной высоте в px), другой - формирует строку навигации. Стиль строки навигации может быть выбран из трех вариантов или создан пользовательский путем внесения изменений в файл css.

Вот эти три стиля.

 

Навигационная строка пагинатора

 

 

После установки скрипта получится такой вид страницы интернет-магазина

 

Страница интернет-магазина WebsiteX5

 

Итак
1. Создаем проект в программе WebsiteX5.
2. В "Расширенные настройки корзина" Импортируем демо файл cart_z.csv с длинным списком товаров.     cart_z.csv.zip 
3. На страницу сайта ставим объект "Каталог товаров", в нем отмечаем галочкой Категория1 - будут отображены все товары из демо-списка.
4. Делаем настройки внешнего вида каталога и шаблона сайта - при необходимости и на свой вкус.
5. На той же странице добавляем объект "HTML-код" - там будет строка навигации.  Высоту этого объекта лучше задать в пределах от 0 до 70.

 

Блоки на странице

 

 

вставляем в него код html  (скопировать из файла ) :

HTML код

 

 

на вкладку "экспертcss-код" этого же объекта ставим такой код  (скопировать из файла ):

css-код

Здесь  #imCell_1, #imCellStyle_1  - это идентификаторы блока, в котором находится каталог товаров. Номер (в моем случае 1) вы должны уточнить, просмотрев исходный код страницы вашего сайта.

 

6.  Файл css    добавляем в папку style           style/simplePagination.css   (в этом файле содержатся три стиля строки навигации, здесь же можно дописать собственный стиль)

Файл плагина  добавляем в папку res       res/jquery.simplePagination.js       (плагин собран и адаптирован мной из двух jQuery плагинов, ссылка на которые будет ниже)

Файлы эти можно найти в архиве Preview.zip     Preview.zip 

 

7.  В "Свойствах страницы" на вкладке "Эксперт" "Перед закрывающим тегом Head" вставляем такой код для инициализации скрипта  (взять из файла)

 

Код инициализации скрипта пагинатора

 

Делаем настройки в этом  коде  

- Первая часть настроек  (функция разбиения на страницы) содержит только один пункт:
 height: 2200   - это высота страниц, на которые плагин будет разбивать вашу страницу  каталога товара


- Вторая часть настроек (функция формирования строки навигации) может быть довольно обширной:

 prevText: 'Пред',    - - это текст кнопки перехода на предыдущую страницу
 nextText: 'След',    - - это текст кнопки перехода на следующую страницу
 cssStyle: 'compact-theme'   - - это стиль строки навигации (здесь можно выбрать один из трех стилей   'compact-theme'  или  'dark-theme'  или  'light-theme'  или собственный стиль, который вы добавите в файл  style/simplePagination.css  )

Здесь же во второй части при желании можно дописать еще настройки, например:


displayedPages: 5,               -- Сколько будет видимых кнопок с номерами страниц.

edges: 2,                              -- Сколько видимых кнопок в конце и вначале пагинации.

currentPage: 1,              --        Какую страницу выделить первоначально после загрузки.

labelMap:                        -- Здесь может быть задан массив из текстовых меток, которые заменят номера страниц.

selectOnClick: true,               -- Установите значение false , если вы не хотите, чтобы кнопка выделялась после клика.

Есть еще несколько специфичных настроек для продвинутых.


Файл проекта (Evo 11)  TestPaginatorShop11.iwzip.zip   

 

Этот скрипт постраничной навигации на jQuery для программы WebsiteX5 можно использовать не только на странице интернет-магазина, но и , например, на странице с длинным текстовым блоком. 
Вот этот селектор [id ^= "imProductList"] в коде инициализации скрипта определяет блок, который надо разбивать на страницы. (http://jquery-docs.ru/selectors/)

 


Для подготовки этого урока использованы публикации 
  http://flaviusmatis.github.io/
  http://ruseller.com/
  http://forum.websitexs.ru/


 

 

 

 


<<пред.   след.>>

Просмотров 3278    Добавить комментарий  (5)

26.11.2016 13:14  Алексей
Добрый день . У меня WebSite X5 Professional 10 проблема такая же как у Александра в блоке пустое место.
23.07.2016 11:20  Рустам Гаджилов
Брат ты гений! Все работает как часы. МОЛОДЕЦ! Давно скал этот код и как их вставить и тут выручаешь с этим.
06.04.2016 17:16  Дмитрий
Низкий поклон и уважение автору! Все шикарно работает :)
02.04.2016 08:55  Александр
Спасибо за помощь!
01.04.2016 17:56  Александр
Спасибо за статью! У меня две лицензионные версии WebSite X5 Professional 11 и 12. Делаю сайты исключительно для своей работы. Данный скрип работает только в 11-й версии, а вот в 12-й не корректно. Попытаюсь обрисовать проблемку – (12-я) при выводе странице в браузере остается большое пустое пространство между каталогом товаров и нижнем меню страницы. Если выбрать в корзине только первые 12 товаров, согласно скрипту $('[id^=imProductList"]').MyPagination({
height: 2200});, то данное расстояние пропадает. Этот скрипт делит страницу по высоте, чем больше добавлять товаров, тем больше расстояние. То есть получается 2200 показывает каталог, а 2200+2200 и т.д. это пустое пространство до меню. Я извиняюсь, может не совсем корректно обрисовал.

Админ:
Здравствуйте, Александр!
Для 12 версии надо проправить строку css - дописать !important
#imCell_1, #imCellStyle_1 {min-height:400px !important}


 
 
Мобильная версия
Назад к содержимому | Назад к главному меню