|
|
|
|
|
|
|
|
|
|
|
<templates:section paddingTop="8rem" paddingBottom="8rem" paddingLeft="1rem" paddingRight="1rem" bgimage="https://images.unsplash.com/photo-1605309340332-4e5110465727?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8cGFyaXMlMjBsb2NrfGVufDB8fHx8MTY3Njg0OTAwNQ&" color="#ffffff" contentsize="md" bgposition="bottom left" bgwashcolor="#333333" bgwashopacity="50" bgimageblur="1">
<templates:row>
<templates:column width="6">
<h1>Support us with a Donation</h1>
<p style="text-align: left;">
Alliance Française counts on generous contributions from community members to offer French language classes and cultural activities
in the community.
</p>
<p style="text-align: left;">Your support makes activities like the French films, conversation and book club possible.</p>
</templates:column>
<templates:column width="5">
<p><br /></p>
</templates:column>
</templates:row>
<templates:row style="text-align: left;">
<templates:column width="6"></templates:column>
<templates:column width="6"></templates:column>
</templates:row>
</templates:section>
<templates:section paddingTop="6rem" paddingLeft="1rem" paddingRight="1rem" paddingBottom="6rem">
<forms:form id="donation_form" recordsubmissions="true" contactmode="store" onsubmitserver="donate($this.getValuesForComponent())"onsubmitredirect="/join-us/donate/success/?sale_id=[? $sale_id ?]">
<ajax:event id="donation_frequency_ajaxevent" updateregions="donation_frequency_ajaxregion,donation_paymentmethod_ajaxregion" />
<div class="donation-radio">
<h3 style="text-align: center;">
Your gift will support the Alliance Française with key programing that brings French language and culture.
</h3>
<p><br /></p>
<ul>
<li>
<forms:radiobutton id="donation_frequency_once" label="Once off" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="once" value="once" allowuncheck="true"/>
</li>
<li style="padding-left: 20px; padding-right: 10px">or</li>
<li>
<forms:radiobutton id="donation_frequency_monthly" label="Monthly" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="monthly" allowuncheck="true"/>
</li>
</ul>
</div>
<br />
<h4 style="text-align: center"><strong>Select a Donation Amount:</strong></h4>
<div class="donation-amt-container">
<div class="donation-amt" data-value="5" onclick="donationAmountClick(this)">
<p style="font-size: 3rem">$5</p>
</div>
<div class="donation-amt" data-value="15" onclick="donationAmountClick(this)">
<p style="font-size: 3rem">$15</p>
</div>
<div class="donation-amt" data-value="20" onclick="donationAmountClick(this)">
<p style="font-size: 3rem">$20</p>
</div>
</div>
<br />
<div class="donation-other">
<div class="donation-other-content">
<ul>
<li>
Or
<strong>donate another amount:</strong>
</li>
<li>
<standard:icon style="width: 32px; height: 32px; color: #cf2032" library="fontawesome" iconstyle="solid" iconname="dollar-sign" /><ajax:event id="donation_amount_ajaxevent" updateregions="donation_paymentmethod_ajaxregion" />
<forms:editbox id="donation_amount" value="[? $_GET['donation_amount'] ?]" datacolumn="donation_amount" validations="mandatory" placeholder="Other" onfocus="donationClearSelection()" onchangeajax="donation_amount_ajaxevent" completecart="true" showpaymentformonzerovalue="true" />
<ajax:region id="donation_frequency_ajaxregion">
<logic:if test="$donation_frequency_monthly.checked">
<span style="display: block; min-width: 100px;">/ mo</span>
</logic:if>
</ajax:region>
</li>
</ul>
</div>
</div>
<br />
<br />
<div class="donation-gift">
<div class="fieldset">
<h4>Your Information</h4>
<templates:row>
<templates:column width="6">
<forms:row label="First Name" type="one_column">
<forms:editbox id="contact_first_name" datacolumn="contact_first_name" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Last Name"><forms:editbox id="contact_last_name" datacolumn="contact_last_name" /></forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="6">
<forms:row type="one_column"label="E-Mail Address"><forms:editbox id="contact_email" datacolumn="contact_email" /></forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Phone Number"><forms:editbox id="contact_phone" datacolumn="contact_phone" /></forms:row>
</templates:column>
</templates:row>
<logic:variable value="[? \Framework\HTTP\Request::getCountryCodeFromIP() ?]" as="ipcountry" />
<forms:address id="contact_address" rowtype="one_column" /><br />
<forms:row type="one_column"label="Donation Note" description=" If you would like to make your donation in honor of an individual or to support a particular activity, please note it here."><forms:textarea id="donation_note" /></forms:row>
</div>
<div class="fieldset">
<h4>Billing Details</h4>
<ajax:region id="donation_paymentmethod_ajaxregion">
<logic:if test="floatval($donation_amount.value) >= 1">
<forms:paymentmethod amount="[? $donation_amount.value ?]" recurringamount="[? ($donation_frequency_monthly.checked) ? ($donation_amount.value) : null ?]" recurringinterval="month" completecart="true" />
</logic:if>
<logic:else>
<h3><small><span style="color: #cf2032;">Please enter a donation amount above.</span></small></h3>
</logic:else>
</ajax:region>
</div>
</div>
</forms:form>
</templates:section>
<templates:section paddingTop="8rem" paddingBottom="8rem" paddingLeft="1rem" paddingRight="1rem" bgimage="https://images.unsplash.com/photo-1605309340332-4e5110465727?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8cGFyaXMlMjBsb2NrfGVufDB8fHx8MTY3Njg0OTAwNQ&" color="#ffffff" contentsize="md" bgposition="bottom left" bgwashcolor="#333333" bgwashopacity="50" bgimageblur="1">
<templates:row>
<templates:column width="6">
<h1>Support us with a Donation</h1>
<p style="text-align: left;">
Alliance Française counts on generous contributions from community members to offer French language classes and cultural activities
in the community.
</p>
<p style="text-align: left;">Your support makes activities like the French films, conversation and book club possible.</p>
</templates:column>
<templates:column width="5">
<p><br /></p>
</templates:column>
</templates:row>
<templates:row style="text-align: left;">
<templates:column width="6"></templates:column>
<templates:column width="6"></templates:column>
</templates:row>
</templates:section>
<templates:section paddingTop="6rem" paddingLeft="1rem" paddingRight="1rem" paddingBottom="6rem">
<forms:form id="donation_form" recordsubmissions="true" contactmode="store" onsubmitserver="donate($this.getValuesForComponent())"onsubmitredirect="/join-us/donate/success/?sale_id=[? $sale_id ?]">
<ajax:event id="donation_frequency_ajaxevent" updateregions="donation_frequency_ajaxregion,donation_paymentmethod_ajaxregion" />
<div class="donation-radio">
<h3 style="text-align: center;">
Your gift will support the Alliance Française with key programing that brings French language and culture.
</h3>
<p><br /></p>
<ul>
<li>
<forms:radiobutton id="donation_frequency_once" label="Once off" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="once" value="once" allowuncheck="true"/>
</li>
<li style="padding-left: 20px; padding-right: 10px">or</li>
<li>
<forms:radiobutton id="donation_frequency_monthly" label="Monthly" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="monthly" allowuncheck="true"/>
</li>
</ul>
</div>
<br />
<h4 style="text-align: center"><strong>Select a Donation Amount:</strong></h4>
<div class="donation-amt-container">
<div class="donation-amt" data-value="5" onclick="donationAmountClick(this)">
<p style="font-size: 3rem">$5</p>
</div>
<div class="donation-amt" data-value="15" onclick="donationAmountClick(this)">
<p style="font-size: 3rem">$15</p>
</div>
<div class="donation-amt" data-value="20" onclick="donationAmountClick(this)">
<p style="font-size: 3rem">$20</p>
</div>
</div>
<br />
<div class="donation-other">
<div class="donation-other-content">
<ul>
<li>
Or
<strong>donate another amount:</strong>
</li>
<li>
<standard:icon style="width: 32px; height: 32px; color: #cf2032" library="fontawesome" iconstyle="solid" iconname="dollar-sign" /><ajax:event id="donation_amount_ajaxevent" updateregions="donation_paymentmethod_ajaxregion" />
<forms:editbox id="donation_amount" value="[? $_GET['donation_amount'] ?]" datacolumn="donation_amount" validations="mandatory" placeholder="Other" onfocus="donationClearSelection()" onchangeajax="donation_amount_ajaxevent" completecart="true" showpaymentformonzerovalue="true" />
<ajax:region id="donation_frequency_ajaxregion">
<logic:if test="$donation_frequency_monthly.checked">
<span style="display: block; min-width: 100px;">/ mo</span>
</logic:if>
</ajax:region>
</li>
</ul>
</div>
</div>
<br />
<br />
<div class="donation-gift">
<div class="fieldset">
<h4>Your Information</h4>
<templates:row>
<templates:column width="6">
<forms:row label="First Name" type="one_column">
<forms:editbox id="contact_first_name" datacolumn="contact_first_name" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Last Name"><forms:editbox id="contact_last_name" datacolumn="contact_last_name" /></forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="6">
<forms:row type="one_column"label="E-Mail Address"><forms:editbox id="contact_email" datacolumn="contact_email" /></forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Phone Number"><forms:editbox id="contact_phone" datacolumn="contact_phone" /></forms:row>
</templates:column>
</templates:row>
<logic:variable value="[? \Framework\HTTP\Request::getCountryCodeFromIP() ?]" as="ipcountry" />
<forms:address id="contact_address" rowtype="one_column" /><br />
<forms:row type="one_column"label="Donation Note" description=" If you would like to make your donation in honor of an individual or to support a particular activity, please note it here."><forms:textarea id="donation_note" /></forms:row>
</div>
<div class="fieldset">
<h4>Billing Details</h4>
<ajax:region id="donation_paymentmethod_ajaxregion">
<logic:if test="floatval($donation_amount.value) >= 1">
<forms:paymentmethod amount="[? $donation_amount.value ?]" recurringamount="[? ($donation_frequency_monthly.checked) ? ($donation_amount.value) : null ?]" recurringinterval="month" completecart="true" />
</logic:if>
<logic:else>
<h3><small><span style="color: #cf2032;">Please enter a donation amount above.</span></small></h3>
</logic:else>
</ajax:region>
</div>
</div>
</forms:form>
</templates:section>
|
|
{
"togglable_footerCTA": null,
"togglable_memberCTA": null,
"togglable_testCTA": null,
"togglable_newslettercta": "on"
}
{
"togglable_footerCTA": null,
"togglable_memberCTA": null,
"togglable_testCTA": null,
"togglable_newslettercta": "on"
}
|
|
.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);
}
?>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|