Prejsť na obsah

Obchod

Otvoriť živú ukážku na adrese /documentation/examples/run/store.

Úvod

Obchod je najkratšia cesta, ako ukázať, že DotApp je full stack. PHP vlastní katalóg a košík. CSS skladá mriežku. dotapp.js hľadá, pridáva riadky a odosiela pokladňu bez reloadu. Id produktov sú šifrované. Stav relácie žije v DSM::use('Examples'), nikdy v $_SESSION.

Značky a CSS

Stránka je kompletný HTML dokument v store.view.php. Mriežka a košík sú samostatné view, aby ich AJAX vedel vymeniť. Zdieľaný vzhľad: /assets/modules/Examples/css/examples.css (.ex-products, .ex-product, .ex-cart-panel, .ex-toast-stack). 

<div id="storeWrap" class="ex-store"
     data-catalog="{{ var: $catalogUrl }}"
     data-add="{{ var: $addUrl }}"
     data-remove="{{ var: $removeUrl }}">
  <div id="gridInner">{{ var: $gridHtml }}</div>
  <aside id="cartPanel">
    <div id="cartInner">{{ var: $cartHtml }}</div>
    <fo-rm method="POST" id="checkoutForm" action="{{ var: $checkoutAction }}">
      {{ formName(checkout) }}
      <button type="submit" id="checkoutBtn" class="ex-btn">Place demo order</button>
    </fo-rm>
  </aside>
</div>

Katalóg, košík, DSM

Šifrované sku na každej karte a riadku košíka:

$enc = Crypto::encrypt($item['sku'], 'Examples.product.id');
$sku = Crypto::decrypt((string) ($data['id'] ?? ''), 'Examples.product.id');
if ($sku === false) {
    return DotApp::DotApp()->ajaxReply(['status' => 0, 'message' => 'Invalid product.'], 200);
}

Košík v DSM:

$cart = DSM::use('Examples')->get('cart');
if (!is_array($cart)) {
    $cart = [];
}
DSM::use('Examples')->set('cart', $cart);

Hľadanie ide cez malý katalóg v pamäti (šesť položiek). Aj tak platí pravidlo zoznamu: debounce, od troch znakov, overlay, záplata #gridInner. Pokladňa je skutočný fo-rm na tej istej URL ako stránka.

Hľadanie, pridanie, pokladňa

$dotapp().live("click", ".js-store-add", function (btn) {
  var id = btn.getAttribute("data-item");
  $dotapp().load(addUrl, "POST", { id: id }, function (raw) {
    var reply = $dotapp().parseReply(raw);
    if (reply && reply.html) $dotapp("#cartInner").html(reply.html);
    if (reply && reply.message) $dotapp().exNotify({ title: "Cart", text: reply.message });
  });
});

$dotapp().live() volá handler ako (element, event). Prvý argument je zhodný uzol, nie prehliadačový event — data-item čítajte z toho tlačidla. Odstránenie potvrdzuje modal. Pokladňa používa $dotapp().form("#checkoutForm") so strážou blocked-form a loadermi. Po úspechu sa HTML košíka nahradí a polia sa vyčistia — žiadne location.reload().

Skript stránky: /app/modules/Examples/assets/js/store.js. Widgety: ex-ui.js.

Živá ukážka

/documentation/examples/run/store — hľadajte „mug“, pridajte položky, dokončite objednávku. Košík prežije obnovenie stránky, lebo je v DSM.