Artikel zweispaltig

[Oliver]

Ich mach mal einen neuen Thread auf, ich glaub meine Frage ist im anderen Thread etwas untergegangen.

"Früher wurde die Spaltenanzahl der Artikel auf der Startseite über die "new_products_default.html" eingestellt, nur finde ich da den entsprechenden Eintrag nicht mehr. Frage also: Wo bestimme ich nun die Spaltenanzahl der Artikel auf der Startseite? "

LG Oliver

[EDIT Tomcraft: Da das Thema immer wieder aufgetaucht ist, hier der Link zum Download der entsprechenden Dateien:
TEMPLATE: Artikelansicht zweispaltig & dreispaltig]



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

[Anonym]

Hi ...

Das gibt es so in der Form nicht mehr, da es nicht valide var. Ich löse das Mittels div und float:left das ist alles und ist vom Code her viel sauberer.

[Oliver]

Ahja

Hättest du evtl mal ein Beispiel für mich für eine zweispaltige Darstellung?

[sgei]

Hallo Oliver,

hier ist mal ein Beispiel für eine 3-spaltige Darstellung.
Du musst natürlich auch die CSS-Datei anpassen.
Der Code ist aus meiner product_listing_v1.html.

Es gibt sicher auch einen eleganteren Weg, aber nach vielen Stunden probieren hat es mir so ganz gut gefallen...

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}

<h1>{$CATEGORIES_NAME}</h1>

{if $CATEGORIES_DESCRIPTION}
    <p>{$CATEGORIES_DESCRIPTION}</p>
    <div class="h3"> </div>
{/if}

{if $MANUFACTURER_DROPDOWN}
    {$MANUFACTURER_DROPDOWN}
{/if}

{foreach name=aussen item=module_data from=$module_content}
<div style="float:left; width:173px; padding-top:5px; padding-left:2px; background-color:#FFFFFF;">
  <table width="170" style="border:1px solid #DDDDDD;" bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="2">
    <tr valign="middle">
      <td valign="top" height="360px" style="border-bottom:5px solid #000000;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" height="60" style="color:#333" bgcolor="#f4f4f4"><strong>{$module_data.PRODUCTS_NAME}</strong></td>
            </tr>
            <tr>
                <td height="120" align="center" valign="middle" bgcolor="#FFFFFF" style="padding-right:0px;">
                    {if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}
                </td>
            </tr>
{*
            <tr>
                <td height="70" valign="top" align="center" bgcolor="#FFFFFF" style="padding:5px">
                    {if $module_data.PRODUCTS_SHORT_DESCRIPTION!=''}
                        {$module_data.PRODUCTS_SHORT_DESCRIPTION}
                    {else}
                         
                    {/if}
                </td>
            </tr>
*}
            <tr>
                <td class="productPreviewContent">
{*
                    <h2><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></h2>
*}
                    <p class="price">{$module_data.PRODUCTS_PRICE}</p>
                    <p class="taxandshippinginfo">({$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK})</p>
                    {if $module_data.PRODUCTS_VPE}<p class="vpe">{$module_data.PRODUCTS_VPE}</p>{/if}
                    {if $module_data.PRODUCTS_SHIPPING_NAME}
                        <p class="shippingtime">{#text_shippingtime#}
                       {if $module_data.PRODUCTS_SHIPPING_IMAGE}
                            <img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" />
                        {/if}
                        {$module_data.PRODUCTS_SHIPPING_NAME}
                    {/if}
                    {if $module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}
                        <p class="stockimage"><img src="{$module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}" alt="{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}" /></p>
                        <p class="stockimagetext">{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}</p>
                    {/if}
                </td>
            </tr>
            <tr>
                <td height="40" valign="middle" align="center" bgcolor="#f4f4f4">
                    <p>{* {$module_data.PRODUCTS_BUTTON_BUY_NOW}  *}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$tpl_path}buttons/{$language}/button_product_more.gif" alt="Details" border="0" /></a></p>
                </td>
            </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
{/foreach}
<div style="clear:left; margin-bottom:5px;"></div>
<div class="h3"> </div>
{$NAVIGATION}
 

