Einfache Kleinanzeigen, Layout fürs Frontend

[Liebei]

Hallo miteinander,

ich bin grad dabei einen einfachen Kleinanzeigenmarkt mit dem efg zu erstellen. Das Formular für's Frontend ist schon fertig, die Daten werden auch gespeichert. Mein Problem ist jetzt allerdings, wie ich die Anzeige der Daten im Template so Layouten kann, dass alles so angezeigt wird wie ich das gerne hätte. Hab dazu mal ein Bild mit angehängt wie es ausschauen sollte.

anzeige.jpg

Das Frontend schaut im Moment so aus:

anzeige_2.jpg

Dachte mir, daß ich das per Grid Layoute und das Bild sollte 300 px breit sein und beim Klicken vergrößert werden.

Nachdem ich nun aber nicht der php Profi bin hab ich jetzt das Problem, daß ich im Template zwar eingrenzen konnte, was die Datenausgabe im Frontende steuert, aber nicht soweit ändern, daß mein gewünschtes Ergebnis angezeigt wird!

Vielleicht kann mir jemand helfen wie ich den folgenden Code ändern muß, wäre echt Super!!!

<?php foreach ($this->listItems as $item => $fields): $intField = -1; ?>
<?php foreach ($fields as $field): $intField++; ?>
<?php if ($intField == 0): ?>
<div class="harmonikas <?php echo $field['record_class']; ?>">
<?php endif; ?>
<div class="inserat <?php echo $field['class']; ?>">
<?php if ($field['type']=='file' && $field['multiple']): ?>
<?php foreach ($field['content'] as $file): ?>
<?php if ($file['display']=='image'): ?><img src="<?php echo TL_FILES_URL . \Image::get($file['src'], 80, null); ?>" alt="<?php echo urldecode(basename($file['src'])); ?>" title="<?php echo urldecode(basename($file['src'])); ?>"> <?php else: ?><img src="<?php echo $file['icon']; ?>" alt="<?php echo $file['linkTitle']; ?>">&nbsp;<a href="<?php echo $file['href']; ?>"><?php echo $file['linkTitle'] . $file['size']; ?></a><?php endif; ?>
<?php endforeach; ?>
<?php elseif ($field['type']=='file' && $field['src']): ?><?php if ($field['display']=='image'): ?><img src="<?php echo TL_FILES_URL . \Image::get($field['src'], 80, null); ?>" alt="<?php echo urldecode(basename($field['src'])); ?>" title="<?php echo urldecode(basename($field['src'])); ?>"> <?php else: ?><img src="<?php echo $field['icon']; ?>" alt="<?php echo $field['linkTitle']; ?>">&nbsp;<a href="<?php echo $field['href']; ?>"><?php echo $field['linkTitle'] . $field['size']; ?></a><?php endif; ?>
<?php else: ?><?php echo $field['content']; ?>
<?php endif; ?>

</div>
<?php endforeach; ?>

[korlbeu]

wieso willste das denn übers template machen??? mach das doch über css entweder mit floating oder mit einem grid....beim grid musst du dann nur die entsprechenden grid klassen in dein template eintragen

[Liebei]

Ganz einfach, weil die foreach Schleife durchlaufen wird und ich nicht für jedes Element eine eigene Klasse vergeben kann und keinen Einfluß auf die Reihenfolge der Ausgabe hab.

[fivebytes]

Hallo Jürgen,

Du kannst die for-each.-Schleife umgehen und die Felder direkt ansprechen:

$fields['betreff']['content']

Wobei Du Dir am besten innerhalb der Schleife mal erst das gesamte Array ausgeben lässt, damit hast Du dann einen guten Überblick, welche Daten Dir zur Verfügung stehen.

<pre>print_r($this->listItems)</pre>

Ach so und vorsichtig, evtl. ja nur ein Fehler beim Einkopieren, aber in Deinem Codeausschnitt fehlen am Ende min. zwei Zeilen:

</div> 
<?php endforeach; ?>

So wie Du den Teil ausgeschnitten hast, wäre er unvollständig und würde Fehler auswerfen.

[Liebei]

Hallo Stefan,

erstmal danke, das mit dem einzeln ansprechen hab ich schon, aber wie lese ich dann alle anzeigen aus, da muß doch eine Schleife durchlaufen werden bis alle Inserate aufgelistet sind, oder?

Vor allem brauch ich jetzt mal einen guten komprimierten Einstieg in php, kannst mir da was empfehlen?

[aadursun]

@Jürgen

