Chia sẻ code tạo shortcode hiển thị bảng tính giá tour du lịch theo giá sản phẩm woocommerce

Xin chào các bạn, hôm nay mình xin chia sẻ file code tạo shortcode hiển thị bảng tính giá tour trong website du lịch dựa trên giá của sản phẩm.

Để tạo một bảng tính giá tour giống như trong hình, hiển thị đơn giá và phần chọn số lượng, bạn cần thực hiện một số bước để kết hợp với WooCommerce và Flatsome. Mục tiêu là hiển thị đơn giá từ sản phẩm, đồng thời có cơ chế chọn số lượng cho từng đối tượng (người lớn, trẻ em, trẻ nhỏ).

1. Lấy giá từ sản phẩm trong WooCommerce

Giá của người lớn sẽ được lấy từ giá của sản phẩm gốc (sản phẩm tour).
Giá của trẻ em sẽ là 60% giá người lớn.
Giá của trẻ nhỏ có thể bằng 0 hoặc tùy chỉnh theo yêu cầu.

2. Tạo form tính toán giá

Bạn có thể tạo một shortcode để hiển thị bảng tính này. Chúng ta sẽ sử dụng WooCommerce hooks để lấy giá sản phẩm và tạo các trường nhập số lượng. Khi khách hàng chọn số lượng, tổng giá sẽ tự động tính toán.

Thêm đoạn mã sau vào file functions.php của theme con:

// Tạo shortcode cho bảng tính giá tour
function tinh_gia_tour_shortcode() {
    global $product;

    // Kiểm tra nếu đang trong trang chi tiết sản phẩm
    if (!is_product()) {
        return '<p>Chỉ có thể hiển thị bảng tính trên trang sản phẩm.</p>';
    }

    // Lấy giá sản phẩm
    $gia_nguoi_lon = $product->get_price();
    
    // Lấy giá trị từ ACF cho phương tiện và khách sạn
    $gia_xe_o_to = get_field('tour_xe_o_to', $product->get_id());
    $gia_xe_may_1 = get_field('gia_xe_may_1', $product->get_id());
    $gia_xe_may_2 = get_field('gia_xe_may_2', $product->get_id());
    $gia_xe_may_3 = get_field('gia_xe_may_3', $product->get_id());

    $gia_homestay = get_field('home_stay', $product->get_id());
    $gia_khach_san_co_ban = get_field('ks_01', $product->get_id());
    $gia_khach_san_25 = get_field('ks_25_sao', $product->get_id());
    $gia_khach_san_3 = get_field('khach_san_3_sao', $product->get_id());
    $gia_khach_san_4 = get_field('khach_san_4_sao', $product->get_id());
    $gia_khach_san_5 = get_field('khach_san_5_sao', $product->get_id());

    // Giá trẻ em (75% giá người lớn)
    $gia_tre_em = $gia_nguoi_lon * 0.75;

    // HTML hiển thị form tính giá
    ob_start(); // Bắt đầu bộ đệm đầu ra
    ?>
    <div class="tinh-gia-tour">
        <h3>Tính giá tour</h3>
        <form id="tour-price-form">
            <!-- Người lớn -->
            <label for="nguoi-lon">Người lớn (>9 tuổi):</label>
            <input type="number" id="nguoi-lon" name="nguoi_lon" value="1" min="0" data-price="<?php echo esc_attr($gia_nguoi_lon); ?>"> 
            <span><?php echo number_format($gia_nguoi_lon); ?>đ</span>

            <!-- Trẻ em -->
            <label for="tre-em">Trẻ em (5-9 tuổi):</label>
            <input type="number" id="tre-em" name="tre_em" value="0" min="0" data-price="<?php echo esc_attr($gia_tre_em); ?>"> 
            <span><?php echo number_format($gia_tre_em); ?>đ</span>

            <!-- Phương tiện -->
            <label for="phuong-tien">Phương tiện:</label>
            <select id="phuong-tien" name="phuong_tien">
                <option value="<?php echo esc_attr($gia_xe_o_to); ?>">Xe ô tô - <?php echo number_format($gia_xe_o_to); ?>đ</option>
                <option value="<?php echo esc_attr($gia_xe_may_1); ?>">2 khách thuê xe máy riêng- <?php echo number_format($gia_xe_may_1); ?>đ</option>
                <option value="<?php echo esc_attr($gia_xe_may_2); ?>">1 dẫn kiêm lái kèm 1 khách  - <?php echo number_format($gia_xe_may_2); ?>đ</option>
                <option value="<?php echo esc_attr($gia_xe_may_3); ?>">1 khách tự đi 1 xe máy riêng - <?php echo number_format($gia_xe_may_3); ?>đ</option>
            </select>

            <!-- Khách sạn -->
            <label for="khach-san">Khách sạn:</label>
            <select id="khach-san" name="khach_san">
                <option value="<?php echo esc_attr($gia_homestay); ?>">Homestay - <?php echo number_format($gia_homestay); ?>đ</option>
                <option value="<?php echo esc_attr($gia_khach_san_co_ban); ?>">Khách sạn cơ bản - <?php echo number_format($gia_khach_san_co_ban); ?>đ</option>
                <option value="<?php echo esc_attr($gia_khach_san_25); ?>">Khách sạn 2,5 sao - <?php echo number_format($gia_khach_san_25); ?>đ</option>
                <option value="<?php echo esc_attr($gia_khach_san_3); ?>">Khách sạn 3 sao - <?php echo number_format($gia_khach_san_3); ?>đ</option>
                <option value="<?php echo esc_attr($gia_khach_san_4); ?>">Khách sạn 4 sao - <?php echo number_format($gia_khach_san_4); ?>đ</option>
                <option value="<?php echo esc_attr($gia_khach_san_5); ?>">Khách sạn 5 sao - <?php echo number_format($gia_khach_san_5); ?>đ</option>
            </select>

            <!-- Tổng giá tour -->
            <div id="tong-gia-tour">
                <h4>Tổng giá tour: <span id="total-price">0</span>đ</h4>
            </div>
        </form>
    </div>

    <script>
    jQuery(document).ready(function($) {
        function updateTotalPrice() {
            var nguoiLonPrice = $('#nguoi-lon').data('price') * $('#nguoi-lon').val();
            var treEmPrice = $('#tre-em').data('price') * $('#tre-em').val();
            var phuongTienPrice = parseFloat($('#phuong-tien').val());
            var khachSanPrice = parseFloat($('#khach-san').val());

            var totalPrice = nguoiLonPrice + treEmPrice + phuongTienPrice + khachSanPrice;

            $('#total-price').text(totalPrice.toLocaleString('vi-VN'));
        }

        $('#nguoi-lon, #tre-em, #phuong-tien, #khach-san').on('change', updateTotalPrice);

        // Cập nhật tổng giá lần đầu khi trang tải
        updateTotalPrice();
    });
    </script>
    <?php
    return ob_get_clean(); // Trả lại nội dung của bộ đệm đầu ra
}

// Đăng ký shortcode
add_shortcode('tinh_gia_tour', 'tinh_gia_tour_shortcode');

// Tạo shortcode cho bảng tính giá tour

function tinh_gia_tour_shortcode() {

global $product;

// Kiểm tra nếu đang trong trang chi tiết sản phẩm

if (!is_product()) {

return '<p>Chỉ có thể hiển thị bảng tính trên trang sản phẩm.</p>';

}

// Lấy giá sản phẩm

$gia_nguoi_lon = $product->get_price();

// Lấy giá trị từ ACF cho phương tiện và khách sạn

$gia_xe_o_to = get_field('tour_xe_o_to', $product->get_id());

$gia_xe_may_1 = get_field('gia_xe_may_1', $product->get_id());

$gia_xe_may_2 = get_field('gia_xe_may_2', $product->get_id());

$gia_xe_may_3 = get_field('gia_xe_may_3', $product->get_id());

$gia_homestay = get_field('home_stay', $product->get_id());

$gia_khach_san_co_ban = get_field('ks_01', $product->get_id());

$gia_khach_san_25 = get_field('ks_25_sao', $product->get_id());

$gia_khach_san_3 = get_field('khach_san_3_sao', $product->get_id());

$gia_khach_san_4 = get_field('khach_san_4_sao', $product->get_id());

$gia_khach_san_5 = get_field('khach_san_5_sao', $product->get_id());

// Giá trẻ em (75% giá người lớn)

$gia_tre_em = $gia_nguoi_lon * 0.75;

// HTML hiển thị form tính giá

ob_start(); // Bắt đầu bộ đệm đầu ra

<label for="nguoi-lon">Người lớn (>9 tuổi):</label>

<label for="phuong-tien">Phương tiện:</label>

<option value="<?php echo esc_attr($gia_xe_may_1); ?>">2 khách thuê xe máy riêng- <?php echo number_format($gia_xe_may_1); ?>đ</option>

<option value="<?php echo esc_attr($gia_xe_may_2); ?>">1 dẫn kiêm lái kèm 1 khách - <?php echo number_format($gia_xe_may_2); ?>đ</option>

<option value="<?php echo esc_attr($gia_xe_may_3); ?>">1 khách tự đi 1 xe máy riêng - <?php echo number_format($gia_xe_may_3); ?>đ</option>

</select>

<label for="khach-san">Khách sạn:</label>

<option value="<?php echo esc_attr($gia_homestay); ?>">Homestay - <?php echo number_format($gia_homestay); ?>đ</option>

<option value="<?php echo esc_attr($gia_khach_san_co_ban); ?>">Khách sạn cơ bản - <?php echo number_format($gia_khach_san_co_ban); ?>đ</option>

<option value="<?php echo esc_attr($gia_khach_san_25); ?>">Khách sạn 2,5 sao - <?php echo number_format($gia_khach_san_25); ?>đ</option>

<option value="<?php echo esc_attr($gia_khach_san_3); ?>">Khách sạn 3 sao - <?php echo number_format($gia_khach_san_3); ?>đ</option>

<option value="<?php echo esc_attr($gia_khach_san_4); ?>">Khách sạn 4 sao - <?php echo number_format($gia_khach_san_4); ?>đ</option>

<option value="<?php echo esc_attr($gia_khach_san_5); ?>">Khách sạn 5 sao - <?php echo number_format($gia_khach_san_5); ?>đ</option>

</select>

</div>

</form>

</div>

jQuery(document).ready(function($) {

function updateTotalPrice() {

var nguoiLonPrice = $('#nguoi-lon').data('price') * $('#nguoi-lon').val();

var treEmPrice = $('#tre-em').data('price') * $('#tre-em').val();

var phuongTienPrice = parseFloat($('#phuong-tien').val());

var khachSanPrice = parseFloat($('#khach-san').val());

var totalPrice = nguoiLonPrice + treEmPrice + phuongTienPrice + khachSanPrice;

$('#total-price').text(totalPrice.toLocaleString('vi-VN'));

}

$('#nguoi-lon, #tre-em, #phuong-tien, #khach-san').on('change', updateTotalPrice);

// Cập nhật tổng giá lần đầu khi trang tải

updateTotalPrice();

});

</script>

<?php

return ob_get_clean(); // Trả lại nội dung của bộ đệm đầu ra

}

// Đăng ký shortcode

add_shortcode('tinh_gia_tour', 'tinh_gia_tour_shortcode');

3. Cách sử dụng

Để hiển thị bảng tính này trong trang sản phẩm, bạn chỉ cần thêm shortcode [tour_pricing] vào mô tả sản phẩm hoặc bất kỳ nơi nào bạn muốn hiển thị bảng tính.
Shortcode sẽ tự động lấy giá của sản phẩm hiện tại, tính giá cho trẻ em (60% của người lớn), và tính tổng khi khách hàng chọn số lượng.

4. Chức năng

Người lớn: Giá được lấy từ giá sản phẩm gốc trong WooCommerce.
Trẻ em: Giá sẽ tự động tính bằng 60% giá người lớn.
Trẻ nhỏ: Có thể miễn phí (giá 0), nhưng bạn có thể thay đổi theo yêu cầu.
Tổng giá: Tổng giá sẽ tự động cập nhật khi khách hàng thay đổi số lượng.

5. Tùy chỉnh thêm

Bạn có thể điều chỉnh mức giá cho trẻ nhỏ hoặc thêm các logic phức tạp hơn nếu cần, như áp dụng các chương trình khuyến mãi, giảm giá đặc biệt cho nhóm tour.

thiết kế website

Chia sẻ code tạo shortcode hiển thị bảng tính giá tour du lịch theo giá sản phẩm woocommerce

1. Lấy giá từ sản phẩm trong WooCommerce

2. Tạo form tính toán giá

3. Cách sử dụng

4. Chức năng

5. Tùy chỉnh thêm

Để lại một bình luận Hủy

ĐĂNG KÝ DỊCH VỤ

ĐĂNG KÝ NHẬN TƯ VẤN VÀ BÁO GIÁ

1. Lấy giá từ sản phẩm trong WooCommerce

2. Tạo form tính toán giá

3. Cách sử dụng

4. Chức năng

5. Tùy chỉnh thêm

Để lại một bình luận Hủy

ĐĂNG KÝ NHẬN TƯ VẤN VÀ BÁO GIÁ

Đăng nhập