Personalizzazione delle pagine del plugin di sottoscrizione

[pfaffman (Jay Pfaffman)]

Mi sto avvicinando al punto in cui PfaffManager sarà un prodotto. Il mio MVP consiste nel far sì che Discourse sostituisca https://www.literatecomputing.com/discourse-installation-packages/, in modo che le persone possano acquistare un’installazione (come fanno ora tramite WordPress), il che avvierà l’installazione in Discourse (funzionante), dove potranno inoltre ricevere aggiornamenti in tempo reale sul processo di installazione (funzionante) e, infine, essere in grado di cliccare un pulsante per avviare una ricostruzione (funzionante) per un certo periodo di tempo.

Ho utilizzato add_model_callback(GroupUser, :after_save) per verificare che, quando un utente viene aggiunto al gruppo CreateServer, venga creato il server (nel modello aggiunto dal mio plugin) e l’utente venga rimosso dal gruppo (così da poter, teoricamente, acquistare un’altra installazione del server). Penso che questa tecnica possa essere utilizzata per rendere discourse-subscriptions un sistema di pagamento abbastanza generico.

Quindi ora ho questo:

Alcune cose che noto subito:

• il titolo <h1> e il pulsante condividono la stessa chiave discourse_subscriptions.subscribe.title. Vorrei che il <h1> dicesse qualcosa come “Acquista un’installazione o un servizio” per l’intestazione e qualcosa come “Paga ora” per il pulsante.
• se il <h1> avesse una classe subscription-title, potrei usare il CSS per nascondere il titolo esistente e sostituirlo con un ::before, il che potrebbe risolvere il problema sopra.
• Vorrei aggiungere una navigazione verso /pfaffmanager/servers da qualche parte in questa pagina, nell’intestazione o nel piè di pagina, ma non vedo un modo per farlo. Ho provato ad aggiungere qualcosa come {{~raw-plugin-outlet name="subscription-header-before"~}} al template s.hbs, ma non è così semplice.

Penso che sia ragionevole desiderare un po’ più di classi specifiche per le sottoscrizioni nel plugin delle sottoscrizioni, ma sono ancora così poco esperto di CSS che non sono sicuro di avere ragione o di come dovrebbe apparire.

Ah! Invece di augurarmi dei plugin outlet nel plugin delle sottoscrizioni, forse dovrei escogitare un mio template che chiami comunque le funzionalità di Stripe dal plugin delle sottoscrizioni? Ha senso?

[justin (Justin DiRose)]

@pfaffman

• il titolo <h1> e il pulsante condividono la stessa chiave discourse_subscriptions.subscribe.title – vorrei che il titolo <h1> dicesse qualcosa come “Acquista un’installazione o un servizio” per l’intestazione e qualcosa come “Paga ora” per il pulsante.
• se il titolo <h1> avesse una classe subscription-title, potrei usare il CSS per nascondere il titolo esistente e sostituirlo con un ::before, il che potrebbe risolvere il problema sopra.

Accetterei una PR per queste modifiche. Sono piuttosto semplici.

@pfaffman

Vorrei aggiungere una navigazione a /pfaffmanager/servers da qualche parte su questa pagina, nell’intestazione o nel piè di pagina, ma non vedo alcun modo per farlo. Ho provato ad aggiungere qualcosa come {{~raw-plugin-outlet name="subscription-header-before"~}} al template s.hbs, ma non è così semplice.

Dovresti essere in grado di aggiungere un {{plugin-outlet}} in quel file. Accetterei anche una PR se c’è un caso ragionevole. Gli outlet dei plugin sono abbastanza leggeri. Un raw plugin outlet non funzionerà comunque perché non è un file raw.

[pfaffman (Jay Pfaffman)]

@justin

{{plugin-outlet}} in quel file

Oh! Quindi posso! Posso!!!

@justin

Un plugin outlet grezzo non funzionerà comunque perché non è un file grezzo.

Doh!

OK, quindi qualcosa come

       <div class="product-purchase">
          {{#if product.subscribed}}
            <span class="purchased">&#x2713; {{i18n 'discourse_subscriptions.subscribe.purchased'}}</span>
            {{#link-to "user.billing.subscriptions" currentUser.username class="billing-link"}}
              {{i18n 'discourse_subscriptions.subscribe.go_to_billing'}}
            {{/link-to}}
            {{plugin-outlet name="after-go-to-billing" args=(hash product=product)}}
          {{else}}
            {{#link-to "s.show" product.id disabled=product.subscribed class="btn btn-primary"}}
              {{i18n 'discourse_subscriptions.subscribe.title'}}
            {{/link-to}}
            {{plugin-outlet name="after-subscribe-title" args=(hash product=product)}}
          {{/if}}
        </div>

E poi posso fare qualcosa come

<script type="text/x-handlebars" data-template-name="/connectors/after-go-to-billing/foobar">
    <div class="pfaffmanager-product"> forse un link usando {{product.id}}</div>
</script>

Oppure potresti anche nascondere e sostituire quasi tutti quei blocchi prodotto.

Forse alla fine capirò i plugin outlet.

Modifiche CSS

Quindi basta avvolgere l’intero template s.hbs in un <div class="subscription">, e poi puoi fare cose come

.subscription 
  {
    h1 {
    content: "Hello, world";
    background-color: yellow;
  }
}

Sembra corretto? Se non c’è nulla di davvero stupido qui, allora penso di essere sulla buona strada per poter creare una PR sensata.

[pfaffman (Jay Pfaffman)]

Ehi @justin, sembra abbastanza vicino?

Tornerò a dare un’occhiata a questo presto e invierò una PR.

[justin (Justin DiRose)]

Sì, penso che sembri piuttosto vicino. Grazie, Jay!

[pfaffman (Jay Pfaffman)]

Grazie. Spero di “finire” questa cosa attuale e poi vedere se posso aggiungere quelle o simili estensioni dei plugin.

E penso che, una volta implementate, un componente del tema potrebbe (con un po’ di lavoro di affinamento) aggiungere i link per ogni abbonamento che desidero.