Dodawanie kanałów do płatności online w szablonach

Dodawanie kanałów do płatności online

Kanały w płatnościach online to inaczej sposób zapłaty. W tym artykule dowiesz się, jak je dodać w swoim szablonie.

1. Bursztyn i Opal

W pliku order/cart.html dodaj poniższy kod:

Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style:

Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod:

Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję oznaczoną komentarzem //next i dodaj w niej (w pierwszym warunku if ($(this).hasClass(‚start’))) w zależności od szablonu:
Bursztyn:

Opal:

Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

2. Agat:

W pliku partials/cart/cart-content.html dodaj poniższy kod:

Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/main2.scss dodaj poniższe style:

Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/order.js należy wkleić poniższy kod:

Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/order.js odnajdź funkcję orderNextStep i dodaj w niej (na początku else’a warunku if ($(‚#delivery-address-data’).index() >= 0)) kolejny warunek do sprawdzenia:

Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentChannel i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

3. Szafir

W pliku order/delivery-partials/delivery-section.html dodaj poniższy kod:

Następnie konieczne jest również ostylowanie dodanego fragmentu, aby był spójny z resztą szablonu. Na końcu pliku scss/globals/_globals2.scss dodaj poniższe style:

oraz w pliku scss/globals/_globals-m.scss:

Wskazówka
O tym jak skompilować i zminifikować pliki scss dowiesz się z artykułu o kompilacji i minifikacji plików.
Gdy kanały są już dodane oraz dobrze wyświetlają się w szablonie, kolejny krok to włączenie ich działania. W tym celu na końcu pliku js/init-ui2.js należy wkleić poniższy kod:

Wskazówka
O tym jak zminifikować pliki js dowiesz się z artykułu o kompilacji i minifikacji plików.
Na koniec dodaj walidację, dzięki której nie będzie się dało złożyć zamówienia, jeśli żaden kanał nie został wybrany. W pliku js/init-ui1.js odnajdź funkcję addOrder i dodaj w niej (zaraz pod pierwszym warunkiem if (ajaxModalSelector && this.hiddingClass)) kolejny warunek do sprawdzenia:

Ostatnim krokiem jest dodanie komunikatu, który będzie wyświetlany w przypadku niezaznaczenia żadnego kanału. W tym celu w pliku _layout.html odnajdź skrypt ze zmienną __translations i dopisz w nim kolejną linijkę: ChoosePaymentMethod: ‚{{ translations.ChoosePaymentMethod | H }}’. Następnie w panelu administracyjnym (Wygląd sklepu/ Ustawienia/ Tłumaczenia) dodaj tłumaczenie o kluczu ChoosePaymentMethod i treści Wybierz sposób zapłaty (lub jakiejkolwiek innej, którą uważasz za stosowną).

Czy ten artykuł był pomocny?