 |
Resumen | Soporte de la comunidad - donación configurable |
 |
Vista previa | Theme Creator |
 |
Repositorio | GitHub - VaperinaDEV/community-support: Community Support - configurable donation · GitHub |
 |
¿Te resultó útil? | ./support --coffee |
 |
Guía de instalación | Cómo instalar un tema o componente de tema |
 |
¿Nuevo en temas de Discourse? | Guía para principiantes sobre el uso de temas de Discourse |
Instalar este componente de tema
Hola 
El objetivo fue hacerlo lo suficientemente flexible para adaptarse a diseños y casos de uso de comunidad muy diferentes, manteniendo la configuración completamente dentro de la Configuración del Tema.
Funciones
Modal de donación / soporte
El componente puede mostrar opcionalmente un modal de soporte de forma automática.
El modal automático admite:
- retraso de apertura configurable
- visibilidad basada en URL/ruta
- visibilidad para miembros/usuarios anónimos
- nivel de confianza mínimo
- grupos excluidos
- duración de la cookie de cierre configurable
- tres tamaños de modal:
normal,large,maximized
El modal también se puede abrir manualmente desde cualquier lugar usando:
#donate
Esto es intencionalmente independiente de las reglas de visibilidad automática, para que una comunidad pueda compartir un enlace #donate o añadirlo a la barra lateral mientras controla dónde aparecen las solicitudes de soporte automáticas.
Métodos de donación / soporte
Se pueden configurar múltiples métodos de soporte utilizando el editor de configuración de objetos de Discourse.
Cada método puede tener:
- nombre
- descripción
- proveedor
- propietario
- icono
- URL
- texto del botón
- valor copiable
- estado destacado
- traducciones
Esto es agnóstico al proveedor, por lo que el componente no requiere un proveedor de pagos específico.
Por ejemplo, un método simplemente puede apuntar a una página de pago/soporte existente de PayPal, Revolut, Wise u otro servicio.
Localización por método
Los métodos de donación admiten sus propias traducciones.
El selector de idioma incluye los idiomas disponibles de Discourse, y cada método puede tener traducido:
- nombre
- descripción
- texto del botón
- etiqueta de copiar
- propietario
- proveedor
Si no está disponible un idioma exacto, el componente utiliza el idioma base como alternativa y luego el inglés u otra traducción disponible.
Meta de soporte y barra de progreso
El componente incluye una meta de soporte y una barra de progreso opcionales.
Puedes configurar:
- cantidad actual
- cantidad objetivo
- moneda
- etiqueta de soporte
- período de soporte
- visualización del progreso
- dónde aparece la barra de soporte
Períodos admitidos:
- único
- mensual
- anual
La barra de progreso también maneja el soporte que supera la meta.
En lugar de detenerse simplemente en el 100%, se continúa mostrando el porcentaje real:
75% → progreso normal
100% → meta alcanzada
125% → 25% del siguiente ciclo de meta
220% → 20% del tercer ciclo de meta
La barra de progreso visual permanece como una sola barra compacta.
Antes de la primera meta:
background: tertiary-low
fill: tertiary
Exactamente en el 100%, 200%, 300%, etc.:
background: success
fill: success
Entre hitos:
background: success-low
fill: success
Esto significa que una comunidad puede seguir mostrando un progreso significativo incluso cuando supera considerablemente su meta original.
Avatares de los patrocinadores
La barra de soporte puede mostrar opcionalmente los avatares de los patrocinadores.
Los patrocinadores se configuran actualmente de forma manual a través de la configuración de objeto supporters.
Cada patrocinador puede tener:
- nombre de usuario
- cantidad de contribución
- moneda
El nombre de usuario se resuelve contra el perfil de usuario, por lo que la información de perfil/avatar del usuario se puede mostrar automáticamente.
El número de avatares mostrados directamente en la barra de soporte es configurable.
Por ejemplo:
◉ ◉ ◉ ◉ ◉ +8
Si hay más patrocinadores que el número de avatares visibles configurado, los patrocinadores restantes son accesibles a través de un DMenu.
El menú de patrocinadores puede mostrar:
- avatar
- nombre de usuario
- enlace de perfil
- cantidad de contribución
- moneda
Las cantidades de contribución se pueden habilitar o deshabilitar de forma independiente.
Los patrocinadores también se pueden poblar desde uno o más grupos utilizando la configuración supporter_groups. Esto complementa la lista de patrocinadores configurada manualmente en lugar de reemplazarla.
Múltiples diseños
El componente incluye tres diseños visuales independientes:
- Clásico: presentación equilibrada de estilo comunidad
- Minimal: ornamento visual reducido y presentación compacta
- Moderno: jerarquía más fuerte y tarjetas más prominentes
El diseño es independiente de la vista seleccionada, por lo que ambos se pueden combinar libremente.
Múltiples vistas
El componente admite varios modos de presentación:
-
Completa: contenido de soporte completo con héroe, método destacado y métodos de donación
-
Compacta: presentación reducida para ubicaciones más pequeñas
-
Minimal: presentación centrada en el método
-
Progreso: solo meta de soporte y progreso
Esto permite usar el mismo componente en ubicaciones muy diferentes sin duplicar la configuración o el estilo.
Incorporaciones en publicaciones
El contenido de soporte se puede incorporar directamente en las publicaciones.
Habilita enable_post_embed y luego usa:
[wrap=donate]
[/wrap]
Se pueden usar vistas adicionales directamente a través del envoltorio:
[wrap=donate-compact]
[/wrap]
[wrap=donate-minimal]
[/wrap]
[wrap=donate-progress]
[/wrap]
El envoltorio controla la vista, mientras que la configuración global design controla el diseño visual.
Esto es útil cuando el contenido de soporte necesita ser parte del contexto de una publicación en particular en lugar de aparecer como un elemento de interfaz global.
Soporte para salidas de plugin
El componente puede renderizar el widget de soporte a través de salidas de plugin.
Habilita outlet_enabled y especifica los nombres de salida deseados en outlet_locations, separados por |.
La vista y el diseño de la salida se pueden configurar de forma independiente:
outlet_viewoutlet_design
Esto permite usar el componente de soporte en ubicaciones como listas de temas, encabezados, pies de página y otras salidas admitidas.
Compatibilidad con Discourse Ads
El componente también se puede usar con el plugin Discourse Ads.
En lugar de depender directamente del plugin de Anuncios, Community Support proporciona un marcador de incorporación HTML estable:
<div data-donation-widget="support"></div>
Esto se puede copiar en un anuncio HTML y colocarse en la salida de Anuncios deseada.
El componente posee el marcado y el CSS, por lo que no es necesario duplicar el estilo de la donación dentro del propio anuncio.
La vista y el diseño se pueden reemplazar opcionalmente:
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>
Esto significa que el mismo sistema de soporte se puede reutilizar en diferentes ubicaciones de Anuncios manteniendo un diseño consistente.
Incorporaciones HTML genéricas
El mismo mecanismo de incorporación también se puede usar en otras ubicaciones compatibles con HTML:
<div data-donation-widget="support"></div>
El marcador HTML permanece intencionalmente simple mientras el Componente de Tema maneja el renderizado real.
Esto permite cambiar el diseño o la implementación del componente sin tener que reescribir cada incorporación individual.
Controles de visibilidad
El contenido de soporte automático y renderizado globalmente se puede controlar mediante varias configuraciones:
- Mostrar para miembros
- Mostrar para usuarios anónimos
- Nivel de confianza mínimo
- Grupos excluidos
- Mostrar en la página de inicio
- Coincidencia de URL/ruta
Los grupos excluidos se aplican al contenido de soporte renderizado automáticamente, como el modal, los widgets de salidas de plugin y las incorporaciones genéricas.
El contenido contextual sigue estando disponible:
#donate[wrap=donate]
Esto permite excluir a ciertos usuarios de la interfaz de soporte promocional/automática sin impedirles acceder a un enlace de soporte compartido explícitamente o a un bloque de soporte contextual.
Control de cierre / cookie
Cuando se cierra el modal abierto automáticamente, el componente puede recordar esa decisión.
La duración de la cookie se puede configurar como:
- ninguna
- minuto
- día
- semana
- mes
- año
Esto impide que el modal automático aparezca repetidamente al mismo visitante según la duración seleccionada.
Ejemplos básicos
Abrir el modal de soporte
#donate
Incorporar contenido de soporte en una publicación
[wrap=donate]
[/wrap]
Versión compacta de publicación
[wrap=donate-compact]
[/wrap]
Incorporación HTML genérica
<div data-donation-widget="support"></div>
Incorporación con presentación personalizada
<div
data-donation-widget="support"
data-view="compact"
data-design="minimal"
></div>