tfm_product_videos: Produktvideos – 4TFM E-Commerce Agentur

Das Plugin “tfm_product_videos” erlaubt es Ihnen, zu Produkten in Ihrem Onlineshop Videos hochzuladen. Die Videos können entweder in der Lightgallery (vorhanden in den Templates: xt_responsive, ew_evelations, ew_adventury, tfm_manhattan, tfm_jersey) hinzugefügt werden oder weiter unten auf der Produktseite.

Eine Lizenz für das Produktvideo-Plugin für xt:Commerce können Sie in unserem Shop erwerben.

Systemvoraussetzungen

Damit das Plugin “tfm_product_videos” ordnungsgemäß funktioniert, muss Ihr xt:Commerce Shop muss mindestens die Version xt:Commerce 6 haben.

Das Plugin wurde in den Templates xt_responsive, ew_evelations, ew_adventury, tfm_jersey und tfm_manhattan getestet. Die Implementierung in anderen Templates ist möglich, jedoch können Themes ohne Bilder-Gallery nicht alle Funktionen nutzen.

Installation

Installieren Sie das Plugin wie gewohnt in Ihrem Shop. Eine detaillierte Anleitung zur xt:Commerce Plugin Installation finden Sie hier.

Öffnen Sie nach der Plugininstallation die Plugin-Konfiguration, die Sie in Ihrem Shop-Backend unter “Plugins => Installierte Plugins => tfm_product_videos(bearbeiten)” finden.

Hier aktivieren Sie das Plugin zunächst generell mit der Option “Plugin-Status” und “Für Mandant aktivieren”.

Pluginoptionen

Option	Erklärung	Standartwert
Für Mandant aktivieren	Option, um das Plugin für den Mandanten zu aktivieren	true
Upload Pfad	Pfad unter dem die Videos hochgeladen werden	/media/videos
Max. Upload Größe (MB)	Maximale Dateigröße in Mb.Hinweis: Die Größe des Uploads kann auch durch Ihre Servereinstellungen begrenzt sein
Erlaubte Dateitypen (kommasepariert)	Dateitypen, welche hochgeladen werden können.	mp4
Videos in Lightgallery anzeigen	true = in Lightgallery anzeigenfalse = nicht anzeigen
Videos unten auf Produktseite anzeigen	true = anzeigenfalse = nicht anzeigen

Anlegen von Videos

Um ein Video in Ihren Shop hochzuladen, navigieren Sie im Backend über das linke Menü zum Punkt “Shop” -> “Produktvideos”.

In der sich dort öffnenden Übersicht können Sie nun über einen Klick auf die Schaltfläche “Neu” ein Video anlegen.

Hier können Sie mithilfe des Knopfes “Video URL oder Upload” ein Fenster öffnen, in dem Sie entweder das Video hochladen oder eine Video URL zu Youtube bzw. Vimeo einfügen.

Zusätzlich können Sie dem Video einen Namen (Titel) und eine Beschreibung geben (empfohlen für die Videoeinbindung unten auf der Produktseite).

Speichern Sie abschließend Ihre Änderungen.

Zuweisen von Videos

Um ein Video einem Produkt zuzuweisen, navigieren Sie im Backend über das linke Menü zum Punkt “Shop” -> “Artikel”.

In der sich dort öffnenden Übersicht sehen Sie nun Ihre Produkte. Klicken Sie auf das Produkt, dem Sie ein Video zuweisen wollen.

Scrollen Sie auf der Seite nach unten. In der Button-Zeile über “Speichern” und “Übernehmen” gibt es einen Knopf mit der Beschriftung “Produktvideos”. Mit einem Klick auf diesen öffnen Sie die Videozuweisung.

Dort sehen Sie die bereits zugewiesenen sowie die noch nicht zugewiesenen Videos.

Die Videozuweisung funktioniert exakt wie die Bildzuweisung. Sie können hier ebenfalls die Reihenfolge der Videos festlegen.

Speichern Sie abschließend Ihre Änderungen.

Einfügen des Hooks für die Lightgallery Funktion

Mit dem Einfügen der Zeile {hook key=tfm_product_videos} können Sie die Anzeige der Videos in der Lightgallery realisieren.

Dafür müssen Sie in Ihrem Template in der product.html (im Shopverzeichnis unter “/xtCore/pages/product/”).

In den Templates xt_responsive, ew_evelations und ew_adventury muss die Zeile “{hook key=tfm_product_videos}” hinter die Smarty-Abfrage von den more_images.

