Skip to main content

Header Shopping Carts

Various search form controls and components within a navbar.

Empty shopping cart

Your Cart is Empty

HTML:

<!-- Shopping Cart -->
<div class="position-relative">
  <a id="shoppingCartDropdownInvoker" class="btn btn-xs btn-icon btn-text-dark" href="javascript:;" role="button"
          aria-controls="shoppingCartDropdown"
          aria-haspopup="true"
          aria-expanded="false"
          data-unfold-event="click"
          data-unfold-target="#shoppingCartDropdown"
          data-unfold-type="css-animation"
          data-unfold-duration="300"
          data-unfold-delay="300"
          data-unfold-hide-on-scroll="true"
          data-unfold-animation-in="slideInUp"
          data-unfold-animation-out="fadeOut">
    <span class="fa fa-shopping-cart btn-icon__inner"></span>
  </a>

  <div id="shoppingCartDropdown" class="u-unfold u-unfold--cart text-center border rounded-0 left-0 p-7" aria-labelledby="shoppingCartDropdownInvoker" style="min-width: 250px;">
    <span class="u-icon u-icon--primary u-icon--md rounded-circle mb-3">
      <span class="fa fa-shopping-basket u-icon__inner"></span>
    </span>
    <span class="d-block">Your Cart is Empty</span>
  </div>
</div>
<!-- End Shopping Cart -->
Copy

JS library and initialization:

<!-- JS Space -->
<script src="../../assets/js/components/hs.unfold.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
  });
</script>
Copy

Shopping cart with items

Your Shopping Cart
Image Description
Space shoes
2017 Lightweight Men's Space shoes Size: 9 Quantity: 1 Color: Red Price: $29
Order Total $56.99
Review Bag and Checkout Continue Shopping

HTML:

<!-- Shopping Cart -->
<div class="position-relative">
  <a id="shoppingCartDropdownWithItemsInvoker" class="btn btn-xs btn-icon btn-text-secondary" href="javascript:;" role="button"
          aria-controls="shoppingCartDropdownWithItems"
          aria-haspopup="true"
          aria-expanded="false"
          data-unfold-event="click"
          data-unfold-target="#shoppingCartDropdownWithItems"
          data-unfold-type="css-animation"
          data-unfold-duration="300"
          data-unfold-delay="300"
          data-unfold-hide-on-scroll="true"
          data-unfold-animation-in="slideInUp"
          data-unfold-animation-out="fadeOut">
    <span class="fa fa-shopping-cart btn-icon__inner"></span>
    <span class="badge-xs badge-primary badge-pos rounded-circle">1</span>
  </a>

  <div id="shoppingCartDropdownWithItems" class="u-unfold u-unfold u-shopping-cart left-0 p-0" aria-labelledby="shoppingCartDropdownWithItemsInvoker" style="width: 290px;">
    <!-- Title -->
    <div class="text-center p-4">
      Your Shopping Cart
    </div>
    <!-- End Title -->

    <hr class="my-0">

    <!-- Items Wrapper -->
    <div class="p-4">
      <!-- Item -->
      <div class="d-flex">
        <div class="u-shopping-cart__item-img-wrapper mr-3">
          <img class="img-fluid" src="../../assets/img/100x100/img5.jpg" alt="Image Description">
        </div>
        <div class="u-shopping-cart__item-info-wrapper">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="d-block h6 mb-0">Space shoes</span>
            <span class="u-shopping-cart__item-remover" aria-hidden="true">×</span>
          </div>
          <span class="d-block font-size-14">2017 Lightweight Men's Space shoes</span>
          <span class="d-block text-secondary font-size-13">Size: 9</span>
          <span class="d-block text-secondary font-size-13">Quantity: 1</span>
          <span class="d-block text-secondary font-size-13">Color: Red</span>
          <span class="d-block text-secondary font-size-13">Price: $29</span>
        </div>
      </div>
      <!-- End Item -->
    </div>
    <!-- End Items Wrapper -->

    <!-- Subtotal -->
    <div class="text-center bg-gray-100 p-4">
      <div class="mb-3">
        <span class="d-block h6 mb-0">Order Total</span>
        <span class="d-block">$56.99</span>
      </div>
      <a class="btn btn-sm btn-primary" href="../../html/shop/checkout.html">Review Bag and Checkout</a>
      <a class="d-block small text-secondary mt-2" href="javascript:;">Continue Shopping</a>
    </div>
    <!-- End Subtotal -->
  </div>
</div>
<!-- End Shopping Cart -->
Copy

JS library and initialization:

<!-- JS Space -->
<script src="../../assets/js/components/hs.unfold.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of unfold component
    $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
  });
</script>
Copy

Empty modal window shopping cart

HTML:

<!-- Shopping Cart Trigger -->
<a class="btn btn-xs btn-icon btn-text-dark" href="#emptyShoppingCartModal" role="button"
   data-modal-target="#emptyShoppingCartModal"
   data-overlay-color="#151b26">
  <span class="fa fa-shopping-cart btn-icon__inner"></span>
</a>
<!-- End Shopping Cart Trigger -->

<!-- Shopping Cart Modal Window -->
<div id="emptyShoppingCartModal" class="js-empty-shopping-account u-modal-window" style="width: 370px;">
  <!-- Modal Close Button -->
  <button class="btn btn-sm btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
    <span class="fas fa-times"></span>
  </button>
  <!-- End Modal Close Button -->

  <!-- Title -->
  <header class="text-center p-4">
    Your Shopping Cart
  </header>
  <!-- End Title -->

  <hr class="my-0">

  <!-- Items Wrapper -->
  <div class="text-center p-4">
    <span class="u-icon u-icon--secondary u-icon--xl rounded-circle my-4">
      <span class="fa fa-shopping-bag u-icon__inner"></span>
    </span>
  </div>
  <!-- End Items Wrapper -->

  <!-- Subtotal -->
  <div class="text-center bg-gray-100 p-4">
    <div class="mb-3">
      <span class="d-block h6 mb-0">Order Total</span>
      <span class="d-block">$0.0</span>
    </div>
    <a class="btn btn-sm btn-primary" href="../../html/shop/checkout.html">Review Bag and Checkout</a>
    <a class="d-block small text-secondary mt-2" href="javascript:;">Continue Shopping</a>
  </div>
  <!-- End Subtotal -->
</div>
<!-- End Shopping Cart Modal Window -->
Copy

CSS library:

<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css">
Copy

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>

<!-- JS Space -->
<script src="../../assets/js/components/hs.modal-window.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of autonomous popups
    $.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-empty-shopping-account', {
      autonomous: true
    });
  });
</script>
Copy