Introduction

🎯 Que fait ce module ?

Le module TemplatePreviews vous permet de standardiser les paramètres d'image dans votre projet. En appliquant des modèles d'aperçu aux attributs "Image" ou "Groupe d'Images", vous garantissez une taille et un format cohérents qui s'alignent avec vos exigences de conception.

Les modèles d'aperçu configurent les paramètres d'image utilisés dans les attributs, fournissant des images standardisées selon les spécifications définies dans le modèle d'aperçu. Cela garantit un affichage cohérent des images à travers les images de produits, les images de variantes et les images basées sur des attributs.

Considérez-le comme votre configurateur d'images d'attributs - vous créez des modèles d'aperçu dans le panneau d'administration de OneEntry (Paramètres > Modèles d'Aperçu), et ce module récupère ces configurations afin que les attributs de produit avec images s'affichent de manière cohérente dans votre catalogue.

---

📖 Explication Simple

Chaque application de commerce électronique a besoin d'images de produits cohérentes à travers les attributs :

• 🎨 Échantillons de Couleur - Variantes de couleur de produit (Rouge, Bleu, Vert) avec images d'aperçu
• 📏 Tableaux de Tailles - Images d'attribut de taille (Petit, Moyen, Grand) avec guides visuels
• 🖼️ Aperçus de Matériaux - Images d'attribut de matériau (Cuir, Coton, Soie) avec textures
• 💎 Options de Finition - Images de finition de surface (Brillant, Mat, Satiné) avec exemples visuels
• 👗 Aperçus de Motifs - Images d'attribut de motif (Rayé, Uni, Floral) avec échantillons
• 🏷️ Galeries d'Attributs - Taille d'image cohérente pour tous les attributs de produit

Le problème avec des images d'attributs incohérentes

Problèmes :

• 🎨 Affichage incohérent - Différentes images d'attributs ont des tailles différentes
• 📊 Difficile à maintenir - Un changement nécessite d'éditer plusieurs composants
• 🔄 Pas de réutilisabilité - La même logique de taille est dupliquée partout
• 🖼️ Mauvaise expérience utilisateur - Les images d'attributs semblent désalignées et peu professionnelles

La solution TemplatePreviews

Avantages :

• 🎨 Affichage cohérent - Toutes les images d'attributs utilisent le même modèle
• 📊 Entretien facile - Changer le modèle dans le panneau d'administration
• 🔄 Réutilisable - Même modèle pour tous les attributs
• 🖼️ Expérience utilisateur professionnelle - Images d'attributs alignées et uniformes

---

✨ Concepts Clés

Qu'est-ce qu'un Modèle d'Aperçu ?

Un Modèle d'Aperçu est une configuration d'image pour les attributs de produit :

• Images d'Attribut - Images associées aux attributs de produit (couleur, taille, matériau)
• Taille d'Aperçu - Dimensions pour l'affichage des images d'attribut
• Paramètres de Recadrage - Comment recadrer les images d'attribut
• Marqueur - Identifiant unique pour la référence du modèle
• Cohérence - Le même modèle garantit un affichage uniforme des images d'attribut

Structure du Modèle d'Aperçu

Chaque modèle d'aperçu a cette structure :

{
  id: 3,                                      // Identifiant unique
  title: 'Modèles d'Aperçu',                  // Nom du modèle (non unique)
  identifier: 'modèles-d-aperçu',             // Marqueur du modèle (unique)
  proportions: {                              // Ensembles de paramètres d'image
    default: {                                // Configuration de modèle par défaut
      horizontal: {                           // Pour les images horizontales
        width: 234,                           // Largeur en pixels
        height: 324,                          // Hauteur en pixels
        alignmentType: 'middleBottom'         // Type de centrage (axe de compression)
      },
      vertical: {                             // Pour les images verticales
        width: 2,
        height: 3,
        alignmentType: 'leftTop'
      },
      square: {                               // Pour les images carrées
        side: 3,                              // Longueur du côté en pixels
        alignmentType: 'leftTop'
      },
    },
  },
  version: 0,                                 // Numéro de version
  attributeValues: {},                        // Données d'attribut supplémentaires
  position: 1,                                // Position d'affichage
  isUsed: false,                              // Statut d'utilisation
  attributeSetIdentifier: null                // Ensemble d'attributs associé
}

Champs Clés :

• identifier - Marqueur unique pour la référence du modèle (utilisez ceci, pas l'ID)
• title - Nom du modèle affiché dans le panneau d'administration
• proportions - Configuration d'image pour différentes orientations
• alignmentType - Définit comment les images sont recadrées/centrées

Flux de Travail du Modèle d'Aperçu

1. Créer un modèle d'aperçu dans le panneau d'administration
   (Définir la taille pour les images d'attribut)
   ↓
2. Assigner le modèle au type d'attribut
   (par exemple, l'attribut "Couleur" utilise "échantillon_de_couleur")
   ↓
3. Récupérer les modèles via le SDK
   (TemplatePreviews.getTemplatePreviews())
   ↓
4. Appliquer le modèle aux images d'attribut
   (Utiliser le marqueur du modèle dans les URL d'images)
   ↓
5. Affichage cohérent des images d'attribut
   (Tous les échantillons de couleur de la même taille)

Pourquoi utiliser le module TemplatePreviews ?

Avantage	Description
Attributs Cohérents	Toutes les images d'attributs de la même taille
Optimisation d'Image	Redimensionnement et compression automatiques
Entretien Facile	Changer le modèle met à jour tous les attributs
Meilleure UX	Affichage uniforme et professionnel des attributs
Intégration CDN	Livraison optimisée des images d'attributs
Configs Réutilisables	Même modèle pour tous les échantillons de couleur

---

📋 Ce que vous devez savoir

Les Modèles d'Aperçu sont Créés dans le Panneau d'Administration

Vous ne pouvez pas créer de modèles d'aperçu via le SDK - ils sont créés dans le panneau d'administration de OneEntry :

Panneau d'Administration OneEntry → Paramètres → Modèles d'Aperçu → Créer un Modèle → Définir le Nom/Marqueur → Configurer les Paramètres → Enregistrer

Processus de Création :

• Fournir un Nom (identifiant non unique)
• Fournir un Marqueur (identifiant unique)
• Cliquez sur "Créer" pour finaliser

Configuration :

• Sélectionnez le modèle et cliquez sur l'icône d'engrenage pour configurer
• Ajoutez des ensembles de paramètres d'aperçu pour trois orientations d'image :
  • Vertical - Largeur, Hauteur, Type de Centrage
  • Horizontal - Largeur, Hauteur, Type de Centrage
  • Carré - Longueur du côté, Type de Centrage
• Désignez un ensemble de paramètres comme le modèle par défaut

Le SDK est destiné à récupérer les configurations de modèles d'aperçu, pas à les créer.

Modèles d'Aperçu vs Modèles

Les TemplatePreviews sont spécifiquement pour les images d'attributs de produit :

Fonctionnalité	TemplatePreviews	Modèles
But	Aperçus d'images d'attributs	Images de contenu général
Cas d'utilisation	Échantillons de couleur, aperçus de matériaux	Images héroïques, photos de produits
Portée	Uniquement les attributs de produit	Pages, blocs, produits
Exemple	échantillon de couleur 50×50	bannière héroïque 1920×1080

Meilleure pratique : Utilisez TemplatePreviews pour les images d'attributs, Templates pour le contenu général.

Application des Modèles aux Images d'Attributs

OneEntry optimise automatiquement les images d'attributs en fonction des modèles d'aperçu.

Attribution des Modèles d'Aperçu

Les modèles d'aperçu sont généralement attribués à des types d'attributs spécifiques.

Affichage Cohérent des Attributs

Utilisez des modèles d'aperçu pour garantir un affichage uniforme des images d'attributs.

---

Structure du Modèle d'Aperçu :

interface ITemplatesPreviewEntity {
  id: number;
  title: string;
  proportions: {
    default: {
      horizontal: IProportion | null;
      vertical: IProportion | null;
      square: ISquare;
    };
  };
  identifier: string;
  version: number;
  attributeValues: AttributeType;
  position: number;
  isUsed: boolean;
  attributeSetIdentifier?: string | null;
}

---

💡 Notes Importantes

Les Modèles d'Aperçu sont Créés dans le Panneau d'Administration

Rappelez-vous : Le SDK est destiné à récupérer les configurations de modèles d'aperçu, pas à les créer.

Pour créer/éditer des modèles d'aperçu : Utilisez le Panneau d'Administration OneEntry.

---

Optimisation des Images d'Attribut

Le CDN OneEntry optimise automatiquement les images d'attributs en fonction des paramètres du modèle d'aperçu :

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

Vous n'avez qu'à référencer le marqueur du modèle.

---

Mise en Cache des Modèles d'Aperçu

Les modèles d'aperçu changent rarement - mettez en œuvre la mise en cache :

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

---

Affichage Cohérent des Attributs

Utilisez le même modèle d'aperçu pour le même type d'attribut :

• Tous les attributs de couleur → modèle échantillon_de_couleur
• Tous les attributs de matériau → modèle aperçu_de_matériau
• Tous les attributs de motif → modèle miniature_de_motif

La cohérence améliore l'expérience utilisateur et donne un aspect professionnel.

---

Tailles de Modèle Recommandées

Tailles d'images d'attribut courantes :

• Échantillons de Couleur : 50×50 à 100×100
• Aperçus de Matériaux : 80×80 à 150×150
• Miniatures de Motifs : 60×60 à 120×120
• Tableaux de Tailles : 100×80 à 200×150
• Aperçus de Finition : 75×75 à 100×100

---

Technologie LQIP

Les modèles d'aperçu utilisent la technologie Low-Quality Image Placeholder (LQIP) pour des performances de chargement optimales :

Comment ça fonctionne :

• Retourne une structure de tableau à deux éléments :
  1. Miniature - Format WebP, optimisé pour un chargement rapide (quelques centaines d'octets)
  2. Aperçu Généré - Image en pleine résolution qui remplace la miniature après le chargement

✅ Avantages :

• Affichage instantané avec la miniature
• Transition fluide vers la pleine qualité
• Réduction de la consommation de bande passante
• Meilleure expérience utilisateur

---

Suppression des Modèles

Pour supprimer un modèle :

1. Sélectionnez le modèle dans le panneau d'administration
2. Cliquez sur l'icône de suppression
3. Confirmez la suppression

Remarque : Seuls les modèles non utilisés peuvent être supprimés.

---

📊 Tableau de Référence Rapide

Méthode	Description	Cas d'utilisation
getTemplatePreviews()	Obtenir tous les modèles d'aperçu	Lister tous les modèles d'attribut disponibles
getTemplatesPreviewByMarker()	Obtenir un modèle d'aperçu par marqueur	Récupérer la configuration d'un modèle spécifique

❓ Questions Fréquemment Posées (FAQ)

Quelle est la différence entre TemplatePreviews et Templates ?

Les TemplatePreviews sont spécifiquement pour les images d'attributs de produit (échantillons de couleur, aperçus de matériaux), tandis que les Templates gèrent les images de contenu général (bannières héroïques, photos de produits). Utilisez TemplatePreviews uniquement pour les images spécifiques aux attributs.

---

Comment configurer différentes tailles pour les images horizontales, verticales et carrées ?

Dans le panneau d'administration, configurez les trois orientations pour chaque modèle d'aperçu. Le système détecte automatiquement l'orientation de l'image et applique les proportions appropriées (horizontales, verticales ou carrées).

---

Qu'est-ce que LQTP et pourquoi est-ce important ?

LQIP (Low-Quality Image Placeholder) charge d'abord une petite miniature (quelques centaines d'octets), puis la remplace par l'image de pleine qualité. Cela fournit un retour visuel instantané et améliore la performance perçue, surtout sur des connexions lentes.

---

Puis-je attribuer différents modèles d'aperçu à différents types d'attributs ?

Oui ! Créez plusieurs modèles d'aperçu avec différents marqueurs (par exemple, échantillon_de_couleur, aperçu_de_matériau, miniature_de_motif) et attribuez-les aux types d'attributs appropriés pour un rendu cohérent.

---

Comment appliquer un modèle d'aperçu aux images d'attributs ?

Les modèles d'aperçu sont appliqués automatiquement lorsque vous les configurez dans le panneau d'administration. Récupérez le modèle via getTemplatesPreviewByMarker() et utilisez les proportions pour rendre les images d'attributs avec des tailles cohérentes.

---

Quelles sont les tailles recommandées pour les images d'attributs ?

Gardez les images d'attributs petites : 50-150px pour des performances optimales. Tailles courantes : Échantillons de couleur (50×50 à 100×100), Aperçus de matériaux (80×80 à 150×150), Miniatures de motifs (60×60 à 120×120).

---

🎓 Meilleures Pratiques

• Utilisez des marqueurs, pas des ID - Les marqueurs sont stables à travers les environnements
• Mettez en cache les modèles d'aperçu - Réduisez les appels API pour des données rarement changées
• Créez des tailles cohérentes - Même type d'attribut = même taille de modèle
• Utilisez le format WebP - Meilleure compression pour les images d'attributs
• Définissez les paramètres de qualité - Équilibrez qualité et taille de fichier (80-90 recommandé)
• Mappez les attributs aux modèles - Créez un mappage attributType → modèle
• Utilisez des marqueurs sémantiques - échantillon_de_couleur, pas aperçu_1
• Testez sur mobile - Assurez-vous que les images d'attributs sont belles sur les petits écrans

---

Plus d'informations sur les modèles d'aperçu dans le panneau d'administration de OneEntry : https://doc.oneentry.cloudhttps://doc.oneentry.cloud/docs/templates/templates_preview/

---

Définition du module TemplatePreviews

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

---

🔗 Documentation Connexe

• Panneau d'Administration OneEntry - Modèles d'Aperçu - Documentation officielle du panneau d'administration
• Module Modèles - Modèles de contenu général
• Module Attributs - Configuration des attributs de produit
• Module Produits - Produits avec attributs
• Meilleures Pratiques d'Optimisation d'Image

---