From 8790fbbba579e7bff71661880e75ffaec34f82bb Mon Sep 17 00:00:00 2001 From: Frederic Beaudoin Date: Mon, 26 Aug 2024 08:59:42 -0400 Subject: [PATCH] docs(headless commerce react samples): add note regarding context + url manager (#4276) https://coveord.atlassian.net/browse/KIT-3444 --- .../headless-commerce-react/src/pages/cart-page.tsx | 4 ++++ .../headless-commerce-react/src/pages/home-page.tsx | 4 ++++ .../src/pages/product-description-page.tsx | 4 ++++ .../src/pages/product-listing-page.tsx | 10 ++++++++++ .../headless-commerce-react/src/pages/search-page.tsx | 10 ++++++++++ 5 files changed, 32 insertions(+) diff --git a/packages/samples/headless-commerce-react/src/pages/cart-page.tsx b/packages/samples/headless-commerce-react/src/pages/cart-page.tsx index 50cea6edac9..16d4898f6c0 100644 --- a/packages/samples/headless-commerce-react/src/pages/cart-page.tsx +++ b/packages/samples/headless-commerce-react/src/pages/cart-page.tsx @@ -24,6 +24,10 @@ export default function CartPage(props: ICartPageProps) { }); useEffect(() => { + /** + * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded, + * as the Commerce API requires this information to function properly. + */ contextController.setView({url}); if ( diff --git a/packages/samples/headless-commerce-react/src/pages/home-page.tsx b/packages/samples/headless-commerce-react/src/pages/home-page.tsx index 9c34fde235d..4c445dbb5cc 100644 --- a/packages/samples/headless-commerce-react/src/pages/home-page.tsx +++ b/packages/samples/headless-commerce-react/src/pages/home-page.tsx @@ -23,6 +23,10 @@ export default function HomePage(props: IHomePageProps) { }); useEffect(() => { + /** + * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded, + * as the Commerce API requires this information to function properly. + */ contextController.setView({url}); if ( diff --git a/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx b/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx index c290c6c79de..d6413fd2513 100644 --- a/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx +++ b/packages/samples/headless-commerce-react/src/pages/product-description-page.tsx @@ -46,6 +46,10 @@ export default function ProductDescriptionPage( const product = loadProduct(); useEffect(() => { + /** + * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded, + * as the Commerce API requires this information to function properly. + */ contextController.setView({url}); }, [contextController, url]); diff --git a/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx b/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx index a827542a63b..720a374412a 100644 --- a/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx +++ b/packages/samples/headless-commerce-react/src/pages/product-listing-page.tsx @@ -52,6 +52,16 @@ export default function ProductListingPage(props: IProductListingPageProps) { }, [productListingController]); useEffect(() => { + /** + * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded, + * as the Commerce API requires this information to function properly. + * + * Note, however, that calling this method will reset the query, pagination, sort, and facets. + * + * This means that on a search or listing page, you must call this method BEFORE you bind the URL manager. + * Otherwise, the URL manager will restore the state from the URL parameters, and then this state will get + * immediately reset when the `setView` method is called. + */ contextController.setView({url}); const unsubscribe = bindUrlManager(); diff --git a/packages/samples/headless-commerce-react/src/pages/search-page.tsx b/packages/samples/headless-commerce-react/src/pages/search-page.tsx index f42ce256acf..58e76f09665 100644 --- a/packages/samples/headless-commerce-react/src/pages/search-page.tsx +++ b/packages/samples/headless-commerce-react/src/pages/search-page.tsx @@ -61,6 +61,16 @@ export default function Search(props: ISearchProps) { }, [searchController]); useEffect(() => { + /** + * It is important to call the `Context` controller's `setView` method with the current URL when a page is loaded, + * as the Commerce API requires this information to function properly. + * + * Note, however, that calling this method will reset the query, pagination, sort, and facets. + * + * This means that on a search or listing page, you must call this method BEFORE you bind the URL manager. + * Otherwise, the URL manager will restore the state from the URL parameters, and then this state will get + * immediately reset when the `setView` method is called. + */ contextController.setView({url}); const unsubscribe = bindUrlManager();