Quick order for JoomShopping

Joomla module for a quick order form in the JoomShopping online store. Module layout is built on free UiKit 3 framework, if it is not on your site, then you need to download and install it from the developer's site.

The form appears in a pop-up window and contains two fields, phone number and name. The subject line contains the page from which the order was sent, the name and phone number entered by the user.

Installation

The module is installed in the usual way through the Joomla installer. You can publish the module in any position of the site, it doesn't really matter. The modal window will be placed by the framework at the very bottom of the page, and the "Quick order" button is inserted by the module under the "Add to cart" button automatically when the page is loaded. If your JoomShopping template contains module positions only for the product card, then it is better to publish the module in one of them (our templates have such. Only that this position is not in the order form, because the form in the form will not work.).

Form submission is carried out using the free RadicalForm plugin, if it is not on your site, then you need to download and install it from the developer's site.

The RadicalForm plugin has rich functionality and the ability to flexibly customize the contact form. We decided to present you with a quick order form. Use the gift. You can just thank you. Or you can use the QR code at the bottom of the page as a thank you.

Instructions for configuring the RadicalForm plugin

In the plugin settings you need to specify

• 1. Color of text and fields in case of incorrect data entry;
• 2. Plugin action after sending a message:
  • a) close the modal;
  • b) display a message about successful sending.
• 3. E-mail to which the order message will be sent;
• 4. Customize email subject;

1. Setting the color of text and fields in case of incorrect data entry

On a fill error, the plugin assigns a specific css class to the form or message. Here you just need to enter the class that can highlight the error. UiKit 3 has many different classes for highlighting text and forms, we suggest using the .uk-form-danger class for the "CSS class for invalid fields" field, for the "CSS class of file errors" field .uk-text-danger. If your UiKit styles are correctly configured, then these classes will draw the user's attention to themselves as much as possible (usually it is red).

2. Configuring form closing and popup message.

You can figure it out for a long time with the help of the documentation for the form and the framework, so we will give you a ready-made, working solution.

a) In the "Javascript code # 1" field, enter the code responsible for closing the form after submitting:

UIkit.modal(quick_order_radical).hide();

b) In the "Javascript code # 2" field, enter the code responsible for the second action after the form is closed — displaying a message about successful submission:

UIkit.notification({message: String(here.dataset.rfText), status: 'success'});

The message about sending is read from the data-rf-text attribute in the "Order" button, and the text gets into this attribute from the lang (language file). So the correct message is displayed for each language. If it does not suit you, you can change it (like all other labels). The language file is located in the Joomla lanes folder. ... /language/en-GB/en-GB.mod_quick_order_radical.ini.

3. Setting up mail for receiving messages

There should be no questions with the email address, you just remember to do it. Enter your email in the field "Where to send letters" and nothing else can be done. Messages will immediately come to your email address. The plugin allows you to send messages to several addresses at once, and, depending on the conditions, determine who to send, etc., but we will not go into these details. There is nothing for the settings of this module. And if you need / are interested to study this functionality or you yourself want to improve the module, you can get detailed information about this in the documentation on the plugin developer's site.

4. Customize the message subject.

In order to understand what product the order came for, the title of the page (which usually contains the name of the product) is added to the subject line. For convenience, the user's contact information is also added there, so that, to save time, you don't have to go into the letter itself in the mail, everything you need is already visible in the message list.

Let's see how this happens. The module reads the page title and fills in the corresponding field (rsSubject) for the plugin that sends a message with the subject line specified by the module.

In the plugin settings, the subject line can be collected from the required form fields, in our case it is subject + name + phone number. To complete the plugin configuration, we enter them in the "Email subject" field:

{rsSubject} from {name} {phone}

The rest of the fields in the plugin settings can be left unchanged.

P.S. If you figured out how to change the "ждите..." message on the submit button so that you can make it multilingual, write in the comments below, we will release an update.