@Flexx0

Динамическое добавление поля в админке на своей вкладке свойств товара. Как?

Здравствуйте! Помогите, пожалуйста, решить задачу. Нужно добавить на свою вкладку свойств товара в админке. И можно было динамически добавить текстовое поле. Сейчас я добавляю с помощью js поле, сохраняю, могу вывести значение этого поля, но когда снова заходишь в админку товара, естественно этих динамических элементов нет. Хотел сделать определенное количество полей с классом hidden и менять класс у скрытых полей, но тут та же проблема, после обновления они будут скрыты. Плюс добавляется проблема с ограниченным количеством, а хотелось бы, чтобы оно не ограничивалось или ограничивалось вручную.

Имею следующее:

в function.php

add_filter( 'woocommerce_product_data_tabs', 'art_added_tabs', 10, 1 );
function art_added_tabs( $tabs ) {

	$tabs['special_panel'] = array(
		'label'    => 'MY TAB', // название вкладки
		'target'   => 'speciall_panel_product_data', // идентификатор вкладки
		'class'    => array( 'class1', 'class2' ), // классы управления видимостью вкладки в зависимости от типа товара
		'priority' => 5, // приоритет вывода
	);

	return $tabs;
}


/*
 * Заполнение вкладки
 */
add_action( 'woocommerce_product_data_panels', 'speciall_panel_product_data' );
 
function speciall_panel_product_data(){
 
	echo '<div id="speciall_panel_product_data" class="panel woocommerce_options_panel hidden">';
 
	// тут уже выводим поля
	echo '<div id="speciall_tab">';
	// текстовое поле
   woocommerce_wp_text_input( array(
      'id'                => '_text_field',
      'label'             => __( 'Текстовое поле', 'woocommerce' ),
      'placeholder'       => 'Текстовое поле',
      'desc_tip'          => 'true',
      'custom_attributes' => array( 'required' => 'required' ),
      'description'       => __( 'Введите здесь значение поля', 'woocommerce' ),
   ) );
echo '<div class="days-info">';
   // Текстовая область
echo '<div class="day-disc" id="day1">';
   woocommerce_wp_textarea_input( array(
      'id'            => '_textarea', // Идентификатор поля
      'label'         => 'Опишите первый', // Заголовок поля
      'placeholder'   => 'Ввод текста', // Надпись внутри поля
      'class'         => 'textarea-field', // Произвольный класс поля
      'style'         => 'width: 70%; background:white', // Произвольные стили для поля
      'wrapper_class' => 'wrap-textarea', // Класс обертки поля
      'desc_tip'      => 'true', // Включение подсказки
      'description'   => 'Здесь можно что-нибудь вводить',// Описание поля
      'name'          => 'textarea-field', // Имя поля
      'rows'          => '5', //Высота поля в строках текста.
      'col'           => '10', //Ширина поля в символах.
   ) );
   echo '</div>';
   // Текстовая область
   echo '<div class="day-disc hidden" id="day2">';
   woocommerce_wp_textarea_input( array(
      'id'            => '_textarea2', // Идентификатор поля
      'label'         => 'Опишите второй', // Заголовок поля
      'placeholder'   => 'Ввод текста', // Надпись внутри поля
      'class'         => 'textarea-field', // Произвольный класс поля
      'style'         => 'width: 70%; background:white', // Произвольные стили для поля
      'wrapper_class' => 'wrap-textarea', // Класс обертки поля
      'desc_tip'      => 'true', // Включение подсказки
      'description'   => 'Здесь можно что-нибудь вводить',// Описание поля
      'name'          => 'textarea-field2', // Имя поля
      'rows'          => '5', //Высота поля в строках текста.
      'col'           => '10', //Ширина поля в символах.
   ) );
   echo '</div>';
     // Текстовая область
   echo '<div class="day-disc hidden" id="day3">';
   woocommerce_wp_textarea_input( array(
      'id'            => '_textarea3', // Идентификатор поля
      'label'         => 'Опишите третий', // Заголовок поля
      'placeholder'   => 'Ввод текста', // Надпись внутри поля
      'class'         => 'textarea-field', // Произвольный класс поля
      'style'         => 'width: 70%; background:white', // Произвольные стили для поля
      'wrapper_class' => 'wrap-textarea', // Класс обертки поля
      'desc_tip'      => 'true', // Включение подсказки
      'description'   => 'Здесь можно что-нибудь вводить',// Описание поля
      'name'          => 'textarea-field3', // Имя поля
      'rows'          => '5', //Высота поля в строках текста.
      'col'           => '10', //Ширина поля в символах.
   ) );
   echo '</div>';
    echo '</div>';

echo '</div>';
	echo '</div>';
   echo '<div style="padding-left:400px;display: inline-block;" class="counter" onclick="addInput()">+</div>';
   echo '<div style="padding-left:400px;display: inline-block;" class="counter" onclick="delInput()">-</div>';
 
}

// --------------сохранение полей-------------

add_action( 'woocommerce_process_product_meta', 'art_woo_custom_fields_save', 10 );
function art_woo_custom_fields_save( $post_id ) {
   // Сохранение текстового поля
   $woocommerce_text_field = $_POST['_text_field'];
   if ( !empty($woocommerce_text_field) ) {
   update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
}
   // Сохранение цифрового поля
   $woocommerce_number_field = $_POST['_number_field'];
   if ( !empty($woocommerce_number_field)) {
      update_post_meta( $post_id, '_number_field', esc_attr( $woocommerce_number_field ) );
   }
   // Сохранение области текста
   $woocommerce_textarea = $_POST['textarea-field'];
   if ( ! empty( $woocommerce_textarea ) ) {
      update_post_meta( $post_id, '_textarea', esc_html( $woocommerce_textarea ) );
   }
   // Сохранение области текста2
   $woocommerce_textarea = $_POST['textarea-field2'];
   if ( ! empty( $woocommerce_textarea ) ) {
      update_post_meta( $post_id, '_textarea2', esc_html( $woocommerce_textarea ) );
   }
   // Сохранение области текста3
   $woocommerce_textarea = $_POST['textarea-field3'];
   if ( ! empty( $woocommerce_textarea ) ) {
      update_post_meta( $post_id, '_textarea3', esc_html( $woocommerce_textarea ) );
   }
   // Сохранение выпадающего списка
   $woocommerce_select = $_POST['_select'];
   if ( ! empty($woocommerce_select )) {
      update_post_meta( $post_id, '_select', esc_attr( $woocommerce_select ) );
   }
   // Сохранение радиокнопок
   $woocommerce_radio = $_POST['radio-field'];
   if ( ! empty( $woocommerce_radio )) {
   update_post_meta( $post_id, '_radiobutton', esc_attr( $woocommerce_radio ) );
   }
   // Сохранение чекбоксов
   $woocommerce_checkbox = isset( $_POST['_checkbox'] ) ? 'yes' : 'no';
   update_post_meta( $post_id, '_checkbox', $woocommerce_checkbox );
   // Сохранение группы произвольных полей
   $woocommerce_pack_length = $_POST['_pack_length'];
   if ( ! empty( $woocommerce_pack_length )) {
      update_post_meta( $post_id, '_pack_length', esc_attr( $woocommerce_pack_length ) );
   }
   $woocommerce_pack_width = $_POST['_pack_width'];
   if ( ! empty( $woocommerce_pack_width )) {
      update_post_meta( $post_id, '_pack_width', esc_attr( $woocommerce_pack_width ) );
   }
   $woocommerce_pack_height = $_POST['_pack_height'];
   if ( ! empty( $woocommerce_pack_height )) {
      update_post_meta( $post_id, '_pack_height', esc_attr( $woocommerce_pack_height ) );
   }
   // Hidden Field
   $woocommerce_hidden_field = $_POST['_hidden_field'];
   if ( ! empty( $woocommerce_hidden_field )) {
      update_post_meta( $post_id, '_hidden_field', esc_attr( $woocommerce_hidden_field ) );
   }
   // Сохранение произвольного поля по выбору товаров с поиском
   if (  isset( $_POST['product_field_type'] ) && !empty($_POST['product_field_type'] ) ) {
      // Проверяем данные, если они существуют и не пустые, то записываем данные в поле
      update_post_meta( $post_id, '_product_field_type_ids',  array_map( 'absint', (array) $_POST['product_field_type'] ));
   } else {
      // Иначе удаляем созданное поле из бд
      delete_post_meta( $post_id, '_product_field_type_ids');
   }
}



в js файле

var x = 0;

function addInput() {
  var speciall_panel_product_data = document.getElementById('speciall_panel_product_data');
  var div = document.createElement('div');
  div.id = 'input' + ++x;
  div.innerHTML = '<textarea class="textarea-field' + x + '" style="width: 70%; background:white" name="textarea-field' + x + '" id="_textarea' + x + '" placeholder="gg5555gg" rows="5" cols="20"></textarea>';
  speciall_panel_product_data.appendChild(div);
}

function delInput() {
  var div = document.getElementById('input' + x);
  div.remove();
  --x;
}



Помогите, пожалуйста, решить эту задачу. Заранее всем благодарен за ответы.
  • Вопрос задан
  • 184 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы