Design der Produkte auf der Startseite

fotoblitz · #1 (**permalink**) 23.04.2009, 10:03

Hallo

Ich bin momentan am Design meines neuen Shops und würde gerne folgendes Problem lösen:
Ich möchte gerne auf der Startseite des Veyton Shops die Produkte nebeneinander und wenn es viele sind untereinander anordnen (siehe Bild). Habe herausgefunden, dass dies im Ordner Templates in der Datei product_listing_v1 geschehen muss. Beim mir reihen sich nun alle Produkte nebeneinander auf. Wie kriege ich es hin, dass es die Produkte nach 4 Produkten auf einer neuen Zeile darstellt? Die Fotos sollte mein Problem etwas besser erklären.
Meine index.html habe ich angefügt (betrifft zeile 26-35)

Ist:

Soll:

Meine product_listing_v1.html

Code:

{$categories}
{if $product_listing}
{if $heading_text}<h1>{$heading_text}</h1>{/if}
{if $PRODUCTS_DROPDOWN}{$PRODUCTS_DROPDOWN}{/if}

{if $sort_dropdown.options}
<div class="products_sort">
{form type=form name=sort_dropdown action='dynamic' method=get}
{form type=hidden name=page value='categorie'}
{form type=hidden name=cat value=$current_category_id}
{form type=select name=sorting value=$sort_dropdown.options default='' onchange='this.form.submit();'}
{form type=formend}
</div>
{/if}

{if $MANUFACTURER_DROPDOWN}
<div class="products_sort">
{if $MANUFACTURER_DROPDOWN}{$MANUFACTURER_DROPDOWN}{/if}
</div>
{/if}

{if $manufacturer}
{$manufacturer.MANUFACTURER.manufacturers_description}
{/if}

