handbuch - webweit

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
www.webweit.net
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
www.webweit.net
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
© webweit 2013
• Standard Vorschaubild mit Hinweis
5
www.webweit.net
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
www.webweit.net
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
www.webweit.net
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
www.webweit.net
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
www.webweit.net
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
www.webweit.net
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
www.webweit.net
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 JavascriptBibliothek 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
www.webweit.net
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
$(‘#wrap
$(‘#wrap
$(‘#wrap
a img’).unbind(‘load’);
a img’).attr(‘src’, $this.attr(‘rev’));
.mousetrap’).unbind();
.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
www.webweit.net
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.1});cursor: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.1});cursor:pointer”></a>
{else}
<a title=”{$sArticle.articleName}” class=”bundleImg” style=”background-image: url(../../resource/images/no_picture.jpg);cursor:pointer”></a>
{/if}
</div>
{/if}
{/foreach}
</div>
{* 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>
{* 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>
{/if}
{/block}
© webweit 2013
14
www.webweit.net
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 [email protected]
Gerne nehmen wir auch Ideen oder
Verbesserungsvorschläge entgegen.
© webweit 2013
15
www.webweit.net
VideoPlus
Shopware Video-Plugin
[email protected]
www.webweit.net

Download Report