Заказ в один клик для любого интернет-магазина на Joomla

Заказ в один клик стал сегодня стандартом для интернет-магазинов. Да, у вас может быть полноценная корзина, но всегда находятся клиенты, которым лень с ней разбираться. Им проще вызвать форму с 2-3 полями, заполнить их, и оставить заявку.

В этом кейсе я расскажу, как вы можете легко создать кнопки быстрого заказа для страниц товаров вашего интернет-магазина, построенного на Joomla, с помощью расширения формы обратной связи Wedal Joomla Callback.

При этом не имеет значения на каком компоненте работает интернет-магазин, это может быть Virtuemart, Joomshopping, HikaShop или любой другой – везде будет применим этот кейс. Главное, чтобы у вас была Joomla.

Немного теории

Что есть форма быстрого заказа? По своей сути это обычная форма обратной связи, с одним небольшим отличием – в ней передаются данные, позволяющие идентифицировать заказанный товар. Можем ли мы сделать это с помощью Wedal Joomla Callback? Можем!

В целом процесс можно разбить на несколько этапов:

1. Вставляем модуль на все (или некоторые нужные) страницы товаров
2. Добавляем в модуль одно или несколько скрытых полей
3. При вызове формы заполняем скрытые поля данными, используя JS-триггеры модуля.

Теперь давайте подробнее.

Немного практики

Как вы увидите ниже, все описанные действия очень просты и делаются буквально за 5-10 минут.

Вставляем модуль на все (или некоторые нужные) страницы товаров

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

Здесь и далее все действия показываю на примере Virtuemart. Если вы используете другой компонент интернет-магазина, то отличие будет только в названии макета и полей – весь процесс точно такой же.

1. Для переопределения макета карточки товара в ваш шаблон копируем файл макета:

/components/com_virtuemart/views/productdetails/tmpl/default.php

в папку:

/templates/ваш_шаблон/html/com_virtuemart/productdetails/

Если такой файл уже существует в папке назначения, то просто пропускаем этот шаг. Заменять его не нужно! Сие означает, что макет карточки товара уже переопределен в ваш шаблон.

Если в пути не хватает каких-то каталогов, то создайте их.

В макете каточки товара, в месте, где мы хотим показывать кнопку заказа в один клик, добавляем следующую строчку кода:

<?php echo JHtml::_('content.prepare', '{loadposition! oneclick}'); //В строке убрать восклицательный знак! ?>

Эта строчка создает позицию для модуля. А поскольку макет используется во всех товарах, то модуль, опубликованный в данной позиции, будет виден в каждой карточке.

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

2. Создаем экземпляр модуля Wedal Joomla Callback в менеджере модулей в админке, и выводим его в позиции oneclick.

Настройки можете задать по своему вкусу. Важно лишь:

• Позиция – oneclick (или та, что указана в строчке кода выше)
• Привязка – ко всем страницам сайта
• Тип формы – всплывающая (если, конечно, не хотите встроить форму, хотя это тоже будет работать)

Если все сделано правильно, в карточках товара вы увидите кнопку, вызывающую всплывающую форму:

Собственно, на этом этапе кто-то может уже и остановиться, т.к. модуль автоматически добавляет в письмо URL страницы, с которой отправлена форма. Перейдя по этому URL, менеджер поймет, какой товар интересует покупателя.

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

Передаем дополнительные данные о товаре в форму

Для этого нам понадобиться:

1. Создать в форме дополнительные поля для названия и артикула товара
2. При загрузке формы заполнить их нужными данными с помощью JavaScript

Создать дополнительные поля можно в настройках Wedal Joomla Callback на вкладке Дополнительные поля. Перейдя по ссылке на документацию по полям, можно выбрать подходящее поле и получить для него пример XML-кода.

В нашем случае это будет 2 обычных текстовых поля. Можно сделать их скрытыми, но, как мне кажется, пользователю лучше показать в форме, заявку на что он отправляет. Таким образом, сделаем их видимыми, но в формате readonly. Добавим такой код доп.полей:

<field name="product_name" type="text" default="" label="Название товара" filter="string" readonly="true" />
<field name="product_art" type="text" default="" label="Артикул товара" filter="string" readonly="true" />

Теперь наша форма выглядит так:

Конечно, над визуальной составляющей нужно еще поработать в CSS, но оставим это за рамками кейса, т.к. вкусовщина.

Остается заполнить созданные дополнительные поля данными о текущем товаре и его стоимости. Как это сделать? Нужно получить эти данные со страницы, используя JS, и вставить их в поля формы.

