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.
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 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.
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.