Плагин Art WooCommerce Order One Click включает режим каталога и заказать в один клик

В данной статье приводится подробное описание моего плагина для включения режима каталога и не только. Плагин называется Art WooCommerce Order One Click не совсем корректное название, но уже так назвал. Давайте подробно расскажу про настройки и как работает сие мое творение.

Внимание! Плагин добавлен в репозиторий WordPress. Обновить плагин можно стандартным способом через панель управления.

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

Плагин работает только в связке с плагинами WooCommerce и Contact Form 7. В плагине предусмотрены проверки на наличие этих плагинов, если их нет, то и плагин Art WooCommerce Order One Click (AWOOC) не запуститься.

Внимание!
Для корректной работы плагина требуется версия PHP 5.6

При удалении плагина, все значения настроек будут удалены. Как и положено по правилам хорошего тона.

В плагине предусмотрено три режима работы:

Режим каталога

В данном режиме на страницах рубрик и самого магазина отключены кнопки «Добавить в корзину». На странице товара кнопка «Добавить в корзину» скрыта через стили и появляется кнопка «Заказать»

Внешний вид страницы архива товаров в режиме каталога
Внешний вид страницы архива товаров в режиме каталога
Внешний вид страницы товара в режиме каталога
Внешний вид страницы товара в режиме каталога

Режим кнопки Купить

В данном режиме кнопка «Добавить в корзину» работает в штатном режиме, то есть товары можно добавить в корзину. Ну и на архивах тоже все штатно.

Внешний вид страницы товаров в режиме включенной кнопки Купить
Внешний вид страницы товаров в режиме включенной кнопки Купить

Не совсем понял, зачем нужен такой режим, но подписчики попросили — сделал. Может быть в каких-то случаях он и нужен.

Режим работы с запасами

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

Тут надо уточнить, в WooCommerce есть три статуса:

Последний статус неверно переведен, более правильно будет —  предзаказ.
  • В наличии (in stock)
  • Нет в наличии (out of stock)
  • В невыполненом заказе (on backorder)

Причем, эти статусы по разному работают, в зависимости включено управление запасами на уровне товара или нет.

Управление запасами на уровне товаров
Управление запасами на уровне товаров

Если включено управление на уровне товара, то в общей таблице будут показываться и количество товаров, если нет, то просто статусы.

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

  • не указана цена товара
  • статус запасов В невыполненом заказе
  • статус запасов Нет в наличии, включено управление запасами на уровне товара и разрешены предзаказы

В остальных случаях кнопка Заказать не появиться в этом режиме

Специальный режим

С версии 2.2.0 введен новый режим работы плагина. Называется «Специальный режим». Для с простых и вариативных товаров.

Работает так же, как режим кнопки Купить (штатный режим). Но если в товаре нет цены или товара нет в наличии, то кнопка Купить скрывается, а кнопка Заказать остается.

Дополнительная опция в настройках «Специальная надпись» — это специальное поле для изменения надписи на кнопке при работе в Специальном режиме. Если поле оставить пустым то будет выводится значение из настройки Надпись на кнопке.

Создание заказов

В плагине реализован функционал создания заказов при отправке письма. Но для корректной работы требуется правильна настройка форм в плагине Contact Form 7.

Как использовать?

После установки и активации плагина, требуется проделать следующие шаги.

Шаг первый. Создание и настройка форм в Contact Form 7

Создание формы стандартное, а вот настройка нет. После установки плагина AWOOC в настройках форм появиться дополнительная кнопка

Специальная кнопка скрытого поля, для отправки данных
Специальная кнопка скрытого поля, для отправки данных

С помощью этой кнопки вставляем скрытое поле.

Важно!
Eсли это поле не добавить, то в письме не будут приходить данные о товаре.

Далее стандартным образом добавляем нужные поля, например мы хотим от пользователя получать: имя, email и телефон.

Добавление полей в Contact Form 7
Добавление полей в Contact Form 7

Для правильной работы создания заказов, очень важно чтобы имена полей были только такими

  • поле текст «Ваше имя» — awooc-text
  • поле email  «Ваш email» — awooc-email
  • поле телефон «Ваш телефон» — awooc-tel
Важно!
Eсли имена полей будут другими, то заказ будут создаваться с пустыми данными

Вот и все, теперь добавляем наши поля в форму письма

Добавление полей в тело письма в плагине Contact Form 7
Добавление полей в тело письма в плагине Contact Form 7

На этом настройку формы можно закончить

Шаг второй. Настройка функционала кнопки

Настройки плагина находятся по адресу WooCommerce → Настройки → вкладка Основные. Выбираем нужный режим работы и если нужно меняем надпись на кнопке.

Обновление. Начиная с версии 1.8.0 настройки находятся в отдельной вкладке по адресу WooCommerce → Настройки → вкладка «Заказ в один клик»

Настройки плагина AWOOC
Настройки плагина AWOOC

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

  1. Выбор режима работы. Подробно про режимы смотри выше. По умолчанию работает режим каталога и кнопка «Купить» скрыта
  2. Выбор формы. Выбирается нужная форма. По умолчанию добавляется самая новая форма
  3. Надпись на кнопке. Можно поменять надпись на собственную. По умолчанию написано «Заказать»
  4. Выключить элементы окна. Можно выключить не нужные элементы всплывающего окна. Например, не нужно показывать артикул, просто убираете элемент «Артикул» из списка и всё. По умолчанию все элементы включены.
  5. Включить создание заказов. Данная опция включает создание заказов в WooCommerce. По умолчанию настройка выключена

Часто задаваемые вопросы

Как изменить внешний вид кнопки?

На некоторых темах кнопка Заказать можно слипаться с кнопкой Купить. Или требуется изменить цвет или форму. Для этого используют CSS.

.woocommerce a.awooc-custom-order.button.alt{
    background: #000;
    margin-left:10px;
}

Добавлять код CSS рекомендую через Кастомайзер (Внешний вид → Настроить → Дополнительные стили) или в файл style.css дочерней темы (дочернюю тему удобно создавать через плагин Generate Child Theme)

Как вывести кнопку на каталоге?

Плагин Art WooCommerce Order One Click включает режим каталога и заказать в один клик • 23 • WPRUSe

Генерация html кнопки реализована через функцию awooc_html_custom_add_to_cart();

Чтобы вывести кнопку на странице магазина или категории, достаточно использовать хук

После кнопки Купить

add_filter( 'woocommerce_after_shop_loop_item', 'awooc_html_custom_add_to_cart', 15 );

Перед кнопкой Купить

add_filter( 'woocommerce_after_shop_loop_item', 'awooc_html_custom_add_to_cart', 5 );

Как добавить текст во всплывающем окне?

В окне есть 4 хука, на которые можно подцеплять что угодно. Сделано по аналогии с самим WooCommerce:

  • awooc_popup_before_column — после заголовка
  • awooc_popup_after_column — после всего содержимого
  • awooc_popup_column_left — левая колонка
  • awooc_popup_column_right — правая колонка

Выведем произвольный текст после содержимого

add_action( 'awooc_popup_after_column', 'awooc_text_filed' );
function awooc_text_filed() {
	?>
	Здесь будет какой-то нужный текст для вывода после содержимого в окне
	<?php
}

Выведем произвольный текст после заголовка и после всего содержимого

add_action( 'awooc_popup_before_column', 'awooc_text_filed', 15 );
add_action( 'awooc_popup_after_column', 'awooc_text_filed' );
function awooc_text_filed() {

	?>
	Здесь будет какой-то нужный текст для вывода после содержимого в окне
	<?php

}

Как добавить поля адреса в заказ?

Когда требуется добавить в заказ значения дополнительных полей

Плагин Art WooCommerce Order One Click включает режим каталога и заказать в один клик • 25 • WPRUSe

Можно воспользоваться фильтром awooc_order_address_arg для добавления дополнительных значений.

Пример использования. Есть форма с дополнительными полями: Индекс, Город, Адрес

