{"id":233973,"date":"2023-02-27T15:57:00","date_gmt":"2023-02-27T12:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233973"},"modified":"2022-11-11T13:30:11","modified_gmt":"2022-11-11T10:30:11","slug":"kodning-foer-woocommerce-en-introduktion","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/kodning-foer-woocommerce-en-introduktion\/","title":{"rendered":"Kodning f\u00f6r WooCommerce: En introduktion"},"content":{"rendered":"\n

Detta \u00e4r en nyb\u00f6rjarutvecklares introduktion till plugin WordPress WooCommerce<\/a>. I det h\u00e4r inl\u00e4gget kommer vi att titta p\u00e5 grunderna i hur WooCommerce fungerar och hur vi kan anpassa det i v\u00e5rt tema eller plugin med hj\u00e4lp av krokar och mallar.<\/p>\n

F\u00f6rst och fr\u00e4mst erbjuder WooCommerce stor flexibilitet f\u00f6r tema- och plugin-utvecklare att justera dess funktionalitet. F\u00f6r enkla modifieringar har du vanligtvis minst tv\u00e5 alternativ att g\u00f6ra. Valet av hur du \u00e4ndrar beror p\u00e5 hur du f\u00f6redrar att arbeta, hur flexibel och l\u00e4sbar din kod ska vara och hur du f\u00f6redrar att forts\u00e4tta underh\u00e5lla din webbplats n\u00e4r det kommer till uppdateringar av plugin-program (och WordPress).<\/p>\n

Innan du b\u00f6rjar titta p\u00e5 att modifiera WooCommerces funktionalitet via kod b\u00f6r du kontrollera om det du vill uppn\u00e5 \u00e4r m\u00f6jligt genom att \u00e4ndra inst\u00e4llningar. WooCommerce kommer med en enorm inst\u00e4llningssida som l\u00e5ter dig \u00e4ndra en hel del. I nyare versioner har WooCommerce \u00e4ven lagt till och flyttat ytterligare inst\u00e4llningar till WordPress Customizer. H\u00e4r kan du till exempel justera antal kolumner och justera n\u00e5gra av kassaf\u00e4lten.<\/p>\n

WooCommerce mallar<\/h2>\n

WooCommerce erbjuder ett stort utbud av mallfiler d\u00e4r du som temautvecklare kan \u00e5sidos\u00e4tta. S\u00e4ttet du g\u00f6r detta \u00e4r genom att g\u00f6ra en kopia av den ursprungliga WooCommerce-mallen till din temamapp. Och sedan g\u00f6r du dina \u00e4ndringar i filen i ditt tema.<\/p>\n

Navigera till din WooCommerce-pluginmapp i \/wp-content\/plugins\/woocommerce\/<\/code>. H\u00e4r hittar du undermappen templates<\/code>. Hela inneh\u00e5llet i filer (det finns mycket!) i \/wp-content\/plugins\/woocommerce\/templates\/<\/code>inklusive dess undermappar \u00e4r alla mallfiler som du kan \u00e5sidos\u00e4tta i ditt tema.<\/p>\n

F\u00f6r att WooCommerce ska hitta dina modifierade mallar beh\u00f6ver du en undermapp i din temarotkatalog som heter woocommerce<\/code>. Om ditt temas slug \u00e4r "awhitepixel" b\u00f6r din mapp finnas p\u00e5 \/wp-content\/themes\/awhitepixel\/woocommerce\/<\/code>. Inuti den h\u00e4r mappen kan du placera dina modifierade kopior av WooCommerces mallfiler. T\u00e4nk p\u00e5 att mallfiler som finns i undermappar m\u00e5ste placeras i motsvarande undermappar i din woocommerce-mapp. Till exempel; att \u00e5sidos\u00e4tta WooCommerces \/templates\/single-product\/add-to-cart\/simple.php<\/code>kr\u00e4ver att du placerar din kopia av simple.php<\/code>i \/woocommerce\/single-product\/add-to-cart\/<\/code>mappen i ditt tema.<\/p>\n

Du kanske ocks\u00e5 har m\u00e4rkt att det finns m\u00e5nga \u00e5tg\u00e4rder och filter i mallarna. De flesta av dem \u00e4r fyllda med do_action()<\/code>s. F\u00f6r optimal anv\u00e4ndning av WooCommerce b\u00f6r du inte ta bort n\u00e5gon av krokarna i mallarna. I de flesta fall kan du \u00f6verv\u00e4ga att \u00e4ndra funktionaliteten genom att anv\u00e4nda \u00e5tg\u00e4rder och filter ist\u00e4llet f\u00f6r att \u00e5sidos\u00e4tta mallar. L\u00e5t mig f\u00f6rklara varf\u00f6r!<\/p>\n

Viktig anm\u00e4rkning om \u00e5sidos\u00e4ttande av mallar och pluginuppdateringar<\/h3>\n

F\u00f6r en nyb\u00f6rjare kan en mall verka som den enklaste och mest intuitiva l\u00f6sningen. Varf\u00f6r br\u00e5ka med krokar om man direkt kan \u00e4ndra mallen som ger ut det man vill \u00e4ndra? Svar: Eftersom denna strategi genererar mer arbete f\u00f6r att h\u00e5lla ig\u00e5ng underh\u00e5llet av din webbshop.<\/p>\n

WooCommerce uppdaterar ofta, och ibland uppdaterar de en mallfil. F\u00f6r att h\u00e5lla din webbshop uppdaterad skulle du beh\u00f6va uppdatera de \u00e5sidosatta mallfilerna i ditt tema ocks\u00e5. Du beh\u00f6ver vanligtvis ers\u00e4tta hela mallfilen med den senaste uppdaterade filen och sedan l\u00e4gga till dina \u00e4ndringar igen. Detta blir snabbt mycket sv\u00e5rare om du inte kommer ih\u00e5g alla \u00e4ndringar du gjort. Ta det fr\u00e5n mig som har m\u00e5nga \u00e5rs erfarenhet av att fixa andra utvecklares WooCommerce-mallfiler under pluginuppdateringar. Tro mig, det \u00e4r inget roligt jobb att g\u00f6ra!<\/p>\n

Nu n\u00e4r vi vet att krokar \u00e4r en b\u00e4ttre strategi, l\u00e5t oss titta p\u00e5 hur man g\u00e5r till v\u00e4ga.<\/p>\n

WooCommerce krokar<\/h2>\n

WooCommerce erbjuder en enorm m\u00e4ngd krokar, b\u00e5de \u00e5tg\u00e4rder och filter. Att anv\u00e4nda krokar \u00e4r faktiskt v\u00e4ldigt enkelt!<\/p>\n

Med krokar kan du ocks\u00e5 \u00e4ndra s\u00e5 mycket mer \u00e4n bara mallarnas utdata. Du kan anpassa produktpriser, kassaf\u00e4lt eller f\u00e5 din webshop att g\u00f6ra n\u00e5got n\u00e4r en produkt l\u00e4ggs i varukorgen.<\/p>\n

Om du utvecklar ett plugin \u00e4r hooks ocks\u00e5 den enda v\u00e4gen att g\u00e5. Du kan bara \u00e5sidos\u00e4tta mallar i ett tema, inte ett plugin. (Okej, det finns s\u00e4tt att \u00f6vervinna detta, men det \u00e4r mycket ovanligt och rekommenderas inte).<\/p>\n

Om du har tittat i n\u00e5gra av WooCommerce-mallfilerna borde du ha sett massor av do_action()<\/code>. Dessa \u00e4r krokar; kontrollpunkter som du kan koppla in och l\u00e4gga till din kod eller \u00e4ndra en variabel. Om du \u00e4r os\u00e4ker p\u00e5 hur krokar fungerar s\u00e5 har jag ett inl\u00e4gg som f\u00f6rklarar<\/a> detta p\u00e5 djupet.<\/p>\n

Om du vill skriva ut n\u00e5got, till exempel en text eller liknande, leta efter \u00e5tg\u00e4rder (do_action()<\/code>). Till exempel n\u00e4r du matar ut n\u00e5got i en varukorgsmall, kan du v\u00e4lja mellan att ansluta till woocommerce_before_cart<\/code>, woocommerce_before_cart_table<\/code>, woocommerce_before_cart_contents<\/code>, woocommerce_cart_contents<\/code>, woocommerce_cart_actions<\/code>, woocommerce_after_cart_contents<\/code>, woocommerce_after_cart_table<\/code>, woocommerce_cart_collaterals<\/code>, eller woocommerce_after_cart<\/code>. V\u00e4lj helt enkelt den som \u00e4r placerad d\u00e4r du vill ha din produktion. Detta \u00e4r ett exempel p\u00e5 att visa en text f\u00f6re tabellen och formul\u00e4ret i kundvagnssidan:<\/p>\n

add_action('woocommerce_before_cart', function() {\n    _e('Here are the products you have added in the cart so far', 'textdomain');\n});<\/code><\/pre>\n
Filter (leta efter apply_filters()<\/code>) \u00e4r till f\u00f6r att modifiera en utdata eller en variabel. En vanlig anv\u00e4ndning av filter i WooCommerce \u00e4r att \u00e4ndra texten "L\u00e4gg till i kundvagn" p\u00e5 k\u00f6pknapparna. WooCommerce erbjuder flera filter f\u00f6r detta, s\u00e5 att du kan styra texten p\u00e5 olika sidor. Du kan till exempel anpassa texten i butiksslingan eller i en enda produktvy. Filter ger ofta flera argument f\u00f6r ytterligare kontroll, till exempel produktobjektet. H\u00e4r \u00e4r ett enkelt exempel p\u00e5 hur du \u00e4ndrar "L\u00e4gg till i kundvagn"-texterna i en produktvy:<\/p>\n
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {\n    return __('Buy this', 'textdomain');\n}, 10, 2);<\/code><\/pre>\n
Med viss kunskap om hur krokar fungerar och helt enkelt genom att titta inuti mallfilerna kan du hitta en hel del l\u00e4tt f\u00f6r\u00e4nderlig funktionalitet. Uppenbarligen erbjuder WooCommerce mycket mer avancerad modifiering, \u00e4ndrade priser, betalningsmetoder, produktmodifieringar eller import, allt m\u00f6jligt med hj\u00e4lp av krokar.<\/p>\n
Slutsats<\/h2>\n
Syftet med detta inl\u00e4gg \u00e4r att ge nyb\u00f6rjaren grunderna i hur man g\u00f6r \u00e4ndringar i WooCommerce, och konsekvenserna av hur du g\u00f6r \u00e4ndringarna. Jag rekommenderar alltid att anv\u00e4nda krokar \u00f6ver att skriva \u00f6ver mallfiler, om det inte \u00e4r absolut n\u00f6dv\u00e4ndigt.<\/p>\n
N\u00e4sta steg \u00e4r att dyka in i avancerade modifieringar genom att l\u00e4ra k\u00e4nna krokarna, processerna och objekten i WooCommerce. Eftersom WooCommerce<\/a> \u00e4r den mest popul\u00e4ra e-handelsplattformen som finns finns det gott om resurser och kodexempel tillg\u00e4ngliga p\u00e5 webben. Ta en titt p\u00e5 kategorin Woocommerce<\/a> h\u00e4r p\u00e5 denna sida f\u00f6r mer ocks\u00e5.<\/p>\n
Inspelningsk\u00e4lla:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
En utvecklares introduktion till grunderna i WordPress WooCommerce; hur det fungerar och hur du kan anpassa dess funktionalitet i ditt tema eller plugin.<\/p>\n","protected":false},"author":1,"featured_media":239407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[901,848,901,1110,818,818,848,858,858,868,868],"tags":[1173],"class_list":["post-233973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-koda","category-handledningar","category-n-a","category-plugins-3","category-woocommerce-9","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=233973"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/233973\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/239407"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=233973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=233973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=233973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}