Bardzo często podczas tworzenia dedykowanego modułu dla klienta, dochodzi do momentu kiedy musimy pozmieniać – dodać lub usunąć pewne nowe pola na podstronie Checkout. Zatem jak to zrobić? W tym artykule przedstawię wam jak dodać nowe pola poprzez plik function.php.
Jest to najbezpieczniejsza metoda dodawania pól, ponieważ nie jesteśmy zależni od jakiś dziwnych wtyczek, które z dnia na dzień mogą przestać działać z powodu np. wprowadzenia nowej aktualizacja wordpressa.
W tym artykule dodamy 3 nowe pola textowe (Nazwa firmy, Nip, Adres), które po wypełnieniu trafią do kliena w podsumowaniu na maila i do naszego panelu administracyjnego → woocommerce → zamowienia
Zatem zabierajmy się do pracy 🙂
Otwieramy Filezille lub Total commandera (lub inny program, który pozwoli nam się połączyć zdalnie z serwerem FTP). Wpisuje nasze dane do logowania z serwerem FTP: (Serwer, nazwa użytkownika, hasło), po czym znajdujemy katalog w którym znajduje się nasza strona, następnie wchodzimy w wp-content → themes → nazwa naszego motywu child.
(Child motyw Większość współczesnych motywów posiada child motyw czyli miejsce gdzie możemy modyfikować pliki oryginalnego motywu bez konieczności nadpisywania orginału w jego katalogu.) następnie otwieramy nasz plik function.php (Jako edytor bardzo polecam notepad++, jest to darmowe narzędzie, które obsługuje bardzo dużą ilość języków przy czym mało waży w porównaniu do innych).
Uwaga ! Każdy plik function.php może wyglądać inaczej, zależy od motywu 🙂
co ważne scrollujemy dokument na sam dół i dodajemy komentaż /* Nasz Kod */
żebyśmy widzieli gdzie my zaczeliśmy dokonywać zmian i w razie czego w prostu sposób naprawić błędy.
Dodajemy kod, który doda nam 3 opcjonalne pola w zakładce checkout. Najważniejsze elementy kodu omówie poniżej:
woocommerce_form_field jest to wewnętrzna funkcja woocommerca która określa nam nowe pole wraz z jego parametrami:
'type’ → typ pola np. text,checkbox,number
'class’ → dodane klasy do nadrzędnego akapitu, które pozwolą oscylować pole
'label’ → jest to etykieta, która występuje nad nowym polem
'placeholder’ → tekst wyświetlany wewnątrz pola
na samym końcu jest taki ciekawy fragment jak $checkout->get_value( 'miejsce’ ), ten fragment kodu przekazuje dane wpisane przez użytkownika na stronie do dalszej części zamówienia.
Uwaga ! Bez tego fragmentu kodu nie ma możliwości przekazania dalej informacji od użytkownika.
Pozostał jeszcze jeden element kodu znajdujący się na samym początku:
jest to wewnętrzna funkcja wordpressa, która pozwala wkleić kod który napisaliśmy w postaci funkcji w dane miejsce strony.
To teraz z polskiego na nasze ;D
utworzyliśmy funkcje my_custom_checkout_field, która posiada jakiś element kodu w naszym wypadku dodawanie pól.
Skoro utworzyliśmy funkcje to musi ona wiedzieć gdzie się ma wywołać i do tego służy funkcja add_action. Pobiera ona miejsce gdzie ma być dodana, w tym przypadku to woocommerce_after_order_notes i dodaje tam naszą funkcje my_custom_checkout_field.
Całkiem proste nie? W dodatku bardzo praktyczne.
W tym momencie zadacie sobie pytanie skąd jest to miejsce: woocommerce_after_order_notes
A odurz nasi kochani projektanci woocommerca wiedzieli, że nastąpi kiedyś taki moment w której web developrzy zaczną grzebać i kombinować w plikach woocommerca. Co nie jest do końca dobrym rozwiązaniem, ponieważ każda aktualizacja spowoduje przywrócenie kodu do stanu pierwotnego. I dlatego powstały Woocommerce Hooks (załączam link do strony z przydatnymi hookami Woocommerce Hooks), które pozwalają nam wszczepić nasz kod w miejsce gdzie chcemy :).
Tak więc pierwszy etap pracy mamy za sobą, dodaliśmy nasze pola co wygląda następująco:
Ustawiamy wstępną konfiguracje przesyłania danych z pól, które utworzyliśmy
Wszystko fajnie tylko co się okazuje: po wprowadzeniu danych nic się z nimi nie dzieje. Dlaczego?
Odpowiedź jest dosyć prosta, ponieważ żadna funkcja nie wie co z nimi jeszcze zrobic. Zaraz to zmienimy 🙂 wklejamy nasz kod:
Na samym początku dajemy instrukcje warunkową, która sprawdza czy pole zostało wypełnione jeżeli tak to przekazuje dane dalej, jeżeli nie to nic z nią nie robi. Jednak ciekawszym fragmentem jest:
,który sprawia że dane z naszych pól są dodane do podsumowania. Opis co krok po kroku sie dzieje:
$order_id wskazuje id aktualnego zamówienia
'My firma’ jest to dodatkowa zmienna, która będzie nam potrzebna do wyświetlenia danych w panelu administracyjnym
sanitize_text_field( $_POST[’firma’] ) odpowiada za przesłanie danych z formularza.
[’firma’] pamiętacie? Jest to wartość która przesyłamy poprzez get_value( 'firma’ ));
Na tym etapie mamy wprowadzoną walidację danych która będzie przesyłana do naszego panelu.
Dodajemy nasze pola do panelu administracyjnego
Aby dodać te dane do panelu administracyjnego i wyświetlić w podsumowaniu wklejamy kod:
Najważniejszym elementem jest get_post_meta( $order->id, 'My firma’, true ) .’ ’; , które pobiera nam dane przefiltrowane w poprzednich krokach i dodaje do panelu administracyjnego 🙂
Po wypełnieniu wszystkich pól widzimy że dane mamy dodane w panelu:
Dodajemy dane z naszych pól do maila podsumowywującego
Wszystko super tylko dalej klient tego nie ma w podsumowaniu w mailem, aby dodać nasze dane do maila wpisujemy następujący kod:
function new_woocommerce_email_after_order_table ($order, $sent_to_admin, $plain_text, $email) {
global $woocommerce;
echo pokaz_firma2($order);
Tworzymy nową funkcję, która będzie dodawała dane od użytkownika do maila:
Najważniejsze jest dodane wywołania funkcji: echo pokaz_firma2($order);
ponieważ tam znajdują się wszystkie dane które wpisał użytkownik
Po wykonaniu wszystkich powyższych kroków z całą pewnością uda ci się dodawać tyle pól ile jest potrzebne w danym projekcie. Bardzo dziękuję za przeczytanie artykułu i zapraszam do komentowania 🙂
Pismo obrazkowe stało się w ostatnim czasie dość popularne. I chociaż towarzyszyło nam od dawna jako potoczne emotikonki tym razem mamy do czynienia z ulepszoną wersją jako emoji. Dla nowicjuszy kwestie ulepszenia dotyczą głównie sposobu wyświetlania emotek.
Wraz z wydaniem wersji WordPressa o numerze 4.2 standard kodowania znaków w bazie danych został zmieniony z UTF8 na UTF8MB4. Nie wchodząc w szczegóły tego zagadnienia zmiana ma być sporym ułatwieniem dla osób posługujących się językami japońskim, chińskim, wietnamskim i koreańskim. Kodowanie UTF8MB4 pozwoli na natywne przechowywanie w bazie znaków emoji dzięki czemu możemy wykorzystywać emoji nie tylko w treści podstron czy wpisów ale również w samym adresie URL. Jako przykład doskonale może posłużyć link do aktualnego wpisu: https://www.studiolokomotywa.pl/emoji-w-wordpress-?/
Na dzień dzisiejszy wadą tego przedsięwzięcia jest to, że nie wszystkie przeglądarki obsługują emoji lub obsługują niepoprawnie.
W przypadkach gdzie serwer nie będzie mógł z różnych przyczyn zmienić kodowania bazy danych WordPress będzie konwertował kody emoji na HTMLowe odpowiedniki, które będzie można nadal używać. Występowały przypadki gdzie podczas przenoszenia strony z serwera 1 na serwer 2 baza danych MySQL nie zaimportowała bazy danych z kodowaniem UTF8MB4. Prostym doraźnym obejściem w tej sytuacji jest ręczna edycja pliku bazy danych i zamiana UTF8MB4 -> UTF8 i ponowny import.
W przypadku kanałów RSS i wiadomości mailowych wysyłanych przez WordPressa emoji nie będą obsługiwane a finalnie grafika wyświetlana będzie konwertowana „w locie”.
Analizując jakiś czas temu wejścia na podstrony zauważyłem, że Google bardzo ładnie pokazuje emoji (emot ikony). Poniżej screen bieżącego wpisu.
Całość prezentuje się bardzo ciekawie i wyróżnia się spośród innych wyników naturalnych.