<span class="cart-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
      <span class="cart-img d-none d-lg-inline-block">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">          
          <symbol id="shopping-bag" viewBox="0 0 860 860"><title>shopping-bag</title><path d="M434.979,42.667H85.333v3.061l-4.375-14.999C75.687,12.635,58.844,0,40,0H10.667C4.771,0,0,4.771,0,10.667
        s4.771,10.667,10.667,10.667H40c9.427,0,17.844,6.313,20.479,15.365l66.396,227.635l-34.021,42.521
        c-4.854,6.073-7.521,13.688-7.521,21.458c0,18.948,15.406,34.354,34.354,34.354H416c5.896,0,10.667-4.771,10.667-10.667
        c0-5.896-4.771-10.667-10.667-10.667H119.687c-7.177,0-13.021-5.844-13.021-13.021c0-2.948,1.01-5.844,2.854-8.135l34.279-42.844
        h209.221c16.448,0,31.604-9.615,38.615-24.5l74.438-158.177c2.135-4.552,3.26-9.604,3.26-14.615v-3.021
        C469.333,58.073,453.927,42.667,434.979,42.667z M448,80.042c0,1.906-0.427,3.823-1.24,5.542L372.333,243.75
        c-3.51,7.438-11.083,12.25-19.313,12.25H146.667L90.663,64h344.316C442.156,64,448,69.844,448,77.021V80.042z"></path>
      <path d="M128,384c-23.531,0-42.667,19.135-42.667,42.667s19.135,42.667,42.667,42.667s42.667-19.135,42.667-42.667
        S151.531,384,128,384z M128,448c-11.76,0-21.333-9.573-21.333-21.333c0-11.76,9.573-21.333,21.333-21.333
        c11.76,0,21.333,9.573,21.333,21.333C149.333,438.427,139.76,448,128,448z"></path>
      <path d="M384,384c-23.531,0-42.667,19.135-42.667,42.667s19.135,42.667,42.667,42.667s42.667-19.135,42.667-42.667
        S407.531,384,384,384z M384,448c-11.76,0-21.333-9.573-21.333-21.333c0-11.76,9.573-21.333,21.333-21.333
        c11.76,0,21.333,9.573,21.333,21.333C405.333,438.427,395.76,448,384,448z"></path></symbol>
        </svg>
        <svg class="icon" viewBox="0 0 30 30"><use xlink:href="#shopping-bag" x="19%" y="7%"></use></svg>
      </span>
      <span class="cart-img d-lg-none d-md-block">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">          
              <symbol id="cart-responsive" viewBox="0 0 510 510"><title>cart-responsive</title>
                  <path d="M306.4,313.2l-24-223.6c-0.4-3.6-3.6-6.4-7.2-6.4h-44.4V69.6c0-38.4-31.2-69.6-69.6-69.6c-38.4,0-69.6,31.2-69.6,69.6
                  v13.6H46c-3.6,0-6.8,2.8-7.2,6.4l-24,223.6c-0.4,2,0.4,4,1.6,5.6c1.2,1.6,3.2,2.4,5.2,2.4h278c2,0,4-0.8,5.2-2.4
                  C306,317.2,306.8,315.2,306.4,313.2z M223.6,123.6c3.6,0,6.4,2.8,6.4,6.4c0,3.6-2.8,6.4-6.4,6.4c-3.6,0-6.4-2.8-6.4-6.4
                  C217.2,126.4,220,123.6,223.6,123.6z M106,69.6c0-30.4,24.8-55.2,55.2-55.2c30.4,0,55.2,24.8,55.2,55.2v13.6H106V69.6z
                   M98.8,123.6c3.6,0,6.4,2.8,6.4,6.4c0,3.6-2.8,6.4-6.4,6.4c-3.6,0-6.4-2.8-6.4-6.4C92.4,126.4,95.2,123.6,98.8,123.6z M30,306.4
                  L52.4,97.2h39.2v13.2c-8,2.8-13.6,10.4-13.6,19.2c0,11.2,9.2,20.4,20.4,20.4c11.2,0,20.4-9.2,20.4-20.4c0-8.8-5.6-16.4-13.6-19.2
                  V97.2h110.4v13.2c-8,2.8-13.6,10.4-13.6,19.2c0,11.2,9.2,20.4,20.4,20.4c11.2,0,20.4-9.2,20.4-20.4c0-8.8-5.6-16.4-13.6-19.2V97.2
                  H270l22.4,209.2H30z"></path>
              </symbol>
          </svg>
          <svg class="icon" viewBox="0 0 40 40"><use xlink:href="#cart-responsive" x="16%" y="15%"></use></svg>
      </span>
      <span class="cart-content">
          <!-- <span class="cart-name">{{text_cartname}}</span> -->
          <span class="cart-products-count d-none d-lg-block">{{ text_items }}</span>
          <span class="cart-products-count d-lg-none d-md-block">{{ text_items_small }}</span>
      </span>
  </span>
   <ul class="cart-dropdown offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
      <h3 id="offcanvasRightLabel">{{text_name}}</h3>
      <button id="btnHinge" type="button" data-bs-dismiss="offcanvas" aria-label="Close">
       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="   15px" height="15px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">  <image id="image0" width="16" height="16" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAQAAADlauupAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
                AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZ
                cwAAAGAAAABgAPBrQs8AAAAHdElNRQfmBQUKKyJdcBQmAAAAk0lEQVQ4y2NgoAZQ2n38uMoke3ti
                1Sv/d3BQWnD+PMIARRsbZf8XL5ReODkR0qw4ydZWWePlS+UiR0dUVxBhCE7NxBiipGhjg1czukJk
                Q7CJEW0IyZqRQ1pZ4+VLZY2XL5X/OzjgUsdEkqnEAoq8QFEg4lNIMJ0Qk5BwWkBKUsZqiNLpc+fw
                RRU6UJlkb4+SmSgBAPl3bzbjMveUAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTA1LTA1VDEwOjQz
                OjM0KzAwOjAw2j712QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0wNS0wNVQxMDo0MzozNCswMDow
                MKtjTWUAAAAASUVORK5CYII="></image>
                </svg>
      </button>
    </div>
    <div class="offcanvas-body clearfix">
      {% if products or vouchers %}
        <li class="cart-scroll">
          <div class="slimScrollDiv">
            <div class="cart-item">
              <table class="table table-sm table-striped">
                {% for product in products %}
                  <tr style="border-color: #eeeeee;">
                    <td class="text-start product-image">{% if product.thumb %}<a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail"/></a>{% endif %}</td>
                    <td class="text-start caption">
                      <div class="caption-detail">
                        <span class="text-center">{{ product.quantity }} x</span>
                        <a class="cart_block_product_name" href="{{ product.href }}">{{ product.name }}</a>
                      </div>
                      <span class="text-start text-price">{{ product.total }}</span>
                      {% if product.option %}
                        {% for option in product.option %}
                          <span class="product-detail">{{ option.name }} {{ option.value }}</span> {% endfor %}
                      {% endif %}
                      {% if product.subscription %}
                        <br/>
                        <span class="product-detail">{{ text_subscription }} {{ product.subscription }}</span>
                      {% endif %}
                    </td>
                    <td class="text-end close_button">
                      <form action="{{ product_remove }}" method="post" data-oc-toggle="ajax" data-oc-load="{{ list }}" data-oc-target="#header-cart">
                        <input type="hidden" name="key" value="{{ product.cart_id }}">
                        <button type="submit" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger removeCart-dr">
                          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-remove" viewBox="0 0 16 16">          
                            <path d="M14 3h-3.53a3.07 3.07 0 00-.6-1.65C9.44.82 8.8.5 8 .5s-1.44.32-1.87.85A3.06 3.06 0 005.53 3H2a.5.5 0 000 1h1.25v10c0 .28.22.5.5.5h8.5a.5.5 0 00.5-.5V4H14a.5.5 0 000-1zM6.91 1.98c.23-.29.58-.48 1.09-.48s.85.19 1.09.48c.2.24.3.6.36 1.02h-2.9c.05-.42.17-.78.36-1.02zm4.84 11.52h-7.5V4h7.5v9.5z" fill="currentColor"></path>
                            <path d="M6.55 5.25a.5.5 0 00-.5.5v6a.5.5 0 001 0v-6a.5.5 0 00-.5-.5zM9.45 5.25a.5.5 0 00-.5.5v6a.5.5 0 001 0v-6a.5.5 0 00-.5-.5z" fill="currentColor"></path>
                          </svg>
                        </button>
                        <script>
                          $(".removeCart-dr").click(function(){
                            $("body").css("overflow:show");
                          });
                        </script>
                      </form>
                    </td>
                  </tr>
                {% endfor %}
                {% for voucher in vouchers %}
                  <tr>
                    <td class="text-center"></td>
                    <td class="text-start ">{{ voucher.description }}</td>
                    <td class="text-end">x&nbsp;1</td>
                    <td class="text-end">{{ voucher.amount }}</td>
                    <td class="text-end">
                      <form action="{{ voucher_remove }}" method="post" data-oc-toggle="ajax" data-oc-load="{{ list }}" data-oc-target="#header-cart">
                        <input type="hidden" name="key" value="{{ voucher.key }}"/>
                        <button type="submit" data-bs-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa-solid fa-circle-xmark"></i></button>
                      </form>
                    </td>
                  </tr>
                {% endfor %}
              </table>
            </div>
          <div>
        </li> 
    </div>
    <div class="sticky">
        <div class="table billing-info">
          {% for total in totals %}
          <div class="border-remove">
            <div class="text-start">{{ total.title }}</div>
            <div class="text-end value">{{ total.text }}</div>
          </div>
          {% endfor %}
        </div>
        <div class="text-center cart-btn">
          <a href="{{ cart }}"><button type="button" class="btn btn-default btn-cartblock">{{ text_carts }}</button></a>&nbsp;
          <a href="{{ checkout }}"><button type="button" class="btn btn-primary btn-cartblock"> {{ text_checkout }}</button></a>
        </div>
    </div>
      {% else %}
    <div class="cart-detail">
      <p class="empty text-left">{{ text_no_results }}</p>
    </div>
      {% endif %}
  </ul>