Deine Lösung, wie die einzelnen Elemente innerhalb einer Schleife zu layouten wären, würde mich auch sehr interessieren.

VG
aadursun

[fivebytes]

Hier mal ein Templateauszug, mit dem ich Kleinanzeigen auf Basis EFG realisiert habe:

<?php foreach ($this->listItems as $item => $fields): $intField = -1; ?>
<a name="pos-<?php echo $fields['alias']['content']; ?>"></a>
<div class="anzeige">
	<div class="anzeige-betreff">
		<?php
		$tmpBetreff = $fields['betreff']['content'];
		if ($tmpBetreff == "-") $tmpBetreff = $fields['betreff-frei']['content'];
		?>
		<h3 class="hoch"><?php echo $tmpBetreff; ?></h3>
	</div>
	<div class="anzeige-kopf text-grau">
		<span class="anzeige-datum"><?php echo $this->parseDate("d.m.Y H:i",$fields['datum-eintrag']['content']); ?></span>
		<span class="anzeige-ablauf"><?php echo $this->parseDate("d.m.Y",$fields['ablaufdatum']['content']); ?></span>
		<span class="anzeige-nutzer"><?php echo ($fields['vorname']['content']) ? $fields['vorname']['content']. " " : ""; echo $fields['name']['content']; ?>, 
		<?php echo $fields['email']['content']; ?></span>
		<span class="anzeige-ort"><?php echo $fields['plz']['content'] . " " . $fields['ort']['content']; ?><?php if ($fields['land']['raw']) echo ", " . $fields['land']['content']; ?></span>
	</div>
	
	<div class="anzeige-text">
		<?php if($fields['bilddatei']['raw']): ?>
		<?php $tmpBildtitel = ($fields['bildtitel']['raw']) ? $fields['bildtitel']['content'] : $tmpBetreff; ?>
		<figure class="image_container float_right">
			<a href="<?php echo $fields['bilddatei']['raw']; ?>" data-lightbox="f6e0b1-<?php echo $fields['date']['id']; ?>" title="<?php echo $tmpBildtitel; ?>">
				{{image::<?php echo $fields['bilddatei']['raw']; ?>?width=200&alt=<?php echo htmlspecialchars($tmpBildtitel); ?>}}
			</a>
		</figure>
		<?php endif; ?>
		<p><?php echo $fields['nachricht']['content']; ?></p>
	</div>
	
	<?php if(($this->details) || ($this->arrEditAllowed[$fields['date']['id']]) || ($this->arrDeleteAllowed[$fields['date']['id']]) || ($this->arrExportAllowed[$fields['date']['id']])): ?>
	<div class="anzeige-edit"><ul>
	
	<?php if ($this->arrExportAllowed[$fields['date']['id']]): ?>
	<li class="fd_export"><a href="<?php echo $fields['date']['link_export']; ?>" class="fd_export" title="<?php echo $this->textlink_export[1]; ?>"><?php echo $this->textlink_export[0]; ?></a></li>
	<?php endif; ?>
	<?php if ($this->arrDeleteAllowed[$fields['date']['id']]): ?>
	<li class="fd_delete"><a href="<?php echo $fields['date']['link_delete']; ?>" class="fd_delete" onclick="if (!confirm('<?php echo $this->text_confirmDelete; ?>')) return false;" title="<?php echo $this->textlink_delete[1]; ?>"><?php echo $this->textlink_delete[0]; ?></a></li>
	<?php endif; ?>
	<?php if ($this->arrEditAllowed[$fields['date']['id']]): ?>
	<li class="fd_edit"><a href="<?php echo $fields['date']['link_edit']; ?>" class="fd_edit" title="<?php echo $this->textlink_edit[1]; ?>"><?php echo $this->textlink_edit[0]; ?></a></li>
	<?php endif; ?>
	<?php if($this->details): ?>
	<li class="fd_info"><a href="<?php echo $fields['date']['link_details']; ?>" class="fd_info" title="<?php echo $this->textlink_details[1]; ?>"><?php echo $this->textlink_details[0]; ?></a></li>
	<?php endif; ?>
	</ul></div>
	<?php endif; ?>
</div>
<?php endforeach; ?>

[Liebei]

Servus Stefan,

vielen Dank für den Code, ich denke der hilft mir weiter, eine Frage hab ich allerdings dazu, nachdem ich gesehen hab, daß Du ein Feld "ablaufdatum" hast.

Wie machst Du das mit dem Ablaufdatum?

