just_guy95
@just_guy95
Bitrix 1C

Не работают сторонние скрипты в открытом модальном окне Fancybox?

Объясняю поэтапно
1. Заказчик хочет сделать быстрый просмотр товара из списка товаров:
60dd8a4f76ff2493808993.jpeg

2. Реализую это следующим образом:
2.1. В шаблоне компонента списка товаров(catalog.section) создаю кнопку, которая будет открывать модалку с компонентом catalog.element
60dd8afe40e68922856583.png
<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>


2.2. В script.js этого же шаблона навешиваю событие по клику на кнопку и через ajax fancybox открываю файл ajax_form.php в модалке:
$(document).on('click', '[data-fancybox_ajax_form]', function () {
	$.fancybox.open(this, {
		type: 'ajax',
		ajax: {
			settings: {
				data: getNodeData(this, ['src', 'fancybox_ajax_form'])
			}
		}
	});
});


2.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();
$APPLICATION->ShowAjaxHead(true, true, true, true);
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:catalog.element", 
	"catalog-element-new", 
	array(
		"ACTION_VARIABLE" => "action",
		"ADD_DETAIL_TO_SLIDER" => "N",
		"ADD_ELEMENT_CHAIN" => "N",
		"ADD_PICT_PROP" => "-",
		"ADD_PROPERTIES_TO_BASKET" => "Y",
		"ADD_SECTIONS_CHAIN" => "Y",
		"ADD_TO_BASKET_ACTION" => array(
			0 => "BUY",
		),
		"ADD_TO_BASKET_ACTION_PRIMARY" => array(
			0 => "BUY",
		),
		"BACKGROUND_IMAGE" => "-",
		"BASKET_URL" => "/personal/basket.php",
		"BLOG_USE" => "N",
		"BRAND_PROPERTY" => "BRAND_REF",
		"BRAND_PROP_CODE" => array(
			0 => "BRAND_REF",
			1 => "",
		),
		"BRAND_USE" => "N",
		"BROWSER_TITLE" => "-",
		"CACHE_GROUPS" => "Y",
		"CACHE_TIME" => "36000000",
		"CACHE_TYPE" => "A",
		"CHECK_SECTION_ID_VARIABLE" => "N",
		"COMPARE_PATH" => "",
		"COMPATIBLE_MODE" => "Y",
		"CONVERT_CURRENCY" => "Y",
		"CURRENCY_ID" => "RUB",
		"DATA_LAYER_NAME" => "dataLayer",
		"DETAIL_PICTURE_MODE" => "MAGNIFIER",
		"DETAIL_URL" => "",
		"DISABLE_INIT_JS_IN_COMPONENT" => "N",
		"DISCOUNT_PERCENT_POSITION" => "bottom-right",
		"DISPLAY_COMPARE" => "N",
		"DISPLAY_NAME" => "Y",
		"DISPLAY_PREVIEW_TEXT_MODE" => "E",
		"ELEMENT_CODE" => "",
		"ELEMENT_ID" => "76416",
		"FB_USE" => "N",
		"FILE_404" => "",
		"GIFTS_DETAIL_BLOCK_TITLE" => "Выберите один из подарков",
		"GIFTS_DETAIL_HIDE_BLOCK_TITLE" => "N",
		"GIFTS_DETAIL_PAGE_ELEMENT_COUNT" => "3",
		"GIFTS_DETAIL_TEXT_LABEL_GIFT" => "Подарок",
		"GIFTS_MAIN_PRODUCT_DETAIL_BLOCK_TITLE" => "Выберите один из товаров, чтобы получить подарок",
		"GIFTS_MAIN_PRODUCT_DETAIL_HIDE_BLOCK_TITLE" => "N",
		"GIFTS_MAIN_PRODUCT_DETAIL_PAGE_ELEMENT_COUNT" => "3",
		"GIFTS_MESS_BTN_BUY" => "Выбрать",
		"GIFTS_SHOW_DISCOUNT_PERCENT" => "Y",
		"GIFTS_SHOW_IMAGE" => "Y",
		"GIFTS_SHOW_NAME" => "Y",
		"GIFTS_SHOW_OLD_PRICE" => "Y",
		"HIDE_NOT_AVAILABLE_OFFERS" => "N",
		"IBLOCK_ID" => "8",
		"IBLOCK_TYPE" => "catalog",
		"LABEL_PROP" => "NEWPRODUCT",
		"LABEL_PROP_MOBILE" => "",
		"LABEL_PROP_POSITION" => "top-left",
		"LINK_ELEMENTS_URL" => "link.php?PARENT_ELEMENT_ID=#ELEMENT_ID#",
		"LINK_IBLOCK_ID" => "",
		"LINK_IBLOCK_TYPE" => "",
		"LINK_PROPERTY_SID" => "",
		"MAIN_BLOCK_OFFERS_PROPERTY_CODE" => array(
			0 => "COLOR_REF",
		),
		"MAIN_BLOCK_PROPERTY_CODE" => array(
			0 => "MATERIAL",
		),
		"MESSAGE_404" => "",
		"MESS_BTN_ADD_TO_BASKET" => "В корзину",
		"MESS_BTN_BUY" => "Купить",
		"MESS_BTN_COMPARE" => "Сравнить",
		"MESS_BTN_SUBSCRIBE" => "Подписаться",
		"MESS_COMMENTS_TAB" => "Комментарии",
		"MESS_DESCRIPTION_TAB" => "Описание",
		"MESS_NOT_AVAILABLE" => "Нет в наличии",
		"MESS_PROPERTIES_TAB" => "Характеристики",
		"MESS_RELATIVE_QUANTITY_FEW" => "мало",
		"MESS_RELATIVE_QUANTITY_MANY" => "много",
		"MESS_SHOW_MAX_QUANTITY" => "Наличие",
		"META_DESCRIPTION" => "-",
		"META_KEYWORDS" => "-",
		"OFFERS_CART_PROPERTIES" => array(
			0 => "ARTNUMBER",
			1 => "COLOR_REF",
			2 => "SIZES_SHOES",
			3 => "SIZES_CLOTHES",
		),
		"OFFERS_FIELD_CODE" => array(
			0 => "",
			1 => "",
		),
		"OFFERS_LIMIT" => "0",
		"OFFERS_PROPERTY_CODE" => array(
			0 => "COLOR_REF",
			1 => "SIZES_SHOES",
			2 => "SIZES_CLOTHES",
			3 => "",
		),
		"OFFERS_SORT_FIELD" => "sort",
		"OFFERS_SORT_FIELD2" => "id",
		"OFFERS_SORT_ORDER" => "asc",
		"OFFERS_SORT_ORDER2" => "desc",
		"OFFER_ADD_PICT_PROP" => "MORE_PHOTO",
		"OFFER_TREE_PROPS" => array(
			0 => "COLOR_REF",
			1 => "SIZES_SHOES",
			2 => "SIZES_CLOTHES",
		),
		"PARTIAL_PRODUCT_PROPERTIES" => "Y",
		"PRICE_CODE" => array(
			0 => "Розничная",
		),
		"PRICE_VAT_INCLUDE" => "Y",
		"PRICE_VAT_SHOW_VALUE" => "N",
		"PRODUCT_ID_VARIABLE" => "id",
		"PRODUCT_INFO_BLOCK_ORDER" => "sku,props",
		"PRODUCT_PAY_BLOCK_ORDER" => "rating,price,quantityLimit,quantity,buttons",
		"PRODUCT_PROPERTIES" => array(
			0 => "NEWPRODUCT",
			1 => "MATERIAL",
		),
		"PRODUCT_PROPS_VARIABLE" => "prop",
		"PRODUCT_QUANTITY_VARIABLE" => "",
		"PRODUCT_SUBSCRIPTION" => "Y",
		"PROPERTY_CODE" => array(
			0 => "MATERIAL",
			1 => "MANUFACTURER",
			2 => "",
		),
		"RELATIVE_QUANTITY_FACTOR" => "5",
		"SECTION_CODE" => "",
		"SECTION_CODE_PATH" => "",
		"SECTION_ID" => $_REQUEST["SECTION_ID"],
		"SECTION_ID_VARIABLE" => "SECTION_ID",
		"SECTION_URL" => "",
		"SEF_MODE" => "N",
		"SEF_RULE" => "",
		"SET_BROWSER_TITLE" => "Y",
		"SET_CANONICAL_URL" => "N",
		"SET_LAST_MODIFIED" => "N",
		"SET_META_DESCRIPTION" => "Y",
		"SET_META_KEYWORDS" => "Y",
		"SET_STATUS_404" => "N",
		"SET_TITLE" => "Y",
		"SET_VIEWED_IN_COMPONENT" => "N",
		"SHOW_404" => "N",
		"SHOW_CLOSE_POPUP" => "N",
		"SHOW_DEACTIVATED" => "N",
		"SHOW_DISCOUNT_PERCENT" => "Y",
		"SHOW_MAX_QUANTITY" => "N",
		"SHOW_OLD_PRICE" => "N",
		"SHOW_PRICE_COUNT" => "1",
		"SHOW_SLIDER" => "Y",
		"SLIDER_INTERVAL" => "5000",
		"SLIDER_PROGRESS" => "N",
		"STRICT_SECTION_CHECK" => "N",
		"TEMPLATE_THEME" => "blue",
		"USE_COMMENTS" => "Y",
		"USE_ELEMENT_COUNTER" => "Y",
		"USE_ENHANCED_ECOMMERCE" => "Y",
		"USE_GIFTS_DETAIL" => "Y",
		"USE_GIFTS_MAIN_PR_SECTION_LIST" => "Y",
		"USE_MAIN_ELEMENT_SECTION" => "N",
		"USE_PRICE_COUNT" => "N",
		"USE_PRODUCT_QUANTITY" => "N",
		"USE_VOTE_RATING" => "Y",
		"VK_USE" => "N",
		"VOTE_DISPLAY_AS_RATING" => "rating",
		"COMPONENT_TEMPLATE" => "catalog-element-new",
		"SHOW_SKU_DESCRIPTION" => "N",
		"COMPOSITE_FRAME_MODE" => "A",
		"COMPOSITE_FRAME_TYPE" => "AUTO"
	),
	false
);


3. В чем проблема.
3.1. Проблема в том, что catalog.element должен выглядеть так:
60dd950dd0dae327144271.png
За смену и отображение картинок здесь отвечает slick, а к кнопке «Купить в 1 клик» привязан тот же fancybox, открывает модалку с формой и собственно если catalog.element не открывать в модалке через fancybox, а например открыть в обычном index.php, то все работает как на картинке.
3.2 А в модалке он выглядит так:
60dd9790a2f48276898499.png
slick к галерее с изображениями не подрубился, и к кнопке «Купить в 1 клик» не подрубился fancybox

Впринципе по задаче все, но в качестве дополнительного материала добавлю. Я пытался решить вопрос эмпирическим путем и вот что обнаружил:
4. Решил протестить slick и flexbox отдельно от bitrix;
4.1 Скачал на комп openserver.
4.2 В корне сайта test.ru создал index.php, подключил jquery, fancybox и slick и создал кнопку которая открывает файл ajax.php в модалке:
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/library/jquery.fancybox.min.css">
	<link rel="stylesheet" href="slick-master/slick-theme.css">
	<link rel="stylesheet" href="slick-master/slick.css">
	<title>Document</title>
</head>
<body>
	<a data-fancybox data-type="ajax" data-src="ajax.php" href="javascript:;">Вызов 1</a>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="library/jquery.fancybox.min.js"></script>
	<script src="slick-master/slick.js"></script>
</body>


4.2 В ajax.php создал кнопку которая открывает файл server-information.php в модалке:
<a data-fancybox data-type="ajax" data-src="server-information.php" href="javascript:;">Вызов 2</a>
<style>
	.box {
		width: 100px;
		height: 100px;
		background-color: red;
		display: inline-block;
	}
</style>


4.3 Содержание server-information.php:
<h1>Работает!</h1>

<div>
	<div class="list_element slaider">
		<div><span class="box"></span></div>
		<div><span class="box"></span></div>
		<div><span class="box"></span></div>
		<div><span class="box"></span></div>
		<div><span class="box"></span></div>
		<div><span class="box"></span></div>
		<div><span class="box"></span></div>
	</div>
</div>
<script>
	$('.slaider').slick({
		slidesToShow: 3,
		slidesToScroll: 1,
		autoplay: true,
		autoplaySpeed: 2000,
	});
</script>


!!Продолжение в комменатриях топика!!
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы