Come aggiungere un pulsante personalizzato nella scheda profilo utente?

Sviluppatore
1

Come posso aggiungere un pulsante personalizzato nel riepilogo del profilo utente e nella visualizzazione della scheda?
Volevamo aggiungere una CTA che facesse qualcosa (ad esempio, reindirizzare) ma senza salvare dati…

image
image1812×800 88.3 KB

e anche nella scheda del profilo:

image
image946×252 49.6 KB

Il mio codice iniziale qui sotto ottiene quasi tutto, ma è nella sezione dell’intestazione e non sono riuscito a trovare un modo per farlo nel riepilogo del profilo utente e nella scheda:

<script type="text/discourse-plugin" version="0.4">
    api.decorateWidget('header-buttons:after', helper => {
        if (Discourse.User.current()) {
            const cta = function() {
                // fai qualcosa qui...
            };
            return helper.h('button#create-new', {
                className: "btn fa fa-plus",
                onclick: cta
            }, 'CTA' );
        }
    });
</script>
1 Mi Piace
2

Ciao, benvenuto qui :wave:

Dovresti usare plugin outlets in questo punto, specificamente user-profile-controls.

Puoi vedere un esempio qui:

3 Mi Piace
3

Grazie @Arkshine e sono davvero nuovo a questi plugin, quindi pensavo che sarebbe stato fatto qualcosa di simile con i pulsanti dell’intestazione.

In ogni caso, user-profile-controls è un plugin? Puoi guidarmi su come ottenerlo?

4

Ti incoraggio a leggere Using Plugin Outlet Connectors from a Theme or Plugin; risponderà alla tua domanda!

Essenzialmente, un plugin outlet è un modo per iniettare codice in un punto specifico.

Sarebbe consigliabile creare un componente tema utilizzando la CLI per temi e utilizzare file separati come ho fatto nel mio componente tema qui (non esitare a clonare il mio repository in modo da poterlo testare/modificare):

Tuttavia, puoi ancora testarlo dal tuo tag <script>:

Nel tuo caso, scriveresti:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Contenuto del template qui
</script>

Nota la prima riga. Usiamo user-profile-controls come nome del connettore e my_connector_name può essere qualsiasi cosa tu voglia.

4 Mi Piace
5

Fantastico! Ora sto capendo e dato che può essere testato nello script tag, almeno possiamo testarlo prima di creare il componente. Grazie ancora :beers:

3 Mi Piace
6

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