Cách cá nhân hóa công cụ tìm kiếm thương mại điện tử của bạn

Mua sắm trực tuyến ban đầu được thiết kế như một con đường vinh quang dẫn đến sự tiện lợi — một vài cú nhấp chuột và các mặt hàng yêu thích của bạn sẽ được vận chuyển thẳng đến cửa nhà bạn, không cần tương tác xã hội hay đi bộ qua các trung tâm mua sắm!

Kể từ đó, thương mại điện tử đã phát triển thành một thứ hoàn toàn khác. Giờ đây, các cửa hàng trực tuyến có thể cảm thấy choáng ngợp với danh mục dường như không bao giờ kết thúc và hướng dẫn tối thiểu giữa các cá nhân. Do đó, người dùng trong trải nghiệm thương mại điện tử có xu hướng dựa nhiều vào tìm kiếm để giúp thu hẹp những gì họ cần, nhưng có thể gặp phải tình trạng tiến thoái lưỡng nan theo chu kỳ khi tìm kiếm hàng nghìn kết quả để tìm thấy những gì họ thực sự đang tìm kiếm. Tuy nhiên, cá nhân hóa trải nghiệm tìm kiếm của bạn với Algolia có thể loại bỏ tình trạng khó xử này bằng cách cá nhân hóa các kết quả tìm kiếm đó dựa trên hoạt động và sở thích của người dùng. Điều này mang lại trải nghiệm tìm kiếm tốt hơn cho người dùng và cũng tăng mức độ tương tác với danh mục trang web của bạn, đây là một chiến thắng cho tất cả mọi người!

Algolia cung cấp các công cụ để giúp các nhà phát triển triển khai các tính năng Tìm kiếm được Cá nhân hóa dễ dàng. Đọc tiếp để tìm hiểu cách tận dụng Cá nhân hóa Algolia để tạo trải nghiệm tìm kiếm tùy chỉnh mà người dùng của bạn sẽ yêu thích!

Những gì chúng tôi đang xây dựng

Trong hướng dẫn này, chúng ta sẽ xây dựng một ứng dụng thương mại điện tử bằng cách sử dụng React và Commerce.js. May mắn thay, chúng tôi sẽ không phải xây dựng từ đầu — chúng tôi sẽ sử dụng ứng dụng thương mại điện tử cơ bản này với các tính năng Đề xuất mà chúng tôi đã xây dựng trong bài viết này làm điểm bắt đầu.

Sau khi hoàn thành hướng dẫn, ứng dụng của chúng tôi sẽ có thể tìm kiếm danh mục sản phẩm của cửa hàng và đưa ra các kết quả tìm kiếm có liên quan (và được cá nhân hóa) dựa trên hoạt động của người dùng:

Nếu muốn xem trước toàn bộ mã của dự án, bạn có thể truy cập vào kho lưu trữ ứng dụng algolia-commercejs-personalizations-app .

Bắt đầu

Trước khi chúng tôi bắt đầu xây dựng, hãy đảm bảo bạn thiết lập như sau:

• Node: Để kiểm tra xem bạn đã cài đặt Node chưa, hãy chạy node -v trong dòng lệnh của bạn. Nếu không có phiên bản nào hiện lên, bạn sẽ cần cài đặt phiên bản đó — bạn có thể tìm hướng dẫn cài đặt cho máy của mình tại đây .
• ngrok: Tạo tài khoản ngrok tại đây . Bạn sẽ cần nó để tạo đường hầm kết nối từ các ứng dụng cục bộ của mình để có thể định cấu hình webhook và thực hiện lệnh gọi API.
• Chec: Commerce.js sử dụng một nền tảng có tên là Chec để quản lý các tích hợp, Khóa API và sản phẩm của bạn. Bạn sẽ cần tạo tài khoản tại đây , sau đó thiết lập cửa hàng Commerce.js.
• Algolia: Để tận dụng các tính năng của Algolia, hãy tạo tài khoản kế hoạch Algolia Build miễn phí. Sau khi bạn có tài khoản, hãy tạo một ứng dụng đại diện cho ứng dụng thương mại điện tử của bạn và một chỉ mục có tên là products .
  • Sự kiện đề xuất của Algolia: Để sử dụng các tính năng đầy đủ của ứng dụng, hãy thiết lập Đề xuất của Algolia – để làm như vậy, bạn cần tạo ít nhất 500 sự kiện chuyển đổi trong 3 ngày, theo cách thủ công hoặc thông qua CSV .
  • LƯU Ý: Bạn cũng sẽ cần những sự kiện này để sử dụng Cá nhân hóa Algolia.
  • Mô hình đề xuất Algolia: Sau khi bạn đã thiết lập và tổng hợp các sự kiện của mình, hãy tạo mô hình đề xuất cho các mục thịnh hành dựa trên các sự kiện này để chúng có thể hiển thị trong ứng dụng của bạn.

