Le CMS Diaango propose des composants prêt à l'emploi pour créer rapidement des pages web dynamiques. Les composants sont des briques qui apportent des fonctionnalités à une page web. Ils existent différents types de composants :

1. Des composants  conteneurs : utilisé comme structure pour contenir d'autres composant (Exemple : Section, Container, Grid, Row, Col)
2. Des composants simples : des titres, paragraphe, images, etc.
3. Des composants standards : utilisés couramment dans le design de contenu et page web, par exemple : des modals, des tooltip, des callapse, etc
4. Des composants de commerce en ligne : ce sont des composants personnalisés dédié à la création des pages pour le commerce en ligne, par exemple les Paniers, Moyen de paiement, Adresse de facturation, Point de vente, etc.)

Vous pouvez créer vos propres composants personnalisés à partir des composants de bases de la plateforme.

Avec l'éditeur vous avez  pouvez :

• Modifier le style et css
• Ajouter des traitements javascript
• Afficher des données internes ou externes
• Intégrer des APis 

Vous avez un contrôle total sur chaque composant et seule votre imagination est la limite pour la création de nouveaux contenus dynamiques, interactif sans aucune ligne de code.

Glissez et Déposez les éléments dans votre page pour créer de nouveaux composants. Vous pouvez réutiliser facilement les éléments dans n'importe quel autre page de votre site.

Consultez notre aide pour savoir comment créer un composant.

Liste des composants CMS

1. Composants conteneurs :
   • Section : Permet d'afficher une section de composants.
   • Conteneur (Container) : Permet d'afficher un composant centralisé une page.
   • Ligne de colonne (Row): Permet d'afficher une ligne de colonnes.
     • Colonne : Permet d'ajouter une colonne dans un Row (uniquement).
   • Grid : Permet d'afficher un grille d'autres composants

2. Composants basiques :

   • Titre : Permet d'ajouter un titre.
   • Sous titre : Permet d'ajouter un sous titre.
   • Label : Permet d'ajouter un élément label.
   • Paragraphe : Permettent d'ajouter et de formater du texte.
   • Ligne : Permet d'ajouter une ligne.
   • Lien : Permet d'ajouter un lien hypertexte à votre page.
   • Lien de catégorie : Permet d'afficher un lien vers une catégorie générique.
   • Bouton : Permet d'ajouter un bouton à votre page.
   • Bouton de formulaire : Permet d'ajouter un bouton d'action à un formulaire.
   • Icon : Permet d'ajouter une icone ou un lien hypertexte avec une icone.
   • Image : Facilitent l’ajout, la gestion et l’affichage des images.
   • Logo : Permet d'ajouter un logo.
   • Avatar :  Permet d'ajouter un avatar.
   • Galeries de Photos : Présentent des collections d'images sous forme de galeries.
   • ChatTidio : Permet d'ajouter composant de chat avec Tidio.
   • Toast : Permet d'ajouter un composant de notification.
   • Tooltip : Permet d'ajouter un composant tooltip.
   • Collapse : Permet d'ajouter un composant collapse.
   • Offcanvas : Permet d'ajouter un composant Offcanvas
   • Modal: Permet d'ajouter un composant modal.
   • Element HTML : Permet d'ajouter un élément HTML avec une balise paramétrable.
   • Toggle Switch : Permet d'ajouter un bouton switch On/Off.
   • List : Permet d'afficher une liste d'élément.
   • ListItem : Permet d'afficher un élement d'une liste.
   • LightBoxGallery : Permet d'afficher une gallerie image.
   • BlockQuote : Permet d'afficher quotation texte.
   • Breadcrumb : Permet d'afficher une fil d'ariane dans une page.
   • CookieAlert : Permet d'afficher le politique de gestion de cookie.(RGPD)
   • Dropdown : Permet d'afficher un menu dropdown.  
   • NavyBlock : Permet d'afficher un séparateur.
   • Footer : Permet d'afficher un composant pied de page.
   • NavigationBar : Permet d'afficher une barre de navigation.
   • NavigationTop : Permet d'afficher une barre de navigation qui contient des liens pour se connecter et s'inscrire et ou un panier.
   • ScriptTag : Permet de créer et d'ajouter un script dans votre page (ex. Google analitycs,  ).
   • SearchBox : Permet d'afficher une champs de recherche.
   • HeaderSearch : Permet d'afficher une champs de recherche.
   • Termsofuse : Permet d'afficher les conditions d'utilisations.
   • AddressMap: Permet d'ajouter une bannière
