Gleiche Templatehöhe der Produkauftlistung bei 2- und 3-spaltiger Artikellistung

[XXL-Webdesign]

Hallo liebe Community...

Nach stundenlangem recherchieren und rumprobieren usw. bin ich zu der Erkenntnis gekommen, dass es schieinbar keine "optimale" Lösung für das Höhenproblem unterschiedlich hoher Artikelboxen gibt, außer der Möglichkeit, die Höhe auf ein Maximum hoch zu setzen. Das hilft beim XTC5 vielleicht so einigermaßen - nicht aber bei anderen Shop-Templates. Die Lösung ist auch nicht wirklich schön, aber halt einfach umzusetzen.

Habe auch schon folgendes Thema durch, wo dies häufig angesprochen wird aber nie richtig gelöst wurde:
http://www.modified-shop.org/forum/index.php?topic=4336.360
Leider kommt diese Lösung für mich nicht in Frage, da die Boxhöhe immer unterschiedlich sein kann.
Teilweise bis zu 50% Unterschied - je nach Kurzbeschreibung bzw. Bild.

Falls es dennoch eine Lösung gibt, habe ich diese nur noch nicht gefunden oder nicht nach dem richtigen Thema gesucht. In dem Fall bitte ich um einen kurzen Link...

Kommen wir mal zu meiner Vermutung:
Das Problem sehe ich in der "foreach" Schleife.
Man müsste für die ganzen Block mit zwei (bzw. drei) Artikeln nebeneinander ein DIV anlegen mit einer relativen Positionierung oder höhenangabe oder was auch immer... Was letzetenendes ließe sich schon noch raus bekommen.
Lösungsansatz z.B. hier:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Dazu müsste ich aber herausbekommen, wie man die Produkte einzeln anspricht, sodass ich eine foreach-Schleife mit zwei Produkten schreiben kann.

Für die die nocht nicht verstanden habe, was ich meine mal eine vereinfachte Code-Darstellung des Problems (oder einfach mal die Screenshots betrachten):

Code: PHP  [Auswählen]

<!-- aus diesem Quelltext... -->
foreach($Product[]) {
  <table>
    <tr>
      <td> PRODUKT[i] </td>
    </tr>
  </table>
}

<!-- ... wird folgender Quelltext generiert: -->

<!-- Hinweis: Jedes Produkt wird neben das letzte gepackt, nach 3 Produkten (in diesem Beispiel) kommt eine neue Zeile -->
<table>
  <tr>
    <td> PRODUKT[1] </td>
  </tr>
</table>

<table>
  <tr>
    <td> PRODUKT[2] </td>
  </tr>
</table>

<table>
  <tr>
    <td> PRODUKT[3] </td>
  </tr>
</table>

[Reihe 2]

<table>
  <tr>
    <td> PRODUKT[4] </td>
  </tr>
</table>

<table>
  <tr>
    <td> PRODUKT[5] </td>
  </tr>
</table>

<table>
  <tr>
    <td> PRODUKT[6] </td>
  </tr>
</table>
 

Hier weiß keine Tabelle die Höhe von der anderen Tabelle.
Das ganze lässt sich natürlich auch mit divs machen statt mit Tabellen...

Anders wäre es, wenn man die foreach Schleife so umbauen könnte, dass man (in diesem Beispiel) drei Spalten nebeneinander in EINE Tabelle (oder ein Div) packt und dann sich dann alle an der max. höhe orientieren.

Code: PHP  [Auswählen]

<tabele>
  <tr>
    <td> Produkt[1] </td>
    <td> Produkt[2] </td>
    <td> Produkt[3] </td>
  </tr>
</table>

<tabele>
  <tr>
    <td> Produkt[4] </td>
    <td> Produkt[5] </td>
    <td> Produkt[6] </td>
  </tr>
</table>

So würden alle Produkte in einer Reihe die gleiche Höhe haben.
Nur wie setzt man das um?

Aus...

Code: PHP  [Auswählen]

