Есть два класса
1) Обработка корзины (Cart)
2) Обработка и отправка формы SendForm
Работают независимо друг от друга
Вопрос как передать массив данных (cartGoods) из класса Cart в класс sendForm для отправки на сервер
Класс sendForm дополнительно отправляет на сервер имя и телефон пользователя.
Код Cart
class Cart {
constructor() {
const cartGoods = this.cartGoods = [];
const cartTableGoods = this.cartTableGoods = document.querySelector('.cart-table__goods');
const cartTableTotal = this.cartTableTotal = document.querySelector('.card-table__total');
const cartCount = this.cartCount = document.querySelector('.cart-count');
}
//Получение данных от сервера
async getGoods() {
const response = await fetch('http://localhost:3010/goods');
if (!response.ok) {
throw ('Что то пошло не так...');
} else {
return response.json();
}
}
counterGoods() {
let sum = 0;
this.cartGoods.forEach(item => {
sum += item.count;
});
this.cartCount.textContent = sum;
}
clearCart() {
this.cartGoods.length = 0;
this.renderCart();
this.counterGoods();
}
renderCart() {
this.cartTableGoods.textContent = '';
this.cartGoods.forEach(({id, name, price, count}) => {
const trGood = document.createElement('tr');
trGood.className = 'cart-item';
trGood.dataset.id = id;
trGood.innerHTML = `
<td>${name}</td>
<td>${price}$</td>
<td><button class="cart-btn-minus">-</button></td>
<td>${count}</td>
<td><button class="cart-btn-plus">+</button></td>
<td>${price * count}$</td>
<td><button class="cart-btn-delete">×</button></td>
`;
this.cartTableGoods.append(trGood);
});
const totalCount = this.cartGoods.reduce((sum, item) => {
return sum + (item.price * item.count);
}, 0)
this.cartTableTotal.innerHTML = totalCount + '$';
}
plusGoods(id) {
for (const item of this.cartGoods) {
if (item.id === Number(id)) {
item.count++;
break;
}
}
this.renderCart();
this.counterGoods();
}
subGoods(id) {
for (const item of this.cartGoods) {
if (item.id === Number(id)) {
if (item.count <= 1) {
this.deleteCart(id);
} else {
item.count--;
}
break;
}
}
this.renderCart();
this.counterGoods();
}
deleteCart(id) {
this.cartGoods = this.cartGoods.filter(item => Number(id) !== item.id);
this.renderCart();
this.counterGoods();
}
....
Код sendForm
class sendForm {
constructor(elem, dataCart) {
const modal = this.modal = new Popup(elem);
this.dataCart = dataCart;
console.log(this.dataCart);
}
processForm(form){
for(let i = 0; i < form.elements.length; i++){
if(form.elements[i].type !== 'submit'){
form.elements[i].required = 'required';
//Validation chema
form.elements[i].addEventListener('blur', event => new Validation().validateForm(event));
}
}
form.addEventListener('submit', event => this.sendForm(event))
}
sendForm(event){
event.preventDefault();
const el = event.target;
//Инфо блок - оповещение пользователя
let messageBlock = document.createElement('div');
messageBlock.classList.add('modal-message');
const data = {};
//Перебор элементов формы
for(let i in el.elements){
//Проверка наличия свойств
if(el.elements.hasOwnProperty(i)){
if(el.elements[i].name){
//Формируем объект с данными
data[el.elements[i].name] = el.elements[i].value;
}
}
}
data.res = this.cartData; -- пустой массив
console.log(data);
el.parentElement.append(messageBlock);
fetch('http://localhost:3010/orders', {
method: 'POST',
mode: 'cors', // no-cors, cors, *same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json; charset=utf-8',
// 'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify(data), // тип данных в body должен соответвовать значению заголовка "Content-Type"
})
.then(response => response.text())
.then(response => {
console.log(response);
messageBlock.textContent = response;
})
.catch(error => console.log(error))
//Убираем оповещение пользователя
setTimeout(()=> {
el.parentElement.removeChild(messageBlock);
this.modal.closeModal();
el.reset();
new Cart().clearCart.bind(cart);
}, 5000);
}
}
Код main script
//Добавление товара в корзинку
document.body.addEventListener('click', event => {
const addToCart = event.target.closest('.add-to-cart');
if(addToCart){
cart.addCartGoods(addToCart.dataset.id);
}
});
//Обработка клика по форме заказа
cartTableGoods.addEventListener('click', event => {
const target = event.target;
if(target.classList.contains('cart-btn-delete')){
const id = target.closest('.cart-item').dataset.id;
//Удаление записи
cart.deleteCart(id);
//Я думаю так не верно - вставлять на каждом этапе взаимодействием с корзиной
--- new sendForm('#modal-cart', cart.cartGoods).processForm(order); ---
}
if(target.classList.contains('cart-btn-plus')){
const id = target.closest('.cart-item').dataset.id;
cart.plusGoods(id);
//Я думаю так не верно - вставлять на каждом этапе взаимодействием с корзиной
--- new sendForm('#modal-cart', cart.cartGoods).processForm(order); ---
}
...
//Один вызов на странице
new sendForm('#modal-cart', cart.cartGoods).processForm(order);
В new sendForm('#modal-cart', cart.cartGoods)
1 параметр используется для вызова модального окна
2 данные из класса корзины - однако как и предполагается на старте он пуст, но походу заполнения корзины должен обновляться
Как поступить в данной ситуации?