自定义订阅插件页面

开发
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> 显示类似“购买安装或服务”的标题，而按钮则显示“立即支付”。
  • 如果 <h1> 拥有 subscription-title 类，我就可以通过 CSS 隐藏现有标题，并用 ::before 伪元素替换它，从而解决上述问题。
  • 我想在该页面的页眉或页脚中添加指向 /pfaffmanager/servers 的导航链接，但目前似乎找不到实现方法。我曾尝试在 s.hbs 模板中添加类似 {{~raw-plugin-outlet name="subscription-header-before"~}} 的代码，但事情没那么简单。

我认为希望订阅插件提供更多与订阅相关的类是合理的，但我 CSS 水平还比较差，所以还不确定我的想法是否正确，也不确定最终效果应该是什么样子。

啊！与其期待订阅插件提供插件插槽（plugin outlets），不如我尝试创建自己的模板，同时仍然调用订阅插件中的 Stripe 相关功能？这样是否更合理？

2

我接受针对这些更改的 PR。它们非常简单。

你应该能够在那个文件中添加一个 {{plugin-outlet}}。如果有合理的理由，我也接受相关的 PR。插件出口（plugin outlets）非常轻量。不过，原始插件出口（raw plugin outlet）无法使用，因为该文件并非原始文件。

3

哦！原来我可以！我真的可以！！！！

image
image953×1018 33.3 KB

哎呀！

好的，所以类似这样：

       <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

嗯，我觉得看起来挺接近的。谢谢Jay！

6

谢谢。我希望能“完成”当前的这项工作，然后再考虑添加这些或类似的插件接口。

我认为，有了这些基础，主题组件（只需稍作调整）就能添加我所需要的按订阅分类的链接。