3. Composants carrousels :
   • Carousel : Composant carousel
   • Carousel Simple : Permet d'afficher un carousel basique.
   • Item de carousel : Permet d'ajouter un item dans un carousel.
   • Image de carousel : Permet d'ajouter une image à un carousel.
4. Composants Onglets :
   • Onglets : Permet d'ajouter des onglets à votre page.
   • Onglet : Permet d'ajouter un élément onglet.
   •  
5. Composants de recherches :
   • SearchFacets : Permet d'afficher les facets de recherche.
   • SearchBox : Permet d'afficher une camps de recherche paramétrable.
   • HeaderSearch : Permet d'afficher une champs de recherche dans la barre de navigation.
6. Composants de Navigation :
   • Menus de Navigation : Crée des menus pour faciliter la navigation sur le site.
   • Barres Latérales : Affichent des liens ou des informations supplémentaires.
   • RightSideBar : Permet d'afficher un menu laterale droit
   • UserInfo: Permet gérer les informations d'un compte utilisateur. (Profil, adresse, etc.)

7. Composants Interactifs :

   • Formulaire dynamique : Permet d'ajouter un formulaire pour soumettre des informations, envoyer des fichier etc.
   • Button de formulaire : Permet d'ajouter un bouton d'action à un formulaire.
   • Champ de formulaire : Permet d'ajouter un champ dynamique à un formulaire, par exemple un champ texte, une date, un fichier etc.
   • Formulaires de Contact / ContactForm :  Permet de collecter les informations des visiteurs via des formulaires.
   • ForgetPasswordForm : Permet d'afficher un formulaire pour de demande de réinitialisation d'un mot de passe.
     
   • ResetPasswordForm : Permet d'afficher un formulaire pour reinitialiser un mot de passe.
   • LoginForm : Permet à un utilisateur de se connecter à votre site.
   • RegisterForm : Permet à un utilisateur de s'inscrire à votre site.
   • NewsLetterForm : Permet à un utilisateur de s'inscrire à votre newsletter.
   • RegisterConfirmation : Permet d'afficher une message de confirmation d'un utilisateur.confirmation d'inscription.
   • RemoveAccountForm : Formulaire de suppression du compte utilisateur.
   • ResetPasswordForm :  Permet de modifier le mot de passe d'un utilisateur.
   • Commentaires : Permettent aux utilisateurs de laisser des commentaires sur les articles ou les pages.
     • Pagination des commentaires : Permet d'afficher une pagination pour les commentaires.
     • Flux de commentaire : Permet d'afficher un flux de commentaire.
     • CommentForm : Permet d'afficher un formulaire pour soumettre un commentaire.
     • CommentItem : Permet d'afficher un commentaire d'un utilisateur.
     • Comments : Liste des commentaires
     • Comments Feed : Un item pour alimenter une liste de commentaires.
   • Captcha : Permet d'afficher un captcha pour protéger un formulaire.
   • Countryselector : Permet de selectionner un pays. 
   • Domainselector : Permet de selectionner un domaine (TENANT).
   • LanguageSelector : Permet de selectionner la langue du site.
   • LoginProviders : Permet d'afficher des services de connexions tels google, facebook, etc.
   • SurveyForm: Permet d'afficher un formulaire multi étapes pour collecter des reponses utilisateurs.
   • SurveyPreview : Permet d'afficher les informations collectées dans un formulaire sondage.
   • SurveySection : Permet d'afficher une section/étape dans un formulaire
   • SurveyStage: Permet d'afficher une étape dans un formulaire

8. Composants de Média :

   • Lecteurs Vidéo : Intègrent des vidéos hébergées sur des plateformes externes.
   • Lecteurs Audio : Permettent de jouer des fichiers audio sur le site.
   •  

