myCart / Улучшение / Плагины Bootstrap

Версия: v1.9

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Vue, Laravel, WHMCS

Язык: Английский

Вес файла: 499.2 Kb

Уникальный ID: 5315

Посмотрели: 1008 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 49 раз

Прокомментировали: 0 раз

Рейтинг: 3.7 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/Asraf-Uddin-Ahmed/jquery.mycart

Информация: Пользователям

Информация: Правообладателям

Теги: корзина, localStorage, Bootstrap, Plugin

Поделился: BootstrapТема

Добавлено: 2022-05-25 в 22:21

Метка: 1653506463

⇄ ⇅

<html>

<head>
 <title>My Cart & BootstrapTema</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" />
 <style>
 .badge-notify{
 background:red;
 position:relative;
 top: -20px;
 right: 10px;
 }
 .my-cart-icon-affix {
 position: fixed;
 z-index: 999;
 }
 </style>
</head>

<div class="page-header">
 <h1>Products
 <div style="float: right; cursor: pointer;">
 <span class="glyphicon glyphicon-shopping-cart my-cart-icon"><span class="badge badge-notify my-cart-badge"></span></span>
 </div>
 </h1>
 </div>

<button type="addNewProduct" name="addNewProduct" id="addNewProduct">Add New Product</button>

<div class="row">
 <div class="col-md-3 text-center">
 <img src="https://bootstraptema.ru/plugins/2022/mycart/images/img_1.png" width="150px" height="150px">
 <br>
 product 1 - <strong>$10</strong>
 <br>
 <button class="btn btn-danger my-cart-btn" data-id="1" data-name="product 1" data-summary="summary 1" data-price="10" data-quantity="1" data-image="https://bootstraptema.ru/plugins/2022/mycart/images/img_1.png">Add to Cart</button>
 <a href="#" class="btn btn-info">Details</a>
 </div>

<div class="col-md-3 text-center">
 <img src="https://bootstraptema.ru/plugins/2022/mycart/images/img_2.png" width="150px" height="150px">
 <br>
 product 2 - <strong>$20</strong>
 <br>
 <button class="btn btn-danger my-cart-btn" data-id="2" data-name="product 2" data-summary="summary 2" data-price="20" data-quantity="1" data-image="https://bootstraptema.ru/plugins/2022/mycart/images/img_2.png">Add to Cart</button>
 <a href="#" class="btn btn-info">Details</a>
 </div>

<div class="col-md-3 text-center">
 <img src="https://bootstraptema.ru/plugins/2022/mycart/images/img_3.png" width="150px" height="150px">
 <br>
 product 3 - <strong>$30</strong>
 <br>
 <button class="btn btn-danger my-cart-btn" data-id="3" data-name="product 3" data-summary="summary 3" data-price="30" data-quantity="1" data-image="https://bootstraptema.ru/plugins/2022/mycart/images/img_3.png">Add to Cart</button>
 <a href="#" class="btn btn-info">Details</a>
 </div>

<div class="col-md-3 text-center">
 <img src="https://bootstraptema.ru/plugins/2022/mycart/images/img_4.png" width="150px" height="150px">
 <br>
 product 4 - <strong>$40</strong>
 <br>
 <button class="btn btn-danger my-cart-btn" data-id="4" data-name="product 4" data-summary="summary 4" data-price="40" data-quantity="1" data-image="https://bootstraptema.ru/plugins/2022/mycart/images/img_4.png">Add to Cart</button>
 <a href="#" class="btn btn-info">Details</a>
 </div>

<div class="col-md-3 text-center">
 <img src="https://bootstraptema.ru/plugins/2022/mycart/images/img_5.png" width="150px" height="150px">
 <br>
 product 5 - <strong>$50</strong>
 <br>
 <button class="btn btn-danger my-cart-btn" data-id="5" data-name="product 5" data-summary="summary 5" data-price="50" data-quantity="1" data-image="https://bootstraptema.ru/plugins/2022/mycart/images/img_5.png">Add to Cart</button>
 <a href="#" class="btn btn-info">Details</a>
 </div>

</div>

$('.my-cart-btn').myCart({
 currencySymbol: '$',
 classCartIcon: 'my-cart-icon',
 classCartBadge: 'my-cart-badge',
 classProductQuantity: 'my-product-quantity',
 classProductRemove: 'my-product-remove',
 classCheckoutCart: 'my-cart-checkout',
 affixCartIcon: true,
 showCheckoutModal: true,
 numberOfDecimals: 2,
 cartItems: [
 {id: 1, name: 'product 1', summary: 'summary 1', price: 10, quantity: 1, image: 'images/img_1.png'},
 {id: 2, name: 'product 2', summary: 'summary 2', price: 20, quantity: 2, image: 'images/img_2.png'},
 {id: 3, name: 'product 3', summary: 'summary 3', price: 30, quantity: 1, image: 'images/img_3.png'}
 ],
 clickOnAddToCart: function($addTocart){
 goToCartIcon($addTocart);
 },
 afterAddOnCart: function(products, totalPrice, totalQuantity) {
 console.log("afterAddOnCart", products, totalPrice, totalQuantity);
 },
 clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) {
 console.log("cart icon clicked", $cartIcon, products, totalPrice, totalQuantity);
 },
 checkoutCart: function(products, totalPrice, totalQuantity) {
 var checkoutString = "Total Price: " + totalPrice + "\nTotal Quantity: " + totalQuantity;
 checkoutString += "\n\n id \t name \t summary \t price \t quantity \t image path";
 $.each(products, function(){
 checkoutString += ("\n " + this.id + " \t " + this.name + " \t " + this.summary + " \t " + this.price + " \t " + this.quantity + " \t " + this.image);
 });
 alert(checkoutString)
 console.log("checking out", products, totalPrice, totalQuantity);
 },
 getDiscountPrice: function(products, totalPrice, totalQuantity) {
 console.log("calculating discount", products, totalPrice, totalQuantity);
 return totalPrice * 0.5;
 }
 });

$("#addNewProduct").click(function(event) {
 var currentElementNo = $(".row").children().length + 1;
 $(".row").append('<div class="col-md-3 text-center"><img src="https://bootstraptema.ru/plugins/2022/mycart/images/img_empty.png" width="150px" height="150px"><br>product ' + currentElementNo + ' - <strong>$' + currentElementNo + '</strong><br><button class="btn btn-danger my-cart-btn" data-id="' + currentElementNo + '" data-name="product ' + currentElementNo + '" data-summary="summary ' + currentElementNo + '" data-price="' + currentElementNo + '" data-quantity="1" data-image="https://bootstraptema.ru/plugins/2022/mycart/images/img_empty.png">Add to Cart</button><a href="#" class="btn btn-info">Details</a></div>')
 });
 });
 </script>

</body>

</html>

BootstrapTema

myCart

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0