Header Shopping Carts

Various search form controls and components within a navbar.

Empty shopping cart

Your Cart is Empty

HTML:

            
              <div class="position-relative">
                <a id="shoppingCartDropdownEmptyInvoker" class="btn btn-xs u-btn--icon u-btn-text-secondary" href="javascript:;" role="button"
                   aria-controls="shoppingCartDropdownEmpty"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="hover"
                   data-unfold-target="#shoppingCartDropdownEmpty"
                   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 u-btn--icon__inner"></span>
                </a>

                <div id="shoppingCartDropdownEmpty" class="text-center u-unfold right-0 p-7 mt-2" aria-labelledby="shoppingCartDropdownEmptyInvoker" style="min-width: 250px;">
                  <span class="u-shopping-cart-icon mb-4">
                    <span class="fa fa-shopping-basket u-shopping-cart-icon__inner"></span>
                  </span>
                  <span class="d-block">Your Cart is Empty</span>
                </div>
              </div>

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <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]'), {
                    afterOpen: function () {
                      $(this).find('input[type="search"]').focus();
                    }
                  });
                });
              </script>

Shopping cart with items

Your Shopping Cart
Image Description
Nike
Flex 2017 RN Lightweight Casual Hoodie - Men's $56.99 Color: Red Size: 8 Medium Quantity: 1
Order Total $56.99
Review Bag and Checkout

Continue Shopping

HTML:

              
                <a id="shoppingCartDropdownWithItemsInvoker" class="btn btn-xs u-btn--icon u-btn-text-secondary" href="javascript:;" role="button"
                   aria-controls="shoppingCartDropdownWithItems"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="hover"
                   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 u-btn--icon__inner"></span>
                  <span class="u-badge u-badge-primary u-badge-pos rounded-circle">1</span>
                </a>

                <div id="shoppingCartDropdownWithItems" class="u-unfold u-unfold right-0 p-0 mt-2" aria-labelledby="shoppingCartDropdownWithItemsInvoker" style="width: 350px;">
                  <div class="u-shopping-cart-title-wrapper">
                    <strong>Your Shopping Cart</strong>
                  </div>

                  <div class="u-shopping-cart-items-wrapper">
                    <div class="d-flex">
                      <div class="u-shopping-cart-item-img-wrapper mr-4">
                        <img class="img-fluid" src="../../assets/img/64x64/img1.jpg" alt="Image Description">
                      </div>
                      <div class="u-shopping-cart-item-info-wrapper">
                        <div class="d-flex justify-content-between align-items-center">
                          <strong class="d-block">Nike</strong>
                          <span class="u-shopping-cart-item-remover" aria-hidden="true">×</span>
                        </div>
                        <span class="d-block u-shopping-cart-item-description">Flex 2017 RN Lightweight Casual Hoodie - Men's</span>
                        <strong class="d-block u-shopping-cart-item-price">$56.99</strong>
                        <span class="d-block u-shopping-cart-item-other-info">Color: Red</span>
                        <span class="d-block u-shopping-cart-item-other-info">Size: 8 Medium</span>
                        <span class="d-block u-shopping-cart-item-other-info">Quantity: 1</span>
                      </div>
                    </div>
                  </div>

                  <div class="u-shopping-cart-subtotal-bg">
                    <div class="mb-3">
                      <strong>Order Total</strong>
                      <span class="d-block">$56.99</span>
                    </div>
                    <a class="btn btn-sm u-btn-primary--air transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
                    <p class="mb-0"><a class="u-shopping-cart-subtotal-link" href="javascript:;">Continue Shopping</a></p>
                  </div>
                </div>

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <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]'), {
                    afterOpen: function () {
                      $(this).find('input[type="search"]').focus();
                    }
                  });
                });
              </script>

Empty modal window shopping cart

Your Shopping Cart
Order Total $0.0
Review Bag and Checkout

Start Shopping

HTML:

              
                <a class="btn btn-xs u-btn--icon u-btn-text-secondary" href="#emptyShoppingCartModal" role="button"
                   data-modal-target="#emptyShoppingCartModal"
                   data-overlay-color="#111722">
                  <span class="fa fa-shopping-cart u-btn--icon__inner"></span>
                </a>

                <div id="emptyShoppingCartModal" class="js-shopping-cart-window u-modal-window u-modal-window--shopping-cart">
                  <button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
                    <span class="fas fa-times"></span>
                  </button>

                  <div class="u-shopping-cart-title-wrapper">
                    <strong>Your Shopping Cart</strong>
                  </div>

                  <div class="text-center u-shopping-cart-items-wrapper">
                    <span class="u-shopping-cart-icon my-4">
                      <span class="fa fa-shopping-basket u-shopping-cart-icon__inner"></span>
                    </span>
                  </div>

                  <div class="u-shopping-cart-subtotal-bg">
                    <div class="mb-3">
                      <strong>Order Total</strong>
                      <span class="d-block">$0.0</span>
                    </div>
                    <a class="disabled btn btn-sm u-btn-primary--air transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
                    <p class="mb-0"><a class="u-shopping-cart-subtotal-link" href="javascript:;" role="button" onclick="Custombox.modal.close();">Start Shopping</a></p>
                  </div>
                </div>

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 Implementing Plugins -->
              <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', {
                    autonomous: true
                  });
                });
              </script>

Empty sidebar shopping cart

HTML:

              
                <a id="sidebarShoppingCartEmptyInvoker" class="btn btn-xs u-btn--icon u-btn-text-secondary" href="javascript:;" role="button"
                   aria-controls="sidebarShoppingCartEmpty"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-hide-on-scroll="false"
                   data-unfold-target="#sidebarShoppingCartEmpty"
                   data-unfold-type="css-animation"
                   data-unfold-animation-in="fadeInRight"
                   data-unfold-animation-out="fadeOutRight"
                   data-unfold-duration="500">
                  <span class="fa fa-shopping-cart u-btn--icon__inner"></span>
                </a>

                <aside id="sidebarShoppingCartEmpty" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarShoppingCartEmptyInvoker">
                  <div class="u-sidebar__scroller">
                    <div class="u-sidebar__container">
                      <div class="u-sidebar--cart__footer-offset">
                        <div class="d-flex align-items-center pt-4 px-7">
                          <h3 class="h6 mb-0">Your Shopping Cart</h3>

                          <button type="button" class="close ml-auto"
                                  aria-controls="sidebarShoppingCartEmpty"
                                  aria-haspopup="true"
                                  aria-expanded="false"
                                  data-unfold-event="click"
                                  data-unfold-hide-on-scroll="false"
                                  data-unfold-target="#sidebarShoppingCartEmpty"
                                  data-unfold-type="css-animation"
                                  data-unfold-animation-in="fadeInRight"
                                  data-unfold-animation-out="fadeOutRight"
                                  data-unfold-duration="500">
                            <span aria-hidden="true">×</span>
                          </button>
                        </div>

                        <div class="js-scrollbar u-sidebar__body">
                          <div class="u-sidebar__content">
                            <div class="text-center u-sidebar__content--cart">
                              <span class="u-shopping-cart-icon">
                                <span class="fa fa-shopping-basket u-shopping-cart-icon__inner"></span>
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <footer class="u-sidebar__footer u-shopping-cart-subtotal-bg u-sidebar__footer--cart">
                    <div class="mb-3">
                      <strong>Order Total</strong>
                      <span class="d-block">$0.0</span>
                    </div>
                    <a class="disabled btn btn-sm u-btn-primary--air transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
                    <p class="mb-0">
                      <a class="u-shopping-cart-subtotal-link" href="javascript:;" role="button"
                         aria-controls="sidebarShoppingCartEmpty"
                         aria-haspopup="true"
                         aria-expanded="false"
                         data-unfold-event="click"
                         data-unfold-hide-on-scroll="false"
                         data-unfold-target="#sidebarShoppingCartEmpty"
                         data-unfold-type="css-animation"
                         data-unfold-animation-in="fadeInRight"
                         data-unfold-animation-out="fadeOutRight"
                         data-unfold-duration="500">
                        Start Shopping
                       </a>
                    </p>
                  </footer>
                </aside>

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <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]'), {
                    afterOpen: function () {
                      $(this).find('input[type="search"]').focus();
                    }
                  });
                });
              </script>