Аудио Превью товара (Audio Preview) на странице категорий?

[Seldy]

Привет!

Ребята подскажите, помогите пожалуйста.

Я уже совсем отчаялся в решении своей задачи.

Необходимо вставить Аудио, Медиа плеер для каждого товара индивидуально на страницу продуктов/категорий (в виде кнопки под/над/поверх Thumbnails товара) что бы человек мог прослушать предварительно, не заходя в описание товара.

Вот по такому принципу:
1) пример1
2) пример2
3) пример3
4) пример4

Я по накупал уже кучу медиа плееров и нифига не смог подключить их правильно так как не силен по части программирования.
Или отображаются не правильно (наложение всех элементов управления друг на друга ) или вовсе ничего не видно.

Список плагинов в наличии:
1) ZoomSounds
2) Fullwidth Audio Player
3) The Stiz - Audio for WooCommerce
4) jPlayer product sampler

Использую Данный шаблон в качестве темы:
X | The Theme

Версия Wordpress 4.1
Версия Woocommerce 2.2.10

Если не корректно даже работает *родной* плагин jPlayer product sampler (в виде каши элементов управления ) то может возможно подставить некую иконку в виде PLAY рядом с ценой (или поверх изображения) и ссылкой на shortcode к плееру Fullwidth Audio Player с определенной песней для прослушивания. В общем я понимаю, что нужно, но не знаю как это реализовать

 

[Seldy]

Нашел выход!
Всем спасибо за советы

 

[Grollem]

очень просто можно реализовать.
I вариант для себя, грубо и сердито
1. Через встроенные произвольные поля, к товару добавляем произвольное поле audio_link. запихиваем туда ссылку на аудио файл.
2. Далее пeреопределяем шаблон content-product.php который в plugins/woocommerce/templates
3. Ставим аудио плеер который позволяет проигрывать аудиофайлы и при этом поддерживает шорткоды.
4. Внутри тега <li> в этом шаблоне отвечающем за вывод товара Пишем код:
<?php
$meta_values = get_post_meta($product->id , 'audio_link', true);
if (isset($meta_values)) {
echo do_shortcode("[sortcode audio url = ".$meta_values."]");
}
?>
II Вариант - Для админа или контенщика
1. Устанавливаем плагин ACF
2. Создаем группу произвольных полей, в условиях указываем что нужно только для постов с типом продукт
3. В группе полей выбираем поле файл, обзываем его например "добавить файл аудио превью" ставим чек бокс file URL ярлык поля называем audio_url
4. Ставим аудио плеер который позволяет проигрывать аудиофайлы и при этом поддерживает шорткоды.
5. Далее пeреопределяем шаблон content-product.php который в plugins/woocommerce/templates
6. Внутри тега <li> в этом шаблоне отвечающем за вывод товара Пишем код:
$audio_link = get_field('audio_url', $product->id);
if (isset($audio_link)) {
echo do_shortcode("[sortcode audio url = ".$audio_link."]");
}
?>
Вот и все

 

[Seldy]

очень просто можно реализовать.
I вариант для себя, грубо и сердито
1. Через встроенные произвольные поля, к товару добавляем произвольное поле audio_link. запихиваем туда ссылку на аудио файл.
2. Далее пeреопределяем шаблон content-product.php который в plugins/woocommerce/templates
3. Ставим аудио плеер который позволяет проигрывать аудиофайлы и при этом поддерживает шорткоды.
4. Внутри тега <li> в этом шаблоне отвечающем за вывод товара Пишем код:
<?php
$meta_values = get_post_meta($product->id , 'audio_link', true);
if (isset($meta_values)) {
echo do_shortcode("[sortcode audio url = ".$meta_values."]");
}
?>
II Вариант - Для админа или контенщика
1. Устанавливаем плагин ACF
2. Создаем группу произвольных полей, в условиях указываем что нужно только для постов с типом продукт
3. В группе полей выбираем поле файл, обзываем его например "добавить файл аудио превью" ставим чек бокс file URL ярлык поля называем audio_url
4. Ставим аудио плеер который позволяет проигрывать аудиофайлы и при этом поддерживает шорткоды.
5. Далее пeреопределяем шаблон content-product.php который в plugins/woocommerce/templates
6. Внутри тега <li> в этом шаблоне отвечающем за вывод товара Пишем код:
$audio_link = get_field('audio_url', $product->id);
if (isset($audio_link)) {
echo do_shortcode("[sortcode audio url = ".$audio_link."]");
}
?>
Вот и все

Сэр, спасибо за советы.
Так как я не совсем разбираюсь, подскажите,что значит 5 пункт? Имеется ввиду добавить код в шаблон?

 

[Seldy]

Прошу прощение за столь примитивные вопросы))

"Переопределить" это,что значит?
Вместо "sortcode audio url" нужно вставить сам шорткод?

 

[Grollem]

Прошу прощение за столь примитивные вопросы))

"Переопределить" это,что значит?
Вместо "sortcode audio url" нужно вставить сам шорткод?

Переопределить шаблон значит, скопировать файл из plugins/woocommerce/templates, в wp-content/themes/ваша тема/ там создать папку woocommerce и в ее положить тот файл который хотим изменять. В этом случае при обновлении woo наши наработки не слетят.

Вместо "sortcode audio url" нужно вставить сам шорткод?

Ну да.

 

[Seldy]

Переопределить шаблон значит, скопировать файл из plugins/woocommerce/templates, в wp-content/themes/ваша тема/ там создать папку woocommerce и в ее положить тот файл который хотим изменять. В этом случае при обновлении woo наши наработки не слетят.

Ну да.

Понятно теперь!

Скажите еще, как можно сделать, что бы шорткод от плеера запускался при нажатии кнопки (из Visual Composer) с надписью PLAY к примеру, а то после добавления у меня ссылка на шорткод в виде текста из Title плеера. Имеется в виду, что бы при нажатии на кнопку запускался шорткод плеера.

 

[Grollem]

эмм... не очень понятно. Но можно создать скрытый блок Div. Засунуть туда шорткод, создать кнопку, а потом при нажатии на нее открывать скрытый див и скрывать кнопку. Делается за 5 минут

 

[Seldy]

Вот, что у меня сейчас текстом play me запускается воспроизведение.
Если назначаю кнопке href в виде данного шорткода, конечно же не получается ничего.

 

[Seldy]

эмм... не очень понятно. Но можно создать скрытый блок Div. Засунуть туда шорткод, создать кнопку, а потом при нажатии на нее открывать скрытый див и скрывать кнопку. Делается за 5 минут

У плеера есть вид шорткода как раз называется invisible т.е. невидимка на деле ничего не видно =) Но как дальше назначать и куда я не знаю

 

[Seldy]

Вот как выглядит шорткод с функцией невидимый
[fap_playlist id="7" layout="hidden" enqueue="no" playlist_button="" auto_enqueue="no" center="no"]

Вот, заглянул через Гугл-Девелопер:
Скрин

 

[Seldy]

Наверное как выход будет добавление : boarde, background и т.д.
СКРИН

Единственный минус, теперь вместо Title трека пишет в плейлисте PLAY ME , блин!

 

[Seldy]

Вместо слова PLAY ME решил подставить иконку из шаблона, но она как отдельный элемент получается, а не в поле действия с шорткодом СКРИН

шорткод иконки: [icon_list_item type="play"][/icon_list_item]
Возможно ли как то объединить в один элемент все?

Попробовал подставить символ обычный ▶︎ перед Title именно то,что надо!
Но при нажатии вместо запуска воспроизведения выдает "Страница которую вы ищете не найдена".

 

[Grollem]

находите эту картинку, ▶︎ , находите стиль который отвечает за кнопку.
И пишете к нему background: #родной цвет url(путь до картинки ▶︎) no-repeat center 10%;

 

[Grollem]

если не переопределиться еще надо !important дописать

 

[Seldy]

если не переопределиться еще надо !important дописать

Примерно понял))
Попробую реалезовать.
Сппсибо))

 

[Seldy]

Попробовал, не тот эффект какой нужен был, так как данная иконка у меня добавлена 'из панели символов макбука' этой иконки нет в шаблоне сайта.

Я ковырял и нашел причину почему после добавления данной иконки перестает работать воспроизведение.
Вот кусок в который вносится изменения автоматом data-meta="#fap-meta-%e2%96%baplay-me" Автоматом прописывается вот эта часть %e2%96%ba и если удаляю эту часть используя 'Инструменты Разработчика в Хроме' то работает все и иконка остается.

Так выглядит рабочий фрагмент:
target="" data-meta="#fap-meta-play-me" class="fap-track-simple fap-single-track" data-enqueue="no" data-autoenqueue="no">►PLAY ME</a>

Но я не могу сохранить изменения внесенные с помощью 'Инструменты Разработчика' .. подскажите что придумать?

Придумал)) воспользовался символами html ))