Adding Bitrix to cart not working?

Question

1C-Bitrix

Good afternoon!
Through CIBlockSection::GetList I display sections of the directory. By clicking on each section, I get the SECTION_ID and through ajax I insert the result of the bitrix:catalog.section component into the
page. Everything is fine, the products are updated and displayed on the page. But "add to cart" does not work. If the component is simply inserted on the page, then everything works.

How can the problem be solved? Is there any way to add a product to the shopping cart by standard means?
Or is it easier to write your add to cart handler?

Answer 1

1. First option:
- put bitrix:catalog
- file sections.php in it you display your filter by sections ( the section in the filter must be a link ) and catalog.section, in front of it is a global filter for your brand (if you don’t know how, write, explain), for catalog.section you specify the parameters

'INCLUDE_SUBSECTIONS' => 'Y',
'SHOW_ALL_WO_SECTION' => 'Y',
'BY_LINK' => 'Y'

- section.php file - everything is the same, only in catalog.section you pass the section id, it will be in $arResult['VARIABLES'], add the INCLUDE_SUBSECTIONS parameter if needed ( 2 other parameters are not needed )
- in the call to bitrix.catalog on index .php section you set parameters

'AJAX_MODE' => 'Y',
'AJAX_OPTION_STYLE' => 'Y',
'AJAX_OPTION_HISTORY' => 'Y'

Bitrix will take care of everything else, the only thing is that everything will work in ajax mode, i.e. links to the product details will also be loaded with ajax, if you only need your filter by sections to work with ajax, then
2. The second option
is about the same as you have now, there is an ajax handler, you pass the url to the current page into it and pass it to data some key like

//.......
url: '<?=$APPLICATION->GetCurDir()?>'
data: {SECTION_ID: idSection, BRAND_AJAX: 'Y'}
//.......

- substitute your SECTION_ID in the catalog.section parameters, if it is in request
- find the part of the content that you want to get updated

<?
$request = \Bitrix\Main\Application::getInstance()->getContext()->getRequest();
$bBrandAjax = $request->isAjaxRequest() && isset($request['BRAND_AJAX']) && $request['BRAND_AJAX'] == 'Y';
?>
<?// оборачиваешь в div для простоты вставки через js, можно поколдовать и сделать без этого контейнера, но тут уже сам))?>
<div id="ajax_brand_container">
<?
if($bBrandAjax) {
    $APPLICATION->RestartBuffer();
}

// твой ajax-вый контент (вероятно только catalog.section)

if($bBrandAjax) {
    die();
}
?>
</div>

- In the onsuccess ajax handler you write

var ajaxContainer = document.querySelector('#ajax_brand_container');

BX.ajax({
  //........
  onsuccess: async function(data) {
    if(ajaxContainer) {
      var obResult = BX.processHTML(data);
      
      await !(function() {
        ajaxContainer.innerHTML = data;
      })();
      
      BX.ajax.processScripts(obResult.SCRIPT);
    }
  }
  //........

PS
I wrote without testing, try if there are errors, write ...
PPS
In the second option, I would also advise using bitrix.catalog, but see for yourself

Answer 2

This is logical, because the script does not work for you. There is a "emulateOnload" parameter in the ajax bitrix config, try adding emulateOnload: true. Should solve the problem.