Fonctionnalités du BadgeEditor

1. Sélection d’icônes : Bibliothèque avec variantes Free/Pro
2. Configuration du texte : Titre et description personnalisables
3. Personnalisation visuelle : Couleurs, tailles, alignement
4. Configuration du cadre : Types, couleurs, ombres
5. Aperçu en temps réel : Mobile et desktop
6. Gestion des groupes : Catégorisation des badges

IconLibrary

Système de gestion des icônes avec :

• Variantes Free/Pro : Différenciation des fonctionnalités
• Catégorisation : Organisation par thèmes
• SVG optimisé : Icônes vectorielles légères
• Couleurs personnalisables : Adaptation aux marques

Preview Components

MobilePreview et DesktopPreview :

• Rendu responsive des badges
• Simulation des conditions d’affichage
• Intégration avec les thèmes Shopify

Extension App Embed

Architecture

L’extension injecte les badges dans le frontend de la boutique :

const BadgeXpress = {

  shop: null,

  container: null,

  init(shop) {

    this.shop = shop;

    this.container = document.getElementById(“badge-xpress-container”);

    this.loadAndInject();

  },

  async loadAndInject() {

    const response = await fetch(

      `https://${this.shop}/apps/badge-proxy/api/embed`,

    );

    const data = await response.json();

    for (const badge of data.badges) {

      await this.injectBadge(badge);

    }

  },

};

Fonctionnalités

1. Détection automatique : Reconnaissance du type de page
2. Injection dynamique : Ajout des badges selon les règles
3. Styles adaptatifs : Intégration harmonieuse avec tous les thèmes

Performance optimisée : Chargement asynchrone et cache