Bei den Themes tfm_manhattan und tfm_jersey muss der Code unten in das Javascript der Lightgallery.

Folgend ein jeweiliges Beispiel für jedes xtCommerce und 4TFM Template, wo die Zeile in der product.html eingefügt werden muss.

xt_responsive

{if $more_images && $more_images|@count != 0}
<div class="col col-md-2 col-md-pull-10">
<div class="more-images row listing equalize-nothing">

{foreach name=aussen key=index item=img_data from=$more_images}
<figure class="section col{if $index > 3} hidden{/if}{if $index == 3 && $more_images|count > 4} show-more{/if} col-xs-3 col-md-12"><a class="vertical-helper image-link text-center img-thumbnail" href="{img img=$img_data.file type=m_org path_only=true}">
<img decoding="async" class="productImageBorder img-responsive" title="{if $img_data.data.media_name}{$img_data.data.media_name|escape:'html'}{else}{$products_name|escape:'html'}{/if}{if $img_data.data.copyright_holder} © {$img_data.data.copyright_holder}{/if}" src="{img img=$img_data.file type=m_thumb path_only=true}" alt="{if $img_data.data.media_name}{$img_data.data.media_name|escape:'html'}{else}{$products_name|escape:'html'}{/if}{if $img_data.data.copyright_holder} © {$img_data.data.copyright_holder}{/if}" width="auto" height="auto" />
</a></figure>
{/foreach}

</div>
</div>
{/if}
{hook key=tfm_product_videos}

ew_evelations

{if $more_images && $more_images|@count != 0}
<div class="more-images row listing hidden-affix">{foreach name=aussen item=img_data from=$more_images key=index}
{if $smarty.foreach.aussen.index != 0}
<figure class="col section col-md-3 col-xs-2"><a class="vertical-helper img-thumbnail image-link text-center" href="{img img=$img_data.file type=m_org path_only=true}">
<img decoding="async" class="productImageBorder img-responsive" title="{if $img_data.data.media_name}{$img_data.data.media_name|escape:'html'}{else}{$products_name|escape:'html'}{/if}{if $img_data.data.copyright_holder} © {$img_data.data.copyright_holder}{/if}" src="{img img=$img_data.file type=m_ewevelationsinfo path_only=true}" alt="{if $img_data.data.media_name}{$img_data.data.media_name|escape:'html'}{else}{$products_name|escape:'html'}{/if}{if $img_data.data.copyright_holder} © {$img_data.data.copyright_holder}{/if}" />
</a></figure>
{/if}
{/foreach}

</div>
{/if}
{hook key=tfm_product_videos}

ew_adventury

{if $more_images && $more_images|@count != 0}
<div class="more-images row listing hidden-affix">{foreach name=aussen item=img_data from=$more_images key=index}
{if $smarty.foreach.aussen.index != 0}
<figure class="col section col-md-3 col-xs-2"><a class="vertical-helper image-link text-center" href="{img img=$img_data.file type=m_org path_only=true}">
<img decoding="async" class="productImageBorder img-responsive" title="{if $img_data.data.media_name}{$img_data.data.media_name|escape:'html'}{else}{$products_name|escape:'html'}{/if}{if $img_data.data.copyright_holder} © {$img_data.data.copyright_holder}{/if}" src="{img img=$img_data.file type=m_ewadventuryinfo path_only=true}" alt="{if $img_data.data.media_name}{$img_data.data.media_name|escape:'html'}{else}{$products_name|escape:'html'}{/if}{if $img_data.data.copyright_holder} © {$img_data.data.copyright_holder}{/if}" />
</a></figure>
{/if}
{/foreach}

</div>
{/if}
{hook key=tfm_product_videos}

tfm_manhattan

{foreach name=aussen item=img_data from=$more_images}
{literal}
{
{/literal}
"src":"{img img=$img_data.file type=m_org path_only=true}",
"thumb":"{img img=$img_data.file type=m_thumb path_only=true}",
"sub-html":"",
"mobileSrc":"{img img=$img_data.file type=m_popup path_only=true}"
{literal}
},
{/literal}
{/foreach}
{hook key=tfm_product_videos}

tfm_jersey

{foreach name=aussen item=img_data from=$more_images}
{literal}
{
{/literal}
"src":"{img img=$img_data.file type=m_org path_only=true}",
"thumb":"{img img=$img_data.file type=m_thumb path_only=true}",
"sub-html":"",
"mobileSrc":"{img img=$img_data.file type=m_popup path_only=true}"
{literal}
},
{/literal}
{/foreach}
{hook key=tfm_product_videos}