Abstraction of kind of complex but common UI patterns.

Usage no npm install needed!

<script type="module">
  import acantoCoreOrchestrations from 'https://cdn.skypack.dev/@acanto/core-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:

    1. run acanto component my-component. In the generated component template frontend/components/MyComponent/index.twig you can put what you want, to pass data from the db see next step.
    1. got to plugins/acanto/routes.php and add:
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(
    ['dataToUse' => $json],
    1. got to frontend/routes/home.js and add:
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) : "";

  ajax(`/ajax/my-data${queryString}`).then(({ data }) => {
    $resultsAsync.innerHTML = data;
    new Lazy({ container: $results });

fetchContent({ slug: "some-unique-slug" });