Заметка написана в ответ на вопрос, в моей социальной сети реализовать смену вида карточки товара в catalog.section.
Попробуем сделать такую смену еще и удобной для пользователя: что бы при смене вида, страница не прокручивалась вверх, оставаясь на текущей позиции ну и выбранный вид сохранялся в сессии.
Для начала создаем три шаблона catalog.section. В моем случае: blocks, lines, price - само собой, все выглядят по разному.
Визуально, переключатель будет выглядеть так. Здесь момент не принципиальный, делается под конкретный дизайн.
В файле комплексного шаблона "Каталог", открываем файл section.php - здесь у нас вызывается компонент catalog.section. Вместо строчки подключения шаблона, этого компонента вставляем $_SESSION['wiev'] - суперглобальная переменная/массив с сессией, в параметр которой передали ключ wiev
Над вызовом компонента добавляем код и верстку
<? $wievTemplates = array('blocks', 'lines', 'price'); $wievNames = array('<i class="fa fa-th-large"></i>', '<i class="fa fa-list"></i>', '<i class="fa fa-align-justify"></i>'); if (!isset($_SESSION['wiev'])) { $_SESSION['wiev'] = 'blocks' }; ?> <div class="wiev_panel"> <? $i = 0; foreach ($wievTemplates as $wiev) { ?> <span data-wiev="<?= $wiev ?>"> <?= $wievNames[$i] ?> </span> <? $i++; } ?> </div>
Здесь мы создали массив $wievTemplates c перечислением папок шаблонов catalog.section и массив $wievNames с визуальным представлением этих шаблонов (в моем случае иконки fontawesome, но можно написать что угодно).
И сделали проверку: Если переменная $_SESSION['wiev'] не существует назначаем ее как blocks - это будет видом карточек по умолчанию.
Далее: foreach-ем вывели верстку наших переключалок, в параметр span-а название папки шаблона. В содержимое span-а визуальное предстваление вида шаблона.
PS: Можно было собрать оба массива в один многомерный, но как по мне излишество- в данном конкретном случае.
Далее, создаем script с ajax запросом к файлу /local/ajax/wiev_logic.php
$('.wiev_panel span').click(function () { var wievTemplates = $(this).data('wiev'); $.post('/local/ajax/wiev_logic.php', { wiev: wievTemplates }, function (data) { location.reload(); }); });
Здесь, на событие клика по span-у, находящемуся в блоке .wiev_panel отправляем post запрос на файл /local/ajax/wiev_logic.php. В самом post запросе переменная wievTemplates c названием папки нужного шаблона (вида) catalog.section.
При получении данных обновляем страницу на текущей позиции (без прыжка вверх - к началу страницы)
Ну и сам файл wiev_logic.php
session_start(); $_SESSION['wiev'] = $_POST['wiev']; exit();
Записываем в сессию пользователя значение ключа 'wiev' массива $_SESSION. Как помним, он у нас и указан как шаблон компонента catalog.section
На нем, уже много видеоуроков по 1С-Битрикс. Как одиночные видео так и серии видеоуроков Перейти на канал
Совсем скоро выйдет видеокурс по разработке доски объявлений с мобильным приложением. Подписывайтесь и будьте в курсе: