Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Добавление в избранное или отложенные, на AJAX из карточки товара

Просмотров: 27299

В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "Избранное". Для этого будем использовать API 1С-Битрикс. Добавление будет происходить на AJAX- без перезагрузки страницы

Выводим количество отложенных товаров

 

В штатной корзине sale.basket есть отложить товар. Наша задача вывести количество отложенных товаров в шаблоне сайта, например в шапке и назвать "Избранное"- вот в таком виде:

Для этого, в нужном месте шаблона выводим следующий код:

<?
use Bitrix\Main\Loader;
    Loader::includeModule("sale");
     $delaydBasketItems = CSaleBasket::GetList(
        array(),
            array(
            "FUSER_ID" => CSaleBasket::GetBasketUserID(),
            "LID" => SITE_ID,
            "ORDER_ID" => "NULL",
            "DELAY" => "Y"
        ),
      array()
    );
    echo $delaydBasketItems;
?>

В переменную $delaydBasketItems - мы передали и вывели количество отложенных товаров, отфильтровав их параметром "DELAY" => "Y". Если не использовать данный параметр- нам выведется общее количество товаров в корзине, вместе с готовыми к покупке.

Создаем обработчик для добавления товара из карточки.

Далее создаем файл wishlist.php и ложим его в директорию /local/ajax/. Внутри этого файла размещаем следующий код (подсказки по коду в комментриях)

<?
//Подключаем ядро Битрикс и главный модуль
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
use Bitrix\Main\Loader;
//Подключаем модуль sale
Loader::includeModule("sale");
    //Получаем корзину текущего пользователя
    $fUserID = CSaleBasket::GetBasketUserID(True);
    $fUserID = IntVal($fUserID);
    //Создаем переменные для обработчика
    $arFields = array(
        "PRODUCT_ID" => $_POST['p_id'],
        "PRODUCT_PRICE_ID" => $_POST['pp_id'],
        "PRICE" => $_POST['p'],
        "CURRENCY" => "RUB",
        "WEIGHT" => 0,
        "QUANTITY" => 1,
        "LID" => 's1',
        "DELAY" => "Y",
        "CAN_BUY" => "Y",
        "NAME" => $_POST['name'],
        "MODULE" => "sale",
        "NOTES" => "",
        "DETAIL_PAGE_URL" => $_POST['dpu'],
        "FUSER_ID" => $fUserID
    );
    //Получаем количество отложеных товаров
    if (CSaleBasket::Add($arFields)) {
        $arBasketItems = array();
        $dbBasketItems = CSaleBasket::GetList(
            array(
                "NAME" => "ASC",
                "ID" => "ASC"
            ),
            array(
                "FUSER_ID" => CSaleBasket::GetBasketUserID(),
                "LID" => SITE_ID,
                "ORDER_ID" => "NULL",
                "DELAY" => "Y",
            ),
            false,
            false,
            array("PRODUCT_ID")
        );
        while ($arItems = $dbBasketItems->Fetch()){
            $arBasketItems[] = $arItems["PRODUCT_ID"];
        }
        //Загоняем отложенне в переменную
        $inwished = count($arBasketItems);
    }
//Выводи количество отложенных товаров
echo $inwished;
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");
?>

Этот обработчик будет получать событие о добавлении товара в отложенные. В детальной карточке товара размещаем скрипт который будет обращаться, к созданному выше обработчику, точнее передавать в него параметры товара:

function add2wish(p_id, pp_id, p, name, dpu, th){
$.ajax({
    type: "POST",
    url: "/local/ajax/wishlist.php",
    data: "p_id=" + p_id + "&pp_id=" + pp_id + "&p=" + p + "&name=" + name + "&dpu=" + dpu,
        success: function(html){
            $(th).addClass('in_wishlist');
            $('#wishcount').html(html);
        }
    });
};

И здесь же, в карточке товара, размещаем ссылку которая будет инициализировать скрипт и передавать параметры о товаре и цене.

<a href="javascript:void(0)"  class="wishbtn  <? if (in_array($arResult["ID"],$arBasketItems )) echo 'in_wishlist '; ?>"
       onclick="add2wish(
           '<?=$arResult["ID"]?>',
            '<?=$arResult["CATALOG_PRICE_ID_1"]?>',
            '<?=$arResult["CATALOG_PRICE_1"]?>',
            '<?=$arResult["NAME"]?>',
            '<?=$arResult["DETAIL_PAGE_URL"]?>',
            this)">
            Добавить в избранное / отложенные
    </a>

