/ Сайтостроение / Плагины / Поле загрузчик файлов для товара

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

13.07.2017

487

Добавляем для товаров поле загрузчик файлов (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>

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Загрузчик изображений для таксономии

Загрузчик изображений для таксономии

Создаем загрузчик изображений для термина таксономии. Данный пост содержит чистый метод создания metabox для термина таксономии. Есть более универсальный метод добавления изображений терминам, но нижеописанный способ может стать дополнительным, когда Читать далее »

/

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

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

Поле загрузчик файлов для товара
Шаг количества товара
Рекомендации для васШаг количества товараOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.