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 -->

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>

Shopping cart with items

1

Your Shopping Cart

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 -->

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>

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 -->

CSS library:

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

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>

Modal window shopping cart with items

1

HTML:

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

                <!-- Shopping Cart Modal Window -->
                <div id="shoppingCartModalWithItems" class="js-shopping-account-with-items 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="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>
                <!-- End Shopping Cart Modal Window -->

CSS library:

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

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-shopping-cart-window-with-items', {
                    autonomous: true
                  });
                });
              </script>