Reaktivität

Einleitung

Das Live-Demo ist ein Preisangebot: Produkt, Menge, Zielort und optionaler Coupon. Der Kern von dotapp.js liefert bereits variable, databind und computed. Die Position aktualisiert sich im Browser. MwSt., Versand, Bestand und Coupon-Regeln bleiben in PHP und kommen über dasselbe sichere $dotapp().load() wie bei Listen und Formularen zurück.

Das ist die komplette Schleife: Katalog und Steuertabellen auf dem Server, ajaxReply auf der Leitung, Variablen im Browser. Leere #error-message / #status-Leisten bleiben verborgen, bis PHP wirklich einen Fehler oder eine Infozeile hat.

variable, databind, computed

$dotapp().variable("qty", "1");
$dotapp().variable("name", "Workshop seat");
$dotapp().variable("unit", "49.00");
$dotapp().variable("total", "0.00");

var qty = $dotapp().getVariable("qty");
var total = $dotapp().getVariable("total");
total.bindToElement(document.getElementById("bindTotal"));

var line = $dotapp().computed(function () {
  var q = $dotapp().getVariable("qty").value;
  var n = $dotapp().getVariable("name").value;
  var u = $dotapp().getVariable("unit").value;
  return q + " × " + n + " @ €" + u;
});

qty.onChange(function () {
  line.invalidate();
  document.getElementById("bindLine").textContent = line.value;
});

// after parseReply:
total.value = String(reply.total);

Das Setzen von .value auf der Singleton-Variable aktualisiert jedes Element, das mit bindToElement / databind an dieselbe $dotapp()-Instanz gebunden ist. Variablen werden nicht über $dotapp('#x')-Klone geteilt. Binden Sie mit $dotapp().getVariable('total').bindToElement(el).

Das Coupon-Feld nutzt Zwei-Wege-Bindung mit { live: true }, sodass Tippen die Variable bei input aktualisiert und ein entprelltes load() folgt.

Angebot aus PHP

POST mit CRC. Decken Sie das Angebot ab, während die Anfrage läuft. Schreiben Sie die Nutzlast in Variablen — ersetzen Sie nicht die ganze Karte, außer Sie brauchen ein Fragment.

$dotapp().load(quoteUrl, "POST", { id: encId, qty: qty, country: country, coupon: coupon },
  function (raw) {
    var reply = $dotapp().parseReply(raw);
    total.value = String(reply.total);
    stock.value = String(reply.stock);
    if (reply.error) $dotapp("#error-message").attr("hide", "false").html(reply.error);
    else if (reply.message) $dotapp("#status").attr("hide", "false").html(reply.message);
    else {
      $dotapp("#error-message").attr("hide", "hide").html("");
      $dotapp("#status").attr("hide", "hide").html("");
    }
  }
);

PHP entschlüsselt die Produkt-ID, wendet MwSt. nach Land an, Versand (gratis über 80 € bei physischer Ware), Bestand und Coupon DOTAPP10. DSM zählt, wie oft diese Sitzung wirklich ein Angebot angefragt hat:

$sku = Crypto::decrypt($id, 'Examples.live.id');
$dsm = DSM::use('Examples');
$hits = (int) ($dsm->get('live_quotes') ?? 0);
$hits++;
$dsm->set('live_quotes', $hits);
return DotApp::DotApp()->ajaxReply([
    'status' => 1,
    'total' => $total,
    'stock' => $stock,
    'error' => $error,
    'message' => $message,
    'hits' => $hits,
], 200);

Kein Bestand und ein ungültiger Coupon nutzen die rote Leiste. Ein gültiger Coupon oder Gratisversand nutzen die blaue. Beide bleiben hide="hide", bis das eintritt.

Offizielles Reactive-Add-on

Optionales dotapp.reactive.js ergänzt HTML-Attribute (reactive-api, reactive-interval, reactive-trigger, reactive-variable, reactive-template) und $dotapp().reactive(url, config). Laden Sie es nach dotapp.js, wenn Ihr Build /assets/dotapp/dotapp.reactive.js ausliefert. Die Live-Demo dieser Website nutzt die Kern-APIs, damit sie immer läuft: Sie stecken bereits in dotapp.js.

<div reactive-api="/shop/live" reactive-method="GET"
     reactive-interval="5000" reactive-variable="stock"></div>

Live-Demo

/documentation/examples/run/live — Live-Angebot, gebundene Summen, computed Zeile, Coupon- und Bestandsmeldungen. Dateien: Controllers/Live.php, live.view.php, live.js.