22 mins read ‧ 2022/07/10 難

修改 WCMP 商店介面 & 客製化後台欄位

什麼是 WCMP

WCMP 是一款可以讓你的 Woocommerce 變身成為開店平台的 Plugin (類似 PCHOME 商店街那種)

主要特色：

1. 用戶可以申請註冊為 vendor (就是商家)
2. 每個 vendor 都會有獨立的 “商店後台” 來新增/修改/刪除產品
3. 每個 vendor 都會有自己的獨立商店
4. 網站管理員可以對 vendor 收取管理費

更多特色可以自己看 WCMP 官網

WCMP 客製化需求

1. 現有的 Vendor Page (商店頁面) 重新排版
   原本頁面資料顯示很亂

2. 修改後台輸入欄位

3. 盡可能不要動到 WCMP Plugin 本身的原始碼，這樣日後可以正常更新，不用擔心更新後會把客製化的代碼改掉

開發核心思路

我們來簡化一下業主的需求

1. 客製化 vendor page (商店版型)
2. 客製化後台輸入欄位
3. 盡可能不要動到套件原始碼

客製化 vendor page (商店版型)

通常這種需求，第一件要做的事情，就是找到這個版型在哪裡，是哪隻 php，能不能用覆寫機制 ( Override ) 蓋過去？

通常我會把整個套件用 VS Code 打開，搜尋一些關鍵的 HTML 元素來找，但通常，”文件齊全”的套件也通常會寫很清楚

所以我決定運用搜尋技巧來搜尋一下 “WCMP developer”

很快你就會找到 WCMP 的文件

這時候左邊的一個選單很快吸引我的注意力 “Overriding Templates”

BINGO!😀😀😀 這個套件有提供 Override 方法讓你去覆寫版型

這樣就好辦了，仔細閱讀完下方指示後

要覆寫 vendor page 的方式就是在你的 主題/子主題 根目錄底下創建一個叫 dc-product-vendor 的目錄，並把你要覆寫的版型從 wp-content/plugins/dc-woocommerce-multi-vendor/templates 複製到你剛剛創建的 dc-product-vendor 目錄

以 vendor page 為例，就是把 wp-content/plugins/dc-woocommerce-multi-vendor/templates/wcmp-archive-page-vendor.php 這隻 PHP 複製到 wp-content/themes/child-theme/dc-product-vendor/wcmp-archive-page-vendor.php

接下來只要客製化 wp-content/themes/child-theme/dc-product-vendor/wcmp-archive-page-vendor.php 裡面的內容就可以完成客製

⚠️這邊就是看個人的 HTML / CSS 要做怎麼樣的修改以及串接動態資料

修改後台輸入欄位

一般來說做這題我會先判斷
WCMP 有沒有提供給我對應的 hook 讓我方便新增欄位 🤔
如果沒有…
就只能 1. 硬改(修改套件原始碼) 2. 透過其他方式，例如 Javascript 方式去改

查閱 WCMP 的文件 後，果然沒有提供 Hooks

因此我決定使用添加 Javascript 的方式來修改

1. 先在寫一隻空白的 Javascript
2. 設定在後台 vendor page 編輯頁面的時候會載入

function custom_wcmp_field_enqueue($hook)
{
    // 只會在後台 vendor page 載入
    if ('wcmp_page_vendors' !== $hook) {
        return;
    }

    // 載入你的客製化 Javascript
    wp_enqueue_script('custom_wcmp_field', get_stylesheet_directory_uri() . '/assets/js/wcmp-custom-field.js', array(), '1.0.0', true);

    // 將 WordPress 數據送到前台畫面上(就是你的後台 vendor page 頁面)
    wp_localize_script('custom_wcmp_field', 'ajax_object', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'ajaxnonce' => wp_create_nonce('ajax_post_validation'),
        'vendor_id' => $_GET['ID'],
        'vendor_jobtitle' => get_user_meta($_GET['ID'], 'vendor_jobtitle', true),
        'vendor_exp' => get_user_meta($_GET['ID'], 'vendor_exp', true),
        'vendor_charge' => get_user_meta($_GET['ID'], 'vendor_charge', true),
        'vendor_other' => get_user_meta($_GET['ID'], 'vendor_other', true)
    ));
}

add_action('admin_enqueue_scripts', 'custom_wcmp_field_enqueue');

修改 Javascript 代碼

基本上就是寫新增 HTML 元素，新增 input 框，或者其他輸入方式，順利的話就會像下圖這樣

還沒完成呢！我們還沒寫儲存數據的方式！

欄位更新

因為這些欄位是我們客製化新增的，原本的 WCMP 一定沒有幫你儲存這些欄位 (是阿…WCMP又不知道你會怎麼命名欄位…)

所以我們需要寫一個 AJAX ，當用戶按下按鈕時，可以先幫你更新欄位，欄位更新完成後，再執行原本表單的送出

代碼會類似像這樣

$.ajax({
    type: "POST",
    url: ajax_object.ajaxurl,
    //dataType: "json",
    data: {
        action: "wcmp_custom_update",
        vendor_id: vendor_id,
        vendor_jobtitle: vendor_jobtitle,
        vendor_exp: vendor_exp,
        vendor_charge: vendor_charge,
        vendor_other: vendor_other
    },
    beforeSend: function () {
        $('form.vendor-preview-form').submit(function(event) {
            event.preventDefault();
            //window.history.back();
            $('#update_status').text('更新中...請勿關閉視窗...');
            console.log('before send')
        });
    },
    success: function (data) {
        // Handle the complete event
        $('form.vendor-preview-form').submit();
        $('#update_status').text('✅ 已經成功更新資料 ✅');
        console.log('submited')
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
        $('#update_status').text('⚠️ 更新資料失敗，請聯絡系統管理員 ⚠️');
        console.log('更新失敗', XMLHttpRequest, textStatus, errorThrown)
    }
});

上述的 AJAX 代碼，會把資料送到後端 PHP 的 wcmp_custom_update function

這隻 function 大概會長這樣，主要做更新用途

function wcmp_custom_update()
{
    $vendor_id = $_POST['vendor_id'];
    $vendor_jobtitle = $_POST['vendor_jobtitle'];
    $vendor_exp = $_POST['vendor_exp'];
    $vendor_charge = $_POST['vendor_charge'];
    $vendor_other = $_POST['vendor_other'];

    update_user_meta( $vendor_id, 'vendor_jobtitle', $vendor_jobtitle);
    update_user_meta( $vendor_id, 'vendor_exp', $vendor_exp);
    update_user_meta( $vendor_id, 'vendor_charge', $vendor_charge);
    update_user_meta( $vendor_id, 'vendor_other', $vendor_other);
    wp_die();
}

add_action('wp_ajax_wcmp_custom_update', 'wcmp_custom_update');

可以參考官網的教學文件 AJAX in Plugins

或者可以搜尋 “Pass JS Variable to PHP WordPress” 這類的關鍵字

Before & After