В наши дни раздел «Отзывы» является почти обязательным для каждого веб-сайта электронной коммерции. Будучи социальными существами, мы склонны обращать внимание на мнение других людей о продуктах, которые мы собираемся купить. WooCommerce имеет встроенную функцию, которая позволяет вашим клиентам оставлять отзывы о продуктах, которые вы продаете, и даже давать им оценки. Однако форма WooCommerce по умолчанию довольно проста, поэтому многие владельцы магазинов WooCommerce ищут способы ее расширить.
Итак, здесь вы найдете следующие разделы:
- Введение
- Проблема
- Как добавить поле в начало формы отзыва
- Как добавить поле после текстового поля комментария
- Как сохранить пользовательские данные
- Как отобразить комментарий с пользовательскими данными
- Как сделать настраиваемые поля редактируемыми из панели администратора
Введение
По умолчанию форма отзыва WooCommerce имеет всего два поля: «Ваша оценка» и «Ваш отзыв». Неавторизованные пользователи также должны указать свое имя и адрес электронной почты. Если вы не устанавливали какие-либо плагины, изменяющие форму отзыва, или если ваша тема не делает этого из коробки, форма отзыва на вашем сайте должна выглядеть так:
В этой статье я покажу вам, как добавить в форму отзыва два дополнительных поля: «Плюсы» и «Минусы» (“Pros” and “Cons”). Держу пари, вы видели что-то подобное на других сайтах. Краткий обзор положительных и отрицательных сторон продукта позволяет быстро понять, стоит ли он своих денег. Вот пример того, как может выглядеть расширенный блок отзывов, который я взял с одной из онлайн-площадок.
Думаю, вы понимаете, чего мы сегодня постараемся добиться, так что давайте начнем писать код.
Проблема
Прежде всего, нужно понимать, что форма отзыва WooCommerce — это модифицированная форма комментариев WordPress. Под капотом WooCommerce используется функция comment_form()
При исследовании этого вопроса обнаружилось, что нет простого и простого способа добавить настраиваемые поля в форму комментариев WordPress. Не существует единого хука, который можно было бы легко использовать для добавления настраиваемых полей в форму. Вместо этого есть много действий и фильтров, которые вам придется использовать, если вы решите изменить форму комментариев WordPress.
Давайте рассмотрим, как добавить настраиваемое поле в начало формы комментария и после текстового поля комментария.
Как добавить поле в начало формы отзыва
Если вы хотите добавить настраиваемое поле в начале формы отзыва (до поля рейтинга и после уведомления об авторизации для анонимных пользователей), вам придется использовать два разных хука для одного и того же поля. Это связано с тем, что WordPress по-разному обрабатывает отображение формы в зависимости от того, авторизован пользователь или нет.
Для анонимных пользователей мы будем использовать хук comment_form_defaults . Используя этот хук, мы можем изменить аргументы формы комментариев по умолчанию. Нам нужен этот хук, чтобы показывать наши настраиваемые поля после уведомления «Ваш адрес электронной почты не будет опубликован». Точнее, мы просто добавим наши поля HTML к аргументу формы comment_notes_before .
Для авторизованных пользователей мы будем использовать хук comment_form_top . Этот хук « срабатывает в верхней части формы комментария, внутри тега формы», как сказано в документации.
Чтобы убедиться, что мы изменяем только форму обзора WooCommerce, мы собираемся использовать условный тег is_product() . И чтобы убедиться, что мы не будем дублировать поля, мы собираемся использовать функцию i s_user_logged_in() .
Вот код, который можно использовать:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <?php add_filter( 'comment_form_defaults', 'render_pros_cons_fields_for_anonymous_users', 10, 1 ); add_action( 'comment_form_top', 'render_pros_cons_fields_for_authorized_users' ); function get_pros_cons_fields_html() { ob_start(); ?> <div class="pcf-container"> <div class="pcf-field-container"> <label for="pros">Pros:</label> <input id="pros" name="pros" type="text"> </div> <div class="pcf-field-container"> <label for="cons">Cons:</label> <input id="cons" name="cons" type="text"> </div> </div> <?php return ob_get_clean(); } function render_pros_cons_fields_for_authorized_users() { if ( ! is_product() || ! is_user_logged_in() ) { return; } echo get_pros_cons_fields_html(); } function render_pros_cons_fields_for_anonymous_users( $defaults ) { if ( ! is_product() || is_user_logged_in() ) { return; } $defaults['comment_notes_before'] .= get_pros_cons_fields_html(); return $defaults; } |
Кроме того, я добавил немного CSS, чтобы новые поля выглядели лучше на страницах сайта:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .pcf-field-container { padding-top: 5px; padding-bottom: 5px; } .pcf-field-container label { display: block; } .pcf-field-container input { display: block; width: 100%; } |
Давайте проверим, как выглядят наши новые поля для авторизованного пользователя.
Как и ожидалось, новые поля отображаются прямо перед полем рейтинга.
Это работает и для анонимных пользователей? Да, так и есть - наши новые поля отображаются сразу после уведомления о том, что emai не будет опубликован.
Как добавить поле после текстового поля комментария
Если вы хотите, чтобы ваши настраиваемые поля отображались после поля «Ваш отзыв», вам придется использовать другой хук. К счастью, на этот раз мы можем использовать только один хук, потому что текстовое поле комментария отображается одинаково как для авторизованных, так и для анонимных пользователей. Мы собираемся использовать хук comment_form_field_comment . Этот хук позволяет нам изменить HTML-код поля комментария.
Вот код, который вы можете использовать для достижения этой цели:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?php //НЕ ДОБАВЛЯЙТЕ ЭТУ ФУНКЦИЮ СНОВА, ЕСЛИ ВЫ УЖЕ ДОБАВИЛИ ЕЕ В ПРЕДЫДУЩЕМ РАЗДЕЛЕ function get_pros_cons_fields_html() { ob_start(); ?> <div class="pcf-container"> <div class="pcf-field-container"> <label for="pros">Pros:</label> <input id="pros" name="pros" type="text"> </div> <div class="pcf-field-container"> <label for="cons">Cons:</label> <input id="cons" name="cons" type="text"> </div> </div> <?php return ob_get_clean(); } add_filter( 'comment_form_field_comment', 'render_pros_cons_fields', 99, 1 ); function render_pros_cons_fields( $comment_field ) { if ( ! is_product() ) { return $comment_field; } return $comment_field . get_pros_cons_fields_html(); } |
Давайте теперь посмотрим, что у нас есть в форме обзора:
Кстати, вы можете немного переписать функцию render_pros_cons_fields , чтобы отрисовывать поля ДО поля комментария. В этом случае вам нужно будет вернуть это:
| 1 | return get_pros_cons_fields_html() . $comment_field; |
Но я хочу отметить, что этот код не гарантирует, что ваши настраиваемые поля будут отображаться в начале формы, потому что один из используемых вами плагинов или используемая вами тема могут модифицировать форму комментария с помощью описанных мной хуков. выше или другие хуки, которые срабатывают раньше, чем comment_form_field_comment . В любом случае, не стесняйтесь экспериментировать с этим крючком, чтобы найти наиболее подходящий способ для вашего случая.
Как сохранить пользовательские данные
Хорошо, у нас есть настраиваемые поля. Проблема в том, что они не будут сохранены автоматически: вам нужно написать код для сохранения значений пользовательских полей. Для этого нужно использовать хук comment_post . Этот хук срабатывает сразу после добавления комментария в базу данных, но:
- У вас все еще есть доступ к переменным $_POST
- Вы можете получить доступ к идентификатору нового сообщения
Комментарии WordPress могут иметь свои метаданные точно так же, как сообщения и пользователи. Таким образом, мы собираемся хранить плюсы и минусы, представленные пользователем, в качестве мета-комментария. Давайте посмотрим, как мы можем это сделать:
Комментарии WordPress могут иметь свои метаданные точно так же, как сообщения и пользователи. Таким образом, мы собираемся хранить плюсы и минусы, представленные пользователем, в качестве мета-комментария. Давайте посмотрим, как мы можем это сделать:
| 1 2 3 4 5 6 7 8 9 10 11 | add_action( 'comment_post', 'save_review_pros_and_cons', 10, 3 ); function save_review_pros_and_cons( $comment_id, $approved, $commentdata ) { // The pros and cons fields are not required, so we have to check if they're not empty $pros = isset( $_POST['pros'] ) ? $_POST['pros'] : ''; $cons = isset( $_POST['cons'] ) ? $_POST['cons'] : ''; // Spammers and hackers love to use comments to do XSS attacks. // Don't forget to escape the variables update_comment_meta( $comment_id, 'pros', esc_html( $pros ) ); update_comment_meta( $comment_id, 'cons', esc_html( $cons ) ); } |
Как отобразить комментарий с пользовательскими данными
Вы можете просто поверить мне, что приведенный выше код работает, но вы не можете проверить его, не открывая базу данных. Давайте добавим плюсы и минусы, которые пользователь отправил в тексте своего комментария. Для этого мы можем использовать фильтр-хук comment_text . Этот хук позволяет нам изменять текст комментария, поэтому мы можем добавлять плюсы и минусы непосредственно перед основным текстом комментария.
You can just believe me that the code above works, but you can’t check it without opening the database. Let’s add the pros and cons a user has submitted to their comment’s text. To do this, we can utilize the comment_text filter hook. This hook allows us to modify a comment’s text, so we can add the pros and cons just before the comment’s main text.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | add_filter( 'comment_text', 'add_pros_and_cons_to_review_text', 10, 1 ); function add_pros_and_cons_to_review_text( $text ) { // We don't want to modify a comment's text in the admin, and we don't need to modify the text of blog post commets if ( is_admin() || ! is_product() ) { return $text; } $pros = get_comment_meta( get_comment_ID(), 'pros', true ); $cons = get_comment_meta( get_comment_ID(), 'cons', true ); $pros_html = '<div class="pcf-row"><b>Pros: </b>' . esc_html( $pros ) . '</div>'; $cons_html = '<div class="pcf-row"><b>Cons: </b>' . esc_html( $cons ) . '</div>'; $updated_text = $pros_html . $cons_html . $text; return $updated_text; } |
По умолчанию наши новые блоки будут выглядеть немного беспорядочно, поэтому давайте добавим нижнее поле, чтобы они выглядели немного лучше:
| 1 2 3 | .pcf-row { margin-bottom: 10px; } |
Теперь, если я оставлю отзыв о продукте, заполнив поля «за» и «против», я увижу их как часть своего отзыва:
Как сделать настраиваемые поля редактируемыми из панели администратора
Хорошие новости: мы почти закончили. Последнее, что нам нужно сделать, это сделать метаполя «за» и «против» изменяемыми с панели администратора. Это отличная функция, если вы хотите модерировать то, что ваши пользователи вводят в эти поля.
Если вы перейдете на страницу «Комментарии» и нажмете ссылку «Изменить» под новым комментарием, вы увидите что-то вроде этого:
Вы можете редактировать любое поле по умолчанию, но вы можете редактировать настраиваемые поля, которые вы добавили ранее. Давайте добавим новое мета-поле, которое позволит нам редактировать поля из панели администратора.
Мы можем сделать это, используя хук add_meta_boxes_comment вместе с функцией add_meta_box .
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?php add_action( 'add_meta_boxes_comment', 'extend_comment_add_meta_box', 10, 1 ); function extend_comment_add_meta_box( $comment ) { // We don't need to show this metabox if a comment doesn't belong to a product $post_id = $comment->comment_post_ID; $product = wc_get_product( $post_id ); if ( $product === null || $product === false ) { return; } add_meta_box( 'pcf_fields', 'Pros & Cons', 'render_pcf_fields_metabox', 'comment', 'normal', 'high' ); } function render_pcf_fields_metabox ( $comment ) { $pros = get_comment_meta( $comment->comment_ID, 'pros', true ); $cons = get_comment_meta( $comment->comment_ID, 'cons', true ); wp_nonce_field( 'pcf_metabox_update', 'pcf_metabox_nonce', false ); ?> <p> <label for="phone">Pros:</label> <input type="text" name="pros" id="pros" value="<?php echo esc_attr( $pros ); ?>" class="widefat" /> </p> <p> <label for="cons">Cons:</label> <input type="text" name="cons" id="cons" value="<?php echo esc_attr( $cons ); ?>" class="widefat" /> </p> <?php } |
Теперь, если я снова открою редактор комментариев, я увижу новый метабокс под метабоксом «Рейтинг»:
Значения настраиваемых полей теперь видны в редакторе комментариев, но если вы попытаетесь отредактировать их и сохранить изменения, вы не увидите их после перезагрузки страницы. Чтобы это исправить, воспользуемся хуком edit_comment для обработки обновлений полей:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | add_action( 'edit_comment', 'save_pcf_changes', 10, 1 ); function save_pcf_changes( $comment_id ) { // First of all, let's validate the nonce if ( ! isset( $_POST['pcf_metabox_nonce'] ) || ! wp_verify_nonce( $_POST['pcf_metabox_nonce'], 'pcf_metabox_update') ) { wp_die( 'You can not do this action' ); } if ( isset( $_POST['pros'] ) ) { $pros = $_POST['pros']; update_comment_meta( $comment_id, 'pros', esc_html( $pros ) ); } if ( isset( $_POST['cons'] ) ) { $cons = $_POST['cons']; update_comment_meta( $comment_id, 'cons', esc_html( $cons ) ); } } |
Теперь вы можете легко редактировать настраиваемые поля, которые мы добавили, прямо из панели администратора.
Резюме
Уф, для такой простой цели было много нюансов. Хоть здесь показано, как добавить текстовые поля в форму отзыва WooCommerce, вы можете использовать любой другой тип поля, который вам нужен: число, дата, выбор и т. д.
В любом случае, надеюсь, что вы нашли этот пост полезным. Поделитесь своим мнением в разделе комментариев ниже.
Спасибо, что дочитали статью до конца )).
Если вас интересует тема работы с WooCommerce с точки зрения изменения кода, тогда вам стоит еще посмотреть статью "Полезные функции при работе с темой для Woocommerce".
Перевод статьи How to add custom fields to the WooCommerce review form?
Сделал, как указано в Вашей статье. Все работает.
Скажите, как сделать доп поля обязательными ?
У полей формы есть атрибут
required, который и делает поле обязательным. Соответственно, вы добавляете этот атрибут в нужное поле, например:Приведенный вами пример не работает. Вылетает с ошибкой.
Просто скопировал для теста. в
он ломаеться с ошибкой. Можете перепроверить, и в конце статьи привести полностью рабочий код ?
Нак же был благодарен если бы коказали как в поментарии дать возможность пользователю прикреплять файлы с картинками...
Это перевод статьи. К сожалению, времени перепроверить сейчас нет.