Создавайте настраиваемые вкладки продуктов WooCommerce с расширенными настраиваемыми полями

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

Отказ от ответственности: существует расширение WooCommerce под названием WooCommerce Tab Manager, которое предоставляет эту функцию. Однако это не бесплатно. Я не проверял его сам, но, насколько я понимаю, он поддерживает только редактор WYSIWYG (что вы видите, то и получаете) для содержимого вкладок. Этот пост для тех, кто хочет более тонкой настройки содержимого вкладки или хочет написать код самостоятельно, не платя за другой плагин.

Мы будем использовать плагин Advanced Custom Fields (ACF), чтобы упростить процесс. Но вы должны быть в состоянии довольно легко заменить часть ACF своим собственным кодом, если вы не хотите использовать плагин. ACF поставляется в бесплатной версии и версии Pro. В ACF Pro есть отличный тип поля: повторитель, который идеально подходит для такого использования. Однако, если у вас нет или вы хотите приобрести лицензию Pro, не беспокойтесь. В приведенном ниже руководстве по коду показано, как добавлять поля, используя как бесплатную версию, так и повторитель в версии Pro.

Если вы еще не знакомы с ACF, ACF поможет нам с простой настройкой метаполей постов — всех видов. Вы можете легко добавить редактор, средство выбора файлов, средство выбора даты или цвета, средство выбора сообщений или категорий с поддержкой множественного выбора и изменения порядка и многое другое. Мы можем добиться того же и без ACF, но тогда нам нужно будет самим кодировать отображение и сохранение содержимого метабоксов.

Что мы будем делать

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

В этом уроке мы упростим задачу, добавив WYSIWYG-редактор для содержимого вкладки. Как упоминалось выше, легко реализовать другие типы полей (например, файлы или почтовый запрос), это просто разница в коде, который вы пишете для отображения содержимого вкладки, что не имеет отношения к этому руководству.

Если у вас есть ACF Pro и вы хотите использовать повторитель для простого добавления нескольких вкладок; пропустить следующий раздел. Если у вас есть только бесплатная версия ACF, продолжайте. Недостатком отсутствия поля повторителя является то, что вам нужно определить фиксированное количество вкладок. Таким образом, автор не может сделать неограниченное количество вкладок, как это возможно с повторителем. Но это бесплатное решение будет отлично работать в интернет-магазинах, где вам просто нужны определенные (количество) настраиваемые вкладки.

Учебник для бесплатной версии ACF

Добавление полей ACF

Добавить новый метабокс с полями в нем очень просто с помощью ACF. У вас есть два варианта; используйте пользовательский интерфейс ACF, чтобы настроить все, или добавьте поля по коду. Обычно настройка полей в админке — это путь. Но если вам нужно убедиться, что поля существуют на нескольких сайтах WordPress (например, разработка на локальном хосте, тестовый сервер и работающий сервер), вы можете добавить поля с помощью кода в свою тему или плагин.

Вам необходимо настроить следующее:

• Группа, которая отображается, когда тип сообщения равен продуктам WooCommerce.
• Текстовый ввод для заголовка вкладки
• Любые поля, которые вы хотите для содержимого вкладки. В качестве примера мы добавим редактор WYSIWYG.
• (Необязательно) Дополнительные заголовки вкладок и содержимое вкладок для любого количества вкладок, которые мы хотим поддерживать.

Пожалуйста, обратите внимание на то, чтобы запомнить имена полей, так как вам понадобится обращаться к ним позже. Я определил заголовок вкладки как tab_titleи поле WYSIWYG как tab_contents.

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

Если вам нужно больше одной вкладки, просто добавьте еще один набор заголовков и содержимого вкладок после line #19. Просто не забудьте сохранить nameуникальность.

Когда мы редактируем продукт, мы должны увидеть этот метабокс:

Вывод ваших пользовательских вкладок

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

Оказавшись внутри функции, которую вы можете использовать global $post, чтобы получить доступ к текущему объекту публикации, или, если вы хотите, чтобы объект продукта сгенерировал WooCommerce, просто выполните global $product. Нам нужен идентификатор сообщения, чтобы получить значение наших настраиваемых полей с помощью функции ACF [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). В приведенном ниже примере кода мы получаем только заголовок вкладки и проверяем, пусто оно или нет. Если это не так, то он добавляет новую вкладку в массив. Имеет смысл не добавлять вкладки, если заголовок вкладки пуст.

Обратите внимание, что вы можете использовать ‘ priority‘ для управления положением вкладки. Например, установив для него значение 1, ваша вкладка будет отображаться первой перед всеми вкладками WooCommerce. Определите имя функции для callbackэлемента ‘ ‘. В строке #17мы определяем функцию, которую WooCommerce будет запускать для вывода содержимого вкладки.

Эти функции обратного вызова вкладки получат два параметра; ключ и элемент массива всех значений для текущей вкладки. Внутри нашей функции обратного вызова мы снова выводим заголовок вкладки, ссылаясь на предоставленный $tabмассив. WooCommerce повторяет заголовки вкладок внутри a, h2поэтому мы делаем то же самое. А затем мы используем get_field(), чтобы получить значение содержимого вкладки и просто повторить значение. Отрегулируйте строку #23, чтобы она соответствовала типам полей, которые вы добавили (например, селектор объектов публикации, изображения или что-то еще).

Обратите внимание, что я завернул все в if-check, который проверяет, активированы ли WooCommerce и ACF. Это хорошая практика, чтобы предотвратить поломку вашего сайта.

И это все! Теперь вы успешно создали код для добавления пользовательских вкладок WooCommerce!

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

Учебник для ACF Pro и повторителя

Добавление полей ACF

Добавьте свою группу, используя либо пользовательский интерфейс администратора ACF, либо добавив их с помощью кода в вашей теме или файлах плагинов. Нам нужно настроить следующее:

• Группа, которая отображается, когда тип сообщения равен продукту WooCommerce.
• Повторитель со следующими подполями:
  • Текстовый ввод для заголовка вкладки
  • Любые поля, которые вы хотите для содержимого вкладки.

Вот как вы можете настроить его с помощью администратора ACF:

Или вы можете добавить группу по коду следующим образом:

В любом случае вы должны получить этот метабокс при редактировании продуктов:

Вывод ваших пользовательских вкладок

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

Внутри нашей функции фильтра мы извлекаем значение повторителя и проверяем, не пусто ли оно. Затем мы определяем переменную-счетчик, начиная с 0 (массивы всегда начинаются с позиции 0), которую мы увеличиваем на 1 для каждого элемента внутри цикла (в строке #18). В цикле для каждого элемента повторителя мы назначаем их всем одной и той же функции обратного вызова. Мы используем функцию WordPress, [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()чтобы преобразовать заголовок вкладки в его слаг-версию и добавить его к ключу.

В нашей функции обратного вызова в строке #31 - 32мы выполняем несколько простых манипуляций со строками, чтобы извлечь значение счетчика (которое начинается с 0 и увеличивается на 1 для каждого элемента). Затем мы просто используем это как индекс для массива повторителей, чтобы получить правильное поле содержимого вкладки.

И это все! Теперь вы внедрили неограниченное количество пользовательских вкладок в WooCommerce!

Помните, что вы можете заменить WYSIWYG любым полем. Вам просто нужно изменить способ вывода поля в строке #23.

Вывод

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