Chào mọi người, hôm nay mình sẽ hướng dẫn mọi người code chức năng vòng quay may mắn trong wordpress nhé!
Mọi người biết đấy, ai mà chả không thích một cái vòng quay vui nhộn và đối khi mêng mang ít nhề hy vọng may mắn nhương giống mình đang ở sòi Vegas đó phải không nào? Cùng bắt tay vào làm và để tôi chỉ cho bạn cách tạo một vòng quay vừa chân thực, vừa xịn con nhà bà xò nhé.
1. Vì sao bạn cần một “vòng quay may mắn”?
Hãy tưởng tượng thế này: bạn có một cửa hàng online, khách ghé qua, xem sản phẩm, nhưng… họ không mua gì! Sao thế nhỉ? Câu trả lời đơn giản là: bạn cần gì đó thú vị hơn để giữ chân họ. Đây chính là lúc “vòng quay may mắn” xuất hiện. Không chỉ giúp tăng sự hào hứng, mà còn kích thích khách hàng chi tiêu.
Bạn không cần phải là một lập trình viên siêu cấp hay nhà phát minh tài ba để làm được điều này. Với chút mã code và một tinh thần “quay tới bến”, bạn sẽ mang đến cho khách hàng những giây phút vừa cười, vừa thót tim, vừa… hết tiền (vì mua sắm).
2. Ý tưởng tổng quan về vòng quay may mắn
Bạn đã từng thấy những vòng quay may mắn trong các cửa hàng trực tuyến? Khi khách hàng nhấn nút, bánh xe xoay xoay như chong chóng, ánh sáng lấp lánh (nếu bạn có thể tưởng tượng), và cuối cùng dừng lại ở một phần thưởng — hoặc một lời chúc ngọt ngào kiểu “May mắn lần sau!”. Đây chính là thứ bạn sẽ tạo ra:
- Giao diện: Một bánh xe đầy màu sắc với các phần quà được chia đều.
- Hành động: Khách hàng nhấn nút quay → vòng quay chuyển động.
- Kết quả: Một sản phẩm (hoặc “May mắn lần sau”) hiện lên.
- Xử lý phía sau: Nếu khách hàng trúng, hệ thống sẽ tự động tạo đơn hàng WooCommerce cho họ.
3. Lập trình nhưng phải “chất chơi người dơi”
Lập trình không chỉ là gõ vài dòng code rồi xong chuyện. Nó là nghệ thuật, là sự hòa quyện giữa logic và… chút điên rồ. Với vòng quay này, bạn không chỉ học cách viết code mà còn học cách biến nó thành niềm vui cho chính bạn. Hãy chuẩn bị:
- Máy tính (chắc chắn rồi, không lẽ bạn định code trên giấy?).
- Website WordPress với WooCommerce (nếu không có WooCommerce thì như pizza mà thiếu phô mai!).
- Cốc cà phê hoặc trà sữa để chống buồn ngủ (cẩn thận đừng đổ lên bàn phím nhé).
- Tâm trạng vui vẻ, bởi chúng ta sắp tạo nên thứ gì đó khiến khách hàng cười lăn.
4. Cách hoạt động của vòng quay (nhìn thì đơn giản, nhưng kỳ diệu)
Bạn nghĩ vòng quay đơn giản chỉ là quay và dừng lại? Ồ không, bên dưới đó là cả một cơ chế phức tạp như cỗ máy trong phim Inception. Dưới đây là các bước cơ bản:
- Hiển thị vòng quay: Một hình tròn xoay vòng với các phần thưởng.
- Người dùng nhấn nút “Quay”: Bắt đầu hành trình.
- Vòng quay quay quay quay: Kết hợp một chút xác suất, bạn sẽ biết khách hàng trúng gì (hoặc “may mắn lần sau”).
- Thông báo kết quả: Khách hàng sẽ nhận được quà, hoặc… một lời chúc.
Mục tiêu cuối cùng: Mang đến trải nghiệm thú vị, nhưng vẫn khiến khách hàng tiếp tục quay để “thử vận may”.
4. Code thôi nào! (Dành cho những tâm hồn yêu thích thử thách)
Giờ là phần thú vị nhất. Chúng ta sẽ tự tạo vòng quay bằng cách sử dụng shortcode trong WordPress. Mà quên, điều kiện dùng là phải có sử dụng plugin WooCommerce nhé.
Các bạn có thể tìm hiểu WooCommerce tại wiki nhé: xem thêm
4.1. Tạo Shortcode để hiển thị vòng quay
Trong file functions.php của theme (hoặc viết trong plugin của bạn), thêm đoạn code sau:
Giải Thích Từng Dòng Code
Phần tạo danh sách sản phẩm:
- $product_ids: Là danh sách các sản phẩm mà bạn muốn cho vào vòng quay.
- wc_get_product($product_id): Lấy thông tin chi tiết sản phẩm qua ID.
- mb_strimwidth(): Giới hạn độ dài tên sản phẩm để không làm hỏng giao diện vòng quay.
🧑💻 Ví dụ hài hước: Nếu tên sản phẩm dài lê thê kiểu “Siêu phẩm độc nhất vô nhị giảm giá sốc 50% toàn quốc”, bạn cần cắt ngắn xuống thành “Siêu phẩm…” để đỡ nhức mắt.
Thêm “May mắn lần sau”:
Đây là phần “dở khóc dở cười” khi khách hàng quay trúng nhưng không nhận được gì. Một chút thách thức để họ quay tiếp lần sau.
Phần vẽ vòng quay:
- Sử dụng <canvas> để tạo bánh xe. Các ô được tô màu xen kẽ vàng và cam nhìn “ngon mắt”.
- Các phần tên sản phẩm được đặt ở vị trí tương ứng.
🧑🎨 Ví dụ minh họa: Bạn đang tạo ra một chiếc bánh pizza khổng lồ với từng phần là một món quà. Đừng để tên sản phẩm “dài dòng văn tự” chiếm hết phần bánh nhé!
Phần xoay vòng:
- spinAngleStart: Góc bắt đầu quay.
- spinTimeTotal: Tổng thời gian quay.
- easeOut(): Tạo hiệu ứng quay chậm dần khi gần dừng.
🌀 Ví dụ hài hước: Bạn đang mô phỏng chiếc chong chóng của trẻ con, lúc đầu quay vèo vèo, nhưng khi gió ngừng thổi, nó từ từ đứng im.
Kết quả:
Khi vòng quay dừng lại:
- Hàm stopRotateWheel() chọn ra một mục ngẫu nhiên từ danh sách sản phẩm.
- Nếu bạn trúng phần thưởng, một thông báo vui vẻ sẽ xuất hiện như: “Chúc mừng bạn đã trúng một chai nước hoa thơm đến mức chim sẻ cũng ngất!”. Nếu không may, thì “Rất tiếc, may mắn lần sau nhé!”.
Ví dụ hài hước trong thực tế:
- Khách hàng quay trúng một sản phẩm có giá trị lớn, họ có thể cười hả hê và vội vàng thêm hàng vào giỏ.
- Nhưng khi họ quay vào “May mắn lần sau”, họ thường sẽ nghĩ: “Chắc chắn lần này mình xui, quay lại lần nữa chắc chắn sẽ ăn đậm!” (Thế là bạn kéo họ vào vòng quay mua sắm không hồi kết).
Lưu ý: Hãy thay $product_ids = array(5699, 5704, 5581, 5579, 5465, 5341, 5116); thành những ID sản phẩm tương ứng của bạn. Bằng cách vào trang sản phẩm coppy từng ID những sản phẩm quà tặng theo thứ tự từ 1 đến 7 nhé, số 8 sẽ không cần điền mặc định nó sẽ hiểu là may mắn lần sau.

4.2. Phần AJAX: Tự động hóa kết quả
Sau khi khách hàng trúng thưởng, chúng ta cần xử lý phía server để tạo đơn hàng WooCommerce (nếu họ trúng sản phẩm). Dưới đây là cách làm.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | function create_wheel_order() { check_ajax_referer('create_wheel_order_nonce', 'security'); // Bảo vệ yêu cầu AJAX với nonce if (!isset($_POST['product_id'])) { wp_send_json_error('Thiếu ID sản phẩm!'); } $product_id = intval($_POST['product_id']); $user_id = get_current_user_id(); if (!$user_id) { wp_send_json_error('Bạn cần đăng nhập để nhận thưởng!'); } // Kiểm tra sản phẩm có tồn tại không $product = wc_get_product($product_id); if (!$product) { wp_send_json_error('Sản phẩm không tồn tại!'); } try { // Tạo đơn hàng WooCommerce $order = wc_create_order(); $order->add_product($product, 1); // Thêm sản phẩm vào đơn hàng với số lượng 1 $order->set_customer_id($user_id); // Miễn phí đơn hàng foreach ($order->get_items() as $item_id => $item) { $item->set_total(0); } $order->calculate_totals(); // Đánh dấu đơn hàng là đã hoàn thành $order->update_status('completed'); $order->payment_complete(); wp_send_json_success('Đơn hàng của bạn đã được tạo thành công!'); } catch (Exception $e) { wp_send_json_error('Lỗi khi tạo đơn hàng: ' . $e->getMessage()); } } add_action('wp_ajax_create_wheel_order', 'create_wheel_order'); add_action('wp_ajax_nopriv_create_wheel_order', 'create_wheel_order'); |
Giải thích:
Kiểm tra bảo mật với nonce:
- Dòng check_ajax_referer() đảm bảo rằng yêu cầu AJAX được gửi từ website của bạn chứ không phải từ kẻ xấu muốn lợi dụng.
- Kiểm tra thông tin sản phẩm và người dùng:
- $product_id: Lấy ID sản phẩm từ yêu cầu AJAX.
- $user_id: Kiểm tra người dùng hiện tại có đăng nhập không.
🧑💻 Ví dụ hài hước: Nếu khách hàng chưa đăng nhập mà quay, bạn có thể hiện thông báo kiểu: “Để nhận quà, bạn cần đăng nhập. Đừng ngại, chúng tôi không ăn cắp thông tin của bạn đâu mà sợ!”.
Tạo đơn hàng WooCommerce:
- Dòng wc_create_order() tạo một đơn hàng mới.
- add_product($product, 1): Thêm sản phẩm trúng thưởng vào đơn hàng.
🛒 Ví dụ thực tế: Nếu khách hàng trúng một sản phẩm trị giá 0 đồng (do bạn tạo đơn hàng miễn phí), họ sẽ nhận quà mà không cần trả gì cả. Bạn chỉ cần “chốt hạ” bằng cách cho họ mã giảm giá “miễn phí”.
Đánh dấu đơn hàng hoàn thành:
- update_status(‘completed’): Đơn hàng được chuyển sang trạng thái đã hoàn thành.
4.3. Tích hợp giao diện quản trị để xóa lịch sử quay
Khi bạn muốn bắt đầu lại từ đầu (ví dụ, cho khách hàng quay tiếp vào sự kiện mới), bạn cần một công cụ xóa dữ liệu quay. Hãy tạo một mục trong Admin để thực hiện việc này.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | function add_reset_spin_data_button() { add_menu_page( 'Reset Spin Data', 'Reset Spin Data', 'manage_options', 'reset_spin_data', 'reset_spin_data_callback' ); } add_action('admin_menu', 'add_reset_spin_data_button'); function reset_spin_data_callback() { if (isset($_POST['reset_spin_data'])) { $users = get_users(); foreach ($users as $user) { delete_user_meta($user->ID, 'has_spun_wheel'); // Xóa trạng thái quay } echo '<div class="updated"><p>Dữ liệu đã được xóa thành công!</p></div>'; } echo ' <div class="wrap"> <h1>Reset Dữ Liệu Vòng Quay</h1> <form method="post"> <input type="hidden" name="reset_spin_data" value="1"> <p><input type="submit" class="button button-primary" value="Xóa toàn bộ dữ liệu"></p> </form> </div>'; } |
Giải thích:
Thêm menu Admin:
- add_menu_page() thêm một mục vào menu Admin, nơi bạn có thể nhấn nút để reset dữ liệu.
- Xóa lịch sử quay:
- delete_user_meta($user->ID, ‘has_spun_wheel’): Xóa dữ liệu trạng thái “đã quay” của từng người dùng.
Giao diện thân thiện:
- Một form đơn giản trong WordPress Admin cho phép bạn reset dữ liệu chỉ với một cú nhấp chuột.
🎯 Ví dụ thực tế: Bạn có thể đặt thông báo kiểu: “Dữ liệu đã được reset, giờ đây khách hàng có thể quay vòng lại như chưa từng có gì xảy ra”.
5. Tổng kết
Với hướng dẫn này, bạn đã có:
- Một vòng quay đẹp đẽ, thú vị, và hoàn toàn tùy chỉnh.
- Cách xử lý dữ liệu sản phẩm và tạo đơn hàng tự động khi khách hàng trúng thưởng.
- Một giao diện Admin để xóa lịch sử quay khi cần.
6. Một số mẹo hài hước khi triển khai vòng quay
- Thông điệp sáng tạo:
- Khi khách hàng trúng quà: “Wow! Bạn đã trúng một món quà giá trị! Ai bảo thần may mắn không thích bạn nào?”
- Khi trúng “May mắn lần sau”: “Đừng buồn, thần may mắn cũng cần nghỉ ngơi. Thử lại nhé!”
- Gợi ý khuyến mãi:
- Sau khi quay, thêm nút kiểu: “Tăng thêm cơ hội trúng thưởng bằng cách mua hàng ngay!”
- Tạo trải nghiệm:
- Tùy chỉnh màu sắc, thêm âm thanh “ding ding ding” khi bánh xe quay, tạo cảm giác như đang tham gia một gameshow!
Chúc bạn thành công với vòng quay may mắn và mang đến niềm vui bất tận cho khách hàng! 🎉 Dưới đây là code hoàn chỉnh 100%, các bạn chỉ cần bỏ vào funtion là được nhé, các bạn có thể tự chỉnh sửa lại cho phù hợp với nhu cầu của mình nhé.
- TOP 5 Theme WordPress Bất Động Sản Giá Rẻ, Đẹp và Chất Lượng Nhất tại MuaThemeWPGiaRe
- Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee
- Hướng dẫn code chức năng chia sẻ File Google Drive Woocomerce
- Hướng Dẫn Chọn Mua Theme WordPress Giá Rẻ và Tối Ưu SEO Để Tăng Thứ Hạng Google
- Mã SKU Là Gì và Tại Sao Bạn Nên Sử Dụng? Hướng Dẫn Chi Tiết