Корзина в popup окне при добавлении товара в каталоге?

Question

[Андрей Белый]

Доброе утро
Надо реализовать такую штуку:

Возможно не спортивно, но реализовал следующим образом:
В компоненте catalog.section, в component_epilog.php воткнул компонент sale.basket.basket и обернул его в попап окно:

<div class="popupCart">
<div class="popupContent">
<span class="closePopupCart"><?=CMax::showIconSvg('', SITE_TEMPLATE_PATH.'/images/svg/Close.svg')?></span>
<!--start--><div id="bid">
<?$APPLICATION->IncludeComponent(
	"bitrix:sale.basket.basket", 
	".default", 
	array(
		"ACTION_VARIABLE" => "action",
		"AUTO_CALCULATION" => "Y",
		"TEMPLATE_THEME" => "blue",
		"COLUMNS_LIST" => array(
			0 => "NAME",
			1 => "DISCOUNT",
			2 => "WEIGHT",
			3 => "DELETE",
			4 => "DELAY",
			5 => "TYPE",
			6 => "PRICE",
			7 => "QUANTITY",
		),
		"COMPONENT_TEMPLATE" => ".default",
		"GIFTS_BLOCK_TITLE" => "Выберите один из подарков",
		"GIFTS_CONVERT_CURRENCY" => "Y",
		"GIFTS_HIDE_BLOCK_TITLE" => "N",
		"GIFTS_HIDE_NOT_AVAILABLE" => "N",
		"GIFTS_MESS_BTN_BUY" => "Выбрать",
		"GIFTS_MESS_BTN_DETAIL" => "Подробнее",
		"GIFTS_PAGE_ELEMENT_COUNT" => "4",
		"GIFTS_PRODUCT_PROPS_VARIABLE" => "prop",
		"GIFTS_PRODUCT_QUANTITY_VARIABLE" => "",
		"GIFTS_SHOW_DISCOUNT_PERCENT" => "Y",
		"GIFTS_SHOW_IMAGE" => "Y",
		"GIFTS_SHOW_NAME" => "Y",
		"GIFTS_SHOW_OLD_PRICE" => "Y",
		"GIFTS_TEXT_LABEL_GIFT" => "Подарок",
		"GIFTS_PLACE" => "BOTTOM",
		"HIDE_COUPON" => "Y",
		"OFFERS_PROPS" => array(
		),
		"PATH_TO_ORDER" => "/order/",
		"PRICE_VAT_SHOW_VALUE" => "N",
		"QUANTITY_FLOAT" => "N",
		"SET_TITLE" => "Y",
		"USE_GIFTS" => "N",
		"USE_PREPAYMENT" => "N",
		"DEFERRED_REFRESH" => "Y",
		"USE_DYNAMIC_SCROLL" => "Y",
		"SHOW_FILTER" => "N",
		"SHOW_RESTORE" => "Y",
		"COLUMNS_LIST_EXT" => array(
			0 => "PREVIEW_PICTURE",
			1 => "DISCOUNT",
			2 => "DELETE",
			3 => "DELAY",
			4 => "TYPE",
			5 => "SUM",
		),
		"COLUMNS_LIST_MOBILE" => array(
			0 => "PREVIEW_PICTURE",
			1 => "DISCOUNT",
			2 => "DELETE",
			3 => "DELAY",
			4 => "TYPE",
			5 => "SUM",
		),
		"TOTAL_BLOCK_DISPLAY" => array(
			0 => "top",
		),
		"DISPLAY_MODE" => "extended",
		"PRICE_DISPLAY_MODE" => "Y",
		"SHOW_DISCOUNT_PERCENT" => "Y",
		"DISCOUNT_PERCENT_POSITION" => "bottom-right",
		"PRODUCT_BLOCKS_ORDER" => "props,sku,columns",
		"USE_PRICE_ANIMATION" => "Y",
		"LABEL_PROP" => array(
		),
		"CORRECT_RATIO" => "Y",
		"COMPATIBLE_MODE" => "Y",
		"EMPTY_BASKET_HINT_PATH" => "/",
		"ADDITIONAL_PICT_PROP_26" => "-",
		"ADDITIONAL_PICT_PROP_28" => "-",
		"BASKET_IMAGES_SCALING" => "adaptive",
		"USE_ENHANCED_ECOMMERCE" => "N"
	),
	false
);?>
</div>

