б-р Черноморский, д. 17, корп. 1, помещ. 4/2/5, оф. 92,
Москва.
Очень часто при создании интернет-магазина требуется наличие функционала для добавления товаров в избранное (wishlist). В данной статье написан метод разработки избранного на основе bitrix:catalog.section, cookies и пользовательских полей.
Нам предстоит создать обработчик ajax.php, к которому мы будем обращаться посредством AJAX-запроса при клике на кнопку добавления товара в избранное.
Данное поле должно обязательно иметь множественное значение. Пример представлен ниже:
Хочу
$(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);
}
});
}
/* Избранное */
Если пользователь не авторизован, записываем 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");?>
Чтобы проверить 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):?>
Готово!
