Добавление пользовательских произвольных полей в WooCommerce

Woocommerce-УрокиКомментариев нет

WooCommerce самый популярный плагин для создания интернет магазина на вордпресс. Для информации WordPress составляет примерно 25% всех сайтов в Интернете, а WooCommerce составляет примерно 39% всех интернет магазинов.

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

Давайте представим задачу, у нас есть сайт на вордпресс с подключенным плагином WooCommerce для интернет магазина. У вас есть простой продукт, который вы, но вы хотите добавить немного больше информации о продукте на странице продукта. Если сказать проще, нам нужно поле в админке, в которое мы будем добавлять короткий текст(скажем дополнительную информацию о продукте) и выводить ее на сайте для пользователей.

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

Программное обеспечение и требования

  1. PHP от 5.6.25, хотя я буду использовать PHP 7
  2. MySQL 5.6.33
  3. Apache or Nginx
  4. WordPress 4.7
  5. WooCommerce 3.9
  6. IDE редактор кода

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

Далее мы будем рассматривать как в Woocommerce добавить свое meta поле.

Добавление пользовательских полей(Custom Fields)

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

https://codex.wordpress.org/Custom_Fields

WordPress разрешает авторам добавлять произвольные(custom fields) поля к записи(post). Это произвольная дополнительная информация известна как meta-data.

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

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


Но мы вернемся к этому позже. Сейчас, давайте начнем.

1. Крючки (hooks)

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

Есть два крючка, которые важно знать:

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

Сразу уточню что функционал мы будем писать с использованием объектно-ориентированного программирования. В нем нет ничего сложного.

2. Функциональные возможности

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

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

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

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

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

Добавим функцию init() в которой активируем крючок:

Обратите внимание на то, что функцию product_options_grouping которая будет вызываться на событие «woocommerce_product_options_grouping» я назвал так что бы было легче понимать что конкретно она выполняет. А так же легко понять по на какое событие вызывается эта функция (части названий совпадают: «woocommerce_product_options_grouping» и «product_options_grouping«)
Далее мы напишем код для функции product_options_grouping, но для этого нам понадобится следующая информация:

  1. ID (идентификатор) — что бы однозначно определить наше текстовое поле.
  2. label (метка) — некоторое описание для поля.
  3. placeholder (заполнитель) — текст который прописывается в поле как пример заполнения.
  4. tooltip (всплывающая подсказка) — всплывающая подсказка которая срабатывает при наведении курсора.
  5. description (описание) — текст для tooltip, описание для чего нужно наше поле.

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

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

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

Добавьте следующие строки кода в метод init():

Теперь добавим функцию «add_custom_linked_field_save» в которой реализуем код сохранения:

Рассмотрим эту функцию чуть более подробно

Обработка данных

Обратите внимание, в функции выше, есть три вещи, которые там происходят:

  1. Проверяем что присутствует nonce. Это стандартная мера предосторожности безопасности в вордпресс, более подробно тут: https://codex.wordpress.org/WordPress_Nonces
  2. Обрабатываем переменную $_POST для корректного отображения в текстовом поле
  3. Сохраняем информацию в таблице метаданных записей (postmeta)


Весь код что мы написали работает только во внутренней части сайта и никак не отображает и не влияет на внешнюю. Мы выели поле, обработали и сохранили. Теперь настал черед вывода его на сайте…

3. Отображение нашего текста на внешней части сайта

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

  1. ID текстового поля
  2. ID указанное в конструкторе
  3. Функция которая будет инициализировать крючок
  4. Функция вывода значения нашего поля

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

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

В настоящий момент у нас есть в наших классах код который повторяется. Как известно это противоречит одному из главных принципов объектно-ориентируемого программирования(ссылка: https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself), повторение кода.

Поэтому в конце статью я предоставлю ссылку на плагин, с немного измененным кодом. Описывать изменения я не стану, так как это уже относится к основам программирования а не к нашей теме.

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

Вот код для того:

В данном коде мы подключаем 2 файла с нашими классами. Затем после загрузки кода плагина мы запускаем функцию которая для админ части запустит класс с добавлением поля, а так же его сохранением. А для внешней части сайта — выведет значение нашего поля.

Ну и в конце, как и обещал выкладываю ссылку на данный плагин:
http://onwp.ru/files/tutsplus-custom-woocommerce-field.zip

Источник(https://code.tutsplus.com/tutorials/adding-custom-fields-to-simple-products-with-woocommerce—cms-27904)


Будь первым кто прокомментирует статью.

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

Войти с помощью: