: VirtueMart Вопросы и Ответы (Готовые решения); 28 января 2024; Просмотров: 122

Кнопка быстрого заказа для VirtueMart (Купить в 1 клик) на Bootstrap

Как показывает практика, чем проще покупать товар на сайте, тем больше людей делают заказы. Следовательно, наличие кнопки Купить в 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

Для того чтобы переопределить текст этих констант, нужно в административной части сайта:

Перейти в раздел Система.
В группе Управление выбрать Переопределение констант.
Выбрать нужный язык.
Создать новое переопределение.

Кнопка быстрого заказа для VirtueMart (Купить в 1 клик) на Bootstrap

Создание таблицы в базе данных

Создание кнопки и модального окна на Bootstrap

Запись в БД и отправка письма продавцу

Переопределение констант

Вас может заинтересовать

Помощь

Продукция и услуги

Main Menu