Впринципе все работает, только загвостка в том, что при добавлении товаров когда появляется попап окно корзина пустая:


Хотя если обновить страницу, поменять количество или удалить товар, данные обновляются:


Кто-нибудь решал данный вопрос, поделитесь опытом или может есть готовое решение на маркет? Я глянул но не нашел...

Comments

[PetrPo]

Что-то ты мне еще на прошлый вопрос не ответил, помогло или нет. Почему скидки присвоенные определенной группе пользователей не доступны пользователям которые в эту группу попали через API Bitrix? а уже снова помощи просишь, как-то не комильфо.

Конечно такая задача додстаточно тривиальна. Самый простой способ - это вынести корзину в отдельный файл и загружать его ajax-ом при добавлении товара.

[Андрей Белый]

PetrPo, приоритет в задачах поменялся, к той задаче вернусь на следующей неделе, сегодня еще будет вопрос))

[PetrPo]

Андрей Белый, ок. У тебя попап - это что, какой-то готовый плагин или самопис?

[Андрей Белый]

PetrPo, самописный.
В данный момент работает так:
В component_epilog.php воткнул это:

<div class="popupCart">
<div class="popupContent">
<span class="closePopupCart"><?=CMax::showIconSvg('', SITE_TEMPLATE_PATH.'/images/svg/Close.svg')?></span>
<!--start--><div id="bid">
<?$APPLICATION->IncludeComponent(
  "bitrix:sale.basket.basket", 
  ".default", 
  array(
    "ACTION_VARIABLE" => "action",
    "AUTO_CALCULATION" => "Y",
    "TEMPLATE_THEME" => "blue",
    "COLUMNS_LIST" => array(
      0 => "NAME",
      1 => "DISCOUNT",
      2 => "WEIGHT",
      3 => "DELETE",
      4 => "DELAY",
      5 => "TYPE",
      6 => "PRICE",
      7 => "QUANTITY",
    ),
    "COMPONENT_TEMPLATE" => ".default",
    "GIFTS_BLOCK_TITLE" => "Выберите один из подарков",
    "GIFTS_CONVERT_CURRENCY" => "Y",
    "GIFTS_HIDE_BLOCK_TITLE" => "N",
    "GIFTS_HIDE_NOT_AVAILABLE" => "N",
    "GIFTS_MESS_BTN_BUY" => "Выбрать",
    "GIFTS_MESS_BTN_DETAIL" => "Подробнее",
    "GIFTS_PAGE_ELEMENT_COUNT" => "4",
    "GIFTS_PRODUCT_PROPS_VARIABLE" => "prop",
    "GIFTS_PRODUCT_QUANTITY_VARIABLE" => "",
    "GIFTS_SHOW_DISCOUNT_PERCENT" => "Y",
    "GIFTS_SHOW_IMAGE" => "Y",
    "GIFTS_SHOW_NAME" => "Y",
    "GIFTS_SHOW_OLD_PRICE" => "Y",
    "GIFTS_TEXT_LABEL_GIFT" => "Подарок",
    "GIFTS_PLACE" => "BOTTOM",
    "HIDE_COUPON" => "Y",
    "OFFERS_PROPS" => array(
    ),
    "PATH_TO_ORDER" => "/order/",
    "PRICE_VAT_SHOW_VALUE" => "N",
    "QUANTITY_FLOAT" => "N",
    "SET_TITLE" => "Y",
    "USE_GIFTS" => "N",
    "USE_PREPAYMENT" => "N",
    "DEFERRED_REFRESH" => "Y",
    "USE_DYNAMIC_SCROLL" => "Y",
    "SHOW_FILTER" => "N",
    "SHOW_RESTORE" => "Y",
    "COLUMNS_LIST_EXT" => array(
      0 => "PREVIEW_PICTURE",
      1 => "DISCOUNT",
      2 => "DELETE",
      3 => "DELAY",
      4 => "TYPE",
      5 => "SUM",
    ),
    "COLUMNS_LIST_MOBILE" => array(
      0 => "PREVIEW_PICTURE",
      1 => "DISCOUNT",
      2 => "DELETE",
      3 => "DELAY",
      4 => "TYPE",
      5 => "SUM",
    ),
    "TOTAL_BLOCK_DISPLAY" => array(
      0 => "top",
    ),
    "DISPLAY_MODE" => "extended",
    "PRICE_DISPLAY_MODE" => "Y",
    "SHOW_DISCOUNT_PERCENT" => "Y",
    "DISCOUNT_PERCENT_POSITION" => "bottom-right",
    "PRODUCT_BLOCKS_ORDER" => "props,sku,columns",
    "USE_PRICE_ANIMATION" => "Y",
    "LABEL_PROP" => array(
    ),
    "CORRECT_RATIO" => "Y",
    "COMPATIBLE_MODE" => "Y",
    "EMPTY_BASKET_HINT_PATH" => "/",
    "ADDITIONAL_PICT_PROP_26" => "-",
    "ADDITIONAL_PICT_PROP_28" => "-",
    "BASKET_IMAGES_SCALING" => "adaptive",
    "USE_ENHANCED_ECOMMERCE" => "N"
  ),
  false
);?>
</div>

