[gelöst] Gitteransicht Produkte

[Fashionresidenz]

Hallo Community,

ich hoffe ich kann mal wieder auf euch zählen und ihr könnt mir bei meinem Problem helfen, weiß nicht genau ob der Thread in diesem Bereich richtig ist, ansonsten einfach verschieben ^^

Also mein Problem ist folgendes:
Ich habe in meinen Kategorien bei der Produktansicht die Gitteransicht, allerdings gefällt mir die Art der Gitteransicht nicht, also damit ihr es euch besser vorstellen könnt, bei mir sieht es so aus:

http://www.fashionresidenz.de/index.php?id_category=12&controller=category

 

Und ich hätte gerne dasss es so aussieht:

http://www.frontlineshop.com/bekleidung-men/
 

Dass die Vorschaubilder halt einfach ein bisschen größer sind und dass man direkt auf das Bild klicken muss um zur Produktbeschreibung zu kommen und nicht erst noch ein Mouse-Over-Menu kommt.

Kann man dies im Default-Theme bewerkstelligen?

 

Liebe Grüße
- Fashionresidenz -

[Whiley]

Hallo Lucas,

 

 

dass man direkt auf das Bild klicken muss um zur Produktbeschreibung zu kommen und nicht erst noch ein Mouse-Over-Menu kommt.

 

Du öffnest mit einem Editor die Datei:

/themes/default/product-list.tpl

Dort findest du:

            <div class="poverlay">

                <div class="right_block">

                        {if isset($comparator_max_item) && $comparator_max_item}

                            <p class="compare">

                                <input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/>

                                <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>

                            </p>

                        {/if}          

                    {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}

                        {if ($product.allow_oosp || $product.quantity > 0)}

                            {if isset($static_token)}

                                <a class="cartbutton button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

                            {else}

                                <a class="cartbutton button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}", false)|escape:'html'}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>

                            {/if}                      

                        {else}

                            <span class="cartbutton exclusive"><span></span>{l s='Add to cart'}</span>

                        {/if}

                    {/if}

                    <div class="viewbutton">

                    <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>

                    </div>

                </div>

            </div>

Diesen Teil löscht du komplett und speicherst die Datei ab. Das Mouse-Over-Menu ist verschwunden und du kommst direkt über den Bildklick auf das Produkt.

 

 

Dass die Vorschaubilder halt einfach ein bisschen größer sind...

 

Zunächst gehst du ins BO -->Voreinstellungen --> Bilder

Hier änderst du die Bildgrösse für home_default ab (statt 144 x 144 px z.B. 200 x 200 px)

Anschliessend gehst du ganz nach unten und erzeugst die Vorschaubilder neu.

 

Wie du siehst werden die neuen Höhen der Bilder bereits angezeigt, die Breite stimmt aber noch nicht.

 

Anschliesssend editierst du die Datei:

/themes/default/css/product_list.css

Dort findest du ca ab Zeile 34:

 

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

 Die Zeile  width:144px;  änderst du auf die neue Bildbreite ab z,B.

width:200px;

 

Grüsse

Whiley

[Fashionresidenz]

Vielen Dank =)
Deine Hilfe war der Schlüssel zum Ziel ^^

Liebe Grüße
Lucas

[Whiley]

Hallo Lucas,

 

freut mich, dass es geklappt hat.

 

Du könntest den Topic  als gelöst markieren, indem du beim ersten Post auf 'Edit', dann auf 'Use Full Editor'  klickst und Überschrift editieren und dann das [gelöst] einkopierst.

 

Grüsse

Whiley