bubble/digital-store
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/digital-store.git synced 2026-10-11 10:19:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Cart Modal

Browse Source
This commit is contained in:
Sergey Yarkov 2019-11-24 13:18:11 +03:00
parent df31a3caa0
commit e42979b7f9
11 changed files with 110 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dist/public/css/style.css vendored
View File

@ -141,7 +141,7 @@ hr {
margin-top: 7rem;
padding: 25px;
width: 460px;
min-height: 350px;
min-height: 230px;
}
.modal-content__header .small-title {
@ -192,10 +192,13 @@ hr {
font-size: 16px;
}
#item-remove i {
#removeItem {
font-size: 20px;
cursor: pointer;
}
#totalPrice {
font-size: 15px;
}
.modal-content__items {
border-top: 1px solid #e0e0e0;
@ -223,6 +226,7 @@ hr {
.modal-content__right {
align-self: center;
width: 145px;
}
.modal-content__right span {

26
dist/public/js/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

100
dist/views/assets/templates/modals/cart.pug vendored
View File

@ -9,107 +9,17 @@
h4.small-title Корзина
span#cartClose.cart-close
i.material-icons close
.modal-content__items
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
.modal-content__item
.modal-content__title
a(href='#')
b
| Cs:go(prime) + открыта тп + инв. s:go(prime) + открыта тп + инв
br
span.in-stock В наличии: 124 (шт)
.modal-content__right
button -
input(type='number' value='1' min='1')
button +
span 139.89
.modal-content__remove
span#item-remove
i.material-icons close
#modalList.modal-content__items
.modal-content__info
.modal-content__counter
span Всего товаров в корзине
span
b 1
b#modalCounter 1
.modal-content__pay
span
b Сумма к оплате
span#total-price
b 139.89 ₽
span
b#totalPrice 139.89 ₽
.modal-content__purchase
button.purchase-btn.waves-effect.btn Перейти к оплате
button#makePay.purchase-btn.waves-effect.btn Перейти к оплате
// Cart Modal END

3
src/js/components/header.component.js
View File

@ -10,6 +10,7 @@ export class HeaderComponent extends Component {
const currentPage = this.$el.querySelector('#desktop-nav');
const pages = Array.from(this.$el.querySelectorAll('#page'));
pages.forEach(li => li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false);
insertCount('counter', JSON.parse(localStorage.getItem('cart'))); // <- ф-я счетика товаров
// ф-я счетика товаров
localStorage.getItem('cart') ? insertCount('counter', JSON.parse(localStorage.getItem('cart'))) : false;
}
}

17
src/js/components/items.component.js
View File

@ -57,7 +57,6 @@ export class ItemsComponent extends Component {
}
});
}
}
insertItems(html) {
@ -70,10 +69,22 @@ function addItem(e) {
if (e.target.localName === 'button' && e.target.id === 'addItem') {
const target = e.target;
renderObj(e.target.dataset, this, target);
const item = {
id: e.target.dataset.id,
title: e.target.dataset.title,
count: e.target.dataset.count,
price: e.target.dataset.price
}
renderObj(item, this, target);
} else if (e.target.localName === 'i') {
const target = e.target.parentNode;
renderObj(e.target.parentNode.dataset, this, target);
const item = {
id: e.target.parentNode.dataset.id,
title: e.target.parentNode.dataset.title,
count: e.target.parentNode.dataset.count,
price: e.target.parentNode.dataset.price
}
renderObj(item, this, target);
}
function renderObj(obj, context, target) {

2
src/js/core/modal.js
View File

@ -6,6 +6,8 @@ export class Modal {
this.init();
}
onShow() {}
init() {
this.open.addEventListener('click', openHandler.bind(this));
this.close.addEventListener('click', closeHandler.bind(this));

2
src/js/index.js
View File

@ -15,4 +15,4 @@ const items = new ItemsComponent('items', {loader});
const filter = new FilterComponent('filter', {items});
const category = new CategoryComponent('category', {items}, {filter});
const breadcumb = new BreadcrumbComponent('breadcrumb');
const cart = new CartModal('cart', 'cartOpen', 'cartClose');
const cart = new CartModal('cart', 'cartOpen', 'cartClose', {items});

55
src/js/modals/cart.modal.js
View File

@ -1,11 +1,62 @@
import { Modal } from "../core/modal";
import { insertCount } from "../other/counter";
import { defaultBtnColor } from "../other/defaultColorBtn";
export class CartModal extends Modal {
constructor(id, open, close) {
constructor(id, open, close, {items}) {
super(id, open, close);
this.items = items;
this.open.addEventListener('click', this.openHandler.bind(this));
this.close.addEventListener('click', this.closeHandler.bind(this));
this.list = this.$el.querySelector('#modalList');
}
init () {
closeHandler() {
this.removeItem = null;
}
openHandler() {
this.removeItem != null ? this.list.addEventListener('click', this.removeItem.bind(this)) : false
this.list.innerHTML = '';
this.insertItems(this.list);
}
insertItems(list) {
if (localStorage.getItem('cart')) {
const items = JSON.parse(localStorage.getItem('cart'));
if (items.length == 0) {
list.innerHTML = '<p style="text-align:center;padding:15px;">Вы не добавили ни один товар</p>';
this.$el.querySelector('#makePay').classList.add('hide');
} else {
this.$el.querySelector('#makePay').classList.remove('hide');
}
items.forEach(item => this.list.innerHTML += `<div data-id="${item.id}" class="modal-content__item"><div class="modal-content__title"><a href="#"><b>${item.title}</b></a><br><span class="in-stock">В наличии: ${item.count} (шт)</span></div><div class="modal-content__right"><button>-</button><input type="number" value="1" min="1" max="${item.count}"><button>+</button><span>${parseFloat(item.price).toFixed(2)}₽</span></div><div class="modal-content__remove"><span><i data-id="${item.id}" class="material-icons" id="removeItem">close</i></span></div></div>`);
insertCount('modalCounter', this.items.cart);
insertCount('counter', this.items.cart);
this.insertTotalPrice('totalPrice', this.items.cart);
}
}
removeItem(e) {
if (e.target.id === 'removeItem') {
const id = e.target.dataset.id;
let index;
this.items.cart.forEach((item, i) => item.id === id ? index = i : false);
this.items.cart.splice(index, 1);
localStorage.setItem('cart', JSON.stringify(this.items.cart));
this.list.innerHTML = '';
this.insertItems(this.list);
defaultBtnColor(id, this.items.$el);
}
}
insertTotalPrice(id, array) {
let totalPrice = 0;
array.forEach(item => totalPrice += parseFloat(item.price));
this.$el.querySelector(`#${id}`).innerHTML = `${totalPrice.toFixed(2)}₽`;
}
}

6
src/js/other/defaultColorBtn.js Normal file
View File

@ -0,0 +1,6 @@
export function defaultBtnColor(id, context) {
if (context.querySelector(`#roster #addItem[data-id="${id}"]`)) {
context.querySelector(`#roster #addItem[data-id="${id}"]`).classList.remove('orange');
context.querySelector(`#roster #addItem[data-id="${id}"] i`).innerHTML = 'shopping_cart';
}
}

2
src/js/templates/items.template.js
View File

@ -29,7 +29,7 @@ export function renderItems(categories, items) {
<span>Цена за 1 шт.</span>
</div>
<div class="list-price">
<span>${item.price}₽</span>
<span>${item.price.toFixed(2)}₽</span>
</div>
<div class="list-buttons">
<button class="btn-small waves-effect waves-light">Купить</button>

2
src/js/templates/itemsOne.template.js
View File

@ -28,7 +28,7 @@ export function renderItemsOne(category, items) {
<span>Цена за 1 шт.</span>
</div>
<div class="list-price">
<span>${item.price}₽</span>
<span>${item.price.toFixed(2)}₽</span>
</div>
<div class="list-buttons">
<button class="btn-small waves-effect waves-light">Купить</button>