Проблема с вводом и отображением на экране товаров из корзины!

Тема в разделе "JavaScript", создана пользователем Pavl, 9 авг 2020.

  1. Pavl

    Pavl

    Регистрация:
    17 сен 2016
    Сообщения:
    10
    Симпатии:
    0
    Добрый день!
    Код работает, за исключением одного момента.
    Есть корзина, куда должен отправляться выбранный товар при нажатии кнопки "Купить".
    Есть, также, мини-корзина со счётчиком количества товара, который отображается на этой же странице в левом верхнем углу. С мини-корзиной проблемы нет, когда нажимаешь "Купить", то счётчик увеличивается.
    Проблема с главной корзиной (cart.html) - при нажатии "Купить" корзина, или не пополняется, или пополняется, но не отображается на экране.
    При нажатии "Купить" на вкладке "Network" в браузере Хром ничего не происходит, не выводится.
    На странице cart.html отображается, только форма для данных покупателя, а сам выбранный товар нет.
    Файл index.html:
    PHP:
    <!DOCTYPE html>
    <
    html lang="ru">
    <
    head>
        <
    meta charset="UTF-8">
        <
    title>autoshop</title>
        <
    link rel="stylesheet" href="css/style.css">
    </
    head>
    <
    body>

    <!--<
    div class="cart">-->
        <!--<
    class="name">Цветы</p>-->
        <!--<
    img src="images/grape.png" alt="">-->
        <!--<
    div class="cost">500</div>-->
        <!--<
    button class="add-to-cart">Купить</button>-->
    <!--</
    div>-->

    <
    header></header>
    <
    main>
        <
    a href="cart.html">Корзина</a>
        <
    div class="mini-cart"></div>
        <!--<
    a href="later.html">Желания</a>-->
        <
    div class="goods-out"></div>
    </
    main>
    <
    footer></footer>

    <
    script src="js/jquery-3.5.1.min.js"></script>
    <
    script src="js/main.js"></script>
    </
    body>
    </
    html>
    Файл main.js:
    PHP:
    var cart = {}; // корзина

    function init() {
        
    //вычитуем файл goods.json
        //$.getJSON("goods.json", goodsOut);
        
    $.post(
            
    "admin/core.php",
            {
                
    "action" "loadGoods"
            
    },
            
    goodsOut
        
    );
    }

     function 
    goodsOut(data) {
         
    // вывод на страницу
         
    data JSON.parse(data);
         
    console.log(data);
         var 
    out='';
         for (var 
    key in data) {
             
    // out +='<div class="cart">';
             // out +='<p class="name">'+data[key].name+'</p>';
             // out += '<img src="images/'+data[key].img+'" alt="">';
             // out +='<div class="cost">'+data[key].cost+'</div>';
             // out +='<button class="add-to-cart">Купить</button>';
             // out +='</div>';
             //---------
             
    out +='<div class="cart">';
             
    //out +=`<button class="later" data-id="${key}">&hearts;</button>`;
             
    out +=`<p class="name"><a href="goods.html#${key}">${data[key].name}</a></p>`;
             
    //out +=`<img src="images/${data[key].img}" alt="">`;
             
    out +=`<div class="cost">${data[key].cost}</div>`;
             
    out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`;
             
    out +='</div>';
         }
         $(
    '.goods-out').html(out);
         $(
    '.add-to-cart').on('click'addToCart);
         $(
    '.later').on('click'addToLater);
     }

    function 
    addToLater() {
        
    //добавляем товар в "желания"
        
    var later = {};
        if (
    localStorage.getItem('later')) {
            
    // если есть - расшифровываю и записываю в переменную cart
            
    later JSON.parse(localStorage.getItem('later'));
        }
        
    alert('Добавлено в Желания');
        var 
    id = $(this).attr('data-id');
        
    later[id] = 1;
        
    localStorage.setItem('later'JSON.stringify(later)); //корзину в строку
    }

    function 
    addToCart() {
        
    //добавляем товар в корзину
        
    var id = $(this).attr('data-id');
        
    // console.log(id);
        
    if (cart[id]==undefined) {
            
    cart[id] = 1//если в корзине нет товара - делаем равным 1
        
    }
        else {
            
    cart[id]++; //если такой товар есть - увеличиваю на единицу
        
    }
        
    showMiniCart();
        
    saveCart();
    }

    function 
    saveCart() {
        
    //сохраняю корзину в localStorage
        
    localStorage.setItem('cart'JSON.stringify(cart)); //корзину в строку
    }

    function 
    showMiniCart() {
        
    //показываю мини корзину
        
    var out="";
        for (var 
    key in cart) {
            
    out += key +' --- 'cart[key]+'<br>';
        }
        $(
    '.mini-cart').html(out);
    }

    function 
    loadCart() {
        
    //проверяю есть ли в localStorage запись cart
        
    if (localStorage.getItem('cart')) {
            
    // если есть - расширфровываю и записываю в переменную cart
            
    cart JSON.parse(localStorage.getItem('cart'));
            
    showMiniCart();
        }
    }

    $(
    document).ready(function () {
        
    init();
        
    loadCart();
    });
    Файл cart.html(главная корзина):
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <header></header>
    <main>
        <div class="main-cart"></div>
        <div class="email-field">
            <p>Имя: <input type="text" id="ename"></p>
            <p>Email: <input type="text" id="email"></p>
            <p>Телефон: <input type="text" id="ephone"></p>
            <p><button class="send-email">Заказать</button></p>
        </div>
    </main>
    <footer></footer>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/cart.js"></script>
    </body>
    </html>
    Файл cart.js:
    PHP:
    var cart = {};
    function 
    loadCart() {
        
    //проверяю есть ли в localStorage запись cart
        
    if (localStorage.getItem('cart')) {
            
    // если есть - расширфровываю и записываю в переменную cart
            
    cart JSON.parse(localStorage.getItem('cart'));
                
    showCart();
            }
        else {
            $(
    '.main-cart').html('Корзина пуста!');
        }
    }

    function 
    showCart() {
        
    //вывод корзины
        
    if (!isEmpty(cart)) {
            $(
    '.main-cart').html('Корзина пуста!');
        }
        else {
            $.
    getJSON('goods.json', function (data) {
                var 
    goods data;
                var 
    out '';
                for (var 
    id in cart) {
                    
    out += `<button data-id="${id}" class="del-goods">x</button>`;
                    
    //out += `<img src="images\\${goods[id].img}">`;
                    
    out += ` ${goods[id].name  }`;
                    
    out += `  <button data-id="${id}" class="minus-goods">-</button>  `;
                    
    out += ` ${cart[id]}  `;
                    
    out += `  <button data-id="${id}" class="plus-goods">+</button>  `;
                    
    out += cart[id]*goods[id].cost;
                    
    out += '<br>';
                }
                $(
    '.main-cart').html(out);
                $(
    '.del-goods').on('click'delGoods);
                $(
    '.plus-goods').on('click'plusGoods);
                $(
    '.minus-goods').on('click'minusGoods);
            });
        }
    }

    function 
    delGoods() {
        
    //удаляем товар из корзины
        
    var id = $(this).attr('data-id');
        
    delete cart[id];
        
    saveCart();
        
    showCart();
    }
    function 
    plusGoods() {
        
    //добавляет товар в корзине
        
    var id = $(this).attr('data-id');
        
    cart[id]++;
        
    saveCart();
        
    showCart();
    }
    function 
    minusGoods() {
        
    //уменьшаем товар в корзине
        
    var id = $(this).attr('data-id');
        if (
    cart[id]==1) {
            
    delete cart[id];
        }
        else {
            
    cart[id]--;
        }
        
    saveCart();
        
    showCart();
    }

    function 
    saveCart() {
        
    //сохраняю корзину в localStorage
        
    localStorage.setItem('cart'JSON.stringify(cart)); //корзину в строку
    }

    function 
    isEmpty(object) {
        
    //проверка корзины на пустоту
        
    for (var key in object)
        if (
    object.hasOwnProperty(key)) return true;
        return 
    false;
    }

    function 
    sendEmail() {
        var 
    ename = $('#ename').val();
        var 
    email = $('#email').val();
        var 
    ephone = $('#ephone').val();
        if (
    ename!='' && email!='' && ephone!='') {
            if (
    isEmpty(cart)) {
                $.
    post(
                    
    "core/mail.php",
                    {
                        
    "ename" ename,
                        
    "email" email,
                        
    "ephone" ephone,
                        
    "cart" cart
                    
    },
                    function(
    data){
                        if (
    data==1) {
                            
    alert('Заказ отправлен');
                        }
                        else {
                            
    alert('Повторите заказ');
                        }
                    }
                );
            }
            else {
                
    alert('Корзина пуста');
            }
        }
        else {
            
    alert('Заполните поля');
        }

    }


    $(
    document).ready(function () {
       
    loadCart();
       $(
    '.send-email').on('click'sendEmail); // отправить письмо с заказом
    });
    Файл function.php:
    PHP:
    <?php
    $servername 
    "localhost";
    $username "root";
    $password "";
    $dbname "mysite";

    function 
    connect(){
        
    $conn mysqli_connect("localhost""root""""mysite");
        if (!
    $conn) {
            die(
    "Connection failed: " mysqli_connect_error());
        }
        
    mysqli_set_charset($conn"utf8");
        return 
    $conn;
    }

    function 
    init(){
        
    //вывожу список товаров
        
    $conn connect();
        
    $sql "SELECT id, name FROM tovar";
        
    $result mysqli_query($conn$sql);

        if (
    mysqli_num_rows($result) > 0) {
            
    $out = array();
            while(
    $row mysqli_fetch_assoc($result)) {
                
    $out[$row["id"]] = $row;
            }
            echo 
    json_encode($out);
        } else {
            echo 
    "0";
        }
        
    mysqli_close($conn);
    }

    function 
    selectOneGoods() {
        
    $conn connect();
        
    $id $_POST['gid'];
        
    $sql "SELECT * FROM tovar WHERE id = '$id'";
        
    $result mysqli_query($conn$sql);

        if (
    mysqli_num_rows($result) > 0) {
            
    $row mysqli_fetch_assoc($result);
            echo 
    json_encode($row);
        } else {
            echo 
    "0";
        }
        
    mysqli_close($conn);
    }

    function 
    updateGoods() {
        
    $conn connect();
        
    $id $_POST['id'];
        
    $name $_POST['gname'];
        
    $cost $_POST['gcost'];

        
    $sql "UPDATE tovar SET name = '$name', cost = '$cost' WHERE id = '$id' ";

        if (
    mysqli_query($conn$sql)) {
            echo 
    "1";
        } else {
            echo 
    "Error updating record: " mysqli_error($conn);

        }

        
    mysqli_close($conn);
        
    //writeJSON();
    }

    function 
    newGoods() {
        
    $conn connect();
        
    $name $_POST['gname'];
        
    $cost $_POST['gcost'];


        
    $sql "INSERT INTO tovar (name, cost)
          VALUES ('
    $name', '$cost')";

        if (
    mysqli_query($conn$sql)) {
            echo 
    "1";
        } else {
            echo 
    "Error: " $sql "<br>" mysqli_error($conn);
        }

        
    mysqli_close($conn);
    }



    function 
    loadGoods() {
        
    $conn connect();
        
    $sql "SELECT * FROM tovar";
        
    $result mysqli_query($conn$sql);

        if (
    mysqli_num_rows($result) > 0) {
            
    $out = array();
            while (
    $row mysqli_fetch_assoc($result)) {
                
    $out[$row["id"]] = $row;
            }
            echo 
    json_encode($out);
        } else {
            echo 
    "0";
        }
        
    mysqli_close($conn);
    }

    function 
    loadSingleGoods() {
        
    $id $_POST['id'];
        
    $conn connect();
        
    $sql "SELECT * FROM tovar WHERE id = '$id'";
        
    $result mysqli_query($conn$sql);
        if (
    mysqli_num_rows($result) > 0) {
            
    $row mysqli_fetch_assoc($result);
            echo 
    json_encode($row);
        } else {
            echo 
    "0";
        }
        
    mysqli_close($conn);
    }
    Надеюсь на Вашу помощь.