<div class="hrproductpreview"></div>
<table class="productPreview" width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
{foreach name=aussen item=module_data from=$product_listing}
 {if $module_data.is_designerproduct_status !=  1 }

  
    {if $module_data.products_image!=''}<td><h2><a href="{$module_data.products_link}">{$module_data.products_name}</a></h2><br /><a href="{$module_data.products_link}">{img img=$module_data.products_image type=m_info class=productImageBorder alt=$module_data.products_name}</a><br />{if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'}<p class="price">{$module_data.products_price.formated}</p></td>{/if}		
		</div>{/if}{/if}
{/foreach}</tr>
		</table>

<div id="NAVIGATION">
	<div class="COUNT">{$NAVIGATION_COUNT}</div>
	<div class="PAGES">{$NAVIGATION_PAGES}</div>
</div>{/if}
{$error_listing}

df:bug · #2 (**permalink**) 23.04.2009, 10:55

Hallo

für Produkte auf der Startseite gibt es ja ein Plugin "xt_startpage_products" kannst du dann auch Änderungen vornehmen, die dann für alle gelten bzw. du machst eine Kopie, nutzt es und aktivierst es nur für den gewünschten Mandanten.

Wie es sich mit CSS lösen können, schau ich gleich mal.

Edit: Kannst was mit "weight" machen und bricht dann von alleine um.

Viele Grüße,
df:bug

stwinger · #3 (**permalink**) 23.04.2009, 11:48

du kannst dir für die Startseite ein extra Template machen, im Plugin Startseite kannst du ein Template angeben welches dort für die Auflistung der Produkte genutz wird.
Hier solltest Du ein Template schreiben welches dir dir Artikel als Liste ausgibt. So erhälst du die von dir gewünschte Ausgabe auf einfachem Wege.

Damit das ganze noch stabil in allen Browsern läuft könntest du variable css classen für die <li> elemente verwenden.

Mein Code sieht so aus :

PHP-Code:


			
{$categories}

{if $product_listing}
<!--START LISTING STARTSEITE-->

{if $heading_text}<h1>{$heading_text}</h1>{/if}

{foreach name=aussen item=module_data from=$product_listing}
<div class="{cycle values="box-left,box-center,box-right"}">

{if $module_data.products_image!=''}<a href="{$module_data.products_link}" title="{$module_data.products_name}">{img img=$module_data.products_image type=m_info class=c alt=$module_data.products_name}</a>{/if}
        <div class="product">
                <h2><a href="{$module_data.products_link}">{$module_data.products_name}</a></h2>

                {if $module_data.review_stars_rating}
                <div class="reviews_rating_light"><div class="reviews_rating_dark" style="width:{$module_data.review_stars_rating}%"></div></div>
                {/if}

                {if $module_data.products_short_description}<p>{$module_data.products_short_description}</p>{/if}
                {if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'}
                <p class="price">{$module_data.products_price.formated}</p>
                <p class="taxandshippinginfo">{$module_data.products_tax_info.tax_desc}{if $module_data.products_shipping_link}<a href="{$module_data.products_shipping_link}" target="_blank" rel="nofollow">{txt key=TEXT_EXCL_SHIPPING}</a>{/if}</p>
                {if $module_data.base_price}<p class="vpe">{$module_data.base_price.price} {txt key=TEXT_SHIPPING_BASE_PER} {$module_data.base_price.vpe.name}</p>{/if}
                {/if}
                {if $module_data.products_weight > 0}<p class="taxandshippinginfo">{txt key=TEXT_PRODUCTS_WEIGHT}: {$module_data.products_weight} KG</p>{/if}
                {if $module_data.shipping_status}<p class="shippingtime">{txt key=TEXT_SHIPPING_STATUS}&nbsp;{$module_data.shipping_status}</p>{/if}

                {if $module_data.stock_image}
                <p class="stockimage">{img img=$module_data.stock_image.image type=t_img_stockrules alt=$module_data.stock_image.name}</p>
                <p class="stockimagetext">{$module_data.stock_image.name}</p>
                {/if}
                </div>
                {if $module_data.allow_add_cart eq 'true'}
                {form type=form name=product action='dynamic' link_params=getParams method=post}
                {form type=hidden name=action value=add_product}
                {form type=hidden name=product value=$module_data.products_id}

                {form type=text name=qty value=1 style='width:50px;'}
                {button text=$smarty.const.BUTTON_ADD_CART file='button_in_cart.gif' type='form' btn_template='tpl_button_2.gif' space_left='25'}


                {form type=formend}

                {/if}


</div>
{/foreach}

<div id="NAVIGATION">
        <div class="COUNT">{$NAVIGATION_COUNT}</div>
        <div class="PAGES">{$NAVIGATION_PAGES}</div>
</div>
<!--ENDE  LISTING STARTSEITE-->
{/if}
{$error_listing}

Der Code stellt dir eine Liste mit 3 Produkten nebeneinander dar, geht auch mit 2, 4, 5, 6, ..egal wieviel...

Natürlich musst du dein Stylesheet erweitern, sprich die Classen für die <li>`s z.B auf float:left formatieren etc.. etwas Erfahrung in CSS sollte also vorhanden sein.

fotoblitz · #4 (**permalink**) 23.04.2009, 12:11

Hallo zusammen,
Besten Dank für die Tips.
@stwinger
Wo genau kann ich einstellen das es mir 4 Produkte nebeneinander darstellt?

fotoblitz · #5 (**permalink**) 23.04.2009, 18:44

Dank der Hilfe von stwinger, herzlichen Dank für den genialen Input

, habe ich's folgendermassen gelöst:

Meine product_listing_v1.html

HTML-Code:

{$categories}
{if $product_listing}
{if $heading_text}<h1>{$heading_text}</h1>{/if}
{if $PRODUCTS_DROPDOWN}{$PRODUCTS_DROPDOWN}{/if}

{if $sort_dropdown.options}
<div class="products_sort">
{form type=form name=sort_dropdown action='dynamic' method=get}
{form type=hidden name=page value='categorie'}
{form type=hidden name=cat value=$current_category_id}
{form type=select name=sorting value=$sort_dropdown.options default='' onchange='this.form.submit();'}
{form type=formend}
</div>
{/if}

{if $MANUFACTURER_DROPDOWN}
<div class="products_sort">
{if $MANUFACTURER_DROPDOWN}{$MANUFACTURER_DROPDOWN}{/if}
</div>
{/if}

{if $manufacturer}
{$manufacturer.MANUFACTURER.manufacturers_description}
{/if}

{foreach name=aussen item=module_data from=$product_listing}
<div class="{cycle values="box1,box2,box3,box4"}">
        <div align="center">
                <h2><a href="{$module_data.products_link}">{$module_data.products_name}</a></h2>
                     {if $module_data.products_image!=''}<a href="{$module_data.products_link}" title=                     "{$module_data.products_name}">{img img=$module_data.products_image type=m_info class=c                      alt=$module_data.products_name}</a>{/if}
                     {if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'}
                     <p class="price">{$module_data.products_price.formated}</p>               
                     {if $module_data.base_price}<p class="vpe">{$module_data.base_price.price} {txt                      key=TEXT_SHIPPING_BASE_PER} {$module_data.base_price.vpe.name}</p>{/if}
                     {/if}
         </div>
 </div>
{/foreach}

<div id="NAVIGATION">
	<div class="COUNT">{$NAVIGATION_COUNT}</div>
	<div class="PAGES">{$NAVIGATION_PAGES}</div>
</div>{/if}
{$error_listing}

Mit folgendem Zusatz in der css:

Code:

.box1{
	float: left;
	height: 180px;
	width: 155px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: 1px solid #000000;
	
}
.box2{
	height: 180px;
	width: 155px;
	border: 1px solid #000000;
	float: left;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	
}
.box3{
	float: left;
	height: 180px;
	width: 155px;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: 1px solid #000000;
	
}
.box4{
	float: left;
	height: 180px;
	width: 155px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	border: 1px solid #000000;
	
}

Danke noch mal und schönen Abend.....

stwinger · #6 (**permalink**) 24.04.2009, 18:34

Zitat:

Zitat von fotoblitz

Dank der Hilfe von stwinger, herzlichen Dank für den genialen Input

, habe ich's folgendermassen gelöst:

Meine product_listing_v1.html

HTML-Code:

{$categories}
{if $product_listing}
{if $heading_text}<h1>{$heading_text}</h1>{/if}
{if $PRODUCTS_DROPDOWN}{$PRODUCTS_DROPDOWN}{/if}

{if $sort_dropdown.options}
<div class="products_sort">
{form type=form name=sort_dropdown action='dynamic' method=get}
{form type=hidden name=page value='categorie'}
{form type=hidden name=cat value=$current_category_id}
{form type=select name=sorting value=$sort_dropdown.options default='' onchange='this.form.submit();'}
{form type=formend}
</div>
{/if}

{if $MANUFACTURER_DROPDOWN}
<div class="products_sort">
{if $MANUFACTURER_DROPDOWN}{$MANUFACTURER_DROPDOWN}{/if}
</div>
{/if}

{if $manufacturer}
{$manufacturer.MANUFACTURER.manufacturers_description}
{/if}

{foreach name=aussen item=module_data from=$product_listing}
<div class="{cycle values="box1,box2,box3,box4"}">
        <div align="center">
                <h2><a href="{$module_data.products_link}">{$module_data.products_name}</a></h2>
                     {if $module_data.products_image!=''}<a href="{$module_data.products_link}" title=                     "{$module_data.products_name}">{img img=$module_data.products_image type=m_info class=c                      alt=$module_data.products_name}</a>{/if}
                     {if $smarty.const._CUST_STATUS_SHOW_PRICE eq '1'}
                     <p class="price">{$module_data.products_price.formated}</p>               
                     {if $module_data.base_price}<p class="vpe">{$module_data.base_price.price} {txt                      key=TEXT_SHIPPING_BASE_PER} {$module_data.base_price.vpe.name}</p>{/if}
                     {/if}
         </div>
 </div>
{/foreach}

<div id="NAVIGATION">
    <div class="COUNT">{$NAVIGATION_COUNT}</div>
    <div class="PAGES">{$NAVIGATION_PAGES}</div>
</div>{/if}
{$error_listing}

Mit folgendem Zusatz in der css:

Code:

.box1{
    float: left;
    height: 180px;
    width: 155px;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0px;
    border: 1px solid #000000;
    
}
.box2{
    height: 180px;
    width: 155px;
    border: 1px solid #000000;
    float: left;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0px;
    
}
.box3{
    float: left;
    height: 180px;
    width: 155px;
    margin-top: 5px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0px;
    border: 1px solid #000000;
    
}
.box4{
    float: left;
    height: 180px;
    width: 155px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    border: 1px solid #000000;
    
}

Danke noch mal und schönen Abend.....

super das Du damit klarkommst ... gern geschehen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fehlermeldung bei csv-Import der Produkte	topgeschenkewelt	Admininterface	0	20.03.2009 16:24
auf der Startseite wird nichts mehr ausgelesen !	schragetuning	Allgemeine Diskussionen	0	16.04.2008 11:05
Zusätzliche Spalte mit Boxen nur auf Startseite (main_content.html)	x-nilo	Installation und Konfiguration	2	27.01.2008 19:04