WooCommerces ordreliste har en popup til hurtig forhåndsvisning: klik på øje-ikonet på en række, og et modalvindue viser fakturerings- og leveringsoplysninger samt ordrens varelinjer. Den er virkelig nyttig, men som standard kun til visning: at ændre en status eller tjekke ordrenoterne betyder stadig, at man skal forlade popuppen og åbne den fulde redigeringsskærm.
Udvid kernen på den rigtige måde
I stedet for at overskrive WooCommerces popup-skabelon, som går i stykker ved næste WooCommerce-opdatering, brugte vi de to officielle udvidelsespunkter, den allerede har: filteret woocommerce_admin_order_preview_get_order_details , som lader dig tilføje ekstra data til det, popuppen modtager, og woocommerce_admin_order_preview_end, en action, der kører i slutningen af popuppens Underscore.js-skabelon og lader dig tilføje markup med adgang til de samme data.
Med de to hooks sammen tilføjede vi:
- En live dropdown til status med en Gem-knap, koblet til en lille AJAX-handler, der opdaterer ordren og, vigtigst af alt, også den underliggende række i listen, ikke kun popuppen, så listen aldrig viser en forældet status, når du lukker den.
- Et feed med ordrens interne noter, som kan scrolles, hentet via
wc_get_order_notes(), vist med de nyeste først præcis som på den fulde ordreskærm. - Knappen til overlevering til fragtfirmaet via WhatsApp, beskrevet i en separat artikel, som ligger i den samme popup.
Få det til at se indbygget ud
Det sværeste var ikke funktionaliteten, men at matche WooCommerces egen visuelle rytme så tæt, at tilføjelserne ikke ser påklistrede ud. Vi matchede den padding, overskriftsstil og afstand, WooCommerce allerede bruger til panelet “Faktureringsoplysninger”, i stedet for at opfinde et nyt visuelt sprog til netop denne popup. Resultatet ser ud som en udvidelse af popuppen, ikke en plugin-tilføjelse hæftet fast nedenunder.
Det vigtigste
- WooCommerces officielle hooks til denne popup findes netop, så du ikke behøver at overskrive skabelonen; når du bruger dem, overlever tilpasningen opdateringer.
- En AJAX-opdatering i admin skal ramme alle steder, hvor de ændrede data vises, ikke kun det felt, brugeren interagerede med, ellers bliver brugerfladen stille og roligt forældet.
- Visuel sammenhæng med platformens egne komponenter er en reel designbeslutning, ikke en luksus; det er det, der får en skræddersyet tilføjelse til at virke troværdig.
Læs også: styring af, hvilke kolonner der vises på mobil, ændring af en produktvariant, efter ordren er afgivet.
Støder du på en lignende begrænsning i din egen WooCommerce- eller WordPress-admin? Lad os tale — ArtinTech Solution bygger netop den slags skræddersyede værktøjer til webshops.