Bitrix, a component in a catalog item?

Question

1C-Bitrix

Hello!
There is an online store on the Bitrix platform. It is necessary to implement a block of new products on the catalog item (product) page.
Made through catalog.section. Inserted this component inside the "catalog.element" template.
<?
global $arrFilternovelty;
$arrFilternovelty = Array('!PROPERTY_NEWPRODUCT' => false);
$APPLICATION->IncludeComponent(
"bitrix:catalog.section",
"for_product",
array(
"ACTION_VARIABLE" => "action",
"ADD_PICT_PROP" => "MORE_PHOTO",
"ADD_PROPERTIES_TO_BASKET" => "Y",
"ADD_SECTIONS_CHAIN" => "N",
"
"AJAX_OPTION_HISTORY" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"BACKGROUND_IMAGE" => "-",
"BASKET_URL" => "/personal/basket.php",
"BROWSER_TITLE" => "-",
"CACHE_FILTER" => "Y",
"CACHE_GROUPS" => "Y",
"CACHE_TIME" => "36000000",
"CACHE_TYPE" => "A",
"CONVERT_CURRENCY" => "N",
"DETAIL_URL" => "",
"DISABLE_INIT_JS_IN_COMPONENT" => "N",
"DISPLAY_BOTTOM_PAGER" => "N",
"DISPLAY_TOP_PAGER" => "N",
"ELEMENT_SORT_FIELD" => "sort",
"ELEMENT_SORT_FIELD2" => "id",
"ELEMENT_SORT_ORDER" => "asc",
"ELEMENT_SORT_ORDER2" => " desc",
"FILTER_NAME" => "arrFilternovelty",
"HIDE_NOT_AVAILABLE" => "N",
"IBLOCK_ID" => "2",
"IBLOCK_TYPE" => "catalog",
"INCLUDE_SUBSECTIONS" => "Y",
"LABEL_PROP" => "NEWPRODUCT",
"LINE_ELEMENT_COUNT" => "3",
"MESSAGE_404" => "",
"MESS_BTN_ADD_TO_BASKET" => "Add to Cart",
"MESS_BTN_BUY" => "Buy Now",
"MESS_BTN_DETAIL" => "Details",
" MESS_BTN_SUBSCRIBE" => "Subscribe",
"MESS_NOT_AVAILABLE" => "Out of stock",
"META_DESCRIPTION" => "-",
"META_KEYWORDS" => "-",
"OFFERS_CART_PROPERTIES" => array(
0 => "SIZES_SHOES",
1 => "SIZES_CLOTHES",
),
"OFFERS_FIELD_CODE" => array(
0 => "ID",
1 => "CODE",
2 => "XML_ID",
3 => "NAME",
4 => "TAGS",
5 => "SORT",
6 => "PREVIEW_TEXT",
7 => "PREVIEW_PICTURE",
8 => "DETAIL_TEXT",
9 => "DETAIL_PICTURE",
10 => "DATE_ACTIVE_FROM",
11 => "ACTIVE_FROM",
12 => "DATE_ACTIVE_TO",
13 = > "ACTIVE_TO",
14 => "SHOW_COUNTER",
15 => "SHOW_COUNTER_START",
16 => "IBLOCK_TYPE_ID",
17 => "IBLOCK_ID",
18 => "IBLOCK_CODE",
19 => "IBLOCK_NAME",
20 => "IBLOCK_EXTERNAL_ID",
21 => "DATE_CREATE",
22 => "CREATED_BY",
23 => "CREATED_USER_NAME",
24 => "TIMESTAMP_X",
25 => "MODIFIED_BY",
26 => "USER_NAME",
27 => "",
),
"OFFERS_LIMIT" => "5 ",
"OFFERS_PROPERTY_CODE" => array(
0 => "",
1 => "",
),
"OFFERS_SORT_FIELD" => "sort",
"OFFERS_SORT_FIELD2" => "id",
"OFFERS_SORT_ORDER" => "asc",
"OFFERS_SORT_ORDER2" => "desc",
"PAGER_BASE_LINK_ENABLE" => "N",
"PAGER_DESC_NUMBERING" => "N",
"PAGER_DESC_NUMBERING_CACHE_TIME" => "36000",
"PAGER_SHOW_ALL" => "N",
"PAGER_SHOW_ALWAYS" => "N",
"PAGER_TEMPLATE" => ".default",
"PAGER_TITLE" => "Products",
"PAGE_ELEMENT_COUNT" => "3",
"PARTIAL_PRODUCT_PROPERTIES" => "Y",
"PRICE_CODE" => array(
0 => "BASE",
),
"PRICE_VAT_INCLUDE" => "Y ",
"PRODUCT_DISPLAY_MODE" => "Y",
"PRODUCT_ID_VARIABLE" => "id",
"PRODUCT_PROPERTIES" => array(
0 => "NEWPRODUCT",
1 => "F_USER",
),
"PRODUCT_PROPS_VARIABLE" => "prop ",
"PRODUCT_QUANTITY_VARIABLE" => "",
"PRODUCT_SUBSCRIPTION"=> "N",
"PROPERTY_CODE" => array(
0 => "",
1 => "",
),
"SECTION_CODE" => "",
"SECTION_ID" => $_REQUEST["SECTION_ID"],
"SECTION_ID_VARIABLE" => "SECTION_ID",
"SECTION_URL" => "",
"SECTION_USER_FIELDS" => array(
0 => "UF_BROWSER_TITLE",
1 => "UF_KEYWORDS",
2 => "UF_META_DESCRIPTION",
3 => "UF_BACKGROUND_IMAGE ",
4 => "",
),
"SEF_MODE" => "N",
"SET_BROWSER_TITLE" => "N",
"SET_LAST_MODIFIED" => "N",
"SET_META_DESCRIPTION" => "N",
"SET_META_KEYWORDS" = > "N",
"SET_STATUS_404" => "N",
"SET_TITLE" => "N",
"SHOW_404" => "N",
"SHOW_ALL_WO_SECTION" => "Y",
"SHOW_CLOSE_POPUP" => "N",
"SHOW_DISCOUNT_PERCENT" => "N",
"SHOW_OLD_PRICE" => " N",
but before the first page refresh. After the update, it seems like the styles flies off or something, only the title and buttons remain. Perhaps some kind of conflict? how to implement it correctly? thank.

Answer 1

You need to be very careful when placing components in template.php.
Firstly, this option without additional manipulations will work only if the site caching is disabled or, as you noticed, only when the page is loaded for the first time after the cache has been reset. Secondly, this can lead to incorrect caching of components and to the growth of cache files.
In the case of such nesting, styles and scripts are connected only for catalog.element, and for the inner catalog.section, style.css styles and script.js scripts will be connected only for the first time, when the cache for the page is not yet ready, but when the pages are requested again, they will be loaded already will not.
One way is to take the contents of the style.css, script.js files out of the catalog.section template and place them in the corresponding catalog.element files, but this method is not very beautiful and logical.

• include catalog.section or in element.php file if you are using complex catalog component
  
• or in the component_epilog.php file of the catalog.element template.
  
• either in the result_modifier.php file of the catalog.element template, use the API to select new products, and display this data in template.php without using additional components
  

Answer 2

you get a component in a component, respectively, it caches the whole thing 1 time, and then does not update the cache since there were no changes.
Include styles via setAdditionalCss in component call files, they are cache-free.