diff --git a/ShopVue/img/default.jpg b/ShopVue/img/default.jpg new file mode 100644 index 0000000..af3ffa7 Binary files /dev/null and b/ShopVue/img/default.jpg differ diff --git a/ShopVue/index.html b/ShopVue/index.html new file mode 100644 index 0000000..a51b35e --- /dev/null +++ b/ShopVue/index.html @@ -0,0 +1,57 @@ + + + + + + Document + + + + +
+
+
+

{{title}}

+
+
+ + + + + +
+ + + +
+ +
+
+ {{item.product_name}} + x ({{item.quantity}}) + {{item.price}} P + +
+
+
+
+
+
+
+
+

Нет данных

+
+
+ +

{{product.product_name}}

+

price - ${{product.price}}P

+ +
+
+
+
+ + + + + diff --git a/ShopVue/js/main.js b/ShopVue/js/main.js new file mode 100644 index 0000000..08dd86f --- /dev/null +++ b/ShopVue/js/main.js @@ -0,0 +1,139 @@ +const API = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses/'; + +const app = new Vue({ + + el: '#app', + + data: { + + title: 'Интернет магазин', + products: [], + basket: [], + catalogFile: 'catalogData.json', + basketFile: 'getBasket.json', + search_info: '', + isVisibleCart: false, + isNoProducts: false, + basket_amount: 0, + countGoods: 0, + + }, + + methods: { + + getRequest(jsonFile) { + + return new Promise((resolve, reject) => { + + var xhr = new XMLHttpRequest(); + xhr.open('GET', `${API}${jsonFile}`, true); + + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + let response = JSON.parse(xhr.responseText); + resolve(response); + } else { + reject('Error'); + } + } + } + + xhr.send(); + + }); + + }, + + filterGoods() { + regExp = new RegExp(this.search_info, 'igm'); + console.log(regExp); + for ( let product of this.products) { + if ( !regExp.test(product.product_name)) { + product.class = 'hide'; + } else { + product.class = 'visible'; + } + } + }, + + addProduct(event) { + let productToAdd = event.target.parentElement.children[1].innerHTML; + for (let product of this.products) { + if ( product.product_name === productToAdd) { + this.addToBasket(product); + break; + } + } + + }, + + addToBasket(product) { + let isAdded = false; + for (item of this.basket) { + if (item.product_name === product.product_name) { + item.quantity += 1; + isAdded = true; + // Чтобы происходило обновление при изменении basket + this.basket.push(0); + this.basket.pop(); + break; + } + } + + if ( !isAdded ) { + product['quantity'] = 1; + // basket обновился => доп. изменения не нужны + this.basket.push(product); + } + + }, + + deleteProduct(product_name) { + console.log(product_name); + for (let i=0; i < this.basket.length; i++) { + if ( this.basket[i].product_name === product_name) { + if ( this.basket[i].quantity >= 2) { + this.basket[i].quantity--; + } else { + this.basket.splice(i,1); + } + // Чтобы происходило обновление при изменении basket + this.basket.push(0); + this.basket.pop(); + break; + } + } + + + console.log(this.basket); + } + + }, + created() { + this.getRequest(this.catalogFile) + .then(data => { + console.log(data); + for (let item of data) { + console.log(typeof(item)); + item['class'] = 'visible'; + this.products.push(item); + } + if (this.products.length === 0) { + this.isNoProducts = true; + } + console.log(this.products); + }); + + this.getRequest(this.basketFile) + .then(data => { + console.log(data); + this.countGoods = data.countGoods; + this.basket_amount = data.amount; + this.basket = data.contents; + console.log(this.basket); + + }); + }, + +}); diff --git a/ShopVue/styles/main.css b/ShopVue/styles/main.css new file mode 100644 index 0000000..2088bdd --- /dev/null +++ b/ShopVue/styles/main.css @@ -0,0 +1,142 @@ +* { + margin: 0; + padding: 0; +} + +.header { + min-height: 60px; + background-color: aqua; + position: relative; +} + +h1 { + padding-top: 10px; +} + +.cart { + + position: absolute; + top: 10px; + right: 20px; + +} + +.search { + float: left; + margin-top: 3px; + margin-right: 20px; + border-collapse: collapse; +} + +.search_line { + border-bottom: 2px solid black; + padding: 2px; +} + +.search_line input { + padding: 5px; +} + +.search_btn { + border-bottom: 2px solid black; +} + +.search_btn .find { + display: block; + height: 30px; +} + +.btn-cart { + display: block; + right: 12px; + top: 10px; + width: 90px; + height: 40px; + +} + +.main-btn { + text-align: center; + display: block; + width: 150px; + height: 50px; + margin: 0 auto; +} + +.products { + min-height: 100px; + border: 1px solid black; +} + +.product-item { + margin: 15px 15px; + background-color: azure; + border: 1px solid black; + box-shadow: 0 0 10px rgba(0,0,0,0.5); +} + +.product-item img { + display: block; + max-height: 100px; + margin: 10px 10px; + float: left; + border-radius: 10%; +} + +.product-item h3 { + text-align: center; + margin-top: 10px; + font-style: oblique; +} + +.product-item p { + text-align: center; + margin-top: 10px; + color: royalblue; + font-style: italic; +} + +.product-item .by-btn { + display: block; + text-align: center; + height: 40px; + width: 150px; + margin: 10px auto; +} + +.user_cart { + position: absolute; + background-color: lightgrey; + display: block; + min-height: 50px; + width: 200px; + right: 5px; + top: 50px +} + +.user_cart:before { + content: ''; + width: 0; + position: absolute; + height: 0; + border-right: 10px solid transparent; + border-left: 10px solid transparent; + border-bottom: 10px solid lightgrey; + top: -10px; + right: 35px; +} + +.basket_item { + width: inherit; +} + +.hide { + display: none; +} + +.no_products p { + display: block; + margin: 0 auto; + font-size: 20px; + text-align: center; +} \ No newline at end of file