Youtube Video Tabs in Shopware 5

Wer bei seinen Produkten ein Youtube Video einbinden möchte und das am besten per Extra-Tab, ist hier richtig.

Meine Erklärung basiert auf zwei How To´s:

Einmal das von HOSTIANER, der klasse Shopware 5 Template Codes Tipps  hat.

Shopware 5 eigene Tabs in der Detail-Ansicht

Und das von avexdesign.

Responsive Youtube embed

How To Youtube Video Tab in Shopware 5:

Als erstes legen wir nach Hostianer Erklärung das Freitextfeld an, was ihr unter den Shopware Backend in den Grundeinstellungen – Artikel- Artikel-Freitextfelder findet.

Shopware-5-freitextfeld

Shopware 5 hat im Standard 3 Freifelder als Vorlage drin. Wir erstellen nun Feld nummer 4. Solltet ihr schon Felder angelegt haben, müsst ihr natürlich die Nummer vom Feld im Code-Bereich anpassen.

Nun zu den Template Dateien:

 

In euren Template Ordner unter /frontend/detail legt ihr nun die Datei tabs.tpl an mit folgendem Inhalt.

Hier habe ich die Funktion des Textkürzer entfernt. „|truncate:100:’…'“ denn wir wollen ja nicht, dass bei der Responsiv-Version der Code vom Youtube Video gekürzt wird.

 

 

Danach legt Ihr im Ordner unter /frontend/detail/tabs folgende Datei an new.tpl

In dieser Datei müsst ihr folgendes noch hinzufügen:

Nun fügt man noch bei {$sArticle.attr4} was hinzu, das sieht dann so aus.

<div class=“video-container“>{$sArticle.attr4}</div>

Also noch ein Extra Div Container mit den Namen video-container, damit wir später diesen in der Less Datei (CSS) anpassen können an responsiv.

Nun zur all.less Datei von euren Template: Dort baut ihr folgenden CSS Code ein aus den avexdesign how to..

Mit diesem CSS Code wird der embedded Code von Youtube responsiv. (Die .tab–preview einträge sind für die Responsiv Version vom Template).

Nach dem Template Cache leeren, sollte nun das Feld erscheinen mit den Namen Newtabsdescription. (Ihr solltet natürlich schon einen Artikel haben, wo ihr ein Youtube Embedded Code ins Zusatzfeld kopiert.)

Um das Feld neue Tab Feld Newtabsdescription umzubenennen, müsst ihr einfach nach diesem Feld suchen im Shopware Backend unter der Grundeinstellung -> Textbausteine.

Das war es. Nun habt ihr einen Extra Tab für eure Videos von Youtube & Co und dazu noch responsiv.

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu. Mehr Information findest Du in meiner Datenschutzbestimmung.