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

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

09.12.2016

665

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' => __( 'My Text Field', 'woocommerce' ), 
 'placeholder' => 'http://',
 'desc_tip' => 'true',
 'description' => __( 'Enter the custom value here.', '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' =&gt; array( 
        'title' =&gt; __('Видеообзор','woocommerce'), 
        'priority' =&gt; 100, 
        'callback' =&gt; '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-&gt;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' );

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Форматы записей

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

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

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

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

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

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

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

  1. Torcedor

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

    1. Alexandr
      Alexandr

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

    2. Alexandr
      Alexandr

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

Вкладка видеообзор
Изменить стиль карты Google Map
Рекомендации для васИзменить стиль карты Google MapOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.