Le répéteur

Cet article aborde des notions avancées. Il est recommandé d'avoir consulté au préalable les cours suivants :

• Prise en main d'Oxygen
• Insertion d'un élément
• La div / le conteneur
• Données dynamiques

Imaginons la situation suivante :

• Vous avez besoin de créer une page qui devra comporter plusieurs éléments provenant d'Oxygen, comme un blog où une page boutique
• Vous ne savez pas combien d'éléments cette page devra contenir, car le nombre augmentera ou diminuera à mesure que vous en ajouterez / supprimerez

C'est là qu'intervient le répéteur, qui va vous permettre d'intégrer des données dynamiques et de les répéter autant de fois qu'il y aura d'éléments à répéter.

Procédure

Intégrer le répéteur

• Ouvrez une page sur Oxygen et sélectionnez l'élément inner content
• Insérez une div et sélectionnez-la
• Insérez un élément repeater
  • + violet en haut à droite, puis onglet helpers, puis onglet dynamic
  • Vous pouvez aussi simplement taper repeater dans la barre de recherche

Vous remarquerez que votre répéteur s'accompagne d'une div automatiquement créée, qui n'est pas supprimable. Cette div sera l'équivalent du Inner content pour la section qui contiendra les éléments à répéter. Mais nous y reviendrons plus tard.

• Sélectionnez l'élément Repeater puis référez-vous à panneau d'édition (à gauche)

Configurer le répéteur

Dans un premier temps, nous allons définir le champ d'action du répéteur, c'est-à-dire où est-ce qu'il doit récupérer les informations et comment il doit les organiser. Nous allons uniquement nous servir de la section query.

Vous pouvez bien entendu utiliser les autres sections, mais elle ne sont pas abordées dans cette formation

• Cliquez sur l'onglet query
• Cliquez sur le bouton custom. Quatre onglets vont apparaîtres

Post type

Définit le type d'élément dans lequel le répéteur va devoir aller piocher.

• Cliquez sur post type
• Cliquez sur le champ Post type et sélectionnez le type d'élément voulu. Vous pouvez tout à fait en sélectionner plusieurs
  • Post = article
  • Page = page
  • Product = Produit (disponible plus loin dans les options - uniquement disponible vous avez au préalable une boutique configurée

Filtering

Sert à filtrer plus précisément les éléments à afficher en fonction de leurs catégories associées

• In any of the following Taxonomies : Qui porte n'importe laquelle des catégorie renseignée
• In any of the following Taxonomies : Qui porte TOUTES les catégorie renseignées
• By the following authors : créé par un auteur en particulier

Si vous ajoutez des pages ou des produits, la logique est exactement la même, assurez-vous simplement que l'onglet post type sélectionne bien le bon type d'élément.

Order

Cet onglet est optionnel. Il sert à trier l'ordre d'apparition des éléments

• Order by : Définit l'option de tri
  • Date = date de publication
  • Date Last modified = Dernière date de modification
  • Title = Nom du Titre
  • Comment count = nombre de commentaires
  • Menu order : si vous avez besoin d'ordonner vos éléments de manière plus personnalisée. Pour en savoir plus, consultez le guide dédié.

• Order : Définit si le tri de fait de manière ascendante ou descendante
  • Exemple : un tri par titre ascendant se fera de A à Z. s'il est descendant, il se fera de Z à A

Count

Limite le nombre d'éléments par page. Si vous entrez 25, vous aurez au maximum 25 éléments par page.

Intégrer des champs au répéteur

Maintenant que la structure est posée, vous allez pouvoir construire le modèle réutilisable.

• Cliquez sur le répéteur et mettez-lui une width de 100%
  • Le répéteur se gère comme une div normale
• Fixez la width de la div sous le conteneur ainsi que ses marges
  • L'élément répéteur contient l'ensemble des éléments; l'élément div juste en-dessous - dans notre exemple, div(#11) - représente un élément.
• Ajoutez des données dynamiques
  • Commencez par poser uniquement un titre afin de vérifier que le répéteur affiche bien les éléments voulus, dans l'ordre voulu

Par défaut, les éléments s'affichent à la verticale. Pour les passer à l'horizontal, utiliser l'onglet Layout du répéteur :

• Cliquez sur l'élément repéteur dans la barre de structure
• Dans la barre d'édition, cliquez sur layout
• Cliquez sur horizontal ainsi que sur le bouton Allow multiline
  • Gérez ensuite les options d'alignement normalement, comme dans l'onglet layout

Continuez ensuite la construction de votre modèle comme pour une page normale. Le répéteur appliquera vos modifications immédiatement pour tous les éléments filtrés. Si cela vous perturbe, vous pouvez retirer provisoirement le post type du repéteur.