survey-sdgs/resources/views/includes/header-components/dd-shopping-cart.blade.php

<!--  Shopping Cart -->
<div
  class="offcanvas offcanvas-end shopping-cart"
  tabindex="-1"
  id="offcanvasRight"
  aria-labelledby="offcanvasRightLabel"
>
  <div class="offcanvas-header py-4">
    <h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
      Shopping Cart
    </h5>
    <span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
  </div>
  <div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
    <ul class="mb-0">
      <li class="pb-7">
        <div class="d-flex align-items-center">
          <img
            src="@@webRoot/assets/images/products/product-1.jpg"
            width="95"
            height="75"
            class="rounded-1 me-9 flex-shrink-0"
            alt=""
          />
          <div>
            <h6 class="mb-1">Supreme toys cooker</h6>
            <p class="mb-0 text-muted fs-2">Kitchenware Item</p>
            <div class="d-flex align-items-center justify-content-between mt-2">
              <h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
              <div class="input-group input-group-sm w-50">
                <button
                  class="btn border-0 round-20 minus p-0 bg-success-subtle text-success"
                  type="button"
                  id="add1"
                >
                  -
                </button>
                <input
                  type="text"
                  class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty"
                  placeholder=""
                  aria-label="Example text with button addon"
                  aria-describedby="add1"
                  value="1"
                />
                <button
                  class="btn text-success bg-success-subtle p-0 round-20 border-0 add"
                  type="button"
                  id="addo2"
                >
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="pb-7">
        <div class="d-flex align-items-center">
          <img
            src="@@webRoot/assets/images/products/product-2.jpg"
            width="95"
            height="75"
            class="rounded-1 me-9 flex-shrink-0"
            alt=""
          />
          <div>
            <h6 class="mb-1">Supreme toys cooker</h6>
            <p class="mb-0 text-muted fs-2">Kitchenware Item</p>
            <div class="d-flex align-items-center justify-content-between mt-2">
              <h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
              <div class="input-group input-group-sm w-50">
                <button
                  class="btn border-0 round-20 minus p-0 bg-success-subtle text-success"
                  type="button"
                  id="add2"
                >
                  -
                </button>
                <input
                  type="text"
                  class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty"
                  placeholder=""
                  aria-label="Example text with button addon"
                  aria-describedby="add2"
                  value="1"
                />
                <button
                  class="btn text-success bg-success-subtle p-0 round-20 border-0 add"
                  type="button"
                  id="addon34"
                >
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="pb-7">
        <div class="d-flex align-items-center">
          <img
            src="@@webRoot/assets/images/products/product-3.jpg"
            width="95"
            height="75"
            class="rounded-1 me-9 flex-shrink-0"
            alt=""
          />
          <div>
            <h6 class="mb-1">Supreme toys cooker</h6>
            <p class="mb-0 text-muted fs-2">Kitchenware Item</p>
            <div class="d-flex align-items-center justify-content-between mt-2">
              <h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
              <div class="input-group input-group-sm w-50">
                <button
                  class="btn border-0 round-20 minus p-0 bg-success-subtle text-success"
                  type="button"
                  id="add3"
                >
                  -
                </button>
                <input
                  type="text"
                  class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty"
                  placeholder=""
                  aria-label="Example text with button addon"
                  aria-describedby="add3"
                  value="1"
                />
                <button
                  class="btn text-success bg-success-subtle p-0 round-20 border-0 add"
                  type="button"
                  id="addon3"
                >
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="align-bottom">
      <div class="d-flex align-items-center pb-7">
        <span class="text-dark fs-3">Sub Total</span>
        <div class="ms-auto">
          <span class="text-dark fw-semibold fs-3">$2530</span>
        </div>
      </div>
      <div class="d-flex align-items-center pb-7">
        <span class="text-dark fs-3">Total</span>
        <div class="ms-auto">
          <span class="text-dark fw-semibold fs-3">$6830</span>
        </div>
      </div>
      <a href="./eco-checkout.html" class="btn btn-outline-primary w-100"
        >Go to shopping cart</a
      >
    </div>
  </div>
</div>