Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WooCommerce
Změny funkčnosti a ovlivňování dat
Vladislav Musílek
Toret.cz
Musilda.cz
vladislav.musilek@toret.cz
@vladamusi...
Obsah přednášky
1. WooCommerce všeobecně
2. Funkce a třídy
3. Systém šablon
4. Proces objednávky
5. Administrace
WooCommerce
Woocommerce je WordPress plugin
Pro fungování potřebuje WordPress
Systém v systému
Pluginy pro plugin
Mnoho ak...
Funkčnost WooCommerce
WooComerce je zcela zdarma a v základu obsahuje následující prvky:
Vytváření, zobrazování a správu p...
Rozšiřitelnost WooCommerce
WooCommerce obsahuje neuvěřitelně rozsáhlý systém akcí a filtrů, které
můžete použít pro upravu...
Pluginy pro WooCommerce
Díky akcím a filtrům, jenž jsou k dispozici ostatním vývojářům, existuje velké
množství pluginů, k...
Šablony pro WooCommerce
V první řadě je třeba říct, že nic, jako theme pro WooCommerce neexistuje.
Jedná se vždy o WordPre...
Init WooCommerce
Inicializace WooCommerce probíhá pomocí funkce WC(). Tato funkce volá
instanci třídy WooCommerce.
Kód fun...
Init WooCommerce
Je potřeba říci, že funkce WC(), je ve WooCommerce od verze 2.1, dřívější
verze používaly globální proměn...
Init WooCommerce
Třída WooCommerce má __construct, který obsahuje tři metody a jeden
hook.
$this->define_constants();
$thi...
Init WooCommerce
Další důležitá metoda, je pro nás init(), jenž vytvoří objekty pro produkt,
objednávku, země, integraci, ...
Funkce a třídy
Kompletně celé jádro WooCommerce a jeho soubory, jsou uloženy ve
složce includes.
Složka však není rozdělen...
Funkce a třídy
Vyjímkou je soubor wc-template-hooks, ve kterém jsou přiřazeny funkce,
jednotlivým hookům, použitých v defa...
Funkce
Přestože je k dispozici řada objektů, jsou určité chvíle, kdy je jednodušší,
použít připravené funkce. Jsou sestave...
Funkce
Příkladem může být funkce wc_get_product_variation_attributes, která
vypíše seznam vlastností, použitých, pro konkr...
Abstraktní třídy
Abstraktní třídy jsou ve složce abstracts a je jich celkem osm. Bez nadsázky
se dá říci, že jsou pro vás ...
Třídy produktu
Třídy produktů vycházejí z abstraktí přídy abstract-wc-product a kromě
factory, patří každá třída, typu pro...
Třídy produktu
Použití hooku z metody v třídě produktu, pro jednoduchý produkt.
Hook metody add_to_cart_text:
return apply...
Platební metody
Třídy platebních metod jsou uloženy ve složce gateways a každá podsložka
obsahuje jednu z defaultní plateb...
Platební metody
public function process_payment( $order_id ) {
$order = wc_get_order( $order_id );
$order->update_status( ...
Platební metody
public function process_payment( $order_id ) {
$order = wc_get_order( $order_id );
$order->update_status( ...
Dopravní metody
Stejně, jako platební metody, mají i dopravní metody, svou vlastní složku
shipping.
Postup vytvoření nové ...
Dopravní metody
public function calculate_shipping() {
$rate = array(
'id' => $this->id,
'label' => $this->title,
);
$this...
Třídy emailů
Ve složce emails, je třída WC_Email, z které jsou odvozené další třídy, jenž
reprezentují emaily, s kterými W...
Třídy emailů
Protože vytváříte vlastní email, nesmíte zapomenout na šablonu emailu.
Musí být umístěná ve složce šabony /wo...
Shortcody
Třídy pro shortcody, jsou jednoduchá záležitost, jedná se shortcody, jenž
vykreslují stránky košíku, pokladny a ...
Widgety
Obdobně, jako shortcody, mají i Widgety vlastní třídu WC_Widget, která
rozšiřuje třídu WordPressu WP_Widget a jedn...
Checkout
Přestože nemá vlastní složku, je třída WC_Checkout jedna z
nejdůležitějších.
80% zakázek se týká nějakým způsobem...
API
O WooCommerce API jsem mluvil na WordCampu, na Youtube najdete
video záznam z přednášky.
Zde jen uvedu, že “hlavní” tř...
Systém šablon
Jak jsem již uváděl, WooCommerce můžete sputit na jakékoliv WordPress
theme, i když to někdy bude vypadat st...
Umístění souborů
V pluginu jsou soubory umístěny ve složce templates, pokud je chceme
přesunout theme, musíme vytvořit slo...
Načítání šablony
function wc_get_template( $template_name, $args = array(),
$template_path = '', $default_path = '' ) {
if...
Načítání šablony
// Allow 3rd party plugin filter template file from their plugin.
$located = apply_filters( 'wc_get_templ...
Schéma vzhledu
To jak jsou soubory šablony WooCommerce
používany, nejlépe vystihuje tento obrázek.
V podstatě se jedná o ř...
Schéma vzhledu
Výpisy produktů
Zde je potřeba odlišit, výpis kategorie a stránku obchodu.
Stránka obchodu, je statická stránka, na kterou...
Výpisy produktů
V souboru content-product, najdete kód:
/**
* woocommerce_after_shop_loop_item_title hook.
*
* @hooked woo...
Výpisy produktů
Z něj vidíte, že do hooku 'woocommerce_after_shop_loop_item_title' jsou
zavěšeny funkce pro zobrazení rati...
Výpisy produktů
Ta vrací html pro rating a to pomocí filtru
'woocommerce_product_get_rating_html':
return apply_filters( '...
Řazení a filtrace
Pro další ukázku, jak lze ovlivňovat funkčnost šablony, jsem si vybral řazení
produktů.
V jednom z plugi...
Řazení a filtrace
add_filter( 'woocommerce_default_catalog_orderby_options', 'catalog_orderby');
add_filter( 'woocommerce_...
add_filter( 'woocommerce_get_catalog_ordering_args', 'filter_orderby', 10, 1 );
public function filter_orderby($sort_args)...
Detail produktu
Detail produktu je obdoba souboru single.php z WordPressu.
Zde je za složky templates, načítán soubor sing...
Košík
Košík je stránka, generovaná pomocí shortcódu.
Soubory jsou ve složce templates/cart.
Obsahují tabulku s výpisem pro...
Pokladna
Řekl bych, že jde o nejsložitější stránku v eshopu.
Je také generována shortcodem, ale obsahuje řadu dynamických ...
Pokladna
Často se můžete setkat s tím, že je pokladna rozdělena do několika kroků.
Ve skutečnosti se stále jedná o tu jedn...
Děkovná stránka
Děkovná stránka není vůbec stránka.
Jedná se stále o pokladnu a děkovná stránka se vygeneruje po dokončení...
Stránka účtu
Stránka je opět generována shortcodem.
Jedná se o výpis dat zákazníka, jeho objednávek a dalších informací.
J...
Proces objednávky
Proces objednávky začíná v okamžiku, kdy kliknete na Přidat do košíku.
Už při příchodu na stránku, vytvo...
Inicializace session
Jakmile návštěvník přijde na eshop, woocommerce vytvoří session, kterou
uloží do databáze. Uložená da...
Vložení do košíku
Asi nejdůležitější prvek v html kódu, je v eshopu formulář.
Na stránce produktu, to je formulář s tlačít...
Pokladna při objednávce
Při objednávce se dá pokladna rozdělit na tři části:
Pole formuláře - jedná se o dvě části - faktu...
Pokladna při objednávce
Ve filtru woocommerce_checkout_fields je uloženo pole všech polí formuláře
na pokladně. Jedna polo...
Pokladna při objednávce
Při kliknutí na Objednat, musíme pole zkontrolovat:
add_action('woocommerce_checkout_process', ‘ch...
Úprava položek košíku
Poměrně často se setkávám s požadavky, na přidání dalších options k
produktu, kdy se podle vybraného...
Úprava položek košíku
array(
'product_id' => $product_id,
'variation_id' => $variation_id,
'variation' => $variation,
'qua...
Úpravy děkovné stránky
Děkovná stránka má svůj thankyou.php soubor ve složce checkout.
V podstatě na ní lze upravit jen ht...
Vlastní děkovná stránka
add_action( 'template_redirect', 'wc_custom_redirect_after_purchase' );
function wc_custom_redirec...
WooCommerce Admin
Administrace WooCommerce se dá rozdělit do několika částí.
Je to samotné Nastavení, úpravy v rámci admin...
Setting API
API pro nastavení se nachází ve dvou třídách a to class-wc-settings a v
abstraktní třídě class-wc-settings-pag...
Úpravy nastavení
Pokud to není nezbytně nutné, měli by jste případné rozšíření nastavení,
umístit do příslušné stránky. Po...
Vlastní nastavení
Pokud v nějakém případě potřebujete mít v nastavení vlastní stránku,
využijete právě abstraktní třídu cl...
Vlastní nastavení
public function __construct() {
$this->id = 'products';
$this->label = __( 'Products', 'woocommerce' );
...
Úpravy administrace
produktů
Celá administrace produktu se skrývá v jednom metaboxu, nazvaném data
produktu. Ten je rozděl...
Úpravy administrace
produktů
Pokud chcete například, přidat další pole formuláře, pod nastavení ceny,
hned pod nastavením ...
Úpravy administrace
produktů
Jediná odlišnost je u variant produktů, kdy je třeba brát v potaz, že se jedná
o více rozměrn...
function woocommerce_wp_hidden_input( $field ) {
global $thepostid, $post;
$thepostid = empty( $thepostid ) ? $post->ID : ...
Úpravy objednávky
Oproti produktu, je objednávka rozdělena do více metaboxů.
Detaily objednávky - fakturační adresa - doru...
Úpravy objednávky
Práce s jednotlivými položkami je trochu odličná, než u produktu, ale vše je
opět možné upravit a doplni...
Vlastní stavy objednávek
add_action( 'init', 'register_ceka_na_sklad_order_status' );
function register_ceka_na_sklad_orde...
Vlastní stavy objednávek
add_filter( 'wc_order_statuses', 'add_ceka_na_sklad_to_order_statuses' );
function add_ceka_na_sk...
Závěrem
Pokud se ponoříte do studia zdrojového kódu WooCommece, zjistíte, že
možností je daleko více a téměř vše se dá upr...
Děkuji za pozornost
Vladislav Musílek
Toret.cz
Musilda.cz
vladislav.musilek@toret.cz
@vladamusilek
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

Woocommerce úpravy funkčnosti a ovlivňování dat

Download to read offline

Vše co můžete ve Woocommerce najít a ovlivnit.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Woocommerce úpravy funkčnosti a ovlivňování dat

  1. 1. WooCommerce Změny funkčnosti a ovlivňování dat Vladislav Musílek Toret.cz Musilda.cz vladislav.musilek@toret.cz @vladamusilek
  2. 2. Obsah přednášky 1. WooCommerce všeobecně 2. Funkce a třídy 3. Systém šablon 4. Proces objednávky 5. Administrace
  3. 3. WooCommerce Woocommerce je WordPress plugin Pro fungování potřebuje WordPress Systém v systému Pluginy pro plugin Mnoho akcí a filtrů Komunita Neustálý vývoj - Rest API, WooCommerce Connect
  4. 4. Funkčnost WooCommerce WooComerce je zcela zdarma a v základu obsahuje následující prvky: Vytváření, zobrazování a správu produktů Stránku košíku, vytváření objednávek a jejich správu Základní platební a dopravní metody Správu daní Kupóny Rozesílání emailových notifikací Variantní produkty Externí produkty
  5. 5. Rozšiřitelnost WooCommerce WooCommerce obsahuje neuvěřitelně rozsáhlý systém akcí a filtrů, které můžete použít pro upravu funkčnosti a vytváření pluginů. Zároveň je vytvořen takový způsob načítání souborů šablon, že je možné udělat theme speciálně pro eshopy. Navíc obsahuje Rest API, takže je možné vytvářet eshopové aplikace.
  6. 6. Pluginy pro WooCommerce Díky akcím a filtrům, jenž jsou k dispozici ostatním vývojářům, existuje velké množství pluginů, které nějakým způsobem rozšiřují, nebo mění funkčnost WooCommerce. Některé z nich jsou sofistikované a obsáhlé, ale především na WordPress.org, jsou ke stažení pluginy, které upravují třeba jen jeden jediný hook.
  7. 7. Šablony pro WooCommerce V první řadě je třeba říct, že nic, jako theme pro WooCommerce neexistuje. Jedná se vždy o WordPress šablonu, která musí mít její náležitosti. Přestože, WooCommerce funguje na jakékoliv WordPress šabloně, jsou vytvářeny “specializované” themes, jenž jsou navrženy tak, aby WordPress nijak nepřipomínaly. Pokud chcete začít s free šablonou, kterou si upravíte pro vlastní potřebu, doporučuji stáhnout Storefront od WooThemes. Je přeložená do češtiny.
  8. 8. Init WooCommerce Inicializace WooCommerce probíhá pomocí funkce WC(). Tato funkce volá instanci třídy WooCommerce. Kód funkce function WC() { return WooCommerce::instance(); } // Global for backwards compatibility. $GLOBALS['woocommerce'] = WC();
  9. 9. Init WooCommerce Je potřeba říci, že funkce WC(), je ve WooCommerce od verze 2.1, dřívější verze používaly globální proměnnou $woocommerce. Pokud tedy najdete na internetu návod, nebo snippet, kde se používá: global $woocommerce je to zastaralé. Avšak, stále je proměnná přítomná, pro zpětnou kompatibilitou.
  10. 10. Init WooCommerce Třída WooCommerce má __construct, který obsahuje tři metody a jeden hook. $this->define_constants(); $this->includes(); $this->init_hooks(); do_action( 'woocommerce_loaded' ); Důležitá je akce ‘woocommerce_loaded’,protože v tomto hooku máte jistotu, že je instance WooCommerce vytvořena.
  11. 11. Init WooCommerce Další důležitá metoda, je pro nás init(), jenž vytvoří objekty pro produkt, objednávku, země, integraci, session a pokud jsme na frontendu, tak ještě instanci košíku a pokladny. Ukázka z kódu metody: $this->product_factory = new WC_Product_Factory(); $this->order_factory = new WC_Order_Factory(); $this->countries = new WC_Countries(); $this->integrations = new WC_Integrations(); Tím je to nejdůležitější u inicializace hotovo.
  12. 12. Funkce a třídy Kompletně celé jádro WooCommerce a jeho soubory, jsou uloženy ve složce includes. Složka však není rozdělená na na soubory tříd a soubory funkcí, vše je však čitelně pojmenováno a orientace je snadná. Všechny soubory tříd, začínají prefixem class-wc- Všechny soubory funkcí začínají prefixem wc- a končí -functions
  13. 13. Funkce a třídy Vyjímkou je soubor wc-template-hooks, ve kterém jsou přiřazeny funkce, jednotlivým hookům, použitých v defaultní šabloně. Příklad hooku pro wp_footer: add_action( 'wp_footer', 'wc_print_js', 25 ); add_action( 'wp_footer', 'woocommerce_demo_store' );
  14. 14. Funkce Přestože je k dispozici řada objektů, jsou určité chvíle, kdy je jednodušší, použít připravené funkce. Jsou sestavené, podle druhu využití a proto v souboru wc-formatting-functions, najdete funkci wc_sanitize_taxonomy_name, nebo wc_get_dimensions. Osobně doporučuji, projít především soubory pro cart, product, order a attribute. Najdete zde připravené věci, jenž by jste jinak řešili zbytečně složitě.
  15. 15. Funkce Příkladem může být funkce wc_get_product_variation_attributes, která vypíše seznam vlastností, použitých, pro konkrétní variantu produktu. Bez této funkce, by jste museli získat id nadřazeného produktu, custom fieldy varianty i rodičovského produktu, projít attributy rodičovského produktu a zjistit, které jsou použity pro varianty. Následně projít attributy varianty a odstranit ty nevalidní. Poslední krokem je vytvoření konečného pole, kde je klíčem slug attributu a hodnotou je label attributu. To vše za vás udělá tato funkce. Proto, doporučuji projí soubory funkcí, často vám pomohou vyřešit složitý problém.
  16. 16. Abstraktní třídy Abstraktní třídy jsou ve složce abstracts a je jich celkem osm. Bez nadsázky se dá říci, že jsou pro vás ty nejdůležitější třídy ve WooCommerce. Když pominu třídy pro objednávku, nebo produkt, velmi často budete používat třídy abstract-wc-payment-gateway a abstract-wc-shipping-method. Pomocí těchto tříd, umožňuje WooCommerce vytvářet nové dopravní a platební metody.
  17. 17. Třídy produktu Třídy produktů vycházejí z abstraktí přídy abstract-wc-product a kromě factory, patří každá třída, typu produkt. Odpovídající třídy má produkt simple, grouped, external, variable a variation. Dá se říci, že jednotlivé třídy, upravují funkcionalitu produktů, dle toho, o jaký typ se jedná. Například třída class-wc-product-simple, má jen čtyři metody. Jedna určuje url pro přidání do košíku, druhá text tlačítka, třetí product title a čtvrtá je určená pro seskupený produkt. Co je důležité, že každá z nich má vlastní hook. Tím lze dále zasahovat do funkcionality.
  18. 18. Třídy produktu Použití hooku z metody v třídě produktu, pro jednoduchý produkt. Hook metody add_to_cart_text: return apply_filters( 'woocommerce_product_add_to_cart_text', $text, $this ); Použití: add_filter('woocommerce_product_add_to_cart_text', 'custom_function', 10, 1); function custom_function($text){ //Zde změníme text }
  19. 19. Platební metody Třídy platebních metod jsou uloženy ve složce gateways a každá podsložka obsahuje jednu z defaultní platebních metod. Jedná se o třídy, které rozšiřují abstraktní třídu WC_Payment_Gateway a jejich nejdůležitější metody jsou init_form_fields a process_payment. První generuje formulář, s nastavením platební brány. Ta druhá, provádí samotnou platbu.
  20. 20. Platební metody public function process_payment( $order_id ) { $order = wc_get_order( $order_id ); $order->update_status( 'on-hold', __( 'Awaiting BACS payment', 'woocommerce' ) ); $order->reduce_order_stock(); WC()->cart->empty_cart(); return array( 'result' => 'success', 'redirect' => $this->get_return_url( $order ) ); }
  21. 21. Platební metody public function process_payment( $order_id ) { $order = wc_get_order( $order_id ); $order->update_status( 'on-hold', __( 'Awaiting BACS payment', 'woocommerce' ) ); $order->reduce_order_stock(); WC()->cart->empty_cart(); return array( 'result' => 'success', 'redirect' => $this->get_return_url( $order ) ); }
  22. 22. Dopravní metody Stejně, jako platební metody, mají i dopravní metody, svou vlastní složku shipping. Postup vytvoření nové dopravní metody je v postatě naprosto stejný, jako u plateb. Vytvoříte novou třídu, rozšiřující WC_Shipping_Method a nová doprava je na světě. Obdobné jsou i “důležité” metody - init_form_field a calculate_shipping. Na rozdíl od platební metody, calculate_shipping “jen” definuje cenu za dopravu.
  23. 23. Dopravní metody public function calculate_shipping() { $rate = array( 'id' => $this->id, 'label' => $this->title, ); $this->add_rate( $rate ); }
  24. 24. Třídy emailů Ve složce emails, je třída WC_Email, z které jsou odvozené další třídy, jenž reprezentují emaily, s kterými Woocommerce pracuje. V případě, že potřebujete vytvořit vlastní email, musíte do constructu vložit akce, které určí, kdy bude email odeslán. Akce musí volat metodu trigger, kde, před odesláním email, můžete nahradit zástupné řetězce z emailové šablony -> {order_date} Následně musí třída obsahovat metody get_content_html a get_content_plain.
  25. 25. Třídy emailů Protože vytváříte vlastní email, nesmíte zapomenout na šablonu emailu. Musí být umístěná ve složce šabony /woocommerce/emails/muj-email/ Šablony musí být dvě, jedna pro html verzi a druhá pro plain verzi. Bohužel se mi zatím nepodařilo přijít na postup, jak změnit načtení souboru emailu ze šablony, do pluginu.
  26. 26. Shortcody Třídy pro shortcody, jsou jednoduchá záležitost, jedná se shortcody, jenž vykreslují stránky košíku, pokladny a stránku obchodu. Každá třída definuje zobrazení stránky a pomocí třídy WC_Shortcodes, vytvoří vlastní shortcode. Vzhledem k tomu, že v šablonách existuje dostatek akcí, ještě jsem se nesetkal s nutností, zasahovat do těchto tříd.
  27. 27. Widgety Obdobně, jako shortcody, mají i Widgety vlastní třídu WC_Widget, která rozšiřuje třídu WordPressu WP_Widget a jednotlivé Widgety ji používají. Všechny widgety, které po instalaci můžete použít, jsou generovány těmito třídami a také tyto se upravují velmi málo, je jednodušší, napsat si vlastní widget.
  28. 28. Checkout Přestože nemá vlastní složku, je třída WC_Checkout jedna z nejdůležitějších. 80% zakázek se týká nějakým způsobem úpravy objednávkového procesu. A zde také najdete dvě velmi rozsáhlé metody - create_order a process_checkout. Pokud si je pozorně přečtete, zjistíte, jak celý proces kontroly pokladny a vytvoření objednávky funguje. V tuto chvíli jen uvedu, že hned na začátku metody create_order je hook woocommerce_create_order, jenž vám umožní vlastní vytvoření objednávky.
  29. 29. API O WooCommerce API jsem mluvil na WordCampu, na Youtube najdete video záznam z přednášky. Zde jen uvedu, že “hlavní” třída class-wc-api je ve složce includes a jednotlivé třídy, pro generování dat jsou ve složce api
  30. 30. Systém šablon Jak jsem již uváděl, WooCommerce můžete sputit na jakékoliv WordPress theme, i když to někdy bude vypadat strašně. Plugin však obsahuje složku templates, kde jsou uloženy všechny soubory, potřebné, pro generování jednotlivých stránek WooCommerce. Díky kontrole, existence souboru, ve složce používané WordPress theme, je možné soubory upravovat, bez obavy, ze stráty úprav, při akrualizaci pluginu.
  31. 31. Umístění souborů V pluginu jsou soubory umístěny ve složce templates, pokud je chceme přesunout theme, musíme vytvořit složku woocommerce, kam nakopírujeme všechny soubory, co budeme upravovat. Ty soubory, co upravovat nebudeme, ty nepřesunujte. Dále je důležité dodržovat strukturu složek a názvy souborů, jinak je plugin nenajde a bude používat ty defaultní.
  32. 32. Načítání šablony function wc_get_template( $template_name, $args = array(), $template_path = '', $default_path = '' ) { if ( $args && is_array( $args ) ) { extract( $args ); } $located = wc_locate_template( $template_name, $template_path, $default_path ); if ( ! file_exists( $located ) ) { _doing_it_wrong( __FUNCTION__, sprintf( '<code>%s</code> does not exist.', $located ), '2.1' ); return; }
  33. 33. Načítání šablony // Allow 3rd party plugin filter template file from their plugin. $located = apply_filters( 'wc_get_template', $located, $template_name, $args, $template_path, $default_path ); do_action( 'woocommerce_before_template_part', $template_name, $template_path, $located, $args ); include( $located ); do_action( 'woocommerce_after_template_part', $template_name, $template_path, $located, $args ); }
  34. 34. Schéma vzhledu To jak jsou soubory šablony WooCommerce používany, nejlépe vystihuje tento obrázek. V podstatě se jedná o řadu souborů, z nichž každý obsluhuje malou část kódu a jsou skládány do sebe, podobně, jako matrjoška. Proto je také u těch co s WooCommerce začínají častý omyl, když hledají soubor stránky košíku.
  35. 35. Schéma vzhledu
  36. 36. Výpisy produktů Zde je potřeba odlišit, výpis kategorie a stránku obchodu. Stránka obchodu, je statická stránka, na kterou jsou produkty vypisovány, pomocí shortkódu. Naproti tomu kategorie produktu, je klasický archív, tak jak jej známe z WordPressu. Protože se ovlivňování vzhledu u jednotlivých prvků opakuje, popíši to jen zde.
  37. 37. Výpisy produktů V souboru content-product, najdete kód: /** * woocommerce_after_shop_loop_item_title hook. * * @hooked woocommerce_template_loop_rating - 5 * @hooked woocommerce_template_loop_price - 10 */ do_action( 'woocommerce_after_shop_loop_item_title' );
  38. 38. Výpisy produktů Z něj vidíte, že do hooku 'woocommerce_after_shop_loop_item_title' jsou zavěšeny funkce pro zobrazení ratingu a ceny. Pokud by jste si funkce vyhledali, zjistíte, že pomocí wc_get_template, načítají soubory rating a price, ze složky loop. Pokud chcete změnit pořadí načítání souborů, odregistrujete je a zaregistrujete v opačném pořadí. Když budete chtít změnit html kód, například ratignu, v souboru najdete jen volání metody z třídy produktu $rating_html = $product->get_rating_html()
  39. 39. Výpisy produktů Ta vrací html pro rating a to pomocí filtru 'woocommerce_product_get_rating_html': return apply_filters( 'woocommerce_product_get_rating_html', $rating_html, $rating ); V případě, že potřebujete upravit html, zavěsíte vlastní funkci do filtru a změníte řetězec $rating_html, dle vaší potřeby. V některých souborech html kód je, ale tam kde není, je třeba upravovat příslušné metody a funkce.
  40. 40. Řazení a filtrace Pro další ukázku, jak lze ovlivňovat funkčnost šablony, jsem si vybral řazení produktů. V jednom z pluginů jsem potřeboval mít řazení dle popularity produktů.
  41. 41. Řazení a filtrace add_filter( 'woocommerce_default_catalog_orderby_options', 'catalog_orderby'); add_filter( 'woocommerce_catalog_orderby', 'catalog_orderby'); public function catalog_orderby( $sortby ) { $new_sort = array(); $new_sort['bestseller'] = __('Nejprodávanější', $this->plugin_slug); foreach( $sortby as $key => $item ){ $new_sort[$key] = $item; } return $new_sort; }
  42. 42. add_filter( 'woocommerce_get_catalog_ordering_args', 'filter_orderby', 10, 1 ); public function filter_orderby($sort_args){ $orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) ); switch( $orderby_value ) { case 'bestseller': $sort_args['orderby'] = 'meta_value_num'; $sort_args['order'] = 'desc'; $sort_args['meta_key'] = 'arp_product_views'; break; } return $sort_args; }
  43. 43. Detail produktu Detail produktu je obdoba souboru single.php z WordPressu. Zde je za složky templates, načítán soubor single-product, do něj content- single-product a pak soubory za složky single-product. Jak jsem již ukazoval, jednotlive soubory jsou zavěšeny pomocí hooků a její pořadí se tak dá díky tomu měnit. Změnou html v souborech, pak můžete upravit html kód detailu produktu.
  44. 44. Košík Košík je stránka, generovaná pomocí shortcódu. Soubory jsou ve složce templates/cart. Obsahují tabulku s výpisem produktů v košíku, součet ceny, kalkulátor dopravy a formulář, pro použití kupónu. Od verze Woocommerce 2.6, bude stránka košíku aktualizovat data, pomocí AJAXU, takže nebude docázet k refreshnutí stránky.
  45. 45. Pokladna Řekl bych, že jde o nejsložitější stránku v eshopu. Je také generována shortcodem, ale obsahuje řadu dynamických prvků. Na pokladně máte dva formuláře, pro adresy, výběr dopravy, souhrn objednávky a výběr platební metody. Asi nejobsáhlejší soubor, je rewiev-order a do něj jsou ostatní soubory poskládány.
  46. 46. Pokladna Často se můžete setkat s tím, že je pokladna rozdělena do několika kroků. Ve skutečnosti se stále jedná o tu jednu samou stránkou, jen upravenou pomocí js a css, tak aby vypadala, jako více stránek. Tento postup nedoporučuji, protože často se setkávám s tím, že kodér, nebo programátor změní html strukturu a část pokladny nefunguje. Nebo se neaktualizují data, které si klient přál zobrazit na souhrnu objednávky.
  47. 47. Děkovná stránka Děkovná stránka není vůbec stránka. Jedná se stále o pokladnu a děkovná stránka se vygeneruje po dokončení objednávky. Obsahuje hook woocommerce_thankyou_page, který používá řada pluginů. Existuje plugin, který se jmenuje Custom ThankYou Page, ale ten tento hook neobsahuje a některé pluginy tak nefungují.
  48. 48. Stránka účtu Stránka je opět generována shortcodem. Jedná se o výpis dat zákazníka, jeho objednávek a dalších informací. Její vzhled bude od verze 2.6 odlišný, ve složce myaccount přibudou další soubory a bude možné přidávat další “podstránky” do účtu zákazníka.
  49. 49. Proces objednávky Proces objednávky začíná v okamžiku, kdy kliknete na Přidat do košíku. Už při příchodu na stránku, vytvoří WooCommerce object session a zároveň uloží koláček. Data se pak v session předávají až na pokladnu, kde jsou následně zpracovány. Po korektním zpracování, dochází k uložení objednávky a odeslání příslušných emailů.
  50. 50. Inicializace session Jakmile návštěvník přijde na eshop, woocommerce vytvoří session, kterou uloží do databáze. Uložená data jsou jako transient, s vygenerovaným hashem. V případě, že vložíte cokoliv do košíku, data se uloží také a pomocí koláčků vás eshop rozezná a v košíku vám pak zobrazí již přidané produkty. Pozor na špatně nastavenou cache, kdy pak v košíku zůstává data předchozího návštěvníka.
  51. 51. Vložení do košíku Asi nejdůležitější prvek v html kódu, je v eshopu formulář. Na stránce produktu, to je formulář s tlačítkem “Přidat do košíku”. Po kliknutí na tlačítko, dojde k vytvoření položky _data v objektu session, kam se uloží informace o produktu a množství. Důležité je rozlišovat jednoduchý a variantní produkt, html kód formuláře a vložená data do session, jsou poněkud odlišné. Na stránce košíku pak z uožených dat čerpá výpis produktů a při změně kusů, nebo použití kupónu, se _data upravují.
  52. 52. Pokladna při objednávce Při objednávce se dá pokladna rozdělit na tři části: Pole formuláře - jedná se o dvě části - fakturační a doručovací adresa. Pole se dají upravovat, odstraňovat a měnit. Výběr dopravy - zde jsou vypsány všechny dostupné dopravní metody a jejich ceny. Výběr platební metody - jako u doprav, jsou zde zbrazené aktivní platební metody. Protože se platební a dopravní metody doplňují vytovřením nových tříd, podíváme se na úpravu formuláře.
  53. 53. Pokladna při objednávce Ve filtru woocommerce_checkout_fields je uloženo pole všech polí formuláře na pokladně. Jedna položka může vypadat následovně: $fields[billing]['phone_2'] = array( 'label' => __('Phone', 'woocommerce'), 'placeholder' => _x('Phone', 'placeholder', 'woocommerce'), 'required' => true, 'class' => array('form-row-wide'), 'clear' => true );
  54. 54. Pokladna při objednávce Při kliknutí na Objednat, musíme pole zkontrolovat: add_action('woocommerce_checkout_process', ‘checkout_field_process'); function checkout_field_process() { // Check if set, if its not set add an error. if ( !is_phone($_POST['my_field_name'] )) wc_add_notice( __( 'Toto není platný telefon' ), 'error' ); }
  55. 55. Úprava položek košíku Poměrně často se setkávám s požadavky, na přidání dalších options k produktu, kdy se podle vybraného typu, mění cena produktu. Protože však, při přidání do košíku, WooCommerce přidá jen původní data produktu, je potřeba tyto ovlivnit. Můžeme však využít hook woocommerce_add_cart_item, jenž obsahuje data aktuálně vkládaného produktu. Klíč položky v poli je opět hash.
  56. 56. Úprava položek košíku array( 'product_id' => $product_id, 'variation_id' => $variation_id, 'variation' => $variation, 'quantity' => $quantity, 'data' => $product_data ) Data, která budeme potřebodat přenášet, uložíme do $product_data. Konkrétně zde je možné využít několik hooků, podle toho, čeho chceme dosáhnout.
  57. 57. Úpravy děkovné stránky Děkovná stránka má svůj thankyou.php soubor ve složce checkout. V podstatě na ní lze upravit jen html kód, pro změnu vzhledu tabulky s informacemi o objednávce. Lze však vytvořit vlastní děkovnou stránku.
  58. 58. Vlastní děkovná stránka add_action( 'template_redirect', 'wc_custom_redirect_after_purchase' ); function wc_custom_redirect_after_purchase() { global $wp; if ( is_checkout() && ! empty( $wp->query_vars['order-received'] ) ) { wp_redirect( 'http://www.yoururl.com/your-page/' ); exit; } }
  59. 59. WooCommerce Admin Administrace WooCommerce se dá rozdělit do několika částí. Je to samotné Nastavení, úpravy v rámci administrace jednotlivých produktů a nebo úpravy v rámci objednávek. Stejně, jako frontend, je i administrace protkána sítí hooků, do nichž můžete zavěšovat vlastní funkce a měnit funkčnost Woocommerce.
  60. 60. Setting API API pro nastavení se nachází ve dvou třídách a to class-wc-settings a v abstraktní třídě class-wc-settings-page. První obsahuje metody, pro práci s jednotlivými formuláři, ukládání hodnot a generování výstupu v rámci nastavení. Ta druhá se dá opět popsat, jako předloha, z které jsou následně odvozeny, jednotlivé stránky nastavení. Díky již existujícím filtrům, můžete zasahovat do funkčnosti jednotlivých již připravených stránek nastavení.
  61. 61. Úpravy nastavení Pokud to není nezbytně nutné, měli by jste případné rozšíření nastavení, umístit do příslušné stránky. Pokud budete přidávat nějaké další nastavení k produktům, příslušná třída, kde hledat hooky je class-wc-settings-products, ve složce settings. Najdete tam například metodu get_settings, která vrací předdefinované pole, s jednotlivými položkami formuláře. Pomocí return apply_filters( 'woocommerce_get_settings_' . $this->id, $settings, $current_section ); celé pole upravit a přidat nové nastavení.
  62. 62. Vlastní nastavení Pokud v nějakém případě potřebujete mít v nastavení vlastní stránku, využijete právě abstraktní třídu class-wc-settings-page, kterou rozšíříte a získáte tak vlastní stráku v nastavení. Já mám takto udělaný například plugin pro Fakturoid, protože mi nepřišlo vhodné, cpát jeho nastavení do jiné sekce. Na druhou stranu je zvláští ukládání dat do tabulky option kde co položka formuláře = jeden záznam v tabulce. V Codexu je doporučováno pro option používat pole.
  63. 63. Vlastní nastavení public function __construct() { $this->id = 'products'; $this->label = __( 'Products', 'woocommerce' ); add_filter( 'woocommerce_settings_tabs_array', array( $this, 'add_settings_page' ), 20 ); add_action( 'woocommerce_settings_' . $this->id, array( $this, 'output' ) ); add_action( 'woocommerce_settings_save_' . $this->id, array( $this, 'save' ) ); add_action( 'woocommerce_sections_' . $this->id, array( $this, 'output_sections' ) ); }
  64. 64. Úpravy administrace produktů Celá administrace produktu se skrývá v jednom metaboxu, nazvaném data produktu. Ten je rozdělen na jednotlivé taby a do nich můžete vládat doplňujcí nastavení, nebo si vytvořit vlastní tab. Pokud jste došli až sem, zjistíte, že se vše v podstatě opakuje a v třídě class-wc-meta-box-product-data, najdete několik metod, definujících kompletní html a php kód, pro vygenerování formuláře, společně s hooky pro úpravu.
  65. 65. Úpravy administrace produktů Pokud chcete například, přidat další pole formuláře, pod nastavení ceny, hned pod nastavením termínu slevy, najdete hook, před uzavíracím divem: do_action( 'woocommerce_product_options_pricing' ); do něj zavěsíte vaši funkci a pak se jen musíte postarat o sanitaci a uložení dané hodnoty.
  66. 66. Úpravy administrace produktů Jediná odlišnost je u variant produktů, kdy je třeba brát v potaz, že se jedná o více rozměrné pole a musíte tak při vytváření přidávat další úroveň pro loop varianty. Doporučuji se ještě podívat na funkce v souboru wc-meta-box-functions. Obsahuje připravené funkce pro vygenerování konkrétního typu formulářového políčka
  67. 67. function woocommerce_wp_hidden_input( $field ) { global $thepostid, $post; $thepostid = empty( $thepostid ) ? $post->ID : $thepostid; $field['value'] = isset( $field['value'] ) ? $field['value'] : get_post_meta( $thepostid, $field['id'], true ); $field['class'] = isset( $field['class'] ) ? $field['class'] : ''; echo '<input type="hidden" class="' . esc_attr( $field['class'] ) . '" name="' . esc_attr( $field['id'] ) . '" id="' . esc_attr( $field['id'] ) . '" value="' . esc_attr( $field['value'] ) . '" /> '; }
  68. 68. Úpravy objednávky Oproti produktu, je objednávka rozdělena do více metaboxů. Detaily objednávky - fakturační adresa - doručovací adresa. Položky objednávky Akce objednávky Poznámky objednávky. Z nich bych upozornil na poznámky objednávky, což jsou velmi důležitá data, ale jsou uložená jako post type v tabulce wp_posts a ne jako custom fields objednávky.
  69. 69. Úpravy objednávky Práce s jednotlivými položkami je trochu odličná, než u produktu, ale vše je opět možné upravit a doplnit, pomocí akcí a filtrů. Můžete přidávat další akce objednávky, já jsem to použil například u vlastního emailu, kdy správce obchodu, pomocí nové akce objednávky, odesílal zákazníkovi email s upozorněním, že jeho zboží bylo naskladněno. Můžete také vytvořit vlastní status objednávky, pokud vám stávající nedostačují. A jako příklad úpravy funkčnosti, jsem si zvolil právě vlastní stav objednávky.
  70. 70. Vlastní stavy objednávek add_action( 'init', 'register_ceka_na_sklad_order_status' ); function register_ceka_na_sklad_order_status() { register_post_status( 'wc-ceka-na-sklad', array( 'label' => 'Čeká na naskladnění', 'public' => true, 'exclude_from_search' => false, 'show_in_admin_all_list' => true, 'show_in_admin_status_list' => true, 'label_count' => _n_noop( 'Čeká na naskladnění <span class="count">(%s)</span>', 'Čeká na naskladnění <span class="count">(%s)</span>' ) ) ); }
  71. 71. Vlastní stavy objednávek add_filter( 'wc_order_statuses', 'add_ceka_na_sklad_to_order_statuses' ); function add_ceka_na_sklad_to_order_statuses( $order_statuses ) { $new_order_statuses = array(); foreach ( $order_statuses as $key => $status ) { $new_order_statuses[ $key ] = $status; if ( 'wc-processing' === $key ) { $new_order_statuses['wc-ceka-na-sklad'] = 'Čeká na sklad'; } } return $new_order_statuses; }
  72. 72. Závěrem Pokud se ponoříte do studia zdrojového kódu WooCommece, zjistíte, že možností je daleko více a téměř vše se dá upravit, pro vaše podpory. Vznikají tak například rezervační weby, postavené na Woocommerce. Na webu naleznete dokumentaci zdrojáků Woocommerce a řadů návodů a snippetů. Často tkové snippety ukazují, jak změnit nějakou hodnotu, pomocí hooku. Z vlastní zkušenosti vím, že komplexnější věci si většinou musíte vyřešit sami, ale doporučuji se podívat na blog Remi Corsona, kde nejdete zajmavé tutoriály.
  73. 73. Děkuji za pozornost Vladislav Musílek Toret.cz Musilda.cz vladislav.musilek@toret.cz @vladamusilek
  • tomasmusiol7

    Apr. 13, 2017

Vše co můžete ve Woocommerce najít a ovlivnit.

Views

Total views

1,635

On Slideshare

0

From embeds

0

Number of embeds

10

Actions

Downloads

5

Shares

0

Comments

0

Likes

1

×