Und so sieht das dann im Shop aus:

[ Für Gäste sind keine Dateianhänge sichtbar ]

[Oliver]

Erstmal danke sgei, aber ich glaube ich bekomm das selbst nicht hin, dazu reichen die Kenntnisse (noch) nicht, ich übe zwar fleissig aber es sind noch Grundkenntnisse

Ich häng mal meine new_products_default.html als Anhang an den Post, vielleicht findet sich ja irgendwo ein netter Wichtel der kurz Zeit hat

[sgei]

Hallo Oliver,

hier ist schon mal ein fleissiger Wichtel

1. Ändere in der "stylesheet.css" im Ordner "/templates/xtc5/" folgendes ab:

suche nach:

Code: CSS  [Auswählen]

/* MAIN CONTENT */
#content {
        float:left;
        width:495px;
        padding:0px 25px 0px 25px;
        margin-bottom:15px;
}

ändere in:

Code: CSS  [Auswählen]

/* MAIN CONTENT */
#content {
    float:left;
    width:530px;
    padding:0px 10px 0px 10px;
    margin-bottom:15px;
    background-color:#FFFFFF;
}

2. im Anhang ist eine "new_products_default.txt"

-nenne diese um in "new_products_default.html" und ersetze diese in deinem Template
(vorher natürlich die originale sichern)

3. mit den Werten etwas spielen...

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="new_products"}

