Problem z wyborem banku z

[MajsterKlepka]

Wybór banku z poziomu checkoutu przestał działać. Po kliknięciu w wybrany bank radio się zaznacza, ale nie dodaje się klasa "payMethodActive".

Do checkoutu używamy modułu "The Checkout" (https://addons.prestashop.com/en/express-checkout-process/42005-the-checkout.html)

Do zeszłego tygodnia ten problem nie występował, pojawił się po ostatniej awarii PayU.

PayU w wersji: 3.2.20 The Checkout: 3.3.10 Prestashop: 8.0.4 PHP: 7.4.33

[regdos]

Proszę o udostępnienie adresu sklepu.

[MajsterKlepka]

https://feelgood.pl/

[regdos]

Tylko teraz chyba jest wyłączona lista banków więc nie można sprawdzić co się dzieje.

[MajsterKlepka]

Już włączyliśmy listę banków

śr., 31 lip 2024 o 13:14 Tomasz Regdos @.***> napisał(a):

Tylko teraz chyba jest wyłączona lista banków więc nie można sprawdzić co się dzieje.

— Reply to this email directly, view it on GitHub https://github.com/PayU-EMEA/plugin_prestashop/issues/332#issuecomment-2260274322, or unsubscribe https://github.com/notifications/unsubscribe-auth/BE6MA2M5ERDLF7N6LHZ7X3TZPDBIHAVCNFSM6AAAAABLLZ2SVSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRQGI3TIMZSGI . You are receiving this because you authored the thread.Message ID: @.***>

-- Pozdrawiam

Mariusz Wieczorek

[regdos]

W standardowym checkout Prestashop każde radio do wyboru metody płatności generowane jest następująco:

<input id="payment-option-Y" class="ps-shown-by-js " data-module-name="XXXX" name="payment-option" type="radio" required="">

gdzie zamiast XXXX wstawiana jest nazwa moduły czyli dla wszystkich metod PayU wygląda to:

<input id="payment-option-Y" class="ps-shown-by-js " data-module-name="payu" name="payment-option" type="radio" required="">

Natomiast w Waszym sklepie wygląda to tak:

<input id="payment-option-1" class="ps-shown-by-js " data-module-name="payu-8fd70" name="payment-option" type="radio" required="">​
<input id="payment-option-2" class="ps-shown-by-js " data-module-name="payu-f4dee" name="payment-option" type="radio" required="">​
<input id="payment-option-3" class="ps-shown-by-js " data-module-name="payu-0961b" name="payment-option" type="radio" required="">​
<input id="payment-option-4" class="ps-shown-by-js " data-module-name="payu-f9ef1" name="payment-option" type="radio" required="">​
<input id="payment-option-5" class="ps-shown-by-js " data-module-name="payu-f9ef1" name="payment-option" type="radio" required="">

W data-module-name do wartości payu dodawany jest losowy ciąg znaków i dlatego nie zapinają się akcje na kliknięcia. Moje przypuszczenie jest takie, że The Checkout to robi ponieważ on zastępuje standardową stronę checkout w Prestasshop.

[MajsterKlepka]

The Checkout dodaje do data-module-name MD5 z nazwy call to action:

// Some payment modules (e.g. paynow) do not always return same order of payment methods, so we need an ID that would be unique for every option
        foreach ($paymentMethods['payment_options'] as $modName => &$options) {
            foreach ($options as &$option) {
                // ps_checkout needs exact data-module-name attribute, it won't initialize widget otherwise

                if ($modName == 'ps_checkout' || (0 === strpos($modName, 'paypal')) || strpos($modName, 'przelewy-method') === 0 || strpos($modName, 'payu') === 0) {
                    $option['call_to_action_text_md5'] = '';
                } else {
                    $option['call_to_action_text_md5'] = '-' . substr(md5($option['call_to_action_text']), -5);
                }
            }
        }

Dodaliśmy PayU do wyjątków i obecnie wygląda to standardowo:

<input class="ps-shown-by-js " id="payment-option-3" data-module-name="payu" name="payment-option" type="radio" required="">

Nadal nie zapinają się akcje na kliknięcia

[regdos]

Zgada się, ponieważ najpierw jest wczytywany plik payu17.js a potem po wczytaniu ajax-em renderowana jest zawartość z listą bramek. W tym skrypcie jest kod zapinający listener na kliknięcia:

(function () {
    document.addEventListener("DOMContentLoaded", function () {
    .....
        document.querySelectorAll('[name=payment-option][data-module-name=payu]').forEach(function (element) {
            element.addEventListener('click', function (ev) {
    .....

a w momencie jego uruchomienia (zdarzenie DOMContentLoaded czyli gdy zostanie przeparsowany HTML i wszystkie skrypty deffer zostaną załadowane) nie ma jeszcze wczytanych i pokazanych ikon banków więc ten selektor przed forEach daje pustą listę. Może da się jakoś przekonfigurować żeby The Checkout inaczej wczytywał metodę lub skrypt? Można też spróbować zmienić listener DOMContentLoaded na load, który jest uruchamiany po wczytaniu wszystkich zasobów, choć w tym przypadku mam wątpliwość czy to pomoże.