{foreach name=aussen item=module_data from=$module_content}

... kann ich leider nicht erkennen wie ich z.B. Produkt[1] und Produkt[2] usw. in den Quellcode integrieren kann.

Aus der "foreach..." müsste man dann nur noch fix ne "for (i=1; i>=anzahl($Produkte[]); i+3) {...}"
machen und dann sollte es funktionieren.
Ich komme nur mit der Smarty und der Syntax bzw. den Parametern nicht klar. In reinem PHP würd ich mich wohl zurecht finden, aber hier leider nicht so richtig. Hat jemand ne Idee?

Baue dann auch gern ne fix und fertige Austausch-Datei für's XTX5 Template daraus und poste diese hier...

Gruß,
Tobi

Linkback: https://www.modified-shop.org/forum/index.php?topic=24798.0

[noRiddle (revilonetz)]

Wenn du gleich hohe Boxen möchtest bleibt dir eigtl. nur truncate zu benutzen (mal mit "Smarty truncate" die Suchmaschine deines Vertrauens bemühen).
Du mußt dann je nach Template den Boxen eine fixe Höhe geben und evtl. auch Unter-Containern für Kurzbeschreibung-, Preis- und Button-Segment.
Beispiel aus der /templates/DEIN_TEMPLATE/module/product_listing/product_listing.html:

Code: PHP  [Auswählen]

{$module_data.PRODUCTS_SHORT_DESCRIPTION|truncate:200:"...":false}

Damit wird die Kurzbeschreibung nach hier z.B. 200 Zeichen abgeschnitten und drei Punkte als Indiz für eine Fortsetzung des Textes gesetzt (Achtung: Auch Leerzeichen und Zeilenumbrüche zählen).

Will sagen, das Problem ist ja gelöst wie man an vielen Beispielshops sehen kann (z.B. hier).

Gruß,
noRiddle

[XXL-Webdesign]

So weit war ich bereits...
Das löst aber nicht das Problem, sondern umgeht das ganze nur mit einem Trick.

Nach wie vor habe ich Artikelkurzbeschreibungen die sehr kurz sind und andere die länger sind. Das andere Problem sind die Bildergrößen, die variabel sind.
Klar... sich an der maximalen Höhe zu orientieren ist einfacher, aber das löst das Problem nicht.
Auch löst Truncate das Problem nicht, wenn man viele einzelne Stichpunkte darstellt mit max. 1-2 kurzen Wörtern, da ggf. 8-10 Zeilenumbrüche mit enthalten sind.
Das ist nicht wirklich ne saubere Lösung.

Wie schon gesagt, mit PHP allein wärs kein Problem.
Aber dank Smarty kann ich das nicht selbst und vor allem alleine umsetzen.
Daher denke ich nach wie vor, dass es hier ein paar Spezialisten geben sollte, die mir auf die Sprünge helfen könnten um das Problem letztenendes so zu lösen wie oben vorgeschlagen. Also mit ner Art "for (i=1;i<=anzProd;i+2)" Schleife...

[Matt]

Wenn man aber eh dabei ist, das aufzuräumen, sollte man die Layouttabellen gleich rauswerfen. Die haben da nichts verloren.

[hedon02]

Versuch z.B. mal folgendes:

Code: XML  [Auswählen]

<div class="rowwrap">
  {foreach name=aussen item=module_data from=$module_content}
  <ul class="productPreview">
    <li></li>
  </ul>
{*<!--nach jedem 3.Element oder dem letzten .rowwrap schliessen-->*}
{if $smarty.foreach.aussen.iteration is div by 3 || $smarty.foreach.aussen.last}
</div>{/if}
{*<!--und falls es nicht das letzte Element ist, wieder öffnen-->*}
{if $smarty.foreach.aussen.iteration is div by 3 and !$smarty.foreach.aussen.last}
<div class="rowwrap">{/if}
{/foreach}

Kann man sicher noch schöner machen, aber sollte funktionieren.

Gruss

Edit: Code geä.