TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

[hpzeller]

Hallo Nooblike,

in '\templates\bootstrap3\module\new_products.html' und '\templates\bootstrap3\module\new_products_overview.html' kannst Du jeweils folgenden Code

Code: XML  [Auswählen]

<div class="listingcontainer row clearfix">

mit diesem ersetzen

Code: XML  [Auswählen]

<div class="listingcontainer row eq-height clearfix">

damit auch in der Liste Neue Produkte die Boxen unten bündig abschliessen.

Gruss
Hanspeter

[Timm]

Wow. Das Thema nimmt ja endlich mal wieder Fahrt auf.

Kann man die Änderungen von @hpzeller auch auf den Bestsellerslider irgendwie übernehmen?

Der wird in der index.html so definiert

Code: XML  [Auswählen]

{* BEGINN Slider Karusell - *}
                                {if isset($SLIDER)}
                                <div id="myCarousel" class="carousel slide">
                                        <ol class="carousel-indicators">
                                                {foreach name=aussen item=slider from=$SLIDER}<li data-target="#myCarousel" data-slide-to="{$smarty.foreach.aussen.iteration - 1}"{if $smarty.foreach.aussen.first} class="active"{/if}></li>{/foreach}
                                        </ol>
                                        <div class="carousel-inner" role="listbox">
                                                {foreach name=aussen item=slider from=$SLIDER}
                                                <div class="item{if $smarty.foreach.aussen.first} active{/if}">{$slider.IMAGE}
                                                        <div class="container"><div class="carousel-caption">{$slider.TEXT}</div></div>
                                                </div>
                                                {/foreach}
                                        </div>
                                </div>
                                {/if}
                                {* ENDE Slider Karusell *}

@hpzeller
Wirken sich deine deine Änderungen aus Post #134 auch positiv auf die gleichmäßige Höhe von Preis, Lieferzeit, Versandkosten und Details aus in der Boxansicht?

Es tut mir leid, dass ich dich direkt ansprechen muss, da sonst keiner außer dir und @Karl hier im Thread aktiv ist, der das umsetzen könnte. Eigentlich schade bei der Vorlage.

Gruss Timm

[hpzeller]

[...]
@hpzeller
Wirken sich deine deine Änderungen aus Post #134 auch positiv auf die gleichmäßige Höhe von Preis, Lieferzeit, Versandkosten und Details aus in der Boxansicht?
[...]

Nein!

Wenn man das haben will und dafür nur CSS eingesetzt werden soll, muss man für die Elemente (Unter-Container) innerhalb einer Box (Haupt-Container) feste Höhen vergeben aber das kann dann zu unerwünschten Effekten führen.

Ein Beispiel:
Nooblike hat in seinem Shop -> http://rc-andy.de für den Unter-Container welcher den Produktnamen enthält eine Feste Höhe vergeben, dadurch erreicht er zwar das die Boxen alle gleich hoch sind, siehe Bild1, aber um den Preis das der Produktname des Artikels welcher er in der Box links anbietet "Blade Inductrix Tiny Whoop Tuning Propeller" anstatt "Blade Inductrix Tiny Whoop Tuning Propeller 1 Satz 4 Stk Orange" lautet, siehe Bild2.

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

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

PS:
Wie die CSS-Regeln welche ich gepostet habe wirken sieht man wenn man auf das Häuschen vom Schneidermeister klickt.

Gruss
Hanspeter

[hpzeller]

Nachtrag

Meiner Meinung nach wird es wohl am Beste sein das eine zu tun, ohne das andere zu lassen, will heissen man gibt den Elementen einer Box ein Höhenminimum vor und sorgt ausserdem dafür das die Boxen einer Zeile alle gleich hoch und somit unten und oben bündig zueinander sind, damit erreicht man das unschöne Designdefekte bezüglich der Höhenausrichtung der Elemente abgemildert werden ohne das wichtige Informationen verloren gehen.

Konkret heisst das z.B. man gibt dem Element welches den Produktnamen enthält ein CSS min-height das so hoch ist das zwei Zeilen Text darin platz haben, ist nun ein Produktname so kurz das er nur eine Zeile benötigt, dann bleibt unten ein Zeile Leerraum, ist aber ein Produktname so lang das er drei Zeilen benötigt wird er nicht abgeschnitten, sondern das drunter liegende Element wird nach unten verschoben, ausserdem sorgt man nun noch dafür, mit  CSS flex  das alle Boxen einer Zeile egal wie Hoch deren einzelnen Elemente sind unten und oben bündig zueinander sind. Mit diesem Mix, so denke ich, erreicht man das die Darstellung ausgewogen erscheint und trotzdem keine wichtigen Informationen abgeschnitten werden.