.popupCart скрыт display:none;, при нажатие на кнопку «В корзину»:

Срабатывает скрипт:

$(document).on('click', '.button_block', function () {
	$('.popupCart').addClass(' open');
	$('.popupCart').appendTo($('body'));
});

.button_block это класс кнопки

[PetrPo]

Андрей Белый,
1. а что других попапов на сайте нет? или они все самописные?
2. jquery fancybox плагин случайно не подключен?
3. скинь ссылку на сайт, гляну что там есть

[Андрей Белый]

PetrPo, https://zamm.ru/
А зачем мне подключать сторонние плагины? Мне самый простецкий попап нужен, и я вижу этот попап как простую смену классов у дива

[PetrPo]

Андрей Белый, как раз для поддержки ajax, можешь и свой написать, я не настаиваю. Ну так fancybox уже подключен зачем ты костыли городишь. Вот недавно человеку помогал, на основе этого кода просто постаь свой компонент корзины вместо формы и получишь готовое решение

пример с fancybox3
1. кнопка

<span class="btn js-offer-request" data-fancybox_ajax_form data-src="<?=$this->getFolder().'/ajax_form.php';?>" data-on_name="<?=$arItem['NAME'];?>" data-element_id="<?=$arItem['ID'];?>">
    <span>Забронировать экскурсию</span>
</span>

- data-fancybox_ajax_form - атрибут, типа флага будет для js скрипта
- data-src - путь до ajax файла с формой
- data-on_name, data-element_id - название атрибута, после data, соответствует названию параметра передаваемого в компонент формы (можно указывать любые, все они будут доступны внутри компонента формы, через массив $arParams)

2. внутри шаблона своего списка новостей, файл script.js в конце добавь

var getNodeData = function(element, arrayKeysUnset) {
	var nodeData = $(element).clone().data();
	
	if(arrayKeysUnset && arrayKeysUnset.length) {
		for(var key of arrayKeysUnset) {
			delete nodeData[key];
		}
	}
	
	for(var key in nodeData) {
		nodeData[key] = encodeURIComponent(nodeData[key]);
	}
	
	return nodeData;
}

