Wstęp
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:
Dodajemy kod, który doda nam 3 opcjonalne pola w zakładce checkout. Najważniejsze
// Wyswietlamy pola
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
/* Pierwsze pole */
woocommerce_form_field( 'firma', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Pełna nazwa Firmy:'),
'placeholder' => __('Wpisz nazwę firmy'),
), $checkout->get_value( 'firma' ));
/* Drugie pole */
woocommerce_form_field( 'nip', array(
'type' => 'number',
'class' => array('my-field-class form-row-wide'),
'label' => __('NIP'),
'placeholder' => __('Wpisz NIP'),
), $checkout->get_value( 'nip' ));
/* Trzecie pole */
woocommerce_form_field( 'miejsce', array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('Ulica, kod, miejscowość:'),
'placeholder' => __('Wpisz Ulica, kod, miejscowość:'),
), $checkout->get_value( 'miejsce' ));
}
Omówienie Kodu
Zacznijmy od funkcji czyli od momentu function my_custom_checkout_field( $checkout )
woocommerce_form_field( 'miejsce’, array(
'type’ => 'text’,
'class’ => array(’my-field-class form-row-wide’),
'label’ => __(’Ulica, kod, miejscowość:’),
'placeholder’ => __(’Wpisz Ulica, kod, miejscowość:’),
), $checkout->get_value( 'miejsce’ ));
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:
add_action( 'woocommerce_after_order_notes’, 'my_custom_checkout_field’ );
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
Ustawiamy wstępną konfiguracje przesyłania danych z pól, które utworzyliśmyWszystko 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:
// Dodajemy pola do zamowienia
add_action( 'woocommerce_checkout_update_order_meta', 'dodaj_firma2' );
function dodaj_firma2( $order_id ) {
if ( !empty( $_POST['firma'] ) ) {
update_post_meta( $order_id, 'My firma', sanitize_text_field( $_POST['firma'] ) );
}
if ( ! empty( $_POST['wydzial'] ) ) {
update_post_meta( $order_id, 'My wydzial', sanitize_text_field( $_POST['wydzial'] ) );
}
if ( ! empty( $_POST['email'] ) ) {
update_post_meta( $order_id, 'My email', sanitize_text_field( $_POST['email'] ) );
}
}
Omówienie Kodu
Tworzymy nową funkcję dodaj_firma2( $order_id ), która będzie odpowiadała za walidacje danych, które poźniej trafią do panelu administratora
if ( !empty( $_POST[’firma’] ) ) {
update_post_meta( $order_id, 'My firma’, sanitize_text_field( $_POST[’firma’] ) );
}
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:
update_post_meta( $order_id, 'My firma’, sanitize_text_field( $_POST[’firma’] ) );
,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
Dodajemy nasze pola do panelu administracyjnegoAby dodać te dane do panelu administracyjnego i wyświetlić w podsumowaniu wklejamy kod:
// Dodajemy pola do panelu admina
add_action( 'woocommerce_admin_order_data_after_billing_address', 'pokaz_firma2', 10, 1 );
function pokaz_firma2($order){
echo __( 'Firma').'' . get_post_meta( $order->id, 'My firma', true ) ;
echo __( ' Wydział').''. get_post_meta( $order->id, 'My wydzial', true );
echo __( ' Email').''. get_post_meta( $order->id, 'My email', true );
}
Omówienie Kodu
Tworzymy nową funkcje pokaz_firma2($order), która będzie odpowiadać za wyświetlenie danych w podsumowaniu i panelu administracyjnym.
echo ’ ’.__( 'Firma’).’: ’ . get_post_meta( $order->id, 'My firma’, true ) .’ ’;
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
Dodajemy dane z naszych pól do maila podsumowywującegoWszystko 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);
}
add_filter('woocommerce_email_after_order_table', 'new_woocommerce_email_after_order_table', 1, 2);
Omówienie Kodu
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 🙂
