Tùy chỉnh Javascript với plugin WordPress Gravity Form

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Gravity Form mang lại khá nhiều tiện ích, nhưng cũng không dễ để developer hiểu và tùy biến nó theo ý mình. Code Tốt trong bài viết này sẽ gợi ý các bạn những cách để xử lý các event handler và customize nó bằng Javascript.

Tại sao chọn Gravity Form?

Nếu bạn đã đọc bài viết trước của mình về Gravity Form, các bạn sẽ thấy nó rất tiện, có nhiều addon và ra mắt cũng đã lâu nên sự ổn định cao và ít bug.

Trong team mình làm việc, đây cũng là addon phổ biến được cài trên nhiều website khách hàng. Bạn có thể làm đủ trò từ tích hợp Stripe payment cho tới tính toán như một đơn hàng. Quả thực rất tiện nếu bạn đọc kĩ và làm theo document của Gravity Form (và tất nhiên, có tiền để mua addon).

Tùy biến Javascript với Gravity Form

Vậy tùy biến ở đây được hiểu là như thế nào? Trong giới hạn bài viết này, ta chỉ quan tâm tới các event handler, tức những thay đổi do Gravity Form tạo ra sau khi người dùng thực hiện tác vụ, như nhập nội dung nhưng bị lỗi, hoặc gửi kết quả thành công.

Mình sẽ chỉ liệt kê các khả năng phổ biến nhất khi bạn tùy biến. Do Gravity Form yêu cầu sử dụng jQuery nên các bạn nên quy ước `const $ = window.jQuery để có tác dụng ở đầu module.

gform_post_render()

Action này được trigger khi Gravity Form load các field render ra, bao gồm cả khi người dùng submit kết quả nhưng không thành công và báo lỗi.

Chẳng hạn, trong ví dụ sau, mình sẽ thêm class vào tất cả các class của field.

$(document).on('gform_post_render', function(){
  // code to trigger on AJAX form render
  const textFieldEls = el.querySelectorAll('.gfield--input', formEl)
  if (textFieldEls.length) {
    textFieldEls.map((textFieldEl) => {
      textFieldEl.classList.add('is-active')
    })
  }
})

gform_confirmation_loaded()

Action này được trigger khi Gravity Form hiển thị thông báo thành công khi người dùng submit form.

$(document).on('gform_confirmation_loaded', function(){
  const confirmMessageEl = document.querySelector('.js-success-message')
  if (confirmMessageEl) {
    confirmMessageEl.classList.add('is-visible')
  }
})

gform_init_scripts_footer

Đây là một action PHP, nhưng sẽ giúp bạn đẩy phần load script của Gravity Form từ trong <head> xuống cuối trước thẻ </body> giúp cải thiện tốc độ truy cập.

Bạn có thể thêm trong functions.php như sau:

add_filter( 'gform_init_scripts_footer', '__return_true' );

Kết luận

Còn nhiều action và hook khác giúp bạn tùy biến, tuy nhiên yêu cầu cơ bản là bạn phải đọc và nắm rõ document của Gravity Form tại đây. Do bài viết này chỉ nhằm mục đích liệt kê các trigger phổ biến và hay dùng nên mình không mô tả chi tiết hơn.

avatar
  Subscribe  
Notify of