$(document).on('click', '[data-fancybox_ajax_form]', function() {
	$.fancybox.open(this, {
		type: 'ajax',
		ajax: {
			settings: {
				data: getNodeData(this, ['src', 'fancybox_ajax_form'])
			}
		}
	});
});

3. в этом же шаблоне создаешь файл ajax_form.php

<?
require_once($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');

$request = \Bitrix\Main\Application::getInstance()->getContext()->getRequest();
$requestValues = $request->getValues();

if(isset($requestValues['fancybox']))
	unset($requestValues['fancybox']);

// добавление параметров для компонента, из data атрибутов кнопки
$parameters = [];
if($requestValues) {
	foreach($requestValues as $key => $value) {
		$value = urldecode($value);
		
		if(defined('LANG_CHARSET') && LANG_CHARSET == 'windows-1251')
			$value = \Bitrix\Main\Text\Encoding::convertEncoding($value, 'utf-8', 'windows-1251');
		
		$parameters[strtoupper($key)] = $value;
	}
}

// здесь подключаешь свой компонент формы
$APPLICATION->IncludeComponent(
	"bitrix:main.feedback",
	"bootstrap_v4",
	array(
		// у тебя нет этих параметров, указал для примера, оставь пустой массив
		"EMAIL_TO" => "[e-mail]",
		"EVENT_MESSAGE_ID" => array(),
		"OK_TEXT" => "Спасибо, ваше сообщение принято.",
		"REQUIRED_FIELDS" => array("NAME","EMAIL"),
		"USE_CAPTCHA" => "Y",
		'AJAX_MODE' => 'Y',
		
	) + $parameters
);

[Андрей Белый]

PetrPo, впринципе разобрался как это работает, но пока это не работает :)
Решил завардампить массив $requestValues и в нем нет такого элемента ['fancybox'], а судя по коду он нужен + в devtools вылетает ошибка:

В ajax_form.php передаю компонент:

$APPLICATION->IncludeComponent(
	"bitrix:sale.basket.basket",
	"bootstrap_v4",
	Array(
		 "ACTION_VARIABLE" => "action",
		 "AUTO_CALCULATION" => "Y",
		 "TEMPLATE_THEME" => "blue",
		 "COLUMNS_LIST" => array("NAME","DISCOUNT","WEIGHT","DELETE","DELAY","TYPE","PRICE","QUANTITY"),
		 "COMPONENT_TEMPLATE" => ".default",
		 "GIFTS_BLOCK_TITLE" => "Выберите один из подарков",
		 "GIFTS_CONVERT_CURRENCY" => "Y",
		 "GIFTS_HIDE_BLOCK_TITLE" => "N",
		 "GIFTS_HIDE_NOT_AVAILABLE" => "N",
		 "GIFTS_MESS_BTN_BUY" => "Выбрать",
		 "GIFTS_MESS_BTN_DETAIL" => "Подробнее",
		 "GIFTS_PAGE_ELEMENT_COUNT" => "4",
		 "GIFTS_PRODUCT_PROPS_VARIABLE" => "prop",
		 "GIFTS_PRODUCT_QUANTITY_VARIABLE" => "",
		 "GIFTS_SHOW_DISCOUNT_PERCENT" => "Y",
		 "GIFTS_SHOW_IMAGE" => "Y",
		 "GIFTS_SHOW_NAME" => "Y",
		 "GIFTS_SHOW_OLD_PRICE" => "Y",
		 "GIFTS_TEXT_LABEL_GIFT" => "Подарок",
		 "GIFTS_PLACE" => "BOTTOM",
		 "HIDE_COUPON" => "N",
		 "OFFERS_PROPS" => array("SIZES_SHOES","SIZES_CLOTHES"),
		 "PATH_TO_ORDER" => "/personal/order.php",
		 "PRICE_VAT_SHOW_VALUE" => "N",
		 "QUANTITY_FLOAT" => "N",
		 "SET_TITLE" => "Y",
		 "USE_GIFTS" => "Y",
		 "USE_PREPAYMENT" => "N",
		 'AJAX_MODE' => 'Y'
	)
);

