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

Смену вида карточек товаров, в разделе каталога, можно реализовать с помощью сессии. Просто6 записывая в нее нужный вида шаблона или режима отображения.
 
С сесcией можно работать и без API битрикс, просто используя
$_SESSION
Код
session_start();
$_SESSION['LIST_PRODUCT_ROW_VARIANTS'] = $_POST['LIST_PRODUCT_ROW_VARIANTS'];
exit();

Так же, этот способ можно использовать и для сортировки товаров:
По новизне, алфавиту, свойствам и так далее.
Таким же образом записываем в сессию параметры и направление SORT для каталога
Изменено: Михаил Базаров - 09.10.2022 00:02:10
 
Спасибо помогли, вопрос такой, а как бы ещё оставить активной подсвеченой, иконку с текущеим отображением товара?
 
В js
Код
$('.catalog_sort_panel_view button').click(function () {
    var viewVariant = $(this).data('view');

    // Удалить класс "active" у всех кнопок
    $('.catalog_sort_panel_view button').removeClass('active');

    // Добавить класс "active" к выбранной кнопке
    $(this).addClass('active');

    $.post('/local/ajax/view_catalog.php', {
        LIST_PRODUCT_ROW_VARIANTS: viewVariant,
    }, function (data) {
        location.reload();
    });
});

Для кнопок, переносим код получения сессии до них и
Код
<?php
$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}]";
}

// Получите значение выбранной вьюхи
$selectedView = json_decode($LIST_PRODUCT_ROW_VARIANTS, true)[0]['VARIANT'];
?>

<div class="catalog_sort_panel_view">
    <button data-view="grid" <?php echo $selectedView === 'grid' ? 'class="active"' : '' ?>>
        <i class="fa fa-th"></i>
    </button>
    <button data-view="list" <?php echo $selectedView === 'list' ? 'class="active"' : '' ?>>
        <i class="fa fa-list"></i>
    </button>
</div>

Ну и стилизуем выбранные кнопки через их class="active" (будет у выбранного варианта)
Изменено: Михаил Базаров - 21.09.2023 10:30:30
Читают тему
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
Загрузить файлы
 
Поблагодарить и поддержать:
Или подписаться на boosty канал: Видео на Bst
Сайт в режиме тех обслуживания

Сообщения форума и комментарии не сохраняются

Возвращайтесь после 12-го января

Блог-note: заметки разработчика

Отключить поиск по описаниям товаров в Битрикс

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

Если папка то применяем, проверка текущего раздела или подраздела

Иногда требуется применить особый стиль к определённой директории сайта или управлять выводом элементов на странице в за...

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

Достаточно часто, при проверке параметров системы, в Битрикс, можно увидеть одну из ошибок: Время на БД и на сервере- Вр...

Сгенерировать скидочные купоны, при заказе и отправить на почту

Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны для скидки (правила корзины) и ...

Ссылка на товары бренда в каталоге с автоматическим применением умного фильтра

Задача: вывести товары на странице бренда, выведенного компонентом "Новости", с ссылками на разделы в каталоге...

Input Type File, множественный с дропзоной и показом превью

Задача: Сделать возможность загрузки файлов в множественный input type="file" c помощью drag&drop и показом превью загру...

Привязка к разделам в компоненте "Добавления элементов пользователем"

В системе управления 1С Битрикс есть компонент "Форма добавления / редактирования" - который позволяет пользователям доб...

Не дать купить товара больше, чем находится на определенных складах

Задача: в магазине 20 складов, на всех есть остатки но нужно ограничить покупку товара только остатками на двух складах,...

Установка поиска Sphinx на Ubuntu 22.04 для 1С-Битрикс

Задача: установить и сконфигурировать поиск Sphinx под управлением Ubuntu 22.04 и панели управления HestiaCP для использ...