<h1>{#heading_text#}</h1>

{foreach name=aussen item=module_data from=$module_content}

<div style="float:left; width:263px; padding-top:5px; padding-left:2px; background-color:#FFFFFF;">
  <table width="260" style="border:1px solid #DDDDDD;" bgcolor="#FFFFFF" align="center" border="0" cellpadding="0" cellspacing="2">
    <tr valign="middle">
      <td valign="top" height="360px" style="border-bottom:5px solid #000000;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" height="60" style="color:#333" bgcolor="#f4f4f4"><strong>{$module_data.PRODUCTS_NAME}</strong></td>
            </tr>
            <tr>
                <td height="120" align="center" valign="middle" bgcolor="#FFFFFF" style="padding-right:0px;">
                    {if $module_data.PRODUCTS_IMAGE!=''}
                        <a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" /></a>
                    {else}
                        <strong>Kein Bild vorhanden!</strong>
                    {/if}
                </td>
            </tr>
            <tr>
                <td height="70" valign="top" align="center" bgcolor="#FFFFFF" style="padding:5px">
                    {if $module_data.PRODUCTS_SHORT_DESCRIPTION!=''}
                        {$module_data.PRODUCTS_SHORT_DESCRIPTION}
                    {else}
                         
                    {/if}
                </td>
            </tr>
            <tr>
                <td class="productPreviewContent">
                    <!-- <h2><a href="{$module_data.PRODUCTS_LINK}">{$module_data.PRODUCTS_NAME}</a></h2> -->
                    <p class="price">{$module_data.PRODUCTS_PRICE}</p>
                    <p class="taxandshippinginfo">({$module_data.PRODUCTS_TAX_INFO}{$module_data.PRODUCTS_SHIPPING_LINK})</p>
                    {if $module_data.PRODUCTS_VPE}<p class="vpe">{$module_data.PRODUCTS_VPE}</p>{/if}
                    {if $module_data.PRODUCTS_SHIPPING_NAME}
                        <p class="shippingtime">{#text_shippingtime#}
                       {if $module_data.PRODUCTS_SHIPPING_IMAGE}
                            <img src="{$module_data.PRODUCTS_SHIPPING_IMAGE}" alt="{$module_data.PRODUCTS_SHIPPING_NAME}" />
                        {/if}
                        {$module_data.PRODUCTS_SHIPPING_NAME}
                    {/if}
                    {if $module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}
                        <p class="stockimage"><img src="{$module_data.PRODUCTS_STOCKS_TRAFFIC_IMAGE}" alt="{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}" /></p>
                        <p class="stockimagetext">{$module_data.PRODUCTS_STOCKS_TRAFFIC_NAME}</p>
                    {/if}
                </td>
            </tr>
            <tr>
                <td height="40" valign="middle" align="center" bgcolor="#f4f4f4">
                    <p><!-- {$module_data.PRODUCTS_BUTTON_BUY_NOW}  --><a href="{$module_data.PRODUCTS_LINK}"><img src="{$tpl_path}buttons/{$language}/button_product_more.gif" alt="Details" border="0" /></a></p>
                </td>
            </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

{/foreach}

Erklärung:

Wenn Du jetzt in:

Zeile 7 den Wert bei width:263px auf 174px änderst und in
Zeile 8 den Wert bei width="260" auf 171 änderst,

dann hast Du drei Spalten.

So sollte es aussehen mit den Werten 263px und 260 (zwei Spalten):

[ Für Gäste sind keine Dateianhänge sichtbar ]

Die Datei "drei_spalten1.jpg" müsste eigentlich "zwei_spalten.jpg" heißen...

Steffen

[DokuMan]

Könnte man die hier vorgestellen Vorschläge mit der Mulitcolumn Darstellung nicht gleich als "product_listing_v2.html", etc. in die "modified Version" mitaufnehmen?

[Oliver]

Dankeschön !!! Sieht schon (fast) perfekt aus
Zwei Sachen noch:
1. Nach der Produktüberschrift hat sich ein --> eingeschlichen
2. Die Spalten sind zu lang
3. Der "Jetzt kaufen" Button ist weg

Achja, zu sehen unter http://www.momarket24.com/

[Anonym]

Das Problem ist, wenn ich diese mit in den Shop übernehme, das es dann zu Problemen bei der Auswahl kommt. Weiss der Geier warum er hier eine eigenen KI entwickelt.

Was man machen kann, ist das ganz als Erweiterung hier als DL anzubieten.

ála 2 und 3 Spaltig. !!!

[sgei]

Hallo Oliver,

1. müsste weg sein
2. Du hast den Wert für die Höhe der Zellen auf 724 gesetzt. Der war bei mir auf 360.
3. ist wieder da

Hier die neue Datei:

[Oliver]

Perfekt! Vielen lieben Dank nochmal !!

[mollvision]

Hallo und vielen Dank für die Änderung "sgei".
Ich habe nur ein Problem.
Wenn die Kurzbeschreibung mal etwas länger ist, dann ist dementspechend auch die Box länger.
Wie kann ich zb: automatisch abkürzen so das nur 3 Zeilen der Kurzbeschreibung zu lesen ist und am Ende 3 Punkte stehen?
Ich hoffe Ihr versteht wie ich das meine.

Gruß Wolfgang

[Anonym]

http://www.smarty.net/manual/en/language.modifier.truncate.php

[mollvision]

Klasse... Danke Danke Christian.

Ich dachte nicht das ich das mit meinen sehr bescheidenen kenntnissen hinbekomme.
Ich lerne jeden Tag neu dazu.
Vielen Dank nochmals für die schnelle Hilfe.
Gruß Wolfgang

[ponyhof]

Greife dieses Thema nochmal auf ! Gibt es da auch eine Lösung für die alsopurchased ??
Die Artikel die dort angezeigt werden stehen untereinander. Wir hätten aber 3 Produkte nebeneinander.
Einfach nur mit Produktbild und Preis. kurzbeschreibung etc brauchen wir nicht.
HTML und PHP Kenntnisse leider sehr bescheiden ! Daher frage ich hier mal in die Runde

Viele Grüße !