Woocommerce, Thủ thuật, Videos Ngày 14/10/2024 740 lượt xem

Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome

Code Function sản phẩm vừa xem theo Product Slider  -Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng chức năng sản phẩm vừa xem…

Lê Anh ĐôngFlatsome trên Google News

Code Function sản phẩm vừa xem theo Product Slider  -Trong bài viết này, chúng ta sẽ tìm hiểu cách xây dựng chức năng sản phẩm vừa xem (Recently Viewed Products) trong WooCommerce sử dụng theme Flatsome. Chức năng này không chỉ giúp tăng cường trải nghiệm người dùng mà còn hỗ trợ việc bán hàng hiệu quả hơn bằng cách giới thiệu lại những sản phẩm mà khách hàng đã quan tâm.

Chúng ta sẽ khám phá cách sử dụng Product Slider để hiển thị danh sách sản phẩm vừa xem một cách trực quan và thu hút. Qua đó, bài viết sẽ cung cấp các đoạn mã cần thiết cũng như hướng dẫn từng bước để bạn có thể dễ dàng thực hiện trên trang web của mình.

Hãy cùng bắt đầu hành trình này để nâng cao khả năng tương tác của khách hàng với sản phẩm của bạn!

Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome

Trong bài viết này, chúng ta sẽ thảo luận về cách tạo một chức năng hiển thị sản phẩm vừa xem trong một trang web sử dụng theme Flatsome. Chức năng này sẽ giúp tăng cường trải nghiệm người dùng bằng cách cho phép họ dễ dàng xem lại những sản phẩm mà họ đã quan tâm.

để Bạn dễ hình dung xem qua demo mình đã làm nhé

Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome
Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome

Đây là code sau khi mình đã làm custom sản phẩm đã xem theo Phong cách Flatsome ( dùng style của flatsome và Product Slider + UX + Hook để kéo ra ) . Ok vô cách làm theo nào

1. Code Function sản phẩm vừa xem

Code Function sản phẩm vừa xem
Code Function sản phẩm vừa xem

Để thực hiện chức năng này, trước hết, chúng ta cần tạo một mảng để lưu trữ ID của các sản phẩm mà người dùng đã xem.  Dưới đây là đoạn mã mẫu:

Khởi tạo Phiên làm việc – nghĩa là khi bạn xem 1 sản phẩm, code sẽ tạo cho bạn 1 phiên làm việc và list ID của sản phẩm bạn xem đó vào danh sách bằng code bên dưới

Tạo mảng – liệt kê ID các sản phẩm bạn vừa xem vào mảng đó bằng code trên.

Gọi lại mạng và gán IDs trên vào Slider – công việc như trên là xong, việc còn lại chúng ta hook nó ra và chạy trên UX nữa là ok

Code Function đầy đủ bên bên dưới nhé, bạn chỉ cần coppy và dán đúng Function của theme đang dùng là được

Chú ý : Đoạn code full mình có thêm Hook custom của flatsome nhé( nếu muốn tìm hiểu Hook custom thì xem lại tại đây)

 

2. Kéo Hook ra trên UXbuild

Để kéo được UX Hook ra, trong custom như hình – chọn 1 Block bạn đã làm trước đó

Kéo Hook ra trên UXbuild Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome
Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome

Tiếp đến quay lại trang sản phẩm sẽ thấy UXbuild như hình

Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome
Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome

 

Tiếp đến kéo đến vị trí muốn hiện kéo Hook và chọn đúng tên Hook như hình là OK

Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome
Code Function sản phẩm vừa xem theo Product Slider và UX Flatsome

Lưu lại và xem kết quả xem có giống demo của mình không nhé

Bạn có thể xem qua demo của mình làm https://homeoffice2.uxthemes.net/san-pham/ban-choi-game-gamingdesk-chuyen-nghiep-khung-sat-lap-rap-gd68058

Nếu muốn mua mẫu theme trên vui lòng liên hệ tớ theo ZALO 0925045760 để có giá yêu thương nhé

Kết luận

Chức năng hiển thị sản phẩm vừa xem là một phần quan trọng trong việc cải thiện trải nghiệm người dùng trên trang web thương mại điện tử. Bằng cách kết hợp Code Funtion với các công cụ như Product Slider và UXBuild trong theme Flatsome, bạn có thể tạo ra một giao diện thân thiện và dễ sử dụng cho khách hàng. Hy vọng rằng bài viết này sẽ giúp bạn hiểu rõ hơn về cách triển khai chức năng này.

Điểm 5/5 - ( Có 1 bình chọn)

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Các dịch vụ của FLATSOME.XYZ