WooCommerce の注文一覧にはクイックプレビュー画面があります。行の目のアイコンをクリックすると、請求先、配送先、注文商品を表示するウィンドウが開きます。とても便利ですが、初期状態では閲覧専用です。ステータスを変えたり注文メモを確認したりするには、プレビューを閉じて注文の編集画面を開く必要があります。
コアを正しい方法で拡張する
WooCommerce のプレビュー用テンプレートを上書きする（次の WooCommerce 更新で壊れる）のではなく、もともと用意されている 2 つの公式拡張ポイントを使いました。プレビューが受け取るデータに情報を追加できるフィルター woocommerce_admin_order_preview_get_order_details と、プレビューの Underscore.js テンプレートの最後で実行され、同じデータにアクセスできるマークアップを追加できるアクション woocommerce_admin_order_preview_end です。
この 2 つのフックを組み合わせて、次のものを追加しました。
- 保存ボタン付きのステータスのドロップダウン。小さな AJAX ハンドラーにつながっており、注文を更新するだけでなく、重要なことにプレビューだけでなく一覧の該当行も更新するため、閉じた後に一覧に古いステータスが残りません。
wc_get_order_notes()で取得した社内向け注文メモのスクロール可能な一覧。注文の編集画面と同じく、新しいものから表示します。- 別の記事で紹介している、WhatsApp で配送業者に引き渡すボタンも、このプレビュー画面にあります。
標準機能のように見せる
いちばん難しかったのは機能ではなく、追加部分が後付けに見えないよう、WooCommerce の見た目のリズムに十分近づけることでした。このプレビューのためだけに新しいデザインを作るのではなく、WooCommerce が「Billing details」パネルで使っている余白、見出しのスタイル、間隔に合わせました。その結果、プラグイン作者が下にホチキス留めしたおまけではなく、プレビュー画面そのものの延長に見えるようになりました。
ポイントのまとめ
- このプレビュー画面向けの公式フックは、テンプレートを上書きしなくて済むように用意されています。それを使えば、カスタマイズは更新に強くなります。
- 管理画面での AJAX 更新は、ユーザーが操作したコントロールだけでなく、変更されたデータが表示されているすべての場所に反映させる必要があります。そうしないと、画面が気づかないうちに古くなります。
- プラットフォーム自身のコンポーネントと見た目をそろえることは、おまけではなく本当のデザイン上の判断です。それこそがカスタム機能を信頼できるものにします。
関連記事：スマートフォンで表示する列を管理する、注文後に商品のバリエーションを変更する。
ご自身の WooCommerce や WordPress の管理画面で同じような制約にお困りですか？ご相談ください。ArtinTech Solution はまさにこうしたストア向けのカスタムツールを開発しています。