Zum Inhalt springen

Produkte nebeneinander darstellen

Erstellt am 11. Juli 2003 · 10 Antworten · letzte Antwort am 28. Januar 2006

Tags: Frage

cssoft ·

Hat es schon jemand geschafft, die Produkte nicht untereinander, sondern zB 4 Produkte nebeneinander, dann in der nächsten Zeile wieder 4 usw. darzustellen?

mfg Christian

molari ·

nochmals vielen Dank, konnte noch so einiges lernen daran. Aber ich muss zugeben, es hat mich in dem Moment ein wenig überfordert #paralyzed# . Damit ich mir noch etwas mehr Zeit geben kann, habe ich meine erste Version ins Netz gestellt und wollte die Änderungen in die nächste einbauen. Die Zeit drängte auch ein wenig, weil ich den Shop, trotz dem ein oder anderen kleinen Manko online haben wollte. Wenn du Interesse hast, schau ihn dir einfach unter www.handyscout.de an. Ist meine eigene Site, und da ich kein Progger bin, ist es natürlich harte Arbeit mich da durchzuwurschteln. Sobald ich es umgesetzt habe geb ich dir einen Hinweis.

Gruß
Oli

Space-Teddy ·

hi ccsoft
hi leutz

vieleicht könnt man den quellcode hier posten?
ich renn jetzt schon ne woche hinter dem trick her....
:o
WÄRE ÜBER GLÜCKLICH!!!!!

DANKE

ich bracuh nur ein tip: entweder template oder php wo muss ich ran???? beim template steh ich einfach aufm schlauch.... und beim php weis ich nicht ob und wenn wo????

Space-Teddy ·

1000 DANK!!!!!!!!
😃 😃

plugin.tt_products.show_cols= 4
muss ins setup feld!!!
hat mich nochmal 2 stunden gekostet!
😢

liquid ·

Hallo,

die Artikel lassen sich auch mit css nebeneinader platzieren, dazu muss nur das Template für den shop angepasst werden + ein paar Zeilen CSS noch dazu.

here we go:

Im Template für tt_products muss die List ansicht angepasst werden:

<h3>ITEM_LIST_TEMPLATE</h3>
<em>This subpart is used to display the regular list of products. It's also used by search-results.</em>

<!-- ###ITEM_LIST_TEMPLATE### begin-->

<div id="tfx_fh_picshop">
	<div class="tfx_fh_picshop_browse">
		<div class="inhalt"><b>Bilder ###ITEMS_SELECT_BEGIN### bis ###ITEMS_SELECT_END### von ###ITEMS_SELECT_COUNT### </b></div>
		<div><!--###LINK_FIRST###-->Anfang<!--###LINK_FIRST###-->&nbsp;&nbsp;<!--###LINK_PREV###-->zurück<!--###LINK_PREV###-->&nbsp;&nbsp;<!--###LINK_NEXT###-->vor<!--###LINK_NEXT###-->&nbsp;&nbsp;<!--###LINK_END###-->Ende<!--###LINK_END###--></div>
	</div>
<!-- ###ITEM_CATEGORY_AND_ITEMS### begin -->
<!-- ###ITEM_LIST### begin -->
<!-- ###ITEM_SINGLE### begin-->
	<div class="tfx_fh_picshop_list">
<FORM method="post" action="###FORM_URL###" name="###FORM_NAME###">
		<div class="tfx_fh_picshop_pic">###PRODUCT_IMAGE###</div>
		<div class="tfx_fh_picshop_title">###PRODUCT_TITLE###</div>
		<div class="tfx_fh_picshop_form"><p class="inhalt">Menge:<INPUT size="3" maxlength="4" type="text" name="###FIELD_NAME###" value="###FIELD_QTY###"></p>
		<input class=btn_bsk type="Submit" name="order" value="Warenkorb" onClick="if (!document.forms['###FORM_NAME###']['###FIELD_NAME###'].value!=''){document.forms['###FORM_NAME###']['###FIELD_NAME###'].value=1;};"></div>
</FORM>
	</div>
<!-- ###ITEM_SINGLE### end -->	
<!-- ###ITEM_LIST### end -->
<!-- ###ITEM_CATEGORY_AND_ITEMS### end -->
	<div class="tfx_fh_picshop_browse">
		<div class="inhalt"><b>Bilder ###ITEMS_SELECT_BEGIN### bis ###ITEMS_SELECT_END### von ###ITEMS_SELECT_COUNT### </b></div>
		<div><!--###LINK_FIRST###-->Anfang<!--###LINK_FIRST###-->&nbsp;&nbsp;<!--###LINK_PREV###-->zurück<!--###LINK_PREV###-->&nbsp;&nbsp;<!--###LINK_NEXT###-->vor<!--###LINK_NEXT###-->&nbsp;&nbsp;<!--###LINK_END###-->Ende<!--###LINK_END###--></div>
	</div>
</div>

<!-- ###ITEM_LIST_TEMPLATE### end -->

und dann im CSS-file folgendes:

#tfx_fh_picshop {
  width: 480px;
  height: 1100px; 
}


.tfx_fh_picshop_list {
  float: left;
  width: 150px;
  height: 300px;
  text-align: center;
  margin-left: 0; 
  margin-right: 5px; 
  overflow: hidden;
}

.tfx_fh_picshop_pic {
/*  height: 225px; */
}

.tfx_fh_picshop_form {
  margin-top: 10px;
  height: 60px;
  margin-bottom: 20px;
}

.tfx_fh_picshop_browse {
  float: none;
  margin-top: 10px;
  height: 40px;
  width: 480px;
  margin-bottom: 20px;
  text-align: center;
}

Das wichtige hier ist die float Angabe in tfx_fh_picshop_list, der Rest kann nach belieben angepasst werden.

mfg

sascha