WooCommerce串接黑貓宅急便筆記

這裡只是初期階段筆記，如果要做成在每筆訂單點了下載還要另外開發

先到宅急便網站申請API授權碼

https://www.takkyubin.com.tw/YMTContract/aspx/Login.aspx (取得印單API授權碼)

新增程式碼片段

// 在 WordPress 中使用 Shortcode 來發送 API 請求
function send_api_request_shortcode() {
    // HTML 表單和 JavaScript
    $html = '<form id="apiRequestForm">
        <label for="jsonData">請輸入 JSON 資料:</label><br>
        <textarea id="jsonData" name="jsonData" rows="4" cols="50"></textarea><br><br>
        <input type="button" value="執行" onclick="sendRequest()">
    </form>
    <script>
        // 定義 sendRequest 函數
        function sendRequest() {
            // 取得輸入的 JSON 資料
            var jsonData = document.getElementById("jsonData").value;

            // 執行 API 請求
            var xhr = new XMLHttpRequest();
            var url = "https://egs.suda.com.tw:8443/api/Egs/PrintOBT";
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 處理回應
                    var data = JSON.parse(xhr.responseText);
                    // 在這裡你可以根據需要處理回應資料，例如將其顯示在頁面上
                    console.log(data);

                    // 從回應中獲取 FileNo
                    var fileNo = data.Data.FileNo;

                    // 發送下一個 API 請求
                    var downloadUrl = "https://egs.suda.com.tw:8443/api/Egs/DownloadOBT";
                    var downloadData = {
                        "CustomerId": "youid",
                        "CustomerToken": "your token",
                        "FileNo": fileNo
                    };
                    var downloadXhr = new XMLHttpRequest();
                    downloadXhr.open("POST", downloadUrl, true);
                    downloadXhr.setRequestHeader("Content-Type", "application/json");
                    downloadXhr.responseType = "blob"; // 設置回應類型為二進位資料流
                    downloadXhr.onreadystatechange = function () {
                        if (downloadXhr.readyState === 4 && downloadXhr.status === 200) {
                            // 處理回應，下載 PDF 檔案
                            var blob = new Blob([downloadXhr.response], { type: "application/pdf" });
                            var link = document.createElement("a");
                            link.href = window.URL.createObjectURL(blob);
                            link.download = "downloaded_obt.pdf";
                            link.click();
                            console.log("託運單下載成功");
                        } else if (downloadXhr.readyState === 4) {
                            // 處理錯誤
                            console.error("託運單下載失敗:", downloadXhr.responseText);
                        }
                    };
                    downloadXhr.send(JSON.stringify(downloadData));
                } else if (xhr.readyState === 4) {
                    // 處理錯誤
                    console.error("Request failed with status code:", xhr.status);
                }
            };
            xhr.send(jsonData);
        }
    </script>';

    // 回傳 HTML
    return $html;
}
add_shortcode('send_api_request', 'send_api_request_shortcode');

CustomerToken 即宅急便網站申請的API授權碼

在頁面執行shortcode

在程式碼片段新增上面的程式後，在頁面執行shortcode

[send_api_request]

完成後，在頁面就能看到一個空白輸入框，輸入框填入json值

{
    "CustomerId": "youid",
    "CustomerToken": "your token",
    "PrintType": "01",
    "PrintOBTType": "01",
    "Orders": [
        {
            "OBTNumber": "",
            "OrderId": "YourOrderId1",
            "Thermosphere": "0001",
            "Spec": "0001",
            "ReceiptLocation": "01",
            "RecipientName": "小米",
            "RecipientTel": "061234567",
            "RecipientMobile": "0912345678",
            "RecipientAddress": "台南市永華路1號",
            "SenderName": "測試公司",
            "SenderTel": "061234568",
            "SenderMobile": "0912345679",
            "SenderZipCode": "70523K",
            "SenderAddress": "台南市永華路2號",
            "ShipmentDate": "20240410",
            "DeliveryDate": "20240411",
            "DeliveryTime": "01",
            "IsFreight": "Y",
            "IsCollection": "N",
            "CollectionAmount": 0,
            "IsSwipe": "N",
            "IsDeclare": "N",
            "DeclareAmount": 0,
            "ProductTypeId": "0001",
            "ProductName": "商品名稱",
            "Memo": "備註"
        },
        {
             "OBTNumber": "",
            "OrderId": "YourOrderId2",
            "Thermosphere": "0001",
            "Spec": "0001",
            "ReceiptLocation": "01",
            "RecipientName": "大米",
            "RecipientTel": "061234569",
            "RecipientMobile": "0912345677",
            "RecipientAddress": "台南市永華路3號",
            "SenderName": "測試公司",
            "SenderTel": "061234568",
            "SenderMobile": "0912345679",
            "SenderZipCode": "70523K",
            "SenderAddress": "台南市永華路2號",
            "ShipmentDate": "20240410",
            "DeliveryDate": "20240411",
            "DeliveryTime": "01",
            "IsFreight": "Y",
            "IsCollection": "N",
            "CollectionAmount": 0,
            "IsSwipe": "N",
            "IsDeclare": "N",
            "DeclareAmount": 0,
            "ProductTypeId": "0001",
            "ProductName": "商品名稱",
            "Memo": "備註"
        }
    ]
}

執行後就會下載pdf檔

其實注意事項及備註

json在傳出跟傳入的連結，在正式環境務必要把資安做好，絕對不能在前台直接取得，避免客戶個資外流

備註：想要知道json在執行的情況，可以在瀏覽器按F12，再點選主控台即可看到交換的流程動作

上面的環境為測試環境，如果需要文件及細節可以詢問宅急便的工程師，原則上我也只是起個頭，要做出正式的流程，是要能做到在管理訂單時可以取號及下載託運單，或許不久就會有人釋出宅急便的WoooCommerce的外掛了 XD