Wix-Storage programmieren (Session)?

4 Antworten

Xearox
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik
28.01.2019, 20:39

Du möchtest, dass diese Abfrage immer wieder kommt, oder nur einmal?

Beides kannst du ganz einfach mit JavaScript machen.

z.B. so

<div id="topWrapper">
  <div id="ageCheck" class="show"></div>
  <div id="pageContent" class="hide"></div>
</div>

und deine CSS Datei sieht nun so aus:

.show{ display: block; }
.hide{ display: none; }

Nun kannst du in dem Button mit "Ja" einfach einfügen:

<button onclick="showPageContent()">Ja</button>

JavaScript

showPageContent() {
  let pageContent = document.getElementById("pageContent");
  let ageCheck= document.getElementById("ageCheck");
  pageContent.classList.toggle("show");
  pageContent.classList.toggle("hide");
  ageCheck.classList.toggle("show");
  ageCheck.classList.toggle("hide");
}

Wird man sicherlich einfacher machen können, bin allerdings zu sehr verwöhnt von VueJS, wo das nur en "Einzeiler" ist.

Wenn du nun das ganze permanent Speichern willst, setzt du einfach ein Cookie.

Wie das geht, guckst du hier: https://www.w3schools.com/js/js_cookies.asp
Win7User
28.01.2019, 21:10

Du kannst in einem Cookie speichern, ob das Alter schon bestätigt wurde. Hier ein Beispiel:

https://jsbin.com/wifanozibo/1/edit?html,css,output

https://output.jsbin.com/wifanozibo/1

Beispiel HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body onload="document.querySelector('#ageCheck').style.display = document.cookie.indexOf('is18') < 0 ? 'inherit' : 'none'">
  <div id="ageCheck">
    <h1>Altersüberprüfung</h1>
    <p>Um diesen Onlineshop zu nutzen, müssen sie mindestens 18 Jahre oder älter sein</p>
    <h3>Sind sie 18 oder älter?</h3>
    <div class="check">
      <button onclick="document.cookie = 'is18=true'; document.querySelector('#ageCheck').style.display = 'none'">Ja</button>
      <button>Nein</button>
    </div>
  </div>
</body>
</html>

Beispiel CSS

#ageCheck
{
  border: solid 4px red;
  padding: 20px;
  padding-top: 0;
  text-align: center;
  max-width: 300px;
  margin: auto;
}

#ageCheck h1
{ text-decoration: underline }

#ageCheck h3
{ color: red }

#ageCheck .check
{
  display: flex;
}

#ageCheck button
{
  flex-grow: 1;
  margin: 0 5px;
}
Franky12345678
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, Technologie
28.01.2019, 23:28

Was ist "Wix-Storage"? Naja, ich frage lieber nicht, wozu du nen ab-18 brauchst :).

Reicht eine JavaScript-seitige Lösung überhaupt aus? JavaScript kann deaktiviert sein und du kannst schlecht nachweisen, dass der User die Zustimmung durchgeführt hat.

Wenn du das serverseitige PHP modifizieren kannst, würde ich es php-seitig so machen:

(nur Pseudo-Pseudocode, um das Prinzip zu erklären, wie ich es machen würde^^)

Von jeder PHP-Datei zu Beginn in etwa so:
if (!cookie_gesetzt) {
	1. Die Url der Anfrage merken (url in der Session speichern o.ä.)
	2. Auf ageconfirm.php mit der Altersbestätigung weiterleiten
	3. die();
}

ageconfirm.php sieht so aus:
if (is_post_anfrage_vom_formular) {
	1. Inhalt der Anfrage auf Gültigkeit prüfen. Wenn nicht: die();
	2. Ja gedrückt? Cookie setzen und auf die gemerkte Url zurückleite + die() (bitte nicht auf die Startseite! Das ist sehr nervig für den User!!)
	3. Nein gedrückt? Auf Wiedersehen: echo("kein Zugriff, da noch nicht alt genug"); die();
} else {
	1. Bestätigungsformular hier ausgeben und so konfigurieren, dass es bei "ja" eine Post-Anfrage stellt. Evtl. mit Tokens o.ä. gegen Missbrauch absichern.
}

So eine Lösung hat erhebliche Vorteile gegenüber der JavaScript-Lösung:

  • Funktioniert auch bei abgestelltem JavaScript
  • Funktioniert auch, wenn die JavaScript-Routine versagt
  • Es wird nicht ein einziges Byte Shop-HTML übertragen, eh nicht die Altersbestätigung erfolgt ist
  • Du kannst die Bestätigung serverseitig speichern und hast sie im Falle des Falles als Nachweis (denke aber an die DSGVO!).
  • Im gleichen Zug könntest du auch die Datenschutzerklärung gleich mitbestätigen lassen, falls dir das noch fehlt.

Eine JavaScript-Lösung hätte folgende Risiken:

  • Der Browser hat einen Bug und verarbeitet den Code unsauber, so dass der Dialog nicht erscheint (weil irgendein div 0px hoch ist oder weil IE8 o.ä.).
  • Mit einer Insellösung in den vorhandenen Shop-Code einzugreifen, funktioniert nur selten zuverlässig, da die Shop-Seite im Hintergrund voll aktiv ist.
  • User ohne JavaScript sehen nichts (weil der Shop per CSS ausgeblendet ist und der Dialog nicht geladen wird)
  • Wenn nur die CSS-Datei Ladehemmungen hat, wird der Shop trotzdem sichtbar geladen, evtl. mit allen bildern etc., nur eben ohne das CSS.
  • Du hast mit Browser-Bugs zu kämpfen und evtl. irgendwann ein Problem, weil dein Dialog im Browser von Smart-TV xyz nicht richtig funktioniert hat.
  • Kann man umschiffen, ohne auf "Ja" zu klicken (F12 -> Div auswählen und DEL drücken).
Woher ich das weiß:Hobby