Code hiển thị Block khác nhau theo tổng giỏ hàng trong Flatsome

Bài viết này mình sẽ hướng dẫn bạn cách hiển thị Block khác nhau theo tổng giỏ hàng trong Flatsome nhé.

Shop muốn khách giỏ hàng còn nhỏ thấy banner “Mua thêm 200.000đ để được miễn phí vận chuyển”, còn khách giỏ đã lớn thì thấy banner “Bạn được tặng quà khi thanh toán” — mỗi nhóm khách thấy đúng thông điệp thúc họ chốt đơn. Flatsome có sẵn Block (UX Block) chèn được ở mọi nơi bằng shortcode [block id=”…”], nhưng mặc định không có cách nào tự đổi Block theo tổng giỏ hàng, muốn banner tự đổi theo giỏ thì bạn phải code thêm một shortcode bọc ngoài nhé.

Thêm code hiển thị Block theo tổng giỏ hàng

Bạn chỉ cần thêm code dưới vào cuối file functions.php của child theme Flatsome nhé. Nhớ sao lưu file trước khi sửa, và đừng chèn vào theme cha vì khi theme cập nhật sẽ mất code.

<?php
// Hiển thị Block (UX Block) khác nhau theo tổng giỏ hàng trong Flatsome
// Cách dùng: tạo 2 Block ở Blocks -> Add New (ví dụ "uu-dai-nho" và "uu-dai-lon"),
// rồi chèn shortcode vào Text element của UX Builder: [nn_block_theo_gio_hang nho="uu-dai-nho" lon="uu-dai-lon" nguong="500000"]
// Giỏ dưới 500.000đ hiện Block "nho", giỏ từ 500.000đ trở lên hiện Block "lon"
add_shortcode('nn_block_theo_gio_hang', 'nn_block_theo_gio_hang_shortcode');
function nn_block_theo_gio_hang_shortcode($atts) {
    $atts = shortcode_atts(array(
        'nho' => '',
        'lon' => '',
        'nguong' => 500000,
    ), $atts, 'nn_block_theo_gio_hang');
    if (!function_exists('WC') || !WC()->cart) {
        return '';
    }
    $tong_gio = (float) WC()->cart->get_subtotal();
    $nguong = (int) $atts['nguong'];
    if ($tong_gio >= $nguong && '' !== $atts['lon']) {
        $block_id = sanitize_text_field($atts['lon']);
    } elseif ('' !== $atts['nho']) {
        $block_id = sanitize_text_field($atts['nho']);
    } else {
        return '';
    }
    return do_shortcode('[block id="' . $block_id . '"]');
}

Code trên đăng ký shortcode [nn_block_theo_gio_hang] với ba thuộc tính: nho là ID hoặc slug của Block hiện khi giỏ còn nhỏ, lon là Block hiện khi giỏ đã lớn, nguong là mốc tổng tiền để đổi Block, mặc định 500.000đ. Khi shortcode chạy, code lấy tổng tiền giỏ bằng WC()->cart->get_subtotal(), nếu từ ngưỡng trở lên thì gọi do_shortcode với Block “lon”, còn không thì gọi Block “nho”. Code kiểm tra WooCommerce có đang chạy không và giỏ có tồn tại không trước khi đọc tổng tiền, nên trang nào không có giỏ hàng thì shortcode không in gì cả.

Tạo 2 Block và chèn shortcode vào trang

Bạn vào Blocks → Add New trong admin để tạo 2 Block bằng UX Builder, ví dụ Block “uu-dai-nho” với banner nhắc mua thêm để được miễn phí vận chuyển và Block “uu-dai-lon” với banner tặng quà, rồi ghi lại slug của từng Block. Sau đó mở trang muốn hiện banner (trang chủ, trang giỏ hàng hay bất kỳ trang nào), thêm element Text của UX Builder rồi dán shortcode [nn_block_theo_gio_hang nho=”uu-dai-nho” lon=”uu-dai-lon” nguong=”500000″]. Thử thêm hàng vào giỏ dưới 500.000đ rồi tải lại trang sẽ thấy banner nhỏ, thêm tiếp cho vượt 500.000đ thì banner tự đổi thành banner lớn.

Lưu ý khi dùng

Hàm get_subtotal() lấy tổng tiền hàng chưa gồm phí vận chuyển và thuế, nên mốc ngưỡng bạn đặt là mốc tiền hàng trong giỏ. Bạn đổi con số 500000 trong shortcode thành mốc của shop mình là được, và có thể dùng shortcode này nhiều lần với nhiều cặp Block khác nhau trên cùng một trang. Thuộc tính id của shortcode [block] nhận cả slug lẫn ID số của Block, theo đúng tài liệu Blocks của Flatsome. Tính năng này đi chung với bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome là thành combo thúc khách tăng giỏ hàng khá tốt.

Kết luận

Vậy là chỉ với 1 shortcode bạn đã hiển thị Block khác nhau theo tổng giỏ hàng trong Flatsome rồi nhé. Tính năng này đi chung với bài code thêm thanh tiến trình miễn phí vận chuyển trong Flatsome và bài code thêm thông báo miễn phí vận chuyển ở đầu trang trong Flatsome là thành bộ công cụ tăng giá trị giỏ hàng cho shop dùng Flatsome.

Nếu cần mình kèm 1-1 về Flatsome thì cứ liên hệ mình nhé.