Product Listing 4 Artikel / Zeile

[Biwakscharte]

Hallo Community,

ich stehe am Abgrund der Verzweiflung und hoffe das Ihr mich erleuchten könnt.
Ich möchte im product_listing 4 Artikel / Zeile darstellen.

Der Aufbau ist so:

Code: PHP  [Auswählen]

<div class="row">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
 

Das ganze steckt nun in der foreach-Schleife. Allerdings soll ja das <div class="row"> nur vor jedem 1ten Artikel geöffnet und nach jedem 4ten Artikel geschlossen werden.

Ok kein Problem, das habe ich mittels Php hingebogen (Code unten im Anhang.)
Allerdings habe ich nun das folgende Problem, dass wenn beispielsweise nur 3 oder 6 Artikel etc. vorhanden sind, dass div nicht geschlossen wird.

Wie kann ich es lösen, dass das div nach jedem 4ten Artikel geschlossen wird, aber auch dann wenn eine Zeile nur noch 2 Artikel hat?

Anbei mein Code:

Code: PHP  [Auswählen]

<div id="product_listing">
        {php}
                $i = 1;
        {/php}
        {foreach name=aussen item=module_data from=$module_content}
                {php}
                        if($i == 1){
                                echo '<div class="product_row">';              
                        }
                {/php}
                <div class="product_container">
                        <a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME|truncate:50:"...":true}">
                                {if $module_data.PRODUCTS_IMAGE}
                                        <div class="image" style="background-image:url({$module_data.PRODUCTS_IMAGE});">
                                                <img src="{$tpl_path}/images/pixel_trans.gif" width="150" height="150" alt="{$module_data.PRODUCTS_NAME|truncate:50:"...":true}" />
                                        </div> 
                        {/if}
                                <span class="name">{$module_data.PRODUCTS_NAME|truncate:76:"...":true}</span>
                               
                                <div class="price">
                                        <span class="content">{$module_data.PRODUCTS_PRICE}</span>
                                        {php}/*<small>statt xxx</small>*/{/php}
                                        {if $MODULE_graduated_price !=''}<span>{$MODULE_graduated_price}</span>{/if}
                                        <span class="clearboth"></span>
                                </div>
                                <div class="short_description">
                                        <span>
                                                {if $module_data.PRODUCTS_SHORT_DESCRIPTION}
                                        {$module_data.PRODUCTS_SHORT_DESCRIPTION|strip_tags|truncate:85:"..."}{else}{$module_data.PRODUCTS_DESCRIPTION|strip_tags|truncate:38:"..."}
                                {/if}
                                        </span>
                                </div>
                        </a>
                </div>
                {php}
                        if($i % 4 == 0){
                                echo '<span class="clearboth"></span></div>';
                                $i = 0;
                        }else{
                                $i++;}
                {/php}
        {/foreach}
</div>
 

Vielen Dank für eure Hilfe bin gespannt was die Php Cracks dazu sagen

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

[Biwakscharte]

Kann mir den bei dem Schleifen Problem keiner Helfen? Ich muss iwie die Länge des Arrays abfragen und anschließend dann mit if abfragen, ob die foreach Schleife das letzte mal gelaufen ist und dann falls das div offen ist es wieder schließen. Ich weiß aber nicht wie ich auf die Länge des Arrays zugreifen kann...

[h-h-h]

Code: Smarty  [Auswählen]

<div id="product_listing">
{foreach name=aussen item=module_data from=$module_content}
  {if ($smarty.foreach.aussen.iteration-1) %4 == 0 || $smarty.foreach.aussen.first}
  <div class="product_row">
  {/if}
    <div class="product_container">
      <a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME|truncate:50:"...":true}">
        {if $module_data.PRODUCTS_IMAGE}
        <div class="image" style="background-image:url({$module_data.PRODUCTS_IMAGE});">
          <img src="{$tpl_path}/images/pixel_trans.gif" width="150" height="150" alt="{$module_data.PRODUCTS_NAME|truncate:50:"...":true}" />
        </div>
        {/if}
        <span class="name">{$module_data.PRODUCTS_NAME|truncate:76:"...":true}</span>
        <div class="price">
          <span class="content">{$module_data.PRODUCTS_PRICE}</span>
          {*<small>statt xxx</small>*}
          {if $MODULE_graduated_price !=''}<span>{$MODULE_graduated_price}</span>{/if}
          <span class="clearboth"></span>
        </div>
        <div class="short_description">
          <span>
          {if $module_data.PRODUCTS_SHORT_DESCRIPTION}
            {$module_data.PRODUCTS_SHORT_DESCRIPTION|strip_tags|truncate:85:"..."}{else}{$module_data.PRODUCTS_DESCRIPTION|strip_tags|truncate:38:"..."}
          {/if}
          </span>
        </div>
      </a>
    </div>
  {if $smarty.foreach.aussen.iteration %4 == 0 || $smarty.foreach.aussen.last}
    <span class="clearboth"></span>
  </div>
  {/if}
{/foreach}
</div>

Ungetestet und ohne {php}  bitte genau lesen und verstehen.

Besten Gruß

h-h-h

[web0null]

Du brauchst gar keine schleife die 4 Artikel in einen Container wrapt.

Dein <div id="content"> hat doch normalerweise eine feste Breite!?

Dann kannst du einfach per css den <div class="article"> so etwas in der art geben:

Code: CSS  [Auswählen]

#product_listing .article {
    float: left;
    width: 24.9%;
}
 

Gruß web0null

[h-h-h]

Vergiss die Höhe welche durch Produktbeschreibung und Bild variieren könnte nicht. 
Die Methode mit dem großem <a um den kompletten Artikel herum ist sicherlich nicht valide.