Nếu bạn không quen thuộc với các khái niệm Algolia ở trên và không chắc chắn cách tự thiết lập nó, thì bạn thật may mắn! Chúng tôi có hướng dẫn đầy đủ ghi lại các bước thiết lập ở trên cũng như thiết lập dữ liệu cần thiết khác, chẳng hạn như các sự kiện dành cho đề xuất, cá nhân hóa và tạo mô hình đề xuất.

Khi bạn có một cửa hàng thương mại điện tử đang chạy tại địa phương đang hiển thị thành công các sản phẩm của mình, chạy chatbot và hiển thị các đề xuất mặt hàng thịnh hành trên trang chi tiết sản phẩm của bạn, bạn có thể tiến hành bước tiếp theo!

Thời gian để xây dựng

Cá nhân hóa Algolia sử dụng sở thích cụ thể của người dùng, được theo dõi thông qua các sự kiện, để tạo ra các kết quả cá nhân và phù hợp hơn cho trải nghiệm tìm kiếm của họ. Vì các tìm kiếm có thể có ý nghĩa khác nhau đối với những kiểu người khác nhau, nên Cá nhân hóa sẽ đảm bảo rằng người dùng sẽ thấy kết quả quan trọng nhất đối với họ trước tiên. Để tận dụng sự kỳ diệu của Cá nhân hóa, trước tiên chúng ta cần làm theo một số bước.

Phân loại sản phẩm của bạn

Để cung cấp thông tin chi tiết sâu hơn về mối quan hệ giữa các sản phẩm của bạn, bạn cần tạo và thêm danh mục vào sản phẩm của mình trong Commerce.js. Danh mục có thể là bất kỳ nhóm chung nào về cách các sản phẩm liên quan với nhau – trong ví dụ về cửa hàng ký gửi cổ điển của chúng tôi, đó có thể là các loại quần áo (áo, phụ kiện, giày), nhãn hiệu (Vivienne Westwood, Dior, Chanel) và thậm chí danh mục phụ trong các danh mục đó (trong giày, có giày thể thao, giày cao gót và bốt).

Thêm danh mục trong Commerce.js và gán chúng cho sản phẩm

Đầu tiên, chúng tôi sẽ thêm danh mục vào sản phẩm của mình trong Commerce.js. Điều hướng đến trang Danh mục trong thanh bên của bảng điều khiển Chec của bạn và nhấp vào nút “Thêm” ở trên cùng bên phải để thêm danh mục mới. Danh mục có thể có danh mục chính và danh mục con.

Khi bạn đã tạo tất cả các danh mục mong muốn, hãy điều hướng đến Sản phẩm của bạn trong Commerce.js và chỉ định các danh mục này cho chúng. Thêm bao nhiêu danh mục tùy thích vào mỗi sản phẩm — càng nhiều danh mục được thêm vào, càng có nhiều cơ hội xây dựng mối quan hệ giữa các mặt hàng!

Danh sách sản phẩm được cập nhật sẽ tự động đồng bộ hóa với Algolia nhờ webhook mà bạn đã thiết lập trong Commerce.js để đẩy các sản phẩm mới tới Algolia cho các sự kiện products.create và products.update . Nếu bạn chưa cấu hình cái này, hãy đọc hướng dẫn trong README của dự án để thêm nó vào.

