Телеграм: @camouf_ru Почта: mihail@bazarow.ru Заказать разработку проекта

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

Просмотров: 2186 | Комментариев: 0

Комментарии

Внимание! все сообщения проходят премодерацию. Ваше сообщение появится после проверки
 
Текст сообщения*
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений
Загрузить файл
Нажимая кнопку "Отправить", Вы принимаете условия
Политики конфиденциальности и обработки персональных данных
Поделиться страницей Спасибо, это помогает развивать сайт.
Мой youtube канал. C 1-го сентября начнется выход видеокурса по разработке доски объявлений с мобильным приложением.
Перейти на канал Подписывайтесь и будьте в курсе:
Заметки разработчика

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

attention