Style-Wechsler

16. Okt 2005, 14:21

Hi Leute,

sagt mal: Habt Ihr eine Idee, wie man dem User die Möglichkeit an die Hand geben könnte, das Design komplett zu wechseln? Ihr kennt ja diese Style-Switcher, die das Layout bei gleichbleibendem Inhalt komplett verändern.

Es gibt aus meiner Sicht zwei Möglichkeiten:
1. Es wird nur die CSS gewechselt.
2. Es wird das zugrunde liegende Template gewechselt.

Wie der Aufruf der jeweils anderen CSS-Datei, bzw. des Templates im Quellcode funktioniert, kann ich mir schon vorstellen, aber mir ist nicht klar, wie man einen dauerhaften Layoutwechsel macht, der also auch nach einem Seitenwechsel das vom User gewählte Layout beibehält. Ich denke, man müsste das entweder über eine bei allen Links vom System angehängte Variable machen (ähnlich clang) oder aber die Userwahl in einer Session-ID abspeichern.

Andere Ideen?
Auch über konkrete Codebeispiele zu meinen Lösungsideen (ich weiß z.B. nur theoretisch, wie man das mit der Session-ID macht) wäre ich sehr danbkbar.

Liebe Grüße,
Peter.

16. Okt 2005, 15:19

Hi Peter,

schau dir mal www.public-4u.de an.

Dort ist oben rechts ein Darstellungs -Selectfeld.

Wenn das das ist wie du es haben willst, sag bescheid

Gruß,
Markus

16. Okt 2005, 16:26

Ja Markus,

genau sowas meine ich. Wie ich sehe, hast Du das mit einer jeweils anderen CSS-Datei gelöst.
Also sag ich hiermit Bescheid ...

Viele Grüße,
Peter.

16. Okt 2005, 19:44

Hi Peter,

du weisst zufällig, was eine SESSION in PHP ist? Damit hab ichs nämlich gemacht

Also:

Selektbox ins Template:

Code: Alles auswählen

<form action="index.php" method="post">
  <input type="hidden" name="article_id" value="<?php echo $this->getValue('article_id') ?>">
  <input type="hidden" name="clang" value="<?php echo $REX['CUR_CLANG'] ?>">
  <select name="css">
    <option value="css1">CSS 1</option>
    <option value="css2">CSS 2</option>
  <select>
</form>

in der index.php from Frontend ganz am Anfang folgendes rein: (CVS Vers nötig!)

Code: Alles auswählen

session_start();

Im Template ganz oben folgendes rein:

Code: Alles auswählen

if ( empty($_SESSION['REX']['CSS'])) {
  $_SESSION['REX']['CSS'] = 'css1';
}

if ( !empty( $_REQUEST['REX']['CSS'])) {
  $_SESSION['REX']['CSS'] = $_REQUEST['REX']['CSS'];
}

switch( $_SESSION['REX']['CSS']) {
  case 'css2': $css = 'style1.css'; break;
  case 'css1':
  default: $css = 'style1.css';
}

?>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="<?php echo $css ?>" media="screen" />
  </head>

Gruß,
Markus

17. Okt 2005, 10:41

Super Sache, Markus.
Vielen Dank!

Ich werde hier das Ergebnis Deiner Hilfe vorstellen, wenn es soweit ist. Da es aber nur für ein privates Projekt ist, kann es etwas dauern ...

Danke nochmals und schönen Tag,
Peter.

17. Okt 2005, 12:17

Markus,

es gibt noch ein Problem:
Wenn ich in der index.php vom Frontend das
session_start();
reinmache, gibt's massive Probleme im Backend.

Ich habe oft bei der Arbeit Frontend und Backend gleichzeitig offen, um die Änderungen zu kontrollieren. Und sobald das session_start() drin ist, passiert folgendes:
Ich fliege aus dem Backend raus und muss mich neu einloggen.
Ich erhalten Fehlermeldungen wie:
Warning: main(/layout/top.php): failed to open stream: No such file or directory in /server/redaxo/index.php on line 142
Warning: main(/layout/top.php): failed to open stream: No such file or directory in /server/redaxo/index.php on line 142
etc.

Hab ich das an die falsche Stelle gesetzt? Ich hab's ganz nach oben, in die zweite Zeile, direkt hinter:
<?

