Кнопка загрузить еще для модуля PrestaShop 1.5, 1.6

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

Скачать проект
До этого был рассмотрен пример отображения случайных товаров в этом модуле. И даже в новой версии 1.6 модуля “Рекомендуемые товары на главной” разработчики добавили эту функцию в настройках. Но мы остаемся ограничены от добавления большого количества товара из-за экономии пространства на сайте. Итак, рассмотрим добавления плагина loadMoreButton в модуль homefeatured, который позволит разместить максимально большое количество товара на страницу популярные(рекомендуемые) товары.
Пример http://fb7914dx.bget.ru/
featured

Начнем с версии PrestaShop 1.5
Для работы плагина необходимо разместить шаблоне модуля ссылку на сам плагин jquery.loadMoreButton.js и разместить следующий скрипт

 

Поясню значения.
mycontent- id блока товаров,
items_selector: ‘.list-group li’ (list-group – класс тега ul и li-тег в котором расположены наши товары.)
items_per_page: 4 (цифра 4 количество отображаемых-подгружаемых товаров, здесь можете поставить свое значение)
btn_text: ‘Загрузить еще’ (название кнопки)
btn_cls: ‘btn’ (класс кнопки)
btn_id: ‘load-more-list’ (id подгружаемого контента)
ajaxloader: true (аякс подрузка в положении включено)
Как нам уже известно шаблон модуля homefeatured.tpl для шаблона магазина default находится в дериктории /themes/default/modules/homefeatured/
С ним и будем работать. Не буду выкладывать весь код, посмтреть его можно будет в файлах проекта.
находим строку

и добаляем для тега id=”mycontent” должно получится

зтем находим строку

и добавляем для тега class=”list-group”
получаем

Затем в самом низу шаблона добаляем ссылку на плагин

И ссылку на стили

Соответственно нужно скопировать папки js и css из архива проекта в папку модуля.
Для версии PrestaShop 1.6 настройка будет посложнее. Сложность заключается в том, что мы не будем добалять id и class так как они уже есть
и их нужно только определить. Я пользуюсь инструментом разработчика браузера Google Chrome, с помощью которого и определил эти значения.
id=”homefeatured” и class=”homefeatured”
Открываем файл шаблона модуля из дериктории /themes/default-bootstrap/modules/homefeatured/
и добавляем ссылку на плагин, стили и скрипт

 

Так же добавляем папки css и js из архива проекта и радуемся результатам.
До встречи на webnewbie.ru

Comments (10)

Алексей
24.12.2014 - 04:20 / Ответить

Вышла загвоздка, если в строке “items_per_page: 4,” оставить 4, а в админке в модуле рекомендованных товаров поставить 8(показ товаров на главной странице), то на главной странице показывается 4 товара(при этом если нажимать на кнопку “показать ещё” будет подгружать по 4 штуки). Мне надо на главной показывать 8 товаров и при нажатии на кнопку “показать ещё” загружалось по 4шт. Если в “items_per_page: 4,”(поставить 8 то отображается 8 товаров, но при этом и подгружает по 8). Как сделать чтобы на главной странице отображались 8 товаров и при нажатии на кнопку “показать ещё” загружалось по 4шт?

24.12.2014 - 11:25 / Ответить

Если Вам надо, ищите скрипт подобный этому, но выполняющий ваши капризы.

Анна Игоревна Романова
01.11.2015 - 11:56 / Ответить

привет!
хотела скачать файл, но страница с ним не найдена.

01.11.2015 - 14:52 / Ответить

Обновил ссылку, скачивайте

Анна Игоревна Романова
02.11.2015 - 00:17 / Ответить

спасибо большое, а этот скрипт же можно встроить в каталог?
много изменений нужно?

02.11.2015 - 00:22 / Ответить

По аналогии можно сделать и для каталога

Анна Игоревна Романова
12.11.2015 - 15:58 / Ответить

за сколько сможете сделать по аналогии?

12.11.2015 - 17:16 / Ответить

Если хотите узнать расценку напишите через форму контактов http://webnewbie.ru/contact-us подробное описание работы (техническое задание).

Artur
15.06.2016 - 23:14 / Ответить

Можно ли пример того, как правильно прописать в product-list.tpl prestashop 1.6.1.5

15.06.2016 - 23:40 / Ответить

Вам в помощь бесплатный модуль github.com/vmulot/muinfinitescroll

Leave a Reply