динамическая миникорзина

Достали из нашей базы в ЛК, отряхнули от спана Espo и выкатили сюда. Код — чёрные блоки, как любим.

msMinicartDynamicCustom.tpl

<div class="header_cart-item">
<a class="header_cart-img" href="[ [~[ [+id_d]]]]">


[ [+img_d:ne=`/webp/`:then=`
<img src="[ [+img_d]]" alt="[ [+name_d]]">
`:else=`
<img src="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium.png'}"
srcset="{('assets_url' | option) ~ 'components/minishop2/img/web/ms2_medium@2x.png'} 2x"
alt="" title=""/>
`]]
</a>
<div class="header_cart-info">
<div class="header_cart-subtitle">
[ [+name_d]]
</div>

<div class="cart_item-inner">
[ [- Изменение кол-ва ]]
<form method="post" id="dynamic-[ [+key_d]]" class="ms2_form cart_item-count count">
<input type="hidden" name="key" value="[ [+key_d]]">
<input type="hidden" name="id" value="[ [+id_d]]">
[ [-!msDynamicCount?
&id=`[ [+id_d]]`
&tplChange=`msDynamicCountCustom`
]]
<div class="header_cart-inner">
<div class="header_cart-price">
[ [+price_d]] руб
</div>
<div class="header_cart-counter">
<span class="minus count_btn dynamic-count dynamic-plus" data-dynamic="-1">
<svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0.625H14V2.375H0V0.625Z" fill="#263141"></path>
</svg>
</span>

<input type="text" class="count_inp" name="count" value="[ [+count_d]]" readonly>
<span class="plus count_btn dynamic-count dynamic-minus" data-dynamic="1">
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 6.625H14V8.375H0V6.625Z" fill="#263141"></path>
<path d="M6.125 14.5L6.125 0.5L7.875 0.5L7.875 14.5L6.125 14.5Z" fill="#263141"></path>
</svg>
</span>
</div>


<button type="submit" class="dynamic-action" name="ms2_action" value="cart/change" style="display:none"></button>

</div>
</form>

</div>
</div>

<form method="post" class="ms2_form ">
<input type="hidden" name="key" value="[ [+key_d]]">
<input type="hidden" name="id" value="[ [+id_d]]">
<button class="header_cart-delete " type="submit" name="ms2_action" value="cart/remove" title="Удалить">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.5 23.3574L23.3567 0.500708L25.4995 2.64352L2.64282 25.5002L0.5 23.3574Z" fill="#1B3771" fill-opacity="0.5"></path>
<path d="M23.3574 25.499L0.500708 2.64231L2.64352 0.499492L25.5002 23.3562L23.3574 25.499Z" fill="#7E92B6"></path>
</svg>
</button>
</form>
</div>

tpl.msMiniCart.custom

<div class="msMiniCart{$total_count > 0 ? ' full' : ''}">
<div class="empty header_cart">
<div class="header_cart-close">
<svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24.3584L22.8567 1.50168L24.9995 3.6445L2.14282 26.5012L0 24.3584Z" fill="#1B3771" fill-opacity="0.5"/>
<path d="M22.8574 26.5L0.000707531 3.64329L2.14352 1.50047L25.0002 24.3572L22.8574 26.5Z" fill="#7E92B6"/>
</svg>
</div>
<div class="header_cart-title">{'ms2_minicart' | lexicon}</div>
{'ms2_minicart_is_empty' | lexicon}
</div>
<div class="header_cart not_empty">
<div class="header_cart-close">
<svg width="25" height="27" viewBox="0 0 25 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 24.3584L22.8567 1.50168L24.9995 3.6445L2.14282 26.5012L0 24.3584Z" fill="#1B3771" fill-opacity="0.5"/>
<path d="M22.8574 26.5L0.000707531 3.64329L2.14352 1.50047L25.0002 24.3572L22.8574 26.5Z" fill="#7E92B6"/>
</svg>
</div>
<div class="header_cart-title">
Корзина (<span class="ms2_total_count">{$total_count}</span>)
</div>

[ [!msMiniCartDynamic?
&tpl=`msMinicartDynamicCustom`
&img=`webp`
]]


<div class="header_cart-total">
Итого:<span class="ms2_total_cost">{$total_cost} </span> <span class="cost-val">₽</span>

</div>
<a href="[ [~27]]" class="header_cart-btn btn">Оформить заказ</a>
</div>
</div>

скачать компонент msminicartdynamic и обязательно вставить скрипт <script src="/assets/components/msminicartdynamic/js/web/msminicartdynamic.js"></script>