Comment ajouter un bouton personnalisé dans la carte de profil utilisateur ?

Dev
1

Comment puis-je ajouter un bouton personnalisé dans le résumé du profil utilisateur et la vue de la carte ?
Nous voulions ajouter un CTA qui ferait quelque chose (par exemple, rediriger) mais sans enregistrement de données…

image
image1812×800 88.3 KB

et aussi dans la carte de profil :

image
image946×252 49.6 KB

Mon code initial ci-dessous réalise presque, mais il se trouve dans la section de l’en-tête et je n’ai pas trouvé comment le faire dans le résumé du profil utilisateur et la carte :

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // faire quelque chose ici...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
1 « J'aime »
2

Bonjour, bienvenue ici :wave:
Vous devrez utiliser les plugin outlets à cet endroit, spécifiquement user-profile-controls.
Vous pouvez regarder un exemple ici :

3 « J'aime »
3

Merci @Arkshine et je suis vraiment nouveau dans ces plugins, donc je pensais que cela aurait été fait de manière similaire avec les boutons d’en-tête.

Dans tous les cas, le user-profile-controls est-il un plugin ? Pouvez-vous me guider sur la façon d’y parvenir ?

4

Je vous encourage à lire Using Plugin Outlet Connectors from a Theme or Plugin ; cela répondra à votre question !

Essentiellement, un “plugin outlet” est une façon d’injecter du code à un endroit précis.

Il serait recommandé de créer un composant de thème en utilisant le theme CLI et d’utiliser des fichiers séparés comme je l’ai fait dans mon composant de thème ici (n’hésitez pas à cloner mon dépôt pour pouvoir le tester/modifier) :

Cependant, vous pouvez toujours le tester depuis votre balise <script> :

Dans votre cas, vous écririez :

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Template content here
</script>

Notez la première ligne. Nous utilisons user-profile-controls comme nom de connecteur, et my_connector_name peut être ce que vous voulez.

4 « J'aime »
5

Génial ! Je commence à comprendre et comme on peut le tester dans la balise script, on peut au moins le tester avant de créer le composant. Merci encore :bière:

3 « J'aime »
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.