Избранные товары в Битрикс на AJAX

Избранные товары в Битрикс на AJAX

Очень часто при создании интернет-магазина требуется наличие функционала для добавления товаров в избранное (wishlist). 

В данной статье написан метод разработки избранного на основе bitrix:catalog.section, cookies и пользовательских полей.

Создание поля хранения избранного

Избранное будет работать при помощи обработчика ajax.php, к которому мы будем обращаться посредством AJAX-запроса при клике на кнопку добавления товара в избранное:

  • Для незарегистрированного пользователя мы будем записывать ID товаров в Cookies; 
  • Для зарегистрированного пользователя записывать объекты в пользовательское поле, которое мы создадим.

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

Данное поле должно обязательно иметь множественное значение. Пример представлен ниже:

Создание иконки для шапки с количеством избранного

После того как мы завели пользовательское поле UF_FAVORITES, требуется создать страницу и ссылку (например «/personal/wishlist/») на избранное . В данном примере выводится количество добавленных товаров в избранное:

<a id="want" class="block" href="/personal/wishlist/">
    <span class="col"></span>
    <div class="icon"></div>
    <p>Хочу</p></a>
<a class="block" href="/personal/wishlist/"></a><a class="block" href="/personal/wishlist/"><br></a>

Функция добавления избранного при помощи AJAX (без перезагрузки страницы)

Теперь нужно подготовить функцию с AJAX-запросом, с помощью которой будет отправляться ID товара в обработчик, в котором будет происходить его  добавление в избранное. Функция проверяет, наличие товара в массиве, если он уже добавлен, то мы его удаляем. Если операция прошла успешно, пересчитываем количество товаров в избранном и выводим количество. 

Пример:

$(document).ready(function() {
    /* Favorites */
    $('.favor').on('click', function(e) {
        var favorID = $(this).attr('data-item');
        if($(this).hasClass('active'))
            var doAction = 'delete';
        else
            var doAction = 'add';

        addFavorite(favorID, doAction);
    });
    /* Favorites */
});
/* Избранное */
    function addFavorite(id, action)
    {
        var param = 'id='+id+"&action="+action;
        $.ajax({
            url:     '/local/ajax/favorites.php', // URL отправки запроса
            type:     "GET",
            dataType: "html",
            data: param,
            success: function(response) { // Если Данные отправлены успешно
                var result = $.parseJSON(response);
                if(result == 1){ // Если всё чётко, то выполняем действия, которые показывают, что данные отправлены
                     $('.favor[data-item="'+id+'"]').addClass('active');
                     var wishCount = parseInt($('#want .col').html()) + 1;
                     $('#want .col').html(wishCount); // Визуально меняем количество у иконки
                }
                if(result == 2){
                     $('.favor[data-item="'+id+'"]').removeClass('active');
                     var wishCount = parseInt($('#want .col').html()) - 1;
                     $('#want .col').html(wishCount); // Визуально меняем количество у иконки
                }
            },
            error: function(jqXHR, textStatus, errorThrown){ // Ошибка
                console.log('Error: '+ errorThrown);
            }
         });
    }
/* Избранное */

Создание обработчика избранных товаров ajax.php

При помощи AJAX-запроса мы обращаемся к обработчику ajax.php, в котором идёт проверка пользователя, авторизован ли он. Делаем запись в пользовательское поле UF_FAVORITES, если он авторизован.
Если пользователь не авторизован, записываем ID товара в Cookies. Чтобы корректно сделать запись, нужно вернуть из cookies массив с избранными товарами, и добавить нашу позицию в массив. Также присутствует проверка на дублирование, для исключения повторений.

Код обработчика ajax.php , который добавляет/удаляет товары избранного:

<?php
require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");