Gruss
Hanspeter

[Ravinhinz]

Hätte ich das nur gewusst mit dem bootstrap template;-)

Ich hatte unseren shop selbst auf responsive getrimmt, aber das BS3 Template ist echt klasse!

Grosses Danke an den Entwickler für den Zeitaufwand! Es ist super umgesätz, nun werde ich wohl wieder an die CSS ran dürfen und dein Template umändern auf unsere Bedürfnisse

Danke dir noch mal

LG

Patrick

[Ravinhinz]

Moin Moin,

ich habe ein kleines Problem mit den popup_images in der Produkt Seite(siehe Bild).

Der "bug" ist beim mir so, dass er das Produktbild kachelt und somit der effect in angehängtem Bild entsteht.

Hat jemand eine Lösung.

Ich habe den cache ausgeschaltet und den template_c ordner auf dem Server geleert, trotzdem besteht der kleine "bug".

Beste Grüße

Patrick

edit: Dieser effect entsteht beim hovern über das Produktbild.

[hpzeller]

Hallo Patrick,

versuch als Erstes mal das
https://www.modified-shop.org/forum/index.php?topic=37218.msg338394#msg338394

Gruss
Hanspeter

[Ravinhinz]

Moin Hansperter,

nein, der Fehler besteht leider immer noch. Meine Idee ist es vielleicht das popup_image was geladen wird eine höhere Auflösung zu geben......

....
....

Nein hat auch nichts gebracht

Beste Grüße

Patrick

[hpzeller]

Zeigt sich der Fehler bei allen Bildern?

PS:
Ein Link zum Shop wäre vielleicht hilfreich.

Gruss
Hanspeter

[Ravinhinz]

Jupp der "bug" ist bei allen Produkten vorhanden.

Hier der gewünschte Link:

https://www.cxp-fahrzeugteile.de/Car-Tuning/Bodykits/Bodykit-Tuning-Spoiler-Set-fuer-Porsche-986-Boxster-BK067::4820.html

Grüße

Patrick

[Ravinhinz]

So ich habe den "Fehler" gefunden.

in der template/css/bootstrap/flatly.min.css ist eine klasse namens .img-responsive
dort steht der wert max-width:100%, dessen Wert habe ich jetzt auf 400px; gesetzt und es läuft.

Ich denke mal das hat was mit der Bildergröße zutun, dass das script sonst das Bild kachelt.

Grüße

Patrick

[hpzeller]

Ich denke das folgende Regel in die 'templates/bootstrap3/css/cloud-zoom.css' gehört.

Code: CSS  [Auswählen]

.cloud-zoom-big {
  background-repeat:no-repeat;
}
 

Gruss
Hanspeter

[Ravinhinz]

Ok das ist die elegantere Lösung .

Danke dir erneut Hansperter

Beste Grüße

Patrick

[hpzeller]

Hallo Karl,

der von Patrick in Antwort #140 gepostet Fehler tritt dann auf, wenn das Bild auf der Produktdetailseite welches aus dem Ordner 'images/product_images/popup_images/' geladen wird, nach der Skalierung im Browserfenster mindestens in einer Dimension grösser ist als das entsprechende Bild im Ordner 'images/product_images/original_images/' welches als Zoombasis geladen wird.

https://www.cxp-fahrzeugteile.de/images/product_images/popup_images/256180_Product.jpg
https://www.cxp-fahrzeugteile.de/images/product_images/original_images/256180_Product.jpg

Lösungsvorschlag: Folgende Regel in die 'templates/bootstrap3/css/cloud-zoom.css' einfügen.

Code: CSS  [Auswählen]

.cloud-zoom-big {
  background-repeat:no-repeat;
  background-color:#fff;  
}
 

Gruss
Hanspeter

[Karl1]

Hallo Hanspeter,
erstmal danke für deine Hilfestellungen.

Dein Vorschlag ist in der nächsten Überarbeitung enthalten.

Gruß Karl