docs(headless commerce react samples): add note regarding context + u…

…rl manager (#4276)

https://coveord.atlassian.net/browse/KIT-3444

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 (

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 (

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]);
 

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();
 

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();