4site-interactive-studios / engrid

The Unlicense
10 stars 4 forks source link

Add pseudo field support for it to act as a "recurring" upsell checkbox #45

Closed bryancasler closed 3 years ago

bryancasler commented 3 years ago

Add support to allow for a pseudo checkbox to act as a "recurring" toggle.

image

Markup Example

<!-- Pseudo Checkbox using the same markup as Engaging Networks -->
<div class="en__field en__field--checkbox en__field--000000 en__field--monthly_upsell_checkbox pseudo-en-field i1-label-hide">
    <label class="en__field__label en__field__label==positionabove" style=""></label>
    <div class="en__field__element en__field__element--checkbox">
        <div class="en__field__item">
            <input class="en__field__input en__field__input--checkbox" id="en__field_supporter_monthly_upsell_checkbox" name="supporter.monthly_upsell_checkbox" type="checkbox" value="Y">
            <label class="en__field__label en__field__label--item" for="en__field_supporter_monthly_upsell_checkbox">
                Make this a monthly recurring gift! Recurring gifts help us act faster on urgent issues.
            </label>
        </div>
    </div>
</div>

I have some code ( https://pastebin.com/raw/QM4sxnuA ) that can be dropped into this example page ( https://act.ran.org/page/29393/donate/1?mode=DEMO ) that will select/deselect the Monthly Frequency when the upsell checkbox is checked/unchecked ( https://d.pr/v/NPABHU ).

The above solution will get the job done, but it's not perfect and does leave a couple of improvements outstanding. The two things that could be improved is that it could visually update the giving amounts so they have "/mo" labels on them. And it could update the submit button label so it has the "Monthly" label on it. Right now it can't do either.

Once done, add to the ENGrid 2021 documentation ( https://docs.google.com/document/d/1zF-86Iq8tCRk4HCv-JaJYZulkC273x-_QODUed9F0Pw/edit ).

REF: https://app.productive.io/2650-4site-interactive-studios-inc/tasks/1641942

bryancasler commented 3 years ago

This is done