Wix.com Velo mit Javascript-Code?
Guten Tag
Im Bild unten seht ihr einen Javascript-Code, den ich auf meiner Webseite (erstellt mit wix.com) eingebunden habe.
Als absoluter Javascript-Anfänger habe ich nun leider keine Ahnung, wieso dieser Code nicht funktioniert.
Der Code soll eines meiner Textfelder (#text8) auf das Wort "Verkauft" überprüfen. Das Textfeld befindet sich in einem repeater welcher mit einer Datenbank verknüpft ist. Sollte hier "Verkauft" stehen, soll die Farbe einer Box (auch in diesem repeater - #box1) gewechselt werden.
Mit meinem Beispiel werden nun aber alle Boxen in diesem repeater rot angezeigt - egal ob im Textfeld Verkauft steht oder nicht.
Hoffe, ich habe mein Problem einigermassen verständlich beschrieben und bedanke mit jetzt schon für eure Vorschläge.
Was verstehst Du unter einem "Repeater"? Kannst Du mal den dazugehörigen HTML-Code posten?
Da das ganze mit Wix.com erstellt wurde, habe ich hier keinen HTML-Code. Ein Repeater ist das "Ding" bei Wix, welches im Frontend die Datenbankeinträge wiedergibt.
3 Antworten
ich spreche kaum Javascript, doch auf den ersten Blick fällt mir auf, dass das Vergleichzeichen und das Zuweisungszeichen ident sind, was nicht sein darf.
Oft gibt es == oder != oder 0 oder :=
Wenn Du eine Datenbank im Hintergrund hast, hast Du vermutlich auch PHP. Ich würde es mit PHP lösen, weil das viel robuster ist als Javascript.
Die Variable data zeigt nur auf eine Textfekd. Um an den Wert in der Box zu kommen, musst du erst noch das text-Property aufrufen.
Der String-Vergleich erfolgt mit dem abstrakten (==) oder dem strikten Vergleichsoperator (===). Du hast in deinem obigen Snippet den Zuweisungsoperator verwendet ('Verkauft' wird data zugewiesen, das Ergebnis ist immer wahr).
let data = $w('#text8').text;
if (data === 'Verkauft') {
// ...
Lass dir doch einfach einmal den Wert von data ausgeben.
console.log(data);
Mit dem Laden der Seite wird der Wert in der Browserkonsole ausgegeben.
In der Konsole wird momentan der Wert "Preis" ausgegeben. Dies ist der Standardwert bzw. Platzhalter für dieses Textfeld bevor die Daten aus der Datenbank eingefügt werden.
Und wann wird Verkauft in die Textfelder geschrieben? Aktuell wartest du offensichtlich auf das falsche Ereignis (Laden der Seite).
"Verkauft" steht schon in den Textfeldern.
Etwas schwierig zu erklären - ich versuche es mal:
Wix ist so aufgebaut, dass im Backend ein Repeater eingefügt wird (hier wird in meinem Fall dieses Textfeld angezeigt, welches den Wert "Preis" hat). Durch das Verbinden dieses Repeaters mit der Datenbank werden die Daten daraus in das Textfeld eingefügt. Die Wirkung wird jedoch erst im Frontend ersichtlich.
Das heisst im Backend habe ich ein Textfeld mit dem Wert "Preis" und im Frontend dann so viele Textfelder wie die Datenbank Zeilen besitzt mit den Werten aus der Datenbank (darunter auch einige mit dem Wert "Verkauft").
Mein Problem ist es jetzt eigentlich, dass mit meinem Code der "Backend-Wert" genommen wird und nicht die Werte aus der Datenbank, welche dann auf der Webseite angezeigt werden.
Hoffe ist einigermassen verständlich geschrieben.
Mein Code sieht mittlerweile auch so aus:
$w("#dataset2").onReady( () => {
let currentItem = $w("#dataset2").getCurrentItem().verfgbarkeit;
if (currentItem === 'Verkauft') {
$w('#box1').style.backgroundColor = '#FAA198';
}
else {
$w('#box1').style.backgroundColor = '#F2F2F2';
}
console.log(currentItem);
}
);
Hier werden jetzt zwar die effektiven Werte aus der Datenbank genommen, jedoch nur die erste Zeile. Heisst wenn die erste Zeile "Verkauft" ist, wird bei allen Einträgen der Hintergrund geändert und nicht nur bei dieser...
Du kannst mit forEachItem über jedes Element laufen. Je Item wird dann diese Funktion ausgeführt. Das dürfte nach dem Verknüpfen mit der Datenquelle geschehen. Andernfalls kannst du es auch einmal mit onItemReady stattdessen versuchen.
function fillData($item, itemData, index) {
const data = itemData.text;
$item("#text8").text = data;
if (data === 'Verkauft') {
$item("#box1").style.backgroundColor = '#FAA198';
}
else {
$item('#box1').style.backgroundColor = '#F2F2F2';
}
}
$w("#yourRepeaterID").forEachItem(fillData);
Mit $item sollte der Bezug stets auf dem aktuellen Item liegen, welches gerade durchlaufen wird.
Das einzige, was ich derzeit noch irritierend finde, ist er Gebrauch von IDs innerhalb eines Repeaters. Auch die Dokumentation zeigt es so. Ich vermute daher, dass es sich nicht um die id-Attribute handelt, wie sie in HTML-Dokumenten eingesetzt werden.
Habe gerade diesen Vorschlag von dir auch noch versucht - funktioniert leider nicht.
Hast du eventuell noch einen Anpassungsvorschlag für meinen Kommentar weiter oben. Das einzige Problem das noch besteht ist, dass nur die erste Zeile der Datenbank überprüft wird, nicht die ganze Reihe.
PS: Vielen herzlichen Dank für deine Hilfe.
Nun, du beziehst dich da ja auch nur auf ein Item (das aktuelle) und hängst dich dabei wohl nur an das Repeater-Element? Das feuert sein ready-Event nur einmal.
Es muss eine Art Iteration über alle Items des Repeaters stattfinden.
(...) funktioniert leider nicht.
Genauer analysieren, denn diese Fehlerbeschreibung hilft nicht weiter.
- Was steht in data?
- Gibt es in jedem Repeater-Item ein Element mit der ID text8?
- Wie sieht das HTML aus, welches abschließend aus all dem generiert wird (nur das Repeater-Element mit seinen Kindelementen ist von Interesse)? Du kannst das im Browserinspektor (Webentwicklungstools) nachschauen.
- Wenn ich "data" in der Browserkonsole auswerte, wird hier momentan der Wert "Verkauft" ausgegeben. (Dies ist der Wert vom ersten Datenbankeintrag in der Spalte "verfgbarkeit")
- Die ID des Textfeldes bleibt für jedes dieser Textfelder innerhalb des Repeaters gleich (bleibt immer "#text8"). Das selbe gilt für "#box1".
- Das HTML das generiert wird (nur von diesem repeater) ist über 100 Zeilen lang. Daraus werde ich leider auch nicht schlau.
Auf jeden Fall muss es
if (data == 'Verkauft')
heißen.
Bei If-Abfragen müssen 2 = dastehen, wenn du auf Gleicheit prüfen willst (oder 3 bei einem strikten Vergleich).
Ob JS Strings so vergleichen kann oder hier einen strikten Vergleich braucht, weiß ich nicht mehr sicher.
Vielen Dank. Die Fehlermeldung welche jetzt auftaucht ist: "This condition will always return 'false' since the type 'Text' and 'String' have no overlap.
Gibt es hier evtl. eine Alternative Lösung?
Eventuell, wenn du die Variable data initialisierst:
let data = String($w('#text8'));
Weiß aber nicht, ob dann passend Konvertiert wird.
Der Code gibt jetzt zwar keine Fehlermeldung mehr aus - jedoch wird auf der Webseite nun immer der "else-Wert" ausgegeben.
Vielen Dank für den Lösungsansatz.
Mein Code sieht nun momentan so aus:
Leider wird nun auf der Webseite immer der "else-Wert" ausgegeben. Sowohl bei Feldern mit "Verkauft" als auch bei den anderen. (Das Wort "Verkauft" ist genau so geschrieben und die Bezüge "#text8" und "#box1" sind korrekt.)
Eine Ahnung woran das noch liegen könnte?