Chúng tôi khuyên bạn nên kiểm tra kỹ các sản phẩm của mình trong Algolia để đảm bảo rằng các danh mục đang được điền cho từng mặt hàng tương ứng mà bạn cập nhật trong Commerce.js. Nếu bạn thấy rằng các sản phẩm không đồng bộ hóa với chỉ mục Algolia của mình, bạn có thể đăng ký trên webhook đã định cấu hình của mình trong Chec tại đây .

Xác định thuộc tính cho các khía cạnh trong Algolia

Với mỗi sản phẩm trong kho của bạn được phân loại, chúng tôi có thể chỉ định tầm quan trọng của các danh mục này thông qua khía cạnh . Các khía cạnh là một tập hợp các danh mục có thể lọc cho phép người dùng tinh chỉnh kết quả thông qua nhiều danh mục cùng một lúc. Các danh mục này, được gọi là "thuộc tính" trong Algolia, sẽ bao gồm các danh mục mà chúng tôi đã chỉ định cho các sản phẩm của mình trong Commerce.js.

Để khai báo các thuộc tính cho faceting, hãy điều hướng đến chỉ mục của ứng dụng trong bảng điều khiển Algolia của bạn. Sau đó, nhấp vào “Cấu hình” và tìm liên kết “Các khía cạnh” bên dưới tiêu đề “Lọc và tạo khuôn mặt”. Trong tiêu đề “Thuộc tính cho faceting”, hãy nhấp vào “Thêm thuộc tính” - thao tác này sẽ hiển thị một loạt thuộc tính mà mọi mục trong chỉ mục của bạn sở hữu. Tìm thuộc tính categories.name . Nếu bạn gặp sự cố khi tìm mục này, hãy kiểm tra kỹ dữ liệu chỉ mục của mình để đảm bảo trường categories được điền bằng các đối tượng chứa thuộc tính name .

• 💡 Nếu bạn muốn có một khía cạnh bổ sung để có kết quả được cá nhân hóa hơn nữa, chúng tôi cũng có thể thêm các thẻ SEO mà chúng tôi đã tạo cho các tìm kiếm mặt hàng ( seo.description ) làm thuộc tính.

Với mỗi thuộc tính, bạn cũng có thể phân loại chúng theo các thuộc tính “chỉ bộ lọc”, “có thể tìm kiếm” hay “không thể tìm kiếm”. Bạn có thể tìm hiểu thêm về các nhóm này tại đây .

Sau khi hoàn thành, phần “Thuộc tính cho faceting” của chỉ mục của bạn sẽ giống như sau:

Thiết lập cá nhân hóa

Bây giờ, chúng ta đã sẵn sàng thiết lập Cá nhân hóa thông qua bảng điều khiển!

💡 *Cá nhân hóa là một tính năng Algolia cao cấp có sẵn trong gói Xây dựng miễn phí để phát triển tiền sản xuất.*

Bắt đầu bằng cách điều hướng đến phần Cá nhân hóa trong tài khoản của bạn . Nếu đây là lần đầu tiên bạn sử dụng Cá nhân hóa, bạn sẽ thấy màn hình này:

Nhấp vào “Bật Cá nhân hóa” và làm theo quy trình để chấp nhận các điều khoản và điều kiện.

Khi bạn đã hoàn thành quy trình, bạn sẽ thấy một trang tổng quan giống như sau:

Trong trang tổng quan này, bạn có thể thiết lập chiến lược Cá nhân hóa để đảm bảo người dùng thấy kết quả phù hợp nhất với dữ liệu bạn có. Có hai yếu tố khác nhau ảnh hưởng đến chiến lược này:

