Advertisement
  1. Code
  2. WooCommerce

Добавление настраиваемых полей для простых продуктов с WooCommerce

by
Read Time:9 minsLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

WooCommerce является, пожалуй, самым популярным способом продажи продуктов с помощью WordPress. С WordPress, обеспечивающим примерно 25% интернет-ресурсов и WooCommerce, обеспечивающим около 39% всех интернет-магазинов, можно уверенно заниматься продажами товаров клиентам.

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

Пример: С WooCommerce скажем, у вас есть простой продукт, который вы хотите продать, но вам надо добавить немного информации о продукте, который будет отображаться на front-end.

Используя пару хуков, предоставленных WooCommerce и пользовательские функции, которые мы напишем, рассмотрим, как это можно сделать.

Необходимые инструменты

Прежде чем начать, полагаю, что на вашем компьютере это уже установлено (или что-то подобное):

  • Ваша операционная система - я буду использовать macOS
  • Хотя бы PHP 5.6.25, я использую PHP 7
  • MySQL 5.6.33
  • Apache или Nginx
  • WordPress 4.7
  • WooCommerce 3.9
  • Ваш любимый IDE

Для продолжения урока предполагаю, что всё это установлено, активировано и работает.

Setting up WooCommerceSetting up WooCommerceSetting up WooCommerce

Если вы загрузили WooCommerce специально для этого занятия, не стоит беспокоиться о таких вещах, как страницы оформления заказа, условия или что-то в этом роде. Фактически, мы сосредоточимся только на метаданных Simple Product до конца урока.

Добавление настраиваемых полей

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

WordPress позволяет авторам сообщений назначать сообщению настраиваемые поля. Эта произвольная дополнительная информация известна как meta-data.

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

А именно, текстовое поле типа Simple Product, которое мы представим на вкладке Linked Product.

The initial Simple Product typeThe initial Simple Product typeThe initial Simple Product type

К этому мы ещё подойдём. А сейчас давайте начинать.

1. Хуки (The Hooks)

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

Вот два хука, о которых необходимо знать:

  1. woocommerce_product_options_grouping. Мы будем использовать эту функцию для создания описания и ввода текста, которые будут связаны с нашими значениями.
  2. woocommerce_process_product_meta. Этот хук нужен для обработки, очистки и сохранения значения введённого текста.

Как и для всех hooks в WordPress, потребуется определение и этим хукам, а затем мы определим для них пользовательскую функциональность. Можно сделать это с помощью procedural programming, но в этом уроке будем пользоваться объектно-ориентированным программированием.

2. Функциональность

Во-первых, мы определим класс, который будет иметь переменную в соответствии с данными. Эта переменная будет представлять ID поля ввода, который появится в пользовательском интерфейсе:

Затем мы назначим эту переменную экземпляра в конструкции класса:

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

В следующих двух разделах мы увидим, как именно реализовать пользовательскую функциональность.

1. Добавление поля ввода текста

Во-первых, надо добавить функцию, которую подцепит woocommerce_product_options_grouping. Это мы сделаем в функции init, которую определили в предыдущем разделе.

Заметьте, я назвал функцию product_options_grouping. Я нашёл, что так код будет легче читаться. Хотя из описания функции не очень понятно, что она делает, это относится к её соответствующему hook.

Затем нужно запустить функцию. Для этого нам понадобится следующая информация:

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

Вся вышеуказанная информация будет установлена в ассоциативном массиве и затем будет передана в woocommerce_wp_text_input. Эта функция WooCommerce API прописана для ввода элементов текста с указанными выше атрибутами.

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

2. Сохранение информации

Добавьте такие строки в init метод:

После этого добавляем функцию  add_custom_linked_field_save .

Немного расскажу о реализации функции в следующем разделе.

Очистка данных

Вы заметили, что в указанной функции происходят три вещи:

  1. Мы проверяем наличие нескольких значений nonce. Если их нет, возвращаемся false . Это обычная предосторожность. Значение nonce проверяется тем, что WooCommerce определяет в исходном коде.
  2. Очистка данных в $_POST коллекции начинается по вводу пользователя.
  3. Сохранение информации в таблице метаданных.
Our teaser field on the Linked ProductsOur teaser field on the Linked ProductsOur teaser field on the Linked Products

Обратите внимание, что мы фактически ничего не делаем для отображения информации в интерфейсе, пока нет вызова get_post_meta. Это, то, как информация будет показана.

3. Отображение описания (Teaser) в интерфейсе

Для отображения информации в интерфейсе нам понадобится класс, который сделает большую часть только что проделанной нами работы. Конкретно, нам нужно:

  • ID поля текста
  • инициализация указанного ID в конструкторе
  • функция инициализации для подключения нашего настроенного кода к интерфейсу
  • отображение фактического значения

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

Конечный результат должен выглядеть так:

Displaying the result of the teaserDisplaying the result of the teaserDisplaying the result of the teaser

Пока что наш код несколько избыточен. Два класса, public и administrative, используют textfield_ID и задают его в своих конструкциях. Этот кодовый запах оскверняет весь DRY принцип объектно-ориентированного программирования.

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

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

Обратите внимание, что я применил   woocommerce_product_thumbnails в помощь по отображению информации. Я взял один хук из большого количества доступных для WooCommerce . Вы можете свободно пройтись по documentation для уточнения того, что лучше всего подходит вашим запросам.

4. Объединяем всё вместе

В окончание нашей работы установим файл bootstrap для запуска плагина. Мы часто это делали на моих предыдущих уроках, поэтому я не стану тратить много времени на пояснения.

Вот код, ради которого я всё затеял:

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

Заключение

Теперь мы поговорили обо всём, что было заявлено в начале урока:

  • Мы добавили настраиваемые поля.
  • Мы их очистили и сохранили.
  • Мы установили публичную наглядность плагина.
  • Мы восстановили и отобразили контент.

Не забывайте загрузить пример финальной работы из боковой панели страницы. Это большая синяя кнопка. К тому же, если вы интересуетесь WooCommerce, не забывайте проверять наши курсы или заметки на in our marketplace .

Как всегда, за материалами в связи с WordPress обращайтесь к моим урокам на on my profile page, заходите на мой блог или на Twitter.

Оставляйте любые комментарии и задавайте вопросы в поле ниже!

Ресурсы

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.