Заметка написана в ответ на вопрос, в моей социальной сети реализовать смену вида карточки товара в 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
