# 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**.

<figure><img src="/files/2OjlakLRPzkphaklnWM2" alt=""><figcaption><p>Percentage options for the Product Page Donations.</p></figcaption></figure>

### Donation Amount for Product Detail Page (PDP)

```javascript
'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                                                                                                                                    | ![](/files/zAGpoUoZaOXdKn3QJUfB) |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| 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 | ![](/files/j4VuJ1aCdW0b8P1FVmLh) |
| 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]                                                                                 | ![](/files/CDGaZfFUySNwwTcF0Umc) |
| 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                                                                      | ![](/files/3D1IAXvG5KhM1jthQxQi) |
| ‘#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                                                                                          | ![](/files/lITz2QAbBKrBDaXCRwiE) |
| <p>‘#quantity-‘ + \[i+1] = the "\[i+1]" is added in the case of having more</p><p>than one product in the PDP.</p>                                                                                                                                 | **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                                                                          | ![](/files/JoEBliizl4XVsgteRU3M) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.changeup.com/salesforce/salesforce-b2c-commerce/setup-and-configuration/site-preferences/product-page-donations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
