Zusätzlicher TAB

GartenFuxx · 3. Mai 2017 um 14:08

Hallo Zusammen,

ich versuche gerade ein neuen eigenen Tab, zB. für techn. Daten anzulegen. Dieser soll auch bei Artikelvarianten funktionieren.

Leider stehe ich irgendwie auf der Leitung. Ich habe versucht der Anleitung:

https://shopwareianer.com/tutorials/shopware5-eigene-tabs-in-der-detail-ansicht

zu folgen.

Zuerst habe ich das Problem, dass ich dem Hinweis

“Hierzu öffnet Ihr die Artikel Grund Einstellungen.
Solltet Ihr noch kein Freitextfeld angelegt haben, habt Ihr bereits 3 vorinstallierte Freitextfelder. Wir möchten aber natürlich unser eigenes – Dazu legen wir ein neues Freitextfeld an mit dem Namen attr4. Als Feldtyp wählen wir den Typ Textarea aus.”

Dies ist gescheitert da ich unter Grund-Einstellungen / Artikel - den Unterpunkt Artikel-Freitextfelder nicht habe.

Ich kann zwar unter Einstellungen - Freitextfeld-Verwaltung das attr4 anlegen und einige Einstellungen vornehmen. Das Feld erscheint dann auch im Backend. Leider verschwindet der Text nach dem Speichern wieder.

Nun soll ich die Datei tabs.tpl in /frontend/detail anlegen. Diese ist aber schon vorhanden. Soll der Cod dann eingefügt weden?

und weiter: " Unter Einstellungen->Textbausteine suchen wir einmal nach dem Feld Newtabsdescription" dies ist bei mir auch nicht vorhanden.

Könnt Ihr mit einen Tip geben, wo ich den Denkfehler habe?

DAnke und Gruß

Stefan

NextMike · 3. Mai 2017 um 14:23

Warum das Feld nach dem Speichern verschwindet? Keine Ahnung. Achte auf die (Fehler)Meldung beim Speichern.

Ansonsten bzgl. .tpl fange ab besten hier an: --> Frontend Guides

Murmeltier · 3. Mai 2017 um 15:37

Also, je nach dem was du für eine Shopware Version einsetzt, ist die Freitextverwaltung auch wo anders. Schau einfach mal unter:

Einstellungen–> Freitext-Verwaltung

Die Datei tabs.tpl legts Du an, so wie beschrieben. Diese Datei dient aber lediglich als „Override“ bzw. Erweiterung der original tabs.tpl Datei. Diese Datei wird aber in Dein Theme Ordner geschmissen, also nicht da, wo Sie schon ist! Wie Du ganz oben siehst, wird damit ja die original Datei erweitert:

{extends file="parent:frontend/detail/tabs.tpl"}

So lange Du das nicht hinkriegts, wird auch in den Textbausteinen der Eintrag " NewTabsDescription " nicht erscheinen, denn dieser wird ja erst mit dieser neuen Datei erstellt.

Murmeltier · 3. Mai 2017 um 15:39

Ach… und lies auch mal noch unten die Kommentare bei dieser Anleitung…

GartenFuxx · 3. Mai 2017 um 16:09

@Murmeltier schrieb:

Also, je nach dem was du für eine Shopware Version einsetzt, ist die Freitextverwaltung auch wo anders. Schau einfach mal unter:

Einstellungen–> Freitext-Verwaltung

Die Datei tabs.tpl legts Du an, so wie beschrieben. Diese Datei dient aber lediglich als „Override“ bzw. Erweiterung der original tabs.tpl Datei. Diese Datei wird aber in Dein Theme Ordner geschmissen, also nicht da, wo Sie schon ist! Wie Du ganz oben siehst, wird damit ja die original Datei erweitert:

{extends file=„parent:frontend/detail/tabs.tpl“}

So lange Du das nicht hinkriegts, wird auch in den Textbausteinen der Eintrag " NewTabsDescription " nicht erscheinen, denn dieser wird ja erst mit dieser neuen Datei erstellt.

Hallo Murmeltier,

danke für den Hinweis. Aktuell nutze ich das Standart-Template welches bei der Erstinstallation angelegt wurde. Kann ich den Code somit auch einfach in die vorhandene tabs.tpl einkopieren? Ich habe ja sonst keine andere.

