Personnalisation des pages du plugin d'abonnement

[pfaffman (Jay Pfaffman)]

Je suis de plus en plus proche de transformer PfaffManager en un véritable produit. Mon MVP consiste simplement à remplacer https://www.literatecomputing.com/discourse-installation-packages/ par Discourse, afin que les utilisateurs puissent acheter une installation (comme ils le font actuellement via WordPress). Cela déclenchera l’installation dans Discourse (fonctionnel), où ils pourront en outre suivre en temps réel l’avancement de l’installation (fonctionnel), puis cliquer sur un bouton pour lancer une reconstruction (fonctionnel) pendant une certaine période.

J’ai utilisé add_model_callback(GroupUser, :after_save) pour vérifier que lorsqu’un utilisateur est ajouté au groupe CreateServer, cela crée le serveur (dans le modèle ajouté par mon plugin) et le retire du groupe (afin qu’il puisse, théoriquement, acheter une autre installation de serveur). Je pense que cette technique pourrait être utilisée pour faire de discourse-subscriptions un système de paiement assez polyvalent.

Voici donc ce que j’ai actuellement :

Quelques éléments que je remarque dès maintenant :

• le titre <h1> et le bouton partagent la même clé discourse_subscriptions.subscribe.title. J’aimerais que le <h1> affiche quelque chose comme « Acheter une installation ou un service » pour l’en-tête, et que le bouton indique « Payer maintenant ».
• si le <h1> avait une classe subscription-title, je pourrais utiliser du CSS pour masquer le titre existant et le remplacer par un ::before, ce qui pourrait résoudre le problème mentionné ci-dessus.
• j’aimerais ajouter une navigation vers /pfaffmanager/servers quelque part sur cette page, dans un en-tête ou un pied de page, mais je ne vois aucun moyen de le faire. J’ai essayé d’ajouter quelque chose comme {{~raw-plugin-outlet name="subscription-header-before"~}} dans le modèle s.hbs, mais ce n’est pas aussi simple.

Je pense qu’il est raisonnable de souhaiter un peu plus de classes spécifiques aux abonnements dans le plugin d’abonnement, mais je suis encore trop mauvais en CSS pour être certain d’avoir raison ou de savoir exactement à quoi cela devrait ressembler.

Ah ! Plutôt que de souhaiter des sorties de plugin dans le plugin d’abonnement, ne devrais-je pas plutôt créer mon propre modèle qui appelle toujours les fonctionnalités Stripe du plugin d’abonnement ? Est-ce que cela aurait du sens ?

[justin (Justin DiRose)]

@pfaffman

• Le titre <h1> et le bouton partagent la même clé discourse_subscriptions.subscribe.title – j’aimerais que le <h1> affiche quelque chose comme « Acheter une installation ou un service » pour l’en-tête, et quelque chose comme « Payer maintenant » pour le bouton.
• Si le <h1> avait une classe subscription-title, je pourrais utiliser du CSS pour masquer le titre existant et le remplacer par un ::before, ce qui pourrait résoudre le problème ci-dessus.

J’accepterais une PR pour ces modifications. Elles sont assez simples.

@pfaffman

J’aimerais ajouter une navigation vers /pfaffmanager/servers quelque part sur cette page, dans un en-tête ou un pied de page, mais je ne vois aucun moyen de le faire. J’ai essayé d’ajouter quelque chose comme {{~raw-plugin-outlet name="subscription-header-before"~}} au modèle s.hbs, mais ce n’est pas aussi simple.

Vous devriez pouvoir ajouter un {{plugin-outlet}} dans ce fichier. J’accepterais également une PR s’il existe un cas raisonnable pour cela. Les emplacements de plugin sont suffisamment légers. Un emplacement de plugin brut ne fonctionnera pas car il ne s’agit pas d’un fichier brut.

[pfaffman (Jay Pfaffman)]

@justin

{{plugin-outlet}} dans ce fichier

Ah ! Donc je peux ! Je peux !!!

@justin

Un plugin outlet brut ne fonctionnera pas car ce n’est pas un fichier brut.

Ah mince !

OK, donc quelque chose comme

       <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>

Et ensuite, je peux faire quelque chose comme

<script type="text/x-handlebars" data-template-name="/connectors/after-go-to-billing/foobar">
    <div class="pfaffmanager-product"> peut-être un lien utilisant {{product.id}}</div>
</script>

Ou alors, vous pourriez même masquer et remplacer presque tous ces blocs de produits.

Je finirai peut-être par comprendre les plugin outlets après tout.

Modifications CSS

Il suffit donc d’envelopper tout le modèle s.hbs dans un <div class="subscription">, et ensuite vous pourrez faire des choses comme

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

Est-ce que cela semble correct ? S’il n’y a rien de vraiment stupide ici, alors je pense que je suis sur la bonne voie pour pouvoir soumettre une PR cohérente.

[pfaffman (Jay Pfaffman)]

Salut @justin, est-ce que ça semble pas mal comme ça ?

Je vais jeter un autre coup d’œil à ça bientôt et soumettre une PR.

[justin (Justin DiRose)]

Oui, je pense que ça ressemble pas mal. Merci Jay !

[pfaffman (Jay Pfaffman)]

Merci. J’espère « terminer » cette tâche actuelle, puis voir comment ajouter ces points de sortie de plugin ou d’autres similaires.

Et je pense qu’avec ces éléments en place, un composant de thème pourrait (avec un peu de réglages fastidieux) ajouter les liens par abonnement que je souhaite.