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

Если товар в корзине, поменять кнопку на "В корзине" в новом шаблоне 1С-Битрикс

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

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

Логика работы будет заключаться в том что при клике на кнопку "В корзину" мы ее прячем и показываем, ранее спрятанную, ссылку "В корзине" которая будет отправлять пользователя на оформление заказа.

Рассматривать буду на примере детальной карточки, но заметка подойдет и для списка элементов раздела, с небольшой модификацией. При этом, если пользователь вышел из карточки (добавив товар в корзину) и снова в нее вернулся - у него останется ссылка "В корзине".

Заменям ссылку-кнопку "В корзину" на "В корзине", при клике

Блок с ссылкой кнопкой, в шаблоне, выглядит так:


<?if ($showAddBtn){?>
<div class="mb-3">
	<a
	class="btn <?=$showButtonClassName?> product-item-detail-buy-button"
	id="<?=$itemIds['ADD_BASKET_LINK']?>"
	href="javascript:void(0);">
		В корзину
	</a>
</div>
<?php}?>

Сначала, давайте сменим ссылку a на span, так как для SEO не очень хорошо наличие ссылки ведущей в никуда.

В карточке, может быть это не очень критично, но вот в списке таких ссылок получается много (да, эту инструкцию можно применить и для списка товаров). Меняем a на span и удаляем href, все будет работать - больше ничего не надо дорабатывать. Заодно избавимся от переизбытка class-ов, что бы проще версталось:


<?if ($showAddBtn){?>
<div class="mb-3">
	<span 
	class="add_to_cart" 
	id="<?=$itemIds['ADD_BASKET_LINK']?>">
		В корзину
	</span>
</div>
<?php}?>

У это spana-а есть уникальный для товара идентификатор , привязавшись к нему будем прятать span, при клике и показывать кнопку перехода в корзину.


<?if ($showAddBtn){?>
<div class="mb-3">
	<span 
	class="add_to_cart" 
	id="<?=$itemIds['ADD_BASKET_LINK']?>">
 		В корзину
 	</span>
 	<a 
	 class="link_to_card_dn" 
	 href="<?=$arParams['BASKET_URL']?>" 
	 id="to_cart_<?=$itemIds['ADD_BASKET_LINK']?>">
 		В корзине
 	</a>
 </div>

 <script>
 $('#<?= $itemIds['BASKET_ACTIONS_ID'] ?>').click(function () {
     $(this).addClass('add_to_cart_dn');
     $('#to_cart_<?=$itemIds['ADD_BASKET_LINK']?>').addClass('link_to_card_db');
 });
 </script>

<style type="text/css">
<!--
.link_to_card_dn, .add_to_cart_dn {
	 display: none;
}
.link_to_card_db {
	 display: block;
}
-->
</style>
<?php}?>

Суть заключается в следующем: изначально span c "В корзину" виден, а ссылка "В корзине" спрятана в display:none.

  • При клике по span-у к нему добавляется class add_to_cart_dn который его прячет (добавляет стиль с display:none)
  • К ссылке "В корзине" добавляется class link_to_card_db который переводит ее в display: block;
Само собой стили и скрипты данной логики можно разнести по файлам style.css и script.js, что бы не болтались прямо в шаблоне. Оставил так для упрощения.

Здесь все готово. Но, если пользователь обновит страницу, все стили вернутся в исходное состояние и хотя товар и будет в корзине, пользователь увидит кнопку "В корзину".

Проверка наличия товара в корзине

Что бы поправить этот момент нужно проверить наличие текущего товара в корзине пользователя и обработать вывод кнопок "В корзину" и "В корзине"

В result_modifer.php карточки товара добавляем:


$dbBasketItems = CSaleBasket::GetList(
    array(
        "NAME" => "ASC",
        "ID" => "ASC"
    ),
    array(
        "FUSER_ID" => CSaleBasket::GetBasketUserID(),
        "LID" => SITE_ID,
        "PRODUCT_ID" => $arResult['ID'],
        "ORDER_ID" => "NULL",
        "DELAY" => "N"
    ),
    false,
    false,
    array("PRODUCT_ID")
);
while ($arItemsBasket = $dbBasketItems->Fetch()) {
    $arResult['ITEM_HAS_IN_CART'] = $arItemsBasket['PRODUCT_ID'];
}

Методом CSaleBasket::GetBasketUserID мы получили корзину текущего пользователя и отфильтровали текущий товар. Если этот товар есть в корзине-то $arResult['ITEM_HAS_IN_CART'] будет не пустой.

Далее дорабатываем наш кусочек кода:


<if ($showAddBtn){
if ($arResult['ITEM_HAS_IN_CART']) {
	$itemInCart = true;
}
?>
<div class="mb-3">
	<span
 	class="add_to_cart<?echo $itemInCart ? ' add_to_cart_dn' : ''?>"
 	id="<?=$itemIds['ADD_BASKET_LINK']?>">
 		В корзину
 	</span>
	<a
	 class="link_to_card_dn<?echo $itemInCart ? ' link_to_card_db' : ''?>"
	 href="<?=$arParams['BASKET_URL']?>"
	 id="to_cart_<?=$itemIds['ADD_BASKET_LINK']?>" >
	 	В корзине
	 </a>
 </div>

 <script>
 $('#<?= $itemIds['BASKET_ACTIONS_ID'] ?>').click(function () {
     $(this).addClass('add_to_cart_dn');
     $('#to_cart_<?=$itemIds['ADD_BASKET_LINK']?>').addClass('link_to_card_db');
 });
 </script>

<style type="text/css">
<!--
.link_to_card_dn, .add_to_cart_dn {
	 display: none;
}
.link_to_card_db {
	display: block;
}
-->
</style>
<?php}?>

Тут все просто: если $arResult['ITEM_HAS_IN_CART'] существует мы сразу прячем span и показываем ссылку "В корзине", теми же самыми стилями которые используем в js скрипте.

При желании, можно вообще попрятать все за условие, что бы в исходном коде и не было упоминания о spаn-е и скрипте. Тут уже, на ваше усмотрение:

Михаил Базаров 28.05.2022
Что бы спрятатаь, точнее не показывать, всплывающее окно о добавлении товара в корзину.

В шаблоне catalog.item и catalog.element комментируем строчку с инициализацией этого окна.
Находим ее в файлах script.js

Код
this.initPopupWindow();

в секции
Код
basketResult: function(arResult)

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

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

Удалить товары из корзины, если есть определенные товары. Просмотров: 1915 Задача: если в корзину добавлены товары с определенным свойством, нужно удалить из корзины... Следующая/предыдущая новость/статья при просмотре подробной в Битрикс Просмотров: 18287 Дизайн создается только для наглядного и удобного предоставления содержимого сайта, пользо... Снять ограничение на количество символов в комментарии к заказу магаз... Просмотров: 12607 Как многим известно, в интернет-магазине на Битрикс имеется ограничение на количество симв... Установить остатки товара на складе из доступных остатков. Просмотров: 6229 Задача, заполнить остатки товаров, в 1С-Битрикс, из параметра "Доступное количество". Сортировка элементов по индексу сортировки значений типа список Просмотров: 11592 Внутри любого компонента есть заранее заложенные поля для сортировки элементов. МОжно сорт... Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 11797 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Если товар в корзине, поменять кнопку на "В корзине" в новом шаблоне ... Просмотров: 1769 Ранее я уже делал заметку на эту тему. Тогда, мы меняли значение input-а при добавлении то... Самодельная форма добавления элемента на API Битрикс Просмотров: 45279 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Ссылки для добавления и удаления товара из сравнения в Битрикс Просмотров: 8715 Просто оставляю это здесь, вставка ссылок на добавление и удаление товара из сравнения, ес... Открытие мобильного приложения Apache Cordova по ссылке Просмотров: 1187 Достаточно часто нужно реализовывать открытие мобильного приложения по ссылке. Например: п... AJAX корзина с отправкой количества из раздела каталога Просмотров: 20154 Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При... Заполнение габаритов товара, после обмена с 1С, из свойств элемента и... Просмотров: 11821 Если Ваш интернет-магазин интегрирован с 1С, скорее всего столкнулись с такой проблемой: 1... Fancybox в стандартном шаблоне детальной карточки товара, вместо вспл... Просмотров: 105 Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карт... Добавление и удаление из сравнения на AJAX: Битрикс Просмотров: 18759 Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил оп... Быстрая отписка от всех рассылок модуля "E-mail маркетинг", в кабинет... Просмотров: 277 Задача: дать пользователям возможность отписаться от всех рассылок "E-mail маркетинга", не... Правильное подключение стилей и скриптов в Битрикс Просмотров: 85235 Есть несколько способов подключения файлов стилей и скриптов, при верстке шаблонов в систе... Свойство: привязка к Яндекс:Картам - вывести из нескольких элементов ... Просмотров: 18668 Предположим, что у вас есть инфоблок со свойством "Привязка к яндекс картам". В этом инфоб... Массово: применить наценку ко всем товарам каталога с пересчетом от б... Просмотров: 6372 Рассмотрим как, в магазине работающем на 1С-битрикс, массово применить наценку на все това... Сравнение двух типов цен для иммитации системы скидок, в Битрикс Просмотров: 6820 Встала задачка, иммититровать систему скидок в интернет магазине на Битрикс. Из 1С-УТ, на ... Определить местоположение пользователя и показать магазины поблизости... Просмотров: 1831 Задача: в мобильном приложении, которое открывает сайт на 1С-Битрикс внутри себя, нужно оп...