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:

• 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.
• 2. 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(
    'MyComponent',
    ['dataToUse' => $json],
    'home'
  );
});

• 3. 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) : "";
  $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" });