<span class="cart-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
      
      <span class="cart-content">
          <!-- <span class="cart-name">{{text_cartname}}</span> -->
           {% for total in totals %}
    {% if total.title == 'Total' %}
        <span class="cart-total-price d-none d-md-block">{{ total.text }}</span>
    {% endif %}
{% endfor %}
          <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 class="cart-img">
        <img src="https://sparrow.gcc-demo.com//catalog/view/image/cartIcon.svg" />
      </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">
        <i class="fa-solid fa-close"></i>
      </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="custom-btn btn btn-default btn-cartblock">{{ text_carts }}</button></a>&nbsp;
          <a href="{{ checkout }}"><button type="button" class="custom-btn 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>

