Utilisation d'objets flexibles

Flex Objects est conçu pour être facile à utiliser. L'affichage de la collection et des groupes dans vos pages peut principalement être effectué à partir de modèles Twig.

ASTUCE : Pour activer et afficher Flex Directory, veuillez lire Activation d'un Répertoire.

Utilisation du type de page flex-objects.

Affichez plusieurs répertoires dans votre page directories/flex-objects.md :

title: Directories
flex:
  layout: default
  list:
  - contacts
  - services
---

# Directories

Vous pouvez également transmettre des paramètres distincts pour chaque répertoire :

title: Directories
flex:
  layout: default
  directories:
    contacts:
      collection:
        title: '{{ directory.title }}'
        layout: default
        object:
          layout: list-default
      object:
        title: 'Contact: {{ object.first_name }} {{ object.last_name }}'
        layout: default
    services:
---

Affichez un seul répertoire dans votre page contacts/flex-objects.md :

title: Contacts
flex:
  directory: contacts
  collection:
    title: '{{ directory.title }}'
    layout: default
    object:
      layout: list-default
  object:
    title: 'Contact: {{ object.first_name }} {{ object.last_name }}'
    layout: default
---

Affichez un seul objet dans votre page my-contact/flex-objects.md :

title: Contact
flex:
  directory: contacts
  id: ki2ts4cbivggmtlj
  object:
    title: 'Contact: {{ object.first_name }} {{ object.last_name }}'
    layout: default
---

# Contacts

Par défaut, le type de page flex-objects prend deux paramètres d'URL, directory et id. Ils sont utilisés pour naviguer dans les répertoires. Voici des exemples d'URL :

https://www.domain.com/directories/directory:contacts/id:ki2ts4cbivggmtlj

https://www.domain.com/contacts/id:ki2ts4cbivggmtlj
ASTUCE : vous pouvez transmettre vos propres paramètres à l'intérieur de flex et les utiliser dans vos fichiers de modèle de collection et d'objet.

Rendu des collections et des objets.

Les collections et les objets prennent en charge le rendu de leur sortie en HTML. La sortie peut être personnalisée avec deux paramètres : mise en page et contexte. La mise en page vous permet de définir des apparences personnalisées, par exemple, vous pouvez avoir une liste de cartes, puis une sortie plus détaillée pour les détails. Le contexte vous permet de passer des variables à utiliser dans les fichiers de modèle.

{% render collection layout: 'custom' with { context_variable: true } %}

{% render object layout: 'custom' with { context_variable: true } %}

Voir la documentation plus détaillée : Render Collection et Render Object.

Notions de base sur les modèles.

Les modèles Flex se trouvent dans le dossier templates/flex:

templates/
  flex/
    contacts/
      collection/
        default.html.twig
      object/
        default.html.twig

Chaque type a deux dossiers, un pour le rendu de la collection et un pour le rendu de l'objet. Les fichiers à l'intérieur sont des mises en page, nommées d'après le nom du fichier. Dans notre exemple, nous avons une mise en page par default pour la collection et l'objet.

Modèle de collecte.

Le modèle de collection flex/contacts/collection/default.html.twig est responsable du rendu de tous les objets de la collection. La sortie rendue est mise en cache par défaut. La clé de cache est définie par la collection et le contexte transmis à la méthode render().

AVERTISSEMENT : si le contexte contient des valeurs non scalaires, la mise en cache sera désactivée. Essayez de garder le contexte aussi simple que possible !

Voici un exemple de Type de contacts :

<div id="flex-objects">
  <div class="text-center">
    <input class="form-input search" type="text" placeholder="Search by name, email, etc" />
    <button class="button button-primary sort asc" data-sort="name">
      Sort by Name
    </button>
  </div>

  <ul class="list">
    {% for object in collection.filterBy({ published: true }) %}
      <li>
        {% render object layout: layout with { options: options } %}
      </li>
    {% endfor %}
  </ul>
</div>

<script>
    var options = {
        valueNames: [ 'name', 'email', 'website', 'entry-extra' ]
    };
    var flexList = new List('flex-objects', options);
</script>
ASTUCE : Si le HTML rendu a un contenu dynamique, le cache de rendu peut être désactivé à partir du modèle Twig par {% do block.disableCache() %}.

Modèle d'objet.

Le modèle d'objet flex/contacts/object/default.html.twig est responsable du rendu d'un seul objet. La sortie rendue est mise en cache par défaut. La clé de cache est définie par l'objet et le contexte transmis à la méthode render().

AVERTISSEMENT : si le contexte contient des valeurs non scalaires, la mise en cache sera désactivée. Essayez de garder le contexte aussi simple que possible !

Voici un exemple de Type de contacts :

<div class="entry-details">
    {% if object.website %}
        <a href="{{ object.website|e }}"><span class="name">{{ object.last_name|e }}, {{ object.first_name|e }}</span></a>
    {% else %}
        <span class="name">{{ object.last_name|e }}, {{ object.first_name|e }}</span>
    {% endif %}
    {% if object.email %}
        <p><a href="mailto:{{ object.email|e }}" class="email">{{ object.email|e }}</a></p>
    {% endif %}
</div>
<div class="entry-extra">
    {% for tag in object.tags %}
        <span>{{ tag|e }}</span>
    {% endfor %}
</div>
ASTUCE : Si le HTML rendu a un contenu dynamique, le cache de rendu peut être désactivé à partir du modèle Twig par {% do block.disableCache() %}.

Dispositions personnalisées.

En utilisant des mises en page personnalisées, vous pouvez créer une quantité infinie de vues différentes dans vos collections et vos objets.

Vous pouvez créer vos mises en page personnalisées en ajoutant simplement un nouveau fichier à côté du fichier default.html.twig. Le nom de base du fichier est le même que le nom de votre mise en page.

ASTUCE : dans les mises en page de collection, il est recommandé d'appeler {% render object layout: 'xxx' %} au lieu de sortir les variables d'objet directement dans le modèle de collection.