How to add unique CSS identifiers for plan buttons in Discourse Subscriptions plugin

Dev
1

I want to modify this template so that each payment option also has a class that I could use to modify the buttons separately. Currently, it doesn’t seem that there is a way to target the plan buttons separately. Let me know if I’m wrong about this.

Basically, I want to ensure that each payment-plan in the code below comes with its own class, like button1 or button2 or something.

<div class="subscribe-buttons">
  {{#each orderedPlans as |plan|}}
    {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan")}}
  {{/each}}
</div>
2

Figured it out, for anyone interested. Ember.js has a cool feature to get the index in the loop, and also a helper to concatenate that index with a string:

<script type="text/x-handlebars" data-template-name="javascripts/components/payment-options">
    <p>
        {{i18n "discourse_subscriptions.plans.select"}}
    </p>
    
    <div class="subscribe-buttons">
        {{#each orderedPlans as |plan i|}}
            {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan") elementId=(concat 'button' i)}}
        {{/each}}
    </div>
</script>
1 Like