Не работает кнопка показать еще битрикс

Механизм «Показать еще» в 1С-Битрикс

Давайте посмотрим как быстро и просто реализовать эту возможность. В качестве примера я возьму статьи в своём блоге, а в итоге получится что-то такое: gif (3.17 Mb).

По шагам:

1. Создадим шаблон компонента постраничной навигации (bitrix:system.pagenavigation);
2. Адаптируем шаблон компонента списка новостей (bitrix:news.list);
3. Разместим на странице и настроим компонент (bitrix:news.list).

1. Создание шаблона постраничной навигации

Я покажу как сделать это вручную, но вы можете просто скопировать один из стандартных шаблонов и заменить в нем код на мой.

Для начала создадим раздел «system.pagenavigation» в шаблоне сайта: /bitrix/templates/[ваш шаблон]/components/bitrix/ или /local/templates/[ваш шаблон]/components/bitrix/. Если раздел уже существует (как в моём случае), новый создавать не надо:)

В нем создадим подраздел с названием нашего шаблона. Назовем его «show_more» (я буду использовать phpStorm, но те же действия можно проделать с помощью других редакторов или админки Битрикс).

Каждый шаблон компонента должен содержать файл template.php, в нем будет храниться оформление. Также для реализации динамической подгрузки нам потребуются файлы script.js и style.css, где мы пропишем соответственно скрипт и стили.

Первым делом возьмемся за template:На первые две строки не обращаем внимание, в рамках этой статьи мы их рассматривать не будем.

Дальше два условия: кнопка загрузки будет показываться когда страниц больше 1 и когда есть следующая страница (текущая + 1).

Кнопка будет представлять собой div с параметром data-url — адресом следующей станицы для подгрузки, классом load_more и надписью «Показать еще».

Если страницы постраничной навигации кончились — покажем надпись «Загружено все».

Следующий файл стилей. В нем будет оформление кнопки. Для примера я использовал простейшее оформление:В сумме со стилями моего сайта, кнопка будет выглядеть как в примере. Вы же оформите её как вам нравится:)

Теперь самое главное — скрипт:Как это работает: после нажатия на кнопку (div) срабатывает событие, отсылающее ajax запрос к указанному в кнопке адресу (атрибут data-id). Мы удаляем старую навигацию (класс .load_more), чтоб она не дублировалась. В полученных данных ищем элементы (в нашем случае класс .news-item, о нем чуть ниже) и уже известную нам навигацию (.load_more).

Последним этапом работы скрипта, в контейнер .news-list (о нем тоже ниже) добавляем полученные элементы и навигацию.

2. Шаблон компонента списка новостей

Создадим папку шаблона компонента (/local/templates/[ваш шаблон]/components/bitrix/news.list/show_more_news/, либо /bitrix/templates/[ваш шаблон]/components/bitrix/news.list/show_more_news/).

Шаблон будет состоять всего из одного файла template.php:Вообще, оформление вы можете использовать какое угодно. Важная деталь: все элементы должны быть обёрнуты в блок с классом news-list, а каждый элемент иметь класс news-item (как в скрипте из второго пункта).

3. Размещение на странице и настройка компонента

На нужной странице размещаем компонент bitrix:news.list и настраиваем на необходимый инфоблок.
В качестве шаблона компонента выбираем show_more_news (если вы все сделали правильно он должен появиться в списке), а в качестве шаблона постраничной навигации — show_more.
И указываем нужное количество новостей на странице. Именно столько элементов будет подгружаться после нажатия на кнопку.

Еще раз пример того, что у меня получилось: gif (3.17 Mb).

Источник

Реализация кнопки «Показать еще» в 1С Битрикс

Некоторые заказчики хотят чтобы в разделе новостей или статей вместо привычной пагинации со списком страниц была кнопка «Показать еще». При нажатии на эту кнопку в дополнение к уже загруженному списку новостей, загружались дополнительные. Как бы снизу добавлялась еще одна страница новостей.

Преимущество такого варианта загрузки новостей перед обычной пагинацией я не вижу, наоборот при большом количестве новостей такой вариант не удобен. Но если заказчик просит, реализуем.

Ниже показано как это реализовать для вывода новостей в cms Битрикс.

Эту кнопку мы будем отображать в шаблоне компонента пагинации.

Для этого необходимо создать новый шаблон постраничной навигации, например с названием more . Создаем его скопировав один из стандартных шаблонов. В итоге наш шаблон должен располагаться по адресу \local\templates.default\components\bitrix\system.pagenavigation\more

