# Gift Type Buttons
By default Luminate Online adds a checkbox to allow users to select whether the gift will be one-time or recurr on a specific schedule.
The buttons one sees on the form are custom HTML that was created for the donation forms. The HTML code for the buttons lives in the PageBuilder page reus_donation__gift_type_buttons. The JavaScript inserted on the donation forms interacts with the said HTML to produce the desired result. The HTML structure must remain as it for it to properly behave. Any changes to the HTML structure or element classes may result in unintended behavior.
Gift type buttons are present on combo donation forms that support one-time and recurring options. The reusable page should not be included on one-time only & recurring payment only forms.
# Labels
By default, the HTML code contains the class suffix recurring on the elements. The label is also set to Recurring by default. This is done to keep default state generic, since a form can be configured to have monthly, quarterly, or annual recurrence. When JavaScript loads on the page, it will read the value of the checkbox label, it should match the recurrence frequency selected. Based on that value, it will update the button label to the recurrence on the form.
On a form in Spanish, the JavaScript contains a map of recurrence labels and will update the name accordingly.
# Button Order
On the donation forms with standard donation levels that have monthly option pre-selected, the monthly button will appear first.
On forms with flexible donation levels the order is set by code in reus_content_catalog. Note, the reusable reus_donation__gift_type_buttons should not be modified to set the custom order on buttons.
To update the global default order, edit reus_content_catalog PageBuilder page.
Locate the correct section by searching for let donationFrequencyOrder. The first line will set the default order for all forms. If the order needs to be customized on a specific form, add a clause below and set the value of the variable to the desired order. The frequencies are represented by a capital first letter of the frequency. Note, please include all four options, even if the donation form doesn't have them all enabled. That will ensure the correct order, if the additional option is ever enabled on the form.
In the following example the global order will be: yearly, quarterly, monthly, one-time. And on the donation form with id 12846 in production it will be one-time, monthly, quarterly, yearly.
let donationFrequencyOrder = 'Y,Q,M,O';
[[?[[S29:SECURE_DOMAIN]]::support.savethechildren.org::
[[?|12846|::|[[S120:dc:donFormId]]|::
donationFrequencyOrder = 'O,M,Q,Y';
::]]
::]]
# Postscript Text
An option to add text below the buttons was added. The code for postscript text is in PageBuilder page reus_donation__gift_type_postscript. For the text to display as intended it should always be inserted immediately after the code for reus_donation__gift_type_buttons without any extra HTML tags in between. Example:
[[S51:reus_donation__gift_type_buttons]]
[[S51:reus_donation__gift_type_postscript]]
Since post script text lives in a separate PageBuilder page, it can be manually inserted on selected donation forms. However, the postscript code was configured with an assumption that it may be inserted on all donation forms and thus has to be a intelligent and properly respond to different donation frequencies. The section below provides code examples and explanations for how the code behaves and how it can be customized.
# Making Copies
As suggested in the examples below, the postscript text may be copied. When copying the text please name the variants using the following pattern reus_donation__gift_type_postscript_${variation} where ${variation} is a replaced by a meaningful keyword describing the variation of text.
The naming pattern will help easily locate and update all postscript text, should the need ever arise.
# Global Evergreen Text
If the postscript text is inserted on multiple donation forms with various frequencies, the generic text can be used.
<div class="gift-type-buttons__text">
<div class="gift-type-buttons__arrow"></div>
<p class="text--teal text--italic">By repeating your gift, you can help even more children on an ongoing basis — whenever or wherever the need is greatest.</p>
</div>
# Global Text for Monthly Forms Only
If the postscript code is inserted globally but content should only apply to forms with monthly recurring option. The postscript text can be configured to display content for the the specific conditions. The key is HTML attribute data-text-condition="monthly", the value should be monthly, quarterly, or annually to match the recurrence level set on the donation form and entered into the recurring checkbox label. In the example below, the text will show up only on forms that offer one-time & monthly options, but not on forms that have quarterly or annual option.
<div class="gift-type-buttons__text" data-text-condition="monthly">
<div class="gift-type-buttons__arrow"></div>
<p class="text--teal text--italic">By giving monthly, you can help even more children on an ongoing basis — whenever or wherever the need is greatest.</p>
</div>
# Global Evergreen Text & Custom Text on Donation Form with Id 1620
If the postscript code is inserted globally but a different content should display on form 1620.
The simplest way to achieve this is to make a copy of reus_donation__gift_type_postscript with a different name and insert it on the form 1620.
Another approach is to add a condition in the gloabl code of the PageBuilder page reus_donation__gift_type_postscript. Here is an example of how the code can be updated so different text renders on the form 1620.
<div class="gift-type-buttons__text">
<div class="gift-type-buttons__arrow"></div>
[[?x1620x::x[[S120:dc:donFormId]]x::
<p class="text--teal text--italic">Customized text for form 1620</p>
::
<!-- default global text -->
<p class="text--teal text--italic">By repeating your gift, you can help even more children on an ongoing basis — whenever or wherever the need is greatest.</p>
]]
</div>
# Global Evergreen Text & Custom Text on Donation Forms with Ids 1620 & 1625
The simplest way to achieve this is to make a copy of reus_donation__gift_type_postscript with a different name and insert it on the form 1620 & 1625.
Another approach is to add a condition in the gloabl code of the PageBuilder page reus_donation__gift_type_postscript. Here is an example of how the code can be updated so different text renders on the form 1620 & 1625.
<div class="gift-type-buttons__text">
<div class="gift-type-buttons__arrow"></div>
[[?x1620x1625x::x[[S120:dc:donFormId]]x::
<p class="text--teal text--italic">Customized text for forms 1620 & 1625</p>
::
<!-- default global text -->
<p class="text--teal text--italic">By repeating your gift, you can help even more children on an ongoing basis — whenever or wherever the need is greatest.</p>
]]
</div>
# Global Evergreen Text & Custom Text on Donation Forms with Ids 1620 & 1625
The simplest way to achieve this is to make two copies of reus_donation__gift_type_postscript with a different names and insert the appropriate pages on the form 1620 & 1625.