Tùy biến nút add to cart với woocommerce – phần 2

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tùy biến nút add to cart với woocommerce – phần 2

Như chúng ta biết có 2 cách overridde woocommerce thông qua hooks và template. Trong bài trước mình chỉ dẫn sử dụng ajax cho nút add to cart, trong bài hôm nay bạn sẽ học cách tùy biến giao diện cũng như thêm tính năng của nút thêm nữa giỏ hàng.
tùy biến nút add to cart - woocommerce

Để tùy chính nút add to cart, bạn override template /woocommerce/loop/add-to-cart.php . Copy file này vào trong thư mục theme của bạn và không thay đổi cấu trúc folder.
Nội dung code của file add-to-cart.php đã được tinh giảm trong bản 2.1.0, tuy vậy cũng có thể sử dụng lại file add-to-cart.php ở phiên bản cũ hơn như 1.6.4 cũng không có gì thay đổi nhiều, code vẫn hoạt động.

Trong bản 1.6.4, add-to-cart.php cấp phép sửa lại nhãn nút add to cart với nhiều loại mặt hàng khác nhau. VD: variable, grouped, external…
Ngoài ra, bạn cũng đều có thể thay đổi giao diện tùy ý và thậm trí sử lý form field tại đây.

Trong bản mới của woocommerce đã chuyển tính năng này cho hook woocommerce_product_add_to_cart_text .
Bạn có thể tùy chọn thêm trường vào đây, add-to-cart.php sử lý trong form và bắt lấy giá trị của field sau khi nhấn nút add to cart bởi hook woocommerce_ajax_added_to_cart .

Trước tiên, mình sẽ thêm input text vào trước woocommerce_loop_add_to_cart_link trong nội dung của add-to-cart.php version 1.6.4

      is_in_stock() ) : ?>           '', 'label' =>  '', '' ); $handler = apply_filters( 'woocommerce_add_to_cart_handler', $product-> product_type, $product ); switch ( $handler ) { case "variable" : $link['url'] = apply_filters( 'variable_add_to_cart_url', get_permalink( $product-> id ) ); $link['label'] = apply_filters( 'variable_add_to_cart_text', __( 'Select options', 'woocommerce' ) ); break; case "grouped" : $link['url'] = apply_filters( 'grouped_add_to_cart_url', get_permalink( $product-> id ) ); $link['label'] = apply_filters( 'grouped_add_to_cart_text', __( 'View options', 'woocommerce' ) ); break; case "external" : $link['url'] = apply_filters( 'external_add_to_cart_url', get_permalink( $product-> id ) ); $link['label'] = apply_filters( 'external_add_to_cart_text', __( 'Read More', 'woocommerce' ) ); break; default : if ( $product-> is_purchasable() ) { $link['url'] = apply_filters( 'add_to_cart_url', esc_url( $product-> add_to_cart_url() ) ); $link['label'] = apply_filters( 'add_to_cart_text', __( 'my Add to cart', 'woocommerce' ) ); $link['add_to_cart_add_to_cart_button' ); } else { $link['url'] = apply_filters( 'not_purchasable_url', get_permalink( $product-> id ) ); $link['label'] = apply_filters( 'not_purchasable_text', __( 'Read More', 'woocommerce' ) ); } break; } echo '  '; echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('   
%s
', esc_url( $link['url'] ), esc_attr( $product-> id ), esc_attr( $product-> get_sku() ), esc_attr( $link['label'] ) ), $product, $link ); ?>

Thêm hook sử lý ajax mỗi khi người sử dụng click vào add to cart.

 add_action( 'woocommerce_ajax_added_to_cart', 'ac_add_product_custom_field' ); function ac_add_product_custom_field($product_id) { //disabled default ajax added_to_cart // check if logo_text has been defined by the client if ( isset( $_POST['logo_text'] ) ) { // do something } }  

Sẽ gọi action woocommerce_ajax_added_to_cart trong form đòi hỏi thêm sản phẩm mới vào giỏ hàng, phần nào nội dung của form include từ file add-to-cart.php, do vậy đoạn code trên có kiểm tra nếu tồn tại giá trị field ‘logo_text’ thì có thể sử lý công việc nào đó trước khi sản phẩm được thêm nữa cart.

Để kiểm tra hook woocommerce_ajax_added_to_cart có hoạt động với woocommerce hiện tại bạn đang dùng không, thử thêm hàm exit() ở đầu callback của hook , ví dụ phía trên là hàm “ac_add_product_custom_field”. Bạn sẽ thấy ảnh loading..đứng nguyên xi sau khi ấn vô nút add to cart. Có nghĩa hook này còn có hoạt động.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng đều có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Tùy biến nút add to cart với woocommerce – phần 2 được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang