Сделать информер "Товары добавлены в корзину" вместо стандартного окна

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

Предположим, у нас есть кастомный компонент детальной страницы товара catalog.element. Заменим в нем стандартную кнопку добавления товара в корзину на свою, например:

Обратите внимание, что ссылка имеет три параметра, значения которых при клике на кнопку должны передаваться в скрипт добавления товара в корзину: pid - id товара, price - цена товара, count - количество товара. Далее, в файл header.php используемого шаблона после тега body добавим html информера:

div id = "informer-basket" class = "informer-basket">

Сразу стилизуем информер и элемент параграфа, который вместе с текстом сообщения будет добавляться в информе перед его отображением:

.informer-basket{
	position: fixed;
	width: 200px;
	padding: 15px;
	z-index: 996;
	top: -100%;
	right: 30px;
	background-color: #fff;
	border: 2px solid #0d0d0e;
}
.informer-basket p{
	line-height: 1.2;
	margin-bottom: 0;	
	font-size: 14px;
	font-weight: bold;
}

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

$("#appendToBasket").click(function(){
	var pid = $(this).attr("pid"),
		price = $(this).attr("price"),
		count = $(this).attr("count")
	
	$.post("/ajax/addBasket.php", {PID: pid, PRICE: price, COUNT: count}, function(data){
		
        $("#informer-basket").html(data)
        $("#informer-basket").animate({top: 50 + "px"}, 1000)

        setTimeout(hideInfoBasket, 5000)		
	})
	
})

Отображение информера делаем с помощью метода animate в течение 1 секунды. Далее, нам нужно, чтобы через какое-то время информер "задвинулся" обратно. Для этого через 5 секунд после отображения информера будет запущена функция hideInfoBasket. Ниже представлен ее код:

function hideInfoBasket(){
    $("#informer-basket").animate({top: -100 + "%"}, 1000)
}

Так, товар с ценой и количеством на сервер через ajax отправили. Теперь создайте в папке /ajax/ вашего проекта файл addBasket.php с таким содержимым:

require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");

Bitrix\Main\Loader::includeModule("sale");
Bitrix\Main\Loader::includeModule("iblock");

$res = CIBlockElement::GetByID($_POST["PID"]);

$prod = $res->GetNext();

$arFields = array(
	"PRODUCT_ID" => $_POST["PID"],
	"PRICE" => $_POST["PRICE"],
	"CURRENCY" => "RUB",
	"QUANTITY" => $_POST["COUNT"],
	"LID" => SITE_ID,
	"DELAY" => "N",
	"CAN_BUY" => "Y",
	"NAME" => $prod["NAME"],
	"CUSTOM_PRICE" => "Y"
);

Bitrix\Catalog\Product\Basket::addProduct($arFields);
	
echo '
Товар добавлен в корзину
';

Этот код вернет в js строку сообщения, которая будет вставлена в информер. Вот собственно и все. В информер, помимо текста, можно добавлять любую информацию, связанную с добавляемым товаром, например, превью-изображение. Для этого в возвращаемую строку нужно добавить тег img, в параметр src которого нужно добавить такое значение:

CFile::GetPath($prod["PREVIEW_PICTURE"]);