Whole Room Set Page

Overview

The Whole Room Set page in our app showcases various bathroom products. The content on this page is dynamically loaded from the Bloomreach CMS.

How the Feature Works

1. Loading Content from the CMS

Our app uses the Bloomreach CMS to load content dynamically. This means pages like the Whole Room Set, Deals, or New page are fetched based on the content type specified in the CMS. The CMS sends the necessary data, and our app uses this to build the pages dynamicallyby identifying the path.

2. Navigating to the Whole Room Set Page

The Whole Room Set/Bathroom suites page can be accessed by clicking on a banner in the bathroom category product listing page.

• User Clicks the Banner: When a user clicks on the bathroom category PLP banner, the app receives a path from the CMS. This path is handled by the DeeplinkRepository class.
• Handling the Deep Link: The app uses the emit function to send the path to a Stream Controller. This triggers a listener in the main_page_bloc.dart file, specifically in the init function. The _handleDeepLink function is then called to check the path.

  void _handleDeepLink(Uri? uri) {
     if (uri == null || (!uri.isScheme('http') && !uri.isScheme('https'))) {
       return;
     }
  
     if (_deepLinkRepository.isLinkBathroomSuites(uri.path)) {
       _eventSubject.add(DeepLinkBathroomSuites(uri: uri));
       return;
     }
   }
  

• Pattern Matching: The app uses a regular expression to check if the path matches a pattern for bathroom suites. If it matches, an event (DeepLinkBathroomSuites) is triggered.

  static final RegExp _linkBathroomSuites = RegExp(r'^/bathroom-suites');
  

3. Event Handling and Navigation

Once the deep link event is triggered, the app takes the following steps:

• Setting Up Listeners: In the initState function, the app sets up an event stream listener to handle deep link events.

  bloc.eventStream.listen(_onMainPageEvent);
  

• Processing the Event: When a DeepLinkBathroomSuites event is received, the app navigates to the Dynamic page carrying wholeRoomSet document path. It switches to the search tab and loads the corresponding page.

  void _onMainPageEvent(MainPageEvent event) {
     if (event is DeepLinkBathroomSuites) {
       MainPageRoute.popUntil(context);
       gotoTab(MainTab.search, reset: false).push(
         DynamicPage.routeUsingType(DynamicPageType.wholeRoomSet),
       );
     }
   }
  

4. Fetching and Displaying the Content

• Fetching Content: The DynamicPageRepository class calls the getDynamicPage function with the path to fetch the appropriate page content.

  Future<void> _initialize() async {
     final DynamicContent content = await context.dynamicPageRepository.getDynamicPage(widget.path);
  
     if (!mounted || !(ModalRoute.of(context)?.isCurrent ?? false)) {
       return;
     }
  
     switch (content.runtimeType) {
       case DealsPageContent:
         Navigator.pushReplacement(context, DealsPage.route(content as DealsPageContent));
         return;
       case WholeRoomSetContent:
         Navigator.pushReplacement(context, WholeRoomSetPage.route(content as WholeRoomSetContent));
         return;
       default:
         LoggingService.log('Unsupported-content-type-dynamic-page-error');
         Navigator.pop(context);
         return;
     }
   }
  

• Content Type Check: The app checks the type of content fetched. If it's a Whole Room Set, the app loads that page. If the content type is not recognized, it logs an error and returns to the previous page.