3rd party scripts not working in open Fancybox modal window?

A

Andrey Bely2021-07-01 13:52:31

1C-Bitrix

Andrey Bely, 2021-07-01 13:52:31

I explain step by step
1. The customer wants to make a quick view of the product from the list of products:

2. I implement it as follows:
2.1. In the template of the product list component (catalog.section) I create a button that will open a modal with the catalog.element component

<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. In the script.js of the same template, I hang an event on click on the button and open the ajax_form.php file in the modal via ajax fancybox:

$(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 content:

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. What is the problem.
3.1. The problem is that catalog.element should look like this:

slick is responsible for changing and displaying images, and the same fancybox is attached to the “Buy in 1 click” button, opens a modal with a form, and actually if catalog.element is not opened in a modal through fancybox, and for example, open it in the usual index.php, then everything works as in the picture.
3.2 And in the modal, it looks like this:

slick to the gallery with images didn’t work, and fancybox didn’t work for the “Buy in 1 click” button. In

principle, that’s it, but I’ll add it as additional material. I tried to solve the problem empirically and here's what I found:
4. I decided to test slick and flexbox separately from bitrix;
4.1 I downloaded openserver to my computer.
4.2 Created index.php at the root of the site test.ru, connected jquery, fancybox and slick and created a button that opens the ajax.php file in the modal:

<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 In ajax.php I created a button that opens the server-information.php file in the modal:

<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 Content of 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>