Заменить popap "Товар добавлен в корзину" на собственное окно

При добавлении товара в корзину появляется модальное окно "Товар добавлен в корзину", в котором предлагается либо перейти в корзину для оформления покупки, либо закрыть окно.

Это окно не очень удобно для пользователя, так как его каждый раз нужно закрывать. Да и в целом выглядит как что-то устаревшее (хотя его можно стилизовать).

Мы же сделаем окно-уведомление с автоматическим скрытием. В это окно можно вставить что угодно, передав данные с помощью CUtil::PhpToJSObject, включая ссылку на переход в корзину или закрытие вручную.

Стили и создание окна управляются очень гибко, можно модифицировать поведение и внешний вид как угодно под дизайн сайта.

Отключаем штатное окно "Товар добавлен в корзину"

Для этого открываем файл script.js по пути ШАБЛОН_ВАШЕГО_САЙТА/components/bitrix/catalog.item/ШАБЛОН_ВАШЕЙ_КАРТОЧКИ. Удаляем в нем вызов (примерно на 24-й строке):

BX.extend(BasketButton, BX.PopupWindowButton);

В самом низу находим и блокируем функцию initPopupWindow:

initPopupWindow: function () {
    return false;
}

Эту заметку можно совместить с заметкой:
"Если товар в корзине, поменять кнопку на 'В корзине'".

Создаем собственное окно-уведомление

Пример работы на реальном сайте:
Магазин косметики и инструментов для косметологов.

Далее находим функцию basketResult: function (arResult) (она будет ближе к низу) и полностью заменяем ее на:

basketResult: function (arResult) {
    if (!BX.type.isPlainObject(arResult)) {
        return;
    }

    // Генерируем уникальный ID для текущего попапа
    var popupId = 'slideBasketPopup_' + Date.now();

    // Проверим и удалим все старые попапы (если нужно)
    var oldPopups = document.querySelectorAll('[id^="slideBasketPopup_"]');
    oldPopups.forEach(function (oldPopup) {
        // Плавное скрытие старого попапа
        oldPopup.style.transition = "opacity 0.5s ease-in-out, right 0.5s ease-in-out, top 0.5s ease-in-out";
        oldPopup.style.opacity = "0";
        // Удаляем старый через 500 мс
        setTimeout(function () {
            if (oldPopup.parentNode) {
                oldPopup.parentNode.removeChild(oldPopup);
            }
        }, 500);
    });

    // Теперь создаем и показываем новый попап с уникальным ID
    this._showBasketPopup(arResult, popupId);
},

_showBasketPopup: function (arResult, popupId) {
    if (arResult.STATUS !== 'OK') {
        // Алерт с ошибкой, если товар не добавился в корзину
        // можно тоже сделать красивым окном
        alert(arResult.MESSAGE || BX.message('BASKET_UNKNOWN_ERROR'));
        return;
    } else {
        // Если используем аналитику, оставляем это
        this.setAnalyticsDataLayer('addToCart');

        // Это нужно для AJAX счетчика малой корзины
        BX.onCustomEvent('OnBasketChange');

        var productPict = '';
        switch (this.productType) {
            case 1:
            case 2:
            case 7:
                productPict = this.product.pict.SRC;
                break;
            case 3:
                productPict = this.offers[this.offerNum].PREVIEW_PICTURE
                    ? this.offers[this.offerNum].PREVIEW_PICTURE.SRC
                    : this.defaultPict.pict.SRC;
                break;
        }

        // Название товара
        var productName = this.product.name;

        // Если картинки нет, подставляем nophoto.png
        var imgSrc = productPict && productPict.length > 0 ? productPict : "/local/img/nophoto.png";

        // Создание попапа
        var popup = BX.create("div", {
            // Оболочка с классом popap_basket_added
            attrs: {
                id: popupId,
                className: 'popap_basket_added'
            },
            children: [
                // Картинка
                BX.create("img", {
                    attrs: {
                        src: imgSrc,
                        alt: productName
                    }
                }),
                // Блок с названием
                BX.create("div", {
                    attrs: {className: 'popap_basket_added_inner'},
                    children: [
                        BX.create("span", {html: "Добавлено в корзину"}),
                        BX.create("strong", {html: productName})
                    ]
                })
            ]
        });

        // Добавляем попап в body
        document.body.appendChild(popup);

        // Плавно показываем попап через 50 мс
        setTimeout(function () {
            if (!popup) return;
            popup.style.right = "20px";
        }, 50);

        // Скрываем попап через 4 секунды
        setTimeout(function () {
            if (!popup) return;
            popup.style.right = "-300px";

            // Уничтожаем попап через 0.5 с после скрытия
            setTimeout(function () {
                 if (popup.parentNode) popup.parentNode.removeChild(popup);
            }, 500);

        }, 4000);
    } // end if (arResult.STATUS !== 'OK')
},

Внутри все максимально прокомментировано. Самая главная часть — создание и удаление окна с помощью BX.create. В него можно добавлять дополнительные блоки содержимого окна.

Тоже самое проделываем со script.js детальной карточки товара. Ну и собственно немного стилей, их корректируйте под себя:

/* CSS для .popap_basket_added */
.popap_basket_added {
  position: fixed;
  background-color: #fff;
  border-radius: 3px;
  z-index: 10000;
  display: flex;
  padding: 15px;
  opacity: 0.98;
  transition: all 0.5s ease-in-out;
  width: 280px;
  right: -300px;
  top: 30px;
  transform: translateX(-50%);
  box-shadow: 0px 12px 36px rgba(0, 0, 0, 0.1);
}
.popap_basket_added img {
  height: 80px;
  width: 80px;
  object-fit: contain;
  object-position: center;
  margin-right: 10px;
  border-radius: 4px;
  background: #fff;
}
.popap_basket_added_inner {
  color: darkgreen;
  font-size: 13px;
}
.popap_basket_added_inner span {
  display: block;
  margin-bottom: 2px;
}
.popap_basket_added_inner strong {
  /* стили для названия, если нужны */
}