https://www.kirkonulkomaanapu.fi/wp-content/plugins/kua-op-payments/js/donation-example.js?ver=1.0.7.15

1$(document).ready(function() {
2    setExample()
3})
4
5function setExample() {
6    $('.donation-form').each(function() {
7        let form = $(this)
8        let donationType = 'single'
9        let donationAmount = null
10        // console.log(donationType);
11
12        //Check what was donation frequency on page load, init example according to that info
13        if($(this).find('.donation-frequency input[type="radio"]').length) {
14            donationType = $(this).find('.donation-frequency input[type="radio"]:checked').val()
15        }
16        // console.log(donationType);
17        
18        let options = $(this).find(
19            ".donation-amount-toggles ." + donationType + "-options .option"
20        );
21        let option_checked = options.find('input[type="radio"]:checked');
22        if (option_checked.length) {
23            donationAmount = option_checked.val();
24        } else {
25            donationAmount = options.first().find('input[type="radio"]').val();
26        }
27        updateExample(donationType, donationAmount, form)
28
29        //Change example when amount is changed
30        $(this).find('.donation-amount-toggles .option input[type="radio"]').on('change', function() {
31            donationAmount = $(this).val()
32            updateExample(donationType, donationAmount, form)
33        })
34
35        //When donation type is changed, get first example of new type
36        $(this).find('.donation-frequency .option input[type="radio"]').on('change', function() {
37            donationType = $(this).val()
38            let options = form.find('.donation-amount-toggles .' + donationType + '-options');
39            let option_checked = options.find('input[type="radio"]:checked');
40            if (!option_checked.length) {
41                option_checked = options.find('input[type="radio"][checked]').first();
42            }
43            if (!option_checked.length) {
44                option_checked = options.find('input[type="radio"]').first();
45            }
46            donationAmount = option_checked.val()
47
48            updateExample(donationType, donationAmount, form)
49        })
50
51        //Edit example with number field
52        $(this).find('.donation-amount-field input[type="number"]').on('input', function() {
53            donationAmount = $(this).val()
54            updateExample(donationType, donationAmount, form)
55        })
56    })
57}
58
59function updateExample(selectedType = 'single', selectedAmount = 0, form) {
60    if(form.length) {
61  
62        let example_el = form.find('.donation-example')
63        let examples = example_el.data('single-examples') || [];
64        
65        if (selectedType === 'monthly') {
66            examples = example_el.data('monthly-examples') || [];
67        }
68        console.log("examples", examples);
69
70        let example = examples.find((item) => item.amount == selectedAmount);
71        console.log("example", example);
72
73        if (example) {
74            let image = example.image;
75            let text = example.description;
76            
77            if(image) {
78                example_el.find('.image').show();
79                example_el.find('img').attr('src', image);
80            } else {
81                example_el.find('.image').hide();
82            }
83
84            if(text) {
85                example_el.find('.content').show();
86                example_el.find('.content').text(text);
87            } else {
88                example_el.find('.content').hide();
89            }
90        } else {
91            example_el.find('.image').hide();
92            example_el.find('.content').hide();
93        }
94    }
95}