ANLEITUNG: Versandadresse - Layout für Packstation auf Knopfdruck ändern

[japadi83]

Hallo,

ich hoffe ich bin hier in der richtigen Kategorie gelandet, und zwar suche ich nach einer Möglichkeit das Layout für die Adresseingabe auf "Knopfdruck" zu wechseln.

Also wenn ein User statt einer Hausanschrift eine Packstation als Versandadresse anlegen möchte, soll per Klick auf ein Packstationlogo das Layout dahin gehend geändert werden:
Die Beschriftung der Eingabefelder soll sich ändern und es sollen zur Erläuterung noch Grafiken eingebaut werden, sowie weitere Texte und Links zum Packstationfinder u.s.w.

Hintergrund der Sache ist, dass Kunden ohne Packstation nicht durch Packstationsbezeichnungen wie z.b. Postnummer "verwirrt" werden und zum anderen, dass Packstation Benutzer klare Anweisungen bekommen wo was eingetragen wird.

Ist es überhaupt möglich die Begriffe zu ändern, oder kann man stattdessen über bzw. neben den Feldern weitere Texte und Grafiken per "Knopfdruck" anzeigen/verschwinden lassen?  :

Gruß Patrick

[EDIT Tomcraft 07.10.2010: Hier geht es direkt zur Anleitung.]



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

[franky_n]

Hallo japadi83,

ich denke so ohne Weiteres ist das nicht umsetzbar da man die geänderten Daten dann ja auch in der Datenbank abspeichern muß.
Das sind nicht nur 2 Codezeilen...
Ich denke das wäre eher was für "Jobs/Codinganfragen"...

Viele Grüße

Franky

[japadi83]

Mir kam da gestern Abend noch ne Idee, ich versuche das ganze jetzt mal per css display: none; und block + switch link.

[franky_n]

Hallo japadi83,

wenn Du nur die gleichen Felder(!) anders benennen willst, dann gehts auch per css...
Willst Du noch weitere Infos dabei speichern musst Du zwangsläufig beiprogrammieren da es in der DB abgespeichert werden soll...

Viele Grüße

Franky

[japadi83]

Danke für den Hinweis, aber ich denke für meine Zwecke passt meine Lösung wie ich sie jetzt habe:
Eine Grafik die auf klick zwischen hide und show wechselt, d.h. wenn ich auf die Grafik klicke erscheinen in Tabellenzeilen hinter den Eingabefeldern entsprechende Hinweise für Packstation Nutzer.

[xhost]

Hallo

wenn Du nur die gleichen Felder(!) anders benennen willst, dann gehts auch per css...

Wie könnte man dies per CSS lösen?

Danke für den Hinweis, aber ich denke für meine Zwecke passt meine Lösung wie ich sie jetzt habe:
Eine Grafik die auf klick zwischen hide und show wechselt, d.h. wenn ich auf die Grafik klicke erscheinen in Tabellenzeilen hinter den Eingabefeldern entsprechende Hinweise für Packstation Nutzer.

Wie sieht deine Lösung aus?

Danke und Gruss
x-host

[japadi83]

Hi x-host,

hab dir auf deine PM geantwortet, falls von anderen auch Interesse besteht kann ich das auch gern nochmal hier im Forum auflisten was ich verändert habe?!

Gruß Patrick

[Tomcraft]

Da das bestimmt noch andere interessiert wäre es toll, wenn du deine Lösung hier bereit stellst.

Grüße

Torsten

[japadi83]

Also hier mal eine Zusammenfassung meiner Änderungen für meine Variante der Eingabemöglichkeit für Packstation Kunden:

Da mir ein ändern der Felderbezeichungen zu tiefgreifend erscheint, habe ich stattdessen die Tabelle der Adresseingabe erweitert, sodass per Klick auf einen Link bzw. eine Grafik hinter den Eingabefeldern Hinweise für die Eingabe der Packstationdaten erscheinen:

Dateien die zu ändern sind:

templates/templatename/stylesheet.css
templates/templatename/javascript/general.js.php
templates/templatename/module/address_book_details.html
templates/templatename/module/checkout_new_address.html

sowie eine Datei neu anlegen:
templates/templatename/javascript/hide.js

in die stylesheet.css einfügen:

Code: CSS  [Auswählen]

/*BOF japadi83 Sichtbarkeit hidden / unhidden (Packstation) */
.hidden { display: none;
text-align:left;
color: red;
}
.unhidden { display: block;
text-align:left;
color: red;
}
/*EOFjapadi83 Sichtbarkeit hidden / unhidden (Packstation) */

in der general.js.php einfügen:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/hide.js" type="text/javascript"></script>

eine Datei anlegen Namens hide.js mit Inhalt:

Code: Javascript  [Auswählen]

 function unhide(e) {
 var item = document.getElementById(e);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }

in der adress_book_details.html bzw. analog dazu in der checkout_new_address.html ändern:

über der Tabelle in Zeile 4 <table width="100%" border="0" cellspacing="2" cellpadding="4"> einfügen:

Code: PHP  [Auswählen]

<!-- BOF japadi83 Packstationbutton link -->
<a href="javascript:unhide('packhide1');unhide('packhide2');unhide('packhide3');unhide('packhide4');"><img src="[pfad/button.jpg]" alt="Versand an DHL Packstation" title="Versand an DHL Packstation"></a>
<!-- BOF japadi83 Packstationbutton link -->

in Zeile 10/11 die Breite ändern:

Code: PHP  [Auswählen]

    <td width="95">{#text_gender#}</td>
   <td width="145">

Zeile 35 hinter: <td class="inputRequirement">{$INPUT_COMPANY}</td>

Code: PHP  [Auswählen]

<td class="hidden" id="packhide1"><img src="[pfad/pfeil.jpg]" style="vertical-align:middle" alt="Pfeil nach link" title="Pfeil nach links"> <img src="[pfad/logo.jpg]" style="vertical-align:middle" alt="Packstation" title="Packstation"> <strong>Ihre Postnummer</strong></td>

Zeile 44 hinter: <td class="inputRequirement">{$INPUT_STREET}</td>

Code: PHP  [Auswählen]

<td class="hidden" id="packhide2"><img src="[pfad/pfeil.jpg]" style="vertical-align:middle" alt="Pfeil nach link" title="Pfeil nach links"> <img src="[pfad/logo.jpg]" style="vertical-align:middle" alt="Packstation" title="Packstation"> <strong>Packstation, Nr.</strong></td>

Zeile 54 hinter: <td class="inputRequirement">{$INPUT_CODE}</td>

Code: PHP  [Auswählen]

<td class="hidden" id="packhide3"><img src="[pfad/pfeil.jpg]" style="vertical-align:middle" alt="Pfeil nach link" title="Pfeil nach links"> <img src="[pfad/logo.jpg]" style="vertical-align:middle" alt="Packstation" title="Packstation"> <strong>Postleitzahl</strong></td>

Zeile 58 hinter: <td class="inputRequirement">{$INPUT_CITY}</td>

Code: PHP  [Auswählen]

<td class="hidden" id="packhide4"><img src="[pfad/pfeil.jpg]" style="vertical-align:middle" alt="Pfeil nach link" title="Pfeil nach links"> <img src="[pfad/logo.jpg]" style="vertical-align:middle" alt="Packstation" title="Packstation"> <strong>Ort Ihrer Packstation</strong></td>

Des weiteren werden 3 Grafiken benötigt bzw. müssten die Grafikangaben durch Textlinks ersetzt werden:

[pfad/button.jpg] Logo für das aktivieren der Anzeige
[pfad/pfeil.jog] der kleine Pfeil
[pfad/logo.jpg] das Logo Packstation in der Bezeichung

Das sollte es gewesen sein.
Vielleicht nicht die sauberste Variante, aber fürs erste eine praktikable Lösung die ich mir aus der "Not" zusammengebastelt habe. Verbesserungsvorschläge sind sehr willkommen!

Gruß Patrick

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

[Tomcraft]

Das ist aber eine prima Anleitung, vielen Dank dafür!

Grüße

Torsten

[japadi83]

Hey Torsten, vielen Dank für das "korrigieren" der Quellcodes, so sollte es ursprünglich auch aussehen...  
Wie kriege ich das zukünftig auf Anhieb hin? dachte mit den Buttons PHP CSS und co würde das so aussehen, aber das wars leider nicht *g*

Gruß Patrick

[Tomcraft]

Das Forum spinnt ab und zu.

Nicht zu übel nehmen, wir migrieren bald auf ein neues Forum.

Grüße

Torsten

[guensi]

[...]
Vielleicht nicht die sauberste Variante, aber fürs erste eine praktikable Lösung die ich mir aus der "Not" zusammengebastelt habe. [...]

Eher im Gegenteil, sauberer gehts kaum.
Es werden keine Shopfunktionen geändert, sondern lediglich Erweiterungen eingebaut, die keinen Einfluss auf sonstige Funktionen haben sollten. Damit sollte das Konfliktpotential auf ein Minimum reduziert sein.

[xhost]

Herzlichen Dank auch von mir.

[japadi83]

Vielen Dank für die Blumen guensi *g*
Ich habe hier schon so viel dazugelernt und somit auch Nutzen aus dem Forum gezogen,
da freut es mich wenn ich mit meinem kleinen Knowhow auch mal was beitragen kann.

Gruß Patrick