Den Rest hab ich verstanden.

Danke & Gruss

Stefan

Murmeltier · 3. Mai 2017 um 17:33

Nein, ja nicht! Du könntest das zwar schon machen, aber dann wäre bei einem Update alles futsch. In der Anleitung wird Dir doch erklärt, das Du erst mal eine tabs.tpl anlegen sollst, also lokal bei Dir auf Deinem Rechner. Dies machst Du mit einem Texteditor, vie z.B Notepad, Notepad++ oder Brackets oder eben den Texteditor Deiner Wahl. Dort hinein kommt dann eben folgender Smarty Code:

{extends file="parent:frontend/detail/tabs.tpl"}

{* New tab *}
{block name="frontend_detail_tabs_description" append}
{if $sArticle.attr4}
{s namespace="frontend/detail" name='NewTabsDescription'}{/s}
{/if}
{/block}

{* New Tab container *}
{block name="frontend_detail_tabs_content_description" append}
{if $sArticle.attr4}

{s namespace="frontend/detail" name='NewTabsDescription'}{/s}
{$sArticle.attr4|strip_tags|truncate:100: '...'}{s name="PreviewTextMore"}{/s}
{include file="frontend/detail/tabs/new.tpl"}

{/if}
{/block}

Nach dem Du diese Datei dann gespeichert hast, schmeisst Du sie dann in Deinen Theme Ordner!

Beispiel:

Du hast also eine original tabs.tpl unter:

/themes/Frontend/Bare/frontend/detail

Diese lässt Du bitte wo sie ist und kopierst auch ja nichts rein!

Du musst Deine neue, gerade erstellte tabs.tpl dann hier einfügen:

/themes/Frontend/Responsive/frontend/detail

Aber nur dann, wenn Du auch da Responsive Theme benutzt! Somit erweiterst Du die tabs.tpl Datei aus dem Bare Ordner. Wenn da kein “detail” Ordner ist, dann erstellst Du diesen einfach und wirfst die Datei da rein.

Wenn Du eine Kopie de Responsive Themes gemacht hast (so sollte man es eigentlich auch machen), dann muss es eben da rein:

/themes/Frontend/DEIN-THEME-NAME/frontend/detail

Stell Dir das Bare Theme einfach als Basis des Frontend vor. Dort ist schon alles drin, was dein Theme benötigt. Dort wird am besten nicht rumgefummelt! Wenn Du dann aber was erweitern willst, dann musst Du das eben in Deinem Theme Ordner machen… und die Dateistruktur genau so beibehalten, wie im Bare Theme.

Schau mal noch hier unter “Templating”: Getting started with Shopware templating

Vielleicht wird es ja dann ein wenig klarer?

Viel Erfolg!

sschreier · 3. Mai 2017 um 17:47

Hallo,

Nachtrag zu der Lösung von Murmeltier: append und prepend sollen aufgrund eines Smarty-Bugs nicht mehr verwendet werden, stattdessen soll man {$smarty.block.parent} nutzen. Quelle: Getting started with Shopware templating .

Beste Grüße

Sebastian

Murmeltier · 3. Mai 2017 um 17:51

Ja, da hat er recht…

GartenFuxx · 4. Mai 2017 um 11:11

@Murmeltier schrieb:

Nein, ja nicht! Du könntest das zwar schon machen, aber dann wäre bei einem Update alles futsch. In der Anleitung wird Dir doch erklärt, das Du erst mal eine tabs.tpl anlegen sollst, also lokal bei Dir auf Deinem Rechner. Dies machst Du mit einem Texteditor, vie z.B Notepad, Notepad++ oder Brackets oder eben den Texteditor Deiner Wahl. Dort hinein kommt dann eben folgender Smarty Code:

{extends file=„parent:frontend/detail/tabs.tpl“}

{* New tab *}
{block name=„frontend_detail_tabs_description“ append}
{if $sArticle.attr4}
{s namespace=„frontend/detail“ name=‚NewTabsDescription‘}{/s}
{/if}
{/block}

{* New Tab container *}
{block name=„frontend_detail_tabs_content_description“ append}
{if $sArticle.attr4}

{s namespace=„frontend/detail“ name=‚NewTabsDescription‘}{/s}
{$sArticle.attr4|strip_tags|truncate:100: ‚…‘}{s name=„PreviewTextMore“}{/s}
{include file=„frontend/detail/tabs/new.tpl“}