При клике, на эту ссылку, товар будет добавлен в отложенные и самой ссылке присвотся класс in_wishlist- что бы можно было ее стилизовать под дизайн

Обновление счетчика отложенных

И еще одна мелочь. Это обновление счетчика Избранных в шапке сайта. Что бы он обновлялся на лету- просто обворачиваем вывод счетчика (созданный выше) в div c id wishcount. Вот так

<div id="wishcount">
<?
use Bitrix\Main\Loader;
Loader::includeModule("sale");
$delaydBasketItems = CSaleBasket::GetList(
        array(),
        array(
            "FUSER_ID" => CSaleBasket::GetBasketUserID(),
            "LID" => SITE_ID,
            "ORDER_ID" => "NULL",
            "DELAY" => "Y"
        ),
        array()
    );
    echo $delaydBasketItems;
    ?>
    </div>

Что бы не сбрасывался стиль кнопки, в карточке товара- если данный товар есть в отложенных


//Проверяем, есть ли данный товар в отложенных
$curProductId = $arResult['ID'];
$dbBasketItems = CSaleBasket::GetList(
    array(
        "NAME" => "ASC",
        "ID" => "ASC"
    ),
    array(
        "FUSER_ID" => CSaleBasket::GetBasketUserID(),
        "LID" => SITE_ID,
        "PRODUCT_ID" => $curProductId,
        "ORDER_ID" => "NULL",
        "DELAY" => "Y"
    ),
    false,
    false,
    array("PRODUCT_ID")
);
while ($arItems = $dbBasketItems->Fetch())
{
    $itInDelay = $arItems['PRODUCT_ID'];
}
//Добавляем к кнопке class
if ( (in_array($arResult["ID"], $delaydBasketItems)) || (isset($itInDelay)) ) { echo 'in_wishlist'; }

Выше, мы просто проверили наличие данного товара (по его ID), есть ли он в отложенных. Если есть, загнали в переменную $itInDelay его ID. В самой кнопке-ссылке, проверили на существование переменной $itInDelay (точнее, что она не пустая)

Более наглядное применение в видео-инструкции.

Данное видео является одной из серий (19) курса по разработке интернет-магазина на Битрикс

На этом все. Заметка написана на базе темы на офицальном форуме Битрикс. Дополнена не достающими фактами.

Михаил Базаров 10.04.2021
Цитата
Андрей Сенин написал:
Реализация вполне не плохая, но на самом деле я бы делал по-другому:
Во первых, скрипт передает цену, указанную в параметре "&p=" напрямую, а это говорит о том, что я могу в любой момент подменить цену в html на любую другую и она попадет в отложенные в корзину, где я смогу "вернуть" товар в корзину и купить по этой цене.
Во вторых, в идеале убрать jQuery и забиндить обработчик на Bitrix JS и реализовать с помощью ajax битрикса в файле script.js шаблона.

Спасибо за статью;)
В целом да. Только с подменой цены не согласен ) - оформление заказа не даст оформить с поддельной ценой.
Понятное дело, не сам компонент оформления заказа, а "подкапотная" реализация.

У меня уже готов свой компонент избранного, пишет все отдельную табличку БД - на нескольких проектах работает успешно. Скоро (не знаю когда :) ) заверну его в установщик и поделюсь.
Алексей 01.11.2021
Добрый день!
Скажите пожалуйста а как добавить кнопку удалить из избранного для одного товара из списка.
Удалить все -работает
Но хочется по одному удалять
Вячеслав 13.01.2022
Цитата
написал:
Цитата
Андрей Сенин написал:
Реализация вполне не плохая, но на самом деле я бы делал по-другому:
Во первых, скрипт передает цену, указанную в параметре "&p=" напрямую, а это говорит о том, что я могу в любой момент подменить цену в html на любую другую и она попадет в отложенные в корзину, где я смогу "вернуть" товар в корзину и купить по этой цене.
Во вторых, в идеале убрать jQuery и забиндить обработчик на Bitrix JS и реализовать с помощью ajax битрикса в файле script.js шаблона.

Спасибо за статью;)
В целом да. Только с подменой цены не согласен ) - оформление заказа не даст оформить с поддельной ценой.
Понятное дело, не сам компонент оформления заказа, а "подкапотная" реализация.

У меня уже готов свой компонент избранного, пишет все отдельную табличку БД - на нескольких проектах работает успешно. Скоро (не знаю когда  ) заверну его в установщик и поделюсь.
Михаил, еще не выкладывали компонент? Может я пропустил) Как вариант на маркетплейс можно закинуть за пару рубчиков
Михаил Базаров 13.01.2022
Цитата
Вячеслав написал:
Цитата
 В целом да. Только с подменой цены не согласен ) - оформление заказа не даст оформить с поддельной ценой.
Понятное дело, не сам компонент оформления заказа, а "подкапотная" реализация.

У меня уже готов свой компонент избранного, пишет все отдельную табличку БД - на нескольких проектах работает успешно. Скоро (не знаю когда  ) заверну его в установщик и поделюсь.
Михаил, еще не выкладывали компонент? Может я пропустил) Как вариант на маркетплейс можно закинуть за пару рубчиков

Пока нет, но скоро :)  
Александр 12.08.2022
А как сделать чтобы при наведении на значек корзины выводилось ее содержимое( краткое описание и маленькое фото ) ,BX.addCustomEvent ? не в ту сторону копаю?
Михаил Базаров 12.08.2022
Цитата
Александр написал:
А как сделать чтобы при наведении на значек корзины выводилось ее содержимое( краткое описание и маленькое фото ) ,BX.addCustomEvent ? не в ту сторону копаю?

В штатном шаблоне корзины sale.basket.basket.line это уже  есть. Верстка в файле ajax_template.php
Александр 14.08.2022
Спасибо)  
Алексей 23.09.2022
Добрый вечер, с детальной карточки товара товар добавляется в избранное, а как добавить товар в избранное с catalog.item или catalog.section?
Михаил Базаров 23.09.2022
Цитата
Алексей написал:
Добрый вечер, с детальной карточки товара товар добавляется в избранное, а как добавить товар в избранное с catalog.item или catalog.section?

Нужно правильно передать ID товара. В catalog.item это $item['ID'] в catalog.section, вроде бы $arElement['ID']
Гость 26.09.2022
Спасибо! это сработало)

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Не дать пользователю купить больше одного товара, в Битрикс Просмотров: 5126 Иногда нужно и такое: Например: на одном из разрабатываемых сайтов, мне нужно было создать... Установка веб-сервера LAMP на ubuntu 20.04 LTS, оптимизированный под ... Просмотров: 11379 В последнее время, плотно пересел c macOS на ubuntu, и решил настроить себе полноценное ра... Добавление в избранное или отложенные, на AJAX из карточки товара Просмотров: 27299 В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "И... Получить множественное пользовательское поле раздела. Значения множес... Просмотров: 342 Задача: У разделов инфоблока есть множественное поле типа список. Зная ID раздела, нужно п... Получение местоположений через API Битрикс c поиском по select. Просмотров: 21262 Если нужно получить список городов из модуля "Местоположения" можно воспользоваться API Би... Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружени... Просмотров: 25833 WebP это современный формат сжатия изображений, который позволяет, при правильных настройк... Правильное подключение стилей и скриптов в Битрикс Просмотров: 80470 Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в систе... Регистрация пользователя в определенную группу сайта на Битрикс Просмотров: 22043 Достаточно часто требуется регистрировать пользователя в определенную группу, в зависимост... Вывести дополнительное пользовательское поле, использование полей в ф... Просмотров: 15436 Если вам нужно вывести дополнительное пользовательское поле типа "Привязка к разделам инфо... Как вывести свойства инфоблока по отдельности и немного плюшек не в т... Просмотров: 105360 Если у инфоблока несколько свойств- то при выводе их всех, скажем в детальном описании нов... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 2459 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Привязка к разделам в компоненте "Добавления элементов пользователем" Просмотров: 12032 В системе управления 1С Битрикс есть компонент "Форма добавления / редактирования" - котор... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 19696 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Смена вида карточек товаров в catalog.section с иммитацией AJAX Просмотров: 782 Смену вида карточек товаров, в разделе каталога, можно реализовать с помощью сессии, запис... Сниппеты типографики bootstrap, для Битрикс Просмотров: 7575 Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstra... Если товар в корзине, поменять кнопку на "В корзине" в новом шаблоне ... Просмотров: 1020 Ранее я уже делал заметку на эту тему. Тогда, мы меняли значение input-а при добавлении то... Минимальная сумма заказа в корзине и оформлении заказа в 1С-Битрикс Просмотров: 8435 В этой заметке добавим возможность установки минимальной суммы заказа, в новом шаблоне кор... Увеличение диска на готовой виртуальной машине Битрикс Просмотров: 8732 Как всем известно, на официальном сайте 1С-битрикс можно скачать готовую виртуальную машин... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 6988 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Сортировать товары по названию, цене и дате поступления в каталоге Би... Просмотров: 39343 Достаточно часто заказчик просит вывести сортировку по цене, новым поступлениям и названию...