[Андрей Белый]

PetrPo, эта ошибка возникает если использовать именно sale.basket.basket, попробовал main.feedback все нормалды

[PetrPo]

Андрей Белый, Да там не хватает перед вызовом компонента

$APPLICATION->ShowAjaxHead(true, true, true, true);

UPD
подгружает стли и скрипты

[Андрей Белый]

PetrPo, слушай, может у тебя есть какие-нибудь курсы по вебу или может как-нибудь с тобой можно консультироваться на постоянной основе? Спасибо, что отвечаешь на хабре, твои советы и решения пока самые профитные, но иногда бывает такое, что есть вопрос и пока не забыл хочу его с кем-то обсудить, опыт перенять

[PetrPo]

Андрей Белый, если что, про data атрбуты кнопки - это сделано для универсальности, допсутим если ты из товара хочешь форму подгрузить и чтобы у нее поля заполнены были, например подставилось название текущего товара, то
1. в кнопке указываешь data-element_name="<?=$arResult['NAME'];?>"
2. в ajax файлике после цикла по requestValues, заполнится массив $parameters; $parameters['ELEMENT_NAME'] => тут будет название - добавляешь в параметры вызова компонента и внутри у тебя будет доступен $arParams['ELEMENT_NAME']
3. В data-src ты можешь указать любой путь к нужному файлу ajax

[Андрей Белый]

PetrPo, да, я понял, что data атрибуты нужны для параметров компонента, мне они в данный момент ненужны)

[Андрей Белый]

PetrPo, ты бог битрикса, спасибо большое, все работает хорошо)
Давай отмечу как решение!

[PetrPo]

Андрей Белый, поставь еще лайк на решении, чтобы мне как ответ эксперта засчитали.

слушай, может у тебя есть какие-нибудь курсы по вебу

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

иногда бывает такое, что есть вопрос и пока не забыл хочу его с кем-то обсудить, опыт перенять

Записывай, я сам так делаю - это единственно правильное решение. Как показывает практика, быстрое решение вопроса в программировании - это ху.вое решение. Задавай вопрос здесь, не думаю что по почте я тебе быстрее отвечу, соцсетями не пользуюсь.

spoiler

В остальном я сам еще учусь и не дорос до того чтобы учить других))

[Андрей Белый]

PetrPo, спасибо, скоро будет еще вопрос, а пока хорошего вечера :)
Книг по по вебу очень много, может посоветуешь, что сейчас действительно стоит изучать?

[PetrPo]

Андрей Белый, давно программируешь?

Дальше мысли вслух

spoiler

Если не очень много, то на мой взгляд лучше сначала насытиться кайфом от самого факта работающего кода, то что он хреново организован или с багами - так это неизбежность))
Вот когда сложится четкое впечатление, что можешь написать рабочий код, но как-то надоело одно и тоже, можно переходить так скажем к творчеству. Но говорю эту грань ты должен сам для себя выявить. На хабре как-то наткнулся на забавную статью. Там есть такая фаза становления программистом как Пустыня отчаяния, вот для меня примерно такое состояние стало отправной точкой в мир толстых книг.
Почему так?
1. У меня лично после прочтения каждой книги наступает стопор - когда часами смотришь в экран, но при этом не пишешь ни строчки кода, потому что не понимаешь как применить новые знания, в книге-то оно всегда гладко
2. Начинает казаться, что все что ты пишешь не соответстввует тому как рассказала тебе книга, а значит не правильно. Приходится самому себе доказывать, что это не так и код действительно стал лучше, конечно он не такой как в книге, нет единственно правильного кода ))

По вебу не посоветую. Могу посоветовать книги общего направления, позиционирующие себя как без привязки к определенному языку, но во всех них примеры на java, поэтому лучше конечно сначала с java познакомиться, глубоких познаний не требуется.

