woocommerce úpravy funkčnosti a ovlivňování dat
TRANSCRIPT
![Page 2: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/2.jpg)
Obsah přednášky1. WooCommerce všeobecně2. Funkce a třídy3. Systém šablon4. Proces objednávky5. Administrace
![Page 3: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/3.jpg)
WooCommerceWoocommerce 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
![Page 4: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/4.jpg)
Funkčnost WooCommerceWooComerce 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ávuZákladní platební a dopravní metodySprávu daníKupónyRozesílání emailových notifikacíVariantní produktyExterní produkty
![Page 5: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/5.jpg)
Rozšiřitelnost WooCommerceWooCommerce 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.
![Page 6: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/6.jpg)
Pluginy pro WooCommerceDí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.
![Page 7: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/7.jpg)
Šablony pro WooCommerceV 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.
![Page 8: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/8.jpg)
Init WooCommerceInicializace 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();
![Page 9: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/9.jpg)
Init WooCommerceJe 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.
![Page 10: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/10.jpg)
Init WooCommerceTří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.
![Page 11: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/11.jpg)
Init WooCommerceDalší 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.
![Page 12: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/12.jpg)
Funkce a třídyKompletně 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
![Page 13: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/13.jpg)
Funkce a třídyVyjí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' );
![Page 14: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/14.jpg)
FunkcePř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ě.
![Page 15: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/15.jpg)
FunkcePří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.
![Page 16: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/16.jpg)
Abstraktní třídyAbstraktní 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.
![Page 17: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/17.jpg)
Třídy produktuTří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.
![Page 18: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/18.jpg)
Třídy produktuPouž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 }
![Page 19: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/19.jpg)
Platební metodyTří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.
![Page 20: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/20.jpg)
Platební metodypublic 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 )
);}
![Page 21: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/21.jpg)
Platební metodypublic 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 )
);}
![Page 22: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/22.jpg)
Dopravní metodyStejně, 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.
![Page 23: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/23.jpg)
Dopravní metodypublic function calculate_shipping() {
$rate = array('id' => $this->id,'label' => $this->title,
);$this->add_rate( $rate );
}
![Page 24: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/24.jpg)
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.
![Page 25: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/25.jpg)
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.
![Page 26: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/26.jpg)
ShortcodyTří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.
![Page 27: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/27.jpg)
WidgetyObdobně, 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.
![Page 28: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/28.jpg)
CheckoutPř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.
![Page 29: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/29.jpg)
APIO 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
![Page 30: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/30.jpg)
Systém šablonJak 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.
![Page 31: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/31.jpg)
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í.
![Page 32: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/32.jpg)
Načítání šablonyfunction 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;}
![Page 33: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/33.jpg)
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 );}
![Page 34: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/34.jpg)
Schéma vzhleduTo jak jsou soubory šablony WooCommercepouží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ánydo 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.
![Page 35: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/35.jpg)
Schéma vzhledu
![Page 36: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/36.jpg)
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.
![Page 37: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/37.jpg)
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' );
![Page 38: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/38.jpg)
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()
![Page 39: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/39.jpg)
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.
![Page 40: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/40.jpg)
Řazení a filtracePro 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ů.
![Page 41: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/41.jpg)
Řazení a filtraceadd_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; }
![Page 42: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/42.jpg)
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; }
![Page 43: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/43.jpg)
Detail produktuDetail 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.
![Page 44: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/44.jpg)
KošíkKoší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.
![Page 45: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/45.jpg)
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.
![Page 46: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/46.jpg)
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.
![Page 47: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/47.jpg)
Děkovná stránkaDě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í.
![Page 48: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/48.jpg)
Stránka účtuStrá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.
![Page 49: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/49.jpg)
Proces objednávkyProces 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ů.
![Page 50: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/50.jpg)
Inicializace sessionJakmile 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.
![Page 51: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/51.jpg)
Vložení do košíkuAsi 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í.
![Page 52: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/52.jpg)
Pokladna při objednávcePř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.
![Page 53: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/53.jpg)
Pokladna při objednávceVe 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 );
![Page 54: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/54.jpg)
Pokladna při objednávcePř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' );
}
![Page 55: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/55.jpg)
Úprava položek košíkuPomě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.
![Page 56: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/56.jpg)
Úprava položek košíkuarray(
'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.
![Page 57: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/57.jpg)
Úpravy děkovné stránkyDě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.
![Page 58: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/58.jpg)
Vlastní děkovná stránkaadd_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;
}}
![Page 59: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/59.jpg)
WooCommerce AdminAdministrace 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.
![Page 60: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/60.jpg)
Setting APIAPI 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í.
![Page 61: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/61.jpg)
Ú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í.
![Page 62: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/62.jpg)
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.
![Page 63: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/63.jpg)
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' ) );}
![Page 64: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/64.jpg)
Ú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.
![Page 65: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/65.jpg)
Ú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.
![Page 66: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/66.jpg)
Ú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
![Page 67: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/67.jpg)
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'] ) . '" /> ';}
![Page 68: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/68.jpg)
Úpravy objednávkyOproti produktu, je objednávka rozdělena do více metaboxů.
Detaily objednávky - fakturační adresa - doručovací adresa.Položky objednávkyAkce objednávkyPozná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.
![Page 69: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/69.jpg)
Úpravy objednávkyPrá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.
![Page 70: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/70.jpg)
Vlastní stavy objednávekadd_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>' ) ) );}
![Page 71: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/71.jpg)
Vlastní stavy objednávekadd_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;}
![Page 72: Woocommerce úpravy funkčnosti a ovlivňování dat](https://reader035.vdocuments.pub/reader035/viewer/2022070600/58abef611a28ab504e8b6147/html5/thumbnails/72.jpg)
ZávěremPokud 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.