How to create a dynamic area inside a component's template?

Question

1C-Bitrix

Let's say we have the following task. Each product card in the catalog has an icon that indicates the fact that this product is already in the cart. We can write some code that will get the list of added products and compare it with the displayed products in the catalog. However, we will have to constantly reset the cache in order for this icon to appear on the product card, because. the component is cached.
I tried to do this through the composite and these methods are inside the template:

$frame = $this->createFrame()->begin();
   if(FALSE != $isCart = array_search($item['ID'], $arParams["PRODUCTS_IN_CART"])){ // Допустим компонент Catalog.item через параметр получает список товаров в корзине
   ?>
         <div class="inCart"></div>
   <?
    }
$frame->end();

Answer 1

Through the composite, you can do as it is written in the course
. Personally, I'm used to doing it differently:
- In the template, display a button without any logic.
- After loading the page, make an ajax request to the script in which to receive the goods that are in the basket.
- For goods that are in the basket through js, place the necessary classes on the buttons.
So there will be no problems with caching.

Answer 2

In the product card, you check whether this product is in the cart (in result_modifier.php), and when you add it to the cart, you return the icon class with Ajax or whatever you have.
It turns out when adding an icon is displayed, when rebooting, an icon is displayed.