Isotope Template für Produkt-Details anpassen

Hallo Leute,

befasse mich zum ersten Mal mit Isotope und möchte die Produkt-Detailseite anpassen.

In der Beschreibung soll es möglich sein, Inhalte per Tabs / Reiter aufzurufen.
Hier ein Beispiel (mit London, Paris, Tokio): https://www.w3schools.com/howto/howto_js_tabs.asp

Bei mir sollen die Tabs / Reiter lauten:

- Beschreibung
- Spezifikation
- Pflegehinweise


Meine Überlegung wäre auch, mit den Contao-Accordeons zu arbeiten, aber wie bringt man im Contao BA bei der Produktbeschreibung das Accordeon aktiviert?
Welches Template müsste man wie dazu anpassen?


Hier ein weiteres Beispiel:
Anhang 25188

Quelle: http://cc.isotope.premium-contao-the.../home-382.html

Wie lässt sich die Produkt-Detailseite so anpassen?

Hat mittlerweile jemand eine Lösung für dafür gefunden?

Hallo,
du musst von dem Modul Produktleser das Template " iso_reader_default.html5" bearbeiten.
Das Template findest du auf der Linken Seite unter LAYOUT -> TEMPLATES
Anschließend musst du im Modul Produktleser das Template zuweisen.

In dieses Template muss du dann deine Tabs integrieren.

Und was muß ich da eintragen, wenn ich mal bei dem Beispiel bleib hier von
https://www.w3schools.com/howto/howto_js_tabs.asp

HTML-Code:

---

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

---

Wenn also auf einer anderen Seite dieses Template benutzt werden soll mit weiteren Tabs wie BERLIN PRAG ROM ?


Mit was müssten im Template die hier rot markierten Dinge ersetzt werden?

<button class="tablinks" onclick="openCity(event, 'London')">London</button>

<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

Na du musst erstmal das Tab in das Template einbauen.

Und dann hängt das davon ab wie du dein Isotop (Attribute) konfigurierst bzw. erstellst.
Es ist schwer zu sagen was du da jetzt eintragen sollst, weil ja jeder seinen Shop anders aufbaut und andere Attribute und Attribute-namen verwendet.

Nur als Info. Isotope ist kein fertiges Shop System, sondern man muss sich aus den einzelnen Modulen den Shop zusammenbauen. Die Flexibilität die Isotope mitbringt, ist das man im Backend auch seine Eingabe Felder selber bestimmen kann, genauso wie die Ausgabe im Frontend, also quasi das was du möchtest. Nur um das zu verstehen.

Aber noch mal kurz zu deiner Frage.

Nehmen wir mal an es würden 3 Tabs (Beschreibung | Eigenschaften | Versandkosten) geben. Dann würde das in etwa so aussehen. du trägst in das Template die Attribute ein, die du für dich erstellst. Diese werden dann im Frontend ausgeben/angezeigt.

PHP-Code:

---

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">Beschreibung</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Eigenschaften</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Versandkosten</button>
</div>

<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3><?php echo $this->generateAttribute('Produktname'); ?></h3>
  <p><?php echo $this->generateAttribute('produkt_beschreibung'); ?></p>
</div>

<div id="Paris" class="tabcontent">
  <h3><?php echo $this->generateAttribute('name_eigenschaften'); ?></h3>
  <p><?php echo $this->generateAttribute('Produkt_eigenschaften'); ?></p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3><?php echo $this->generateAttribute('name_versand'); ?></h3>
  <p><?php echo $this->generateAttribute('versandkosten'); ?>.</p>
</div>

---

Hallo,
du kannst auch Tabs, etc. als Inhaltselemente auf einer Unterseite generieren und mit Insert-Tag bei der Produktbeschreibung bzw. Template den Artikel oder einzelne Inhaltselemente einfügen ({{insert_article::ID}}).
Für verschiedene Inhalte bei den Produkten habe ich den Artikeln mit den Beschreibungen den selben Alias wie den Produktalias gegeben und im Template mit dem Insert-Tag {{insert_article::{{product::alias}}}} eingebunden. Somit holt sich der Produktreader immer den richtigen Beschreibungstext.
Sicher nicht die schönste Lösung, für meine Zwecke genügt es aber.

FG Simon