Giter Site home page Giter Site logo

bitrix_favorites's Introduction

Bitrix_Favorites

[Bitrix] Добавление товаров в избранное

Нужно реализовать функционал избранного.

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

  1. После того как мы завели пользовательское поле UF_FAVORITES, нужно создать страницу и ссылку на избранное. В данном примере выводится количество добавленных товаров в избранное.

  1. Теперь нужно подготовить 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);
            }
         });
    }
/* Избранное */
  1. AJAX функция обращается к favorites.php, где идёт проверка, авторизован ли пользователь. Если да, то делаем запись в пользовательское поле, если не авторизован, то записываем ID товара в Cookies. Перед тем, как сделать запись, мы проверяем есть ли уже записи в данном массиве, если есть, нужно добавить запись к этому массиву. Присутствует проверка на дублирование, чтобы не было повторений.

  2. Мы сформировали функцию добавление товаров в избранное, добавили пару товаров в избранное, они записались в Cookies или в Пользовательское поле UF_FAVORITES. Если мы выведем массив '$_COOKIE', то должны обнаружить там добавленные ID товара.

Осталось правильным образом представить эти товары пользователю. Я визуализировал избранные товары, подобию каталога. И вызвал компонент catalog.section

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

if(!$USER->IsAuthorized()) // Для неавторизованного
{
    global $APPLICATION;
	$favorites = unserialize(Application::getInstance()->getContext()->getRequest()->getCookie("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)):

Товары выводятся, добавляются и удаляются из избранного. Осталось сделать, чтобы значок избранного (например сердечко), показывал нам, добавлен ли товар в избранное или нет. Для этого обратимся к файлу component_epilog.php, в котором будем добавлять соответствующий класс 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):?>
    <script>
        if($('a.favor[data-item="<?=$favoriteItem?>"]'))
            $('a.favor[data-item="<?=$favoriteItem?>"]').addClass('active');
    </script>
<?endforeach;?>

Готово !

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.