/* Избранное */
global $APPLICATION;
if($_GET['id'])
{
    if(!$USER->IsAuthorized()) // Для неавторизованного
    {
        $arElements = unserialize($_COOKIE['favorites']);
        if(!in_array($_GET['id'], $arElements))
        {
            $arElements[] = $_GET['id'];
            $result = 1; // Датчик. Добавляем
        } else {
            $key = array_search($_GET['id'], $arElements); // Находим элемент, который нужно удалить из избранного
            unset($arElements[$key]);
           
            $result = 2; // Датчик. Удаляем
        }
       // $cookie = new Cookie("favorites", serialize($arElements), time() + 60*60*24*60);
      // print_r($arElements);
       if(empty($arElements)){
	       setcookie("favorites", '', time() - 1, "/", $_SERVER['SERVER_NAME'], false);
       } else {
	    	setcookie("favorites", serialize($arElements), time() + 60*60*24*60, "/", $_SERVER['SERVER_NAME'], false);
        }
    }
    else { // Для авторизованного
        $idUser = $USER->GetID();
        $rsUser = CUser::GetByID($idUser);
        $arUser = $rsUser->Fetch();
        $arElements = $arUser['UF_FAVORITES'];  // Достаём избранное пользователя
        if(!in_array($_GET['id'], $arElements)) // Если еще нету этой позиции в избранном
        {
            $arElements[] = $_GET['id'];
            $result = 1;
        }
        else {
            $key = array_search($_GET['id'], $arElements); // Находим элемент, который нужно удалить из избранного
            unset($arElements[$key]);
            $result = 2;
        }
        $USER->Update($idUser, Array("UF_FAVORITES" => $arElements)); // Добавляем элемент в избранное
    }
}
/* Избранное */
echo json_encode($result);
die();
?>

Мы сформировали обработчик, который добавляет товары в избранное. После этого попробуем добавить парочку товаров в избранное. Они запишутся в Cookies или в пользовательское поле UF_FAVORITES (в зависимости от типа пользователя). Если мы выведем массив ‘$_COOKIE‘, то должны обнаружить там добавленные ID товара.

Чтобы проверить ID товаров в поле UF_FAVORITES, используем код:

<?php
require_once($_SERVER['DOCUMENT_ROOT']. "/bitrix/modules/main/include/prolog_before.php");
global $APPLICATION;
    $idUser = $USER->GetID();
    $rsUser = CUser::GetByID($idUser);
    $arUser = $rsUser->Fetch();
    $arFavorites = $arUser['UF_FAVORITES'];  // Достаём избранное пользователя
    print_r($arFavorites);
}

Вывод избранных товаров на странице «Избранное»

Осталось нужным нам образом представить эти товары пользователю. В своём примере я использовал bitrix:catalog.section, хотя рекомендую использовать bitrix:catalog.top.

Если вы еще не создали страницу, на которой будете выводить избранные товары, создайте ее. (напр.: /personal/wishlist/);

Перед вызовом компонента формируем фильтр с соответствующим условием. Если мы не авторизованы, возвращаем Cookies. Если авторизованы, возвращаем пользовательское поле UF_FAVORITES. И записываем массив $favorites в переменную arrFilter, для фильтрации вывода товаров избранного.

Код перед вызовом компонента:

if(!$USER->IsAuthorized()) // Для неавторизованного
{
    global $APPLICATION;
	$favorites = unserialize($_COOKIE["favorites"]);
}
else {
     $idUser = $USER->GetID();
     $rsUser = CUser::GetByID($idUser);
     $arUser = $rsUser->Fetch();
     $favorites = $arUser['UF_FAVORITES'];
    
}

$GLOBALS['arrFilter']=Array("ID" => $favorites);
if(count($favorites) > 0 && is_array($favorites)):

Выделение избранных товаров в каталоге (закрасить иконку)

Финальный шаг. Товары выводятся, добавляются в избранное и удаляются. Осталось показать пользователю, что товар успешно добавился в избранное, и при перемещению по каталогу, он видел, какие товары добавлены в наш ‘wishlist’. Я сделал закрашивание иконки (сердца), давая понять, что товар избранный.
Для этого обратимся к файлу component_epilog.php в нашем компоненте (в данном случае bitrix:catalog.section), в котором будем добавлять соответствующий класс active к иконке избранного товара, тем самым закрашивая её.

<?php
global $APPLICATION;

if(!$USER->IsAuthorized())
{
    $arFavorites = unserialize($_COOKIE["favorites"]);
}
else {
    $idUser = $USER->GetID();
    $rsUser = CUser::GetByID($idUser);
    $arUser = $rsUser->Fetch();
    $arFavorites = $arUser['UF_FAVORITES'];  // Достаём избранное пользователя
}

/* Меняем отображение сердечка товара */
foreach($arFavorites as $k => $favoriteItem):
?>
    <script>
        if($('a.favor[data-item="< ?=$favoriteItem? >"]'))
            $('a.favor[data-item="< ?=$favoriteItem? >"]').addClass('active');
    </script>
<?php endforeach; ?>

На этом все, можно пользоваться 🙂