Haravan code
- Nhóm sản phẩm
- Sản phẩm
- Trang nội dung
- Menu
- Tìm kiếm
- Giỏ hàng
- Trang Blog
- Trang Article
- Xây dựng website
Bài viết mới
Sản phẩm vừa xem - Kết hợp với HoganJS (re-write)
Trước đây đã có hướng dẫn về chức năng hiển thị sản phẩm vừa xem. Tuy nhiên, code còn khá rối, chưa tối ưu cho các trường hợp khác. Trong bài viết hôm nay sẽ hướng dẫn các bạn ứng dụng code mới để đem lại hiệu quả, cũng như dễ dàng trong việc tích hợp chức năng này cho nhiều site khác nhau.
Cách hoạt động đó là những sản phẩm vừa xem trong thời gian gần nhất sẽ được lưu lại và những sản phẩm vừa mới xem xong tức thì thì sẽ được đẩy lên, đứng ở đầu tiên. Bên cạnh đó, lúc lấy sản phẩm ra để hiển thị có thể giới hạn lại bao nhiêu sản phẩm, lấy từ vị trí nào đến vị trị nào,...
Đầu tiên, chúng ta cần file lastviewproduct.js. File này cực kì quan trọng nhé. Mọi tinh hoa đều nằm ở đây. Sau khi tải về, bạn cần upload file này lên thư mục assets của theme.
Kế đến, chúng ta cần khai báo sử dụng file script vừa tải lên, cùng với đó là thư viện HoganJS (tham khảo cú pháp). Nên đặt ở thẻ <head>
Tiếp theo, thêm đoạn code sau vào file theme.liquid (sau <body>) hoặc file javascript chính mà bạn sử dụng cho toàn bộ site để đảm bảo rằng khi muốn hiển thị sản phẩm đã xem ở một trang nào đó của site thì sẽ vẫn hoạt động tốt. Trong bài viết này, người viết lựa chọn cách đầu tiên.
Trong đó max là số sản phẩm tối đa sẽ được lưu lại, {{ settings.limit }} là giá trị người dùng sẽ quy định trong settings của theme (cái này phải làm settings cho theme nhé). Ngoài ra còn một số tham số bổ sung thêm sẽ được giải thích chi tiết sau.
Tiếp theo, trong product.liquid cần thêm đoạn code sau (ở đầu file) để khi khách hàng xem sản phẩm thì sản phẩm đó sẽ được lưu lại vào dữ liệu của chúng ta
Công đoạn cuối cùng, tạo mới file snippets (cho dễ quản lí code, tái sử dụng) với tên và thêm đoạn code sau
Lưu ý:
- Đoạn HTML ở trên cùng chỉ là tận dụng theo cấu trúc của theme hiện tại (trong bài viết là theme mặc định). Mỗi theme sẽ có cấu trúc khác nhau
- Đoạn script <script id="product-loop-tpl" type="text/template"> đơn giản là đoạn HTML mẫu dùng để gắn dữ liệu và hiển thị ra bên ngoài. Lưu ý quan trọng, id và type - type sẽ được dùng để cho trình duyệt bỏ qua đoạn script và không chạy như các đoạn script bình thường khác. Đặc biệt, {% raw %} ở đây nhằm mục đích bỏ qua sự ảnh hưởng của Liquid, vì kí tự render dữ liệu của HoganJS tương tự như Liquid (đều dùng kí tự {{ }}).
- Đoạn script cuối, lưu ý lastViewProducts.all(0, 3) sẽ lấy ra 3 sản phẩm đầu tiên
Demo: http://thotrandev.myharavan.com/products/sandal-de-xuong-ca-tinh-sd153d
BONUS
Giải thích về JSON.parse (hàm save() cuối file) và JSON.stringify (hàm all() và biến handles ) trong lastviewproduct.js:
- JSON.stringify: Dữ liệu sản phẩm là mảng (Array), trong khi localStorage/sessionStorage chỉ cho phép lưu dạng chuỗi, nên cần convert sang chuỗi trước khi lưu
- JSON.parse: Vì dữ liệu trước đó khi lưu xuống đã được chuyển sang chuỗi, khi lấy ra sử dụng cần convert về dạng cũ là mảng
*******************************
Một vài tham số khi khởi tạo đối tượng lastViewProducts (khai báo ở theme.liquid):
- max: Kiểu số - như đã đề cập ở trên, tham số này quy định tối đa số sản phẩm sẽ được lưu lại
- storageKey: Kiểu chuỗi - tên của localStorage/sessionStorage sẽ sử dụng để lưu dữ liệu
- forever: Kiểu logic (true, false) - Nếu true thì sẽ dùng localStorage để lưu dữ liệu, ngược lại sẽ dùng sessionStorage. Mặc định là true
Một số hàm gọi và các tham số tương ứng. Lưu ý là các sản phẩm trả về luôn là các đối tượng JSON (có thể xem sản phẩm cụ thể để rõ hơn):
- all( offset, limit ): Dùng để lấy ra tất cả sản phẩm đã lưu. Mặc định lấy ra tất cả
+ offset: Vị trí bắt đầu, tính từ 0. Mặc định 0
+ limit: Quy định tối đa bao nhiêu sản phẩm sẽ được lấy ra. Mặc định 0
=> Trả về mảng (Array)
- count(): Lấy ra tổng số sản phẩm hiện đang lưu
=> Trả về số (Integer)
- add( handle ): Thêm 1 sản phẩm và lưu lại
+ handle: Handle của sản phẩm
=> Trả về đối tượng (JSON)
- get( handle ): Lấy ra 1 sản phẩm thông qua handle của sản phẩm đó
+ handle: Handle của sản phẩm
=> Trả về đối tượng (JSON)
- find( handle ): Tìm xem handle của sản phẩm đã có trong dữ liệu đã lưu và cho biết vị trí của nó
+ handle: handle của sản phẩm
=> Trả về số (Integer)
- exist( handle ): Tương tự find nhưng trả về giá trị logic
+ handle: Handle của sản phẩm
=> Trả về true/false (Boolean)
- getByOffset( offset ): Lấy 1 sản phẩm ở vị trí offset trong dữ liệu đã lưu
+ offset: Vị trí cần lấy
=> Trả về đối tượng (JSON)
- remove( handle ): Xóa sản phẩm ra khỏi danh sách
+ handle: Handle của sản phẩm
=> Trả về true/false (Boolean)
- clear(): Xóa tất cả sản phẩm đã lưu
=> Trả về true