Edit File: audios.tpl
{** block-description:tns_title_audio **} {if $product.audios} <div class="music-player-list" id="audio-player-{$product.product_id}"> <div class="ttw-music-player"> <div class="jPlayer-container"></div> <div class="player jp-interface"> <div class="album-cover"> <span class="img" style="opacity: 1;"> <img alt=""> </span> <span class="highlight"></span> </div> <div class="track-info"> <p class="title"></p> <p class="artist-outer" style="opacity: 1;">By <span class="artist">...</span></p> <div class="rating"></div> </div> <div class="player-controls"> <div class="main"> <div class="previous jp-previous"></div> <div class="play jp-play" style="display: block;"></div> <div class="pause jp-pause" style="display: none;"></div> <div class="next jp-next"></div> <!-- These controls aren't used by this plugin, but jPlayer seems to require that they exist --> <span class="unused-controls"> <span class="jp-video-play" style="display: none;"></span> <span class="jp-stop"></span> <span class="jp-mute"></span> <span class="jp-unmute" style="display: none;"></span> <span class="jp-volume-bar"></span> <span class="jp-volume-bar-value" style="width: 80%;"></span> <span class="jp-volume-max"></span> <span class="jp-current-time">00:02</span> <span class="jp-duration">04:17</span> <span class="jp-full-screen"></span> <span class="jp-restore-screen" style="display: none;"></span> <span class="jp-repeat"></span> <span class="jp-repeat-off"style="display: none;"></span> <span class="jp-gui"></span> </span> </div> <div class="progress-wrapper jp-progress"> <div class="progress jp-seek-bar" style="width: 100%;"> <div class="elapsed jp-play-bar" style="width: 0;"></div> </div> </div> </div> </div> <div class="tracklist"> <ol class="tracks"> {foreach from=$product.audios item="audio" name="audios"} {assign var="obj_id" value=$audio.product_id} {include file="common/product_data.tpl" product=$audio but_role="big" but_text=__("add_to_cart")} {assign var="price" value="price_`$obj_id`"} {include file="common/image.tpl" images=$audio.main_pair capture_image=true} <li class="track" data-title="{$audio.product}" data-url="{"audios.file_preview?product_id=`$audio.product_id`"|fn_url nofilter}" data-rating="{$audio.average_rating|default:$audio.discussion.average_rating|default:0}" data-artist="{$audio.artist}" data-cover="{$smarty.capture.icon_image_path}" > {assign var="form_open" value="form_open_`$obj_id`"} {$smarty.capture.$form_open nofilter} <div class="title"> <i style="margin-top: -2px; vertical-align: middle;" class="fa fa-play"></i> <i style="margin-top: -2px; vertical-align: middle;" class="fa fa-pause"></i> <span>{$audio.product}</span> </div> <div style="display: none;" class="artist">{$audio.artist}</div> <div class="duration">{$audio.audio_file.sample_duration|format_duration}</div> <div class="rating"> {include file="addons/tns/components/audio_rating.tpl" product=$audio} </div> <div class="price">{include file="common/price.tpl" value=$audio.price}</div> {*<a href="http://tns.local/index.php?dispatch=products.view&product_id=21" class="buy"*} {*target="_blank">$17 BUY</a>*} {include file="buttons/add_to_cart.tpl" but_text=$smarty.capture.but_text|strip_tags|html_entity_decode but_id="button_cart_`$obj_prefix``$obj_id`" but_name="dispatch[checkout.add..`$obj_id`]" obj_id=$obj_id product=$audio but_meta=$add_to_cart_meta} {assign var="form_close" value="form_close_`$obj_id`"} {$smarty.capture.$form_close nofilter} </li> {/foreach} </ol> </div> </div> <!--audio-player-{$product.product_id}--></div> <script type="text/javascript"> {literal} jQuery(document).ready(function ($) { $('.music-player-list').each(function() { var jwrap = $(this), jtracks = jwrap.find('.tracklist .tracks'), jcontrols = jwrap.find('.player-controls') , jplayer = jwrap.find('.jPlayer-container'), jinfo = jwrap.find('.player.jp-interface'); if (jtracks.find('.track').length == 0) return ; jplayer.jPlayer({ swfPath: "jquery-jplayer", supplied: "mp3", cssSelectorAncestor: '.jp-interface', errorAlerts: false, warningAlerts: false, ready: function() { jtracks.find('.track .title').on('click', function() { var jtrack = $(this).closest('.track'); if (jtrack.hasClass('playing')) { jplayer.jPlayer('pause'); jtrack.removeClass('playing'); } else { jplayer.jPlayer('setMedia', { 'mp3': jtrack.data('url') }); if (jtrack.data('cover')) { jinfo.find('.album-cover img').attr('src', jtrack.data('cover')); } jinfo.find('.track-info .title').text(jtrack.data('title')); jinfo.find('.track-info .artist').text(jtrack.data('artist')); jinfo.find('.track-info .rating').html(jtrack.find('.rating').html()); jtrack.siblings('.playing').removeClass('playing'); jtrack.addClass('playing'); jplayer.jPlayer('play'); } }); jcontrols.find('.jp-previous').on('click', function() { if (jtracks.find('.playing').prev().length) { jtracks.find('.playing').prev().find('.title').trigger('click'); } }); jcontrols.find('.jp-next').on('click', function() { if (jtracks.find('.playing').next().length) { jtracks.find('.playing').next().find('.title').trigger('click'); } }); // trigger first click jtracks.find('.track:eq(0)').find('.title').trigger('click'); } }); }); // $('.music-player-list').ttwMusicPlayer(myPlaylist, { // currencySymbol:'$', // buyText:'BUY', // tracksToShow:20, // ratingCallback:function(index, playlistItem, rating){ // //some logic to process the rating, perhaps through an ajax call // }, // jPlayer:{ // swfPath:'http://www.jplayer.org/2.1.0/js' // }, // autoPlay:true // }); }); {/literal} </script> {/if}
Back to File Manager