Design der Produkte auf der Startseite

fotoblitz · April 23, 2009

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:

attachment.php?attachmentid=2372&stc=1&d=1240477643

Soll:

attachment.php?attachmentid=2373&stc=1&d=1240477643

Meine product_listing_v1.html

{$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 · April 23, 2009

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 · April 23, 2009

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 :



{$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} {$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}

[/php]

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 · April 23, 2009

Hallo zusammen,

Besten Dank für die Tips.

@stwinger

Wo genau kann ich einstellen das es mir 4 Produkte nebeneinander darstellt?

fotoblitz · April 23, 2009

Dank der Hilfe von stwinger, herzlichen Dank für den genialen Input , habe ich's folgendermassen gelöst:

Meine product_listing_v1.html

{$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} [/HTML]

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; }[/code]

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

stwinger · April 24, 2009

Dank der Hilfe von stwinger, herzlichen Dank für den genialen Input , habe ich's folgendermassen gelöst:

Meine product_listing_v1.html
{$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} [/html]
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; }[/code]
Danke noch mal und schönen Abend..... :)

super das Du damit klarkommst ... gern geschehen

Sign In

Design der Produkte auf der Startseite

Recommended Posts

fotoblitz

Link to comment

Share on other sites

df:bug

Link to comment

Share on other sites

stwinger

Link to comment

Share on other sites

fotoblitz

Link to comment

Share on other sites

fotoblitz

Link to comment

Share on other sites

stwinger

Link to comment

Share on other sites

Archived

Browse

Activity