• Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

Аудио Превью товара (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 с определенной песней для прослушивания. В общем я понимаю, что нужно, но не знаю как это реализовать :(:(:(
 
Последнее редактирование:

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

Новичок
эмм... не очень понятно. Но можно создать скрытый блок 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%;
 

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 ))
 
Последнее редактирование:
Сверху Снизу