Aller au contenu principal

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 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 - 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'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 de 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 :
    • Vertical - Largeur, Hauteur, Type de Centrage
    • Horizontal - Largeur, Hauteur, Type de Centrage
    • CarrĂ© - Longueur de cĂ´tĂ©, Type de Centrage
  • DĂ©signez un ensemble de paramètres comme le modèle par dĂ©faut

Le SDK est pour récupérer les configurations de modèles d'aperçu, pas pour 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
ButAperç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 les TemplatePreviews pour les images d'attributs, les 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 pour récupérer les configurations de modèles d'aperçu, pas pour les créer.

Pour créer/éditer des modèles d'aperçu : Utilisez le Panneau d'Administration de 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'attribut 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 les 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, 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

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​