{"id":78,"date":"2026-01-29T15:48:34","date_gmt":"2026-01-29T15:48:34","guid":{"rendered":"https:\/\/delphica.store\/tracking\/"},"modified":"2026-01-29T15:48:34","modified_gmt":"2026-01-29T15:48:34","slug":"tracking","status":"publish","type":"page","link":"https:\/\/delphica.store\/en\/tracking\/","title":{"rendered":"Tracking"},"content":{"rendered":"<style>\n    body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {\n        max-width: 1000px;\n    }\n\n    .col2-set{\n        padding: 0.5rem;\n    }\n    #tracking-form ,#tracking-result{\n        width: 100%;\n    }\n    form.checkout{\n        display: block !important;\n    }\n    \n    \n    .tracking-table{\n        width: 100%;\n    }\n    .tracking-table th{\n        font-size: 18px;\n        text-align: center;\n        background-color: #f7f7f7;    \n    }\n    .tracking-table td{\n        font-size: 14px;\n        padding-left: 10px !important;\n        padding-right: 10px !important;\n    }\n    .tracking-table td,.tracking-table th{\n        padding: 10px 0;\n    }\n\n.tracking-table td:first-child {\n    background: #f4f4f4;\n}\n\n.tracking-address {\n    display: inline-flex;\n    width: 100%; \/* Set initial width to 50% *\/\n    align-items: center;\n    justify-content: space-between;\n}\n\n.track-inline {\n    border-radius: 3px;\n}\n\n.track-inline p {\n    margin: 0;\n}\n\n.textprimary {\n    font-size: 1rem;\n    line-height: 2.5rem;\n    font-weight: 600;\n}\n\n.textseccond {\n    font-size: 1rem;\n    line-height: 1.5rem;\n}\n\n.tracking-header {\n    display: inline-flex;\n    justify-content: space-between; \/* Mengatur jarak antara elemen *\/\n    width: 100%;\n}\n\n.tracking-header p {\n    margin: 0;\n    font-size: 1.4rem;\n    font-weight: 600;\n}\n\n.tracking-details {\n    background: #f7f7f7;\n    border-radius: 0.5rem;\n    padding: 1.5rem;\n    margin-bottom: 1rem;\n}\n\n.tracking-details p {\n    margin: 0;\n}\n\n.borderdashed {\n    border-bottom-width: 0rem;\n    border-style: dashed;\n    border-color: #7c757e;\n    margin: 0.5rem 0;\n}\n\n.tracking-courier {\n    margin: 1rem 0;\n}\n\n.tracking-courier .textseccond {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: .25rem;\n}\n    \n<\/style>\n\n<div style=\"min-height: 40vh\" class=\"woocommerce woocommerce-page\">\n    <form style=\"width: 100%\" name=\"checkout\" method=\"post\" class=\"checkout woocommerce-checkout\"  enctype=\"multipart\/form-data\" novalidate=\"novalidate\">\n        <div class=\"col2-set\" id=\"\">\n            <h3 >Pesanan Anda<\/h3>\n            <div class=\"woocommerce-checkout-review-order\">\n\n\n                <p class=\"form-row form-row-wide\" id=\"billing_company_field\" data-priority=\"30\">\n                    <label for=\"billing_company\" class=\"\">Nomor Resi <span style=\"color:red;\">*<\/span><\/label>\n                    <span class=\"woocommerce-input-wrapper\">\n                        <input type=\"text\" class=\"input-text\" name=\"order_number\" placeholder=\"Masukan Nomor Resi atau Nomor Order ...\" value=\"\" autocomplete=\"organization\">\n                    <\/span>\n                <\/p>\n\n                <button style=\"width: 100%\" type=\"button\" onclick=\"trackOrder()\" class=\"button track-btn alt wp-element-button track-btn\">Lacak Pesanan<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"col2-set\" id=\"tracking-result\">\n            <div style=\"margin-top: 2rem\"><\/div>\n            <div class=\"state-blank\">\n                <div style=\"text-align: center\">\n                    <span style=\"font-weight: 700\">Untuk mendapatkan informasi pesanan anda<br>Klik Track Pesanan<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"state-err kj-hidden\">\n                <div style=\"text-align: center; margin-top: 4rem\">\n                    <span style=\"font-weight: 700\" id=\"err_msg\">Order tidak ditemukan<\/span>\n                <\/div>\n            <\/div>\n            <div class=\"state-loading kj-hidden\">\n                <div style=\"display: flex\">\n                    <div style=\"margin: 3rem auto\">\n                        <div class=\"kj-loader\"><\/div>\n                    <\/div>                    \n                <\/div>\n            <\/div>\n            <div class=\"state-success kj-hidden\">\n                \n                 <!-- Load Ajax -->\n                <div class=\"tracking-details\"><\/div>\n\n                <table class=\"tracking-table\">\n                    <thead>\n                        <tr>\n                            <th width=\"20%\">Tanggal<\/th>\n                            <th>Status<\/th>\n                        <\/tr>                    \n                    <\/thead>\n                    <tbody>\n                        <tr>\n                            <td>2021-07-14 16=>00=>00<\/td>\n                            <td>Delivered to BAGUS | 14-07-2021 16=>00 | YOGYAKARTA <\/td>\n                        <\/tr>\n                        <tr>\n                            <td>2021-07-14 16=>00=>00<\/td>\n                            <td>Delivered to BAGUS | 14-07-2021 16=>00 | YOGYAKARTA <\/td>\n                        <\/tr>\n                        <tr>\n                            <td>2021-07-14 16=>00=>00<\/td>\n                            <td>Delivered to BAGUS | 14-07-2021 16=>00 | YOGYAKARTA <\/td>\n                        <\/tr>\n                        <tr>\n                            <td>2021-07-14 16=>00=>00<\/td>\n                            <td>Delivered to BAGUS | 14-07-2021 16=>00 | YOGYAKARTA <\/td>\n                        <\/tr>\n                        <tr>\n                            <td>2021-07-14 16=>00=>00<\/td>\n                            <td>Delivered to BAGUS | 14-07-2021 16=>00 | YOGYAKARTA <\/td>\n                        <\/tr>\n                        <tr>\n                            <td>2021-07-14 16=>00=>00<\/td>\n                            <td>Delivered to BAGUS | 14-07-2021 16=>00 | YOGYAKARTA <\/td>\n                        <\/tr>\n                    <\/tbody>\n                <\/table>\n            <\/div>\n        <\/div>\n    <\/form>\n<\/div>\n\n<script type=\"text\/javascript\">\n    function trackOrder(){\n\n        hideStateComponent()\n        jQuery('.state-loading').removeClass('kj-hidden')\n\n        wp.ajax.post( \"kj-tracking-ajax\", {\n            order_number:jQuery('[name=\"order_number\"]').val()\n        }).done(function(response) {  \n                              \n            hideStateComponent()\n            jQuery('.track-btn').removeClass('kj-hidden')\n\n            if (response.status === 200){\n                    jQuery('.state-success').removeClass('kj-hidden')\n\n                    const trackingHistories = response?.data?.histories ?? [];\n                    const trackingDetails = response?.data?.details ?? [];\n                    const trackingOrderNumber = response?.data?.number_order ?? [];\n\n                    jQuery('.tracking-table tbody').empty();\n\n\n                    let details = `\n                        <div class=\"tracking-gorup\">\n                            <div class=\"tracking-header\">\n                               <p>Nomor Order : #${trackingOrderNumber}<\/p>\n                               <p>Nomor Resi : ${trackingDetails?.awb ?? '-'}<\/p>\n                            <\/div> \n\n                            <div class=\"tracking-address\">\n                                <div class=\"track-inline\">\n                                    <p class=\"textprimary\">${trackingDetails?.destination?.name ?? '-'}<\/p>\n                                    <p class=\"textseccond\">${trackingDetails?.destination?.city ?? '-'}<\/p>\n                                    <p class=\"textseccond textbold\">${trackingDetails?.destination?.province ?? '-'}<\/p>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"tracking-courier\">\n                                <div class=\"borderdashed\"><\/div>\n                                \n                                <div class=\"textseccond\">\n                                    <p>Kurir<\/p>\n                                    <p class=\"fontbold\">${trackingDetails?.service ?? '-'}<\/p>\n                                <\/div>\n                                \n                                <div class=\"borderdashed\"><\/div>\n                            <\/div>\n\n                        <\/div>\n                    `;\n\n                    jQuery('.tracking-details').html(details);\n                    \n                    jQuery.each(trackingHistories,function (index,trackData){   \n\n                        jQuery('.tracking-table tbody').append(\n                            `<tr>\n                                <td>${trackData.created_at}<\/td>\n                                <td>${trackData.status}<\/td>\n                            <\/tr>`)\n                    });                    \n                return\n            }\n\n            jQuery('.state-err').removeClass('kj-hidden')\n            jQuery('#err_msg').text(response?.message)\n        });\n    }\n\n    const url = new URL(window.location.href);\n    jQuery(document).ready(function() {\n        const urlParams = url.searchParams;\n        const orderIdToLoad = encodeURI(urlParams.get(\"order_id\"));\n        if (orderIdToLoad!=='null'){\n            jQuery('[name=\"order_number\"]').val(orderIdToLoad)\n            trackOrder()\n        }\n    });\n    \n    \n    function hideStateComponent(){\n        jQuery('.track-btn').addClass('kj-hidden')\n        jQuery('.state-blank').addClass('kj-hidden')\n        jQuery('.state-err').addClass('kj-hidden')\n        jQuery('.state-loading').addClass('kj-hidden')\n        jQuery('.state-success').addClass('kj-hidden')\n    }\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":0,"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/pages\/78\/revisions"}],"wp:attachment":[{"href":"https:\/\/delphica.store\/en\/wp-json\/wp\/v2\/media?parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}