Cмена вида карточки товара в catalog.section без прокрутки страницы вверх.

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