Избранные товары в Битрикс на AJAX | REDs Group
REDS Group
ул. Большая Академическая, дом 5, стр. 1, Москва.
Избранные товары в Битрикс на AJAX

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

1218

Очень часто при создании интернет-магазина требуется наличие функционала для добавления товаров в избранное (wishlist). В данной статье написан метод разработки избранного на основе bitrix:catalog.section, cookies и пользовательских полей.

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

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

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

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

    Хочу

  3. Теперь нужно подготовить функцию с 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);
                }
             });
        }
    /* Избранное */
    
  4. При помощи AJAX-запроса мы обращаемся к обработчику ajax.php, в котором идёт проверка пользователя, авторизован ли он. Делаем запись в пользовательское поле UF_FAVORITES, если он авторизован.

    Если пользователь не авторизован, записываем ID товара в Cookies. Чтобы корректно сделать запись, нужно вернуть из cookies массив с избранными товарами, и добавить нашу позицию в массив. Также присутствует проверка на дублирование, для исключения повторений.

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

    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
    $APPLICATION--->SetTitle("Title");
    $GLOBALS['APPLICATION']->RestartBuffer();
    /* Избранное */
       global $APPLICATION;
       if($_GET['id'])
       {
          if(!$USER->IsAuthorized()) // Для неавторизованного
          {
            $arElements = unserialize($APPLICATION->get_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; // Датчик. Удаляем
            }
            $APPLICATION->set_cookie("favorites", serialize($arElements));
          }
          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(); ?>
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
    
  5. Мы сформировали обработчик, который добавляет товары в избранное. После этого попробуем добавить парочку товаров в избранное. Они запишутся в Cookies или в пользовательское поле UF_FAVORITES (в зависимости от типа пользователя). Если мы выведем массив '$_COOKIE', то должны обнаружить там добавленные ID товара.

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

    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.

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

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

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

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

    global $APPLICATION;
    
    if(!$USER->IsAuthorized())
    {
        $arFavorites = unserialize($APPLICATION->get_cookie("favorites"));
        //print_r($arFavorites);
    }
    else {
        $idUser = $USER->GetID();
        $rsUser = CUser::GetByID($idUser);
        $arUser = $rsUser->Fetch();
        $arFavorites = $arUser['UF_FAVORITES'];  // Достаём избранное пользователя
    }
    count($arFavorites);
    /* Меняем отображение сердечка товара */
    foreach($arFavorites as $k => $favoriteItem):?>
        
    

    Готово!

23.05.2018 / Садовиков Сергей
Комментарии (4)
Сергей
16.05.2019
Ошибочки специально оставили?)
Алексей
17.05.2019
Здравствуйте! Прошу уточнить, о какой ошибке идет рёчь
Дмитрий
18.05.2019
parseInt($('#want .col').html()) возвращает Null, когда там пусто , если туда не проставить хотябы 0. И как именно меняются сердечки товара в шаблоне? Можете выложить файлы вашей наработки?
Сергей
24.05.2019
Дмитрий, в таком случае в вашем скрипте нужно прописать условие if(want == null) { want = 0 }. Примерно так, у всех индивидуальные случаи. Данная статья была добавлена приличное время назад и является помощью в разработке избранного. Сейчас у нас появилась более свежая наработка, которая скоро появится либо в этой статье, либо в новой