• Sự kiện : Cơ chế chính để tìm hiểu mối quan hệ của người dùng. Chúng được thu thập thông qua Insights API. Trong ứng dụng của mình, chúng tôi hiện đang thu thập các sự kiện chuyển đổi do người dùng nhấp vào sản phẩm kích hoạt.
• Các khía cạnh : Chúng đã được định cấu hình cho chỉ mục của bạn trước đó trong bài viết này. Các khía cạnh bao gồm các danh mục, nhóm và chi tiết bổ sung của sản phẩm cung cấp thêm thông tin chi tiết về một mặt hàng được tương tác trong một sự kiện và chính xác những gì người dùng thích về sản phẩm đó (ví dụ về điều này là thương hiệu, loại sản phẩm hoặc màu sắc).

Cân nhắc sự kiện và khía cạnh

Trong bảng điều khiển, bạn sẽ có thể cân nhắc tầm quan trọng của cả sự kiện và khía cạnh ảnh hưởng đến chiến lược của mình. Cân nhắc cho phép bạn đặt các mức độ quan trọng khác nhau và thêm ít nhiều ý nghĩa cho một số sự kiện và khía cạnh so với những sự kiện và khía cạnh khác, kết hợp tất cả các trọng số vào một chiến lược chung sẽ ảnh hưởng đến Cá nhân hóa.

Để bắt đầu cân, bạn cần thêm các sự kiện và khía cạnh mà bạn muốn có trong chiến lược của mình. Mọi sự kiện có sẵn cho chỉ mục của bạn sẽ tự động hiển thị trong danh mục "Sự kiện có sẵn" trên trang tổng quan. Nếu bạn không thấy bất kỳ sự kiện nào, hãy thử tạo lại một số sự kiện chuyển đổi với các khía cạnh mới được thêm vào bằng cách nhấp vào các sản phẩm khác nhau trong cửa hàng của bạn. Để thêm sự kiện vào chiến lược của bạn sau khi chúng xuất hiện trong “Sự kiện có sẵn”, hãy nhấp vào nút “Thêm vào chiến lược”.

Đối với các khía cạnh, bạn có thể thêm chúng bằng cách nhấp vào nút “Thêm khía cạnh” ở bên phải bảng điều khiển. Từ đó, bạn có thể chọn bất kỳ thuộc tính nào cho faceting mà bạn đã thêm trước đó, chẳng hạn categories.name và seo.description :

Khi thêm các sự kiện và khía cạnh này, bạn sẽ có thể điều chỉnh tỷ lệ phần trăm trọng số cho các khía cạnh và sự kiện khác nhau được thêm vào chiến lược của mình. Trọng số càng cao, sự kiện hoặc khía cạnh đó sẽ càng được ưu tiên trong chiến lược của bạn.

Tìm hiểu thêm thông tin cụ thể về cân sự kiện và cân khía cạnh trong bài viết này .

Xác định tác động cá nhân hóa

Ngoài việc cân nhắc, bạn có thể xác định tác động của chiến lược Cá nhân hóa để tác động đến việc tăng vị trí tương đối mà sở thích của người dùng có trên xếp hạng tìm kiếm. Đối với hướng dẫn này, chúng tôi đã để tác động ở mức mặc định là 50%.

Khám phá chiến lược chuyên sâu về tác động của Cá nhân hóa tại đây.

Mô phỏng chiến lược của bạn

Để kiểm tra các thay đổi khác nhau của cài đặt sự kiện, khía cạnh và tác động, bạn có thể mô phỏng chiến lược Cá nhân hóa của mình và tìm kiếm theo ID người dùng để xem kết quả chiến lược được dự đoán.

Vì chúng tôi chỉ mã hóa cứng một người dùng cho ứng dụng của mình, nên chúng tôi có thể tìm kiếm user-1 để xem điều gì có thể xảy ra với chiến lược hiện tại của chúng tôi:

Để hiểu rõ hơn về mô phỏng các chiến lược Cá nhân hóa, bạn có thể xem hướng dẫn tại đây .

Lưu các thiết lập

Cuối cùng, khi bạn hài lòng với kết quả mô phỏng chiến lược của mình, hãy nhớ nhấn nút “Lưu thay đổi”. Nếu bạn không hài lòng, bạn có thể nhấp vào "Hủy bỏ".