Peter.

jdlx · 17. Okt 2005, 13:18

pbickel hat geschrieben: 2. Es wird das zugrunde liegende Template gewechselt.

moin Peter,

CSS Umschaltung geht auch per javascript und cookies wenns sein muß.. mach ich bis dato so, wobei die Lösung per session id natürlich sinnvoller ist wenn man eh mit php arbeitet, insofern les ich den thread mit Interesse..

Ich benutze bei meiner aktuellen redaxo Baustelle ein solches javascript für ne temporäre Umschaltung zu ner Druckansicht:
http://borselfm.dyndns.org/index.php

Wobei ich in dem Fall die dauerhafte styleumschaltung aushebele, da die Druckansicht eben nur ad hoc benötige.. über ein onload erzwinge ich bei jedem neuen seitenaufruf die Standardansicht.

Als richtige Styleumschaltung hab ich das script hier eingesetzt:
http://piemont-pur.de
http://bootsale.de etwas sinnfrei in dem Fall, aber egal.. ;-)

pbickel hat geschrieben: 2. Es wird das zugrunde liegende Template gewechselt.

Diese Variante fände ich noch wesentlich interessanter, da man noch mehr Möglichkeiten hätte.. ich hab mal ne Frage dahingehend gepostet, ob man Templates per URL-Aufruf wählen/umschalten kann, aber da kam leider keine Antwort drauf, vermute also es geht so erstmal nicht..
Aber ich finde das wär ein schönes feature für kommende Versionen.. ;-)

greets,
Jan

17. Okt 2005, 13:32

Hallo Jan,

jeandeluxe hat geschrieben: Ich benutze bei meiner aktuellen redaxo Baustelle ein solches javascript für ne temporäre Umschaltung zu ner Druckansicht:
http://borselfm.dyndns.org/index.php

Das wird eine sehr schöne Website, Kompliment!
Auf die Idee mit Javascript kam ich noch nicht, aber da bin ich eh alles andere als ein Held, deswegen versuche ich erstmal mit der PHP-Variante klarzukommen.
Auch deshalb, weil immer alle von möglicherweise ausgeschaltetem Javascript reden, wobei ich bislang keinen derartigen Surfer getroffen habe ...

jeandeluxe hat geschrieben: ich hab mal ne Frage dahingehend gepostet, ob man Templates per URL-Aufruf wählen/umschalten kann, aber da kam leider keine Antwort drauf, vermute also es geht so erstmal nicht..

Ich versuche gerade, Markus' Ansatz so umzustricken, dass das auch mit Templates geht. Und es scheint zu klappen.
Ich mache folgendes:
Es gibt ein von allen Seiten verwendetes Main-Template, in dem nichts anderes steht, als Markus Styleswitcher, folgendermaßen modifiziert:

Code: Alles auswählen

<?
switch( $_SESSION['REX']['CSS']) {
 case '2':
  $style = '2';
  break;

 case '1':
 default:
 $style = '2';
} 

 include $REX[INCLUDE_PATH]."/generated/templates/".$style.".template";
?>

Jetzt muss man nur noch die switch case-Anweisung so anlegen, dass man für die style-Variable die jeweilige ID des zu verwendenden Templates einträgt.

Bin erst am Anfang meiner Experimente, aber es scheint zu funktionieren.

Viele Grüße,
Peter.

jdlx · 17. Okt 2005, 15:51

pbickel hat geschrieben:Hallo Jan,
Das wird eine sehr schöne Website, Kompliment!

Danke.. ;-)

pbickel hat geschrieben:Auf die Idee mit Javascript kam ich noch nicht, aber da bin ich eh alles andere als ein Held, deswegen versuche ich erstmal mit der PHP-Variante klarzukommen.
Auch deshalb, weil immer alle von möglicherweise ausgeschaltetem Javascript reden, wobei ich bislang keinen derartigen Surfer getroffen habe

Wollte es als Möglichkeit nur erwähnt haben.. de facto ist die PHP Variante im Kontext einer Redaxo Seite viel sinnvoller, zumal die js Umschaltung auch noch das Setzen von Cookies erfordert.. was für ne Spielerei wie ne Styleumschaltung eigentlich Unfug ist.

