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

1. Navigate to Merchant Tools > Site Preferences > Custom Preferences > ChangeUp

2. 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).

3. Click Save.

Percentage options for the Product Page Donations.

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);

};
};ja

To 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