Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Смена вида карточек товаров в catalog.section с иммитацией AJAX

Просмотров: 818

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

Смена вида карточек товаров в catalog.section с иммитацией AJAX

Предположим что у нас используется один шаблон catalog.section но, внутри него, мы хотим преключать режим отображения по одному товару в ряд или по четыре.

За режим отображения отвечает параметр LIST_PRODUCT_ROW_VARIANTS. Конкретно, в случае по одному или четыре товара отвечают условия case=0 и case=3.

Работаем с сессией в 1С-Битрикс

Нам нужно записать в сессию нужный вид отображения и применить для компонента каталога вызываемого в section.php, комплексного шаблона каталога.

Открываем этот файл и добавялем вывод кнопок переключения, в которых параметр data-wiev содержит интересующие нас режимы отображения:

<div class="catalog_sort_panel_view">
  <button data-wiev="[{'VARIANT':'3','BIG_DATA':false}]">
      <i class="fa fa-th"></i>
  </button>
  <button data-wiev="[{'VARIANT':'0','BIG_DATA':false}]">
     <i class="fa fa-list"></i>
  </button>
</div>

Добравляем js скрипт с POST запросом, который отправляет нужный (нажатый/выбранный) параметр в файл /local/ajax/view_catalog.php и при получении ответа перезагружает страницу в том же месте (страница не промотывается вверх)

$('.catalog_sort_panel_view button').click(function () {
var wievVariant = $(this).data('wiev');
$.post('/local/ajax/view_catalog.php',
  {
        LIST_PRODUCT_ROW_VARIANTS: wievVariant,
  }, function (data) {
        location.reload();
  });
});

В файл /local/ajax/view_catalog.php добавляем работу с сессией, и в ключ LIST_PRODUCT_ROW_VARIANTS записываем переданное js скриптом значение.

require_once($_SERVER['DOCUMENT_ROOT'] . "/bitrix/modules/main/include/prolog_before.php");
$session = \Bitrix\Main\Application::getInstance()->getSession();
// Ставим в ключ сессии LIST_PRODUCT_ROW_VARIANTS вид каталога
$session->set('LIST_PRODUCT_ROW_VARIANTS', $_POST['LIST_PRODUCT_ROW_VARIANTS']);
exit();

В вызове bitrix:catalog.section комплексного шаблона каталога, указываем что параметр PRODUCT_ROW_VARIANTS должен быть применен из ключа сессии LIST_PRODUCT_ROW_VARIANTS. Перед этим нужно задать значение по умолчанию, иначе параметр будет пустым (пока пользователь не выберет нужный ему вид)


$session = \Bitrix\Main\Application::getInstance()->getSession();
if ($session->has('LIST_PRODUCT_ROW_VARIANTS')) {
   // Если ключ есть, берем вид из него
   $LIST_PRODUCT_ROW_VARIANTS = $session['LIST_PRODUCT_ROW_VARIANTS'];
}
if (empty($LIST_PRODUCT_ROW_VARIANTS)) {
    // Если ключ пустой ставим вид по умолчанию
   $LIST_PRODUCT_ROW_VARIANTS = "[{'VARIANT':'3','BIG_DATA':false}]";
}

$intSectionID = $APPLICATION->IncludeComponent(
    "bitrix:catalog.section",
    "section", array(
	... сокращено bitrix:catalog.section ...
	"PAGE_ELEMENT_COUNT" => '40', // по сколько товаров показывать
        "PRODUCT_ROW_VARIANTS" => $LIST_PRODUCT_ROW_VARIANTS,
	... сокращено bitrix:catalog.section ...
),
    $component
);
Михаил Базаров 08.10.2022
С сесcией можно работать и без API битрикс, просто используя
$_SESSION
Код
session_start();
$_SESSION['LIST_PRODUCT_ROW_VARIANTS'] = $_POST['LIST_PRODUCT_ROW_VARIANTS'];
exit();

Так же, этот способ можно использовать и для сортировки товаров:
По новизне, алфавиту, свойствам и так далее.
Таким же образом записываем в сессию параметры и направление SORT для каталога
Vlad 05.11.2022
А в этот блок "Смена вида карточек" есть вариант добавить адекватным методом еще кнопки согласно вашего урока "Создать pdf файл из элемента инфоблока, дать скачать пользователю, поддерживать в актуальном состоянии или отправить на e-mail."
Михаил Базаров 05.11.2022
Да, просто добавляете туда ссылку на скачивание сгенерированной pdf.
Vlad 05.11.2022
Переключение/смена вида карточек товаров: Какой из вариантов будет удобней и практичнее?
Вашим методом или с помощью куки из заметки на форуме: Переключение видов (шаблонов) каталога товара. При выборе варианта шаблона по умолчанию установлен выбор в зависимости условия мобильная/Desctop (разрешения экрана) версия
Михаил Базаров 05.11.2022
Думаю, способ с переключением внутри одного шаблона практичнее.
Не придется поддерживать несколько отдельных шаблонов, если потребуются правки.
Но, исходите из реального проекта - может быть, в вашем случае, реально удобнее переключать шаблоны целиком а не вид внутри шаблона.

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 36703 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Отфильтровать новости в Битрикс за заданный период Просмотров: 15592 Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компо... Заполнить поля пользователя из свойства заказа, на примере ФИО Просмотров: 1201 При создании заказа покупатель заполняет поле "ФИО". Необходимо скопировать эти данные в п... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1544 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 14266 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Вывести компонент новостей на страницу в Битрикс Просмотров: 63592 Посмотрел Яндекс метрику на свой сайт, и решил что буду частенько писать сюда именно то, ч... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20203 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Основные функции вывода в шаблонах Битрикс Просмотров: 155358 Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну к... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5604 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Показ страницы сайта в боковом слайдере, на примере всплывающей формы... Просмотров: 1872 Если вы хотите сделать подгрузку любой страницы сайта в боковой слайдер, для этого в битри... Увеличение диска на готовой виртуальной машине Битрикс Просмотров: 8767 Как всем известно, на официальном сайте 1С-битрикс можно скачать готовую виртуальную машин... Вывести все товары, с постраничной навигацией, из всех разделов инфоб... Просмотров: 28421 По сути, эта заметка, небольшой лайфхак. Достаточно часто нужно, в корне каталога, в ТОП-е... Как подобрать редакцию Битрикс под задачи Просмотров: 6349 Последнее время, все чаще, при общении с заказчиками, сталкиваюсь с вопросом "— К... Индивидуальные цены в 1С-Битрикс: в каталоге и при оформлении заказа Просмотров: 4961 В этой заметке постараюсь описать процесс реализации индивидуальных цен, для пользователей... Вывести артикул в печатную форму бланка заказа Просмотров: 386 Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе. ... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 2488 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Сравнение двух типов цен для иммитации системы скидок, в Битрикс Просмотров: 5854 Встала задачка, иммититровать систему скидок в интернет магазине на Битрикс. Из 1С-УТ, на ... Свойство: привязка к Яндекс:Картам - вывести из нескольких элементов ... Просмотров: 17737 Предположим, что у вас есть инфоблок со свойством "Привязка к яндекс картам". В этом инфоб... Дать пользователю возможность быстро отредактировать материал Просмотров: 4366 На одном из разрабатываемых сайтов, пользователи формирую его контент. После регистрации, ... Добавление своих полей в почтовые шаблоны Битрикс Просмотров: 43636 Иногда нужно внести свои поля в почтовые шаблоны битрикс. Например: добавить имя и номе...