Kompletní návod k vývoji vlastních platebních polí pro WooCommerce: od začátku až po praktické využití.

Proč je potřeba vlastní pole pro dokončení platby?

Výchozí stránka pro platbu v systému WooCommerce poskytuje základní pole pro jméno, adresu, e-mail a podobně. Pro mnoho specifických obchodních scénářů však tato data nestačí. Například prodejce zakázkových dortů může potřebovat shromáždit “přání na dortu”, B2B velkoobchodní webové stránky mohou potřebovat “identifikační číslo společnosti”, zatímco webové stránky pro prodej vstupenek na akce mohou potřebovat “identifikační číslo účastníků” pro ověření. V těchto případech musí vývojáři rozšířit funkce pomocí vlastních polí pro platbu, aby splnili specifické požadavky na sběr dat.

Vlastní pole nejenže zlepšují uživatelský zážitek a přizpůsobují proces platby potřebám podniku, ale také poskytují důležitou datovou podporu pro následné správu zákazníků, zpracování objednávek a dokonce i pro marketingové aktivity. Správné zobrazení těchto polí na straně serveru a v e-mailech zajišťuje celkovou úplnost informací během celého procesu objednávky.

Podrobný výklad klíčových metod a háčků

WooCommerce poskytuje výkonný a flexibilní systém hooků, který nám umožňuje podrobně přizpůsobit stránku pro dokončení nákupu, aniž bychom museli měnit samotný základní kód. Implementace vlastních polí zahrnuje hlavně tři kroky: přidání polí, ověření jejich obsahu a uložení a zobrazení dat těchto polí. Každý z těchto kroků odpovídá konkrétnímu akčnímu hooku nebo filtrovému hooku v rámci systému WooCommerce.

Filtr používaný k přidávání polí

Přidávání polí se provádí především prostřednictvím… woocommerce_checkout_fields To je možné pomocí filtrů. Tyto filtry nám umožňují vkládat nová pole pro vstup, rozebírací menu nebo políčka zaškrtnutí do různých částí formuláře pro úhradu – např. do oblasti “Účtenka”, “Doprava” nebo do vlastního pole “Doplňující informace k objednávce”.

Vývojáři potřebují napsat funkci typu callback, která přijme existující pole v podobě pole a po jejich úpravě vrátí nové pole. Uvnitř této funkce lze detailně definovat vlastnosti každého nového pole – typ, popisek, náhradní hodnotu (placeholder), povinnost vyplnění, prioritu (pro řazení) a CSS třídu.

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Hook používaný k ověření polí

Když uživatel odeslá formulář pro dokončení nákupu, musíme se ujistit, že data v přizpůsobených polích splňují požadavky. V tomto případě je potřeba použít… woocommerce_checkout_process Akční hook. V funkci na zpáteční volání tohoto hooku můžeme přistupovat k datům, která byla předána. $_POST Data odeslaná pomocí globálních proměnných jsou poté ověřena.

Například lze zkontrolovat, zda je některé povinné pole prázdné, nebo ověřit, zda je formát telefonního čísla správný. Pokud ověření selže, lze použít… wc_add_notice() Funkce zobrazí uživateli chybovou zprávu a zabrání pokračování procesu platby.

Hooky mechanism used for saving and displaying data

Po odeslání objednávky musí být data z přizpůsobených polí bezpečně uložena do metadat této objednávky. To je dosaženo pomocí… woocommerce_checkout_update_order_meta Akce se dokončí pomocí akčního háčku (action hook). V funkci na zpáteční volání tohoto háčku můžeme použít… update_post_meta() Funkce uloží ověřené hodnoty z formuláře do příslušného objednávky. wp_postmeta V databázové tabulce.

Po uložení těchto dat je obvykle nutné je zobrazit na třech místech: na stránce s detaily objednávky v administrátorském rozhraní, v potvrzovacím e-mailu, který obdrží uživatel, a ve zobrazení objednávky v účtu zákazníka. To zahrnuje úpravy administrátorského rozhraní, šablon e-mailů a webových stránek určených k zobrazení účtů uživatelů.

