Donate Widget
Donate Widget Oneoff Only {% include 'components/donate-widget/donate-widget~oneoff-only' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_only_freq_once" class="js-donate-widget__freq-radio" name="oneoff_only_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="oneoff_only_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_only_freq_monthly" class="js-donate-widget__freq-radio" name="oneoff_only_freq" autocomplete="off" data-frequency="monthly">
<label for="oneoff_only_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_only_amount_once_200" class="js-donate-widget__amount-radio" name="oneoff_only_amount_once" checked="checked" autocomplete="off" data-amount="200">
<label for="oneoff_only_amount_once_200">£200</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_only_amount_once_125" class="js-donate-widget__amount-radio" name="oneoff_only_amount_once" autocomplete="off" data-amount="125">
<label for="oneoff_only_amount_once_125">£125</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_only_amount_once_80" class="js-donate-widget__amount-radio" name="oneoff_only_amount_once" autocomplete="off" data-amount="80">
<label for="oneoff_only_amount_once_80">£80</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="200">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="125">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="80">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 3</p>
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "oneoff_only",
"allHandles": true,
"freq_handles": false,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [],
"amounts_once": [
{
"title": "200",
"content": "Once content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "125",
"content": "Once content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "80",
"content": "Once content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}
Donate Widget Monthly Strong Priority {% include 'components/donate-widget/donate-widget~monthly-strong-priority' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Make a monthly donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_strong_priority_freq_monthly" class="js-donate-widget__freq-radio" name="monthly_strong_priority_freq" checked="checked" autocomplete="off" data-frequency="monthly">
<label for="monthly_strong_priority_freq_monthly">monthly</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_strong_priority_freq_once" class="js-donate-widget__freq-radio" name="monthly_strong_priority_freq" autocomplete="off" data-frequency="once">
<label for="monthly_strong_priority_freq_once">once</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_strong_priority_amount_monthly_25" class="js-donate-widget__amount-radio" name="monthly_strong_priority_amount_monthly" checked="checked" autocomplete="off" data-amount="25">
<label for="monthly_strong_priority_amount_monthly_25">£25</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_strong_priority_amount_monthly_15" class="js-donate-widget__amount-radio" name="monthly_strong_priority_amount_monthly" autocomplete="off" data-amount="15">
<label for="monthly_strong_priority_amount_monthly_15">£15</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_strong_priority_amount_monthly_8" class="js-donate-widget__amount-radio" name="monthly_strong_priority_amount_monthly" autocomplete="off" data-amount="8">
<label for="monthly_strong_priority_amount_monthly_8">£8</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="25">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="15">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="8">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 3</p>
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate monthly</a>
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title ">Make a one-off donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
<div class="c-donate-widget__radio">
<input type="radio" id="alt_monthly_strong_priority_freq_once" class="js-donate-widget__freq-radio" name="alt_monthly_strong_priority_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="alt_monthly_strong_priority_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="alt_monthly_strong_priority_freq_monthly" class="js-donate-widget__freq-radio" name="alt_monthly_strong_priority_freq" autocomplete="off" data-frequency="monthly">
<label for="alt_monthly_strong_priority_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
<div class="c-donate-widget__radio">
<input type="radio" id="alt_monthly_strong_priority_amount_once_200" class="js-donate-widget__amount-radio" name="alt_monthly_strong_priority_amount_once" checked="checked" autocomplete="off" data-amount="200">
<label for="alt_monthly_strong_priority_amount_once_200">£200</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="alt_monthly_strong_priority_amount_once_125" class="js-donate-widget__amount-radio" name="alt_monthly_strong_priority_amount_once" autocomplete="off" data-amount="125">
<label for="alt_monthly_strong_priority_amount_once_125">£125</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="alt_monthly_strong_priority_amount_once_80" class="js-donate-widget__amount-radio" name="alt_monthly_strong_priority_amount_once" autocomplete="off" data-amount="80">
<label for="alt_monthly_strong_priority_amount_once_80">£80</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="200">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="125">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="80">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 3</p>
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
</div>
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "monthly_strong_priority",
"allHandles": true,
"freq_handles": false,
"otherTitle": false,
"donate_widget_title": "Make a monthly donation",
"donate_widget_intro": "Become a regular giver today and make a world of difference",
"frequencies": [
{
"title": "monthly",
"checked": true
},
{
"title": "once"
}
],
"amounts_monthly": [
{
"title": "25",
"content": "Monthly content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "15",
"content": "Monthly content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "8",
"content": "Monthly content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"amounts_once": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate monthly",
"flip_link": true,
"alt_form": true,
"alt_id": "alt_monthly_strong_priority",
"alt_freq_handles": false,
"alt_donate_widget_title": "Make a one-off donation",
"alt_donate_widget_intro": "Become a regular giver today and make a world of difference",
"alt_frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"alt_amounts_monthly": [],
"alt_amounts_once": [
{
"title": "200",
"content": "Once content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "125",
"content": "Once content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "80",
"content": "Once content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": true
}Donate Widget Monthly Only No Handles {% include 'components/donate-widget/donate-widget~monthly-only-no-handles' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Make a monthly donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate monthly</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "monthly_only_no_handles",
"allHandles": false,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Make a monthly donation",
"donate_widget_intro": "Become a regular giver today and make a world of difference",
"frequencies": [],
"amounts_monthly": [],
"amounts_once": [],
"donate_widget_placeholder": "enter amount",
"donate_widget_button": "Donate monthly",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget Monthly Only {% include 'components/donate-widget/donate-widget~monthly-only' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Make a monthly donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles is-hidden">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_only_freq_monthly" class="js-donate-widget__freq-radio" name="monthly_only_freq" checked="checked" autocomplete="off" data-frequency="monthly">
<label for="monthly_only_freq_monthly">monthly</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_only_freq_once" class="js-donate-widget__freq-radio" name="monthly_only_freq" autocomplete="off" data-frequency="once">
<label for="monthly_only_freq_once">once</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_only_amount_monthly_25" class="js-donate-widget__amount-radio" name="monthly_only_amount_monthly" checked="checked" autocomplete="off" data-amount="25">
<label for="monthly_only_amount_monthly_25">£25</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_only_amount_monthly_15" class="js-donate-widget__amount-radio" name="monthly_only_amount_monthly" autocomplete="off" data-amount="15">
<label for="monthly_only_amount_monthly_15">£15</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_only_amount_monthly_8" class="js-donate-widget__amount-radio" name="monthly_only_amount_monthly" autocomplete="off" data-amount="8">
<label for="monthly_only_amount_monthly_8">£8</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="25">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="15">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="8">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 3</p>
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate monthly</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "monthly_only",
"allHandles": true,
"freq_handles": false,
"otherTitle": false,
"donate_widget_title": "Make a monthly donation",
"donate_widget_intro": "Become a regular giver today and make a world of difference",
"frequencies": [
{
"title": "monthly",
"checked": true
},
{
"title": "once"
}
],
"amounts_monthly": [
{
"title": "25",
"content": "Monthly content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "15",
"content": "Monthly content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "8",
"content": "Monthly content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"amounts_once": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate monthly",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget Monthly Strong Priority No Handles {% include 'components/donate-widget/donate-widget~monthly-strong-priority-no-handles' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Make a monthly donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate monthly</a>
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title ">Make a one-off donation</h3>
<p class="c-donate-widget__intro">Become a regular giver today and make a world of difference</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
</div>
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "monthly_strong_priority_no_handles",
"allHandles": false,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Make a monthly donation",
"donate_widget_intro": "Become a regular giver today and make a world of difference",
"frequencies": [],
"amounts_monthly": [],
"amounts_once": [],
"donate_widget_placeholder": "enter amount",
"donate_widget_button": "Donate monthly",
"flip_link": true,
"alt_form": true,
"alt_id": "alt_monthly_strong_priority_no_handles",
"alt_freq_handles": false,
"alt_donate_widget_title": "Make a one-off donation",
"alt_donate_widget_intro": "Become a regular giver today and make a world of difference",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": true
}Donate Widget Oneoff Only No Handles {% include 'components/donate-widget/donate-widget~oneoff-only-no-handles' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "oneoff_only_no_handles",
"allHandles": false,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [],
"amounts_monthly": [],
"amounts_once": [],
"donate_widget_placeholder": "enter amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget Oneoff Priority No Handles {% include 'components/donate-widget/donate-widget~oneoff-priority-no-handles' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_no_handles_freq_once" class="js-donate-widget__freq-radio" name="oneoff_priority_no_handles_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="oneoff_priority_no_handles_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_no_handles_freq_monthly" class="js-donate-widget__freq-radio" name="oneoff_priority_no_handles_freq" autocomplete="off" data-frequency="monthly">
<label for="oneoff_priority_no_handles_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "oneoff_priority_no_handles",
"allHandles": true,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [],
"amounts_once": [],
"donate_widget_placeholder": "enter amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget {% include 'components/donate-widget/donate-widget' %}
Tearfund Donate Widgets
Widget variants
- Monthly Only
- Monthly Only (no handles)
- Monthly Priority
- Monthly Priority (no handles)
- Monthly Strong Priority (contains flip link)
- Monthly Strong Priority (no handles) (contains flip link)
- One-off Only
- One-off Only (no handles)
- One-off Priority
- One-off Priority (no handles)
Important notes
DO NOT use these widgets as stand-alone items; they are designed to be used within a 'Donate Header' component;
An initial 'checked' attribute needs to be added to both the required 'Frequency' radio button and the required 'Amount' radio button (make sure it's related to the required frequency);
Even though some widgets need to not show the 'Frequency' handles, they are still required within the widget to be able to select the amount and the related content correctly. To get around this, a 'hidden' class needs to be added to the frequency handles for widgets which don't require it - this will hide the handles, but they are still present for the script to be able to see and use the data from.
How the script works
When the script runs, it will look at all of the donate widgets and do the following steps for each of them separately (useful for if there is more than one on a page).
Init
The 'frequency' radio buttons are looped through;
If a 'frequency' radio button is checked, the data-frequency value of it is saved as a variable;
The 'amount' handles containers are looped through (there is one for each 'frequency');
If the data-frequency value of an 'amount' handles container matches that of the 'frequency' radio button selected:
It is given an 'active' class to make it visible;
The 'amount' radio buttons within the container are looped through;
If an 'amount' radio button is checked:
The data-amount value of the radio button is saved as a variable;
The radio button is given an 'active' class so it appears selected;
All of the content items are looped through;
If the data-amount value of a content item matches that of the 'amount' radio button selected, all of the other content items are hidden except the one with the matching value.
If the data-frequency value of an 'amount' handles container doesn't match the 'frequency' radio button selected:
Is is given a 'hidden' class to hide it;
All of the radio buttons within the container are disabled.
Frequency selector
When a frequency radio button is clicked, the data-frequency value of it is saved as a variable;
The amount handles containers are looped through (there is one for each frequency);
If the data-frequency value of an amount handles container matches that of the frequency radio button selected:
It is given an 'active' class so it is visible;
The 'disabled' attribute is removed from all radio buttons within the container;
The first radio button within the container is given the 'checked' attribute.
If the data-frequency value of an 'amount' handles container doesn't match the frequency radio button selected:
Is is given a 'hidden' class to hide it;
All of the radio buttons within the container are 'disabled', and 'active' classes removed.
Amount selector
When an 'amount' radio button is clicked:
The data-frequency value of the currently checked frequency radio button is saved as a variable;
The data-amount value of the clicked 'amount' radio button is saved as a variable;
An 'active' class is added to the clicked 'amount' radio button;
'Active' classes are removed from all other radio buttons within the container;
All of the content items are looped through;
If the data-frequency value and data-amount value of a content item matches that of the 'frequency' and 'amount' radio buttons selected, all of the other content items are hidden except the one with the matching value.
'Other donations' input
When this input is selected, the 'amount' handles and the 'amount content' boxes will dim out. The 'frequency' handles will still be present, so the user can still choose a custom amount to donate 'monthly' or 'one-off';
When the input box is in use and anything outside of the 'frequency' handles is selected, the content within the widget will un-dim, and the donation amount will clear;
When the input box is in use and the 'escape' button on a user's keyboard is pressed, the content within the widget will un-dim, and the donation amount will clear.
Flip link
When a widget has a 'flip link', this link can be clicked and an alternate form is shown within the widget container, replacing the first. This functionality is present for the following widgets:
- Monthly Strong Priority
- Monthly Strong Priority (no handles)
To make this work, there is a main 'container' element which contains the widget background colour etc, and each form is within its own 'form' container (not an actual HTML form, but a div element). If a widget contains a second form, its form container will initially have a 'hidden' class attached to it (the first will have an 'active' class, so it is shown).
When the flip link is clicked:
The form containers are looped through;
If a form container contains the 'hidden' class:
- Make it visible by removing the 'hidden' class and replacing it with the 'active' class.
If the form container doesn't contain the 'hidden class:
- Make it hidden by removing the 'active' class and replacing it with the 'hidden' class.
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "",
"allHandles": false,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [],
"amounts_monthly": [],
"amounts_once": [],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget Oneoff Priority {% include 'components/donate-widget/donate-widget~oneoff-priority' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_freq_once" class="js-donate-widget__freq-radio" name="oneoff_priority_freq" checked="checked" autocomplete="off" data-frequency="once">
<label for="oneoff_priority_freq_once">once</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_freq_monthly" class="js-donate-widget__freq-radio" name="oneoff_priority_freq" autocomplete="off" data-frequency="monthly">
<label for="oneoff_priority_freq_monthly">monthly</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_amount_monthly_25" class="js-donate-widget__amount-radio" name="oneoff_priority_amount_monthly" checked="checked" autocomplete="off" data-amount="25">
<label for="oneoff_priority_amount_monthly_25">£25</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_amount_monthly_15" class="js-donate-widget__amount-radio" name="oneoff_priority_amount_monthly" autocomplete="off" data-amount="15">
<label for="oneoff_priority_amount_monthly_15">£15</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_amount_monthly_8" class="js-donate-widget__amount-radio" name="oneoff_priority_amount_monthly" autocomplete="off" data-amount="8">
<label for="oneoff_priority_amount_monthly_8">£8</label>
</div>
</div>
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_amount_once_200" class="js-donate-widget__amount-radio" name="oneoff_priority_amount_once" checked="checked" autocomplete="off" data-amount="200">
<label for="oneoff_priority_amount_once_200">£200</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_amount_once_125" class="js-donate-widget__amount-radio" name="oneoff_priority_amount_once" autocomplete="off" data-amount="125">
<label for="oneoff_priority_amount_once_125">£125</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="oneoff_priority_amount_once_80" class="js-donate-widget__amount-radio" name="oneoff_priority_amount_once" autocomplete="off" data-amount="80">
<label for="oneoff_priority_amount_once_80">£80</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="25">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="15">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="8">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 3</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="200">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="125">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="80">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 3</p>
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "oneoff_priority",
"allHandles": true,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [
{
"title": "once",
"checked": true
},
{
"title": "monthly"
}
],
"amounts_monthly": [
{
"title": "25",
"content": "Monthly content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "15",
"content": "Monthly content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "8",
"content": "Monthly content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"amounts_once": [
{
"title": "200",
"content": "Once content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "125",
"content": "Once content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "80",
"content": "Once content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget Monthly Priority No Handles {% include 'components/donate-widget/donate-widget~monthly-priority-no-handles' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_no_handles_freq_monthly" class="js-donate-widget__freq-radio" name="monthly_priority_no_handles_freq" checked="checked" autocomplete="off" data-frequency="monthly">
<label for="monthly_priority_no_handles_freq_monthly">monthly</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_no_handles_freq_once" class="js-donate-widget__freq-radio" name="monthly_priority_no_handles_freq" autocomplete="off" data-frequency="once">
<label for="monthly_priority_no_handles_freq_once">once</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="enter amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "monthly_priority_no_handles",
"allHandles": true,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [
{
"title": "monthly",
"checked": true
},
{
"title": "once"
}
],
"amounts_monthly": [],
"amounts_once": [],
"donate_widget_placeholder": "enter amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}Donate Widget Monthly Priority {% include 'components/donate-widget/donate-widget~monthly-priority' %}
HTML
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title ">Donate now</h3>
<p class="c-donate-widget__intro">Help lift more people out of poverty.</p>
<div class="js-donate-widget__controls">
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_freq_monthly" class="js-donate-widget__freq-radio" name="monthly_priority_freq" checked="checked" autocomplete="off" data-frequency="monthly">
<label for="monthly_priority_freq_monthly">monthly</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_freq_once" class="js-donate-widget__freq-radio" name="monthly_priority_freq" autocomplete="off" data-frequency="once">
<label for="monthly_priority_freq_once">once</label>
</div>
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_amount_monthly_25" class="js-donate-widget__amount-radio" name="monthly_priority_amount_monthly" checked="checked" autocomplete="off" data-amount="25">
<label for="monthly_priority_amount_monthly_25">£25</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_amount_monthly_15" class="js-donate-widget__amount-radio" name="monthly_priority_amount_monthly" autocomplete="off" data-amount="15">
<label for="monthly_priority_amount_monthly_15">£15</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_amount_monthly_8" class="js-donate-widget__amount-radio" name="monthly_priority_amount_monthly" autocomplete="off" data-amount="8">
<label for="monthly_priority_amount_monthly_8">£8</label>
</div>
</div>
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_amount_once_200" class="js-donate-widget__amount-radio" name="monthly_priority_amount_once" checked="checked" autocomplete="off" data-amount="200">
<label for="monthly_priority_amount_once_200">£200</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_amount_once_125" class="js-donate-widget__amount-radio" name="monthly_priority_amount_once" autocomplete="off" data-amount="125">
<label for="monthly_priority_amount_once_125">£125</label>
</div>
<div class="c-donate-widget__radio">
<input type="radio" id="monthly_priority_amount_once_80" class="js-donate-widget__amount-radio" name="monthly_priority_amount_once" autocomplete="off" data-amount="80">
<label for="monthly_priority_amount_once_80">£80</label>
</div>
</div>
</div>
</div>
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="25">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="15">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="8">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Monthly content 3</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="200">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 1</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="125">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 2</p>
</div>
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="80">
<img class="c-donate-widget__handle-content-image" src="/images/mainsite5/donate-header/content-image.jpg" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">Once content 3</p>
</div>
</div>
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="other amount" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">Donate now</a>
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
</div>
Twig
<div class="c-donate-widget">
<!-- START MAIN FORM -->
<div class="c-donate-widget__form js-donate-widget__form is-active">
<h3 class="c-donate-widget__title {% if otherTitle %}c-donate-widget__title--alt{% endif %}">{{ donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if amounts_monthly is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="monthly">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_monthly_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_monthly" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_monthly_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
{% if amounts_once is not empty %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (amounts_monthly is not empty) or (amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in amounts_monthly %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="monthly" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
{% for amount in amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" max="999999" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ donate_widget_placeholder }}" />
</div>
</div>
<a class="button c-donate-widget__button" href="#">{{ donate_widget_button }}</a>
{% if flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a one-off donation</a>
{% endif %}
</div>
<!-- START ALTERNATE FORM (FOR WHEN FORM CAN FLIP) -->
{% if alt_form %}
<div class="c-donate-widget__form js-donate-widget__form is-hidden">
<h3 class="c-donate-widget__title {% if altTitle %}c-donate-widget__title--alt{% endif %}">{{ alt_donate_widget_title|raw }}</h3>
<p class="c-donate-widget__intro">{{ alt_donate_widget_intro }}</p>
<div class="js-donate-widget__controls">
{% if allHandles %}
<div class="c-donate-widget__handles-container">
<div class="c-donate-widget__handles-row js-donate-widget__freq-handles{% if not freq_handles %} is-hidden{% endif %}">
{% for frequency in alt_frequencies %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_freq_{{ frequency.title }}" class="js-donate-widget__freq-radio" name="{{ alt_id }}_freq" {% if frequency.checked %}checked="checked"{% endif %} autocomplete="off" data-frequency="{{ frequency.title }}">
<label for="{{ alt_id }}_freq_{{ frequency.title }}">{{ frequency.title }}</label>
</div>
{% endfor %}
</div>
<div class="c-donate-widget__amount-handles-container js-donate-widget__amount-handles-container">
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handles-row js-donate-widget__amount-handles" data-frequency="once">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__radio">
<input type="radio" id="{{ alt_id }}_amount_once_{{ amount.title }}" class="js-donate-widget__amount-radio" name="{{ alt_id }}_amount_once" {% if amount.checked %}checked="checked"{% endif %} autocomplete="off" data-amount="{{ amount.title }}">
<label for="{{ alt_id }}_amount_once_{{ amount.title }}">£{{ amount.title }}</label>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if (alt_amounts_once is not empty) %}
<div class="c-donate-widget__handle-content-container js-donate-widget__handle-content-container">
{% for amount in alt_amounts_once %}
<div class="c-donate-widget__handle-content-item js-donate-widget__handle-content-item" data-frequency="once" data-amount="{{ amount.title }}">
<img class="c-donate-widget__handle-content-image" src="{{ amount.image }}" alt="Handle image" />
<p class="c-donate-widget__handle-content-text">{{ amount.content }}</p>
</div>
{% endfor %}
</div>
{% endif %}
<div class="c-donate-widget__input-container">
<input type="number" min="1" class="c-donate-widget__input js-donate-widget__other" placeholder="{{ alt_donate_widget_placeholder }}" />
</div>
<a class="button c-donate-widget__button" href="#">{{ alt_donate_widget_button }}</a>
</div>
{% if alt_flip_link %}
<a class="c-donate-widget__flip-link js-donate-widget__flip-link" href="#">or make a monthly donation</a>
{% endif %}
</div>
{% endif %}
</div>
{
"id": "monthly_priority",
"allHandles": true,
"freq_handles": true,
"otherTitle": false,
"donate_widget_title": "Donate now",
"donate_widget_intro": "Help lift more people out of poverty.",
"frequencies": [
{
"title": "monthly",
"checked": true
},
{
"title": "once"
}
],
"amounts_monthly": [
{
"title": "25",
"content": "Monthly content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "15",
"content": "Monthly content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "8",
"content": "Monthly content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"amounts_once": [
{
"title": "200",
"content": "Once content 1",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg",
"checked": true
},
{
"title": "125",
"content": "Once content 2",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
},
{
"title": "80",
"content": "Once content 3",
"image": "\/images\/mainsite5\/donate-header\/content-image.jpg"
}
],
"donate_widget_placeholder": "other amount",
"donate_widget_button": "Donate now",
"flip_link": false,
"alt_form": false,
"alt_id": "",
"alt_freq_handles": false,
"alt_donate_widget_title": "",
"alt_donate_widget_intro": "",
"alt_frequencies": [],
"alt_amounts_monthly": [],
"alt_amounts_once": [],
"alt_donate_widget_placeholder": "other amount",
"alt_donate_widget_button": "Donate now",
"alt_flip_link": false
}