{/if}
{/block}

Nach dem Du diese Datei dann gespeichert hast, schmeisst Du sie dann in Deinen Theme Ordner!

Beispiel:

Du hast also eine original tabs.tpl unter:

/themes/Frontend/Bare/frontend/detail

Diese lässt Du bitte wo sie ist und kopierst auch ja nichts rein!

Du musst Deine neue, gerade erstellte tabs.tpl dann hier einfügen:

/themes/Frontend/Responsive/frontend/detail

Aber nur dann, wenn Du auch da Responsive Theme benutzt! Somit erweiterst Du die tabs.tpl Datei aus dem Bare Ordner. Wenn da kein „detail“ Ordner ist, dann erstellst Du diesen einfach und wirfst die Datei da rein.

Wenn Du eine Kopie de Responsive Themes gemacht hast (so sollte man es eigentlich auch machen), dann muss es eben da rein:

/themes/Frontend/DEIN-THEME-NAME/frontend/detail

Stell Dir das Bare Theme einfach als Basis des Frontend vor. Dort ist schon alles drin, was dein Theme benötigt. Dort wird am besten nicht rumgefummelt! Wenn Du dann aber was erweitern willst, dann musst Du das eben in Deinem Theme Ordner machen… und die Dateistruktur genau so beibehalten, wie im Bare Theme.

Schau mal noch hier unter „Templating“: https://developers.shopware.com/designers-guide/getting-started/

Vielleicht wird es ja dann ein wenig klarer?

Viel Erfolg!

Hallo Murmeltier,

danke genau das war der entscheidende Hinweis. Das mit dem Anlegen war seit kein Ding. Mir hatte lediglich der Hinweis gefehlt, dass diese Datei in den Ordner

/themes/Frontend/Responsive/frontend/detail

kopiert werden muss. Da war mein Schlauch, auf dem ich gestanden bin. Jetzt sehe ich wieder klar.
Vielen Dank & Gruß

Stefan

Murmeltier · 4. Mai 2017 um 11:32

Super freut mich…

GartenFuxx · 4. Mai 2017 um 14:21

SO nun habe ich alles soweit angelegt und es funktioniert Danke nochmals für.

Aber es besteht nun das Problem, dass der neue Tab nicht neu geladen wird, wenn man einen Variantenartikel wählt

Wenn man eine neue Variante wählt, wird der Tab nicht neu geladen, sondern erst über F5.

Ich habe entsprechend den Kommentaren schon “content–description” in “custom-content–description” getauscht, aber das het keine Abhilfe gebracht.

Wenn man bei einem Varianten Artikel auf dem neuen Tab “Techn. Daten” ist und die Variante ändert, ändert sich der Tab nicht - sondern erst nach drücken der F5 Taste

Hätte da noch jemand einen Tip?

Gruß

Stefan

Murmeltier · 4. Mai 2017 um 14:35

Ja, das ist leider so…, toll ist das nicht. Ich glaube man müsste es wohl mit AJAX nachladen. Vileleicht kann da ja mal jemand von Shopware was dazu sagen…!?

sschreier · 4. Mai 2017 um 14:44

Hallo,

die Tabs werden nunmal von Shopware nicht beim Variantenwechsel über Ajax (den man in der Shopware - Konfiguration auch deaktivieren kann) nachgeladen, das war immer schon so und auch nie anders gedacht gewesen. Es lädt sich immer nur alles über den Tabs bei Variantenwechsel über Ajax nach.

Möchtest du, dass es die Tabs beim Variantenwechsel über Ajax auch nachlädt, musst du dies selbst bei dir implementieren. Es gibt ja ein Ajax-Event, an das du dich per JavaScript “dranhängen” kannst und dann musst du nur noch die entsprechende Funktion implementieren.

Beste Grüße

Sebastian

Murmeltier · 4. Mai 2017 um 15:09

Hast Du da evtl. weitere Infos zu diesem AJAX Event?

Hans_en · 4. Mai 2017 um 15:34

Hallo, warum so kompliziert …?

Hier gibt es 2 fertige und vor allem funktionierende Lösungen…

http://store.shopware.com/scha168252746948/erstellen-von-zusaetzlichen-tabs-eigenschaften-downloads-hersteller-tabs-fuer-artikeldetailseite.html

Erstes benutze ich selbst und kann es nur empfehlen.

Murmeltier · 4. Mai 2017 um 16:01

Klar, kann man auch machen, man kann aber auch mal was selber probieren, anstatt immer gleich für jeden Käse ein neues Plugin zu kaufen. Irgendwann ist dann die Liste der Plugins sehr lange und beim nächsten Update kommen dann die Probleme von ganz allein.

Natürlich ist es mit einem professionellen Plugin sehr einfach und funktioniert wahrscheinlich auch ohne große Probleme. Aber…, das erste Plugin gab mir eigentlich auch schon eine schnelle Lösung für das Problem, denn auch dieses Plugin deaktiviert folgende Einstellung:

Theme Manager > aktives Theme konfigurieren > Konfiguration > „Variantenwechsel über AJAX“ deaktivieren.

Nur so kann auch das Plugin gewährleisten, das die Inhalte der Tabs auch neu geladen werden, weil ja so auch die Seite neu geladen wird. Das ist also jetzt erst mal die Quick and Dirty Methode um das Problem zu beheben.

Murmeltier · 4. Mai 2017 um 16:10

Schöner wäre es natürlich, das ganze via AJAX nachzuladen. Die Datei, die wohl dafür zuständig ist müsste eigentlich diese sein:

/themes/Frontend/Responsive/frontend/_public/src/js/jquery.ajax-variant.js

sschreier · 4. Mai 2017 um 16:48

@Murmeltier schrieb:

Klar, kann man auch machen, man kann aber auch mal was selber probieren, anstatt immer gleich für jeden Käse ein neues Plugin zu kaufen. Irgendwann ist dann die Liste der Plugins sehr lange und beim nächsten Update kommen dann die Probleme von ganz allein.

Natürlich ist es mit einem professionellen Plugin sehr einfach und funktioniert wahrscheinlich auch ohne große Probleme. Aber…, das erste Plugin gab mir eigentlich auch schon eine schnelle Lösung für das Problem, denn auch dieses Plugin deaktiviert folgende Einstellung:

Theme Manager > aktives Theme konfigurieren > Konfiguration > „Variantenwechsel über AJAX“ deaktivieren.

image737×53 4 KB

Nur so kann auch das Plugin gewährleisten, das die Inhalte der Tabs auch neu geladen werden, weil ja so auch die Seite neu geladen wird. Das ist also jetzt erst mal die Quick and Dirty Methode um das Problem zu beheben.

Hallo,

das habe ich aber auch schon bereits oben erwähnt, das man den „Variantenwechsel über Ajax“ ja auch einfach deaktivieren kann, damit die Varianteninhalte immer geladen werden.

Kurz und knapp kann man aber auch sagen: Die Tabs sollen nicht variantenfähig sein. Warum? Weil man nicht einmal für eine Variante einen alternativen Text für den „Beschreibung“ - Tab hinterlegen kann. Es ist also schlichtweg von Shopware gar nicht vorgesehen.

Zum Theme Ajax-Event: du könntest in der Theme.php - Datei eine JavaScript - Datei mit einbinden und dann in der JavaScript - Datei beispielsweise über:

(function($, window) {
    var $window = $(window);

    $(function() {
        $( document ).ajaxComplete(function(){
             /* JavaScript - Code zum Nachladen der Inhalte */
        });
    });
});

die Funktionalität zum Nachladen der Inhalte implementieren .

Zum Thema des „selbst machens“ und der Plugins: die Plugins, beispielsweise das Plugin Weitere Tabs für die Artikel - Detailseiten (Eigene Tabs, Eigenschaften, Downloads, uvm.) | Shopware Store , bieten ja weit mehr Funktionen als nur Tabs über Artikel - Freitextfelder hinzuzufügen (beispielsweise das Darstellens eines Formulars wie das Anfrageformular in einem Tab). Und die Plugins „gewährleisten“ ansich auch durch die Freigabe für eine Shopware Version, dass Sie unter der Version funktionieren - deine Anpassung dagegen kann unter Umständen schon wieder nicht mehr funktionieren, wenn Shopware etwas geändert hat und du bei deiner Anpassung diese Änderung noch nicht berücksichtigt hast (also kann genauso deine Anpassung bei einem Update zu Problemen führen). Und es ist ja immer ein Kosten-Nutzen-Faktor: macht es wirklich Sinn, sich selbst 10 Stunden hinzusetzen, anstatt einfach ein Plugin für einen geringen Preis mit massig Zusatzfunktionen zu kaufen?

