Rokquickcart + Chronoforms. Отправка заказов на почту

Интернет-магазины – в последнее время довольно частое явление. Существует достаточное количество компонентов для организации интернет-магазина на своём сайте, объединяющих в себе большое количество функций и возможностей. Но иногда необходимо обойтись чем-то простым и не слишком сложным. Как вариант, хотел бы посоветовать в этом случае компонент Rokquickcart от знаменитой студии RocketTheme.

RokQuickCart – простое и бесплатное расширение, которое позволит реализовать на Вашем сайте под управлением CMS Joomla 1.5 – 3.3 удобную и простую корзину для покупки любых товаров с Вашего ресурса.

К сожалению, в этом компоненте невозможно добавить альтернативные способы оплаты и доставки товаров. Поэтому, немного покопавшись в интернете и не найдя рабочего решения, попытался хоть как-то решить этот вопрос. В этой статье предлагаю Вам ознакомиться с таким вариантом оформления заказа, как отправка заказа товара из Rokquickcart с помощью формы связи Chronoforms. Сразу оговорюсь, этот способ не позволит производить оплату, с его помощью Вы сможете лишь получать уведомления (информацию) о заказе каких-либо товаров.

Как это работает:

Шаг 1 - Компоненты

Для начала нам потребуются следующие компоненты, которые Вы можете скачать по ссылкам Rokquickcart и Chronoforms или из вложений в конце статьи.

Шаг 2 - Установка

Установите эти компоненты на свой сайт с помощью стандартной установки расширений Joomla Расширения → Менеджер расширений.

Rokquickcart + Chronoforms. Установка компонентов

Шаг 3 - Товары

Теперь нам необходимо наполнить наш магазин товарами. Для этого перейдите в Компоненты → Rokquickcart

Rokquickcart + Chronoforms. Создание товаров

Сложностей в создании товаров никаких нет, поэтому не будем особо заострять на этом внимание.

Шаг 4 – Форма заказа

Перейдите в Компоненты Chronoforms

Rokquickcart + Chronoforms. Настройка формы заказа

Если у Вас не активированная версия компонента, Вы не сможете воспользоваться мастером форм (Form Wizard). Но для поставленных нами целей будет достаточно и легкой версии мастера форм (Easy Form Wizard). Переходим на вкладку Easy Form Wizard, если у Вас еще не создана форма. Если форма уже создана, нажимаем на ссылку Wizard Edit рядом с названием формы.

Итак, перед нами мастер создания форм.

Rokquickcart + Chronoforms. Настройка формы заказа

В левой области мы видим доступные для создания поля. Перенесите необходимые поля для заполнения заказчиком, например, несколько текстовых полей (Text Box) и переименуйте их в «Ф.И.О.», чтобы заказчик смог представиться, «Адрес» - куда доставить заказ, «Телефон» - для уточнения заказа и т.д. Для конфигурирования добавленного поля достаточно нажать значок «Configure» справа в добавленном поле.

Также нам понадобится специальное поле Custom Element (HTML/PHP) из списка Advanced Elements, именно в него будут передаваться данные о добавленных в заказ товарах. Откройте конфигурацию этого поля и добавьте следующий код в область Code:

<table>
	<tr>
		<th>Наименование</th>
		<th>Количество</th>
		<th>Цена</th>
		<th>Сумма</th>
	</tr>
	<?php
	$result = 0;
	for ($i = 1; $i <= $_POST[itemCount]; $i++) {
	?>
	<tr>
		<td><?php echo $_POST['item_name_' . $i]; ?></td>
		<td><?php echo $_POST['item_quantity_' . $i]; ?></td>
		<td><?php echo $_POST['item_price_' . $i] . '&#8381;'; ?></td>
		<td>
			<?php
				$result = $result + ($_POST['item_quantity_' . $i] * $_POST['item_price_' . $i]);
				echo ($_POST['item_quantity_' . $i] * $_POST['item_price_' . $i]) . '&#8381;';
			?>
			<input type="hidden" name="items[]" value="<?php echo $_POST['item_name_' . $i] . ' - ' . $_POST['item_quantity_' . $i] . ' шт (' . ($_POST['item_quantity_' . $i] * $_POST['item_price_' . $i]) . '&#8381;' . ')'; ?>" />
		</td>
	</tr>
	<?php } ?>
</table>
<p align="right">Итого к оплате: <?php echo $result . '&#8381;'; ?></p>
<input type="hidden" name="sum_result" value="<?php echo $result . '&#8381;'; ?>" />

Из кода видно, что при переходе в форму заказа, посетитель сможет увидеть заказываемые им товары в виде таблицы с наименованиями и ценами. Вы можете изменить вывод данных, как Вам хочется. Для знающих – достаточно вместо представленного выше кода добавить <?php print_r($_POST); ?> и ознакомившись с выводимыми данными оформить всё как нужно.

