Shopping cart in the popup window when adding a product to the catalog?

Question

1C-Bitrix

Good morning
It is necessary to implement such a thing:

Perhaps not sporty, but implemented as follows:
In the catalog.section component, in component_epilog.php, I inserted the sale.basket.basket component and wrapped it in a popup window:

<div class="popupCart">
<div class="popupContent">
<span class="closePopupCart"><?=CMax::showIconSvg('', SITE_TEMPLATE_PATH.'/images/svg/Close.svg')?></span>
<!--start--><div id="bid">
<?$APPLICATION->IncludeComponent(
  "bitrix:sale.basket.basket", 
  ".default", 
  array(
    "ACTION_VARIABLE" => "action",
    "AUTO_CALCULATION" => "Y",
    "TEMPLATE_THEME" => "blue",
    "COLUMNS_LIST" => array(
      0 => "NAME",
      1 => "DISCOUNT",
      2 => "WEIGHT",
      3 => "DELETE",
      4 => "DELAY",
      5 => "TYPE",
      6 => "PRICE",
      7 => "QUANTITY",
    ),
    "COMPONENT_TEMPLATE" => ".default",
    "GIFTS_BLOCK_TITLE" => "Выберите один из подарков",
    "GIFTS_CONVERT_CURRENCY" => "Y",
    "GIFTS_HIDE_BLOCK_TITLE" => "N",
    "GIFTS_HIDE_NOT_AVAILABLE" => "N",
    "GIFTS_MESS_BTN_BUY" => "Выбрать",
    "GIFTS_MESS_BTN_DETAIL" => "Подробнее",
    "GIFTS_PAGE_ELEMENT_COUNT" => "4",
    "GIFTS_PRODUCT_PROPS_VARIABLE" => "prop",
    "GIFTS_PRODUCT_QUANTITY_VARIABLE" => "",
    "GIFTS_SHOW_DISCOUNT_PERCENT" => "Y",
    "GIFTS_SHOW_IMAGE" => "Y",
    "GIFTS_SHOW_NAME" => "Y",
    "GIFTS_SHOW_OLD_PRICE" => "Y",
    "GIFTS_TEXT_LABEL_GIFT" => "Подарок",
    "GIFTS_PLACE" => "BOTTOM",
    "HIDE_COUPON" => "Y",
    "OFFERS_PROPS" => array(
    ),
    "PATH_TO_ORDER" => "/order/",
    "PRICE_VAT_SHOW_VALUE" => "N",
    "QUANTITY_FLOAT" => "N",
    "SET_TITLE" => "Y",
    "USE_GIFTS" => "N",
    "USE_PREPAYMENT" => "N",
    "DEFERRED_REFRESH" => "Y",
    "USE_DYNAMIC_SCROLL" => "Y",
    "SHOW_FILTER" => "N",
    "SHOW_RESTORE" => "Y",
    "COLUMNS_LIST_EXT" => array(
      0 => "PREVIEW_PICTURE",
      1 => "DISCOUNT",
      2 => "DELETE",
      3 => "DELAY",
      4 => "TYPE",
      5 => "SUM",
    ),
    "COLUMNS_LIST_MOBILE" => array(
      0 => "PREVIEW_PICTURE",
      1 => "DISCOUNT",
      2 => "DELETE",
      3 => "DELAY",
      4 => "TYPE",
      5 => "SUM",
    ),
    "TOTAL_BLOCK_DISPLAY" => array(
      0 => "top",
    ),
    "DISPLAY_MODE" => "extended",
    "PRICE_DISPLAY_MODE" => "Y",
    "SHOW_DISCOUNT_PERCENT" => "Y",
    "DISCOUNT_PERCENT_POSITION" => "bottom-right",
    "PRODUCT_BLOCKS_ORDER" => "props,sku,columns",
    "USE_PRICE_ANIMATION" => "Y",
    "LABEL_PROP" => array(
    ),
    "CORRECT_RATIO" => "Y",
    "COMPATIBLE_MODE" => "Y",
    "EMPTY_BASKET_HINT_PATH" => "/",
    "ADDITIONAL_PICT_PROP_26" => "-",
    "ADDITIONAL_PICT_PROP_28" => "-",
    "BASKET_IMAGES_SCALING" => "adaptive",
    "USE_ENHANCED_ECOMMERCE" => "N"
  ),
  false
);?>
</div>

In principle, everything works, only the catch is that when adding products when the pop-up window appears, the cart is empty:


Although if you refresh the page, change the quantity or delete the product, the data is updated:


Has anyone solved this issue, share your experience or maybe there is a ready-made solution for the market ? I looked but didn't find it...

Answer 1

Solution in the comments