Cart update via ajax?

Question

JavaScript

I want to use the "bitrix:sale.basket.basket" component on the site as a basket on all pages, but it is not updated when a product is added.
I decided to try to make ajax loading when clicking on the add to cart button ".catalog-elems__add",
wrote the following script

$(document).on('click','.catalog-elems__add',function(e){
    $("#basket-container").load("/catalog/basket.php #comments");
           });

in "/catalog/basket.php" file looks like this

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("basket");
?><div  id="comments">
<?
$APPLICATION->IncludeComponent(
  "bitrix:sale.basket.basket",
  "",
  Array(
    ...
  ),
false,
Array(
  'ACTIVE_COMPONENT' => 'Y'
)
);?>
</div><?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

but when clicked, nothing is displayed.
I tried to add styles from the basket directly to the template, but it didn’t help.
I think the problem is that it just copies html without script styles

Answer 1

It's a very bad idea to use this component as a small shopping cart. The component on each wish makes a recalculation of the price of the goods that are in the basket.