/ Плагины / Вкладка видеообзор

Вкладка видеообзор

HIT

09.12.2016

1376

3

Для некоторых товаров в интернет-магазине требуется видеообзор — сделаем для них на странице товара вкладку.

Создаем дополнительное поле Видеообзор

add_action( 'woocommerce_product_options_general_product_data', 'video_custom_general_fields' );
add_action( 'woocommerce_process_product_meta', 'video_custom_general_fields_save' );

function video_custom_general_fields() {

	global $woocommerce, $post;

	echo '<div class="options_group">';

	woocommerce_wp_text_input( 
		array( 
			'id' => 'video_field', 
			'label' => __( 'Видеобзор', 'woocommerce' ), 
			'placeholder' => 'http://',
			'desc_tip' => 'true',
			'description' => __( 'Вставьте ссылку на видео', 'woocommerce' ),
			'type' => 'html'
		)
	);

	echo '</div>';

}

function video_custom_general_fields_save( $post_id ){

	// Text Field
	$woocommerce_text_field = $_POST['video_field'];
	if( !empty( $woocommerce_text_field ) )
		update_post_meta( $post_id, 'video_field', esc_attr( $woocommerce_text_field ) );

}

Создаем вкладку Видеообзор

function video_product_tab( $tabs ) {
 
 $custom_tab_v = array( 
 'custom_tab_v' => array( 
        'title' => __('Видеообзор','woocommerce'), 
        'priority' => 100, 
        'callback' => 'video_product_tab_content' 
                               )
                      );
 return array_merge( $custom_tab_v, $tabs );
}

function video_product_tab_content() {
 
global $post; 
echo '<iframe src="'; 
echo get_post_meta($post->ID, 'video_field', true);
echo '" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>'; 
} 
add_filter( 'woocommerce_product_tabs', 'video_product_tab' );

Проблема X-Frame-Options

Проблема Refused to display ‘https://vimeo.com/’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

Проблема X-Frame-Options решается следующим образом
для youtube
перед выводом ссылки добавляем https://www.youtube.com/embed/ и после только окончание ссылки yRdKq_-FJPs (после watch?v=)
для vimeo
перед выводом ссылки добавляем http://player.vimeo.com/video/ и после только окончание ссылки 62882435 (после https://vimeo.com/)

Создать функцию, при сохранении, автоматически заменяющую часть url

Проверка на заполненность

Необходимо чтобы вкладка не выводилась при незаполненном поле — добавляем проверку и внесем дополнения описанные в предыдущем пункте:

function video_product_tab( $tabs ) {

	global $post;

	if (get_post_meta($post->ID, 'video_field', true)) :

	$video = array(
		'video' => array(
			'title' => __('Видеообзор','woocommerce'),
			'priority' => 100,
			'callback' => 'video_product_tab_content'
		)
	);

	return array_merge( $video, $tabs );
	else: return $tabs;
	endif;

}

function video_product_tab_content() {

	global $post;
	echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/';
	echo get_post_meta($post->ID, 'video_field', true);
	echo '" frameborder="0" allowfullscreen></iframe>';
}
add_filter( 'woocommerce_product_tabs', 'video_product_tab' );

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Отложенная загрузка видео

Отложенная загрузка видео

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo. Отложенная загрузка iframe YOUtube Из исходного iframe потребуется только ID Читать далее »

Фон — видео

Фон — видео

Очень эффектно, для главной страницы, смотрится фон из видео. Рассмотрим основные моменты данной «фишки». Добавление видеофона в вёрстку CSS стили, адаптация под размер области, с наложением пиксельной сетки поверх видео Читать далее »

Форматы записей

Форматы записей

Записям в WP можно назначать формат, в зависимости от содержания: aside (заметка), gallery (галерея), link (ссылка), image (изображение), quote (цитата), status (статус), video, chat (чат), audio либо Стандартный (по-умолчанию). Пользовательские Читать далее »

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

3 комментария

  1. Torcedor

    Всё это прописывается в functions.php?

    1. Alexandr

      Да, можно в functions.php. Но для удобства функции связанные в WC я прописываю в отдельном файле, чтобы не путаться. А потом подключаю его в functions.php (Как подключить — кратко описано здесь).

    2. Alexandr

      Впрочем, подобный отдельный функционал можно также реализовать в виде плагина.

Вкладка видеообзор
Пользовательское письмо Woocommerce
Рекомендации для васПользовательское письмо WoocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.