Header Shopping Carts
Various search form controls and components within a navbar.
Empty shopping cart
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 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]'));
});
</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
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 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]'));
});
</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 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-empty-shopping-account', {
autonomous: true
});
});
</script>
Modal window shopping cart with items
1
Your Shopping Cart
Space shoes
2017 Lightweight Men's Space shoes
Size: 9
Quantity: 1
Color: Red
Price: $29
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 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-with-items', {
autonomous: true
});
});
</script>