spoiler

1. Head First. Изучаем Java - этого хватит для всех остальных книг
2. Мартин. Чистый код создание, анализ и рефакторинг. Книга, которую надо читать не за один раз, а постепенно, после улучшения своих навыков, я до сих пор не осилил - но она действительно крутая. Просто она прямо рассчитана на разный уровень, ну там сам поймешь когда надо будет остановиться
3. Head First. Объектно-ориентированный анализ и проектирование - может показаться какой-то ерундой, но я лично непроизвольно стал применять рассказанные в этой книге подходы
4. Швец А. Погружение в паттерны проектирования - у него есть сайт с примерами на разных языках. Сама книга с псевдокодом, предполагает понимание ООП. Также не надо ее проглатывать за раз - это бессмысленно, понять все паттерны сразу не возможно, их надо переваривать.
5. Кент Бек. Экстремальное программирование. Разработка через тестирование - книга про TDD, сам еще не читал, она следующая на очереди. Очень кстати интересная методология, кажется чем-то нереальным, но когда используешь такой подход, то код сам собой как-то появляется и главное работает без запинки
6. Применение UML 2.0 и шаблон проектирования - тоже мощная книга, также книга которую надо не за один присест изучить, а возвращаться по мере роста навыков.
7. Адитья Бхаргава Грокаем алгоритмы - прикольная книга, без всякой нудной херни

Только сразу говорю, прочтением этих книг на собеседовании не повы.бываешься)). Там знают только Канта, да Банду четырех - книги, которые невозможно читать

Другую литературы советую уже выбирать с уклоном на конкретный язык программирования, ну и конечно официальную документацию. Ну и писать голые веще, без использования фреймворков конечно нет никакого смысла, только если для своего какого-то удовлетворения, поэтому документацией к фреймворку тоже надо уметь пользоваться, неважно Битрикс это или нет.
Я сам всякие новые для себя темки тестирую на битриксе, потому что
- php достаточно удобен при оттачивании навыков и не такой придирчивый
- не надо заморачиваться за тестовые данные
- есть документация и возможность посмотреть их реализацию в исходниках и вбесплатных модулях с маркетплейса
- ну и потому что уже знаком с битриксом, а учить какой-то другой php фреймворк считаю для себя потерей времени

[Андрей Белый]

PetrPo, есть один момент, https://zamm.ru/catalog/stoly/ofisnye_stoly/format..., попробуй сам добавь товар в корзину. Там буквально в течении секунды формируется модальное окно и это как-то криво выглядит, как решить?

[Андрей Белый]

PetrPo, я так думаю, что там вначале контент грузится, а потом стили?

[PetrPo]

Андрей Белый, ну видимо вот из-за этого ссылка.

UPD
попробуй для начала в главное модуле объединение css, js отключи

[Андрей Белый]

PetrPo, выключено, там только работает «переместит js в конец документа»

[PetrPo]

Андрей Белый,
1. ну так выключи и проверь (врядли это поможет)
2. модуль-то стоит? он как раз за какое-то кеширование js css отвечает, я хз че это за модуль, я у себя протестировал все нормально грузится

Так у тебя готовое решение с маркетплейса?

[Андрей Белый]

PetrPo, не у меня, а заказчика, да, они все так любят Аспро )))

[PetrPo]

Андрей Белый, а там разве нет корзины во всплывающем окне? Ну вообщем я думаю, что это из-за стороннего модуля, на который я ссылку тебе скидывал. Если посмотришь там кеш какой-то кастомный, поподает в папку ammina.cache и видимо какая-то херня там накручена

[Андрей Белый]

PetrPo, гуглил и ничего не нашел

[PetrPo]

Андрей Белый, попробуй вот из этого файла /local/components/bitrix/sale.basket.basket/templates/popupCart/style.css перенеси стили в template_styles.css

Answer 1

[PetrPo]

Решение в комментариях