Nhúng JS Lottie

function enqueue_dotlottie_script() {
    // Chỉ định tên cho script
    $handle = 'dotlottie-wc'; 
    $src = 'https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js';
    
    wp_enqueue_script( $handle, $src, array(), '0.8.5', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_dotlottie_script' );

// Bổ sung: Thêm thuộc tính type="module" cho script
function add_module_type_to_lottie_script( $tag, $handle, $src ) {
    if ( 'dotlottie-wc' === $handle ) {
        // Trả về thẻ script có thêm type="module"
        return '<script src="' . esc_url( $src ) . '" type="module"></script>';
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'add_module_type_to_lottie_script', 10, 3 );

Function tạo shortcode KK Star Ratings

// Add custom Theme Functions here
function display_kk_star_ratings() {
    // Bắt đầu bộ đệm đầu ra
    ob_start();
    
    // Gọi hàm rating. Hàm này thường in ra (echo) HTML trực tiếp.
    echo kk_star_ratings();
    
    // Lấy nội dung đã được in ra và trả về nó
    return ob_get_clean();
}
// Đăng ký shortcode [kksr]
add_shortcode( 'kksr', 'display_kk_star_ratings' );

Tính giá cước

/**
 * Hàm tạo shortcode [tinh_gia_cuoc]
 * Nó sẽ trả về toàn bộ HTML, CSS và JS cần thiết.
 */
function gh_tinh_gia_cuoc_shortcode_function() {
    // Bắt đầu bộ đệm đầu ra (output buffering)
    // Việc này cho phép chúng ta "bắt" tất cả HTML/CSS/JS và trả về nó dưới dạng một chuỗi.
    ob_start();
    ?>
    <div class="giacuocxe">
        <h1>TÍNH GIÁ CƯỚC TAXI TẢI TÂM BÌNH</h1>
        <p>Vui lòng chọn loại xe và nhập tổng số Km để xem chi phí dự kiến.</p>

        <form action="" method="GET" class="form-tinh-cuoc">
            <div class="form-group">
                <label for="loai_xe">Chọn loại xe:</label>
                <select id="loai_xe" name="loai_xe" required>
                    <option value="">-- Vui lòng chọn --</option>
                    <option value="1.2">Xe 1.2 Tấn</option>
                    <option value="1.5">Xe 1.5 Tấn</option>
                    <option value="1.9">Xe 1.9 Tấn</option>
                    <option value="2.5">Xe 2.5 Tấn</option>
                    <option value="3.5">Xe 3.5 Tấn</option>
                </select>
            </div>

            <div class="form-group">
                <label for="so_km">Tổng số Km:</label>
                <input type="number" id="so_km" name="so_km" min="0" step="0.1" placeholder="Ví dụ: 55.5" required>
            </div>

            <button type="submit" class="submit-btn">Tính Giá Cước</button>
        </form>

        <div id="ket-qua">
            </div>

        <script>
            (function() {
                // Lấy thẻ script hiện tại
                const currentScript = document.currentScript;
                // Lấy thẻ cha của nó, chính là div.giacuocxe
                const container = currentScript.parentElement;

                // 1. Định nghĩa bảng giá
                const priceTable = {
                    "1.2": { base: 400000, tier2: 22000, tier3: 20000 },
                    "1.5": { base: 450000, tier2: 25000, tier3: 22000 },
                    "1.9": { base: 500000, tier2: 25000, tier3: 22000 },
                    "2.5": { base: 800000, tier2: 25000, tier3: 22000 },
                    "3.5": { base: 1000000, tier2: 30000, tier3: 25000 }
                };

                // 2. Hàm tính toán
                function tinhGiaCuoc(rules, soKm) {
                    let tongTienKm = 0;
                    if (soKm <= 5) {
                        tongTienKm = rules.base;
                    } else if (soKm > 5 && soKm <= 50) {
                        tongTienKm = rules.base + (soKm - 5) * rules.tier2;
                    } else {
                        const tienKmTu6Den50 = (50 - 5) * rules.tier2;
                        const tienKmTren50 = (soKm - 50) * rules.tier3;
                        tongTienKm = rules.base + tienKmTu6Den50 + tienKmTren50;
                    }
                    return tongTienKm;
                }

                // 3. Hàm định dạng tiền tệ
                function formatCurrency(number) {
                    return new Intl.NumberFormat('vi-VN', {
                        style: 'currency',
                        currency: 'VND'
                    }).format(number);
                }

                // 4. Xử lý chính
                const urlParams = new URLSearchParams(window.location.search);
                const loaiXe = urlParams.get('loai_xe');
                const soKmParam = urlParams.get('so_km');

                if (loaiXe && soKmParam && container) {
                    const soKm = parseFloat(soKmParam);
                    const rules = priceTable[loaiXe];
                    
                    // Tìm các phần tử BÊN TRONG container này
                    const ketQuaDiv = container.querySelector('#ket-qua');
                    const loaiXeSelect = container.querySelector('#loai_xe');
                    const soKmInput = container.querySelector('#so_km');

                    if (rules && !isNaN(soKm) && ketQuaDiv && loaiXeSelect && soKmInput) {
                        const tongChiPhi = tinhGiaCuoc(rules, soKm);
                        ketQuaDiv.innerHTML = `<h2>Tổng chi phí dự kiến: ${formatCurrency(tongChiPhi)}</h2>`;

                        // Tự động điền lại giá trị vào form
                        loaiXeSelect.value = loaiXe;
                        soKmInput.value = soKm;

                    } else if (ketQuaDiv) {
                        ketQuaDiv.innerHTML = `<h2 style="color: red;">Thông tin nhập không hợp lệ. Vui lòng thử lại.</h2>`;
                    }
                }
            })(); // Chạy hàm ngay lập tức
        </script>
    </div><?php
    // Lấy nội dung đã đệm (HTML/CSS/JS ở trên)
    $output = ob_get_clean();
    
    // Trả về nội dung
    return $output;
}

// Đăng ký shortcode với WordPress
// Tên shortcode là [tinh_gia_cuoc]
// Khi WordPress thấy [tinh_gia_cuoc], nó sẽ chạy hàm 'gh_tinh_gia_cuoc_shortcode_function'
add_shortcode('tinh_gia_cuoc', 'gh_tinh_gia_cuoc_shortcode_function');