pbickel hat geschrieben:Ich versuche gerade, Markus' Ansatz so umzustricken, dass das auch mit Templates geht. Und es scheint zu klappen.
Ich mache folgendes:
... (code)

Bin gespannt auf deine Lösung.

Wobei meine Anforderungen für die Umformatierung zur Druckansicht etwas anders ist, da ich eigentlich nur eine nicht persistente Darstellung der Seite mittels eines anderen Templates bräuchte.
Daher war eben auch meine Frage im Raum gestanden ob Templates per URL schaltbar sind..
Insgesamt würde das wirklich ein weites Feld an zusätzlichen Möglichkeiten eröffnen, wie z.B. Code-Entrümpelung für reine Textdarstellung (Auflösung von div Boxen), komplette Umgestalltung auf HTML Ebene, für behindertengerechten Zugang optimierte Templates, ..etc.

U.a. würde eine echte Template-Umschaltung auch die Probleme einer reinen CSS Umschaltung ausräumen. Nach meiner Erfahrung muß explizit jedes CSS Attribut im alternativen Stylesheet "überschrieben" werden, damit es nicht aus Versehen in der alternativen Ansicht zum Zuge kommt.. Auch räumte man damit Probleme aus wenn z.B. mehr als ein Stylesheet die Standard Formatierung definiert.

cheers,
Jan

17. Okt 2005, 16:03

Hi Peter

pbickel hat geschrieben: es gibt noch ein Problem:
Wenn ich in der index.php vom Frontend das
session_start();
reinmache, gibt's massive Probleme im Backend.

Sorry, fehler von mir.

Das session_start() muss ins HEADER-Template rein.

z.b. so

Code: Alles auswählen

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de">
  <head>
.
.
.

Gruß,
Markus

17. Okt 2005, 16:22

Mist, will in meiner Variante noch nicht klappen.

Ich hab wie bereits geschrieben Deine Varianbte so modifiziert, dass keine CSS-Datei, sondern ein komplett anderes Template geladen wird.

Mein Haupttemplate enhtält nur:

Code: Alles auswählen

<?
// session_start();
if ( empty($_SESSION['REX']['CSS'])) {
  $_SESSION['REX']['CSS'] = '1';
}

if ( !empty( $_REQUEST['REX']['CSS'])) {
  $_SESSION['REX']['CSS'] = $_REQUEST['REX']['CSS'];
}

switch( $_SESSION['REX']['CSS']) {
 case '1':
  $style = '2';
  break;

 case '2':
 $style = '4';

 default:
 $style = '2';
} 

 include $REX[INCLUDE_PATH]."/generated/templates/".$style.".template";
?>

Das Haupttemplate ruft dann also z.B. das eigentliche Darstellungs-Template mit der ID auf.

Klappt auch, aber sobald ich dieses session_start() am Anfang auskommentiere, erhalte ich im Frontend nun folgenden Fehler:

Fatal error: Call to a member function on a non-object in /.../redaxo/include/classes/class.article.inc.php on line 130

Hast Du noch eine Idee, Markus?

Peter.

17. Okt 2005, 16:30

Hi Peter,

sieht für mich so aus, als würde der Fehler hier liegen:

Code: Alles auswählen

<input type="hidden" name="article_id" value="<?php echo $this->getValue('article_id') ?>">

Aber ich weiss noch nicht warum...

kann ich nen Zugang bekommen?

Gruß,
Markus

17. Okt 2005, 17:40

Hej,

sofern ich mich noch recht erinneren kann, wird auf einfah-fuer-alle.de ein Switcher beschrieben, der auf javascript und PHP basiert.

Thomas

25. Okt 2005, 18:57

Hi,

also wen's interessiert - hier meine Lösung.
Markus' Ansatz hat bei mir leider nicht funktioniert. Dafür hat mir Thomas ein Code-Schnipsel geschickt, das zum Ziel führte.

Ins Basis-Template ganz an den Anfang:

Code: Alles auswählen

<?php
session_start();
if ( isset($_GET['style']) ) {
 $_SESSION['style'] = $_GET['style'];
} elseif ( !isset($_SESSION['style']) ) {
 $_SESSION['style'] = '1';
}
?>