К сожалению, Chronoforms не сможет отправить в письме таблицу, которую мы вывели. Он отправляет лишь значения заполненных полей. Поэтому, чтобы отправить данные, в коде также были добавлены поля input типа hidden.

Пришлось повозиться с этим компонентом, чтобы хоть как-то добиться отправки данных. Компонент отправляет на почту данные только заданных заранее полей, а у нас, как Вы заметили, они формируются динамически в зависимости от количества заказываемых товаров и именно поэтому мы не можем точно знать, сколько будет полей в результате. Обратите внимание на строку:

<input type="hidden" name="items[]" value="<?php echo $_POST['item_name_' . $i] . ' - ' . $_POST['item_quantity_' . $i] . ' шт (' . ($_POST['item_quantity_' . $i] * $_POST['item_price_' . $i]) . '&#8381;' . ')'; ?>" />

Это тот максимум, которого удалось добиться с минимальными затратами сил и времени. Список заказанных товаров будет выводиться в строку. Когда мы сделаем отправку заказа, Вы сможете увидеть, как это будет выглядеть.

С настройкой формы почти закончили, не забудьте также добавить кнопку отправки Submit Button. И перейдите на вкладку Form Settings, где необходимо на английском языке без пробелов указать название Вашей формы, например Form-Zakaz.

Перейдем на вкладку Emails, здесь мы будем формировать письмо.

Rokquickcart + Chronoforms. Настройка формы заказа

Шаг 5 – Заказ

Теперь нам необходимо сделать так, чтобы заказы товаров из Rokquickcart передавались в нашу форму, созданную в Chronoforms. Для этого в списке созданных форм, перейдите по ссылке в поле Link напротив нашей формы. Скопируйте эту ссылку в буфер.

Переходим в Компоненты → Rokquickcart и в правом верхнем углу нажимаем кнопку «Settings» и выставляем настройки следующим образом:

Rokquickcart + Chronoforms. Настройка Rokquickcart

Шаг 6 – Результат

Теперь нам остается проверить результат произведенных нами действий на деле, для этого открываем наш сайт, добавляем несколько товаров в корзину и нажимаем кнопку «Купить»

Некоторые хитрости:

Как отправлять копию письма заказчику?

При формировании тела письма в Chronoforms на вкладке Email, в поле To указывается адрес администратора, на который будет приходить сообщение о заказе. Чтобы отправить такую же копию письма заказчику, Вам необходимо добавить поле ввода email заказчика в форму, после этого также переходим на вкладку Email и в самом низу заполняем поле Dynamic To именем поля email (например {field_email}), в зависимости от того, какое имя Вы присвоили полю). Если Вы хотите сделать отдельное сообщение для заказчика, например со словами благодарности, перейдите на вкладку Email 2, создайте письмо нужного содержания и также заполните поле Dynamic To, как описано выше.

Как убрать прокрутку страницы при добавлении товара в корзину?

Откройте файл /components/com_rokquickcart/views/rokquickcart/tmpl/default.php и найдите в нем следующий код:

<div class="cart_product_add">
	<a href="/<?php echo $this->current_url . '#rokquickcart';?>" class="item_add btn button btn-primary"><?php echo JText::_('ROKQUICKCART_ADD_TO_CART');?><span></span></a>
</div>

И замените на следующий:

<div class="cart_product_add">
	<a href="javascript: void(0);" class="item_add btn button btn-primary"><?php echo JText::_('ROKQUICKCART_ADD_TO_CART');?><span></span></a>
</div>

Как добавить рубли?

Одна из сложных затей. Способ в некоторых случаях может оказаться не работоспособным. Откройте файл /administrator/components/com_rokquickcart/config.xml и найдите там начало списка цен:

<field name="paypal_currency" type="list" default="USD" label="ROKQUICKCART_CURRENCY"
	description="ROKQUICKCART_CURRENCY_DESC">

И добавьте в список следующую опцию:

<option value="RUB">Russian Ruble</option>

Далее откройте файл /component/com_rokquickcart/assets/js/simplecart/simpleCart.js и найдите начало массива цен:

// Currencies
currencies = {

Добавьте наряду со всеми ценами наши русские рубли

// Currencies
currencies = {
	"RUB": { code: "RUB", symbol: "&#8381;", name: "Russian Ruble", after: true },

Параметр after: true указывает на то, что валюта будет выводиться после значения, а не до него.


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
9 Комментарии | Добавить свои
  • Гость - xtc

    Заработало. У меня другая версия Chronoforms и проблема была в отсуиствии {items} и {sum_result}. Добавил в ручную и все ок.
    Поясните пожалуйста про очистку корзины. Вы писали:

    Также Вам необходимо будет каким-нибудь удобным для Вас образом подключить скрипт simpleCart на странице вывода формы Chronoforms:
    <script src="/components/com_rokquickcart/assets/js/simplecart/simpleCart.js" type="text/javascript"></script>

    Куда вставить этот код?
    Спасибо.

    Нравится 0 Короткий URL:
  • Этот скрипт необходимо подключить так, чтобы он мог работать на странице формы отправки заказа (Chronoforms). Вы можете сделать это любым удобным для Вас способом, например в шаблоне самой страницы, в шаблоне всего сайта, или в шаге 4 этой статьи там, где мы добавляли код, добавить подключение перед тем, что мы добавили, хоть так делать и не рекомендуется. Также не забудьте задать класс для кнопки отправки simpleCart_empty, как я писал в комментариях ниже.

    Нравится 0 Короткий URL:
  • Гость - xtc

    Какраз то что нужно, но на почту не приходит список товаров :( Вместо этого только текст custom code. Помогите пожалуйста.

    Нравится 0 Короткий URL:
  • Добрый день. Уделите особое внимание шагу 4 из данной статьи, убедитесь, что Вы сделали все в точности также, как там написано. Также проверьте, что в настройках письма, когда Вы нажимаете "Generate Auto Template" у Вас корректно сформировались поля для отправки, должно получиться что-то типа:

    Имя {input_text_1}
    Адрес {input_text_2}
    Товары {items}
    Сумма {sum_result}

    Здесь {items} как раз и определяет список товаров по полю <input type="hidden" name="items[]" />

    В данный момент попробовал проделать всё от начала до конца, всё отлично работает и список отправляется.

    Нравится 0 Короткий URL:
  • Гость - Иван

    Добрый день, спасибо за очень информативную статью, очень помогла в работе. Но столкнулся с небольшой проблемой, после отправки формы и вывода сообщения с благодарностью, если посетитель вернется к списку товаров, то только что заказанный товар будет продолжать висеть в корзине. Буду очень благодарен, если сможете помочь.

    Нравится 0 Короткий URL:
  • Довольно интересный вопрос. Проблема состоит в том, что Rokquickcart и Chronoforms совершенно разные компоненты. Если использовать стандартные возможности покупки в Rokquickcart (PayPal, Amazon), то корзина возможно очищается, врать не буду. Но Chronoforms не знает, что необходимо очищать данные в другом компоненте. Если для Вас не принципиально каким образом будет решён вопрос, то могу предложить зайти в Chronoforms в редактор созданной Вами формы, открыть настройки кнопки отправки данных (Submit Button) и задайте ей класс (Class) simpleCart_empty
    Также Вам необходимо будет каким-нибудь удобным для Вас образом подключить скрипт simpleCart на странице вывода формы Chronoforms:
    <script src="/components/com_rokquickcart/assets/js/simplecart/simpleCart.js" type="text/javascript"></script>
    После того как посетитель сайта произведет наполнение корзины, перейдет на страницу оформления заказа и нажмет кнопку отправки, произойдет очистка корзины. Т.е. по сути данный вариант вызывает функцию очистки корзины, как кнопка "очистить корзину" в компоненте Rokquickcart.
    Решение в принципе не сложное, других вариантов пока не нашел из-за неимения свободного времени.

    Нравится 0 Короткий URL:
  • Гость - Serebro

    Да, это я понял...спасибо

    Нравится 0 Короткий URL:
  • Гость - Serebro

    Добрый, каким образмо формируется POST запрос при отправлении данных? Средствами jQuery? Т.е. каким образом формируются [item_quantity_1] => 2 [item_price_1] => 12.99 и т.д. [item_options_1]

    Нравится 0 Короткий URL:
  • Здравствуйте. Как Вы, наверное, заметили из статьи, я особо в скриптах не стал разбираться. Формирование данных происходит JS функцией, расположенной по адресу /components/com_rokquickcart/assets/js/simplecart/simpleCart.js
    Откройте файл и найдите следующую строку:

    simpleCart.extendCheckout({

    Сразу после неё будут прописаны функции для формирования данных в зависимости от выбранного Вами в настройках способа оформления заказа:
    PayPal: function (opts) {

    GoogleCheckout: function (opts) {

    AmazonPayments: function (opts) {

    SendForm: function (opts) { // Функция отправки данных через пользовательскую форму связи, которую мы используем в описанной выше статье.


    Также, могу посоветовать Вам ознакомиться с работой скрипта simpleCart.js на официальном сайте разработчика

    Комментарий последний раз редактировался в около 2 лет назад Администратор
    Нравится 0 Короткий URL: