If your church has a preschool, or a lot of paid events, this short and simple recipe is for you! We'll be working through how we made it easier for people to identify when they owe money, which registration(s) they owe on, and where they can make payments or set up recurring payments.

If you aren't comfortable with coding or HTML, DON'T PANIC. There are clear instructions below and you can copy and paste my code right into your instance. But I incourage you to work through it line by line and learn what each part does so you can show someone else how to do it some day!

Here we go...

SPOILER ALERT

We will be taking the stock Recent Registrations block and adding some buttons and an icon that shows next to each registration where money is owed.

So going from this...

To this!

1. The Stock Block
   

   Right out of the box, this is what the recent registrations block on your My Account page looks like. As you can see, there is an icon that indicates when money is due. Simple and effective, right? It really is fine, and it works great.

   But it could be better!

   Here is the stock code that we get from Rock. Next, I'm going to show you what I did to enhance usability and visibility.

   <div class="panel panel-default">
       <div class="panel-heading">Recent Registrations</div>
       <ul class="list-group list-group-panel">
           {% for registration in Registrations %}
   
           <li class="list-group-item">
               <a href="{{ externalSite }}Registration?RegistrationId={{ registration.Id }}" class="js-group-item" >{{ registration.RegistrationInstance.Name }}</a>
                   {% if registration.BalanceDue > 0 %} <label class='label label-warning'>{{ '' | FormatAsCurrency }}</label> {% endif %}
           </li>
           {% endfor %}
       </ul>
   </div>

2. Version 2.0 - Part #1
   

   You've already seen what it looks like, so we'll get straight to the code.

   The first change I made was to add the subtitle that explains what the icon means. If this is all you want, just copy and paste into your Lava file referenced above. For the curious, the change happens after "Recent Registrations" starting with a "br" tag. If you look at the "span" tag you will see the subtitle and icon.

   <div class="panel panel-default">
       <div class="panel-heading">Recent Registrations<br>
       <span class="small"><label class='label label-warning'>{{ 'Global' | Attribute:'CurrencySymbol' }}</label> indicates balance due.</span></div>
       <ul class="list-group list-group-panel">
           {% for registration in Registrations %}
   
           <li class="list-group-item">
               <a href="{{ externalSite }}Registration?RegistrationId={{ registration.Id }}" class="js-group-item" >{{ registration.RegistrationInstance.Name }}</a>
                   {% if registration.BalanceDue > 0 %} <label class='label label-warning'>{{ '' | FormatAsCurrency }}</label> {% endif %}
           </li>
           {% endfor %}
       </ul>
   </div>

3. Version 2.0 - Part #2
   

   We have three different registration detail pages, so I needed to create three slightly different sets of two buttons. The only difference is, I have an IF statement that checks the registration template ID, displays the correct set, and links to the matching page.

   NOTICE

   If your registration page URL is different than stock, you will need to change them in my code below.

   If you have more than one registration payment page, and you want to make this block work with all of them, I will have our complete code at the end of this recipe.

   As you can see below, I added the button code WITHIN the existing IF statement. That way the buttons will hide and show along with the money icon.

   <div class="panel panel-default">
           <div class="panel-heading">Recent Registrations<br>
           <span class="small"><label class='label label-warning'>{{ 'Global' | Attribute:'CurrencySymbol' }}</label> indicates balance due.</span></div>
           <ul class="list-group list-group-panel">
               {% for registration in Registrations %}
       
               <li class="list-group-item">
                   <a class="js-group-item" href="{{ externalSite }}Registration?RegistrationId={{ registration.Id }}">{{ registration.RegistrationInstance.Name }}</a>
                   {% if registration.BalanceDue > 0 %} 
                       <label class='label label-warning'>{{ 'Global’ |  Attribute:'CurrencySymbol' }}</label>
                       <p><a class="btn btn-primary btn-xs push-top" href="{{ externalSite }}Registration?RegistrationId={{ registration.Id }}">Make one-time payment</a></p>
                       <p class="flush-bottom"><a class="btn btn-primary btn-xs" href="{{ externalSite }}YourPaymentPageURL?RegistrationId={{ registration.Id }}">Set up recurring payments</a></p>
                   {% endif %}
               </li>
               {% endfor %}
           </ul>
       </div>

4. Our Complete Code
   

   On our instance, I have three seperate pages because they are all for very different ministries and require their own settings. There may be a better way, but for now this works. This is a big chunk of code, so don't panic! I removed as much of the outer lines as possible since you will already have them.

   <li class="list-group-item">
   
         {% assign regTemplateId = registration.RegistrationTemplateId %}
         {% if regTemplateId == 70 or regTemplateId == 68 %}
             <a class="js-group-item" href="{{ externalSite }}vcpregistrationddetail?RegistrationId={{ registration.Id }}">{{ registration.RegistrationInstance.Name }}</a>
           {% if registration.BalanceDue > 0 %} <label class='label label-warning'>{{ 'Global' | Attribute:'CurrencySymbol' }}</label>
             <p><a class="btn btn-primary btn-xs push-top" href="{{ externalSite }}vcpregistrationddetail?RegistrationId={{ registration.Id }}">Make one-time payment</a></p>
             <p class="flush-bottom"><a class="btn btn-primary btn-xs" href="{{ externalSite }}SchedulePreschoolPayments?RegistrationId={{ registration.Id }}">Set up recurring payments</a></p>
   
           {% endif %}
   
         {% elseif regTemplateId == 72 %}
             <a class="js-group-item" href="{{ externalSite }}childcareregistration?RegistrationId={{ registration.Id }}">{{ registration.RegistrationInstance.Name }}</a>
           {% if registration.BalanceDue > 0 %} <label class='label label-warning'>{{ 'Global' | Attribute:'CurrencySymbol' }}</label>
             <p><a class="btn btn-primary btn-xs push-top" href="{{ externalSite }}childcareregistration?RegistrationId={{ registration.Id }}">Make one-time payment</a></p>
             <p class="flush-bottom"><a class="btn btn-primary btn-xs" href="{{ externalSite }}ScheduleEventPayments?RegistrationId={{ registration.Id }}">Set up recurring payments</a></p>
   
           {% endif %}
   
         {% else %}
             <a class="js-group-item" href="{{ externalSite }}eventregistration?RegistrationId={{ registration.Id }}">{{ registration.RegistrationInstance.Name }}</a>
           {% if registration.BalanceDue > 0 %} <label class='label label-warning'>{{ 'Global' | Attribute:'CurrencySymbol' }}</label>
             <p><a class="btn btn-primary btn-xs push-top" href="{{ externalSite }}eventregistration?RegistrationId={{ registration.Id }}">Make one-time payment</a></p>
             <p class="flush-bottom"><a class="btn btn-primary btn-xs" href="{{ externalSite }}ScheduleEventPayments?RegistrationId={{ registration.Id }}">Set up recurring payments</a></p>
   
           {% endif %}
   
         {% endif %}
       </li>

You made it!

As always, if this doesn't work or you have any questions at all, please let me know in RocketChat or the comments below and I will do my best to fix and/or explain!