Як показує практика, чим простіше купити товар на сайті, тим більше людей оформлюють замовлення. Тому, наявність кнопки Купити в 1 клік є невід’ємним атрибутом кожного сучасного інтернет-магазину.
Розглянемо декілька способів, як створити кнопку швидкого замовлення на сайті під управлінням CMS Joomla! та VirtueMart. Але спочатку створимо таблицю в базі даних з потрібними нам полями. В ці поля будуть записуватися дані з форми, яку буде заповнювати користувач. Адже не дивлячись на те, що форма замовлення буде максимально спрощена, нам все рівно треба зберігати інформацію про покупця: його прізвище та ім'я, телефон, назву замовленого товару та ін.
Створення таблиці в базі даних
Я планую створити форму в які обов'язковими буде лише 2 поля – ПІБ та Номер телефону. При бажанні, покупець зможе ввести ще й Email та написати коментар до замовлення. Ось це і всі поля які потрібно буде заповнити клієнту. Але окрім інформації яку вказує клієнт нам потрібно буде отримати і записати в таблицю дату і час замовлення, назву товару, ціну товару, сторінку з якої було оформлено замовлення, ip користувача.
Щоб створити таблицю з усіма переліченими вище полями використаємо наступний SQL запит:
CREATE TABLE `#__quick_order` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`ip_input` text(1000) NOT NULL,
`date_input` text(1000) NOT NULL,
`pib_input` text(1000) NOT NULL,
`pib_input` text(1000) NOT NULL,
`mail_input` text(1000) NOT NULL,
`comment_input` text(1000) NOT NULL,
`product_name_input` text(1000) NOT NULL,
`product_price_input` text(1000) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8;Створення кнопки і модального вікна на Bootstrap
Найкращий та найпростіший, на мою думку, спосіб створити кнопку швидкого замовлення товару – це використати Bootstrap. Звісно ж якщо ваш сайт підтримує цей набір інструментів.
За відображення картки товару в VirtueMart відповідає файл \components\com_virtuemart\views\productdetails\tmpl\default.php
Тому, перш за все, нам потрібно знайти цей файл і скопіювати його в папку html вашого шаблону, щоб при оновленні VirtueMart не втратити зміни, які ми внесемо в цей файл для відображення кнопки і модального вікна швидкого замовлення.
Зрештою, файл default.php для відображення товарів VirtueMart повинен знаходися за такою адресою:
\templates\ваш_шаблон\html\com_virtuemart\productdetailsДля відображення кнопки "Швидке замовлення" та модального вікна з полями, які повинен заповнити покупець, додайте в файл default.php наступний код:
<!-- Кнопка "Швидке замовлення" -->
<div class="quick-order-btn float-center">
<a class="btn btn-warning" href="#" rel="noopener noreferrer noindex nofollow" data-bs-toggle="modal" data-bs-target="#quickOrder"><?php echo vmText::_('VM_QUICK_ORDER') ?></a>
</div>
<!-- Модальне вікно Швидкого замовлення товору -->
<div class="modal fade" id="quickOrder" tabindex="-1" role="dialog" aria-labelledby="quickOrderLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="quickOrderLabel"><?php echo vmText::_('VM_QUICK_ORDER') . ' ' . $this->product->product_name . ' (' . number_format($this->product->product_price, 2, ',', '') . ' грн.)'; ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Форма відправки замовлення -->
<div id="quickOrderForm">
<form id="reg_form" style="text/css" method="post" enctype="multipart/form-data">
<fieldset class="ui-sortable">
<div class="row">
<div class="col-md-12">
<p><input type="text" class="form-control" name="pib-input" id="pib-input" required placeholder="<?php echo JText::_('VM_QUICK_ORDER_PIB') ?>"></p>
<p>
<input type="tel" class="form-control" name="phone-input" id="phone-input" required
placeholder="<?php echo JText::_('VM_QUICK_ORDER_PHONE') ?>"
title="Дозволено вводити тільки цифри"
oninput="this.value = this.value.replace(/[^0-9+() \-]/g, '');"
>
</p>
<p><input type="text" class="form-control" name="mail-input" id="mail-input" placeholder="<?php echo JText::_('VM_QUICK_ORDER_MAIL') ?>"></p>
<p><textarea rows="5" class="form-control" name="comment-input" id="comment-input" placeholder="<?php echo JText::_('VM_QUICK_ORDER_COMMENT') ?>"></textarea></p>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" required>
<label class="form-check-label" for="flexCheckDefault">
<?php echo JText::_('VM_QUICK_ORDER_AGREEMENT') ?>
</label>
</div>
<button class="btn btn-primary mybtn-send float-right" type="submit" id="btnQuickOrder" name="submit"><?php echo JText::_('Підтвердити') ?></button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>Особисто я додав цей код перед кодом відображення кнопки запитання про товар.
Запис в БД та надсилання листа продавцю
Щоб інформація яку вказав покупець в модальному вікні була записана в таблицю бази даних та відправлена на пошту продавця, додайте в файл \templates\ваш_шаблон\html\com_virtuemart\productdetails\default.php наступний код:
use Joomla\CMS\Factory;
use Joomla\CMS\Mail\MailHelper;
if(isset($_POST['submit'])) {
$curDate = date('Y-m-d H:i:s'); // поточна дата та час
$curPage = $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; // поточна сторінка
// Пошта одержувача
// Отримання головного об'єкта додатка Joomla
$app = Joomla\CMS\Factory::getApplication();
// Отримання адреси електронної пошти з конфігурації сайту
$recipient = $app->getConfig()->get('mailfrom');
// Пошта відправника
$sender = Ця електронна адреса захищена від спам-ботів. Вам необхідно увімкнути JavaScript, щоб побачити її. ';
// Get form data
if(isset($_POST['pib-input']) && isset($_POST['phone-input'])) {
$pib_input = $_POST['pib-input'];
$phone_input = $_POST['phone-input'];
$mail_input = $_POST['mail-input'];
$comment_input = $_POST['comment-input'];
}
// Запис в БД
$db = Factory::getDbo();
$query = $db->getQuery(true);
$profile = new stdClass();
$profile->id = NULL;
$profile->ip_input = $_SERVER['REMOTE_ADDR'];
$profile->date_input = $curDate;
$profile->pib_input = $pib_input;
$profile->phone_input = $phone_input;
$profile->mail_input = $mail_input;
$profile->comment_input = $comment_input;
$profile->product_name_input = $this->product->product_name;
$profile->product_price_input = number_format($this->product->product_price, 2, ',', '') . ' грн';
$result = JFactory::getDbo()->insertObject('#__quick_order', $profile);
// Відправка пошти
$subject = "Швидке замовлення";
$body = vmText::_('VM_QUICK_ORDER') . ' ' . $this->product->product_name . ' (' . number_format($this->product->product_price, 2, ',', '') . ') грн' . "<br>";
$body .= "IP користувача: " . $_SERVER['REMOTE_ADDR'] . "<br>";
$body .= "ПІБ: " . $pib_input . "<br>";
$body .= "Телефон: " . $phone_input . "<br>";
$body .= "Email: " . $mail_input . "<br>";
$body .= "Коментар до замовлення: " . $comment_input . "<br>";
$body .= "Сторінка товару: " . $curPage . "<br>";
$body .= "Дата замовлення: " . $curDate . "<br>";
$body .= "Назва товару: " . $this->product->product_name . "<br>";
$body .= "Ціна товару: " . number_format($this->product->product_price, 2, ',', '') . ' грн' . "<br>";
$mail = Factory::getMailer();
$mail->addAddress($recipient);
$mail->setSender(array($sender, $pib_input));
$mail->setSubject($subject);
$mail->isHTML(true);
$mail->setBody($body);
// Відправляємо email та відображаємо повідомлення про успіх або помилку
$sent = $mail->send();
if ($sent) {
JFactory::getApplication()->enqueueMessage(JText::_('Ваше замовлення успішно сформовано'));
} else {
JFactory::getApplication()->enqueueMessage(JText::_('Виникла помилка при оформленні замовлення.'), 'error');
}
}Увага!
В даному прикладі, я використовую пошту яка вказана в конфігурації Joomla 4. Для цього використовується наступний рядок коду:
$recipient = $app->getConfig()->get('mailfrom');Але, якщо ваш сайт працює на CMS Joomla 3, то для отримання доступу до конфігурації сайту потрібно використовувати інший спосіб:
$config = JFactory::getConfig();
$recipient = $config->get('mailfrom');Перевизначення констант
Як ви вже мабуть помітили, в нашому коді використовуються мовні константи:
- VM_QUICK_ORDER
- VM_QUICK_ORDER_PIB
- VM_QUICK_ORDER_PHONE
- VM_QUICK_ORDER_MAIL
- VM_QUICK_ORDER_COMMENT
- VM_QUICK_ORDER_AGREEMENT
Для того щоб перевизначити текст цих констант потрібно в адміністративній частині сайту:
- Перейти в розділ Система.
- В групі Керування обрати Перевизначення для мови.
- Обрати потрібну мову.
- Створити нове перевизначення.
Пригостити автора кавою