Thêm vào thành phần SearchBar

Để tìm kiếm, người dùng cần một nơi để nhập kết quả tìm kiếm liên kết đến chỉ mục Algolia của bạn và truy vấn để có kết quả.

Để bắt đầu, hãy tạo một tệp, SearchBar.js , trong client/src/components :

 // client/src/components/SearchBar.js import React from "react"; import { SearchBox } from "react-instantsearch-dom"; function SearchBar() { return ( <div className="search__bar"> <SearchBox showLoadingIndicator={true} /> </div> ); } export default SearchBar;

Điều này tạo ra một Thanh tìm kiếm rất đơn giản bằng cách sử dụng tiện ích <SearchBox> từ thư viện Tìm kiếm tức thì của Algolia.

SearchBox cho phép người dùng nhập tìm kiếm. Sau khi gửi, một truy vấn được thực hiện để tìm kiếm chỉ mục Algolia (trong trường hợp này là sản phẩm ) được chỉ định trong các thành phần Tìm kiếm tức thì của chúng tôi trong client/src/App.js , mà tất cả các chế độ xem của chúng tôi đều được gói gọn trong đó. Bao gồm các chế độ xem này trong các thẻ Tìm kiếm tức thì cho phép chúng tôi truy cập vào tất cả các khả năng và thành phần của Tìm kiếm tức thì cho tất cả các thành phần trong thẻ.

Để xem thành phần SearchBar sau khi được thêm vào, bạn cần thêm kiểu dáng. Tạo tệp SearchBar.css trong client/src/components và dán nội dung từ tệp ví dụ này vào. Cuối cùng, đừng quên nhập CSS vào tệp SearchBar.js của bạn bằng cách thêm dòng sau:

 import "./SearchBar.css";

Kết quả tìm kiếm bề mặt trong SearchHits

Bây giờ chúng tôi có cách để người dùng nhập tìm kiếm, làm cách nào chúng tôi có thể hiển thị kết quả?

Điều này đặt ra nhu cầu về một thành phần mới khác mà chúng tôi có thể chuyển hướng tìm kiếm, thành phần này sẽ hiển thị các sản phẩm khác nhau dựa trên truy vấn. Để nhận kết quả tìm kiếm từ Algolia, chúng ta có thể tận dụng lại thư viện InstantSearch — cụ thể là chúng ta có thể sử dụng một thành phần trong thư viện này có tên là <Hits> , thành phần này sẽ hiển thị các mục này cho chúng ta.

Tạo một tệp tại client/src/components/SearchHits.js , tệp này sẽ chứa thành phần SearchHits của chúng tôi. Sau đó, thêm vào đoạn mã sau:

 // client/src/components/SearchHits.js import React from "react"; import { Hits } from "react-instantsearch-dom"; import ProductItem from "./ProductItem"; import aa from "search-insights"; import { Link } from "react-router-dom"; function Hit({ hit }) { return ( <div className="hit"> <Link to={`/products/${hit.id}`} state={{ selectedProduct: hit }} key={hit.id} onClick={() => { aa("convertedObjectIDs", { userToken: "user-1", index: "products", eventName: "Product conversion", objectIDs: [hit.id], }); }} > <ProductItem product={hit} /> </Link> </div> ); } function SearchHits() { return ( <> <Hits hitComponent={Hit} /> </> ); } export default SearchHits;

Trong thành phần chức năng SearchHits chính, chúng tôi đang trả lại thành phần Lượt truy cập từ thư viện InstantSearch<. Lượt truy cập sẽ hiển thị danh sách kết quả hoặc lượt truy cập tìm kiếm, dựa trên nội dung được nhập trong Hộp tìm kiếm trong cùng một thẻ Tìm kiếm tức thì — trong trường hợp này, đó là Hộp tìm kiếm mà chúng tôi vừa triển khai trong SearchBar.js.

Với thành phần Lượt truy cập, bạn có thể hiển thị từng lượt truy cập tìm kiếm bằng cách sử dụng thành phần tùy chỉnh. Trong mã của chúng tôi, chúng tôi đã sử dụng lại thành phần ProductItem cũng được sử dụng để hiển thị các sản phẩm trên trang chính của chúng tôi.

Cuối cùng, tương tự như thành phần ProductList trên trang chính của chúng tôi, mỗi ProductItem được bao bọc trong một thành phần Link dẫn đến trang chi tiết riêng lẻ của sản phẩm. Điều này cho phép người dùng xem xét mặt hàng sâu hơn từ danh sách kết quả tìm kiếm và cũng theo dõi các nhấp chuột chuyển đổi bằng cách sử dụng thư viện search-insights , như chúng tôi đang làm cho tất cả các nhấp chuột sản phẩm trên trang web của mình.

Thêm tuyến vào App.js

Khi bạn đã sẵn sàng các thành phần SearchBar và SearchHits , đã đến lúc thêm các thành phần này vào ứng dụng của chúng tôi một cách chính thức và chỉ đường đến trang SearchHits của chúng tôi!

Truy cập tệp client/src/App.js của bạn và nhập các thành phần mới ở đầu tệp:

 import SearchBar from "./components/SearchBar"; import SearchHits from "./components/SearchHits";

Bây giờ, hãy hiển thị thanh tìm kiếm trên trang chủ. Để làm như vậy, hãy thêm thành phần SearchBar phía trên thành phần ProductsList trong cấu hình Tuyến đường của bạn cho đường dẫn / :

 <Route exact path="/" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> // just added this in <ProductsList products={products} /> <Bot /> </InstantSearch> />

Cuối cùng, chúng tôi sẽ thêm một tuyến đường mới sẽ tự động hiển thị các kết quả tìm kiếm dựa trên truy vấn. Để làm như vậy, chúng tôi sẽ cần một tuyến đường động đưa vào truy vấn tìm kiếm. Thêm phần sau vào thẻ <Routes> trong App.js của bạn:

 <Route exact path="/results/:query" element={ <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics /> <SearchBar /> <SearchHits /> <Bot /> </InstantSearch> } />

Phần trên sẽ hiển thị SearchBar , danh sách SearchHits từ tìm kiếm trước đó và thành phần Bot hiện có cho chatbot của cửa hàng chúng tôi. Giống như chúng tôi đang thực hiện với các chế độ xem cho các tuyến đường khác của mình, chúng tôi sẽ bao bọc nội dung của trang bằng một phiên bản Tìm kiếm tức thì để người dùng có thể sử dụng thư viện và khả năng tìm kiếm của nó trong trang.

Tại thời điểm này, bạn sẽ có thể thấy thanh tìm kiếm của mình trên trang chủ:

Cập nhật SearchBar để chuyển hướng đến SearchHits hoặc trang chủ dựa trên các tuyến đường

Cuối cùng, chúng tôi đã thiết lập SearchBar . Chúng tôi cũng có một trang, SearchHits , sẽ hiển thị kết quả tìm kiếm khi một truy vấn được gửi.

Tuy nhiên, bạn có thể nhận thấy rằng không có kết quả nào hiển thị (và trên thực tế, không có gì thực sự thay đổi) khi nhấp vào nút Tìm kiếm trong SearchBar của bạn. Điều này là do chúng tôi chưa kết nối sự kiện onSubmit cho phần tử này.

Hãy quay trở lại SearchBar.js và bắt đầu làm việc!

Đối với SearchBar của chúng tôi, hành vi mong muốn của chúng tôi khi chúng tôi gửi kết quả tìm kiếm của mình là để nó chuyển hướng đến /results/:query route được định cấu hình trong App.js . Tuy nhiên, vì chúng tôi đang triển khai điều này trong trình xử lý sự kiện, nên chúng tôi không thể điều hướng đến chế độ xem này bằng các thẻ <Link> như chúng tôi thường làm. May mắn thay, React cung cấp một hook useNavigate() mà chúng ta có thể tận dụng để chuyển hướng chúng ta đến trang mong muốn!

Ở đầu SearchBar , hãy nhập hook useNavigate :

 import { useNavigate } from "react-router-dom";

Sau đó, trong thành phần chức năng SearchBar , hãy thêm phần sau vào trước return() :

 let navigate = useNavigate(); const routeChangeSubmit = (query) => { let queryURI = encodeURIComponent(query); let path = `/results/${queryURI}`; navigate(path); }; const routeChangeReset = () => { let path = `/`; navigate(path); };

Phần trên khởi tạo một phiên bản hook của useNavigate() . Sau đó, chúng tôi khai báo hai lộ trình thay đổi tuyến đường khác nhau — một lộ trình xảy ra trong trường hợp có sự kiện onSubmit() và một lộ trình xảy ra trong trường hợp có sự kiện onReset() , xảy ra khi người dùng tìm kiếm và nhấp vào nút “X”. bên cạnh nút tìm kiếm.

Trong lộ trình routeChangeSubmit() , chúng tôi đang thực hiện truy vấn và mã hóa nó để nó không gây ra sự cố với định dạng URL của bộ định tuyến (điều này hữu ích cho các trường hợp truy vấn tìm kiếm của người dùng chứa khoảng trắng hoặc các ký tự không thân thiện với URL khác). Sau đó, chúng tôi đặt đường dẫn đến tuyến mong muốn cho SearchHits của mình, sử dụng chuỗi truy vấn được mã hóa làm thông số :query . Cuối cùng, chúng tôi sử dụng hook useNavigate() để hướng người dùng đến đường dẫn tuyến đường đó, dẫn đến chuyển hướng liền mạch đến kết quả tìm kiếm. routeChangeReset() cũng làm điều tương tự, ngoại trừ nó chuyển hướng đến trang chủ và không yêu cầu bất kỳ thao tác URL nào vì đường dẫn rất đơn giản.

Cuối cùng, chúng tôi sẽ thêm các sự kiện onSubmit và onReset vào thành phần SearchBox của chúng tôi trong return() :

 <SearchBox showLoadingIndicator={true} onSubmit={(event) => { // added event.preventDefault(); if (event.target[0].value) { routeChangeSubmit(event.target[0].value); } }} onReset={() => { // added routeChangeReset(); }} />

Cả hai trình xử lý sự kiện đều gọi các đường dẫn mà chúng tôi vừa thêm cho các hành động tương ứng, submitting và resetting tìm kiếm. Trong onSubmit() , chúng tôi đang gọi event.preventDefault() để tránh mọi chuyển hướng không mong muốn có thể xảy ra. Sau đó, chúng tôi sử dụng event để lấy truy vấn tìm kiếm thông qua event.target[0].value .

Tuy nhiên, nếu thuộc tính event.target[0].value trống (có nghĩa là người dùng đã nhấp vào nút tìm kiếm mà không nhập truy vấn), thì chuyển hướng URL không hợp lệ sẽ xảy ra, dẫn đến trang trống. Do đó, mã sẽ kiểm tra để đảm bảo giá trị đó tồn tại và nếu có, mã sẽ gọi đường dẫn routeChangeSubmit() của chúng tôi và chuyển vào truy vấn tìm kiếm.

Với mã này được thêm vào, bạn sẽ có thể tìm kiếm các mục một cách liền mạch và xem các kết quả tương ứng:

Bật Cá nhân hóa trong Cấu hình Thành phần

Tìm kiếm thật tuyệt vời, nhưng tìm kiếm với cá nhân hóa thậm chí còn tốt hơn . May mắn thay, chúng tôi đã phát triển chiến lược Cá nhân hóa một cách dễ dàng bằng cách sử dụng Algolia và chúng tôi có thể nhanh chóng kết hợp chiến lược đó vào phiên bản tìm kiếm hiện tại của mình!

Để thêm tính năng cá nhân hóa, chúng tôi cần thêm hai tham số vào các thành phần Định cấu hình (từ thư viện Tìm kiếm tức thì) trong App.js của chúng tôi, nơi tất cả các cài đặt tìm kiếm của chúng tôi được kết nối. Hai tham số chúng ta sẽ cần thêm là:

• enablePersonalization : Một boolean sẽ bật hoặc tắt các kết quả cá nhân hóa xảy ra đối với phiên bản Tìm kiếm tức thì của người dùng.
• userToken : Một chuỗi được dùng làm ID người dùng duy nhất — nếu bạn đang sử dụng tài khoản người dùng riêng cho ứng dụng của mình, bạn sẽ truy xuất ID người dùng hiện tại và nhập ID đó vào đây. Trong trường hợp ứng dụng của chúng tôi, chúng tôi chỉ theo dõi hoạt động của một người dùng, vì vậy chúng tôi sẽ điền giá trị này bằng ID của người dùng đó – user-1 .

Điều hướng đến client/src/App.js và thêm các tham số sau vào mỗi thẻ <Configure> cho mỗi tuyến có chứa SearchBar ( / và /results/:query ).

Đây là một ví dụ về giao diện trong home ( / ):

 <InstantSearch searchClient={searchClient} indexName="products"> <Configure clickAnalytics enablePersonalization={true} userToken="user-1" /> <SearchBar /> <ProductsList products={products} /> <Bot /> </InstantSearch>

Với điều này được thêm vào cho thành phần Configure của mỗi tuyến đường, giờ đây bạn sẽ có thể xem các kết quả được cá nhân hóa trên mỗi tìm kiếm!

Để tìm hiểu thêm về cách bật Cá nhân hóa trong sản xuất và các phương pháp khác mà bạn có thể sử dụng để bật Cá nhân hóa (chẳng hạn như bật tính năng này trong bảng điều khiển cho các chỉ mục nhất định), hãy truy cập bài viết này .

Phần kết luận

Công việc đáng kinh ngạc, và cảm ơn vì đã theo dõi! 🎉 Với hướng dẫn này, bạn đã học cách thêm tìm kiếm được cá nhân hóa vào trải nghiệm thương mại điện tử của mình. Nếu bạn muốn xem mã dự án đầy đủ cho hướng dẫn này, bạn có thể truy cập kho lưu trữ ứng dụng algolia-commercejs-personalizations-app .

Các tính năng Cá nhân hóa của Algolia đã thực hiện tất cả công việc nặng nhọc cho chúng tôi — thông qua bảng điều khiển Cá nhân hóa, bạn có thể dễ dàng tạo chiến lược cho trải nghiệm tìm kiếm tùy chỉnh của người dùng. Ngoài ra, các thành phần dựng sẵn của Algolia từ thư viện InstantSearch cung cấp một cách đơn giản để bạn bắt đầu chạy và triển khai giải pháp tìm kiếm dễ dàng trên trang web của mình, với cấu hình tối thiểu cần thiết.

Chúng tôi hy vọng bạn đã học được nhiều điều về sức mạnh của Cá nhân hóa từ hướng dẫn này! 💪 Nếu bạn muốn hack nhiều hơn trên ứng dụng mà chúng tôi đã xây dựng ngày hôm nay, bạn có thể xem xét thực hiện một số cập nhật như:

• Thêm thử nghiệm front-end và back-end để đảm bảo trang web của bạn luôn hoạt động trơn tru

• Giới thiệu tài khoản người dùng — cho phép người dùng đăng ký, đăng nhập và đăng xuất khỏi tài khoản trên trang web của bạn. Bạn cũng có thể thêm các tính năng mới dành riêng cho người dùng, chẳng hạn như mục yêu thích

• Tạo nhiều loại sự kiện hơn và thử nghiệm các mô hình đề xuất và chiến lược cá nhân hóa khác nhau

• Tạo trải nghiệm để thêm các mặt hàng vào giỏ hàng và thanh toán

  
  

Các khả năng là vô tận! ✨ Chúc may mắn với lần hack trong tương lai của bạn!