zagidulin · zagidulin · Sep 15, 2020 · Sep 15, 2020
diff --git a/basket_script.js b/basket_script.js
@@ -0,0 +1,184 @@
+'use strict';
+
+// класс товара в корзине
+class BasketItem {
+	constructor(title, price, quantity, picture) {
+		this.title = title;
+		this.price = price;
+		this.picture = picture;
+		this.quantity = quantity;
+	}
+
+	render() {
+		return `<div class="basket_record">
+					${this.picture}
+					<span class="product_name">${this.title}</span>
+					<span class="product_price">${this.price}&nbspруб</span>
+					<input type="number" name="quantity" min="0" value="${this.quantity}" class="change_quantity">
+					<span class="product_cost">${this.quantity*this.price}&nbspруб</span>
+					<div class="basket_delete">
+					    <a href="#" class="product_delete">удалить</a>
+					</div>
+		        </div>`;
+	}
+}
+
+// класс Корзины товаров
+class BasketList {
+	constructor() {
+		this.shopCartList = [];
+	}
+
+	#makeGETRequest(url) {
+		console.log('Направляю запрос корзины')
+		return new Promise((resolve, reject) => {
+			let xhr;
+			if (window.XMLHttpRequest) {
+				xhr = new XMLHttpRequest();
+			} else if (window .ActiveXObject) {
+				xhr = new ActiveXObject("Microsoft.XMLHTTP");
+			}
+
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState === 4) {
+					if (xhr.status === 200) {
+						console.log('корзина получена')
+						resolve(xhr.response);
+					} else {
+						reject();
+					}
+				}
+			}
+
+			xhr.open( 'GET' , url, true );
+			xhr.send();
+		});
+	}
+
+	#makePOSTRequest(url, data) {
+		return new Promise((resolve, reject) => {
+			let xhr;
+			if (window.XMLHttpRequest) {
+				xhr = new XMLHttpRequest();
+			} else if (window.ActiveXObject) {
+				xhr = new ActiveXObject("Microsoft.XMLHTTP");
+			}
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState === 4) {
+					if (xhr.status === 200) {
+						resolve(xhr.response);
+					} else {
+						reject();
+					}
+				}
+			}
+			xhr.open('POST', `/${url}`, true);
+			xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+			xhr.send(data);
+		});
+	}
+
+	getShopCartList() {
+		this.#makeGETRequest(`/shopCartData`)
+			.then((data) => {
+				this.shopCartList = JSON.parse(data);
+				this.render();
+			})
+			.catch(() => {
+				console.log('Error: data not found');
+			});
+	}
+
+	toggle() {
+		document.querySelector('.basket_container').classList.toggle('hidden');
+	}
+
+	showSummary() {
+		let totalPrice = 0;
+		let totalQuantity = 0;
+
+		this.shopCartList.forEach(({ price, quantity }) => {
+			totalPrice += price*quantity;
+			totalQuantity += quantity;
+		});
+
+		document.querySelector('.total_quantity').innerHTML = `<i>${totalQuantity}</i>`;
+		document.querySelector('.total_price').innerHTML = `<i>${totalPrice}</i>`;
+	}
+
+	render() {
+		let html = '';
+
+		this.shopCartList.forEach(({ title, price, quantity, picture }) => {
+			const basketItem = new BasketItem(title, price, quantity, picture);
+			html += basketItem.render();
+		});
+
+		document.querySelector('.basket_list').innerHTML = html;
+
+		this.showSummary();
+
+		// для инициализации возможности удаления изменения количесвта товара при "раскрытии" корзины
+		if (this.shopCartList.length > 0) {
+			let changeShopCart = document.querySelector('.basket_container');
+			changeShopCart.addEventListener('click', (event) => {
+				// console.log('click');
+				event.stopImmediatePropagation(); //для предотвращения повторных запросов при ререндеринге корзины
+
+				if (event.target.className == 'product_delete') {
+					let name = event.target.parentNode.parentNode.childNodes[3].innerText;
+					const productToDelete = {"title": name};
+					this.delete(JSON.stringify(productToDelete));
+				} else if (event.target.className == 'change_quantity') {
+					let newQuantity = +event.target.value;
+					let name = event.target.parentNode.childNodes[3].innerText;
+					const productToChange = {"title": name, "quantity": newQuantity};
+
+					if (newQuantity < 1) {
+						this.delete(JSON.stringify(productToChange));
+					} else {
+						this.changeQuantity(JSON.stringify(productToChange));
+					}
+				}
+			});
+		}
+	}
+
+	// добавление товара
+	add(item) {
+		this.#makePOSTRequest('addToCart', item)
+			.then((data) => {
+				console.log('товар добавлен');
+			})
+			.catch(() => {
+				console.log('Error: data not found');
+			});
+	}
+
+	// удаление товара
+	delete(item) {
+		this.#makePOSTRequest('deleteFromCart', item)
+			.then((data) => {
+				this.shopCartList = JSON.parse(data);
+				if (this.shopCartList.length == 0) {
+					this.shopCartList = [];
+				}
+				this.render();
+			})
+			.catch(() => {
+				console.log('Error: data not found');
+			});       
+	}
+
+	// изменение количества товара внутри корзины
+	changeQuantity(item) {
+		this.#makePOSTRequest('changeQuantity', item)
+			.then((data) => {
+				this.shopCartList = JSON.parse(data);
+				this.render();
+			})
+			.catch(() => {
+				console.log('Error: data not found');
+			});
+	}
+}
diff --git a/cart.json b/cart.json
@@ -0,0 +1 @@
+[]
diff --git a/responses/catalog.json → catalog.json b/responses/catalog.json → catalog.json
diff --git a/catalog_script.js b/catalog_script.js
@@ -0,0 +1,101 @@
+'use strict';
+
+
+const shopCart = [];
+
+const API_URL = 'https://raw.githubusercontent.com/zagidulin/JavaScript/master/responses';
+
+class ProductItem {
+	constructor(title, price, link) {
+		this.title = title;
+		this.price = price;
+		this.link = link;
+	}
+
+	render() {
+		return `<div class="product_preview">
+					<div class="preview_image">
+						<a href="catalog/${this.link}.html">
+							<img src="image/${this.link}.jpg" alt="" width="120" height="120">
+						</a>
+					</div><br>
+					<a href="catalog/${this.link}.html">${this.title}</a>
+					<p><span class="price">${this.price}</span> руб.</p>
+					<button>buy</button>
+				</div>`;
+	}
+}
+
+
+class ProductsList {
+	constructor() {
+		this.products = [];
+		this.filteredProducts = [];
+	}
+
+	#makeGETRequest(url) {
+		return new Promise((resolve, reject) => {
+			let xhr;
+			if (window.XMLHttpRequest) {
+				xhr = new XMLHttpRequest();
+			} else if (window .ActiveXObject) {
+				xhr = new ActiveXObject("Microsoft.XMLHTTP");
+			}
+
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState === 4) {
+					if (xhr.status === 200) {
+						console.log('католог получен')
+						resolve(xhr.response);
+					} else {
+						reject();
+					}
+				}
+			}
+
+			xhr.open( 'GET' , url, true );
+			xhr.send();
+		});
+	}
+
+	render() {
+		let html = '';
+		this.filteredProducts.forEach(({ title, price, link }) => {
+			const productItem = new ProductItem(title, price, link);
+			html += productItem.render();
+		});
+
+		document.querySelector('.catalog').innerHTML = html;
+	}
+
+	getCatalog(list) {
+		if (list && list.length > 0) {
+			this.render();
+		} else {
+			this.#makeGETRequest(`/catalogData`)
+				.then((data) => {
+					this.products = JSON.parse(data);
+					this.filteredProducts = JSON.parse(data);
+					this.render();
+				})
+				.catch(() => {
+					console.log('Error: data not found');
+				});
+		}
+	}
+
+	total() {
+		let total = 0;
+		this.products.forEach(({ price }) => {
+			total += price;
+		});
+
+		console.log('Сумма всех цен: ', total);
+	}
+
+	filterProducts(value) {
+		const regexp = new RegExp(value, 'i');
+		this.filteredProducts = this.products.filter(product => regexp.test(product.title));
+		this.getCatalog(this.filteredProducts);
+	}
+}
diff --git a/image/heder.jpg b/image/heder.jpg
diff --git a/image/k2_alexis_80_pro.jpg b/image/k2_alexis_80_pro.jpg
diff --git a/image/logo_2.png b/image/logo_2.png
diff --git a/image/rollerblade_macroblade_84W.jpg b/image/rollerblade_macroblade_84W.jpg
diff --git a/image/seba_frx_80.jpg b/image/seba_frx_80.jpg
diff --git a/image/twister_edge.jpg b/image/twister_edge.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Rollerskates</title>
+		<link rel="stylesheet" href="style.css">
+		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+	</head>
+	<body>
+		<div class="wraper">
+			<div class="header">
+				<div id="logo">
+					<img src="image/logo_2.png" alt="logo">
+				</div>
+				<div class="main_menu">
+					<ul class="menulist">
+						<li><a href="index.html">Главная</a></li>
+						<li><a href="#">Каталог</a></li>
+						<li><a href="contacts.html">Контакты</a></li>
+					</ul>
+					<div class="cart">
+						<a href="#" class = "cart-button" >Корзина</a>
+					</div>
+				</div>
+			</div>
+			<hr>
+			<h1>Роликовые коньки</h1>
+			<div class="catalog-menu">
+				<ul>
+					<li class="catalog-menu-list catalog-active"><a href="catalog.html" class="catalog-link">ВСЕ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ФИТНЕС</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ФРИСКЕЙТ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">АГРЕССИВ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ДЕТСКИЕ</a></li>
+				</ul>
+			</div>
+			<div class="searchapp">
+				<search-field></search-field>
+			<!-- <div class="search clearfix">
+				Поиск по каталогу:
+				<input
+					type="text" size="20" class="products_filter"
+					v-bind:value="productName"
+					v-on:input="filter($event)"
+				>
+			</div> -->
+				<!-- <input type="submit" id="find" value="искать"> -->
+			</div>
+
+			<div class="catalog">
+
+			</div>
+			<div class="basketapp">
+		        <basket-list></basket-list>
+		    </div>
+			<div class="forfooter"></div>
+		</div>
+		<div class="footer">
+			<hr>
+			<p><i>Все права защищены &copy;</i></p>
+		</div>
+		<script src="catalog_script.js" type="text/javascript"></script>
+		<script src="basket_script.js" type="text/javascript"></script>
+		<script src="main.js" type="text/javascript"></script>
+	</body>
+</html>