Warenkorb & Adminoverview an linke Seite fixieren per CSS

[h4g-seel]

Hi Shopbetreiber.

Ich mache mir generell Gedanken über "Wie will der Kunde online kaufen?"
Dabei kam mir in den Sinn, dass ich gern als Kunde meinen Warenkorb generell sehen will, egal wie weit ich nach unten Scrolle.

Darum habe ich den Warenkorb einfach mal in die linke obere Ecke gepinnt. Dadurch scrollt der Warenkorb immer mit nach unten, egal auf welcher Seite man ist.
Vorteil für den Kunden: Er hat immer seinen Warenkorb in Sicht.
Vorteil für den Admin: Durch das zusätzliche Anheften der Adminliste, hat dieser die Liste immer in Sicht.

Dabei benötigt man nur eine kleine Zeilenänderung innerhalb der index.php im Template-Ordner.

Man Sucht nach folgender Zeile:

Code: PHP  [Auswählen]

    <div id="rightcol">{$box_CART}{$box_LOGIN}{$box_ADMIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>
    {/if} </div>

Nun nimmt man die Boxen/Module, welche man auf die Seite packen will schreibt wie folgend um:

Code: PHP  [Auswählen]

<div id="rightcol"><div style="position:fixed; top:30px; left:1%;">{$box_CART}{$box_ADMIN}</div>{$box_LOGIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>

In meinem Beispiel ist, wie im Bild zu sehen, der Warenkorb und die Adminliste auf der linken Seite.

Man könnte auch über die CSS-Datei den div wie folgend deglarieren:

Code: CSS  [Auswählen]

div #rightcos div{
position:fixed;
top:30px;
left:1%;
}

Dadurch würde der Code in der index.html so aussehn:

Code: PHP  [Auswählen]

<div id="rightcol"><div>{$box_CART}{$box_ADMIN}</div>{$box_LOGIN}{$box_NEWSLETTER}{$box_BESTSELLERS}{$box_INFOBOX}{$box_CURRENCIES}{$box_MANUFACTURERS_INFO}{$box_MANUFACTURERS}</div>

Im kurzen heißt das, ALLE "<div>"-Blöcke, welche sich im "<div>"-Block mit der id "rightcol" befinden, werden mit dem jeweiligen CSS-Style versehen.

Ich habe mich für obige Variante entschieden, da ich diese schneller finde, bevor ich in der CSS-Datei herum irre.

Welche Variante ihr dafür nehmt, überlasse ich euch.

Gruss Dome

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

[h4g-seel]

Hab das Bilde vergessen

[noRiddle (revilonetz)]

Mit Verlaub,
das ist

• nicht zeitgemäß wenn man an die vielen verschiedenen Bildschirmgrößen bei den Besuchern denkt,
  Stichwort: responsive web design
• was dein CSS-Beispiel betrifft schlecht gelöst weil du dich
  
  • vertippt hast (#rightcos ?)
    und
  • dieser Selektor div #rightcol div zu Problemen führen kann wenn man noch andere div in der rightcol hat.
    besser, wenn schon, so:

Code: CSS  [Auswählen]

#rightcol > div {}

und noch besser mit einer Klasse

Code: CSS  [Auswählen]

#rightcol div.d-fixed {}

Was die Admin-Box betrifft ist das mit der Bildschirmgröße ja egal, du weißt ja auf welchem Screen du arbeitest und der ist wahrscheinlich nicht nur 980px breit.
Den Warenkorb, wenn man ihn denn immer im Bild lassen möchte, positioniert man dann schon besser irgendwo in den Header und diesen dann fixed oder wie immer...

Gruß,
noRiddle