サブスクリプションプラグインページのカスタマイズ

開発
1

PfaffManager を製品として完成させるのに近づいています。私の MVP は、単に Discourse で https://www.literatecomputing.com/discourse-installation-packages/ を置き換えることです。これにより、現在 WordPress 経由で行っているのと同様に、ユーザーがインストールパッケージを購入できるようになります。購入すると、Discourse 上でインストールが開始され（機能済み）、さらにインストールの進行状況をライブで確認できるようになります（機能済み）。その後、一定期間、インストールの再構築を開始するボタンをクリックすることも可能です（機能済み）。

add_model_callback(GroupUser, :after_save) を使用して、ユーザーが CreateServer グループに追加された際に、サーバーが作成され（私がプラグインで追加したモデル内で）、そのユーザーがグループから削除されるようにしました（理論的には、別のサーバーインストールを購入できるようにするため）。この手法を使えば、discourse-subscriptions を比較的汎用的な決済システムにできるのではないかと考えています。

これで、以下のような状態になりました：

image
image986×606 29.2 KB

現時点でいくつかの課題が見えています：

  • <h1> タイトルとボタンが同じ discourse_subscriptions.subscribe.title を共有しています。ヘッダーには「インストールまたはサービスの購入」といった文言を、ボタンには「今すぐ支払う」といった文言をそれぞれ表示したいです。
  • もし <h1> に subscription-title クラスがあれば、CSS を使って既存のタイトルを非表示にし、::before で置き換えることで上記の問題を解決できるかもしれません。
  • このページのヘッダーまたはフッターに /pfaffmanager/servers へのナビゲーションを追加したいのですが、その方法が見当たりません。s.hbs テンプレートに {{~raw-plugin-outlet name="subscription-header-before"~}} のようなものを追加しようと試みましたが、そう単純ではありません。

サブスクリプションプラグインに、サブスクリプション固有のクラス機能をもう少し追加してほしいとは思うのですが、私の CSS のスキルがまだ不十分で、それが正しいアプローチなのか、あるいはどのような形になるべきなのか確信が持てません。

あ！サブスクリプションプラグイン内にプラグインアウトレットを望む代わりに、サブスクリプションプラグインから Stripe 関連の処理を呼び出す独自のテンプレートを作成するのはどうでしょうか？それは理にかなっているでしょうか？

2

これらの変更については PR を歓迎します。非常にシンプルな作業です。

そのファイルに {{plugin-outlet}} を追加できるはずです。合理的な理由があれば、PR も歓迎します。プラグイン outlets は軽量です。ただし、raw ファイルではないため、raw plugin outlet は機能しません。

3

ああ！そうか！できるんだ！できるぞ!!!

image
image953×1018 33.3 KB

しまった！

OK、つまりこんな感じですね。

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

そして、以下のような処理が可能です。

<script type="text/x-handlebars" data-template-name="/connectors/after-go-to-billing/foobar">
    <div class="pfaffmanager-product"> {{product.id}} を使ったリンクなど</div>
</script>

あるいは、これらの製品ブロックのほとんどを隠して置き換えることさえできます。

どうやら、ついにプラグイン出口の仕組みを理解できたかもしれません。

CSS の変更

つまり、s.hbs テンプレート全体を <div class="subscription"> で囲むだけで、以下のようなことができます。

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

これで合っていますか？ここに明らかな間違いがなければ、適切な PR を作成できる手応えを感じています。

4

@justin さん、上記の内容はほぼ合っていますか？

近々もう一度確認して、PR を提出します。

5

はい、かなり近いと思います。ジェイ、ありがとう！

6

ありがとうございます。まずは現在の作業を「完了」させてから、それらや同様のプラグインエクスポートの追加を検討したいと考えています。

それらが整えば、テーマコンポーネントは（わずかな調整を加えるだけで）私が望むサブスクリプションごとのリンクを追加できると思います。