Atualmente, a página principal de assinatura /s simplesmente mostra as opções de assinatura/pagamento. E cada opção de assinatura/pagamento tem apenas uma quantidade limitada de caracteres de texto que você pode incluir.
Para meus propósitos, eu gostaria de tornar a página de destino /s um pouco mais acolhedora e informativa em vez de apenas “somente negócios”.
É possível adicionar algum tipo de texto introdutório ou informativo à página /s acima das opções de subscrição/pagamento? Ou isso é algo que pode ser implementado (um dia) como uma opção ou está fora do escopo?
Basicamente, apenas uma caixa de texto editável pelo usuário com opções de formatação padrão acima das opções atuais.
Eu não estou totalmente familiarizado com as opções de edição de CSS do Discourse ainda, então não tenho certeza do que é possível quando se trata de editar páginas ou plugins ou componentes. Então, por favor, desculpe qualquer ignorância da minha parte.
Antes/Depois. Observe que tive que mudar o texto padrão “Subscriptions” (Assinaturas) para “make a payment” (fazer um pagamento), pois oferecemos mais do que apenas assinaturas. Embora pareça que o texto também está vinculado ao título da página. Portanto, no meu caso, faria mais sentido adicionar um bloco de texto acima do título da página existente em vez de abaixo dele.
Posso aproveitar isso se eu estiver hospedado? Está um pouco leve em instruções para novos usuários do Discourse – então provavelmente não sou o candidato ideal para usar no momento, mas estou tentando me atualizar o mais rápido possível e isso parece que seria muito útil.
Tive que seguir para a página do Github para encontrar a referência a isto:
Para encontrar plugin outlets, execute enableDevTools() no console do javascript.
Agradeço por responder à minha pergunta. Obrigado.
Sim. É um componente de tema. (Pelo menos a maioria dos planos permite que você instale os componentes de tema que desejar). Você tentou clicar no grande botão azul que diz “Install this theme component”?
Eu até adicionei esse link antes de ler esta parte da sua mensagem!
Ah, mas olhando as saídas de plugin em /s não parece haver nenhuma saída de plugin. Se você quiser colocar texto acima do cabeçalho “Make a payment” (Fazer um pagamento), você tem sorte!
(Finja que “Pay for Services” é “Make a Payment”) Você pode colocá-lo em top-notices ou above-main-container, mas receio que isso adicione o conteúdo em todas as páginas, não apenas na página de pagamento, a menos que você consiga descobrir algum CSS para ocultá-lo em todas as outras páginas. Se você for paciente, há uma chance razoável de você conseguir que https://ask.discourse.com/ lhe diga como fazer isso.
Por outro lado, seria um pedido justo para que uma saída de plugin fosse adicionada naquela página, mas isso é outra coisa para aprender.
Sim. Estou em um nível em que posso instalar componentes de tema sem problemas.
Não foi a intenção ser uma crítica de forma alguma. Minhas desculpas se pareceu dessa forma. Foi apenas uma observação como um novo usuário.
Sim, eu descobri esse link anteriormente em minhas pesquisas. O problema é que ainda não sei como executar o Discourse em um ambiente de desenvolvimento (ou acessá-lo através do console do navegador).
Então, minha pergunta sobre poder aproveitar seu componente era sobre isso e a necessidade de acesso à barra de ferramentas do desenvolvedor para usá-lo, e não sobre a instalação do componente em si. Desculpe a confusão.
Eu não estava ciente deste recurso, obrigado.
Quanto ao posicionamento, estou satisfeito em colocar o texto introdutório em qualquer lugar que caiba facilmente acima do conteúdo real de “assinatura”, desde que não apareça em todas as páginas.
Não, não. Eu quis dizer, sim. Você está certo. A documentação deve ser melhorada. É por isso que eu disse que era “justa”!
Você não precisa. Basta abrir as ferramentas do desenvolvedor no seu navegador (F12 funciona, a menos que você esteja em um Mac; e eu tenho que procurar toda vez que uso um Mac, mesmo que haja um a 2,5 metros de mim, e então eu pesquiso “mac open dev tools browser” ou algo assim) e digitar enableDevTools() no prompt do console. Você pode fazer isso aqui, agora mesmo, neste site.
Ahhh. Console de desenvolvedor do Navegador, não algum console dependente do Discourse. As coisas estão começando a fazer mais sentido. Obrigado.
Eu ativei Componentes Personalizados. E ativei as ferramentas de desenvolvedor no console do navegador. E ativei a barra de ferramentas do desenvolvedor para ver os componentes de plugin.
E agora eu entendo, você está dizendo que não há um componente de plugin para Assinaturas, então não há uma maneira *fácil de colocar texto naquela página de destino específica. Entendi.
*fácil como em Passo 1. Passo 2. Passo 3. Sucesso! E não exigindo horas de pesquisa e educação em CSS, etc.
Eu li em algum lugar nas minhas pesquisas recentes sobre Assinaturas (desculpe, não tenho o link neste exato momento) que estava previsto para uma reformulação de qualquer maneira. Espero que minha sugestão para uma área de introdução/texto seja considerada em qualquer desenvolvimento futuro.
Deveria haver uma classe de corpo que esteja apenas na página de assinatura, para que você possa usar CSS para ocultar a coisa que você adiciona em todas as páginas, exceto na de assinatura.
Sim, assinaturas tem class="above-main-container-outlet subscriptions-campaign ember-view", então você faz algo como ocultar a classe da coisa que você adiciona e depois a torna visível se estiver em uma subscriptions-campaign. Algo assim.
Depois de pesquisar um pouco no Google e no SO, montei uma versão puramente CSS:
.above-main-container-outlet.subscriptions-campaign::after {
content: "Qualquer texto que eu queira colocar aqui! \A Esta é uma nova linha! \A";
white-space: pre;
}
Eu consegui fazer funcionar apenas na página de assinaturas e na maior parte formatado corretamente com isto:
/* PARTE 1: O Cabeçalho (Estilizado como um H1 nativo) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
content: "Este é o Título";
display: block;
/* Estilização para corresponder aos cabeçalhos 'title-wrapper' */
font-family: var(--heading-font-family);
font-size: var(--font-up-5);
font-weight: bold;
line-height: var(--line-height-small);
color: #DDDDDD;
/* Espaço entre este cabeçalho e o texto abaixo dele */
margin-bottom: 8px;
}
/* PARTE 2: O Texto do Corpo (Com espaçamento abaixo dele) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
content: "Este é o texto simples que fica abaixo do cabeçalho. \A Você ainda pode usar barra invertida-A para novas linhas aqui.";
display: block;
/* Estilização para corresponder ao texto do corpo padrão */
font-family: var(--font-family);
font-size: var(--font-0);
line-height: var(--line-height-medium);
color: #DDDDDD;
white-space: pre-wrap;
/* Isso cria o espaço vazio (retorno de carro) abaixo do seu texto */
margin-bottom: 40px;
}
: