구독 플러그인 페이지 사용자 지정

개발
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도 수용하겠습니다. 플러그인 아울렛은 충분히 가볍습니다. 하지만 원본 파일이 아니기 때문에 raw 플러그인 아울렛은 작동하지 않습니다.

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

Hey @justin, 위 내용이 꽤 비슷해 보이나요?

조금 더 자세히 살펴본 후 PR을 제출할 예정입니다.

5

네, 꽤 비슷해 보이네요. 제이, 고마워요!

6

감사합니다. 지금 이 작업을 "완성"한 다음, 해당 플러그인 아웃렛이나 비슷한 것을 추가하는 방법을 검토해 볼 생각입니다.

그리고 그걸 제대로 배치하면, 테마 컴포넌트가 (조금 복잡한 작업이 필요하긴 하지만) 제가 원하는 구독별 링크를 추가할 수 있을 것 같습니다.