|
|
|
|
|
|
|
/new-site/join-us/donate/
/new-site/join-us/donate/
|
|
|
|
{"togglable_footerCTA":"on","togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":null}
{"togglable_footerCTA":"on","togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":null}
|
|
.donation-radio {
background: #fafafa;
padding: 20px;
h3 {
text-align: center;
}
ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
li {
display: inline;
label {
padding-left: 10px;
}
}
}
}
input[type='radio'] {
margin-top: 5px;
}
.donation-amt-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -10px;
.donation-amt {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
margin: 10px;
background-color: #d2042d;
background-image: url(/media/website_pages/donate/box.png);
text-align: center;
color: white;
min-height: 180px;
background-size: 75%;
background-position: right bottom;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
transition: 0.2s all linear;
h3 {
font-size: 2.8rem;
font-weight: 600;
flex-shrink: 1;
width: auto;
}
p {
padding: 0 30px;
flex-shrink: 1;
width: auto;
}
&.donation-amt-selected {
background-color: #ed9635;
&::after {
content: "SELECTED";
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
background: #d2042d;
padding: 5px 10px;
border-radius: 0;
font-weight: bolder;
}
}
}
}
.donation-other {
background: #efefef;
padding: 20px 60px;
.donation-other-content {
ul {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
li {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
}
input[type='text'] {
// Style if needed
}
button {
margin-bottom: 0 !important;
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
}
}
.donation-gift {
.formRow,
.formRow.formRow2Col {
background: transparent;
}
button[type='submit'] {
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
strong {
color: #111;
}
small {
color: #696969;
}
input[type='checkbox'] {
margin-top: 7px;
}
}
fieldset {
border: 2px solid #333333;
}
select {
display: inline;
}
/* Tooltips and special behavior */
#donation_frequency_monthly_tooltip {
margin-left: 0;
&.donation_frequency_monthly_tooltip_show {
max-width: 100%;
display: show !important;
transform: scale(1);
white-space: unset;
}
&:before {
top: 0;
left: 0;
}
}
/* Responsive Breakpoints */
@media (max-width: 991px) {
.donation-other-content ul li {
display: table;
padding: 10px 0;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.donation-radio ul li label {
padding-left: 0;
}
.donation-gift {
padding: 20px;
}
.donation-other {
padding: 20px;
}
}
@media (max-width: 500px) {
.donation-radio ul li {
display: block;
text-align: center;
padding: 0;
}
.donation-amt-container {
.donation-amt {
max-height: 150px;
min-height: 150px;
}
}
}
.donation-radio {
background: #fafafa;
padding: 20px;
h3 {
text-align: center;
}
ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
li {
display: inline;
label {
padding-left: 10px;
}
}
}
}
input[type='radio'] {
margin-top: 5px;
}
.donation-amt-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -10px;
.donation-amt {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
margin: 10px;
background-color: #d2042d;
background-image: url(/media/website_pages/donate/box.png);
text-align: center;
color: white;
min-height: 180px;
background-size: 75%;
background-position: right bottom;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
transition: 0.2s all linear;
h3 {
font-size: 2.8rem;
font-weight: 600;
flex-shrink: 1;
width: auto;
}
p {
padding: 0 30px;
flex-shrink: 1;
width: auto;
}
&.donation-amt-selected {
background-color: #ed9635;
&::after {
content: "SELECTED";
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
background: #d2042d;
padding: 5px 10px;
border-radius: 0;
font-weight: bolder;
}
}
}
}
.donation-other {
background: #efefef;
padding: 20px 60px;
.donation-other-content {
ul {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
li {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
}
input[type='text'] {
// Style if needed
}
button {
margin-bottom: 0 !important;
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
}
}
.donation-gift {
.formRow,
.formRow.formRow2Col {
background: transparent;
}
button[type='submit'] {
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
strong {
color: #111;
}
small {
color: #696969;
}
input[type='checkbox'] {
margin-top: 7px;
}
}
fieldset {
border: 2px solid #333333;
}
select {
display: inline;
}
/* Tooltips and special behavior */
#donation_frequency_monthly_tooltip {
margin-left: 0;
&.donation_frequency_monthly_tooltip_show {
max-width: 100%;
display: show !important;
transform: scale(1);
white-space: unset;
}
&:before {
top: 0;
left: 0;
}
}
/* Responsive Breakpoints */
@media (max-width: 991px) {
.donation-other-content ul li {
display: table;
padding: 10px 0;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.donation-radio ul li label {
padding-left: 0;
}
.donation-gift {
padding: 20px;
}
.donation-other {
padding: 20px;
}
}
@media (max-width: 500px) {
.donation-radio ul li {
display: block;
text-align: center;
padding: 0;
}
.donation-amt-container {
.donation-amt {
max-height: 150px;
min-height: 150px;
}
}
}
|
|
// Helper function to clear selection
function donationClearSelection()
{
var arrSelected = document.getElementsByClassName('donation-amt-selected');
for (var i = arrSelected.length-1; i >= 0; i--)
{
arrSelected[i].classList.remove('donation-amt-selected');
}
}
// Amount buttons on click
function donationAmountClick(nElement)
{
donationClearSelection();
var nAmount = document.getElementById('donation_amount');
nAmount.value = nElement.getAttribute('data-value');
nElement.classList.add('donation-amt-selected');
// Trigger onchange
var event;
if (typeof window.Event == 'function') { event = new Event('change'); }
else { event = document.createEvent('Event'); event.initEvent('change', true, true, true);}
nAmount.dispatchEvent(event);
}
// Helper function to clear selection
function donationClearSelection()
{
var arrSelected = document.getElementsByClassName('donation-amt-selected');
for (var i = arrSelected.length-1; i >= 0; i--)
{
arrSelected[i].classList.remove('donation-amt-selected');
}
}
// Amount buttons on click
function donationAmountClick(nElement)
{
donationClearSelection();
var nAmount = document.getElementById('donation_amount');
nAmount.value = nElement.getAttribute('data-value');
nElement.classList.add('donation-amt-selected');
// Trigger onchange
var event;
if (typeof window.Event == 'function') { event = new Event('change'); }
else { event = document.createEvent('Event'); event.initEvent('change', true, true, true);}
nAmount.dispatchEvent(event);
}
|
|
<?php
function donate($arrValues)
{
\Components\Commerce\Carts\Current::removeAllItems();
if(!isset($arrValues['donation_amount']) || !intval($arrValues['donation_amount']))
{
$pException = new \Framework\Exceptions\Validation();
$pException->setTitle('You must enter an amount and type of donation!');
throw $pException;
}
$strDonationTitle = 'Donation';
$arrProduct = ['product_id' => null, 'product_title' => $strDonationTitle, 'product_price' => $arrValues['donation_amount'], 'product_tax_percent' => 0];
\Components\Commerce\Carts\Current::addProduct($arrProduct);
}
?>
<?php
function donate($arrValues)
{
\Components\Commerce\Carts\Current::removeAllItems();
if(!isset($arrValues['donation_amount']) || !intval($arrValues['donation_amount']))
{
$pException = new \Framework\Exceptions\Validation();
$pException->setTitle('You must enter an amount and type of donation!');
throw $pException;
}
$strDonationTitle = 'Donation';
$arrProduct = ['product_id' => null, 'product_title' => $strDonationTitle, 'product_price' => $arrValues['donation_amount'], 'product_tax_percent' => 0];
\Components\Commerce\Carts\Current::addProduct($arrProduct);
}
?>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/new-site/join-us/
/new-site/join-us/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|