{"id":5413,"date":"2020-01-26T15:11:37","date_gmt":"2020-01-26T15:11:37","guid":{"rendered":"https:\/\/musilda.cz\/?p=5413"},"modified":"2020-01-26T15:11:37","modified_gmt":"2020-01-26T15:11:37","slug":"cart-fragments-ve-woocommerce","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/cart-fragments-ve-woocommerce\/","title":{"rendered":"Cart fragments ve WooCommerce"},"content":{"rendered":"\n
Cart fragments se ve WooCommerce star\u00e1 o to, aby k\u00f3d mini ko\u0161\u00edku byl v\u017edy aktu\u00e1ln\u00ed. Co\u017e znamen\u00e1, \u017ee kdy\u017e na kliknete na p\u0159idat do ko\u0161\u00edku, zaktualizuje se v\u00e1m zobrazen\u00ed toho, co m\u00e1te v ko\u0161\u00edku, bez obnoven\u00ed str\u00e1nky. <\/p>\n\n\n\n
Mini ko\u0161\u00edk je na \u010dist\u00e9 instalaci widget, kter\u00fd um\u00edst\u00edte do sidebaru. Tv\u016frci \u0161ablon tuto funkci ale pou\u017e\u00edvaj\u00ed i k zobrazen\u00ed obsahu ko\u0161\u00edku, p\u0159i najet\u00ed na ikonku v hlavi\u010dce. Kdy\u017e na ni najedete my\u0161\u00ed, rozbal\u00ed se v\u00e1m aktu\u00e1ln\u00ed obsah. <\/p>\n\n\n\n
Z\u00e1rove\u0148 na ikonce b\u00fdv\u00e1 \u010dasto zobrazen po\u010det produkt\u016f v ko\u0161\u00edku, aby z\u00e1kazn\u00edk v\u011bd\u011bl, zda v n\u011bm n\u011bco m\u00e1, nebo ne. <\/p>\n\n\n\n
Takto vypad\u00e1 zobrazen\u00ed miniko\u0161\u00edku v sidebaru p\u0159ed p\u0159id\u00e1n\u00edm produktu:<\/p>\n\n\n\n Po p\u0159id\u00e1n\u00ed produktu:<\/p>\n\n\n\n Ze slova ajax v titulku je z\u0159ejm\u00e9, \u017ee se jedn\u00e1 o asynchronn\u00ed vol\u00e1n\u00ed javascriptu (AJAX = Asynchronous JavaScript And XML), bez nutnosti obnoven\u00ed str\u00e1nky. <\/p>\n\n\n\n Pokud na str\u00e1nce obchodu kliknete na tla\u010d\u00edtko „P\u0159idat do ko\u0161\u00edku“, pomoc\u00ed javascriptu se p\u0159idaj\u00ed do obsahu ko\u0161\u00edku data o produktu. <\/p>\n\n\n\n V souboru woocommerce\/assets\/js\/frontend\/add-to-cart.js na \u0159\u00e1dku 20 najdete k\u00f3d<\/p>\n\n\n\n Zde vid\u00edte, \u017ee p\u0159i eventu „bylo p\u0159id\u00e1no do ko\u0161\u00edku“ a „bylo odebr\u00e1no z ko\u0161\u00edku“, je pomoc\u00ed vol\u00e1n\u00ed wc-ajax=get_refreshed_fragment cart fragments aktualizov\u00e1n. <\/p>\n\n\n\n Samotn\u00fd mini ko\u0161\u00edk je vypisov\u00e1n pomoc\u00ed \u0161ablony cart\/mini-cart.php, co\u017e je soubor, kter\u00fd se pou\u017eije p\u0159i na\u010d\u00edt\u00e1n\u00ed str\u00e1nky. Je vlo\u017een do divu s t\u0159\u00eddou widget_shopping_cart_content. <\/p>\n\n\n\n A p\u0159esn\u011b tento div pou\u017e\u00edv\u00e1 WooCommerce k p\u0159ena\u010dten\u00ed aktualizovan\u00e9ho obsahu pomoc\u00ed k\u00f3du v souboru woocommerce\/assets\/frontend\/cart-fragments.js. <\/p>\n\n\n\n N\u00e1s v\u0161ak v tuto chv\u00edli zaj\u00edm\u00e1 sp\u00ed\u0161e soubor woocommerce\/includes\/class-wc-ajax.php, metoda get_refreshed_fragments. <\/p>\n\n\n\n Tam m\u016f\u017eete vid\u011bt, \u017ee obsah mini ko\u0161\u00edku ( funkce woocommerce_mini_cart() pouze vol\u00e1 \u0161ablonu zm\u00edn\u011bnou v\u00fd\u0161e ) je vlo\u017een do prom\u011bnn\u00e9 $mini_cart, jen\u017e je prohn\u00e1na filtrem woocommerce_add_to_cart_fragments. <\/p>\n\n\n\n WooComerce tak pomoc\u00ed ajaxu na\u010dte \u0161ablonu mini ko\u0161\u00edku s aktu\u00e1ln\u00edmi daty a z\u00edskan\u00e9 html p\u0159ep\u00ed\u0161e v divu widget_shopping_cart_content. <\/p>\n\n\n\n Pou\u017eit\u00ed tohoto filtru je \u010dast\u011bj\u0161\u00ed, ne\u017e by se mohlo zd\u00e1t. Proto\u017ee mini ko\u0161\u00edk je v z\u00e1kladu pouze widget, auto\u0159i e-shopov\u00fdch \u0161ablon, pou\u017e\u00edvaj\u00ed pro vytvo\u0159en\u00ed ko\u0161\u00edku v hlavi\u010dce vlastn\u00ed funkce. <\/p>\n\n\n\n K\u00f3d filtru vypad\u00e1 takto:<\/p>\n\n\n\n M\u016f\u017eete vid\u011bt, \u017ee $fragments je pole, tak\u017ee t\u011bch div\u016f, kter\u00e9 chcete aktualizovat m\u016f\u017eete p\u0159idat kolik chcete a auto\u0159i toho hojn\u011b vyu\u017e\u00edvaj\u00ed. Pokud chcete upravit cart fragments u Divi, kter\u00e1 to v z\u00e1kladu neum\u00ed\/neum\u011bla, sta\u010d\u00ed pou\u017e\u00edt tento k\u00f3d:<\/p>\n\n\n\n Do pole fragment\u016f jsme p\u0159idali a.et-cart-info a pou\u017eili funkci, kterou Divi vykresluje ikonu ko\u0161\u00edku. Nyn\u00ed se n\u00e1m bude u ikony m\u011bnit \u010d\u00edslo s po\u010dtem produkt\u016f. <\/p>\n\n\n\n Pokud se pono\u0159\u00edte do hlubin internetu a budete pro\u010d\u00edtat \u010dl\u00e1nky o zrychlen\u00ed WooCommerce, d\u0159\u00edve nebo pozd\u011bji naraz\u00edte na tip, aby jste deaktivovali wc-ajax=get_refreshed_fragment, \u017ee t\u00edm zrychl\u00edte na\u010d\u00edt\u00e1n\u00ed str\u00e1nky. <\/p>\n\n\n\n Je pravda, \u017ee zrovna zrovna fragments je jeden ze script\u016f, kter\u00e9 budou v grafu b\u00edt do o\u010d\u00ed. WooCommerce se sice sna\u017e\u00ed pou\u017e\u00edvat local storage prohl\u00ed\u017ee\u010de, ale analytick\u00e9 n\u00e1stroje, jako je Webpagetest ji nepou\u017e\u00edvaj\u00ed. <\/p>\n\n\n\n A proto\u017ee se fragments p\u0159i na\u010dten\u00ed generuj\u00ed, je rychlost z\u00e1visl\u00e1 na v\u00fdkonu stroje, jen\u017e je k dispozici. Na screenu, kter\u00fd jsem pou\u017eil a je z WebPage testu, to tak nemus\u00ed vypadat, ale e-shop je na vlastn\u00edm serveru, co\u017e nen\u00ed p\u0159\u00edpad b\u011b\u017en\u00fdch hosting\u016f. <\/p>\n\n\n\n Nap\u0159\u00edklad sd\u00edlen\u00fd hosting na nejslab\u0161\u00edm tarifu u\u017e cart fragments v testu p\u011bkn\u011b vykresl\u00ed. <\/p>\n\n\n\n<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Jak WooCommerce ajax cart fragments funguje? <\/h2>\n\n\n\n
.on( 'added_to_cart removed_from_cart', { addToCartHandler: this }, this.updateFragments );<\/code><\/pre>\n\n\n\n
Filtr woocommerce_add_to_cart_fragments <\/h2>\n\n\n\n
'fragments' => apply_filters( 'woocommerce_add_to_cart_fragments'\n array(\n 'div.widget_shopping_cart_content' =>\n '<div class=\"widget_shopping_cart_content\">' . $mini_cart . '<\/div>',\n )\n)<\/code><\/pre>\n\n\n\n
add_filter('woocommerce_add_to_cart_fragments', 'child_et_show_cart_total');\nfunction child_et_show_cart_total( $fragments ) {\n if ( ! class_exists( 'woocommerce' ) || ! WC()->cart ) {\n return;\n }\n\n $args = array(\n 'no_text' => false,\n );\n\n $items_number = WC()->cart->get_cart_contents_count();\n\n ob_start();\n\n echo sprintf(\n '<a href=\"%1$s\" class=\"et-cart-info\">\n <span>%2$s<\/span>\n <\/a>',\n esc_url( wc_get_cart_url () ),\n ( ! $args['no_text']\n ? esc_html( sprintf(\n _nx( '%1$s Item', '%1$s Items', $items_number, 'WooCommerce items number', 'Divi' ),\n number_format_i18n( $items_number )\n ) )\n : ''\n )\n );\n\n $fragments['a.et-cart-info'] = ob_get_clean();\n\n return $fragments;\n\n }<\/code><\/pre>\n\n\n\n
Cart fragments a zpomalen\u00ed WooCommerce<\/h2>\n\n\n\n
<\/figure>\n\n\n\n