Кастомная мини корзина miniShop2

Хочу сделать свою мини корзину. И тут возник вопрос, какие плейсхолдеры необходимы для ее работы?

То что приходит сразу на ум это: [[+key]], [[+thumb]], [[+count]]?
Набросал что-то типа:

<div id="headerCartPlace">
							<a href="/order.html">Оформить заказ</a>
                            <a href="#linkToFoolCart" id="headerCartLink"><span id="headerCartLinkIcon"></span><span id="headerCartLinkText">Корзина</span> <span class="headerCartCount">[[+total_count]]</span></a>
							<!-- #headerCartListOuter -->
							<div id="headerCartListOuter" >
								<span id="headerCartListOuterC"></span>
								<!-- .headerCartList -->
								<div id="headerCartListScroll">
									<ul class="headerCartList" id="[[+key]]">										
										<li class="headerCartListRow"><div class="headerCartListRowImgOuter"><img src="[[+thumb:default=`[[++assets_url]]components/minishop2/img/web/ms2_small.png`]]" class="headerCartListRowImg" /></div><a href="[[~[[+id]]]]" class="headerCartListRowGoogName">[[+pagetitle]]</a></li>
									</ul>
								</div>
								<!-- /.headerCartList -->
								
							</div>
							<!-- /#headerCartListOuter -->
						</div>

Картинка дефолтная понятное дело выводится, кол-во товара в корзине считается, но почему-то приходится страницу обновлять чтобы счетчик показал сколько товара в корзине.
Но самая главная проблема это как грамотно сделать вывод самих товаров имеющихся в мини корзине?

<a href="#linkToFoolCart"

<span class="headerCartCoun ms2_total_count">[[+total_count]]</span>