Introduction

🎯 Que fait ce module ?

Le module Templates vous permet de modifier la structure et l'apparence de votre projet sans altérer son code source. Les templates vous permettent de gérer les composants via la plateforme OneEntry tout en maintenant des options de conception et de comportement flexibles.

Les templates fonctionnent en vous permettant de décrire des composants dans le code de votre projet, puis de les taguer avec des templates créés par la plateforme. Cette séparation permet de passer d'implémentations de templates différentes pour influencer le fonctionnement des entités.

Considérez-le comme votre configurateur de système de design - vous créez des templates dans le panneau d'administration de OneEntry (Paramètres > Templates), taguez vos composants avec ces templates, et ce module récupère ces configurations pour que votre application puisse rendre dynamiquement du contenu avec un style cohérent.

📖 Explication Simple

Chaque application a besoin d'une présentation de contenu cohérente :

🖼️ Templates d'Image - Tailles et recadrages prédéfinis (miniature, héros, galerie)
📄 Templates de Page - Configurations de mise en page (article de blog, page d'atterrissage)
🧱 Templates de Bloc - Apparences des blocs de contenu (carte, bannière, section)
🛍️ Templates de Produit - Formats d'affichage des produits (grille, liste, détail)
🎨 Design Réactif - Différentes tailles pour mobile, tablette, bureau
♻️ Configurations Réutilisables - Définir une fois, utiliser partout

Le problème avec la logique d'affichage codée en dur :

Problèmes :

🔒 Incohérent - Différentes tailles à différents endroits
🎨 Difficile à maintenir - Un changement nécessite l'édition de plusieurs fichiers
📱 Non réactif - Les tailles fixes ne s'adaptent pas
♻️ Pas de réutilisabilité - Code dupliqué partout

La solution des Templates :

Avantages :

🔒 Cohérent - Même template utilisé partout
🎨 Maintenance facile - Changement dans le panneau d'administration, s'applique partout
📱 Réactif - Différents templates pour différents écrans
♻️ Réutilisable - Définir une fois, utiliser dans toute l'application

✨ Concepts Clés

Qu'est-ce qu'un Template ?

Un Template est une configuration d'affichage définissant comment le contenu doit apparaître :

Type de Template - Template d'image, de page, de bloc, de produit
Dimensions - Largeur, hauteur, ratio d'aspect
Paramètres de Recadrage - Comment recadrer les images (centre, haut, bas)
Format - Format d'image (JPEG, PNG, WebP)
Qualité - Qualité de compression
Marqueur - Identifiant unique pour référence dans le code

Structure du Template

Chaque template a cette structure :

{
  id: 1,                                    // Identifiant unique
  title: "Miniature de Produit",            // Nom du template (non-unique)
  identifier: "product_thumbnail",          // Marqueur du template (unique)
  generalTypeId: 1,                         // Référence d'ID de type
  version: 0,                               // Numéro de version
  attributeSetIdentifier: null,             // Ensemble d'attributs associé
  localizeInfos: {                          // Informations localisées
    en_US: {
      title: "Miniature de Produit",
      description: "Petite image de produit"
    }
  },
  attributeValues: {},                      // Données d'attribut supplémentaires
  isActive: true,                           // Statut actif
  createdAt: "2024-01-15T10:00:00Z",
  updatedAt: "2024-01-15T10:00:00Z"
}

Champs Clés :

identifier - Marqueur unique pour référence de template (utilisez ceci, pas l'ID)
title - Nom du template affiché dans le panneau d'administration
generalTypeId - Catégorie d'entité à laquelle le template s'applique
attributeSetIdentifier - Ensemble d'attributs associé optionnel

Types de Template

Les templates sont organisés par type d'entité et supportent les catégories suivantes :

Type de Template	Catégorie d'Entité	Cas d'Utilisation Exemples
Blocs de Produit	`forCatalogProducts`	Grille de produits, liste de produits, produits en vedette
Blocs Réguliers	`forOneBlock`	Cartes de contenu, bannières, sections, widgets
Pages d'Erreur	`forErrorPages`	Page 404, page 500, mises en page d'erreur personnalisées
Pages Régulières	`forOnePage`	Article de blog, page d'atterrissage, page à propos
Pages de Produit	`forOneProduct`	Détail du produit, comparaison de produits
Pages de Catalogue	`forCatalogPage`	Liste de catégories, résultats de recherche
Formulaires	`forForm`	Formulaire de contact, formulaire d'inscription, enquête
Commandes	`forOrder`	Confirmation de commande, historique des commandes

Templates d'Image Courants

Template	Taille	Recadrage	Cas d'Utilisation
Miniature	150×150	Centre	Petites images d'aperçu
Image de Carte	300×200	Centre	Cartes de produits, cartes de blog
Image Héros	1920×1080	Centre	Bannières pleine largeur
Image de Galerie	800×600	Centre	Galeries d'images
Avatar	100×100	Centre	Photos de profil utilisateur
Héros Mobile	768×432	Centre	Bannières optimisées pour mobile

Flux de Configuration des Templates

1. Créer des templates dans le panneau d'administration
   (Définir tailles, recadrages, formats)
   ↓
2. Récupérer les templates via le SDK
   (Templates.getTemplates())
   ↓
3. Appliquer les configurations de template
   (Utiliser les tailles dans le rendu d'image)
   ↓
4. Images automatiquement optimisées
   (Le CDN OneEntry sert la bonne taille)
   ↓
5. Affichage cohérent partout
   (Même template = même apparence)

Pourquoi Utiliser le Module Templates ?

Avantage	Description
Design Cohérent	Même templates utilisés dans toute l'application
Maintenance Facile	Changer le template dans l'administration, met à jour partout
Optimisation d'Image	Redimensionnement et compression automatiques
Design Réactif	Différents templates pour différents écrans
Intégration CDN	Livraison d'images optimisée
Configurations Réutilisables	Définir une fois, utiliser partout

📋 Ce Que Vous Devez Savoir

Les Templates sont Créés dans le Panneau d'Administration

Vous ne pouvez pas créer de templates via le SDK - ils sont créés dans le panneau d'administration de OneEntry :

Panneau d'Administration OneEntry → Paramètres → Templates → Créer Template → Définir Nom/Marqueur/Type → Enregistrer

Processus de Création :

Fournir un Nom (identifiant non-unique)
Fournir un Marqueur (identifiant unique)
Sélectionner un Type (catégorie d'entité à laquelle le template s'applique)
Cliquez sur "Créer" pour finaliser

Opérations de Gestion :

Configuration - Cliquez sur l'icône d'engrenage pour modifier le nom, le marqueur ou le type
Suppression - Sélectionnez le template et cliquez sur l'icône de suppression, puis confirmez la suppression

Le SDK est destiné à récupérer les configurations de template, pas à les créer.

Identification du Template

Trois façons d'identifier les templates :

Méthode	Quand l'utiliser	Exemple
Par Type	Référence dans le code (meilleure pratique)	`product_thumbnail`, `hero_banner`
Par Marqueur	Référence dans le code (meilleure pratique)	`product_thumbnail`, `hero_banner`
Lister Tous	Montrer les templates disponibles	`getTemplates()`

Meilleure pratique : Utilisez toujours des marqueurs dans votre code (ils ne changent jamais).

Intégration CDN des Templates d'Image

OneEntry optimise automatiquement les images en fonction des templates.

Design Réactif avec les Templates

Créez différents templates pour différentes tailles d'écran.

Structure du Template :

interface ITemplateEntity {
  id: number;                        // Identifiant unique
  title: string;                     // Nom du template (non-unique)
  identifier: string;                // Marqueur du template (unique)
  generalTypeId: number;             // Référence d'ID de type
  version: number;                   // Numéro de version
  attributeSetIdentifier: string | null;  // Ensemble d'attributs associé
  localizeInfos: {                   // Informations localisées
    [langCode: string]: {
      title: string;
      description?: string;
    };
  };
  attributeValues: any;              // Données d'attribut supplémentaires
  isActive: boolean;                 // Statut actif
}

Types de Template Disponibles :

forCatalogProducts - Blocs de produit
forOneBlock - Blocs réguliers
forErrorPages - Pages d'erreur
forOnePage - Pages régulières
forOneProduct - Pages de produit
forCatalogPage - Pages de catalogue
forForm - Formulaires
forOrder - Commandes

💡 Notes Importantes

Les Templates sont Créés dans le Panneau d'Administration

Rappelez-vous : Le SDK est destiné à récupérer les configurations de template, pas à créer des templates.

Pour créer/modifier des templates : Utilisez le Panneau d'Administration OneEntry.

Comment Fonctionnent les Templates

Les templates permettent une gestion flexible des composants en séparant la structure du code :

Décrire les composants dans le code de votre projet
Taguer les composants avec des templates créés par la plateforme
Changer de templates pour modifier le fonctionnement des entités
Mettre à jour l'apparence sans modifier le code source

Cette séparation permet de multiples variations de design et fonctionnelles sans changements de code.

Optimisation d'Image

Le CDN OneEntry optimise automatiquement les images en fonction des paramètres du template :

Redimensionnement automatique
Conversion de format (JPEG, PNG, WebP)
Compression
Recadrage
Mise en cache

Vous n'avez qu'à référencer le marqueur du template :

<img src={`${image.url}?template=thumbnail`} />

Templates Réactifs

Créez des templates séparés pour différents appareils :

Templates mobiles (768px de large ou moins)
Templates pour tablettes (1024px de large)
Templates pour bureau (1920px de large)

Utilisez avec l'élément <picture> pour des images réactives.

Mise en Cache des Templates

Les templates changent rarement - mettez en œuvre la mise en cache :

Frontend : localStorage, sessionStorage
Backend : Redis, cache mémoire
TTL : 1 heure recommandée

📊 Tableau de Référence Rapide

Méthode	Description	Cas d'Utilisation
getAllTemplates()	Obtenir tous les templates regroupés par types	Lister tous les templates disponibles
getTemplateByType()	Obtenir des templates par type d'entité	Récupérer des templates pour un type d'entité spécifique
getTemplateByMarker()	Obtenir un template par marqueur	Récupérer la configuration d'un template spécifique

❓ Questions Fréquemment Posées (FAQ)

Quelle est la différence entre Templates et TemplatePreviews ?

Les templates configurent l'affichage général du contenu (pages, blocs, produits), tandis que les TemplatePreviews gèrent spécifiquement les images d'attributs de produit (échantillons de couleur, aperçus de matériaux). Utilisez les templates pour le contenu principal, les TemplatePreviews pour les images d'attributs.

Comment appliquer un template à une URL d'image ?

Ajoutez ?template=marker à l'URL de l'image, où marker est l'identifiant du template. Le CDN OneEntry sert automatiquement l'image optimisée en fonction de la configuration du template (taille, recadrage, format).

Puis-je créer différents templates pour mobile et bureau ?

Oui ! Créez des templates séparés avec des tailles appropriées pour chaque appareil (par exemple, hero_mobile, hero_desktop). Utilisez des techniques de design réactif ou des éléments <picture> pour charger le bon template en fonction de la taille de l'écran.

Que se passe-t-il si je référence un template qui n'existe pas ?

L'image se chargera dans sa taille d'origine sans optimisation de template. Vérifiez toujours que les marqueurs de template existent et gérez les templates manquants avec des tailles de secours.

Comment mettre à jour un template sans affecter la production ?

Les templates sont des configurations, pas du code. Les changements dans le panneau d'administration s'appliquent immédiatement. Testez les changements de template dans un environnement de staging d'abord, puis mettez à jour les templates de production une fois vérifiés.

Quels types de templates devrais-je utiliser pour mon contenu ?

Choisissez en fonction du type d'entité : forOnePage pour les pages standard, forCatalogProducts pour les listes de produits, forOneBlock pour les blocs de contenu, forOneProduct pour les détails de produit. Faites correspondre le type de template à votre catégorie de contenu.

🎓 Meilleures Pratiques

Utilisez des marqueurs, pas des IDs - Les marqueurs sont stables à travers les environnements
Mettez en cache les templates - Réduisez les appels API pour des données rarement changées
Créez des templates réactifs - Différentes tailles pour différents écrans
Utilisez le format WebP - Meilleure compression que JPEG/PNG
Définissez des paramètres de qualité - Équilibrez qualité et taille de fichier
Utilisez des paramètres de template CDN - ?template=marker pour l'optimisation
Créez des marqueurs sémantiques - product_thumbnail, pas img_1
Documentez l'utilisation des templates - Expliquez à quoi sert chaque template

Plus d'informations sur les templates dans le panneau d'administration de OneEntry : https://doc.oneentry.cloudhttps://doc.oneentry.cloud/docs/templates/content_templates/

Définition du module Templates

Le module Templates configure l'affichage du contenu au sein de votre application.

Certains templates affectent les images stockées dans OneEntry, tandis que d'autres définissent l'apparence des entités telles que les blocs, les pages et les produits.


const { Templates } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

🔗 Documentation Connexe

Panneau d'Administration OneEntry - Templates de Contenu - Documentation officielle du panneau d'administration
Module TemplatePreviews - Templates de prévisualisation pour les images d'attributs
Module Produits - Les produits utilisent des templates de produit
Module Pages - Les pages utilisent des templates de page
Module Blocs - Les blocs utilisent des templates de bloc
Module Formulaires - Les formulaires utilisent des templates de formulaire
Meilleures Pratiques d'Optimisation d'Image

Introduction

🎯 Que fait ce module ?​

📖 Explication Simple​

✨ Concepts Clés​

Qu'est-ce qu'un Template ?​

Structure du Template​

Types de Template​

Templates d'Image Courants​

Flux de Configuration des Templates​

Pourquoi Utiliser le Module Templates ?​

📋 Ce Que Vous Devez Savoir​

Les Templates sont Créés dans le Panneau d'Administration​

Identification du Template​

Intégration CDN des Templates d'Image​

Design Réactif avec les Templates​

💡 Notes Importantes​

Les Templates sont Créés dans le Panneau d'Administration​

Comment Fonctionnent les Templates​

Optimisation d'Image​

Templates Réactifs​

Mise en Cache des Templates​

📊 Tableau de Référence Rapide​

❓ Questions Fréquemment Posées (FAQ)​

Quelle est la différence entre Templates et TemplatePreviews ?​

Comment appliquer un template à une URL d'image ?​

Puis-je créer différents templates pour mobile et bureau ?​

Que se passe-t-il si je référence un template qui n'existe pas ?​

Comment mettre à jour un template sans affecter la production ?​

Quels types de templates devrais-je utiliser pour mon contenu ?​

🎓 Meilleures Pratiques​

Définition du module Templates​

🔗 Documentation Connexe​

🎯 Que fait ce module ?

📖 Explication Simple

✨ Concepts Clés

Qu'est-ce qu'un Template ?

Structure du Template

Types de Template

Templates d'Image Courants

Flux de Configuration des Templates

Pourquoi Utiliser le Module Templates ?

📋 Ce Que Vous Devez Savoir

Les Templates sont Créés dans le Panneau d'Administration

Identification du Template

Intégration CDN des Templates d'Image

Design Réactif avec les Templates

💡 Notes Importantes

Les Templates sont Créés dans le Panneau d'Administration

Comment Fonctionnent les Templates

Optimisation d'Image

Templates Réactifs

Mise en Cache des Templates

📊 Tableau de Référence Rapide

❓ Questions Fréquemment Posées (FAQ)

Quelle est la différence entre Templates et TemplatePreviews ?

Comment appliquer un template à une URL d'image ?

Puis-je créer différents templates pour mobile et bureau ?

Que se passe-t-il si je référence un template qui n'existe pas ?

Comment mettre à jour un template sans affecter la production ?

Quels types de templates devrais-je utiliser pour mon contenu ?

🎓 Meilleures Pratiques

Définition du module Templates

🔗 Documentation Connexe