9. Composants de Commerce en ligne :

   • Composants de produit :
     • ProductActions : Permet d'afficher les boutons actions disponible pour un produit (ajouter au panier, réserver, etc.) 
     • ProductCarousel :  Permet un carousel de produit.
       • ProductCarouselItem : Permet de d'afficher un élément du carousel de produit.
     • Product :  Permet d'afficher une fichier produit qui contient une image, une description et un bouton d'ajout au panier.
     • ProductDescription : Permet d'afficher la description d'un produit.
     • ProductSummary : Permet d'afficher les informations du produit.
     • ProductDetail : Permet d'afficher les onglets détails d'un produit
     • ProductFeatures : permet d'afficher les caractéristique d'un produit.
     • ProductImages : Permet d'afficher les images d'un produit.
     • ProductLink : Permet d'ajouter un lien vers une fiche produit
     • ProductList : Permet d'afficher une liste de produits.
       • ProductListItem : Permet d'afficher un élément de la liste de produits.
     • ProductListSorts : Permet d'afficher des boutons pour trier une liste de produits.
     • ProductOptions : Permet d'afficher les options associées à un produit.
     • ProductReviewForm : Permet de soumettre un commentaire pour un produit
     • ProductReviewPreview : Permet d'afficher un commentaire utilisateur sur un produit  
     • ProductReviews : Permet d'afficher les avis sur un produit.
     • ProductReviewSummary : Permet d'afficher un apercu global des avis sur un produit (Nombre de critique, note, etc)
     • ProductVariantSelector : Permet de choisir un variant pour un produit multi-variants
     • RelatedProduct : Permet d'afficher les produits associés
     • ReviewPagination : Permet d'afficher une pagination des avis.
     • CategoryLink : Permet d'afficher un lien vers une catégorie ecommerce
   • Catalogues de Produits : Présentent les produits disponibles à la vente.
   • Liste de produits : Permet d'afficher une liste de produits.
   • Pagination Liste de produits : Permet d'afficher une pagination pour une liste de produits.
   • Options d'un produit : Permet d'afficher les options disponible pour un produit.
   • Formulaire d'avis produit : Permet un formulaire pour soumettre un avis sur un produit
   • Liste des avis produit : Permet d'afficher une liste d'avis sur un produit.
   • Pagination liste des avis : Permet d'afficher une pagination pour une liste d'avis.
   • Badge d'avis produit : Permet d'afficher un badge contenant le nombre d'avis et une note pour un produit.
   • Résumé produit : Permet d'afficher  texte descriptif d'un produit.
   • Liste des variants : Permet d'afficher la liste des variants d'un produit pour les ajouter au panier.  
   • Produits associés : Permet d'afficher les produits associés un autre produit.
   • DonationForm :  Formulaire pour recevoir un don.
   • Composants pour le checkout
     • Addtocart : Bouton Ajouter au panier.
     • CartActions : Boutons ajouter au paniers et continuer mes achats et ou Guest Checkout.
     • CartList :  Gère les articles que les utilisateurs souhaitent acheter.
       • CartListItem : Element dans un panier
     • CartSummary :  Aperçu du panier du client
     • CartVariantItem : Produit variant dans un panier.
     • CheckoutLogin : Formulaire de connexion pour finaliser une commande.
     • GuestCheckout : Formulaire pour autoriser les achat anonyme sans création de compte utilisateur.
     • MiniCart : Aperçu du panier dans la barre de navigation.
       • MiniCartListItem : Afiiche un produit dans le mini panier. 
     • OrderConfirmation : Affiche la confirmation de commande.
     • Voucher : Formulaire pour saisir un code de promotion / réduction.
     • BillingAddress : Formulaire pour saisir une addresse de facturation
     • DeliveryAddress : Formulaire pour saisir une adressse de Livraison.
     • DeliveryMethod :   Formulaire pour choisir un mode de livraison.
     • CheckoutSummary : Un aperçu de la commande avant validation.
     • Colissimo : Permet d'utiliser colissomo comme mode de livraison.
     • CurrencySelector : Permet de changer de devise.
     • PickupLocation : Permet de sélection une adresse de "Click and Collect".
     • PromotionMessages : Permet d'afficher les promotions disponibles pour un utilisateurs.
   • Composants Passerelles de Paiement :
     • PaymentMethod : Affiche les methodes de paiement disponible pour une commande.
     • PaypalPaymentMethod : Affiche les infos de paiement Paypal.
     • CashPaymentMethod : Mode de paiement en espèce.
     • BankilyPaymentMethod : Paiement avec Bankily.
     • MasrviPaymentMethod : Paiement avec Masrvi.
     • MockPaymentMethod : Mode de paiement de test.
     • OgonePaymentMethod : Mode paiement avec ingenico (ancien ogone).
     • ThreeDSecureForm : Permet d'afficher une formulaire pour une validation 3D secure d'un paiement.
     • WalletPaymentMethod : Permet d'utiliser un mode de paiement par portefeuille electronique (Tel que DiaangoPay). 
   • Composants clients :
     • BillingPlanDetails : Permet d'afficher les détails de la facturation d'un client.
     • BillingPlanEntry : Permet de d'afficher une ligne de facturation.
     • BillingPlans : Permet d'afficher les cycles de facturation d'un client.
     • CustomerAddresses : Permet d'afficher les adresses du clients.
     • CustomerEdition :Permet d'éditer les informattions du client
     • CustomerInfo : Permet de gérer les informations clients (profil, commandes, etc)
     • CustomerOrderHistory : Permet d'afficher le historique de commande du client.
     • CustomerPaymentMethods : Liste des moyens de paiement d'un client.
       • PaymentMethodEntry : Affiche une methode de paiement dans une liste. 
     • CustomerProfile : Permet d'fficher le profil du client.
     • CustomerSubscriptions : Permet d'afficher la liste des abonnements du client.
       • CustomerSubscriptionItem : Permet d'afficher une ligne de la liste des abonnements. 
   •  Composants commandes :
     • OrderDetails : Permet d'afficher une commande unitaire.
     • OrderDisplay : Permet d'afficher élement de la liste des commandes.
     • OrderEntry : Permet d'afficher les information d'une commande.
     • OrdersFeed : Permet d'afficher un tableau de liste de commandes
       • OrderFeedItem : Permet d'afficher un ligne de commande dans une Element OrdersFeed
     • OrderTracking : Permet d'afficher les étapes de livraison d'une commande.
     • RevenueChart : Permet d'afficher un chart sur les revenues d'un commerçant.
   • Composant de payouts 
     • BankilyPayout : Permet d'utiliser Bankily comme moyen  de réception des paiements.
     • BankilyPayoutForm : Permet de saisir les informations bankily pour recevoir des paiement.
     • BankPayout : Permet d'utiliser un compte bancaire comme moyen de réception des paiements.
     • BankPayoutForm : Permet de saisir les informations d'un compte bancaire pour recevoir des paiement.
     • CashPayout : Permet de recevoir des paiements en espèces.
     • CashPayoutForm : Permet de saisir les informations pour recevoir des paiements en espèces.
     • DiaangoPayout : Permet d'utiliser Diaango comme moyen de réception des paiements
     • DiaangoPayoutForm : Permet de saisir les informations pour utilisé diaango comme moyen de réception des paiements.
     • EditPayoutForm : Permet d'éditer les moyens de reception des paiements.
     • MasrviPayout : Permet d'utiliser Masrvi comme moyen de réception des paiements.  
     • MasrviPayoutForm :Permet de saisir les informations pour utiliser Masrvi comme moyen de réception des paiements.
     • OrangeMoneyPayout : Permet d'utiliser Orange Money comme moyen de réception des paiements.  
     • OrangeMoneyPayoutForm : Permet de saisir les informations pour utiliser Orane Money comme moyen de réception des paiements.
     • PayoutMethod : Permet d'afficher un moyen de paiement configuré.
     • PaypalPayout : Permet d'afficher les informations de paiement Paypal. 
     • PaypalPayoutForm : Permet de saisir les informations paypal.
     • PaypalPayoutMethod : Permet les information de paiement Paypal.
     • PayoutMethods : Permet d'afficher la liste de moyen de paiement.
       • PayoutListItem : Permet d'afficher un élément de la liste des moyens de paiements.
     • ChoosePayoutMethod : Permet de choisir le moyen de paiement
     • SetPayoutMethod : Permet de choisir et de configurer un moyen de paiement par une liste.
   • Composants retour de commande :
     • ReturnMethod : Permet d'afficher une méthode de retour d'une commande.
     • RefundMethod: Permet d'afficher une méthode de remboursement d'une commande.
     • ReturnConfirmation : Permet d'afficher la confirmation d'un retour de commande.
     • RetunShipping : Permet de choisir le mode transport pour un retour de produit.
     • ReturnsList : Permet d'afficher la liste des retours
       • RetunsListItem : Permet d'afficher un élément de retour. 
     • ReturnSummary : Permet d'afficher un aperçu des informations pour retourner une commande.
     • ReturnTracking : Permet de suivre un retour de commande.
   • Composants magasin et point de vente
     • PosAddress : Affiche adresse d'un point de vente 
     • PosBanners : Affiche les images d'un point de vente. 
     • PosDeliveryZones : Affiche les zones de livraison d'un magasin.
     • PosDetails : Informations  détailllés sur un magasin.
     • PosInfo : Affiche le nom et la description d'un magazin. 
     • PosList : Affiche une liste de magasins.
       • PostListItem : Affiche un item magasin dans une liste.  
     • PosPaymentMethods : Modes de paiements acceptés dans un magasin ou point de vente.
     • PosProducts : Produits disponible dans un point des ventes.
     • PosReviewForm : Formulaire pour soumettre un avis.
     • PosReviews : Liste des avis
     • OpeningSchedule : Permet d'ajouter une calendrier avec horaires d'ouverture.
   • Composants vendeurs & marketplace :
     • VendorAddress : Permet d'afficher l'adresse d'un commerçant.
     • VendorBanners : Permet d'afficher les bannières d'un commerçant.
     • VendorDeliveryZones : Permet d'afficher les zones de livraisons d'un commerçant.
     • VendorDetails : Permet d'afficher une fiche detaillées d'un commerçant.
     • VendorInfo : Permet d'afficher le nom et description d'un commerçant.
     •  VendorList : Permet d'afficher une liste de commerçants.
       • VendorListItem : Permet d'afficher une élément de la liste.
       • VendorListItemV2 :Permet d'afficher une élément de la liste.
     • VendorOpeningSchedule : Permet d'afficher horaire d'ouverture d'un commerçant.
     • VendorPaymentMethods : Permet d'afficher la liste des moyen de paiements disponible chez un commerçant.
     • VendorReviewForm : Permet de soumettre un avis.
     • VendorReviews : Permet d'afficher les avis sur la fiche d'un commerçant.
     • VendorSearchBox : Permet de recherche un établissement commerçant.
     • OpeningSchedule : Permet d'ajouter une calendrier avec horaires d'ouverture d'un commerçant.
10. Composants de Blog :
    • ArticleContainer :
    • ArticleLink :
    • ArticleForm
    • ArticleCommentForm
    • ArticleComments ::
    • ArticleCommentItem :
    • ArticleCarouselItem :
    • ArticleExplorer : Permet d'afficher un explorateur d'articles.
      • ArticleExplorerItem : Permet d'affichier un lien vers l'article.
    • ArticleList :
      • ArticleListItem
      • ArticleListItemV2
      • ArticleListPagination :
      • ArticleListSorts :
    • ArticleListLink :
    • ArticlePageNavigationBar :
    • ArticlePreview :
    • ArticlePublisher :
    • ArtclesCarousel : :
    • ArticleSearch :
    • ArticleShareLinks :
    • ArticleSummary :
    • ArticleTags :
    • AuthorArticles :
    • AuthorDetails :
    • AuthorProfileDetails :
    • BlogNavigationBar :
    • CategoryArticle :
    • CategoryArticles :
    • EditAuthor :
    • LiveFeedsTimeline :
    • RecentArticles :
    • RelatedArticle :
    • UserArticles : 
11. Composants d'avis et notations :
    • Google Reviews : Présentent les avis google.
12. Composants techniques :
    • Messages d'erreurs : Permet d'afficher les messages d'erreurs rencontrés  à l'utilisateur.