Der Rest ist dann nur noch Kinderspiel.
Wenn man CSS-Dateien mit indiviuellem Hintergrund wechseln will:

Code: Alles auswählen

<?
switch ($_SESSION['style']) {
 case '1':
 $css = 'background1.css';
 break;

 case '2':
 $css = 'background2.css';
 break;
 }
?>
<link href="files/<? echo $css; ?>" rel="stylesheet" media="screen" />

Zu sehen beispielsweise unter www.seg-holstein.de

Wenn man sogar die ganzen Templates wechseln will:

Code: Alles auswählen

<?php
switch ($_SESSION['style']) {
 case '1':
 $layout = '2';
 break;

 case '2':
 $layout = '5';
 $break;
 }

include $REX[INCLUDE_PATH]."/generated/templates/".$layout.".template";
?>

Mehr darf dann normalerweise nicht im Basis-Template stehen, da hier ja die kompletten Templates includet werden.

Und schließlich noch der Link für den Besucher zum Wechseln des Layouts:

Code: Alles auswählen

<? 
Layout:
echo " <a href='".$_SERVER[PHP_SELF]."?article_id=".$this->getValue('article_id')."&style=1'>1</a> |";
echo " <a href='".$_SERVER[PHP_SELF]."?article_id=".$this->getValue('article_id')."&style=2'>2</a> |";
?>

Viel Spaß,
Peter.

25. Okt 2005, 19:19

Hi

pbickel hat geschrieben: Und schließlich noch der Link für den Besucher zum Wechseln des Layouts:
Code: Alles auswählen
<? 
Layout:
echo " <a href='".$_SERVER[PHP_SELF]."?article_id=".$this->getValue('article_id')."&style=1'>1</a> |";
echo " <a href='".$_SERVER[PHP_SELF]."?article_id=".$this->getValue('article_id')."&style=2'>2</a> |";
?>

Das geht noch kürzer:

Code: Alles auswählen

<? 
Layout:
echo " <a href='". rex_getUrl( '', '', '&style=1') ."'>1</a> |";
echo " <a href='". rex_getUrl( '', '', '&style=2') ."'>2</a> |";
?>

Gruß,
Markus

25. Okt 2005, 19:40

kills hat geschrieben:Das geht noch kürzer:

Cool ...
Wie ist diese Funktion aufgebaut? Was könnte man zwischen die ersten beiden Anführungszeichen schreiben?

Peter.

26. Okt 2005, 08:10

Hej Peter,

redaxo/include/functions/function_rex_modrewrite.inc.php

Code: Alles auswählen

$url = rex_getUrl($id, $clang, $params);

zwischen den ersten Anführungszeichen kannst du optional eine andere ArtieklId setzen. Zwischen den zweiten Anführungszeichen eine SprachId falls du auf eine andere Sprache verweisen möchtest.

vg Thomas

jdlx · 26. Okt 2005, 12:52

pbickel hat geschrieben:Hi,

also wen's interessiert - hier meine Lösung.

Moin Peter,

vielen Dank dafür..!
Werd bei der nächsten sich bietenden Gelegenheit meine blöde JS/Cookie Konstruktion auf deine Variante umbauen.

greets,
Jan

26. Okt 2005, 14:16

Falls übrigens jemand Lust hat, meine Lösung zu verfeinern und dann den Code zu posten:
Eine interessante Sache wäre noch, das gewählte Layout in einem Cookie zu speichern und beim nächsten Besuch abzufragen. So würde das gewählte Layout nicht nur für die Dauer des Besuchs erhalten bleiben.

Schöne Grüße,
Peter.

26. Okt 2005, 14:30

Hi Peter,

das bekommst du doch auch alleine hin:

http://www.php.net/manual/de/function.setcookie.php

Gruß,
Markus

26. Okt 2005, 15:18

Hm, Cookies waren bisher in rotes Tuch für mich, aber dann will ich mal mein Glück versuchen ...
Wenn ich Erfolg habe, werde ich mein Code-Listung ergänzen.

Dank für den Doku-Link,
Peter.

26. Okt 2005, 16:04

Hi Peter,

und falls es nicht klappt, einfach Fragen...

Gruß,
Markus

Style-Wechsler

Style-Wechsler

Re: Style-Wechsler

Re: Style-Wechsler

Re: Style-Wechsler