Плагин Art WooCommerce Order One Click включает режим каталога и заказать в один клик • 27 • WPRUSe

Добавляем значения эти полей через фильтр

add_filter( 'awooc_order_address_arg', 'awooc_added_addres_field', 10, 1 );
function awooc_added_addres_field( $addres ) {

	$addres['postcode'] = $_POST['text-737'] ? sanitize_text_field( $_POST['text-737'] ) : '';
	$addres['city'] = $_POST['text-736'] ? sanitize_text_field( $_POST['text-736'] ) : '';
	$addres['address_1'] = $_POST['text-738'] ? sanitize_text_field( $_POST['text-738'] ) : '';

	return $addres;
}

Внимание! Полей стандартных полей адреса всего одиннадцать:

  • first_name
  • last_name
  • company
  • address_1
  • address_2
  • city
  • state
  • postcode
  • country
  • email
  • phone

Не забывайте правильно использовать названия полей для заказа и названия полей в форме!

Не работает Recapcha

Пока этот функционал не реализован. Но так как в последних версиях плагина сама по себе форма грузится через ajax, то физически ее на странице не существует и значит ботам со спамом просто некуда стучаться. Таким образом, теоретически рекапча не имеет смысла.

Но попробую все же реализовать рекапчу в форме в будущем:) 

Поддержать плагин

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

Скачать плагин

Внимание! Плагин добавлен в репозиторий WordPress. Обновить плагин можно стандартным способом через панель управления.

Скачать плагин Art WooCommerce Order One Click можно по прямой ссылке c GitHub

Плагин Art WooCommerce Order One Click включает режим каталога и заказать в один клик • 29 • WPRUSe

Изменения

== Changelog ==
= 1.8.9 =
* Исправлено - ошибка определения типа продукта
* Изменено - обновление readme

= 1.8.8 =
* Исправлено - обход блокировки скрипта при работе плагина Popup Maker
* Изменено - обновление readme для добавления в репозиторий WP

= 1.8.7 =
* Исправлено - скрипт вызова окна

= 1.8.6 =
* Исправлено - ошибка отправки формы, если на странице есть еще формы
* Изменено - внешний вид вывода атрибутов
* Добавлено - ограничение загрузки скриптов и стилей плагина только на страницах WooCommerce
* Добавлено - работа сплывающего окна в режиме Быстрого просмотра

= 1.8.5 =
* Исправлено - ошибка REST API при подключении плагина
* Исправлено - скрытие всего блока Количества
* Изменено - сброс настроек при деактивации плагина на сброс при деинсталяции плагина
* Добавлено - проверка на выбор атрибутов в вариативных товарах, аналокично штатной кнопке, если атрибуты не выбраны то кнопка не работает

= 1.8.4 =
* Исправлено - вывод в заголовке хмтл-сущьностей
* Добавлено - поддержка плагина Contact Form 7 – Phone mask field
* Добавлено - комментарии в js файле

= 1.8.3 =
* Добавлено - скрытие +/- для поля количество в режиме каталога и предзаказа

= 1.8.2 =
* Исправено - заказы созаются со статусом "Ожидание заказа"
* Исправлено - вывод картинки для вариаций, если картинки нет, то выводится родительская
* Удалено - настройка отключения отправки писем клиенту при создании заказа

= 1.8.1 =
* Исправлено получение данных с хтмл тегами. Теперь приходят только чистые данные
* Исправлен вывод формы во всплывающем окне, если отключен вывод данных
* Изменено включение всплывающего окна. Теперь окно загружается сразу с данными
* Добавлена загрузка формы во всплывающем окне через ajax

= 1.8.0 =
* Переписан код
* Исправлена ошибка видимости окна в подвале
* Исправлено отправка писем при создании заказа
* Добавлена поддержка WPCS
* Добавлено отключение отправки писем пользователю при создании заказа
* Добавлено передача количества в заказ
* Добавлен хук `awooc_before_button` для добавления чего-нибудь перед кнопкой
* Добавлен хук `awooc_after_button` для добавления чего-нибудь после кнопки
* Добавлен хук `awooc_attributes_button` для добавления аттрибутов внутри кнопки
* Добавлен хук `awooc_after_mail_send` для ловли отправки письма и создания заказа
* Удален хук `awooc_popup_before_image`
* Удален хук `awooc_popup_after_image`

= 1.7.0 =
* Добавлен фильтр `awooc_popup_attr_label` для возможности изменения надписи перед атрибутами в окне
* Добавлена вывод и отправка выбранного количества товаров
* Удалены хуки `awooc_popup_title_html_tag_open`, `awooc_popup_title_html_tag_close`
* Удалены хуки `awooc_popup_image_width`, `awooc_popup_image_heigh`
* Удалены хуки `awooc_popup_before_price`, `awooc_popup_after_price`
* Удалены хуки `awooc_popup_before_sku`, `awooc_popup_after_sku`
* Удалены хуки `awooc_popup_before_attr`, `awooc_popup_after_attr`
* Исправлены ошибки

= 1.6.9 =
* Переименнованы файлы
* Добавлена function_exists для возможности изменения функций
* Переписан функционал вывода всплывающего окна
* переписано получение данных в модальном окне
* Добавлено отправка ссылки на выбранный товар в письме
* Добавлен фильтр `awooc_html_add_to_cart` для возможности изменения хтмл кнопки
* Добавлен фильтр `awooc_classes_button` для возможности добавления классов к кнопке
* Добавлен фильтр `awooc_popup_title_html` для возможности изменения стилей заголовка модального окна
* Добавлен фильтр `awooc_popup_title_html_tag_open` для изменения открывающего тега заголовка модального окна
* Добавлен фильтр `awooc_popup_title_html_tag_close` для изменения закрывающего тега заголовка модального окна
* Добавлен фильтр `awooc_popup_title_html_classes` для добавления классов к заголовку модального окна
* Добавлен фильтр `awooc_popup_image_html``` для возможности изменения хтмл изображения в окне
* Добавлен фильтр `awooc_popup_image_alt` для добавления alt к изображению в окне
* Добавлен фильтр `awooc_popup_image_classes` для добавления классов к изображению в окне
* Добавлен фильтр `awooc_popup_image_width` для изменения ширины изображения в окне
* Добавлен фильтр `awooc_popup_image_heigh` для изменения высоты изображения в окне
* Добавлен хук `awooc_popup_before_image` для добавления чего-нибудь перед изображением в окне
* Добавлен хук `awooc_popup_after_image` для добавления чего-нибудь после изображением в окне
* Добавлен фильтр `awooc_popup_price_html` для возможности изменения хтмл цены в окне
* Добавлен фильтр `awooc_popup_price_label` для возможности изменения надписи перед ценой в окне
* Добавлен хук `awooc_popup_before_price``` для добавления чего-нибудь перед ценой в окне
* Добавлен хук `awooc_popup_after_price` для добавления чего-нибудь после ценой в окне
* Добавлен фильтр `awooc_popup_sku_html` для возможности изменения хтмл артикула в окне
* Добавлен фильтр `awooc_popup_sku_label` для возможности изменения надписи перед артикулом в окне
* Добавлен хук `awooc_popup_before_sku` для добавления чего-нибудь перед арикулом в окне
* Добавлен хук `awooc_popup_after_sku` для добавления чего-нибудь после артикула в окне
* Добавлен хук `awooc_popup_before_attr` для добавления чего-нибудь перед атрибутами в окне
* Добавлен хук `awooc_popup_after_attr` для добавления чего-нибудь после атрибутов в окне
* Добавлен хук `awooc_popup_before_form` для добавления чего-нибудь перед формой в окне
* Добавлен хук `awooc_popup_after_form` для добавления чего-нибудь после формой в окне
* Добавлен хук `awooc_popup_before_column`
* Добавлен хук `awooc_popup_column_left`
* Добавлен хук `awooc_popup_column_right`
* Добавлен хук `awooc_popup_after_column`
* Добавлены стили тени и овефлоу к сплывающему окну
* Изменено поведение окна при ошибке ввода полей формы
* Пи закрытии окна удаляется хеш из урла