Ich hätte gerne, daß die Anzeigen eine Laufzeit von 30 oder 60 Tagen haben und danach automatisch rausfallen. Vor allem soll der Inserent ja nur die Laufzeit der Tage auswählen und dann das Datum dazu automatisch gesetzt werden.

Beste Grüße

[fivebytes]

Hi,

das Ablaufdatum ist ein verstecktes Feld welches ich per Script befülle:

<script>
$('ctrl_21').addEvent('change',function() {
	if ( this.get("value") > 31 ) this.value = 31;
	if ( !this.get("value") ) this.value = 7;
	setNewDate ( this.get("value") );
});

window.addEvent('domready', function() {
	checkAblauf ();
});

var heute = new Date();
var ablauf = "";

function checkAblauf ()
{
	var tmpCheckAblauf = document.getElementsByName("ablaufdatum")[0].value;
	var tmpCheckAblaufTage = Math.round ( (tmpCheckAblauf - heute.getTime()/1000) / 24 / 60 / 60 );
	
	if ( tmpCheckAblauf != "" )
	{
		if ( tmpCheckAblaufTage > 7 )
		{
			document.getElementById("ctrl_21").value = tmpCheckAblaufTage;
			document.getElementById("ctrl_21").readOnly = true;
			document.getElementById("ctrl_21").style.backgroundColor = "#ebebeb";
		}
	}
	else
	{
		setNewDate ( 14 );
	}
}

function setNewDate ( tageplus )
{
	if ( tageplus > 31 ) tageplus = 31;
	ablauf = new Date(heute.getTime() + (tageplus * 24 * 60 * 60 * 1000));
	document.getElementsByName("ablaufdatum")[0].value = parseInt(ablauf.getTime()/1000);
}
</script>

Bei mir dürfen die Anzeigen eine Laufzeit von bis zu 31 Tagen haben (neben dem versteckten Feld "ablaufdatum", gibt es noch ein Feld "dauer", welches vom Nutzer ausgefüllt wird) und angemeldete Mitglieder können Ihre Anzeigen ab 7 Tage vor Ablauf erneut verlängern. Damit die Anzeigen nach Ablauf nicht auf der Webseite auftauchen habe ich folgende Bedingung ins Modul gesetzt:
ablaufdatum >= unix_timestamp(now())
und sortiert wird nach
ablaufdatum

Damit verschwinden die Einträge natürlich noch nicht aus der DB, aber das war in meinem Falle auch nicht nötig. Ab und zu lösche ich die per Hand einfach über das BackEnd. Außerdem weiß ich noch nicht, ob ich evtl. für registrierte Mitglieder eine Möglichkeit schaffe, die eigenen Anzeigen (auch alte/abgelaufene) in einem Archiv zur Verfügung zu stellen.

Aber grundsätzlich ließe sich das natürlich auch komplett automatisieren. Mittels Hook (z.B. bei Seitenaufruf der Anzeigenseite) könnte man die abgelaufenen Anzeigen auch komplett aus der DB löschen.

[Liebei]

Jetzt bräuchte ich an anderer Stelle nur den ersten Betreff aus dem Array, wie muß ich das Feld dann ansprechen?

<div class="anzeige-betreff">
    <?php
    $tmpBetreff = $fields['betreff']['content'];
    if ($tmpBetreff == "-") $tmpBetreff = $fields['betreff-frei']['content'];
    ?>
    <h3 class="hoch"><?php echo $tmpBetreff; ?></h3>
</div>

[fivebytes]

Hallo Jürgen,

sorry, aber da kann ich jetzt nicht ganz folgen ;-) In meinem Falle kann der Nutzer bei der Eingabe aus einem Select vordefinierte Betreffs wählen oder einen freien Eintrag in einem Textfeld angeben. Das wird auch über ein zusätzliches Script realisiert:

<script>
$('ctrl_19').addEvent('change',function() {
    $('ctrl_18').value = "-";
});
$('ctrl_18').addEvent('change',function() {
    $('ctrl_19').value = this.getSelected().get("value"); // gets the option that's selected and then it's value
});
</script>

ctrl_18 ist das Selectfeld
ctrl_19 ist das Textfeld für die freie Eingabe

So steht in der DB entweder der vordefinierte Text im Feld betreff oder ein Bindestrich. Ist das der Fall wird die freie Eingabe (DB-Feld betreff-frei) ausgegeben.

D.h. es gibt kein Array mit Betreffs im Template selber und ich bin wie gesagt ein wenig überfragt, was genau Du meinst ...

Zur Veranschaulichung, unter http://www.hamsterseiten.de/kleinanzeigen.html kannst Du das Ganze in Live sehen.