Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WooCommerce

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

by
Difficulty:BeginnerLength:MediumLanguages:

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 WooCommerce

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

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

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

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

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

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

The 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 Products

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

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

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

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

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

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

Displaying 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
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.