tfm_product_videos

Das Plugin “tfm_product_videos” erlaubt es Ihnen zu Produkten in Ihren 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.

Screenshots

Backend

xt_responsive

ew_evelations

ew_adventury

Systemvoraussetzungen

Damit das Plugin “tfm_product_videos” ordnungsgemäß funktioniert, muss

das xt:Commerce Plugin “tfm_announcement_bar” in Ihrem Shop installiert & aktiviert sein.
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 Lightgallery nicht alle Funktionen nutzen.

Installation

Installieren Sie das Plugin wie gewohnt in Ihrem Shop, eine detaillierte Anleitung zur Plugin Installation finden Sie hier.

Nach der Plugininstallation, öffnen Sie die Plugin-Konfiguration, welche 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 anzeigen false = nicht anzeigen
Videos unten auf Produktseite anzeigen	true = anzeigen false = nicht anzeigen

Anlegen von Videos

Um ein Video in Ihren Shop hochzuladen, navigieren Sie über das 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” eine Video anlegen.

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

Zusätzlich können Sie dem Video ein 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 über das Backend über das linke Menü zum Punkt “Shop” -> “Artikel”.

In der sich dort öffnenden Übersicht können Sie nun Ihre Produkte sehen. Klicken Sie auf das Produkt, wo 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 einen Klick auf diesen Öffnen Sie die Videozuweisung.

Dort sehen Sie die bereits zugewiesenen Videos, 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 Ihren Template in der product.html (im Shopverzeichnis unter “/xtCore/pages/product/”).

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

Bei den tfm_manhattan & tfm_jersey Theme 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}

Changelog

Version	Release date	Changes
1.0.0	29.06.23	Release-Version des Plugins