|
|
dbdave
ECT Moderator
USA
10263 Posts |
 Posted - 10/04/2018 : 18:30:35
For anyone who wants to see this demo, I have a link below.
http://www.floridasurpluswarehouse.com/flsurplus/dev/proddetail.php?prod=testproduct
(This dev site has no ssl, so you may see a security warning.
This link is to a product that has a non even price, so it's good to test with.
Just add to cart and enter an address and you should see the button. Click the button to add the donation.)
SEE .PHP and .ASP versions in separate posts below.
This is a round-up for Charity add-on for the front end of your website.
It has been tested on both versions of the cart, but there may be some unique setups as far as shipping and checkout options that this may not work with out-of-the box.
It leverages the ECT donations page to add the amount to the shopping cart.
There is some code for your donations page that will allow this to loop right through that page and return the visitor to the cart where the donation will be added.
By default, no sales tax is added to the donations, and with this rightfully so. But there is a setting to allow tax on donations and you should be aware of that when using this.
The code is mostly the same for both .asp and .php, being just about all javascript, but there is a little .asp and .php there, so I have written two posts below - one post for each version.
NOTES -
The donate button will not show until a shipping option has been selected on the last stage of checkout.
After tax and all in grand total, we check to see what that amount is.
Then we display a button (can be dressed up to look like other buttons on your site) and it has a hover title with some info.
Clicking the button loops through the donations page and adds to cart.
The shopper will proceed back to checkout where the donate button is replaced with a thank you button.
If the user selects a different shipping option, they will not be asked to round up again.
If the user goes back to cart and removes the donation, then the button will ask them to round up again.
If the customers cart already has an even number, they will not be presented with a round up option.
This is updater proof and is a very easy addition to your cart.asp/.php and donations.asp/.php
The buttons use the .css class input.charity for both buttons, and the thank you button has the additional class input.charthanks for custom styling to match your design.
I would recommend having a page or more info regarding the charity.
It is possible to add a tool-tip or some other popup there to help info the user.
NOTE - The donations script uses a spinning icon image in case there is a slight delay, so get the image from here and drop it in your images folder
http://www.floridasurpluswarehouse.com/dev/images/working-icon.gif
Post with any questions.
This is free to use with no warranties.
Use best practice and test your site thoroughly and save a backup of any edited files.
Enjoy and happy selling.
David
Edited by - dbdave on 10/04/2018 18:37:34
|
dbdave
ECT Moderator
USA
10263 Posts |
Posted - 10/04/2018 : 18:31:46
===PHP version===There are two files we will edit. These are "front end" files and do not get overwritten by updaters. STEP 1donations / payments page - If not done already, you need to have the ect donations page setup and working on your site https://www.ecommercetemplates.com/help/donations.asp Be sure you can visit the donations page on your site and add an amount there and click submit to verify it's working. Now, open that page in your favorite HTML editor and at the very bottom of the page, before the closing </body> tag (usually there is an editable region there if you use a dwt file) Copy and page the block below - save and upload to the server. <?php if(isset($_GET['amount'])): ?>
<!-- hide submit button -->
<style type="text/css">
div.ectdivcontainer,div.ectdiv2column {
display: none;
}
</style>
<!-- begin url populate -->
<script type="text/javascript">
var unomomento = ('<img src="images/working-icon.gif"><br/>One Moment while we load your payment into the cart');
document.getElementsByClassName("ectdivhead")[0].innerHTML=unomomento;
function getQueryString() {
var qs = document.location.search,pairs,pair,key,value,el,i,n;
if (qs.length > 0) {
qs = qs.substr(1); // strip off the ?
pairs = qs.split(/&/); // [foo=0, bar=1, ...]
for (i = 0, n = pairs.length; i < n; i++) {
pair = pairs[i].split(/=/); // [foo,0]
key = pair[0];
value = decodeURIComponent(pair[1].replace(/\+/g, " "));
el = document.getElementById(key);
if (el) {
el.value = value;
}
}
pairs = null;
pair = null;
el = null;
}
}
function submitpaymentform() {
document.forms[1].submit();
}
window.addEventListener('load',getQueryString,false);
window.addEventListener('load',submitpaymentform,false);
if(window.attachEvent){
window.attachEvent('onload',getQueryString);
window.attachEvent('onload',submitpaymentform);
}
</script>
<?php endif; ?>
<!-- end url populate --> STEP 2Open your cart.php page in your HTML editor and midways, you should find the content area of your page and you will find the .php include line that inserts the cart in your page. NOTE - Be sure to replace your page name there (green line) if it's different than donations.php <?php include "vsadmin/inc/inccart.php" ?>JUST AFTER THAT - Paste in the code below. <script>
var donationpage = 'donations.php'; //replace this page name with your donations page name if different
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
<?php if (empty($orderid)) : ?>
var cartlookup = document.getElementsByClassName("cartcontentsdiv")[0].innerHTML;
var findCharity = cartlookup.match(/Charity/g);
if (findCharity != null) {var orderhasroundup = 'yes';} else if (findCharity == null) {var orderhasroundup = 'no';}
createCookie('roundup',orderhasroundup,1);
<?php endif; ?>
existsdiv = document.getElementsByClassName('cart4row')[0]
if (existsdiv !== undefined){
var grandtotal = (<?php echo $grandtotal ;?>);
var grandtotalrnd = Math.ceil(grandtotal);
var grndtotdifference = (grandtotalrnd - grandtotal);
grndtotdifference = grndtotdifference.toFixed(2);
var roundupcheck = readCookie('roundup');
if (roundupcheck == 'yes'){
var subnode=document.createElement("DIV");
subnode.id='roundup';
subnode.innerHTML=('<input class="charity charthanks" type="button" value="Thanks for Rounding-up for Charity" title="Thanks for donating">');
document.getElementsByClassName("cart2column")[0].appendChild(subnode);
} else if (roundupcheck != 'Yes'){
if (grndtotdifference !== '0.00'){
var subnode=document.createElement("DIV");
subnode.id='roundup';
subnode.innerHTML=('<a href="'+donationpage+'?amount='+grndtotdifference+'&fromname=Round%20up%20for%20Charity"><input class="charity" type="button" value="Click to Round-up for Charity. Add $'+grndtotdifference+' to your total now" title="Round your total up for our favorite charity"></a>');
document.getElementsByClassName("cart2column")[0].appendChild(subnode);
}}}
</script> Save and upload to the server. It should be working now.
Edited by - dbdave on 10/04/2018 18:34:10
|
dbdave
ECT Moderator
USA
10263 Posts |
Posted - 10/04/2018 : 18:34:58
===ASP version===There are two files we will edit. These are "front end" files and do not get overwritten by updaters. STEP 1donations / payments page - If not done already, you need to have the ect donations page setup and working on your site https://www.ecommercetemplates.com/help/donations.asp Be sure you can visit the donations page on your site and add an amount there and click submit to verify it's working. Now, open that page in your favorite HTML editor and at the very bottom of the page, before the closing </body> tag (usually there is an editable region there if you use a dwt file) Copy and page the block below - save and upload to the server. <% if request.querystring("amount")<>"" then %>
<!-- hide submit button -->
<style type="text/css">
div.ectdivcontainer,div.ectdiv2column {
display: none;
}
</style>
<!-- begin url populate -->
<script type="text/javascript">
var unomomento = ('<img src="images/working-icon.gif"><br/>One Moment while we load your payment into the cart');
document.getElementsByClassName("ectdivhead")[0].innerHTML=unomomento;
function getQueryString() {
var qs = document.location.search,pairs,pair,key,value,el,i,n;
if (qs.length > 0) {
qs = qs.substr(1); // strip off the ?
pairs = qs.split(/&/); // [foo=0, bar=1, ...]
for (i = 0, n = pairs.length; i < n; i++) {
pair = pairs[i].split(/=/); // [foo,0]
key = pair[0];
value = decodeURIComponent(pair[1].replace(/\+/g, " "));
el = document.getElementById(key);
if (el) {
el.value = value;
}
}
pairs = null;
pair = null;
el = null;
}
}
function submitpaymentform() {
document.forms[1].submit();
}
window.addEventListener('load',getQueryString,false);
window.addEventListener('load',submitpaymentform,false);
if(window.attachEvent){
window.attachEvent('onload',getQueryString);
window.attachEvent('onload',submitpaymentform);
}
</script>
<% end if %>
<!-- end url populate --> STEP 2Open your cart.asp page in your HTML editor and midways, you should find the content area of your page and you will find the .asp include line that inserts the cart in your page. NOTE - Be sure to replace your page name there (green line) if it's different than donations.asp <!--#include file="vsadmin/inc/inccart.asp"-->JUST AFTER THAT - Paste in the code below. <script>
var donationpage = 'donations.asp'; //replace this page name with your donations page name if different
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
<% if orderid="" then %>
var cartlookup = document.getElementsByClassName("cartcontentsdiv")[0].innerHTML;
var findCharity = cartlookup.match(/Charity/g);
if (findCharity != null) {var orderhasroundup = 'yes';} else if (findCharity == null) {var orderhasroundup = 'no';}
createCookie('roundup',orderhasroundup,1);
<% end if %>
existsdiv = document.getElementsByClassName('cart4row')[0]
if (existsdiv !== undefined){
var grandtotal = (<%=grandtotal %>);
var grandtotalrnd = Math.ceil(grandtotal);
var grndtotdifference = (grandtotalrnd - grandtotal);
grndtotdifference = grndtotdifference.toFixed(2);
var roundupcheck = readCookie('roundup');
if (roundupcheck == 'yes'){
var subnode=document.createElement("DIV");
subnode.id='roundup';
subnode.innerHTML=('<input class="charity charthanks" type="button" value="Thanks for Rounding-up for Charity" title="Thanks for donating">');
document.getElementsByClassName("cart2column")[0].appendChild(subnode);
} else if (roundupcheck != 'Yes'){
if (grndtotdifference !== '0.00'){
var subnode=document.createElement("DIV");
subnode.id='roundup';
subnode.innerHTML=('<a href="'+donationpage+'?amount='+grndtotdifference+'&fromname=Round%20up%20for%20Charity"><input class="charity" type="button" value="Click to Round-up for Charity. Add $'+grndtotdifference+' to your total now" title="Round your total up for our favorite charity"></a>');
document.getElementsByClassName("cart2column")[0].appendChild(subnode);
}}}
</script> Save and upload to the server. It should be working now.
 |
| |
|
| Shopping Cart Software Forum for Ecommerce Templates |
© 2002-2022 ecommercetemplates.com |
|
|
|
All Forums
Round up for Charity add-on .asp AND .php