VideoPlus Shopware Video-Plugin Handbuch
VideoPLUS SHOPWARE PlugIn
Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg. Plugin Konfiguration 05 Einfügen von Videos bei Artikel-Bildern 06 Einfügen von Videos in Artikelfließtext 10 Verwenden von Videos in Links für Text oder Bilder 11 VideoPlus für Agenturen/Template-Entwickler 12 Anhang A Javascript Template 13 Anhang B Thumbnail Template 14 webweit 2013 3
Wo erhalte ich den Code des von mir gewünschten Videos YouTube Öffnen Sie die Youtube Webseite (http://www.youtube.com) und öffnen Sie das von Ihnen gewünschte Video. Die Adresszeile Ihres Browsers zeigt dann einen Link ähnlich dem Folgenden: http://www.youtube.com/watch?v=tyeq8tquq1i Der Video-Code ist die Zeichenfolge hinter?v=, in diesem Falle Tyeq8tquq1I. MyVideo Öffnen Sie die MyVideo Webseite (http://www.myvideo.de) und öffnen Sie das von Ihnen gewünschte Video. Die Adresszeile Ihres Browsers zeigt dann einen Link ähnlich dem Folgenden: http://www.myvideo.de/watch/607912/mondlandung Der Video-Code ist die Ziffernfolge zwischen watch/ und dem Namen des Videos, in diesem Falle 607912. vimeo Öffnen Sie die vimeo Webseite (https://vimeo.com) und öffnen Sie das von Ihnen gewünschte Video. Die Adresszeile Ihres Browsers zeigt dann einen Link ähnlich dem Folgenden: http://vimeo.com/4366695 Der Video-Code ist die Ziffernfolge nach vimeo.com/, in diesem Falle 4366695. Sevenload Öffnen Sie die Sevenload Webseite (http://www.sevenload.com) und öffnen Sie das von Ihnen gewünschte Video. Die Adresszeile Ihres Browsers zeigt dann einen Link ähnlich dem Folgenden: http://www.sevenload.com/videos/flug-uber-l-dot-a-511521295a1cb35c41000fc2 Der Video-Code ist die Zeichenfolge aus Buchstaben und Zahlen nach dem letzten -, in diesem Falle 511521295a1cb35c41000fc2. Yahoo! Screen Öffnen Sie die Yahoo! Screen Webseite (http://screen.yahoo.com) und öffnen Sie das von Ihnen gewünschte Video. Die Adresszeile Ihres Browsers zeigt dann einen Link ähnlich dem Folgenden: http://screen.yahoo.com/gorgeous-ultra-slow-motion-hd-170105423.html Der Video-Code ist der gesamte Abschnitt nach yahoo.com/, in diesem Falle gorgeous-ultra-slow-motion-hd-170105423.html. Netzr Öffnen Sie die Netzr Webseite (http://www.netzr.de) und öffnen Sie das von Ihnen gewünschte Video. Die Adresszeile Ihres Browsers zeigt dann einen Link ähnlich dem Folgenden: http://netzr.de/videos/24/big-buck-bunny-zeichentrickfilm/ Der Video-Code ist die Ziffer zwischen videos/ und dem Titel des Videos, in diesem Falle 24. webweit 2013 4
Allg. Plugin Konfiguration Die allgemeine Plugin-Konfiguration bietet die Möglichkeit, eigene Bilder für die Vorschau und ein Symbol für Play zu definieren. Sind dort die Haken für Standard-Vorschau für Videos ohne Bild benutzen bzw. Standard-Play-Bild benutzen -benutzen gesetzt, werden die unten angezeigten Bilder verwendet. Standard Vorschaubild Standard Vorschaubild mit Hinweis webweit 2013 5
Einfügen von Videos bei Artikel-Bildern Videos anlegen VideoPlus erweitert die Tabs der Artikel um einen weiteren Tab Videos. Hier können Videos für Artikel hinterlegt, geändert und gelöscht werden. Ohne hinterlegte Videos zeigt sich der Tab wie folgt: Zum Anlegen eines Videos geben Sie die Daten des Videos in das Infofenster ein und klicken Sie auf Speichern. Für die Anzeige des Videos kann hier für jedes Video ein eigenes Bild verwendet werden, wird das Feld leer gelassen werden die Standard-Bilder des Plugins verwendet. webweit 2013 6
Einfügen von Videos bei Artikel-Bildern Anzeige Varianten Für die Anzeige der Videos gibt es 2 Varianten, Inline oder Overlay : Anzeige als Inline-Video Anzeige als Overlay webweit 2013 7
Einfügen von Videos bei Artikel-Bildern verwalten & anordnen Die dem Artikel zugeordneten Videos werden rechts in der Listenansicht, ähnlich wie Artikelbilder, angezeigt. Um ein Video zu bearbeiten, klicken Sie auf den Button bearbeiten unterhalb des gewünschten Videos. Um die Reihenfolge zu bearbeiten, können Sie die Videos mit der Maus per Drag & Drop in die gewünschte Reihenfolge bringen. webweit 2013 8
Einfügen von Videos bei Artikel-Bildern mehrsprachiger Shop Sollten Sie einen mehrsprachigen Shop führen können Sie jedem Video das für die entsprechende Sprache passende Video zuordnen und den Titel übersetzen. Hinweis: Bitte beachten Sie, das die Änderungen an den Videos erst beim Speichern des Artikels gesichert werden. Sollten Sie die Änderungen nicht speichern wollen schließen Sie einfach das Artikelfenster. webweit 2013 9
Einfügen von Videos in ArtikelflieSStext Codeabschnitt für Standard-Einbindung: {VIDEOPORTAL}VIDEO_CODE{/VIDEOPORTAL} Beispiel: {youtube}tyeq8tquq1i{/youtube} Codeabschnitt für Angabe mit Breite und Höhe: {VIDEOPORTAL}VIDEO_CODE BREITE HÖHE{/VIDEOPORTAL} Beispiel: {youtube}tyeq8tquq1i 320 240{/youtube} Die folgenden Videoportale können im Fließtext verlinkt werden: youtube myvideo vimeo sevenload yahoo netzr Hinweis: Achten Sie bitte bei der Eingabe des Codeabschnitts darauf, das Videoportal immer mit Kleinbuchstaben zu schreiben! webweit 2013 10
Verwenden von Videos in Links für Text oder Bilder Möchten Sie ein Video in einem Text-Link oder Bild-Link verwenden, müssen Sie den gleichen Codeabschnitt wie für die Standard-Einbindung im Fließtext als Link URL angeben. Hinweis: Das verlinkte Video wird, analog zur Funktion Overlay bei Artikelvideos auf der Artikelseite in einem modalen Fenster geöffnet, der Benutzer wird nicht von Ihrem Shop weg auf das Videoportal geleitet. webweit 2013 11
VideoPlus für Agenturen UND Template-Entwickler Sie möchten VideoPlus als Agentur oder Entwickler für eigene Templates nutzen? VideoPlus erweitert das Standard-Shopware Template und ergänzt Javascript für die Anzeige der Overlay-Fenster und der Videos als Erweiterung für Artikelbilder. Diese Template-Erweiterungen können im Plugin deaktiviert werden: Je nachdem in welchem Umfang Änderungen notwendig sind, können Sie selektiv die Javascript- Bibliothek für das Modale Fenster, das Javascript für das Handling und das Standard-Template für die Anzeige der Thumbnails deaktivieren und durch eigene Templates ersetzen. Den Code für die von VideoPlus Standardmäßig verwendeten Templates befindet Sich im Anhang dieses Dokuments, dort können die verwendeten Variablen für eigene Templates entnommen werden. webweit 2013 12
Anhang A Javascript Template {block name= frontend_index_header_javascript append} <script type= text/javascript > //<![CDATA[ {literal} function web_video_openmodal(content) { $.simplemodal(content, { close: true, escclose: true, overlayclose: true, opacity: 30, overlaycss: { background: none repeat scroll 0 0 #555555 }, containercss : { box-shadow : 0 0 15px #666666, padding: 10px, background: white }, closehtml: <div id= lbcloser style= display: none; position:absolute; top: 0px; right: -12px; ></div>, onclose: function(d) { $( #web-video-frame ).attr( src, ); $.simplemodal.close(); }, onopen: function(d) { var win = $(window); var operafix = window.opera && (document.compatmode == CSS1Compat ) && ($.browser.version >= 9.3); var middle = (operafix? documentelement.clientheight : win.height()) / 2; var center = win.width()/2; var centerheight = 480; var centerwidth = 640; var resizeduration= 400; var resizeeasing= swing ; var top = Math.max(0, middle - (centerheight / 2)); d.container.css({top: middle - 60, left: center - 40, width:80, height: 120 d.overlay.show(); d.container.show(); } } d.container.animate({ height : centerheight, top : top }, resizeduration, resizeeasing, function() { d.container.animate({ width : centerwidth, left : center - centerwidth/2 }, resizeduration, resizeeasing, function() { d.data.show(); $( #simplemodal-container #lbcloser ).delay(300).show(); $(document).ready(function() { if (navigator.appname == Microsoft Internet Explorer ) { $(.thumb_box a ).click(function(e) { $( #wrap ).find( iframe ).attr( src, ); $( #wrap a ).click(function(e) { var activevideothumb = $(.thumb_box.active.web-video-thumb-overlay ); if (activevideothumb.length > 0) { e.preventdefault(); } } var video_src = activevideothumb.attr( rel ); var iframedata = $( <iframe id= web-video-frame width= 640 height= 480 frameborder= 0 allowfullscreen scrolling= no ></iframe> ); iframedata.attr( src, video_src); web_video_openmodal(iframedata); $(.web-video-link ).click(function(e) { e.preventdefault(); e.stoppropagation(); var iframe = $( <iframe width= 640 height= 480 frameborder= 0 allowfullscreen scrolling= no ></iframe> ); iframe.attr( src, $(this).attr( href )); web_video_openmodal(iframe); $(.web-video-thumb-inline ).click(function(e) { e.preventdefault(); e.stoppropagation(); var wrap = $( #wrap ); var wrap_width = wrap.width(); var wrap_height = wrap.height(); var $this = $(this); var video_src = $this.attr( rel ); $( #wrap a img ).unbind( load ); $( #wrap a img ).attr( src, $this.attr( rev )); $( #wrap.mousetrap ).unbind(); $( #wrap.mousetrap ).css({ background: none, widh: wrap_width, height: wrap_height var iframe = $( <iframe id= web-video-frame-inline width= + wrap_width + height= + wrap_height + frameborder= 0 allowfullscreen scrolling= no ></iframe> ); iframe.attr( src, video_src); $( #wrap.mousetrap ).html(iframe); $( #wrap.mousetrap ).click(function(e) { e.preventdefault(); e.stoppropagation(); $(.web-video-thumb-overlay ).click(function(e) { e.preventdefault(); e.stoppropagation(); var wrap = $( #wrap ); var wrapper = wrap.parent(); var s = $(this); var video_src = s.attr( rel ); $( #wrap.mousetrap ).html( ); $( #wrap a img ).attr( src, ); $( #wrap a img ).attr( src, s.attr( rev )); $( #wrap.mousetrap ).unbind(); $( #wrap.mousetrap ).on( click, { src : video_src }, function(e) { e.preventdefault(); e.stoppropagation(); var iframedata = $( <iframe id= web-video-frame width= 640 height= 480 frameborder= 0 allowfullscreen scrolling= no ></iframe> ); iframedata.attr( src, e.data.src); web_video_openmodal(iframedata); $( #wrap a img ).load( function() { var wrap_width = $( #wrap a img ).width(); var wrap_height = $( #wrap a img ).height(); wrap.css( width, wrap_width); wrap.css( height, wrap_height); $( #wrap.mousetrap ).css( cursor, pointer ); ); } if (s.hasclass( web-video-thumb-hint )) { var bg_x = wrap_width/2-146/2; var bg_y = wrap_height/2-146/2; var hint_url = s.find( img ).attr( rel ); $( #wrap.mousetrap ).css({ background: url( + hint_url + ) no-repeat scroll 0 0, width: wrap_width, height: wrap_height } else { $( #wrap.mousetrap ).css({ background: none, width: wrap_width, height: wrap_height } {/literal} //]]> </script> {/block} webweit 2013 13
Anhang B {block name= frontend_detail_image_thumbs } {* Main picture *} <div id= img_1_{$sarticle.ordernumber} class= displaynone > {if $sarticle.image.src.1} <a title= {$sarticle.articlename} class= bundleimg style= background-image: url({$sarticle.image.src.1cursor:pointer ></a> {else} <a title= {$sarticle.articlename} class= bundleimg style= background-image: url(../../resource/images/no_picture.jpg);cursor:pointer ></a> {/if} {foreach from=$sarticle.images item=sarticleimage} {if $sarticleimage.relations} <div id= img_1_{$sarticleimage.relations} class= displaynone > {if $sarticleimage.src.1} <a title= {$sarticle.articlename} class= bundleimg style= background-image: url({$sarticleimage.src.1cursor:pointer ></a> {else} <a title= {$sarticle.articlename} class= bundleimg style= background-image: url(../../resource/images/no_picture.jpg);cursor:pointer ></a> {/if} </div> {/if} </div> {/foreach} {* Variant picture *} {*if $sarticle.image.res.relations} <div id= img{$sarticle.image.res.relations} style= display:none > <a href= {$sarticle.image.src.5} title= {if $sarticle.image.res.description}{$sarticle.image.res.description}{else}{$sarticle.articlename}{/if} > <img src= {$sarticle.image.src.4} alt= {$sarticle.articlename} border= 0 title= {if $sarticle.image.res.description}{$sarticle.image.res.description}{else}{$sarticle.articlename}{/if} /> </a> </div> {/if*} {* Thumbnails *} {if $sarticle.images $sarticlevideos} <div class= space > </div> <div class= thumb_box > {if $sarticle.image.src.4} <a href= {$sarticle.image.src.5} title= {if $sarticle.image.res.description}{$sarticle.image.res.description}{else}{$sarticle.articlename}{/if} style= background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sarticle.image.src.1 {if {config name=susezoomplus}}class= cloud-zoom-gallery {/if} rev= {$sarticle.image.src.4} > </a> {/if} {foreach from=$sarticle.images item=sarticleimage} {if $sarticleimage.relations} {* Main picture variant *} <div id= img{$sarticleimage.relations} class= displaynone > <a rel= lightbox[{$sarticleimage.relations}] {if {config name=susezoomplus}}class= cloud-zoom-gallery {/if} href= {$sarticleimage.src.5} title= {if $sarticleimage.res.description}{$sarticleimage.res.description}{else}{$sarticle.articlename}{/if} > <img src= {$sarticleimage.src.4} title= {if $sarticleimage.res.description}{$sarticleimage.res.description}{else}{$sarticle.articlename}{/if} /> </a> </div> {/if} {/block} {* Thumbnail variant *} <a id= thumb{$sarticleimage.relations} href= {$sarticleimage.src.5} title= {if $sarticleimage.res.description}{$sarticleimage.res.description}{else}{$sarticle.articlename}{/if} rev= {$sarticleimage.src.4} {if {config name=susezoomplus}}class= cloud-zoom-gallery {/if} style= background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sarticleimage.src.1 > </a> {else} <a href= {$sarticleimage.src.5} title= {if $sarticleimage.res.description}{$sarticleimage.res.description}{else}{$sarticle.articlename}{/if} rev= {$sarticleimage.src.4} {if {config name=susezoomplus}}class= cloud-zoom-gallery {/if} style= background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sarticleimage.src.1 > </a> {/if} {/foreach} {foreach from=$sarticlevideos item=sarticlevideo} <a href= {$sarticlevideo->getsrc(5)} title= {$sarticlevideo->gettitle()} rev= {$sarticlevideo->getsrc(4)} rel= {$sarticlevideo->getlink()} class= {if $sarticlevideo->getoverlay()}web-video-thumb-overlay{else}web-video-thumb-inline{/if}{if $sarticlevideo->gethint()} web-video-thumb-hint{/if} style= background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url({$sarticlevideo->getsrc(1) > {if $sarticlevideo->gethint()}<img style= margin:-5px; src= {$sarticlevideo->gethintsrc(1)} rel= {$sarticlevideo->gethintsrc(4)} />{/if} </a> {/foreach} <div class= clear > </div> </div> <div class= clear > </div> webweit 2013 14
Vielen Dank, dass Sie sich für unser Plugin entschieden haben! Sollten Sie weitere Informationen oder individuelle Weiterentwicklungen benötigen oder Fragen zu VideoPlus haben, wenden Sie sich an shopware@webweit.net Gerne nehmen wir auch Ideen oder Verbesserungsvorschläge entgegen. webweit 2013 15
VideoPlus Shopware Video-Plugin shopware@webweit.net