http___media-x.hr_woocommerce-ucitavanje-js-i-css-skripti-samo-na-stranicama-shopa__1.xml
1.1 2.1 3.1 4.1 5.1 6.1 7.1 8.1 9.1 11.1 13.1 14.1 15.1 16.1 17.1 19.1 19.2 21.1 22.1 23.1 24.1
For one client, they want to sell only Telangana state in India so we need to show only India in countries list and Telangana in states list. Since we can choose ‘selling locations’ from woocommerce settings, selecting only India was not a problem. now we need to show only Telangana in states list, for that, you can use following code add following code in your theme’s functions.php file add_filter( 'woocommerce_states', 'custom_woocommerce_states' ); function custom_woocommerce_states( $states ) { $states['IN'] = array( 'TG' => 'Telangana', return $states; Since we have only one state, obviously client wanted to show that state by default in dropdown, add below code to get that. add_filter( 'default_checkout_state', 'change_default_checkout_state' ); function change_default_checkout_state() { return 'TG'; // state code do you know any other methor or plugin can do it easily? please let me know If you sell to multiple countries and want to select a particular country by default, then add following code to functions.php add_filter( 'default_checkout_country', 'change_default_checkout_country' ); function change_default_checkout_country() { return 'IN'; // country code
1.1 1.2 2.1 2.2 3.1 4.1 5.1 6.1 7.1 7.2 8.1 9.1 9.2 9.3 10.1 11.1 11.2 11.3 12.1 13.1 14.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 22.2 23.1 23.2 24.1 25.1 26.1 26.2 27.1 27.2 28.1 29.1 29.2 30.1 30.2 31.1 32.1 33.1 33.2 33.3 33.4 33.5 34.1 34.2 34.3 35.1 36.1 37.1 38.1 38.2 39.1 40.1 41.1 41.2 41.3 42.1 43.1 44.1 44.2 45.1 46.1 46.2 47.1 48.1 49.1 50.1 51.1 51.2 52.1 53.1 54.1 55.1 55.2 55.3 56.1
Najpopularniji plugin za e-commerce baziran na WordPressu je WooCommerce – excelling eCommerce plugin. Robustan, pouzdan, proširiv (uz more besplatnih i premium ekstenzija), aktivan na preko milijun instalacija. Nakon instalacije i osnovnog podešavanja postavki WooCommerca, kreirali ste pojedinačne stranice shopa (ili dopustili da ih plugin sam kreira). Po defaultu, kreiraju se slijedeće stranice: Osnova trgovine: /shop/ Košarica: /shop/cart/ Naplata: /shop/checkout/ Moj račun: /shop/my-account/ “Problem” je to što WooCommerce učitava svoje JavaScript i CSS datoteke na SVIM postojećim stranicama. Ukoliko to želite spriječiti i želite pozivati skripte i stilove samo na onim stranicama na kojima se one koriste te na taj način ubrzati svoj web i smanjiti broj requestova, čitajte dalje. Kako provjeriti koje se skripte učitavaju na mojem webu? U web pregledniku (browseru) otvorite stranicu. Možete istovremeno pritisnuti tipke CTRL i U ili desni klik i izaberete “View page source”. U novootvorenom tabu vidjet ćete kod stranice. Koje i koliko skripti učitava WooCommerce? Na čistoj, testnoj instalaciji WordPressa (4.2.2), instalirao sam WooCommerce (inačica 2.3.11). Koristio sam defaultnu temu, TwentyFifteen. Po defaultu, WooCommerce učitava: Stilovi - – woocommerce-layout.css - – woocommerce-smallscreen.css - – woocommerce.css Skripte - – woocommerce.min.js - – add-to-cart.min.js - – jquery.cookie.min,js - – cart-fragments.min.js - – jquery.blockUI.min.js Kao što vidite, učitava se podosta skripti. Svaka od njih je jedan HTTP request i zajedno s drugim skriptama koje pokreće vaša tema i dodatni pluginovi može značajno utjecati na brzinu učitavanja vaše stranice. Testirajmo koliko ove skripte utječu na naš web. Koristit ćemo dva online alata, Google Page Speed i WebPageTest. Prije optimizacije WooCommerce skripti Rezultati na webpagetest.org otkrivaju da je za učitavanje stranice potrebno malo manje od dvije sekunde te da na webu imamo 28 requestova. Google page speed: “Vaša stranica ima ovoliko resursa blokirajućih skripti: 10 i ovoliko blokirajućih CSS resursa: 5. To dovodi do kašnjenja u generiranju vaše stranice.” Od deset skripti, pet ih je ubacio WooCommerce. Od pet blokirajućih CSS resursa, WooCommerce je zaslužan za dva (jedan dodatno smeta na mobilnim uređajima). Nakon optimizacije WooCommerce skripti Rezultati na webpagetest.org otkrivaju da smo učitavanje stranice skratili na 1.6 sekundi a broj requestova smanjili na 19. Također, smanjila se i veličina stranice s 326KB na 307KB. Google page speed: “Vaša stranica ima ovoliko resursa blokirajućih skripti: 5 i ovoliko blokirajućih CSS resursa: 3. To dovodi do kašnjenja u generiranju vaše stranice”. Kod za učitavanje JS i CSS datoteka samo na stranicama WooCommerce shopa U functions.php datoteku aktivne teme dodajte slijedeći kod: function mx_woocommerce_script_cleaner() { //prvo provjeri da li je WooCommerce aktiviran if ( function_exists( 'is_woocommerce' ) ) { // Ukloni skripte i stilove (osim na stranicama shopa) if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) { wp_dequeue_style( 'woocommerce-general'); wp_dequeue_style( 'woocommerce-layout' ); wp_dequeue_style( 'woocommerce-smallscreen' ); wp_dequeue_script( 'wc-add-to-cart' ); wp_dequeue_script( 'wc-cart-fragments' ); wp_dequeue_script( 'woocommerce' ); wp_dequeue_script( 'jquery-blockui' ); } } } add_action( 'wp_enqueue_scripts', 'mx_woocommerce_script_cleaner', 99 ); Znači, kreirali smo funkciju koja je prvo provjerila da li je WooCommerce aktivan, kako bi spriječili fatal error poruke. Zatim smo odredili da se skripte i stilovi ne koriste osim ako nismo na stranicama shopa. Ovisno o vašoj temi i postavkama weba, možda ćete imati potrebu pozivati WooCommerce skripte i stilove na još nekim stranicama. Na primjer, koristite li WooCommerce na naslovnici, u kod ćete dodati još !is_home. Koristite li ga na nakoj određenoj stranici, trebate dodati is_single( '22' ) , gdje broj 22 označava ID stranice. Kako doznati ID stranice, pročitajte ovdje. Ako želite dodati više stranica, koristite array : is_single( array( 17, 19, 1, 11 ) ). Drugim riječima, koristite tzv. Conditional tags. Više o tome na codex.wordpress.org/Conditional_Tags. Ako želite koristiti WooCommerce conditional tagove, službeni izvor je na docs.woothemes.com/document/conditional-tags Kako koristiti svoja CSS pravila za WooCommerce? Spomenuo sam ranije da WooCommerce po defaultu učitava tri stylesheet-a (CSS datoteke). Sve ih možete onemogućiti dodavanjem slijedećeg koda u functions.php teme: add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); Ako radite custom temu i želite pisati svoja CSS pravila, na ovaj način možete ukloniti defaultne stilove i koristiti svoje. Također, nećete morati brinuti o gubitku podataka (čitaj: svojih css pravila) prilikom nadogradnje WooCommerce plugina. Ako želite onemogućiti samo određene stylesheetove, npr. za mobilne uređaje, dodajte slijedeći kod u functions.php datoteku teme : // Remove each style one by one add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' ); function jk_dequeue_styles( $enqueue_styles ) { unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation return $enqueue_styles; } // Or just remove them all in one line add_filter( 'woocommerce_enqueue_styles', '__return_false' ); Konkretno, za mobilne uređaje je zaslužan woocommerce-smallscreen stylesheet. Za kraj, kako bi počeli koristiti svoja CSS pravila, potreban vam je slijedeći kod: function wp_enqueue_woocommerce_style(){ wp_register_style( 'mytheme-woocommerce', get_template_directory_uri() . '/css/woocommerce.css' ); if ( class_exists( 'woocommerce' ) ) { wp_enqueue_style( 'mytheme-woocommerce' ); } } add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' ); Ovaj kod podrazumijeva da ćete, ukoliko ne postoji, u folderu aktivne teme kreirati folder css i u njega smjestiti woocommerce.css datoteku s vašim CSS pravilima. Izvor: Woothemes Docs Zaključak Dequeue skripti i stilova koje koristi WooCommerce samo je jedan mali korak prema bržoj i manjoj web stranici. Sličan postupak možete ponoviti za sve pluginove/funkcionalnosti koje koristite samo na određenim stranicama a ne sitewide. Na primjer, kontakt forme, galerije slika, slideri i slično. Možda podaci koji ilustriraju koliko smo ubrzali i smanjili naš web na prvu ne djeluju impresivno, no optimizacija weba je proces od mnogo sitnih koraka koji na kraju rezultiraju optimalnom brzinom učitavanja i , shodno tome, boljem korisničkom iskustvu posjetitelja ali i rankingu u rezultatima pretrage.