README
Frontend
Orchestrations
Abstraction of kind of complex but common UI patterns.
Other examples and patterns of complex implementations
Retrieval of a rendered component via ajax
This is a bare minimal example. Let's say that you need to add this ajax powered component to the home
page. The homepage template home/index.twig
needs an element to hold the async content:
<div id="my-async-content">Loading...</div>
Then follow these steps:
- run
acanto component my-component
. In the generated component templatefrontend/components/MyComponent/index.twig
you can put what you want, to pass data from the db see next step.
- run
- got to
plugins/acanto/routes.php
and add:
- got to
Route::get('/ajax/my-data', function () {
// static data from backend
$json = ['id' => 'ciao', 'whatever' => 'dynamic-data'];
// or dynamic data from models
$slug = strtolower(@$_GET['slug']);
$json = Acanto\Acanto\Models\Something::where('slug', $slug)->first();
return Acanto\Data\Plugin::getAjaxFragment(
'MyComponent',
['dataToUse' => $json],
'home'
);
});
- got to
frontend/routes/home.js
and add:
- got to
import { $ } from "@acanto/frontend/dom";
import ajax from "@acanto/frontend/ajax";
import { buildQueryString } from "@acanto/frontend/helpers"; // if needed
import Lazy from "@acanto/frontend/lazy"; // if needed
const CLASS_LOADING = "is-loading";
const $results = $("#my-async-content");
function fetchContent(data) {
const queryString = data ? buildQueryString(data) : "";
$results.classList.add(CLASS_LOADING);
ajax(`/ajax/my-data${queryString}`).then(({ data }) => {
$resultsAsync.innerHTML = data;
$results.classList.remove(CLASS_LOADING);
new Lazy({ container: $results });
});
}
fetchContent({ slug: "some-unique-slug" });