Product Page Donations
Percentage Options
These options are required to set the amounts of the percentage options on the dashboard. This preference has default values: 1, 2, 2.5, 3, 5, 10
Navigate to Merchant Tools > Site Preferences > Custom Preferences > ChangeUp
Enter the values separated by commas and order from least to greatest or leave the field empty to use the default values (the field next to ChangeUp - Percentage Options Product Page Donations).
Click Save.
Donation Amount for Product Detail Page (PDP)
'use strict';
module.exports = function () {
var sales = $('.salesuplift-donation').length || $('.salesuplift-donation-nogrid').length ? true : false;
if (sales){
var percentage = document.getElementById('percentage').innerText;
var productValue = '';
var value = '';
var productPrice = '';
var su_donation = '';
var quantitycount = '';
var quantity = '';
var products = document.getElementsByClassName('su_donation').length;
setInterval(function setPrice() {
for (let i = 0; i < products; i++) {
productValue = $('.strike-through').length ? $('span.value')[i+1] : $('span.value')[i];
value = productValue.innerText;
productPrice = value.split('$')[1];
quantitycount = '#quantity-' + (i+1);
quantity = $(quantitycount)[0].selectedIndex + 1;
su_donation = (parseFloat(productPrice.replace(',', '')) * parseFloat((percentage/100)));
document.getElementsByClassName('su_donation')[i].innerHTML = '$' + (su_donation.toString().match(/^-?\d+(?:\.\d{0,3})?/)[0] * quantity).toFixed(2);
document.getElementsByClassName('su_donation_modal')[i].innerHTML = '$' + (su_donation.toString().match(/^-?\d+(?:\.\d{0,3})?/)[0] * quantity).toFixed(2);
}
},1000);
};
};jaTo obtain this value inside PDP, we use the name of the class where the price of the product is found:
var percentage = represents the percentage of the donation (2%), this value is defined from the dashboard
var productValue = This represents the price of the product in the PDP, this value is necessary to calculate the donation. To obtain; we used the class name ‘strike-through’ to check if the price has a discount; as shown in this example
If the product has this format, we will use the second value to calculate the donation using the class name ‘span.value’[1]. In another way, use ‘span.value’[0]
Span.value[i]: This value corresponds to the product’s price, this selector can be modified by the name of the container and class where the value of the product is located
‘#quantity-‘ = this value represents the id name for the quantity selector, this name can be replaced for the id name of the quantity selector in the PDP
‘#quantity-‘ + [i+1] = the "[i+1]" is added in the case of having more
than one product in the PDP.
Sets Products
var quantity = this variable contains the number of the quantity selector in the PDP, It is used for calculating the donation using the productPrice and percentage
Last updated