Не забудем указать наш шаблон в настройках вывода компонента новостей в разделе «Настройки постраничной навигации».

Поменяем код файла шаблона template.php на наш:

Здесь мы проверяем условие, показа нашей кнопки. Если есть еще элементы для показа, то отображаем кнопку «Показать еще», если элементов нет, то и кнопку отображать не надо.

Кнопку оформляйте в соответствии со своим дизайном, главное оберните дивом с class=»load-more-items» и data-url=» » .

Дальше добавим Ява-скрипт для того, чтобы заработала наша подгрузка элементов:

Я сохранил этот код в файл more.js, положил его в папку JS моего шаблона. Далее необходимо подключить файл more.js к нашим страницам, сделаем это в footer.php текущего шаблона.

Не забывайте, что этот файл нужно обязательно подключить после jQuery иначе не заработает.

Теперь осталось подредактировать шаблон списка новостей.

Например, в моем случае, шаблон списка новостей располагается в комплексном компоненте новости в файле: \local\templates\.default\components\bitrix\news\news\bitrix\news.list\.default\template.php

Для теста я сделал самый простой шаблон. Он выглядит так:

Дальше я буду его оформлять в соответствии с дизайном сайта заказчика, главное не забыть обернуть цикл вывода элементов в див с классом items-list , а каждому элементу в цикле присвоить класс item-content .

И не забудьте внизу подключить вывод навигации:

Все должно заработать.

Если не работает, проверьте подключен ли jQuery, все ли верно в настройках вывода компонента Новости.

Источник

Механизм «Показать еще» в Битрикс

Давайте посмотрим как быстро и просто реализовать эту возможность. В качестве примера я возьму статьи в своём блоге, а в итоге получится что-то такое: gif (3.17 Mb) .

• Создадим шаблон компонента постраничной навигации (bitrix:system.pagenavigation);
• Адаптируем шаблон компонента списка новостей (bitrix:news.list);
• Разместим на странице и настроим компонент (bitrix:news.list).

1. Создание шаблона постраничной навигации

Я покажу как сделать это вручную, но вы можете просто скопировать один из стандартных шаблонов и заменить в нем код на мой.

Для начала создадим раздел «system.pagenavigation» в шаблоне сайта: /bitrix/templates/[ ваш шаблон ]/components/bitrix/ или /local/templates/[ ваш шаблон ]/components/bitrix/. Если раздел уже существует (как в моём случае), новый создавать не надо:)

В нем создадим подраздел с названием нашего шаблона. Назовем его «show_more» (я буду использовать phpStorm, но те же действия можно проделать с помощью других редакторов или админки Битрикс).

Каждый шаблон компонента должен содержать файл template.php, в нем будет храниться оформление. Также для реализации динамической подгрузки нам потребуются файлы script.js и style.css , где мы пропишем соответственно скрипт и стили.

Первым делом возьмемся за template:

if (! defined («B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!== true ) die ();
$this->createFrame()-> begin («Загрузка навигации»);
?>

if ($arResult[«NavPageCount»] > 1):?>

На первые две строки не обращаем внимание, в рамках этой статьи мы их рассматривать не будем.

Дальше два условия: кнопка загрузки будет показываться когда страниц больше 1 и когда есть следующая страница (текущая + 1).

Кнопка будет представлять собой div с параметром data-url — адресом следующей станицы для подгрузки, классом load_more и надписью «Показать еще».

Если страницы постраничной навигации кончились — покажем надпись «Загружено все».

Следующий файл стилей. В нем будет оформление кнопки. Для примера я использовал простейшее оформление:

.load_more <
margin: 10px;
padding: 10px;
border: 1px solid #ddd;
cursor: pointer;
text-align: center;
>

В сумме со стилями моего сайта, кнопка будет выглядеть как в примере. Вы же оформите её как вам нравится:)

Теперь самое главное — скрипт:

$(document).on(‘click’, ‘.load_more’, function ()<

var targetContainer = $(‘.news-list’), // Контейнер, в котором хранятся элементы
url = $(‘.load_more’).attr(‘data-url’); // URL, из которого будем брать элементы

if (url !== undefined ) <
$.ajax( <
type: ‘GET’,
url: url,
dataType: ‘html’,
success: function (data)<

// Удаляем старую навигацию
$(‘.load_more’). remove ();

var elements = $(data).find(‘.news-item’), // Ищем элементы
pagination = $(data).find(‘.load_more’);// Ищем навигацию

targetContainer.append(elements); // Добавляем посты в конец контейнера
targetContainer.append(pagination); // добавляем навигацию следом

Как это работает: после нажатия на кнопку (div) срабатывает событие, отсылающее ajax запрос к указанному в кнопке адресу (атрибут data-id). Мы удаляем старую навигацию (класс .load_more), чтоб она не дублировалась. В полученных данных ищем элементы (в нашем случае класс .news-item, о нем чуть ниже) и уже известную нам навигацию (.load_more).

Последним этапом работы скрипта, в контейнер .news-list (о нем тоже ниже) добавляем полученные элементы и навигацию.

2. Шаблон компонента списка новостей

Создадим папку шаблона компонента (/local/templates/[ ваш шаблон ]/components/bitrix/news.list/show_more_news/, либо /bitrix/templates/[ ваш шаблон ]/components/bitrix/news.list/show_more_news/).

Шаблон будет состоять всего из одного файла template.php:

Вообще, оформление вы можете использовать какое угодно. Важная деталь: все элементы должны быть обёрнуты в блок с классом news-list , а каждый элемент иметь класс news-item (как в скрипте из второго пункта).

3. Размещение на странице и настройка компонента

На нужной странице размещаем компонент bitrix:news.list и настраиваем на необходимый инфоблок.
В качестве шаблона компонента выбираем show_more_news (если вы все сделали правильно он должен появиться в списке), а в качестве шаблона постраничной навигации — show_more .

И указываем нужное количество новостей на странице. Именно столько элементов будет подгружаться после нажатия на кнопку.

Еще раз пример того, что у меня получилось: gif (3.17 Mb) .

Источник

Почему не работают кнопки купить на Битрикс?

Произвели некоторые модификации по верстке сайта, сдали, все работало корректно. Через какое то время клиент пишет что не работают кнопки изменения количества товара и добавления в корзину. Так оно и получилось. но почему то кнопка добавления товара работает только в каталоге и при отображении карточек в виде блока, а также в самой деталке товара. На вопрос какие работы производили, сказали что только тесты стандартные от битрикса.

Проверил data-entity у элементов, id классы вроде все ок. По скриптам пробежался вроде все имеются Куда дальше глядеть хз. Есть варианты?

p.s. заметил что на кнопках нет событий изменения количества и покупки, которые должны навеситься при в самом начале.

• Вопрос задан более двух лет назад
• 316 просмотров

В этом скрипте /bitrix/templates/report/components/bitrix/catalog.item/bootstrap_v4_list/script.js
есть такой код:

В нем выполняется проверка объекта картинки. Если его нет то this.errorCode = -2;

А дальше по коду проверяется отсутствие ошибок this.errorCode === 0:

Так как ошибка есть, то обработчик события клика на кнопку «Купить», не привязывается.

Источник

Как сделать подгрузку товаров в каталоге по средствам кнопки «Загрузить еще»

Добрый вечер.
Прошу вашей помощи. Скажите как возможно реализовать подгрузку товаров при нажатии на кнопку «Загрузить еще».
В магазине должна получится комбинированная постраничная навигация. А именно есть кнопка «Загрузить еще» а есть пониже постраничные переходы.

Перерыл весь интернет, но дельных советов что то не нашел. И похожей реализации тоже. Возможно ли это реализовать средствами битрикса?

Буду благодарен за наводку в каком направлении копать и т.п.

Изучить как работает тут:

Цитата
Виталий Сентяков написал: Изучить как работает тут:

http://marketplace.1c-bitrix.ru/solutions/yenisite.bitronic2pro/ — решение в marketplace
http://estore.demo.likee.ru/catalog/minimoyki/ — демонстрация

Приветствую. По поводу комбинированной навигации что вы описали (если я правильно понял) — вряд ли подскажу.

Есть пример такой из личных запасов) Прикрепил архив.

Если коротко, то:

1. Создать папку system.pagenavigation в каталоге /bitrix/templates/*имя шаблона*/components/bitrix/
2. Распаковать папку с пагинацией в созданный каталог.
3. Подключить именно этот шаблон постраницной навигации в настройках компонента.
4. Включить только режим ajax без всяких подгрузок стилей, прокруток к началу компонента и эмуляции навигации окна браузера

По умолчанию шаблон будет подгружать элементы по мере прокрутки страницы.
Но можно изменить строку #33 $(window).scroll на $(«.show-more»).click и в html коде добавить элемент с классом
show-more. Соответственно при клике на этом элементе будут подгружаться новые элементы.

Источник