KurskiySergey · KurskiySergey · Sep 6, 2020 · Om1X · Sep 29, 2020 · Om1X
diff --git a/ShopVue/img/default.jpg b/ShopVue/img/default.jpg
diff --git a/ShopVue/index.html b/ShopVue/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="styles/main.css">
+</head>
+
+<body>
+    <div id="app">
+        <div class="header">
+            <div class="name">
+                <h1>{{title}}</h1>
+            </div>
+       <cart ref="cart"></cart>
+        </div>
+        <div class="main">
+           <products ref="products"></products>
+        </div>
+        <error ref='error'></error>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+    <script src="js/Error.js"></script>
+    <script src="js/SearchLine.js"></script>
+    <script src="js/Cart.js"></script>
+    <script src="js/Product.js"></script>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/ShopVue/js/Cart.js b/ShopVue/js/Cart.js
@@ -0,0 +1,71 @@
+Vue.component('cart', {
+    data() {
+
+        return {
+            basket: [],
+            basketFile: 'getBasket.json',
+            isVisibleCart: false,
+            basket_amount: 0,
+            countGoods: 0,
+        }
+    },
+
+    methods: {
+
+        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);
+                    }
+                }
+            }
+
+
+            console.log(this.basket);
+        }
+
+    },
+    created() {
+
+        this.$parent.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);
+
+            }).catch(error => {
+                this.$parent.showError(error);
+            });
+    },
+
+    template: `<div class="cart">
+                <search_line></search_line>
+                <button class="btn-cart" @click="isVisibleCart = !isVisibleCart">Корзина</button>
+                <div class="user_cart" :class="{hide : !isVisibleCart}" >
+                    <cart-item v-for="item in basket" 
+                        :key="item.id_product"
+                        :item ="item"
+                        @delete = "deleteProduct"
+                    >
+                    </cart-item>
+                </div>
+            </div>`
+});
+
+
+Vue.component('cart-item', {
+    props: ['item'],
+    template: `<div class="basket_item">
+                        <span><b>{{item.product_name}}</b></span>
+                        <span>x ({{item.quantity}}) </span>
+                        <span> <i>{{item.price * item.quantity}}</i> P </span>
+                        <span><button @click="$emit('delete', item.product_name)"> x </button></span>
+                        <hr>
+                    </div>`
+});
diff --git a/ShopVue/js/Error.js b/ShopVue/js/Error.js
@@ -0,0 +1,24 @@
+Vue.component('error', {
+
+    data() {
+
+        return {
+            error: '',
+            isError: false
+        }
+    },
+
+    methods: {
+
+        closeError() {
+            this.$el.close();
+        }
+
+    },
+
+    template: `<dialog class="error">
+                <p>Возникла ошибка - {{error}}</p>
+                <button @click="closeError()">Закрыть</button>
+                </dialog>`
+
+});
diff --git a/ShopVue/js/Product.js b/ShopVue/js/Product.js
@@ -0,0 +1,89 @@
+Vue.component('products', {
+    data() {
+
+        return {
+            products: [],
+            filtered_products: [],
+            catalogFile: 'catalogData.json',
+            isNoProducts: false,
+        }
+
+    },
+    methods: {
+
+        addProduct(product) {
+            this.$parent.getRequest('addToBasket.json')
+                .then(data => {
+                    if (data.result === 1) {
+                        this.addToBasket(product);
+                    }
+                });
+
+        },
+
+        addToBasket(product) {
+            let isAdded = false;
+            for (item of this.$root.$refs.cart.basket) {
+                if (item.product_name === product.product_name) {
+                    item.quantity += 1;
+                    isAdded = true;
+                    break;
+                }
+            }
+
+            if (!isAdded) {
+                //product['quantity'] = 1;
+                let prod = Object.assign({
+                    quantity: 1
+                }, product);
+                this.$root.$refs.cart.basket.push(prod);
+            }
+
+        },
+
+
+    },
+    created() {
+
+        this.$parent.getRequest(this.catalogFile)
+            .then(data => {
+                console.log(data);
+                for (let item of data) {
+                    this.filtered_products.push(item);
+                    this.products.push(item);
+                }
+                if (this.products.length === 0) {
+                    this.isNoProducts = true;
+                }
+                console.log(this.products);
+
+            }).catch(error => {
+                this.$parent.showError(error);
+            });
+    },
+
+    template: `<div class="products">
+               <div class="no_products" :class="{hide: !isNoProducts}">
+                   <p>Нет данных</p>
+               </div>
+                <product-item v-for="product in filtered_products" :key="product.id_product"
+                :product = "product"
+                @add = "addProduct"
+                >         
+                </product-item>
+            </div>`
+
+
+});
+
+
+Vue.component('product-item', {
+
+    props: ['product'],
+    template: `<div class="product-item">
+                    <img src="img/default.jpg" alt="">
+                    <h3>{{product.product_name}}</h3>
+                    <p>price - \${{product.price}}P</p>
+                    <button class="by-btn" @click="$emit('add', product)">Добавить в корзину</button>
+                </div>`
+});
diff --git a/ShopVue/js/SearchLine.js b/ShopVue/js/SearchLine.js
@@ -0,0 +1,32 @@
+Vue.component('search_line', {
+
+    data() {
+
+        return {
+            search_info: ''
+        }
+
+    },
+
+    methods : {
+
+        filterGoods() {
+            regExp = new RegExp(this.search_info, 'igm');
+            console.log(this.$root.$refs.products.products);
+            this.$root.$refs.products.filtered_products = this.$root.$refs.products.products.filter(el => regExp.test(el.product_name))
+        },
+
+    },
+
+    template: `<table class="search">
+                    <tr>
+                        <td class="search_line">
+                            <input type="text" v-model="search_info">
+                        </td>
+                        <td class="search_btn">
+                            <button class="find" @click="filterGoods()">Search</button>
+                        </td>
+                    </tr>
+                </table>`
+});
+
diff --git a/ShopVue/js/main.js b/ShopVue/js/main.js
@@ -0,0 +1,32 @@
+const API = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses/';
+
+const app = new Vue({
+
+    el: '#app',
+
+    data: {
+
+        title: 'Интернет магазин',
+
+    },
+
+    methods: {
+
+        getRequest(jsonFile) {
+
+            return fetch(`${API}${jsonFile}`)
+                .then(result => result.json())
+                .catch(error => error)
+
+        },
+
+        showError(error) {
+            let error_block = this.$root.$refs.error;
+            console.log(error_block);
+            error_block.error = error;
+            error_block.$el.showModal();
+        },
+
+    },
+
+});