0

Всем привет, пишу диплом на тему сайт-магазин обуви Сделал корзину на js , и никак не могу оживить кнопку заказать. Как я понял js не взаимодействует с БД. Решил это сделать с помощью php, но не знаю как реализовать изменения в бд без inputa.

ниже кусок js(после него html)

// Div внутри корзины, в который мы добавляем товары
const cartWrapper =  document.querySelector('.cart-wrapper');

// Отслеживаем клик на странице
window.addEventListener('click', function (event) {
    // Проверяем что клик был совершен по кнопке "Добавить в корзину"
    if (event.target.hasAttribute('data-cart')) {

        // Находим карточку с товаром, внутри котрой был совершен клик
        const card = event.target.closest('.card');

        // Собираем данные с этого товара и записываем их в единый объект productInfo
        const productInfo = {
            id: card.dataset.id,
            imgSrc: card.querySelector('.product-img').getAttribute('src'),
            title: card.querySelector('.item-title').innerText,
            itemsInBox: card.querySelector('[data-items-in-box]').innerText,
            weight: card.querySelector('.price__weight').innerText,
            price: card.querySelector('.price__currency').innerText,
            counter: card.querySelector('[data-counter]').innerText,
        };

        // Проверять если ли уже такой товар в корзине
        const itemInCart = cartWrapper.querySelector(`[data-id="${productInfo.id}"]`);

        // Если товар есть в корзине
        if (itemInCart) {
            const counterElement = itemInCart.querySelector('[data-counter]');
            counterElement.innerText = parseInt(counterElement.innerText) + parseInt(productInfo.counter);
        } else {
            // Если товара нет в корзине

            // Собранные данные подставим в шаблон для товара в корзине
            const cartItemHTML = `<div class="cart-item" data-id="${productInfo.id}">
                                <div class="cart-item__top">
                                    <div class="cart-item__img">
                                        <img src="${productInfo.imgSrc}" alt="${productInfo.title}">
                                    </div>
                                    <div class="cart-item__desc">
                                        <div class="cart-item__title">${productInfo.title}</div>
                                        <div class="cart-item__weight">${productInfo.itemsInBox} / ${productInfo.weight}</div>

                                        <!-- cart-item__details -->
                                        <div class="cart-item__details">

                                            <div class="items items--small counter-wrapper">
                                                <div class="items__control" data-action="minus">-</div>
                                                <div class="items__current" data-counter="">${productInfo.counter}</div>
                                                <div class="items__control" data-action="plus">+</div>
                                            </div>

                                            

                                            <div class="price">
                                                <div class="price__currency">${productInfo.price}</div>
                                            </div>

                                        </div>
                                        <!-- // cart-item__details -->

                                    </div>
                                </div>
                            </div>`;

            // Отобразим товар в корзине
            cartWrapper.insertAdjacentHTML('beforeend', cartItemHTML);
        }

        // Сбрасываем счетчик добавленного товара на "1"
        card.querySelector('[data-counter]').innerText = '1';

        // Отображение статуса корзины Пустая / Полная
        toggleCartStatus();

        // Пересчет общей стоимости товаров в корзине
        calcCartPriceAndDelivery();

    }
});

html

    <!-- Корзина -->
            <div class="col-md-10">

                <!-- Корзина -->
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title">Ваш заказ</h4>

                            <div data-cart-empty class="alert alert-secondary" role="alert">
                            Корзина пуста
                        </div>

                        <!-- cart-wrapper -->
                        <div class="cart-wrapper">

                    

                        </div>
                        <!-- // cart-wrapper -->

                        <!-- Стоимость заказа -->
                        <div class="cart-total">
                            <p data-cart-delivery class="none">
                                <span class="h5">Доставка:</span>
                                <span class="delivery-cost">250 $</span><br>
                                <span class="small">Бесплатно при заказе от 600$</span>
                            </p>
                            <p><span class="h5">Итого:</span>
                                <span class="total-price">0</span>
                                <span class="rouble">$</span></p>
                        </div>
                        <!-- // Стоимость заказа -->

                    </div>

                    <!-- Оформить заказ -->
                    <div id="order-form" class="card-body border-top none">
                        <h5 class="card-title">Оформить заказ</h4>
                        <form>
                            <div class="form-group">
                                <input type="text" class="form_contorl" placeholder="Ваш номер телефона">
                            </div>
                            <button type="submit" class="btn btn-primary">Заказать</button>
                        </form>
                    </div>
                    <!-- // Оформить заказ -->

                </div>
                <!-- // Корзина -->

11
  • Что означает в данном случае без input'а? Смотрите как устроена клиент-серверная архитектура, запросы из вашего HTML/JS уходят на сервер вместе с введенными данными пользователем, далее PHP их обрабатывает и возвращает результат клиенту.
    – Alex Krass
    25 мая 2022 в 10:16
  • ну вот я не пойму как корзину загрузить в бд 25 мая 2022 в 10:18
  • При нажатии на кнопку submit браузер как правило отправляет только поля, которые присутствуют на форме к которой кнопка относится. Первый вариант, запихнуть предварительно данные в скрытое поле и отправить их, но это не лучший метод. Второй вариант, это сформировать запрос из JS кода и отправить. Для примера так: раз ссылка на fetch и два ссылка на formdata
    – Alex Krass
    25 мая 2022 в 10:25
  • а не подскажите как сделать первый вариант? 25 мая 2022 в 10:34
  • Добавьте <input type="hidden" id="example" value="пусто">, при обработке клика по submit нужной формы добавьте document.getElementById("example").setAttribute('value', 'данные для передачи на сервер');. То придут они в текстовом виде, который надо будет обработать на сервере.
    – Alex Krass
    25 мая 2022 в 10:48

1 ответ 1

0

Чтобы отправить данные на сервер, можно воспользоваться fetch функцией, которая это сделает. В качестве параметров вам надо только указать URL куда отправлять и сами параметры.

let url = window.location.host + "/controller";
let params = {
    "productId" : productInfo.id,
    "count" : productInfo.counter
}
fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify(params)
}).then(response => response.json())
  .then(data => console.log(data));

Ну и конечно вам нужен ваш PHP код, который прочитает по заданному URL эти параметры из $_POST и запишет из в базу данных. По итогу ваш код должен выглядеть хотя бы на первой итерации как-то так.

window.addEventListener('click', function (event) {
    if (event.target.hasAttribute('data-cart')) {
        ...
        
        let url = window.location.host + "/PATH_TO_PHP_URL";
        let params = {
            "productId" : productInfo.id,
            "count" : productInfo.counter
        }
        fetch(url, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json;charset=utf-8'
            },
            body: JSON.stringify(params)
        }).then(response => response.json())
          .then(data => console.log(data));

    }
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.