Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > IT форум > Помощь студентам
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.08.2020, 20:50   #1
Pavll
Пользователь
 
Регистрация: 03.11.2017
Сообщений: 24
По умолчанию Проблема с вводом и отображением на экране товаров из корзины!

Добрый день!
Код работает, за исключением одного момента.
Есть корзина, куда должен отправляться выбранный товар при нажатии кнопки "Купить".
Есть, также, мини-корзина со счётчиком количества товара, который отображается на этой же странице в левом верхнем углу. С мини-корзиной проблемы нет, когда нажимаешь "Купить", то счётчик увеличивается.
Проблема с главной корзиной (cart.html) - при нажатии "Купить" корзина, или не пополняется, или пополняется, но не отображается на экране.
При нажатии "Купить" на вкладке "Network" в браузере Хром ничего не происходит, не выводится.
В cart.html отображается, только форма для данных покупателя, а сам товар нет.

Файл main.js:
Код:
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(главная корзина):
Код:
<!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:
Код:
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); // отправить письмо с заказом
});
Хотел ещё выложить некоторые файлы: index.html и function.php (в нём подключения к БД), но слишком длинный текст получается. Надеюсь на Вашу помощь.
Вот, что выводится в браузере, а должен быть ещё сам выбранный товар:
https://www.programmersforum.ru/atta...1&d=1596914398

Последний раз редактировалось Pavll; 08.08.2020 в 22:25.
Pavll вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с вводом строки e13geni4 Паскаль, Turbo Pascal, PascalABC.NET 1 22.04.2020 23:44
Удаление корзины товаров Владимир Литвинов WordPress и другие CMS 0 29.08.2016 17:52
проблема с вводом числа. Kunka Microsoft Office Excel 2 01.06.2010 12:42
Проблема с вводом через cin.get [С++] Subtile Помощь студентам 4 10.03.2010 16:55
Проблема с вводом в c++ Builder ksyst Помощь студентам 2 20.12.2009 18:25