Beste Grüße

Sebastian

Murmeltier · 4. Mai 2017 um 17:14

Ich gebe Dir in vielen Sachen recht, aber ich hab ja nur max. 5 Minuten gebraucht um das Tab einzubauen. Eigentlich war es auch nur mal ein Test, weil wohl viele mit dem Tutorial von Shopwareianer Ihre Probleme haben und nach Hilfe schreien. Jetzt gibt es halt leider das nächste Problem mit dem Varianten nachladen, klar. Wenn die Leute aber dann eben das AJAX abschalten, also so, wie es diese Plugins eigentlich auch nur machen! Somit ist doch dann alles erst mal in Butter. Schön wärs aber trotzdem, wenn man noch eine Lösung dafür finden könnte…

mgolec · 8. Januar 2022 um 11:03

Hallo Leute!

Versuche bereits seit Stunden einen neuen TAB hinzuzufügen. Hab anscheinend wieder ein Brett Vor dem Kopf und weiß nicht weiter.

Habe nach dieser Anleitung folgend angefangen:

1.) Freitextfeld hinzugefügt:
Spaltenname: article_schnittdaten
Spaltetyp: HTML Editor - MEDIUMTEXT

2.) Im Notepad++ ein File mit dem Namen tabs.tpl erstellt (Inhalt siehe unten) und dann mit Filezilla in den Ordner /web/themes/Frontend/MeinTheme/frontend/detail/ geladen:

{extends file="parent:frontend/detail/tabs.tpl"}

{* New tab *}
{block name="frontend_detail_tabs_description" append}
{if $sArticle.article_schnittdaten}
{s namespace="frontend/detail" name='NewTabsDescription'}{/s}
{/if}
{/block}

{* New Tab container *}
{block name="frontend_detail_tabs_content_description" append}
{if $sArticle.article_schnittdaten}

{s namespace="frontend/detail" name='NewTabsDescription'}{/s}
{$sArticle.article_schnittdaten|strip_tags|truncate:100: '...'}{s name="PreviewTextMore"}{/s}
{include file="frontend/detail/tabs/custom_tabs.tpl"}

{/if}
{/block}

3.) Im Notepad++ ein File mit dem Namen custom_tabs.tpl erstellt (Inhalt siehe unten) und dann mit Filezilla in den Ordner /web/themes/Frontend/MeinTheme/frontend/detail/tabs geladen:

{namespace name="frontend/detail/tabs/custom_tabs"}

<div class="content--description">
    {* Product description *}
    {block name='frontend_detail_description_text'}
    {/block}
</div>

4.) MeinTheme im Theme Manager neu zugewiesen und Chache entleert

5.) In der Textbaustein Verwaltung nach „NewTabsDescription“ gesucht und den Entsprechenden Wert „Schnittdaten“ hinzugefügt und gespeichert.

6.) nochmal Punkt 4 ausgeführt.

Mein Problem ist, dass hier zwar das entsprechende Freitext-Feld in jedem Artikel problemlos angezeigt wird. Sobald ich einen Text reinschreibe kommt im Frontend bei genau diesem Artikel eine Fehlermeldung, sprich, der Artikel ist nicht mehr aufrufbar. Wenn ich im Backend den Text wieder lösche ist wieder alles normal…

Wäre super wenn mir dazu jemand helfen könnte, sehe den Wald vor Lauter Bäumen nicht gerade:

LG Markus

Thema		Antworten	Aufrufe
Eigene Tabs in der Detail Ansicht Programmierung	15	3725	22. August 2022
Eigene Tabs auf der Produktdetailseite. Themes & Design	2	830	18. April 2016
Zusätzliche Tabs in Artikeldetail werden nicht dargestellt Themes & Design	2	313	10. November 2016
Keine Tabellen in HTML-Freitextfeldern möglich!? Allgemein	8	849	7. Juni 2016
Zusätzlicher Tab beim Artikel Themes & Design	0	481	7. Januar 2016

Zusätzlicher TAB

Verwandte Themen