Thêm phần tải ảnh lên trong chi tiết khi đặt hàng sản phẩm Woocommerce

Thêm phần tải ảnh lên trong chi tiết khi đặt hàng sản phẩm Woocommerce

24/08/2023 - 203

Các bạn tham khảo đoạn code bên dưới nhé:

// Thêm trường tải ảnh lên trong chi tiết sản phẩm
add_action('woocommerce_before_add_to_cart_button', 'add_image_upload_field');
function add_image_upload_field()
{
    echo '<div class="image-upload-field">';
    echo '<h2>' . __('Upload an Image', 'woocommerce') . '</h2>';
    ?>
    <div class="custom-file">
        <input type="file" class="custom-file-input" name="order_image_upload" id="order_image_upload"
               onchange="displayFileName(this)"/>
        <label class="custom-file-label" for="order_image_upload" placeholder="No image">Choose image</label>
    </div>
    <script type="text/javascript">
        function displayFileName(input) {
            var fileName = input.files[0] ? input.files[0].name : '';
            var label = input.nextElementSibling;
            label.innerHTML = fileName || label.getAttribute('placeholder');

            var file = input.files[0];
            var reader = new FileReader();

            reader.onload = function (e) {
                var imageElement = document.createElement('img');
                imageElement.src = e.target.result;
                imageElement.width = 100;
                imageElement.height = 100;

                var label = input.nextElementSibling;
                label.innerHTML = '';
                label.appendChild(imageElement);
                label.classList.add('custom-file-label2'); // Thêm class tùy chỉnh vào label
            };

            if (file) {
                reader.readAsDataURL(file);
            } else {
                var label = input.nextElementSibling;
                label.innerHTML = label.getAttribute('placeholder');
                label.classList.remove('custom-file-label2'); // Xóa class tùy chỉnh khỏi label
            }
        }

    </script>
    <?php
}

// Lưu ảnh tải lên vào giỏ hàng
add_filter('woocommerce_add_cart_item_data', 'save_order_image_upload', 10, 2);
function save_order_image_upload($cart_item_data, $product_id)
{
    if (isset($_FILES['order_image_upload']) && !empty($_FILES['order_image_upload']['tmp_name'])) {
        $upload = wp_upload_bits($_FILES['order_image_upload']['name'], null, file_get_contents($_FILES['order_image_upload']['tmp_name']));
        if (isset($upload['error']) && $upload['error'] != 0) {
            wp_die('Error uploading file - ' . $upload['error']);
        } else {
            $cart_item_data['order_image_upload'] = $upload;
        }
    }
   return $cart_item_data;
}

// Hiển thị ảnh tải lên trong giỏ hàng và trang thanh toán
add_filter('woocommerce_get_item_data', 'display_order_image_upload', 10, 2);
function display_order_image_upload($item_data, $cart_item)
{
    if (isset($cart_item['order_image_upload'])) {
        $item_data[] = array(
            'key' => __('Uploaded Image', 'woocommerce'),
            'value' => '<img src="' . $cart_item['order_image_upload']['url'] . '" width="100" height="100" />',
        );
    }
    error_log(print_r($item_data, true)); // Ghi thông tin vào log
    return $item_data;
}

// Lưu ảnh vào giỏ hàng sau khi thanh toán
add_action('woocommerce_checkout_create_order_line_item', 'save_order_image_upload_after_payment', 10, 4);
function save_order_image_upload_after_payment($item, $cart_item_key, $values, $order)
{
    if (isset($values['order_image_upload'])) {
        $item->add_meta_data('order_image_upload', $values['order_image_upload']);
    }
}

// Hiển thị ảnh trong đơn hàng ở trang quản trị
add_filter('woocommerce_admin_order_item_values', 'display_order_image_upload_admin', 10, 3);
function display_order_image_upload_admin($values, $item, $item_id)
{
    ?><h4 style="padding: 10px;">UPLOADED IMAGE:</h4><?php
    $order_image_upload = $item->get_meta('order_image_upload');
    if (!empty($order_image_upload)) {
    ?>
        <img src="<?php echo $order_image_upload['url']; ?>" width="300" height="300" style="object-fit: contain;padding: 10px;">
    <?php
    }
}

// Hiển thị ảnh trong đơn hàng ở email
function add_product_image_to_order_email( $output, $order ) {
    $items = $order->get_items();
    foreach ( $items as $item ) {
        // Lấy thông tin ảnh đã tải lên từ meta của mục hàng
        $order_image_upload = $item->get_meta('order_image_upload');
        if ( ! empty( $order_image_upload ) ) {
            // Hiển thị ảnh đã tải lên trong email
            $output .= '<p>UPLOADED IMAGE:<p><p><img src="' . $order_image_upload['url'] . '" width="200" height="200" style="object-fit: contain; padding: 10px;"></p>';
        }
    }

    return $output;
}
add_filter( 'woocommerce_email_order_items_table', 'add_product_image_to_order_email', 10, 2 );

Mong rằng bài viết trên sẽ giúp ích cho bạn!

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

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bài viết liên quan
Contact Me on Zalo