Кнопка купить/добавить в корзину в новом шаблоне интернет-магазина Битрикс 14

Добрый день друзья! В этой статье я расскажу как сделать в новом шаблоне Битрикс 14 версии компонента catalog.element кликом по кнопке Купить/В корзину всплывающее модальное окно с кнопкой Перейти в корзину.
Сейчас там если кликнуть по этой кнопке, то вы просто перейдете в корзину, без всяких уведомлений и модальных окон, что очень неудобно и как-то не солидно для магазина такого уровня.

Итак, я установил свежее решение интернет-магазин битрикс, захожу в любой раздел каталога с карточками товаров, нажимаю на кнопку Купить на любом товаре и вижу такую картину, это компонент catalog.section (элементы раздела).
2014-09-04_23-23-12.png

Вот тоже самое модальное окно и будем делать в шаблоне компонента catalog.element (элемент каталога).

Значит, сначала копируем шаблон компонента каталога в шаблон сайта, в моем случае путь такой:
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix
Работать будем только с этими файлами:
2014-09-04_23-29-28.png
Файлы компонента catalog.section
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix/catalog.section/.default/script.js
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix/catalog.section/.default/template.php
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix/catalog.section/.default/lang/ru/template.php

Файлы компонента catalog.element
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix/catalog.element/.default/script.js
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix/catalog.element/.default/template.php
/bitrix/templates/eshop_adapt_blue/components/bitrix/catalog/template/bitrix/catalog.element/.default/lang/ru/template.php

Дальше я буду сокращать пути к файлам, т.к. понятно, с чем работаем.
В файле /catalog.section/.default/script.js надо найти два метода:
	window.JCCatalogSection.prototype.Basket = function(){...}
	window.JCCatalogSection.prototype.BasketResult = function(arResult){}

и заменить их содержимым аналогичные методы в файле /catalog.element/.default/script.js:
	window.JCCatalogElement.prototype.Basket = function(){}
	window.JCCatalogElement.prototype.BasketResult = function(arResult){}

т.е. содержимое двух методов из шаблона catalog.element нужно заменить содержимым из методов catalog.section.
Либо можете удалить эти два метода в шаблоне catalog.element, скопировать аналогичные два метода из catalog.section в шаблон catalog.element и переименовать в названиях JCCatalogSection на  JCCatalogElement.

Теперь можете обновить страницу товара и проверить работу кнопки купить, если включено кеширование на сайте, обязательно надо его сбросить, модальное окно уже будет работать, товар будет добавляться в корзину, но в таком некрасивом виде, не хватает кнопки и заголовка модального окна, но это не страшно, это цветочки.
2014-09-04_23-54-12.png

Теперь добавим надписи и кнопку, для этого в файле /catalog.element/.default/template.php нужно добавить пять лэнгов в массив BX.message
2014-09-04_23-56-30.png

А взять их можно из файла /catalog.section/.default/template.php, а сами лэнги этих ключей из файла /catalog.section/.default/lang/ru/template.php скопировать в файл /catalog.element/.default/lang/ru/template.php.
После всех транзакций проверяем результат, опять чего-то не хватает, девушка с картинки уже начинает нервничать...
2014-09-05_00-01-54.png

На этом этапе просто к кнопке не добавляется класс всей обертки элемента с классом bx_item_detail bx_blue, немедленно исправим это недоразумение.
Переходим к файлу /catalog.element/.default/script.js и в методе
	window.JCCatalogElement.prototype.BasketResult = function(arResult){}

Находим конструктор кнопки, он в двух условиях этого метода, там надо просто убрать обращения к двум нодам вверх по лестинце, я закомментировал, для наглядности:
2014-09-05_00-11-48.png

Ну вот и все, если вы все сделали как я, то все будет работать в наилучшем виде.
2014-09-05_00-15-10.png

При нажатии на кнопку Купить товар добавляется в корзину, всплывает модальное окно, перехода на страницу корзины в этот момент не происходит, перейти в корзину становится возможно по кнопке из модального окна.
Также прикрепил архив с готовым шаблоном компонента catalog.element со всеми изменениями, рабочий вариант.

Надеюсь это развеет все неясности с модальным окном в новых шаблонах каталога Битрикс 14, если что непонятно, оставляйте комментарии.
Скачать шаблона компонента: catalog.element.tar.gz
Комментарии
Получать ответы на почту
Получать ответы на почту
Подписка на статьи
Выберите рассылку
Последние комментарии