Praktický příklad: Přidání pole “Poznámka k dárku”

Níže si ukážeme celý příklad toho, jak přidat do online květinářství textové pole pro “poznámku k dárku”. Toto pole se zobrazí v oblasti informací o objednávce, je volitelné a jeho obsah bude uložen a zobrazen jak v pozadí, tak i v e-mailu.

Krok 1: Přidejte pole na stránku pro dokončení objednávky.

Nejprve potřebujeme použít… woocommerce_checkout_fields Použijte filtr k registraci tohoto nového pole. Přidáme ho za pole “Poznámky k objednávce”. Níže je kód, který je třeba přidat do podpříslušného modulu. functions.php Přidáno do souboru nebo prostřednictvím vlastních funkčních doplňků (plug-inů).

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Tento kód vytvořil… textarea Pole tohoto typu má název “Dárkové přání a poznámky” a je nastaveno s odpovídajícími nahrazenými hodnotami („placeholders“) a CSS třídami.priority Parametry určují jejich umístění na obrazovce.

Krok 2: Uložení dat z polí do objednávky

Následně potřebujeme při vytváření objednávky uložit zprávu, kterou uživatel zadal. K tomu použijeme… woocommerce_checkout_update_order_meta To je realizováno pomocí „hooků“.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Zde provádíme kontrolu. $_POST['gift_message'] Zda existuje nějaká hodnota – pokud ano, pak ji použijte. sanitize_textarea_field() Po bezpečném vyčištění funkce je možné pokračovat v jejím používání. update_post_meta() Uložte to jako metadata objednávky a pojmenujte klíč metadat „order_metadata“. _gift_message。

Krok 3: Zobrazování dat na pozadí a v e-mailech