13. Composant réseaux sociaux :
    • Avatar : Permet d'afficher  un avatar.
    • Lien facebook : Permet d'afficher un lien vers une page facebook.
    • Lien instagram : Permet d'afficher un lien vers une page instagram.
    • Lien vimeo : Permet d'afficher un lien vers une page vimeo.
    • Lien youtube : Permet d'afficher un lien vers une page youtube.
    • Lien google+ : Permet d'afficher un lien vers une page google plus.
    • Lien github : Permet d'afficher un lien vers une page github.
    • Lien linkedin : Permet d'afficher un lien vers une page linkedin.
    • Lien twitter : Permet d'afficher un lien vers une page twitter.
14. Composants utilisateur : 
    • Activities : Permet d'afficher la liste des activites de l'utilisateur connecté.
    • ActivityFeed : Permet d'afficher une item de flux d'activité
    • Alerts Preview : Permet d'afficher un dropdown contenant la liste des messages reçus par un utilisateur.
    • EditProfile : Permet d'editer un profile utilisateur.
    • NotificationFeed : Permet d'afficher une notification qui alimente une liste.
    • Notifications : Permet d'afficher une liste de notifications.
    • TasksPreview : Permet d'affiher une tâche affecter à un utilisateur.
    • UserProfileDetails : Permet d'afficher les informations du profile utilisateur.
    • UserTasks : Permet d'afficher une liste de tâches utilisateur.
      • TaskListItem: Permet d'afficher un item de la liste des tâches.
    •  AssignedTask: Permet d'afficher les details d'une tâche affectée pour permettre à l'utilisateur d'exécuter des actions. 
15. Composants messagerie :
    • InboxPreview : Permet d'afficher un aperçu des messages reçus
16. Composants de backoffice :
    • BackofficeContainer : Permet d'afficher un menu backoffice.
    • BackofficeLogin : Permet d'afficher un formulaire de login pour le backoffice.
    • BackofficeNavtop : Permet d'afficher un menu pour le backoffice.
    • BackofficeSideBar : Permet d'afficher un menu sidebar pour le backoffice.
    • CatalogVersionSelector : Permet de sélectionner un catalogue.
17. Composants publicitaires :
    • WebsiteAds : Permet d'intégrer des scripts dans une page.