@dmitriu256

Как передать значение из одного класса в другой?

Есть два класса
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">&times;</button></td>
            `;
            this.cartTableGoods.append(trGood);
        });

        const totalCount = this.cartGoods.reduce((sum, item) => {
            return sum + (item.price * item.count);
        }, 0)

        this.cartTableTotal.innerHTML = totalCount + '&#36;';
    }

    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 данные из класса корзины - однако как и предполагается на старте он пуст, но походу заполнения корзины должен обновляться
Как поступить в данной ситуации?
  • Вопрос задан
  • 65 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы