Kodning för WooCommerce: En introduktion

Detta är en nybörjarutvecklares introduktion till plugin WordPress WooCommerce. I det här inlägget kommer vi att titta på grunderna i hur WooCommerce fungerar och hur vi kan anpassa det i vårt tema eller plugin med hjälp av krokar och mallar.

Först och främst erbjuder WooCommerce stor flexibilitet för tema- och plugin-utvecklare att justera dess funktionalitet. För enkla modifieringar har du vanligtvis minst två alternativ att göra. Valet av hur du ändrar beror på hur du föredrar att arbeta, hur flexibel och läsbar din kod ska vara och hur du föredrar att fortsätta underhålla din webbplats när det kommer till uppdateringar av plugin-program (och WordPress).

Innan du börjar titta på att modifiera WooCommerces funktionalitet via kod bör du kontrollera om det du vill uppnå är möjligt genom att ändra inställningar. WooCommerce kommer med en enorm inställningssida som låter dig ändra en hel del. I nyare versioner har WooCommerce även lagt till och flyttat ytterligare inställningar till WordPress Customizer. Här kan du till exempel justera antal kolumner och justera några av kassafälten.

WooCommerce mallar

WooCommerce erbjuder ett stort utbud av mallfiler där du som temautvecklare kan åsidosätta. Sättet du gör detta är genom att göra en kopia av den ursprungliga WooCommerce-mallen till din temamapp. Och sedan gör du dina ändringar i filen i ditt tema.

Navigera till din WooCommerce-pluginmapp i /wp-content/plugins/woocommerce/. Här hittar du undermappen templates. Hela innehållet i filer (det finns mycket!) i /wp-content/plugins/woocommerce/templates/inklusive dess undermappar är alla mallfiler som du kan åsidosätta i ditt tema.

För att WooCommerce ska hitta dina modifierade mallar behöver du en undermapp i din temarotkatalog som heter woocommerce. Om ditt temas slug är "awhitepixel" bör din mapp finnas på /wp-content/themes/awhitepixel/woocommerce/. Inuti den här mappen kan du placera dina modifierade kopior av WooCommerces mallfiler. Tänk på att mallfiler som finns i undermappar måste placeras i motsvarande undermappar i din woocommerce-mapp. Till exempel; att åsidosätta WooCommerces /templates/single-product/add-to-cart/simple.phpkräver att du placerar din kopia av simple.phpi /woocommerce/single-product/add-to-cart/mappen i ditt tema.

Du kanske också har märkt att det finns många åtgärder och filter i mallarna. De flesta av dem är fyllda med do_action()s. För optimal användning av WooCommerce bör du inte ta bort någon av krokarna i mallarna. I de flesta fall kan du överväga att ändra funktionaliteten genom att använda åtgärder och filter istället för att åsidosätta mallar. Låt mig förklara varför!

Viktig anmärkning om åsidosättande av mallar och pluginuppdateringar

För en nybörjare kan en mall verka som den enklaste och mest intuitiva lösningen. Varför bråka med krokar om man direkt kan ändra mallen som ger ut det man vill ändra? Svar: Eftersom denna strategi genererar mer arbete för att hålla igång underhållet av din webbshop.

WooCommerce uppdaterar ofta, och ibland uppdaterar de en mallfil. För att hålla din webbshop uppdaterad skulle du behöva uppdatera de åsidosatta mallfilerna i ditt tema också. Du behöver vanligtvis ersätta hela mallfilen med den senaste uppdaterade filen och sedan lägga till dina ändringar igen. Detta blir snabbt mycket svårare om du inte kommer ihåg alla ändringar du gjort. Ta det från mig som har många års erfarenhet av att fixa andra utvecklares WooCommerce-mallfiler under pluginuppdateringar. Tro mig, det är inget roligt jobb att göra!

Nu när vi vet att krokar är en bättre strategi, låt oss titta på hur man går till väga.

WooCommerce krokar

WooCommerce erbjuder en enorm mängd krokar, både åtgärder och filter. Att använda krokar är faktiskt väldigt enkelt!

Med krokar kan du också ändra så mycket mer än bara mallarnas utdata. Du kan anpassa produktpriser, kassafält eller få din webshop att göra något när en produkt läggs i varukorgen.

Om du utvecklar ett plugin är hooks också den enda vägen att gå. Du kan bara åsidosätta mallar i ett tema, inte ett plugin. (Okej, det finns sätt att övervinna detta, men det är mycket ovanligt och rekommenderas inte).

Om du har tittat i några av WooCommerce-mallfilerna borde du ha sett massor av do_action(). Dessa är krokar; kontrollpunkter som du kan koppla in och lägga till din kod eller ändra en variabel. Om du är osäker på hur krokar fungerar så har jag ett inlägg som förklarar detta på djupet.

Om du vill skriva ut något, till exempel en text eller liknande, leta efter åtgärder (do_action()). Till exempel när du matar ut något i en varukorgsmall, kan du välja mellan att ansluta till woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collaterals, eller woocommerce_after_cart. Välj helt enkelt den som är placerad där du vill ha din produktion. Detta är ett exempel på att visa en text före tabellen och formuläret i kundvagnssidan:

add_action('woocommerce_before_cart', function() {
    _e('Here are the products you have added in the cart so far', 'textdomain');
});

Filter (leta efter apply_filters()) är till för att modifiera en utdata eller en variabel. En vanlig användning av filter i WooCommerce är att ändra texten "Lägg till i kundvagn" på köpknapparna. WooCommerce erbjuder flera filter för detta, så att du kan styra texten på olika sidor. Du kan till exempel anpassa texten i butiksslingan eller i en enda produktvy. Filter ger ofta flera argument för ytterligare kontroll, till exempel produktobjektet. Här är ett enkelt exempel på hur du ändrar "Lägg till i kundvagn"-texterna i en produktvy:

add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
    return __('Buy this', 'textdomain');
}, 10, 2);

Med viss kunskap om hur krokar fungerar och helt enkelt genom att titta inuti mallfilerna kan du hitta en hel del lätt föränderlig funktionalitet. Uppenbarligen erbjuder WooCommerce mycket mer avancerad modifiering, ändrade priser, betalningsmetoder, produktmodifieringar eller import, allt möjligt med hjälp av krokar.

Slutsats

Syftet med detta inlägg är att ge nybörjaren grunderna i hur man gör ändringar i WooCommerce, och konsekvenserna av hur du gör ändringarna. Jag rekommenderar alltid att använda krokar över att skriva över mallfiler, om det inte är absolut nödvändigt.

Nästa steg är att dyka in i avancerade modifieringar genom att lära känna krokarna, processerna och objekten i WooCommerce. Eftersom WooCommerce är den mest populära e-handelsplattformen som finns finns det gott om resurser och kodexempel tillgängliga på webben. Ta en titt på kategorin Woocommerce här på denna sida för mer också.