Besten Gruß

h-h-h

[Biwakscharte]

Danke h-h-h

funktioniert bestens. Leider verstehe ich das ganze noch nicht genau.

Code: PHP  [Auswählen]

{if ($smarty.foreach.aussen.iteration-1) %4 == 0 || $smarty.foreach.aussen.first}

Was ist dieses berühmte "aussen", dass liest man ja öfter. Ist .first ein Befehl von Smarty für den ersten Datensatz? Sry aber ich bin in Smarty noch nicht so bewandert... vielleicht findest du ne ruhige Minute um den Code kurz zu erläutern

@web0null

Danke für deine Antwort. Den Container brauche ich aber schon, um später mit einem Selektor wie :last-child etc. den letzten Container (Zeile) anzusprechen und dieser margin-bottom auf 0 zu setzen etc. Hätte ich diesen Container nicht würde das ganze ja so aussehen:

Produkt
Produkt
Produkt
...

Dann müsste ich es wieder so regeln, dass die letzten 4 Produkte eine andere Klasse bekommen, damit ich ihnen ihr margin-bottom nehmen kann.

[h-h-h]

Hallo,
'aussen' ist der 'name' von dem umschließenden {foreach}.
Dies wird für die Zuordnung benötigt, da auch Schleifen in Schleifen vorkommen können.
Sehr gut erklärt ist es hier:
http://www.smarty.net/docsv2/de/language.function.foreach.tpl

Besten Gruß

h-h-h

[web0null]

Verstehe ich nicht, das macht doch nichts wenn die letzte Zeile(Artikel) ein margin-bottom hat.
Oder hast du so ein "Millimeter" genaues Design?

Ich habe z. B. einen Ansichts-Switch, wo ich mir 1-6 Artikel in der reihe Anzeigen lassen kann, und das wird nur über css gesteuert.

Aber das kannst eh nur du selber wissen, wie du es brauchst.

Gruß web0null

[Biwakscharte]

Hi h-h-h,

vielen Dank für die Erklärung, jetzt verstehe ich das ganze. Ich hatte mir die Smarty Dokumentation bereits davor angesehen. Dabei habe ich anscheinend übersehen, dass ich das ganze mit Smarty lösen kann.

Hi web0null,

Naja ich habe kein "Millimeter" genaues Design. Versuche aber so genau zu arbeiten wie möglich und nur da ein margin etc. zu platzieren, wo es sinnvoll bzw. notwendig ist.

Also nochmals Problem ist gelöst! Vielen Dank an alle !

[Biwakscharte]

Hi Leute, jetzt muss ich doch noch einmal nachfragen ob jemand auch schon mal ein ähnliches Problem hatte.

Das Listing ist jetzt soweit angepasst und funktioniert auch in allen Browsern wie erwünscht, bis auf den IE7 (komisch immer der IE wie macht er das bloß ).

Naja auf jeden Fall sieht die Struktur so aus:

<div class="product_row">

<div class="product_container first"></div>
<div class="product_container"></div>
<div class="product_container"></div>
<div class="product_container"></div>

</div>

So alle product_container haben ein margin-left von 30px.
Der product_container mit der Klasse first hat ein margin-left von 0px.

Der IE7 stellt aber zusätzlich das margin-left vom 2ten Container nicht da, obwohl alle Werte im css stimmen...

hier mal ein Link bitte im IE7 anschauen.

http://test.biwakscharte.de/Wintersport/Splitboard/Splitboards:::192_147_931.html

[mhbosch]

Hallo biwakscharte,

ich finde dein Template wirklich ansprechend. Aber wieso arbeitest du nicht mit einer Produktansicht. Da due feste Breiten hast kannst du die ohne Probleme floaten. Damit wäre der Code mE eher wiederverwendbar.

Oder habe ich einen Denkfehler?

vg,

mhbosch

[mhbosch]

Ach ja,

du hast da noch Fehler drin *flöt*
Wenn du mehr Infos beim Hover anzeigst, kommst du mit den 272px nicht aus (zB).

vg,

mhbosch

P.S.: Und da ich mich etwas damit beschäftigt habe, dein Piwik Tracker ist nicht optimal eingestellt. Es wird kein Array der Ordnerstruktur übermittelt und keine Preise

[Biwakscharte]

Hi mhbosch,

Piwik wird noch demnächst von mir entfernt. Deshalb kann ich diesen Fehler beruhigt lassen aber vielen Dank für deine Info. Wie meinst du das, wieso ich nicht mit einer Produktansicht arbeite?

[mhbosch]

Hi,

na ja, du arbeitest mit einer Produktreihe, dann mit dem ersten Element, floatest 3 Elemente und machst einen Clear. Du kannst "einfach" nur ein Element nehmen, und floatest alle hintereinander. Ist sehr viel weniger Quellcode und eine Änderung wirkt sich auf alle Elemente aus.

Das ist mE sehr viel übersichtlicher.

vg,

mhbosch

P.S.: Kommst du wirklich aus Burghausen, oder machst du nur das Design und Dir gehört der Shop nicht? Meine Familie väterlicherseits kommt nämlich von da

[Biwakscharte]

Also weniger Code ist es schon, aber meine Änderungen wirken sich auch auf alles aus, da jeder Produkt Container ja seine eigene Klasse besitzt.

Was mich brennend interessieren würde ist, wie ich den IE 7 dazu bringe, das margin zwischen den ersten beiden Container darzustellen...

PS: Ich nicht direkt aus Burghausen aber aus der Umgebung. Ich bin zuständig für den kompletten Shop was technisches und Layout betrifft. Bin aber nicht der Eigentümer.