Add-on Product Filter

Chúng ta thường sử dụng phần add-on Product filter để giúp cho khách hàng họ có thể tìm kiếm và lọc ra những sản phẩm có phần thuộc tính chi tiết hơn như: màu sắc, mức giá, kích thước…

Việc trước tiên những sản phẩm đó cần tạo các trường thuộc tính để có thông tin chi tiết cho sản phẩm cần lọc: VD: màu sắc, kích thước, những hình ảnh khác nhau đại diện cho các mặt sản phẩm đó… vì vậy, ta cần quan tâm đến Custom Field.

Bước 1: Tại trang quản trị, chọn mục Product sau đó click chọn item Custom Field. Và thao tác như hình bên dưới.

Tab Color:

- Cần Tạo 1 group để gom thành nhóm có thể loại cho từng phần tử. Click chọn Add Group. Ta cần cần đặt tên cho nhóm đó. Vd: mình đã tạo 1 group có tên “màu”.

- Thêm phần tử cho group “màu” click Add Child. Và đặt tên chọn tính năng cho phần tử đó. Lưu ý: đối với việc ta chọn tình năng image, sau khi bạn thêm ảnh cho phẩn tử này, tại ô input kế bên sẽ xuất hiện đường link mà bạn đã upload ảnh đó bạn cần xác nhận mục này bằng cách click trỏ chuột vào ô này và xác nhận bằng phím Enter để hoàn tất. Tương tự các phần tử có tính năng Image ta cũng cần thực hiện như trên.

- Tương tự ở các tab: Size, Brand, Origin, Custom. Ta cũng thực hiện lần lượt theo thứ tự như ở tab Color.

Bước 2: Sau khi hoàn thành cho Custom Field, chúng ta sẽ trở lại cho phần Product cate mà bạn đã tạo phân loại cho từng sản phẩm. Ta cần thêm trường Custom Field tại mục Specification trong category mà mình muốn, ta thực hiện như hình bên dưới:

Bước 3: Tạo sản phẩm tại item All product. Ta cũng lần lượt thêm những thông tin cần thiết cho sản phẩm. Chọn mục Category mà bạn đã tạo có liên kết custom field. Nhấn Save để lưu sản phẩm bình thường. Tiếp đế chuyển qua Tab Specification ta thực hiện như hình dưới. Nhấn Save để tiếp tục lưu thông tin.

Bước 4: Qua tab Attribute. Bước này chính là phần ta cần nhập những thông tin chi tiết cho sản phẩm, mục này sẽ cho ta hiển thị thông tin của từng loại mà sản phẩm đó có nhiều tính năng để người dùng có thể lọc được những thông tin cần tìm. Vd: ở đây mình chỉ có tạo trường thuộc tính Custom Field là Màu nên chỉ hiển thị thông tin màu cho sản phẩm đó.

Hoàn tất ta check vào ô check radio button để hiển thị mục Custom Field sản phẩm mặc định khi xem trên giao diện trang chi tiết.

Bước 5: Trong phần thiết kế giao diện Visual 3, ta cần tạo 1 Block để chứa add-on Product Filter, Chọn add-on Product Filter hoặc gõ tìm kiếm với Product Filter trên thanh add-on. Sau đó kéo thả vào vùng Block được chọn.

Bước 6: Tìm và Click chọn phần Icon Config (biểu tượng bánh răng cưa) của Add on Product Filter trên thanh Layer xuất hiện hộp thoại.

Tab DISPLAY

Addon Title: Cho phép hiển thị Tiêu đề cho add-on Filter

Addon Description: Cho phép hiển thị mô tả cho add-on Filter

Color Filter: Tính năng lọc màu sắc mà bạn đã cấu hình trên trang quản trị product tại mục Custom field

Price Filter: Tính năng lọc các mức giá mà bạn đã cấu hình trên trang quản trị product tại mục Custom field

Max Price: Tạo mức giá cho phép lọc lớn nhất.

Bước 7: Khi bạn cấu hình toàn bộ các thẻ trên ta nhấn nút Apply để hoàn thành việc Config cho Product Filter.