Tạo công cụ tính với module SM Calculator

Chắc hẳn các bạn đã lướt web và gặp các biểu mẫu như tính lãi suất vay ngân hàng, tính lãi vay mua ô tô, tính khối lượng xây dựng,…

Trước đây, để sở hữu một công cụ tính như vậy thì bạn có thể sẽ tốn thêm chi phí mấy triệu để nhờ bên dịch vụ thiết kế website làm cho mình. Nhiều lúc bên dịch vụ web làm xong hoạt động một thời gian gây lỗi hiển thị hoặc lỗi phá vỡ giao diện website rồi nhờ hỗ trợ mãi không được.

Để khắc phục điều đó, SiteMeta đã tạo ra công cụ tính toán cho phép khách hàng tự tạo cho mình các công cụ tính mà không cần dùng đến CODE và cũng không phải tốn thêm bất kỳ chi phí nào.

Để tạo ra được một công cụ tính toán theo ý tưởng của bạn thì bạn sẽ cần chuẩn bị công thức tính, sau đó áp dụng công thức vào module SM Calculator và lấy dữ liệu từ module SM Form PRO.

Nếu bạn chưa biết cách sử dụng module SM Form PRO thì bạn có thể truy cập vào bài viết hướng dẫn thiết lập form liên hệ để tham khảo.

Được rồi, SiteMeta sẽ tiến hành hướng dẫn thực hành để bạn hiểu hơn về cách làm nhé

Tạo biểu mẫu nhập dữ liệu

Để module SM Calculator hiển thị kết quả mong muốn thì chúng ta cần tạo ra một biểu mẫu bao gồm các mục nhập thông tin. Trong ví dụ này, SiteMeta sẽ tạo ra một công cụ tính lãi suất vay cố định nhé.

Đầu tiên, truy cập vào SiteMeta Builder và chọn Nhóm SiteMeta Addons Module

Tiếp theo, kéo module SM Form Pro ra vị trí cần hiển thị trên trang.

Click vào Sửa List Item để tạo ra field số tiền vay với nhãn tính toán là [so_tien_vay]

Nhập các thông tin cần thiết như:

• Chọn Type là Text hoặc Number để hiển thị dòng nhập thông tin
• Nhãn hiển thị là Số tiền vay
• Nhãn hiển thị trong email: Đây là mục dành cho form gửi nhận thông tin ở Email, nếu bạn chỉ làm form tính toán thì không cần dùng đến thông tin này
• Default value: Là giá trị mặc định hay còn gọi là số tiền vay mặc định (đối với ví dụ này)
• Placeholder: Hiển thị nhãn phụ bên trong dòng thông tin
• Required / Optinal: Lựa chọn nhập bắt buộc hoặc không bắt buộc (chỉ dành cho form gửi nhận thông tin)
• Và mục quan trọng nhất là Biến tính toán: Dùng để xác định đây là biến cho số tiền vay, biến này sau sẽ dùng cho module SM Calculator. Bạn có thể nhập bất kỳ text nào tùy ý nhưng cần tuân thủ theo quy định là nhập không dấu, cách nhau bằng dấu “_” gạch chân và được bọc bằng 2 dấu ngoặc vuông […].

Sau khi thiết lập xong field Số tiền vay thì bạn lưu lại. Các field còn lại như Lãi suất, Số tháng vay bạn tạo tương tự bằng cách click vào Thêm List Item và tạo lần lượt 2 field còn lại.

Ok, sau khi tạo xong field thì SiteMeta có các nhãn field như sau:

• Số tiền vay – [so_tien_vay]
• Lãi suất – [lai_suat]
• Số tháng vay – [thang_vay]

Form nhập dữ liệu đã tạo xong rồi, nhưng bây giờ chúng ta chỉ dùng form này để hiển thị bảng tính chứ không có ý định gửi nhận thông tin nên chúng ta có thể ẩn nút Submit đi bằng cách click vào tab Button, sau đó kéo xuống dưới cùng và chọn Ẩn nút.

Kết quả chúng ta được:

Tiếp theo, chúng ta sẽ cần tạo một sự liên kết giữa form nhập liệu này cho module SM Calculator để module SM Calculator hiểu nó đang lấy giá trị ở form nào. Bằng cách truy cập vào tab Setting, kéo xuống dưới cùng và nhập nhãn kết nối tại Tên biến hiển thị kết quả tìm kiếm

Lưu ý: Viết nhãn kết nối là text không dấu, cách nhau bằng dấu gạch chân “_”. Và KHÔNG CẦN bọc bởi ngoặc vuông.

Như vậy tổng kết lại chúng ta có nhãn kết nối là ket_qua_tinh_lai_vay_co_dinh và các nhãn nhập liệu bên trên lần lượt là [so_tien_vay] – [lai_suat] – [thang_vay]

Tạo kết quả hiển thị với module SM Calculator

Truy cập vào nhóm SiteMeta Addons Module và kéo module SM Calculator ra vị trí cần hiển thị

Việc đầu tiên là nhập nhãn kết nối đã tạo ở tab Setting của module SM Form Pro vào mục Kết nối tên biến hiển thị kết quả tìm kiếm. Việc này sẽ giúp SM Calculator liên kết với SM Form Pro và lấy dữ liệu từ SM Form Pro ra để tính toán theo công thức được nhập ở hạng mục Nhập công thức.

Tiếp theo chúng ta nhập công thức tính vào hạng mục Nhập công thức.

Ví dụ:

A vay 90.000.000 đồng trong 18 tháng, với mức lãi suất là 10%/năm

• Số tiền gốc phải trả hàng tháng là: 90.000.000 / 18 = 5.000.000 đồng
• Số tiền lãi phải trả hàng tháng: (90.000.000 x 10%) / 18 = 500.000 đồng
• Số tiền phải trả hàng tháng là 5.500.000 đồng

Vậy chúng ta có công thức như sau:

(Số tiền vay / số tháng vay) + (((Số tiền vay * 10) / 100) / số tháng vay)

Tương đương với công thức cần nhập theo nhãn là:

([so_tien_vay] / [thang_vay]) + ((([so_tien_vay] *[lai_suat]) / 100) / [thang_vay])

Xong, chúng ta có thể lưu lại và Public trang bằng cách click nút Xong –> Đăng. Rồi tiến hành kiểm tra xem công thức có tính đúng không bằng cách nhập số liệu vào form

Kết quả sau khi nhập đã cho ra số tiền đúng như ví dụ trên.

Như vậy chúng ta đã hoàn thành bảng tính lãi suất vay cố định.

Ngoài ra bạn có thể thiết kế bố cục hiển thị bảng tính đẹp hơn theo ý tưởng của bạn. Dưới đây là một ví dụ về thiết kế bảng tính mà SiteMeta đã thực hiện.