Получать данные можно по-разному, но мне нравиться способ, когда они предварительно сохраняются в data-атрибутах контейнера-обертки кнопки вызова. Это упрощает JS-код. Давайте применим такой трюк.

Обернем нашу строчку вставки позиции модуля в следующий контейнер:

<div class="oneclick-data" data-name="<?php echo $this->product->product_name ?>" data-art="<?php echo $this->product->product_sku ?>">
    <?php echo JHTML::_('content.prepare', '{loadposition! oneclick}'); //В строке убрать восклицательный знак! ?>
</div> 

Если все сделано правильно, на сайте, в отладчике, мы увидим такой код:

<div class="oneclick-data" data-name="Cap &quot;Baseball&quot;" data-art="PRCB">
   <div class="moduletable ">
      <a data-id="134" class="wjcallback-link btn btn-success" href="#">Заказ в один клик</a>
   </div>
</div>

И последний шаг: переносим данные из data-атрибутов в поля формы с помощью JS. Для этого в JS-файле шаблона или любом другом месте, подключающем исполнение JS-кода на страницы товаров, добавляем следующий код:

document.addEventListener('DOMContentLoaded', () => {
    //Получить все поля формы после загрузки
    document.addEventListener('wjcOnFormPopupAfterLoad', (form) => {

        //Ищем блок-обертку кнопки вызова формы, содержащий data-атрибуты. Находим ID модуля в форме, а затем, по нему, ссылку вызова формы на странице.
        let mod_id = form.detail.firstChild.dataset.id;
        let one_click_node = document.querySelectorAll('.wjcallback-link[data-id="'+ mod_id +'"]')[0].closest('.oneclick-data');

        if (!one_click_node) {
            return false;
        }

        //Подставляем data-атрибуты в поля формы
        form.detail.querySelectorAll('form')[0].elements["product_name"].value = one_click_node.getAttribute("data-name");
        form.detail.querySelectorAll('form')[0].elements["product_art"].value = one_click_node.getAttribute("data-art");
    });
});

Если все сделано правильно, всплывающая форма примет следующий вид:

Теперь посмотрим содержимое отправляемого письма:

Важный момент! Пользовательским данным доверять нельзя! Более-менее продвинутый пользователь сможет легко подменить передаваемые в полях данные, т.к. передаются они из его браузера. Такие данные, если они носят значимый характер (как, например, стоимость товара), нужно перепроверять в карточке на сайте. Если данные получены для последующего сохранения и систематизации (например, передачи в CRM), то следует передавать в форме только ID товара (или другой уникальный идентификатор, например артикул), а остальную информацию о товаре получать из базы на этапе обработки для передачи в CRM.

Таким образом, используя Wedal Joomla Callback, мы внедрили кнопку заказа в 1 клик в наш интернет-магазин.

А что, если кнопка нужна мини-карточках (категории/модуле/поиске)?

Отдельно следует упомянуть вариант, когда кнопка заказа в один клик размещается в мини-карточках. Это карточки товаров, которых на странице может быть несколько, например, страница категории товаров.

Вообще, использование заказа в один клик на таких карточках чаще всего не имеет смысла. С мини-карточек заказывают обычно недорогие товары, покупаемые массово (например, продукты или какой-то мелкий крепеж в комплект). Т.е. этот тот случай, где покупают сразу много товара и через корзину. Никто не будет заказывать условный пакет молока в один клик. С другой стороны, покупать единичный дорогой товар с мини-карточки тоже вряд ли будут – обязательно зайдут в подробную карточку и ознакомятся с условиями.

Тем не менее, если вы все-таки хотите добавить заказ в один клик и в мини-карточки, то алгоритм действий будет ровно тот же, что и описан выше, только вставлять модуль нужно не в макет карточки товара, а в макет мини-карточки. И все это будет работать! С единственным экземпляром модуля!

Как быть с сохранением данных?

В текущей версии 2.1.0 Wedal Joomla Callback умеет отправлять данные формы на почту, в SMS, в Telegram. На сервере данные не сохраняются.

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

• Можно сохранять данные в какую-либо таблицу базы данных. Для этого в макет письма можно добавить код сохранения в базу.
• Можно сохранять данные в текстовый файл на сервере, по аналогии с логами. Решается так же, как и с базой.
• Можно передавать данные в CRM. Для этого я бы предложил написать AJAX-плагин для Joomla, в который будет передаваться ID товара и данные пользователя через JS-триггер Далее плагин сделает все проверки и отправит данные в CRM.

Эти способы могут казаться сложными, но на самом деле довольно тривиальны. Они быстро решают задачу сохранения и обработки данных. Из всех вариантов я бы советовал именно CRM, как наиболее эффективный способ сбора и обработки всех входящих заявок.