Khi tạo các code HTML trong Module Mã nguồn, bạn có thể sẽ muốn trình bày hình ảnh có sẵn liên kết tới các Module khác trong ứng dụng, để người dùng khi click vào hình ảnh sẽ liên kết tới Module do bạn chỉ định.
Để làm việc này, bạn cần xác định liên kết Module của bạn, nó là khác nhau cho mỗi ứng dụng, mỗi tài khoản quản trị và module, chúng tôi sẽ cố gắng giới thiệu một số ví dụ để bạn hiểu:
Bước 1: Để tìm liên kết tới Module trong ứng dụng, từ Module Mã nguồn, click vào “Chèn liên kết tới các Module khác trong ứng dụng”
Bước 2: Click vào Module mà bạn muốn liên kết, nhấp Chèn & Thoát
Bây giờ, một dòng code sẽ hiện ra trong Module mã nguồn của bạn, hãy quan sát nó, trong Ví dụ này, chúng tôi liên kết tới Module “Thẻ khách hàng”
Đây là dòng code:
<a data-state=”loyaltycard-view” data-params=”value_id:5445″ data-offline=”false”>Thẻ khách hàng</a>
Giải thích:
Đoạn mã code: “loyaltycard-view” là tên mã Tiếng Anh của Module Thẻ khách hàng
Giá trị: “value_id:5445″ là id Module Thẻ khách hàng trong ứng dụng này, nó sẽ có ID khác từ ứng dụng của bạn, và nó là duy nhất.
Giá trị: data-offline=”false” được thiết lập là “false” thể hiện module này không thể truy cập khi ngoại tuyến.
>Thẻ khách hàng< là tên của Module
Cảnh báo quan trọng: Bạn cần thực hiện việc thiết lập Chèn liên kết tới các Module khác cho hình ảnh trong Module Mã nguồn sau khi chắc chắn rằng ứng dụng của bạn đã hoàn thiện, không còn sự thay đổi các giá trị bắt buộc là ID và tên Module.
Bước 4: Thêm tiếp đoạn code như sau vào Module mã nguồn
<a data-state=”loyaltycard-view” data-params=”value_id:5445″ data-offline=”false”><img src=”https://appteng.com/banner_teng.png” title=”Ghi chú cho ảnh 1″ width=”200″ height=”80″/> </a>
Hãy quan sát dòng code này:
4.1. Đoạn code: data-state=”loyaltycard-view” data-params=”value_id:5445″ data-offline=”false” được lấy từ Bước 3 thể hiện tên mã Tiếng Anh của Module, ID và tên hiển thị của Moduel được chèn trong <> thứ nhất.
4.2. <img src=”https://appteng.com/banner_teng.png” title=”Ghi chú cho ảnh 1″ width=”200″ height=”80″/>
Đoạn code này bao gồm liên kết URL tới hình ảnh (trong ví dụ này là https://appteng.com/banner_teng.png), kích thước chỉ thị chiều rộng và dài cho hình ảnh (trong ví dụ này là width=”200″ height=”80″)
Hiển thị trong màn hình xem trước sẽ như dưới đây:
Bước 5: Hoàn thành
Bây giờ bạn hãy xoá dòng code thứ nhất: <a data-state=”loyaltycard-view” data-params=”value_id:5445″ data-offline=”false”>Thẻ khách hàng</a>
Công việc của bạn đã hoàn thành, bạn sẽ thấy nó hiển thị như hình ảnh dưới đây:
Khi click vào hình ảnh, ứng dụng của bạn sẽ được chuyển tới Module Thẻ khách hàng, như hình ảnh dưới đây: