Объясняю поэтапно
1. Заказчик хочет сделать быстрый просмотр товара из списка товаров:
2. Реализую это следующим образом:
2.1. В шаблоне компонента списка товаров(catalog.section) создаю кнопку, которая будет открывать модалку с компонентом catalog.element
<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 должен выглядеть так:
За смену и отображение картинок здесь отвечает slick, а к кнопке «Купить в 1 клик» привязан тот же fancybox, открывает модалку с формой и собственно если catalog.element не открывать в модалке через fancybox, а например открыть в обычном index.php, то все работает как на картинке.
3.2 А в модалке он выглядит так:
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>
!!Продолжение в комменатриях топика!!
