¿Cómo agregar un botón personalizado en la tarjeta de perfil de usuario?

Desarrollador
1

¿Cómo puedo agregar un botón personalizado en el resumen del perfil de usuario y en la vista de tarjeta?
Queríamos agregar una llamada a la acción (CTA) que haga algo (por ejemplo, redirigir) pero sin guardar datos…

image
image1812×800 88.3 KB

y también en la tarjeta de perfil:

image
image946×252 49.6 KB

Mi código inicial a continuación logra casi todo, pero está en la sección del encabezado y no pude encontrar una manera de hacerlo en el resumen del perfil de usuario y en la tarjeta:

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

Hola, bienvenido aquí :wave:

Necesitarías usar salidas de complementos en este lugar, específicamente user-profile-controls.

Puedes ver un ejemplo aquí:

3 Me gusta
3

Gracias @Arkshine y soy muy nuevo en esto de los plugins, así que pensé que se habría hecho algo similar con los botones de encabezado.

En cualquier caso, ¿user-profile-controls es un plugin? ¿Puedes guiarme sobre cómo lograrlo?

4

Te animo a leer Using Plugin Outlet Connectors from a Theme or Plugin; ¡responderá a tu pregunta!

Esencialmente, un “plugin outlet” es una forma de inyectar código en un lugar específico.

Se recomendaría crear un componente de tema usando la CLI de temas y usar archivos separados como hice en mi componente de tema aquí (no dudes en clonar mi repositorio para poder probarlo/modificarlo):

Sin embargo, todavía puedes probarlo desde tu etiqueta <script>:

En tu caso, escribirías:

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-controls/my_connector_name'>
  Contenido de la plantilla aquí
</script>

Observa la primera línea. Usamos user-profile-controls como nombre del conector, y my_connector_name puede ser lo que quieras.

4 Me gusta
5

¡Genial! Ahora entiendo y como se puede probar en la etiqueta del script, al menos podemos probarlo primero antes de crear el componente. Gracias de nuevo :beers:

3 Me gusta
6

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