Logout im Login Bereich
Author: Patrick S.
Visited 979,
Followers 2,
Shared 0
Guten Tag, Ich würde mich sehr Freuen, wenn es bald entweder die Möglichkeit geben würde das Login/Logout Objekt in das Menü direkt einzubinden (gerade für Mobile Seiten nützlich), oder zumindest ein Logout mit Namen im Registrierungsfebster anstatt der Login Felder, wenn sich ein Benutzer angemeldet hat. So gibt es derzeit Keine elegante Möglichkeit eine Logout Funktion für Mobile Kunden anzubieten, ohne den Head Bereich komplett vollzumüllen. Bitte um Rückmeldung.
Posted on the
Author
P.S Es wäre ebenfalls schon hilfreich dass Login/Logout Objekt als Overlay anueigen zu Lassen. Das einzige was momentan geht, ist es eine Extra Seite mit dem Objek zu erstellen und diese dann im Menu als Externe Quelle in einer ShowBox anzeigen zu lassen. Das Problem, auch hierbei siehts einerseits nicht wirklich schön aus und andererseits wird man dann immer zur entsprechenden Seite weitergeleitet, jedoch in der ShowBox und nicht im Hauptfenster ist demnach leider Keine gute Lösung wie ich bemerkt habe. Im Notfall werde ich mal versuchen dass Login Febster überlappend und Groß im Header zu platzieren und mit eigenem Css und Javascript das Objekt standardmäßig ausblenden (display:none !important;) und Background Definieren und mit JS ne Display Block funktion Definieren.
Eine elegante Lösung habe ich nicht und testen kann ich nur in der Smartphone-Emulation.
Aber so schlimm ist es auch wieder nicht, wenn das Login / Logout im Header ist, siehe
-----
----------
------------
Meine Demo-Shop zum Anschauen, siehe
>> http://finde-links.de/123shop-hosteurope/ (Test-Domain ohne SSL)
Alternative wäre einen Kundenbereich-Seite, dann könnten sich Kunden dort anmelden, siehe
-----
So aktivieren Sie die Kundenregistrierung für Ihren Onlineshop
Mit WebSite X5 Professional können Sie Ihren Onlineshop optimieren, sodass Ihre Kunden:
Um dies zu gewährleisten, müssen Sie:
>> https://guide.websitex5.com/de/support/solutions/articles/44001451762-so-aktivieren-sie-die-kundenregistrierung-f%C3%BCr-ihren-onlineshop
-----
Author
Erstens Sorry Für meine Ehrlichkeit, aber deine Login Größe für solch kleinen Displays ist viel zu Groß und meine Seite benutze ich zum Verkaufen muss demnach auf jedenfall Einkaufskorb + Anstehendem Betrag drauf sein da hab ich kein platz mehr für solche spielereien Außerdem Soll auch immer der Name angezeigt werden, welcher sich gerade eingeloggt hat, damit auch Familienhäuser mit mehreren Leuten aber vieleicht nur einem Handy kein Problem damit haben, sich bei mir aus und schnell wieder einzuloggen.
Author
Würde gerne meinen Screenshot Posten, jedoch übersteigt die Größe des Bildes die erlaupten Bytes?
Falls jemand trotzdem sich ein Bild davon machen möchte, so kann er sich es bei www.verkaufpilot.de mal mit dem Handy anschauen.
Author
Und falls jemand sich wundert, warum boch einiges Unvollstaändig ist, ich bin noch in der Testphase meines eigenen kleinen Reseller Nebenjobs möchte aber erst anfangen, wenn alles perfekt ist.
WEnn du keinen Platz für den Login reservieren willst, dann wird es schwierig! Derzeit ist das Login Widget am HAndy ausgeblendet. MAn kann doch leicht in der Struktur des Templates den Header etwas vergrößern, damit das Login platz hat. Ausserdem kann man ein 2. Login/Logout mit Einstellungen Logout darunter legen denn dieses taucht sowieso erst auf wenn man eingeloggt ist und das Login blendet automatisch aus.
Das mit dem NAmen müsste doch funktionieren beim Logout! Jedenfalls beim orangen Widget!
Wenn du eine extra Seite hast mit dem Login / Logout Widget (du musst beide einfügen) kannst du diese Seite unter Eigenschaften beim Reiter "GRafik" ohne Template einstellen und die Maße korrigieren damit beim Popup Fenster nur der Bereich für Login angezeigt wird.
Author
Sieht halt dann trotzdem Scheiße aus, da dass kein Overlay ist, wie es eigent sein sollte sondern die Showbox mitsammt den in diesem Fall unnützen Elementen zudem wird man dann immer weitergeleitet, dies sollte aber dann im Hauptfenster und nicht in der Dämlichen ShowBox passieren und das ShowBox Fenster sollte sich dann wieder Schließen. Am besten wärs mir direkt im Menu. Und ein Objekt, welches unter dem Logout Objekt liegt, bringt gar nichts! auf die Idee bin ich auch schon gekommen und es lies sich überhaupt nicht anklicken, weil der Übergeordnete Div Container nähmlich nicht ausgeblendet wird!!!! Nächstes Mal erst selber Testen und dann Posten.
Author
Habs jetzt halt so gemacht, dass ich alle Felder des Login Bereichs auf Null gesetzt habe, sodass nur der Login Button zu sehen ist. Ist zwar auch nicht wirklich Elegant, jedoch für mich die bisher akzeptabelste Notlösung. Wird auch auf die Registrierungsseite weitergeleitet, auch wenn dann angezeigt wird, dass Benutzername/Passwort falsch ist (man hat ja auch keins angegeben).
Author
Ich wünsche mir von Incomedia, dass die das Menu Element einfach noch etwas ausbauen, sodass man Objekte wie das Login Objekt auch in das Menu Objekt Selber Platzieren kann!!!
Author
Also bitte werte Community bitte auch Sinnvolles Posten was auch Hilfreich ist, ich brauche Vorschläge welche auch Tatsächlich funktionieren und nicht Vermutmaßungen, welche sich als Falsch herausstellen.
In meinem Demo-Shop ist im Header nur ein einziges Login & Logut Objekt vorhanden.
Wenn die Besucher/Kunden nicht eingeloggt sind, dann zeigt es die Eingabefelder an und wenn die Besucher/Kunden eingeloggt sind, dann erscheint das "Hallo" und der Logout-Button.
-----
-----
Author
Die allerbeste Möglichkeit wäre eine Leere Seite zu Erstellen, einen Button zu Erstellen mit dem Link zur Registrierungsseite den HTML Code abschließend zu Kopieren und diesen dann in den Div Container des Anmelde Buttons auszutauschen, dann noch die CSS Datei des Erstellten Objektes Verlinken und Voilla. Habe ich schon einmal gemacht und weiß dass das Funktioniert. Problem da dass im Header Ist, muss man dass in Allen Seiten verändern und bei der nächsten kleinsten änderung des Headers ist alles wieder Futsch!!!
Leider habe ich keine Handy, deshalb kann ich die Funktionen bzw. Nichtfunktionen nicht testen.
Demo-Shop >> http://finde-links.de/123shop-hosteurope/
Ich kenne zwar die Ansicht der Handysimulation in Firefox auf dem Notebook aussieht, aber ich weiß nicht wie das auf den Handys genau aussieht und wie es zu bedienen ist.
Author
An Daniel W. Ich habe aber keinen Platz in meinem Header für die Login Felder, da ich sowohl Warenkorb als auch die Gesamtmengenzahl meines Onlineshops dort schon platziert habe!!!!
Author
IMG_0739.PNG (1125×2436) (verkaufpilot.de)
Ich habe bei meinem Demo-Shop eine geschützte Kundenbereich-Seite, die im Menü verlinkt ist und beim Klick die Eingabefelder für Anmeldung und Registrierung anzeigt. Dabei könnte auf das Login & Logout Objekt im Header verzichtet werden.
Hier könnte man auch das Login & Logout Objekt unterbringen, das eingeloggte Besucher/Kunden mit dem Namen begrüßt und den Logout-Button anbietet.
Wäre das nicht die gesuchte Lösung?
-----
Author
Dass ist ein Screenshot von meinem Iphone so sieht deine Seite aus.
Author
Jain Ich will dass der Name der Eingeloggten Person Angezeigt wird.
Author
iiii
Author
Im Moment Siehts So aus
Author
Und So aufm Handy Wie man sehen kann, ist da Definitiv kein Platz für Login Felder, es sein denn Ich mache Sie extrem Klein.
Beim Login & Logout Objekt ist der Text vorgegeben nach Schema:
-----
Hallo Vorname [ Logout ]
-----
Von den gespeicherten Besuchen/Kunden-Daten wird nur der Vorname verwendet - stört das?
Da wo jetzt ...
Hallo Patrick [ Abmelden ]
... steht, da sind in meinem Demo-Shop entweder die Eingabefelder zu sehen sein oder ...
Hallo Patrick [ Logout ]
... aber nicht beides zur gleichen Zeit, also es würde kein weiterer Platz gebraucht.
Screenshot siehe 3. Post von oben - sichtbar im Header entweder 1 oder 2, aber nicht beide.
1) Eingabefelder
oder
2) Hallo Admin [ Logout ]
Wenn die Warenkorb-Summe etwas kleiner wäre, dann würde daneben das Login & Logout passen.
Author
Ok Das würde dann in etwa So aussehen!!!!
Author
Also wie stellst du dir das Vor?????
Author
Und dass wäre die Maximale Breite der Felder OHNE Rand
Author
Und was ich auf Keinen Fall will, ist es dass bei kleineren Geräten die Objekte teilweise verschwinden!!!!
Deshalb bleibe ich bei der kleineren Auflösung. P.S mit einem einfachen flex:wrap; im flex Container wäre dass Problem gelöst aber das hat Incomedia wohl auch verpennt.
Author
Und die Warenkorb Summe zu Verkleinern, müsste Ich ebenfalls den Einkaufswagen verkleinern wegen des Gesamtbildes. Dann wäre aber dazwischen ne große Lücke und das Bash Symbol wäre fast unleserlich Klein. Also keine so gute Alternative. Aus,ßerdem soll manns ja auch gut antippen könne, auch für Leute mit etwas dickeren Fingern.
Author
Denn weiter Rechts kann ich die WarenkorbSumme nicht setzen, da sons keine Größeren Beträge zu sehen wären. Selbst dass musste ich mit einem float:left korrigieren.
Author
Da Passt sich ja leider Gottes überhaupt nichts selbstständig an CSS schreibt man am Besten in Größen von vw und flex:wrap; Alles andere in %!!!! Es sei denn jemand weis ganz zufällig das Bash Symbol Getrennt zu Vergrößern!!!
So - ich glaube, dass ich jetzt die Lösung gefunden habe, siehe
Demo-Shop >>http://finde-links.de/123shop-hosteurope/index.html (evtl. Taste F5)
Ich habe das Login & Logout Objekt im Header meines Demo-Shop geändert, siehe Screenshot
Die Eingabefelder werden jetzt nicht mehr angezeigt, verbrauchen also keinen Platz mehr.
Es wird nur noch "Hallo Name [ Logout ]" angezeigt, wenn die Besucher/Kunden eingeloggt sind.
Ich habe einen Button mit der Aufschrift "Anmelden" im Header platziert und mit der Seite "Kundenbereich" verlinkt, dort können sich die Besucher/Kunden einloggen bzw. registrieren.
Weiter unten sind die Screenshots (Handy) Nr. 2 (vor dem Login) und Nr. 3 (nach dem Login)
-----
-----
-----
Sorry - auf Versehen das "Durchgestrichen" angeklickt - hier ohne "Durchgestrichen"
-------------
So - ich glaube, dass ich jetzt die Lösung gefunden habe, siehe
Demo-Shop >>http://finde-links.de/123shop-hosteurope/index.html (evtl. Taste F5)
Ich habe das Login & Logout Objekt im Header meines Demo-Shop geändert, siehe Screenshot
Die Eingabefelder werden jetzt nicht mehr angezeigt, verbrauchen also keinen Platz mehr.
Es wird nur noch "Hallo Name [ Logout ]" angezeigt, wenn die Besucher/Kunden eingeloggt sind.
Ich habe einen Button mit der Aufschrift "Anmelden" im Header platziert und mit der Seite "Kundenbereich" verlinkt, dort können sich die Besucher/Kunden einloggen bzw. registrieren.
Weiter unten sind die Screenshots (Handy) Nr. 2 (vor dem Login) und Nr. 3 (nach dem Login)
Author
Achso, aber der Logout Button soll den Login Button doch ersetzen.
Kleiner Schönheitsfehler - ich schaue gleich mal, ob ich das anders machen kann, das dauert etwas.
Falls nicht, dann müssten die Moderatoren mit Tipps helfen.
Author
Eine Alternative wäre einen Eventlistener In Javascript zu schreiben, welcher den einen Div des Logins ausblendet und den des Logout Buttons Einblendet, natürlich als toggle Function. Wenn man dass mit den Klassen macht, so wäre dass auch mit allen Objekten des gleichrn Typs gleich.
Author
Ich Probiers Mal
Vermutlich geht es nur mit Javascript, leider fehlen mir die Javascript-Programmierkenntnisse. Aber der Code dürfte nicht universell sein, sondern nur für eine spezielle Webseite - wie der Code von KolAsim.
Das Login & Logout Objekte bietet 4 verschiedene Einstellungen für die Anzeige, aber die gesuchte Möglichkeiten ist nicht dabei.
Ich habe für mich eine Lösung ohne Javascript gefunden, in dem ich den Buttons mit ...
[ Anmelden / Kundenbereich ]
... beschriftet habe. Der Button hat eine Doppelfunktion durch Verlinkung mit dem Kundenbereich.
Und es ist rechts immer noch reichlich Platz für den Warenkorb.
----- Screenshot Smartphone-Ansicht -----
Author
Ich habs Hinbekommen
Author
Hierfür sollte sowieso der local store völlig ausreichen..
Läuft Super Aber Danke für die Hilfe.
Falls jemand Interesse Hat: Hier der Code:
<script>
window.onload = function() {
document.getElementById("imHeader_imObjectButton_33").className = localStorage.getItem("MyClass");
};
document.getElementById("imHeader_pluginAppObj_29").addEventListener("click", myFunction, false);
function myFunction() {
var x = document.getElementById("imHeader_imObjectButton_33");
x.className = (x.className === "DisplayLoginOn") ? "" : "DisplayLoginOn",
localStorage.setItem('MyClass', 'DisplayLoginOn');
};
document.getElementById("imHeader_imObjectButton_33").addEventListener("click", myFunction2, false);
function myFunction2() {
var x = document.getElementById("imHeader_imObjectButton_33");
x.className = (x.className === "DisplayLoginOn") ? "" : "",
localStorage.setItem('MyClass', 'DisplayLoginOff');
};
</script>
CSS:
#imHeader_imObjectButton_33{
display:none;
}
.DisplayLoginOn{
display:block !important;
}
Author
Zumindest Bis Incomedia ein Update rausbringt
Author
Achso Hätte ich fast Vergessen wenn einer den Button an der gleiche legt den z-index hochzuschrauben.
Sehr wahrscheinlich müssen die Benutzer des hier geposteten Codes anstatt der Zahlen _29 und _33 selber im eigenen Quelltext ermitteln welche Zahlen für sie zutreffen und den Code angepassen.
Viele Nutzer von WebSite X5 dürften damit überfordert sein - nicht umsonst braucht KolAsim die URL der Webseite, um den Code individuell anzupassen und zu testen.
Aber sicherlich können die einen oder anderen WebSite X5 Nutzer etwas von den Infos hier nutzen.
Author
Hat leider nicht ganz den gewünschten Effekt, da der Button Verschwindet, ob man sich tatsächlich angemeldet hat oder nicht. Aber die andere Option sind halt auch wieder beide Buttons da, ob man ihn nun Umbenennt, oder nicht ändert sich leider nichts daran. Da Lebe ich lieber damit die Meldung beim Anmelden angezeigt zu bekommen.
Author
Habs endlich Hinbekommen das Objekt Zu meiner Benutzerdefinierten Seite, welche ich AppRessources genannt habe hinzugefügt, dann den HTML Code incl. den CSS & JS Scripts 1:1 in ein extra HTML Object an der gleichen Stelle, wie das frühere Original im Header platziert und dann den Code vom Anmelde Button (<input type="submit" value="Anmelden" class="imLoginSubmit btnCustomStyle btnOptionStyle ">) in (<input type="button" onclick="location.href='/imlogin.php';" value="Anmelden" class="imLoginSubmit btnCustomStyle btnOptionStyle ">) Abgeändert.
Bei meinem Demo-Shop habe ich einige Anpassungen gemacht - hier in der Handy-Simulation.
1. Screenshot mit "Logout" und der 2. Screenshot ohne "Logout" - beides sehr übersichtlich.
Und wenn der Hinweis "Demo Shop" weg ist, dann wäre oben noch zusätzlicher Platz.
-----
-----
Author
Jetzt hat es nur noch den Nachteil, dass der Button erst verschindet, wenn die Seite Vollständig geladen ist.
Mal Sehen, ob sich dieses Fenomen mit einer Document Ready Function lösen lasst.
Author
Das sind doch nur Positionings und Farbliche Anpassungen, ich will nunmal keine Zwei Buttons zum Anmelden/Ausloggen auf einmal.
Author
Hab ein Script geschrieben, welches das Phänomen fast eliminiert:
<script>
$(document).ready(function(){
var x = document.getElementById("RemoveClass");
x.classList.remove("DisplayLoginOn");
});
</script>
CSS:
.DisplayLoginOn{
display:none !important;
}
HTML:
<div id="RemoveClass" class="DisplayLoginOn imLoginBlock imLoginBlockPulsante loginfontSize"><input type="submit" onclick="location.href='/imlogin.php';" value="Anmelden" class="imLoginSubmit btnCustomStyle btnOptionStyle "></div>
Author
Habe eine Vergleichsweise bessere Alternative Gefunden. Einfach eine Async Function Erstellen, hier der Code:
<script>
var x = document.getElementById("RemoveClass");
function Async() {
return new Promise((resolve, reject) => {
// here our function should be implemented
setTimeout(() => {
x.classList.remove("DisplayLoginOn");
resolve();
;
}, 2500); **
});
}
async function Caller() {
console.log('Caller');
await Async();
console.log('After waiting');
}
Caller();
</script>
Wenns nicht passt, einfach ** beliebig Verändern.
Author
Hab ein bischen Rumgespielt und habe gemerkt, dass 1500 der Ideale Wert ist, Offenbar ist dass beim Standardcode auch eine solche Async Function Vorhanden:) Denn es gibt überhaupt keinen Zeitlichen Unterschied, Zwischen den Ladezeiten der Anderen Objekte, und meiner Erstellten Async Function. Egal wieviele Tabs Geöffnet sind, oder der Cache geleert wurde.
Author
<div style="position:relative;width:fit-content;height:fit-content;">
<a style="position:absolute;top:20px;right:1rem;opacity:0.8;" href="https://clipchamp.com/watch/zPqJbjLwZbV?utm_source=embed&utm_medium=embed&utm_campaign=watch">
<img loading="lazy" style="height:22px;" src="https://clipchamp.com/e.svg" alt="Made with Clipchamp" />
</a>
<iframe allow="autoplay;" allowfullscreen style="border:none" src="https://clipchamp.com/watch/zPqJbjLwZbV/embed" width="640" height="360"></iframe>
</div>
Author
Das Ergebnis
Author
Natürlich wäre es noch besser, dass ganze ins Menü einbinden zu können, und das ganze selber zu machen, wäre selbst für mich zu viel Arbeit.
Author
Das beste daran ist, dass wenn Ihr das Originale Objekt Verändert, verändert sich dadurch automatisch auch dass Objekt im Header, da die Klassen und die IDs gleich bleiben. und nur die verlinkte CSS/JS Datei verändert wird.
Author
Author
Hier Mal Alle Schritte.