Поле загрузчик файлов для товара

Добавляем для товаров поле загрузчик файлов (file uploader). Загрузчик может пригодиться во многих случаях: дополнительное изображение (не подпадающее под параметры основного и галереи), инструкция к товару в worde или pdf, сертификаты и т.п.

Прописываем функции создания поля

Функция создания поля и инициализация скрипта обработчика. Код скрипта обработчика можно взять из этой статьи.

//Создание поле загрузчик файлов
function true_include_myuploadscript() {
	if ( ! did_action( 'wp_enqueue_media' ) ) {
		wp_enqueue_media();
	}
	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/js/admin.js', array('jquery'), null, false );
}

add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' );

/* PHP-функция добавления полей в форму */
function true_image_uploader_field( $name, $value = '', $w = 75, $h = 75) {
	$default = get_stylesheet_directory_uri() . '/images/img-default.jpg';
	if( $value ) {
		$image_attributes = wp_get_attachment_image_src( $value, array($w, $h) );
		$src = $image_attributes[0];
	} else { 
		$src = $default;
	}
	echo '
	<div>
	<img data-src="' . $default . '" src="' . $src . '" width="' . $w . 'px" height="' . $h . 'px" />
	<div>
		<input type="hidden" name="' . $name . '" id="' . $name . '" value="' . $value . '" />
		<button type="submit" class="upload_image_button button">Загрузить</button>
		<button type="submit" class="remove_image_button button">×</button>
	</div>
	</div>
	';
}

Вывод полей в области Woocommerce + сохранения. Вышеприведенная функция загрузки универсальна, можно создать несколько разных полей, но загрузчик использовать один — true_image_uploader_field( ‘uploader_custom’, get_post_meta($post->ID, ‘uploader_custom’,true) );

add_action( 'woocommerce_product_options_general_product_data', 'woo_add_general_image' );
function woo_add_general_image($post) {
	global $post;
	if( function_exists( 'true_image_uploader_field' ) ) {
		echo '<div class="options_group">';
		echo '<p class="form-field unit_text_field_field ">';
		echo '<label for="unit_text_field">Инструкция</label>';
			true_image_uploader_field( 'uploader_custom', get_post_meta($post->ID, 'uploader_custom',true) );
		echo '</p>';
		echo '</div>';
	}
}

Функция сохранения данных поля

function true_save_box_data_u( $post_id ) {
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
	return $post_id;
	update_post_meta( $post_id, 'uploader_custom', $_POST['uploader_custom']);
	return $post_id;
}

add_action('save_post', 'true_save_box_data_u');

Выводим файл изображение

function site_image_field_woocommerce() {

global $post;
$attachment_id = get_post_meta($post->ID, 'uploader_custom', true);

echo wp_get_attachment_image( $attachment_id, 'full' );
}

add_action( 'woocommerce_single_product_summary', 'site_image_field_woocommerce', 45 );

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

Выводим файл вложение (pdf, doc и прочие)

function site_image_field_woocommerce() {
	global $post;
	$attachment_id = get_post_meta($post->ID, 'uploader_custom', true);

	echo '<a id="manual" href="'.wp_get_attachment_url( $attachment_id ).'">';
	echo '<p><img src="'.get_template_directory_uri().'/images/pdf.png"></p>';
	echo '<p>Инструкция</p>';
	echo '</a>';
}

add_action( 'woocommerce_single_product_summary', 'site_image_field_woocommerce', 45 );

С одной из последних версий WordPress появилась возможность выводить миниатюры у pdf файлов, т.е. можно использовать не дефолтную иконку, а вывод миниатюры pdf:

echo '<p>'.wp_get_attachment_image( $attachment_id, 'thumbnail' ).'</p>';

Можно динамически выводить название файла вложения (без расширения) сразу с ссылкой:

echo wp_get_attachment_link( $attachment_id );

Группа полей документации

Как было написано выше можно выводить группу схожих полей: паспорт прибора, сертификат с общей функций загрузки. Вывод у такой группы может быть также общим:

// Общая функция вывода в Дополнительно информации
function site_image_field_woocommerce() {
	global $post;  
	echo '<div id="documents">';  
		$attachment_id = get_post_meta($post->ID, 'uploader_custom', true);    
		if (get_post_meta($post->ID, 'uploader_custom', true)) {

			echo '<a id="manual" href="'.wp_get_attachment_url( $attachment_id ).'" target="_blank">';
			echo '<p>'.wp_get_attachment_image( $attachment_id, 'thumbnail' ).'</p>'; 
			echo '<p>Паспорт прибора</p>';echo '</a>';  
		}  
		$certificate_id = get_post_meta($post->ID, 'certificate', true);    
		if (get_post_meta($post->ID, 'certificate', true)) {
			echo '<a id="certificate" href="'.wp_get_attachment_url( $certificate_id ).'" target="_blank">';
			echo '<p>'.wp_get_attachment_image( $certificate_id, 'thumbnail' ).'</p>';
			echo '<p>Сертификат соответствия</p>';echo '</a>';   
		}  
	echo '</div>';
}
add_action( 'woocommerce_product_additional_information', 'site_image_field_woocommerce', 45 );

Стили Вывода документации

#documents a {float: left; clear: both; margin-bottom: 15px;}

#documents a p {display: inline-block; vertical-align: middle; margin-right: 15px;}

#documents img {max-width: 50px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);}

Страница документации

Создадим шаблон вывода документации. Для этого как обычно создаём шаблон страницы, например manuals.php, и в нем прописываем вывод товаров у которых есть инструкции, с сортировкой по названию:

<?php $args = array(    
	'post_type' => 'product',  
	'posts_per_page' => -1,  
	'orderby' => 'title',  
	'order'   => 'ACS'
);

$postslist = get_posts( $args ); ?>  

<table><?php foreach ($postslist as $post) : setup_postdata($post); ?> 

	<?php if (get_post_meta($post->ID, 'uploader_custom', true)) : ?>
	<tr>
	<td class="tb-img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('square-xs');?></a></td> 
	<td><a href="<?php the_permalink(); ?>"><?php the_title();?></a></td>
	<td class="tb-img"><?php $attachment_id = get_post_meta($post->ID, 'uploader_custom', true); ?>
	<a href="<?php echo wp_get_attachment_url( $attachment_id ); ?>" target="_blank"><img src="/wp-content/themes/magazin-2/images/pdf.png"></a></td>
	</tr>
	<?php endif; ?>

<?php endforeach; ?></table>

[site-socialshare]