Aller au contenu principal

Introduction

Récupérez des modèles d'aperçu qui standardisent la taille et le format des images pour les images d'attributs de produit.

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

🎯 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 correspondent à 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 produit, les images de variante 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 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 produit 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 mal alignées et peu professionnelles

La solution TemplatePreviews

Avantages :

  • 🎨 Affichage cohérent - Toutes les images d'attributs utilisent le même modèle
  • 📊 Entretien facile - Changez 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'Attributs - Images associées aux attributs de produit (couleur, taille, matériau)
  • Taille d'Aperçu - Dimensions pour l'affichage des images d'attributs
  • Paramètres de Recadrage - Comment recadrer les images d'attributs
  • 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'attributs

Structure du Modèle d'Aperçu​

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

{
  id: 3,                                      // Unique identifier
  title: 'Preview Templates',                 // Template name (non-unique)
  identifier: 'preview-templates',            // Template marker (unique)
  proportions: {                              // Image parameter sets
    default: {                                // Default template configuration
      horizontal: {                           // For horizontal images
        width: 234,                           // Width in pixels
        height: 324,                          // Height in pixels
        alignmentType: 'middleBottom'         // Centering type (compression axis)
      },
      vertical: {                             // For vertical images
        width: 2,
        height: 3,
        alignmentType: 'leftTop'
      },
      square: {                               // For square images
        side: 3,                              // Side length in pixels
        alignmentType: 'leftTop'
      },
    },
  },
  version: 0,                                 // Version number
  attributeValues: {},                        // Additional attribute data
  position: 1,                                // Display position
  isUsed: false,                              // Usage status
  attributeSetIdentifier: null                // Associated attribute set
}

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. Create preview template in admin panel
   (Define size for attribute images)
   ↓
2. Assign template to attribute type
   (e.g., "Color" attribute uses "color_swatch")
   ↓
3. Fetch templates via SDK
   (TemplatePreviews.getTemplatePreviews())
   ↓
4. Apply template to attribute images
   (Use template marker in image URLs)
   ↓
5. Consistent attribute image display
   (All color swatches same size)

Pourquoi Utiliser le Module TemplatePreviews ?​

AvantageDescription
Attributs CohérentsToutes les images d'attributs de même taille
Optimisation d'ImageRedimensionnement et compression automatiques
Entretien FacileChanger le modèle met à jour tous les attributs
Meilleure UXAffichage uniforme et professionnel des attributs
Intégration CDNLivraison optimisée des images d'attributs
Configs RéutilisablesMê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 OneEntry :

OneEntry Admin Panel → Settings → Preview Templates → Create Template → Set Name/Marker → Configure Parameters → Save

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 :
    • Verticale - Largeur, Hauteur, Type de Centrage
    • Horizontale - Largeur, Hauteur, Type de Centrage
    • Carrée - Longueur de 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éTemplatePreviewsModèles
ObjectifAperçus d'images d'attributsImages de contenu général
Cas d'UtilisationÉchantillons de couleur, aperçus de matériauxImages héroïques, photos de produits
PortéeUniquement les attributs de produitPages, blocs, produits
ExempleÉchantillon de couleur 50×50Bannière héroïque 1920×1080

Meilleure pratique : Utilisez TemplatePreviews pour les images d'attributs, Modèles 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 de 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'Attributs​

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 vous référez simplement au 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 color_swatch
  • Tous les attributs de matériau → modèle material_preview
  • Tous les attributs de motif → modèle pattern_thumbnail

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

Tailles de Modèle Recommandées​

Tailles d'images d'attributs courantes :

  • Échantillons de Couleur : 50×50 à 100×100
  • Aperçus de Matériaux : 80×80 à 150×150
  • Vignettes 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 de 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éthodeDescriptionCas d'Utilisation
getTemplatePreviews()Obtenir tous les modèles d'aperçuLister tous les modèles d'attributs disponibles
getTemplatesPreviewByMarker()Obtenir un modèle d'aperçu par marqueurRécupérer la configuration d'un modèle spécifique

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

Quelle est la différence entre TemplatePreviews et Modèles ?​

Les TemplatePreviews sont spécifiquement pour les images d'attributs de produit (échantillons de couleur, aperçus de matériaux), tandis que les Modèles 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 LQIP 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, color_swatch, material_preview, pattern_thumbnail) 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), Vignettes de motifs (60×60 à 120×120).

🎓 Meilleures Pratiques​

  • Utilisez des marqueurs, pas des IDs - 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 type d'attribut → modèle
  • Utilisez des marqueurs sémantiques - color_swatch, pas preview_1
  • Testez sur mobile - Assurez-vous que les images d'attributs sont belles sur les petits écrans

Définition du module TemplatePreviews​


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

🔗 Documentation Connexe​