Dzisiaj kontynuacja tematu związanego z modułem Płatności elektroniczne. Przypominamy, że w pierwszej części artykułu zajmowaliśmy się podstawową konfiguracją modułu ps_wirepayment i pokazywaniem jego możliwości. Teraz wpis bardziej techniczny – ulepszymy użyteczność UX tego modułu – zmodyfikujemy wygląd linku Więcej informacji, zmienimy tłumaczenie linku Więcej informacji na Dane do przelewu bankowego oraz zgodnie z tematem przewodnim tego wpisu dodamy obrazek do tej metody płatności.
Zacznijmy od końca czyli od dodania obrazka do metody płatności zapłać przelewem przelew bankowy w Prestashop 1.7. Całość operacji wymaga nadpisania modułu ps_wirepayment (Płatności elektroniczne). Nadpisywanie modułów w Prestashop 1.7 nie należy do szczególnie trudnych zagadnień. Przejdziemy przez ten proces w kilka minut.
Ściągamy na dysk lokalny i otwieramy w dowolnym edytorze kodu plik modułu ps_wirepayment.php, ścieżka do tego pliku jest następująca:
../modules/ps_wirepayment/ps_wirepayment.phpW pliku modułu ps_wirepayment.php szukamy funkcji hookPaymentOptions, która odpowiada za zwracanie tej metody płatności w checkout (karta zamówienia), musimy ją skopiować w całości do naszego nadpisania. Ta funkcja w powyższym pliku powinna mieć mniej więcej kształt jak poniżej:
public function hookPaymentOptions($params)
{
if (!$this->active) {
return [];
}
if (!$this->checkCurrency($params['cart'])) {
return [];
}
$this->smarty->assign(
$this->getTemplateVarInfos()
);
$newOption = new PaymentOption();
$newOption->setModuleName($this->name)
->setCallToActionText($this->trans('Pay by bank wire', array(), 'Modules.Wirepayment.Shop'))
->setAction($this->context->link->getModuleLink($this->name, 'validation', array(), true))
->setAdditionalInformation($this->fetch('module:ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tpl'));
$payment_options = [
$newOption,
];
return $payment_options;
}Jednocześnie tworzymy lokalnie nowy katalog ps_wirepayment oraz umieszczamy w nim, pusty plik ps_wirepayment.php który w przyszłości nadpisze nam moduł.
Zajmijmy się samym plikiem nadpisania, na ten moment jest to pusty plik – otwieramy go i tworzymy nową klasę nadpisującą Ps_WirepaymentOverride i wklejamy do niej całą funkcję hookPaymentOptions, całość poprzedzamy:
use PrestaShop\PrestaShop\Core\Payment\PaymentOption;ten fragment kodu jest konieczny do funkcjonowania całości nadpisania.
Aby wyświetlić obrazek dla naszej metody płatności, korzystamy z poniższej konstrukcji:
->setLogo('../upload/bankwire.jpg')i tą linijkę wklejamy zaraz przed:
->setCallToActionText($this->trans('Pay by bank wire', array(), 'Modules.Wirepayment.Shop'))Obrazek bankwire.jpg wrzucamy do katalogu w instalacji Prestashop ../upload.
Gotowy plik nadpisania będzie miał następujący kształt:
<?php
use PrestaShop\PrestaShop\Core\Payment\PaymentOption;
class Ps_WirepaymentOverride extends Ps_Wirepayment {
public function hookPaymentOptions($params)
{
if (!$this->active) {
return [];
}
if (!$this->checkCurrency($params['cart'])) {
return [];
}
$this->smarty->assign(
$this->getTemplateVarInfos()
);
$newOption = new PaymentOption();
$newOption->setModuleName($this->name)
->setLogo('../upload/bankwire.jpg')
->setCallToActionText($this->trans('Pay by bank wire', array(), 'Modules.Wirepayment.Shop'))
->setAction($this->context->link->getModuleLink($this->name, 'validation', array(), true))
->setAdditionalInformation($this->fetch('module:ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tpl'));
$payment_options = [
$newOption,
];
return $payment_options;
}
}Gotowe nadpisanie czyli cały katalog ps_wirepayment należy teraz wrzucić do folderu docelowego zawierającego nadpisania modułów tzn. ../override/modules
Ostatecznie ścieżka do pliku zawierającego nasze nadpisanie na serwerze docelowym będzie miała poniższy kształt:
../override/modules/ps_wirepayment/ps_wirepayment.phpCałość testujemy odświeżając kartę zamówienia, jeśli nie mamy jej otwartej – robimy testowe zamówienie i sprawdzamy poprawność działania naszej modyfikacji. Jeśli obrazek nie jest wyświetlany, wyczyść Pamięć podręczną, sprawdź też ustawienia kompilacji szablonu.
Jak widać na poniższym screenie, kontekst wizualny pozostawia wiele do życzenia – elementy po dodaniu obrazka są nierówno względem siebie w pionie, brakuje także jakiegoś podstawowego marginesu dla naszego obrazka.
Musimy to więc jeszcze poprawnie ostylować, dodać margines do obrazka i wyrównać wszystkie elementy (input, label, obrazek) w pionie, aby to zrobić wystarczy kilka prostych reguł css.
body#checkout section.checkout-step .payment-options .payment-option {
display: flex;
align-items: center;
}
body#checkout section.checkout-step .payment-options label {
display: flex;
align-items: center;
margin-bottom: 0rem;
}
body#checkout section.checkout-step .payment-options label img {
margin-left: 0.7rem;
border: 1px solid #ccc;
}Reguły doklejamy do pliku custom.css, oczywiście koniecznie w szablonie dziecku:
../themes/child_classic/assets/css/custom.cssOdświeżamy, jeśli zmiany nie są widoczne – czyścimy Pamięć podręczną (Zaawansowane – Wydajność – przycisk Wyczyść pamięć podręczną).
GOTOWE! Po dodatkowych zabiegach w css całość wygląda jak poniżej:
Przechodzimy do kolejnej porcji ulepszeń w tym module, zmienimy teraz tłumaczenie przycisku „Więcej informacji”, który pojawia się po wybraniu tej metody płatności na „Dane do przelewu bankowego”.
Wybieramy z lewego menu Międzynarodowy, w rozsuwanym menu Tłumaczenia. W wyświetlonym oknie Tłumaczenia wybieramy kolejno:
Rodzaj tłumaczenia – Tłumaczenia zainstalowanych modułów,
Wybierz moduł – Płatności elektroniczne,
Język – Polski (Polish).
Klikamy przycisk Modyfikuj.
W wyszukiwarkę tłumaczeń wpisujemy frazę „Więcej informacji” i klikamy przycisk Szukaj.
Następnie podmieniamy tłumaczenie znalezionej frazy na „Dane do przelewu bankowego” i potwierdzamy przyciskiem Zapisz. Tłumaczenie zostało podmienione.
Teraz zajmijmy się poprawą wyglądu linku, od teraz nazywanego „Dane do przelewu bankowego”. Chcemy zmienić typ kursora na łapkę oraz podkreślić na stałe ten link. Byłaby to bardzo prosta czynność, gdyby twórcy modułu przewidzieli dodatkową klasę css dla ostylowania tego linku, takiej klasy jednak nie przewidziano i naszym zdaniem nie sposób całkiem poprawnie ostylować ten link bez nadpisania jednego z szablonów modułu tzn. ps_wirepayment_intro.tpl i dodania odpowiedniej klasy dla tego linku.
Przechodzimy więc do tej szybkiej modyfikacji,
Krok pierwszy, kopiujemy całą strukturę folderów w którym znajduje się interesujący nas plik ps_wirepayment_intro.tpl do naszego szablonu dziecka, w którym dokonamy niezbędnej modyfikacji, przy okazji kopiowania struktury nie zapominamy też oczywiście o samym pliku:
../modules/ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tplpo skopiowaniu struktury ścieżka do tego pliku w naszym szablonie dziecku powinna wyglądać następująco:
../themes/child_classic/modules/ps_wirepayment/views/templates/hook/ps_wirepayment_intro.tplŚciągamy plik ps_wirepayment_intro.tpl i przystępujemy do edycji. Szukamy odpowiedniego fragmentu kodu z interesującym nas linkiem:
<a data-toggle="modal" data-target="#bankwire-modal">{l s='More information' d='Modules.Wirepayment.Shop'}</a>i podmieniamy go na następujący, dodając klasę „bankwire-info”:
<a class="bankwire-info" data-toggle="modal" data-target="#bankwire-modal">{l s='More information' d='Modules.Wirepayment.Shop'}</a>Ostatnim krokiem jest dodanie reguł css, gdzie dodamy stałe podkreślenie dla tego linku oraz zmienimy typ kursora.
Tradycyjnie edycji dokonujemy w szablonie dziecku, w pliku custom.css. Do pliku dodajemy klasę:
.bankwire-info {cursor:pointer;text-decoration:underline !important;}Odświeżamy, jeśli zmiany nie są widoczne – czyścimy Pamięć podręczną (Zaawansowane – Wydajność – przycisk Wyczyść pamięć podręczną).
Moduł Płatności elektroniczne w checkoucie po naszych zmianach prezentuje się już całkiem dobrze:
