01.

Module sản phẩm
Trong video này, chúng ta sẽ cùng tìm hiểu về hai module là Module Sản phẩm lựa chọn và Module Sản phẩm theo danh mục. Mặc dù hai module này có cách cấu hình và các tùy chọn cài đặt tương đối giống nhau, nhưng mục đích sử dụng lại khác nhau. Chúng ta sẽ lần lượt tìm hiểu từng module để biết cách sử dụng phù hợp với từng nhu cầu hiển thị sản phẩm trên website.
Đối với module này, chúng tôi đã xây dựng sẵn class giúp tối ưu cách hiển thị hình ảnh sản phẩm
1/Thêm sản phẩm
Đầu tiên, truy cập vào trang quản trị thông qua thanh điều hướng của hệ thống. Tiếp theo, tại mục Sản phẩm, chúng ta tiến hành thêm một số sản phẩm mẫu. Tại đây, người dùng có thể thiết lập các thông tin như hình ảnh sản phẩm, tiêu đề, giá cũ, giá mới cùng các thuộc tính chi tiết khác nếu cần. Phần Danh mục sẽ quyết định sản phẩm được hiển thị tại những khu vực hoặc trang tương ứng trên website. Trong ví dụ này, chúng tôi lựa chọn danh mục Cửa hàng.
2/ Điều hướng sang giao diện
Sau khi thêm thành công, sản phẩm sẽ được cập nhật vào danh sách sản phẩm của hệ thống.Tiếp theo, chúng ta truy cập vào khu vực thiết kế thông qua trang danh mục, tìm đến trang cửa hàng và nhấp vào tên trang, lúc này hệ thống sẽ tự động điều hướng chúng ta đến khu vực thiết kế giao diện. Trước tiên chúng ta sẽ cùng tìm hiểu module sản phẩm theo danh mục, sau khi kéo module vào khu vực thiết kế của trang cửa hàng, hệ thống sẽ tự động lấy và hiển thị các sản phẩm thuộc danh mục cửa hàng.
3/ Cấu hình khoảng cách, class
Tại đây, chúng tôi đã cấu hình sẵn một số sản phẩm thuộc danh mục cửa hạng để minh họa cho cách hiển thị của module, đồng thời chúng tôi đã thiết lập các class riêng cho module và tận dụng một số class có sẵn của hệ thống nhằm tăng tính thẩm mỹ, đảm bảo sản phẩm được hiển thị gọn gàng, trực quan và phù hợp với giao diện tổng thể của trang.
4/ Cấu hình cho module :
Để cấu hình cho module, chúng ta nhấp trực tiếp vào module trên giao diện thiết kế. Tại thanh sidebar, mục thêm sản phẩm và danh sách sản phẩm được cung cấp nhằm hỗ trợ truy cập nhanh đến khu vực quản lý sản phẩm
Ô số lượng sản phẩm cho phép giới hạn số lượng sản phẩm được hiển thị trên mỗi trang, mặc định hệ thống sẽ hiển thị toàn bộ sản phẩm trên một trang duy nhất , nếu người dùng nhập giá trị là 2, mỗi trang sẽ chỉ hiển thị 2 sản phẩm, những sản phẩm còn lại sẽ được phân bổ sang những trang tiếp theo và hiển thị thông quan chức năng phân trang của hệ thống.
Tiếp theo là các ô tên sản phẩm và mô tả sản phẩm, 2 thiết lập này cho phép người dùng kiểm soát số lượng từ được hiển thị hoặc ẩn hiện nội dung tương ứng trên giao diện. Ví dụ, nếu nhập giá trị 1, hệ thống sẽ chỉ hiển thị một từ, nhập 2 sẽ hiển thị 2 từ đầu tiên của nội dung. Đặc biệt khi nhập giá trị -1, hệ thống sẽ tự động ẩn hoàn toàn phần nội dung tương ứng với ô đã cấu hình, nếu không nhập giá trị nào, hệ thống sẽ sử dụng cấu hình mặc định và hiển thị đầy đủ nội dung, giúp người dùng linh hoạt hơn trong việc tùy chỉnh giao diện hiển thị sản phẩm. Ngoài ra, người dùng có thể tùy chọn tên danh mục của sản phẩm và thay đổi hình ảnh để phù hợp với giao diện thiết kế
+ Responsive
Người dùng có thể chỉnh kích thước chữ trực tiếp ngay trên giao diện.
Ngoài ra, module còn hỗ trợ tùy chỉnh bố cục hiển thị sản phẩm trên từng thiết bị khác nhau, người dùng có thể thiết lập số cột sản phẩm riêng cho máy tính, máy tính bảng và điện thoại nhằm tối ưu khả năng hiển thị trên từng kích thước màn hình. Bên cạnh đó, hệ thống cũng cho phép thay đổi vị trí hình ảnh sản phẩm, lựa chọn thẻ tiêu đề phù hợp và một số thiết lập hiển thị khác giúp giao diện sản phẩm linh hoạt hơn và đáp ứng nhiều nhu cầu thiết kế khác nhau.
+Các nút
Cuối cùng là nhóm nút chức năng sản phẩm, người dùng có thể tùy chọn hiển thị hoặc ẩn các nút như xem nhanh, yêu thích hoặc thêm vào giỏ hàng, các nút này giúp khách hàng thao tác nhan hơn với sản phẩm đồng thời nâng cao trải nghiệm mua sắm trên website
*Module sản phẩm lựa chọn
Tiếp theo là module sản phẩm lựa chọn, tương tự như module sản phẩm theo danh mục, chúng tôi đã xây dựng sẵn các class riêng của module và kết hợp với một số class có sẵn của hệ thống nhằm hỗ trợ trang trí giao diện, tạo khoảng cách giữa các thành phần và giúp khu vực hiển thị sản phẩm trở nên hài hòa, đẹp mắt hơn, người dùng có thể sử dụng ngay hoặc tùy chỉnh thêm theo nhu cầu thiết kế của mình
Module Sản phẩm lựa chọn có cách hoạt động tương tự module sản phẩm theo danh mục, tuy nhiên vẫn có một số điểm khác biệt. Đối với module sản phẩm theo danh mục, hệ thống sẽ tự động lọc và hiển thị các sản phẩm tương ứng với trang đang sử dụng module. Trong khi đó, module Sản phẩm lựa chọn mặc định sẽ hiển thị sản phẩm từ nhiều danh mục khác nhau và giới hạn tối đa 8 sản phẩm trên giao diện. Nếu cần hiển thị nhiều hơn, người dùng có thể dễ dàng điều chỉnh số lượng sản phẩm thông qua các thiết lập tại thanh Sidebar của module.
Ngoài các thiết lập tương tự như module Sản phẩm theo danh mục, module Sản phẩm lựa chọn còn hỗ trợ tính năng lựa chọn danh mục hiển thị. Người dùng có thể chỉ định một danh mục cụ thể để lấy sản phẩm hiển thị trong module, cho phép hiển thị sản phẩm của bất kỳ danh mục nào trên bất kỳ trang nào của website. Ví dụ, module được đặt tại trang Công ty của chúng tôi nhưng vẫn có thể hiển thị các sản phẩm thuộc danh mục Cửa hàng hoặc các danh mục khác theo nhu cầu. Bên cạnh đó, người dùng cũng có thể chọn chế độ Tự động, khi đó hệ thống sẽ tự động lấy và hiển thị các sản phẩm đã được cấu hình tương ứng với trang hiện tại giống như module tin bài theo danh mục, giúp việc thiết lập trở nên nhanh chóng và thuận tiện hơn.
Tiếp theo là mục Loại sản phẩm, cho phép người dùng lọc sản phẩm theo các nhóm như Nổi bật, Yêu thích hoặc Xem nhiều. Các thuộc tính này có thể được thiết lập trực tiếp khi thêm mới hoặc chỉnh sửa sản phẩm tại trang quản trị. Nhờ đó, người dùng có thể dễ dàng xây dựng các khu vực sản phẩm theo mục đích hiển thị, chẳng hạn như sản phẩm nổi bật, sản phẩm được quan tâm nhiều hoặc sản phẩm được xem nhiều nhất.
Trong ví dụ này, chúng tôi sẽ thiết lập sản phẩm Dâu tây và sản phẩm Quả táo thuộc loại Sản phẩm nổi bật. Sau khi lưu cấu hình, chúng ta quay lại khu vực thiết kế và chọn loại sản phẩm là Nổi bật. Lúc này, hệ thống sẽ tự động lọc và chỉ hiển thị hai sản phẩm đã được phân loại là sản phẩm nổi bật trước đó.
Các chức năng còn lại của module Sản phẩm lựa chọn đều tương tự như module Sản phẩm theo danh mục.
Như vậy, chúng ta đã cùng tìm hiểu toàn bộ các tính năng và cách sử dụng của hai module hiển thị sản phẩm trên hệ thống Tapato. Hy vọng video sẽ giúp các bạn dễ dàng hơn trong quá trình thiết kế và quản lý nội dung sản phẩm trên website.
Cảm ơn các bạn đã theo dõi video. Xin chào và hẹn gặp lại các bạn trong những video tiếp theo.
Module Sản Phẩm của TAPATO được phát triển nhằm giúp doanh nghiệp dễ dàng quản lý, trình bày và quảng bá sản phẩm trên website một cách chuyên nghiệp. Với hệ thống cấu hình trực quan, quản trị viên có thể tùy chỉnh giao diện hiển thị sản phẩm theo nhu cầu thực tế mà không cần can thiệp vào mã nguồn hay thực hiện các thao tác kỹ thuật phức tạp.
Từ website giới thiệu sản phẩm, catalog điện tử đến các hệ thống bán hàng trực tuyến, Module Sản Phẩm TAPATO mang đến khả năng tùy biến mạnh mẽ, giúp tối ưu trải nghiệm người dùng và nâng cao hiệu quả kinh doanh.
Hệ thống cho phép quản trị viên dễ dàng thiết lập số lượng sản phẩm hiển thị trên mỗi trang hoặc trong từng khối sản phẩm.
Tính năng này giúp:
Tối ưu tốc độ tải trang.
Kiểm soát bố cục hiển thị.
Nâng cao trải nghiệm người dùng.
Phù hợp với từng loại website và chiến lược kinh doanh.
Mọi thay đổi đều có thể thực hiện trực tiếp trên giao diện quản trị mà không cần chỉnh sửa mã nguồn.
Để đáp ứng nhiều phong cách thiết kế khác nhau, Module Sản Phẩm TAPATO cho phép quản trị viên chủ động lựa chọn các thành phần cần hiển thị hoặc ẩn đi, bao gồm:
Hình ảnh sản phẩm
Tên sản phẩm
Mô tả ngắn
SP nổi bật (Hot, Mới, Khuyến mãi...)
Việc tùy chỉnh linh hoạt giúp giao diện phù hợp với từng ngành nghề và mục đích sử dụng.
Để đảm bảo tính đồng nhất cho giao diện, hệ thống hỗ trợ thiết lập giới hạn độ dài hiển thị cho:
Giới hạn số từ hoặc ký tự hiển thị.
Tránh làm vỡ bố cục khi tên sản phẩm quá dài.
Tự động cắt nội dung theo số lượng từ được cấu hình.
Giúp danh sách sản phẩm gọn gàng và dễ theo dõi hơn.
Module Sản Phẩm TAPATO cho phép cấu hình giao diện riêng cho từng loại thiết bị:
Thiết lập số cột hiển thị sản phẩm.
Tối ưu không gian trình bày trên màn hình lớn.
Điều chỉnh số cột phù hợp với kích thước màn hình trung bình.
Thiết lập bố cục tối ưu cho trải nghiệm cảm ứng.
Tăng khả năng xem và tương tác với sản phẩm.
Nhờ đó website luôn đảm bảo hiển thị đẹp mắt và chuyên nghiệp trên mọi thiết bị.
Hệ thống hỗ trợ nhiều phương thức hiển thị hình ảnh linh hoạt như:
Ảnh phía trên nội dung
Ảnh bên trái
Ảnh bên phải
Hiển thị dạng thẻ sản phẩm
Ẩn hình ảnh khi cần
Ngoài ra, vị trí ảnh có thể được cấu hình riêng cho Desktop, Tablet và Mobile nhằm tối ưu trải nghiệm người dùng trên từng thiết bị.
Đối với các sản phẩm có nhiều hình ảnh, quản trị viên có thể dễ dàng cấu hình:
1 cột ảnh
2 cột ảnh
3 cột ảnh
4 cột ảnh hoặc nhiều hơn tùy giao diện
Giúp khách hàng quan sát sản phẩm rõ ràng hơn và nâng cao tính chuyên nghiệp cho website.
Module hỗ trợ cấu hình các thẻ tiêu đề chuẩn SEO cho phần tên sản phẩm và tiêu đề khối sản phẩm:
H1
H2
H3
H4
H5
H6
Việc kiểm soát cấu trúc Header giúp:
Tăng khả năng nhận diện nội dung của công cụ tìm kiếm.
Hỗ trợ tối ưu SEO tổng thể.
Cải thiện trải nghiệm người dùng khi đọc nội dung trên website.
Một trong những ưu điểm nổi bật của Module Sản Phẩm TAPATO là khả năng tùy biến mạnh mẽ thông qua giao diện quản trị trực quan.
Người quản trị có thể:
✅ Thiết lập giao diện hiển thị nhanh chóng.
✅ Tùy chỉnh số cột và bố cục trên từng thiết bị.
✅ Bật/tắt các thành phần hiển thị chỉ với vài thao tác.
✅ Quản lý hình ảnh và nội dung sản phẩm linh hoạt.
✅ Tối ưu SEO hiệu quả.
✅ Không cần kiến thức lập trình hoặc chỉnh sửa mã nguồn.
Với Module Sản Phẩm TAPATO, doanh nghiệp có thể dễ dàng xây dựng hệ thống giới thiệu và kinh doanh sản phẩm chuyên nghiệp, hiện đại, đáp ứng mọi yêu cầu vận hành và phát triển website trong thời đại số.