Po uložení dat je nutné je zpřístupnit pro ostatní uživatele. Následující kód ukazuje, jak lze toto pole zobrazit na stránce s detaily objednávky v administrátorském prostředí a v e-mailech zákazníků.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message)`.'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

První funkce zobrazí zprávu pod adresou účtu u zadání objednávky v pozadí. Druhá funkce přidá zprávu jako nový řádek dat do potvrzovacího e-mailu o objednávce odeslaného systémem WooCommerce.

Pokročilé techniky a doporučení

Po zvládnutí základních metod můžeme zkoumat složitější scénáře využití a možnosti optimalizace, čímž vylepšíme funkčnost a použitelnost vlastních polí.

Vytvořit podmínky pro zobrazení polí

Někdy záleží na hodnotě jednoho pole, zda se druhé pole zobrazí. Například pole “Název faktury” se zobrazí pouze tehdy, když uživatel zvolí možnost “Potřebuji fakturu”. K realizaci tohoto chování na straně klienta (frontend) je potřeba využít JavaScript. Můžeme přidat k pole, které tento efekt spouští (např. poli zaškrtávacího boxu), určité události (eventy), které zajistí, že se po změně hodnoty tohoto pole příslušné pole zobrazí. change Event listener, který následně dynamicky ovládá zobrazení nebo skrytí cílového pole. Současně je třeba provést odpovídající zpracování i v logice ověřování na straně serveru.

Bezpečnost a čištění dat v polích

Bezpečnost je naprosto zásadní. Při zpracovávání uživatelského vstupu je nutné vždy provádět ověřování a čištění dat. Pro textová pole použijte vhodné nástroje nebo způsoby zpracování, které zajistí, že vstupní data jsou spolehlivá a bez chyb. sanitize_text_field() 或 sanitize_textarea_field()Pro e-maily se používá… sanitize_email()Při výstupu dat na frontend je nutné použít… esc_html() 或 wp_kses_post() Funkce jako escape() slouží k označení speciálních znaků, aby se předešlo útokům typu cross-site scripting (XSS).

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

Kompatibilita s třetími stranami, pluginy a tematikami

Při přidávání vlastních polí může dojít ke konfliktům se stylym nebo skripty některých témat nebo dalších doplňků (zejména doplňků určených k optimalizaci procesu platby). Doporučujeme vždy provádět vývoj v podtématech a přidávat jedinečné názvy CSS tříd pro kontejnerové prvky těchto vlastních polí. Před oficiálním nasazením je nezbytné provést testování v různých situacích, včetně použití různých témat a aktivovaných běžně používaných doplňků. Použití nástrojů pro vývojáře v prohlížeči k kontrole chyb v prvcích a skriptech je důležitým způsobem, jak odhalit a vyřešit problémy s kompatibilitou.

Závěr

Díky tomuto průvodci jsme začali porozuměním požadavkům a postupně se ponořili do procesu vývoje vlastních platebních polí v WooCommerce. Naučili jsme se, jak využít woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Tyto tři klíčové funkce slouží k přidávání, ověřování a ukládání polí. Pomocí praktického příkladu “Zpráva k dárku” byl kompletně demonstrován celý proces od vytvoření polí až po zobrazení dat. Na závěr byly rozebrány pokročilé tématy, jako jsou podmíněná pole, bezpečnostní zásady a kompatibilita.

Pokud ovládnete tyto dovednosti, budete schopni flexibilně reagovat na jedinečné požadavky na sběr dat v různých e-shopových projektech a vytvořit profesionálnější a personalizovanější obchody pomocí platformy WooCommerce. To vám pomůže zvýšit míru konverzí a spokojenost zákazníků.

Časté dotazy

Kde jsou data uložena v přizpůsobených polích?

Data z vlastních polí jsou obvykle uložena jako “metadata objednávky” v databázi WordPress. wp_postmeta V tabulce. Každý záznam obsahuje příslušný ID objednávky.post_id), metaklíče, které jste si sami definovali (např. _gift_messageA metapodstaty. Můžete to provést pomocí metod objektu objednávky v WooCommerce. $order->get_meta(‘_gift_message’) nebo funkce WordPress get_post_meta() Přijďte získat tyto data.

Jak přidat front-end ověřování (např. ověřování formátu) pro vlastní pole?

Kromě použití… woocommerce_checkout_process Kromě serverového ověřování pomocí „hooků“ můžete také přidat k polím nativní vlastnosti HTML5 pro základní kontrolu obsahu. Například: pattern Používá se v regulárních výrazech.type=”email” Používá se pro formátování e-mailových adres. Pro složitější reálné časové ověřování je nutné napsat kód v JavaScriptu/jQuery, který bude sledovat změny v hodnotách polí. blur 或 input Událost: Zkontrolujte, zda hodnoty odpovídají pravidlům, a okamžitě poskytněte zpětnou vazbu.

Lze přidat vlastní pole na stránku pro registraci uživatelů?

Možné, ale postup je trochu odlišný. Hooky pro platební pole v WooCommerce jsou určeny výhradně pro stránku pro dokončení nákupu. Pokud chcete přidat pole na stránce pro registraci u “Mého účtu”, budete muset použít další hooky, které poskytují WordPress a WooCommerce. woocommerce_register_form Přidejte pole.woocommerce_created_customer Slouží k uložení dat z polí do uživatelských metadat. Princip je podobný jako u polí určených k dokončení transakce, ale cílové „hooky“ (mechanismy pro zpracování dat) a místo uložení dat (uživatelská metadata) se liší.

Proč se moje vlastní pole nezobrazují?

Nejprve zkontrolujte, zda byl váš kód správně přidán. functions.php A také nejsou zde žádné gramatické chyby. Dále je třeba ověřit, zda jsou klíče pole správné – například, pokud jste je přidali do… $fields[‘order’] nebo $fields[‘billing’] Část. Ještě jednou zkontrolujte, zda kód jiných pluginů nebo temat nenahradil nebo neodstranil vaše pole. Nakonec zkuste smazat cache webové stránky a prohlížeče, protože staré soubory CSS/JS mohou ovlivnit jejich zobrazení.