= 1.6.8 =
* Добавлен фильтр `awooc_enable_add_to_card_style` для возможности изменения стилей
* Добавлен фильтр ```awooc_disable_add_to_card_style``` для возможности изменения стилей
* Исправлены скрытия кнопки Купить в первом режиме
* Обновлен код

= 1.6.7 =
* Добавлен фильтр ```awooc_classes_button``` для добавления классов к кнопке
* Добавлен фильтр ```awooc_thumbnail_name``` для названия миниатюры во всплывающем окне
* Переименованы файлы, для исключения конфликтов
* Исправлены стили

= 1.6.6 =
* Добавлена проверка на версию php
* Добавлена ссылка на настройки в списке плагинов
* Добавлена ссылка на статью в описании плагина
* Изменен второй режим работы, теперь кнопка Купить работает в штатном режиме
* Исправлены ошибки стилей

= 1.6.5 =
* Добавлено определение распродажной цены
* Исправлены ошибки стилей

= 1.6.4 =
* Добавлена отправка цены товара в скрытом поле
* Добавлены описания строк в скрытом поле для отправки в письме
* Изменено скрытие цены
* Исправлены ошибки

= 1.6.3 =
* Исправлены ошибки

= 1.6.2 =
* Добавлено появление кнопки Заказать, если нет цены у товара, в режиме управления запасами
* Исправлена логика появления кнопки Заказать при управлении запасами
* Исправлены ошибки

= 1.6.1 =
* Исправлена ошибка использования отмененной функции

= 1.6.0 =
* Добавлена адаптивность окна
* Добавлена кнопка закрытия окна
* Добавлено отключение кнопки Купить в Похожих и Апселлах
* Добавлен функционал создания заказов
* Добавлена настройка включения/выключения созданием заказов
* Добавлены комментарии к коду
* Изменены настройки режимов работы, теперь три режима
* Изменены настройки по умолчанию при выводе элементов окна
* Исправлено скрытие кнопки Купить
* Исправлены ошибки

= 1.5.3 =
* Исправлены ошибки

= 1.5.2 =
* Исправлены ошибки
* Добавлено удаление опций при деинсталяции

= 1.5.1 =
* Исправлены ошибки

= 1.5.0 =
* Добавлена настройка управления режимом каталога
* Добавлена настройка управления отображением элементов в попап окне
* Добавлена настрока управления надписью на кнопке
* Добавлена отправка артикула
* Исправлены ошибки

= 1.4.0 =
* Добавлена кнопка при редактировании формы Contact Form 7
* Добавлены настройки для управления формами
* Обновлены проверки на наличие плагинов
* Исправление ошибок

= 1.3.0 =
* Обновление настроек
* Исправление ошибок

= 1.2.0 =
* Обновление настроек

= 1.1.0 =
* Обновление функций
* Добавление проверок
* Добавление настроек

= 1.0.0 =
* Релиз

Выводы

Вот такой плагин получился. Пробуйте, тестируйте, пользуйтесь.

Напишите в комментариях, как вам плагин. А может еще что надо прикрутить. Пишите, в общем…

Кстати, организовал группу по плагину в Телеге https://t.me/awooc. Там можно писать пожелания и предложения, ну и оперативно отслеживать изменения, а то статью не всегда удается быстро изменить

Всем удачи! И делитесь статьей и плагином с друзьями

P.S. Кстати, на сайте появились курсы, те что на YouTube.

Артем Абрамович

Меня зовут Артем Абрамович и я являюсь фрилансером-вордпресером. Занимаюсь настройкой и редактированием сайтов созданных на CMS WordPress. Это основная моя специализация, есть еще несколько работ, которыми я занимаюсь, но обо этом вы можете более подробно узнать из моего портфолио.

Добавить комментарий

%d такие блоггеры, как: