Вопрос Кнопка Заказать

[eduard80]

Друзья привет. Делаю интернет магазин. Сейчас в настройках режим каталога, т.е корзины нет, да и не хочу. Хочу сделать на карточке товара кнопку ЗАКАЗАТЬ. Пользователь на нее нажимает, всплывает окно, туда вбиваются контактные данные и сообщение, далее отправляется все это хозяину магазина. Как это можно сделать, плагин, в ручную код и т.д?

 

[Di Ost]

Друзья привет. Делаю интернет магазин. Сейчас в настройках режим каталога, т.е корзины нет, да и не хочу. Хочу сделать на карточке товара кнопку ЗАКАЗАТЬ. Пользователь на нее нажимает, всплывает окно, туда вбиваются контактные данные и сообщение, далее отправляется все это хозяину магазина. Как это можно сделать, плагин, в ручную код и т.д?

Лучше всего в ручную, на кнопку вешается событие онклик + вызывается модалка и аяксиной возвращаете шаблон формы в окно, с помощью функции проверяете все ли заполнено и отправляете на нужный емаил\емайлы ( я еще докручиваю пользователям, что бы летело в тг чат, т.к. почту не всегда чекают )

 

[edgars2212]

Друзья привет. Делаю интернет магазин. Сейчас в настройках режим каталога, т.е корзины нет, да и не хочу. Хочу сделать на карточке товара кнопку ЗАКАЗАТЬ. Пользователь на нее нажимает, всплывает окно, туда вбиваются контактные данные и сообщение, далее отправляется все это хозяину магазина. Как это можно сделать, плагин, в ручную код и т.д?

Привет! Вашей задаче можно легко помочь с использованием нескольких вариантов: плагинов или ручного добавления кода.

1. Решение с помощью плагинов
Если вы используете CMS (например, WordPress), вот несколько плагинов, которые решают вашу задачу:

Для WordPress:

• Contact Form 7 + Popup Maker
  1. Установите Contact Form 7 для создания формы обратной связи (контактной формы).
  2. Создайте форму с полями: имя, телефон, комментарий.
  3. Установите Popup Maker, чтобы связать всплывающее окно с кнопкой.
  4. Добавьте всплывающее окно к кнопке "Заказать" на странице товара.
• WPForms
  • Легко создать форму с отправкой на почту владельца магазина.
  • Имеет функцию встроенного всплывающего окна.

2. Добавление вручную (HTML + JS + PHP)
Если вы хотите реализовать функциональность без плагинов, это можно сделать с использованием JavaScript и PHP.

Шаги:

1. HTML-кнопка:

<button id="orderButton">Заказать</button>

Всплывающее окно (HTML + CSS):

<div id="orderPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid #ccc; z-index:1000;">
    <h3>Оформить заказ</h3>
    <form id="orderForm">
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name" required>
        <br><br>
        <label for="phone">Телефон:</label>
        <input type="text" id="phone" name="phone" required>
        <br><br>
        <label for="message">Сообщение:</label>
        <textarea id="message" name="message"></textarea>
        <br><br>
        <button type="submit">Отправить</button>
        <button type="button" onclick="closePopup()">Закрыть</button>
    </form>
</div>

JavaScript (для открытия и закрытия окна):

document.getElementById('orderButton').addEventListener('click', function() {
    document.getElementById('orderPopup').style.display = 'block';
});

function closePopup() {
    document.getElementById('orderPopup').style.display = 'none';
}

PHP-обработка (сохранение и отправка на email): Создайте файл send_order.php:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = htmlspecialchars($_POST['name']);
    $phone = htmlspecialchars($_POST['phone']);
    $message = htmlspecialchars($_POST['message']);

    // Отправка email владельцу магазина
    $to = "example@yourstore.com";
    $subject = "Новый заказ";
    $body = "Имя: $name\nТелефон: $phone\nСообщение: $message";

    if (mail($to, $subject, $body)) {
        echo "success";
    } else {
        echo "error";
    }
}
?>

AJAX-запрос для отправки данных:

document.getElementById('orderForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);

    fetch('send_order.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        if (data === 'success') {
            alert('Ваш заказ успешно отправлен!');
            closePopup();
        } else {
            alert('Ошибка отправки. Попробуйте позже.');
        }
    })
    .catch(error => console.error('Ошибка:', error));
});

3. Готовые библиотеки/фреймворки

• Если вам нужен быстрый старт, рассмотрите использование Bootstrap Modal для всплывающего окна.
• Для отправки форм используйте jQuery AJAX (если jQuery уже подключен в проекте).

Если у вас есть дополнительные вопросы или конкретная CMS, уточните, чтобы предложить наиболее подходящее решение!