[cart]
==
{% set count = cart.cart.products.count %}

<div class="w-24">
    <a href="{{ 'cart' | page }}" class="text-grey flex flex-col items-center justify-center no-underline">
        <div class="mall-cart-count absolute bg-red text-white text-2xs rounded px-1 leading-normal ml-4 -mt-8 {{ count < 1 ? 'invisible' : '' }}">
            {{ count }}
        </div>
        <svg class="text-grey fill-current w-6 mb-2" viewBox="0 0 20 20" version="1.1"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <g stroke="none" stroke-width="1" fill-rule="evenodd">
                <g id="icon-shape">
                    <path d="M3,5 L4.33333333,9 L4,9 C2.34314575,9 1,10.3431458 1,12 C1,13.6568542 2.34314575,15 4,15 L17,15 L17,13 L4.00684547,13 C3.45078007,13 3,12.5561352 3,12 C3,11.4477153 3.44748943,11 3.99850233,11 L10.5,11 L17,11 L20,2 L4,2 L4,0.997030139 C4,0.453036308 3.54809015,0 2.9906311,0 L0,0 L0,2 L2,2 L3,5 Z M5,20 C6.1045695,20 7,19.1045695 7,18 C7,16.8954305 6.1045695,16 5,16 C3.8954305,16 3,16.8954305 3,18 C3,19.1045695 3.8954305,20 5,20 Z M15,20 C16.1045695,20 17,19.1045695 17,18 C17,16.8954305 16.1045695,16 15,16 C13.8954305,16 13,16.8954305 13,18 C13,19.1045695 13.8954305,20 15,20 Z"></path>
                </g>
            </g>
        </svg>
        <div class="text-xs">
            {{ 'offline.mall::frontend.cart' | trans }}
        </div>
    </a>
</div>

{% put scripts %}
    <script>
        $(function () {
            var $count = $('.mall-cart-count');
            $.subscribe('mall.cart.productAdded', function (e, data) {
                $count.removeClass('invisible').text(data.new_items_count).show();
            });
            $.subscribe('mall.cart.productRemoved', function (e, data) {
                $count.text(data.new_items_count);
            });
        });
    </script>
{% endput %}