FFWEB-3121: New category pages NG implementation

New category pages NG implementation
FACT-Finder-Web-Components · Jul 25, 2024 · 119d3c7 · 119d3c7
1 parent ffb4c0e
commit 119d3c7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/spec/Subscriber/CategoryPageSubscriberSpec.php b/spec/Subscriber/CategoryPageSubscriberSpec.php
@@ -22,7 +22,7 @@
 
 class CategoryPageSubscriberSpec extends ObjectBehavior
 {
-    private string $filterCategoryPath = 'filter=CategoryPath%3ABooks+%252B+Sports%2FHome+%252F+Garden+100%2525';
+    private string $filterCategoryPath = 'Books + Sports,Home / Garden 100%';
 
     public function let(
         AbstractCategoryRoute $cmsPageRoute,
@@ -47,7 +47,7 @@ public function it_should_add_category_page_attribute_in_category_config(
         NavigationPageLoadedEvent $event
     ): void {
         $categoryEntity->getCustomFields()->willReturn([OmikronFactFinder::DISABLE_SEARCH_IMMEDIATE_CUSTOM_FIELD_NAME => false]);
-        $extension->assign(Argument::withEntry('communication', Argument::withEntry('category-page', Argument::any())))->shouldBeCalled();
+        $extension->assign(Argument::withEntry('communication', Argument::withEntry('categoryPage', Argument::any())))->shouldBeCalled();
         $this->onPageLoaded($event);
     }
 
@@ -77,7 +77,7 @@ public function it_should_encode_category_path_correctly(
         ArrayEntity $extension,
         NavigationPageLoadedEvent $event
     ): void {
-        $extension->assign(Argument::withEntry('communication', Argument::withEntry('category-page', $this->filterCategoryPath)))->shouldBeCalled();
+        $extension->assign(Argument::withEntry('communication', Argument::withEntry('categoryPage', $this->filterCategoryPath)))->shouldBeCalled();
         $this->onPageLoaded($event);
     }
 

diff --git a/src/Resources/views/storefront/block/cms-block-listing.html.twig b/src/Resources/views/storefront/block/cms-block-listing.html.twig
@@ -1,6 +1,20 @@
 {% block block_factfinder_web_components_listing %}
   {% set columns = 1 %}
   {% set element = block.slots.getSlot('toolbarFilters') %}
+
+  <!-- Category page -->
+  <script>
+    document.addEventListener(`ffCoreReady`, ({ factfinder }) => {
+      factfinder.config.setAppConfig({
+        categoryPage: [
+          factfinder.utils.filterBuilders.categoryFilter(`CategoryPath`, {{ (page.extensions.factfinder.communication.categoryPage|split(',')|json_encode())|raw }})
+    ],
+    });
+
+      factfinder.request.navigation({'filters': factfinder.config.get().appConfig.categoryPage}, { requestOptions: { origin: `searchImmediately` } });
+    });
+  </script>
+
   <div class="col-12">
     <div class="cms-element-sidebar-filter">
       {% block element_product_listing_filter_button %}
@@ -27,7 +41,7 @@
   </div>
 
   <div class="col-12">
-    <div class="cms-element-product-listing-wrapper pt-3">
+    <div class="ff-cms-element-product-listing-wrapper pt-3">
       <div class="cms-element-product-listing">
         <div class="cms-element-product-listing-actions row justify-content-between">
           <div class="col-md-auto pt-3" data-cms-element-id="{{ element.id }}">

diff --git a/src/Resources/views/storefront/page/factfinder/result.html.twig b/src/Resources/views/storefront/page/factfinder/result.html.twig
@@ -52,7 +52,7 @@
       </div>
     </div>
 
-    <div class="cms-element-product-listing-wrapper">
+    <div class="ff-cms-element-product-listing-wrapper">
       <div class="cms-element-product-listing">
         {% sw_include '@Parent/storefront/components/factfinder/toolbar.html.twig' %}
         {% sw_include '@Parent/storefront/components/factfinder/record-list.html.twig' with { subscribe: true, class: 'row cms-listing-row', ssr: page.extensions.factfinder.ssr } %}

diff --git a/src/Subscriber/CategoryPageSubscriber.php b/src/Subscriber/CategoryPageSubscriber.php
@@ -59,7 +59,7 @@ public function onPageLoaded(NavigationPageLoadedEvent $event): void
         $categoryPath  = (new CategoryPath($this->fieldName))->getValue($category);
         $communication = [
             'add-params' => implode(',', array_map(fn (string $key, string $value): string => sprintf('%s=%s', $key, $value), array_keys($mergedAddParams), array_values($mergedAddParams))),
-        ] + ($isCategory ? ['category-page' => $categoryPath] : []);
+        ] + ($isCategory ? ['categoryPage' => $categoryPath] : []);
 
         if ($route === 'frontend.navigation.page') {
             $event->getRequest()->attributes->set('categoryPath', $categoryPath);

diff --git a/src/Utilites/Ssr/Field/CategoryPath.php b/src/Utilites/Ssr/Field/CategoryPath.php
@@ -18,15 +18,7 @@ public function __construct(string $categoryPathFieldName)
     public function getValue(CategoryEntity $categoryEntity): string
     {
         $categories   = array_slice($categoryEntity->getBreadcrumb(), 1);
-        $categoryPath = implode('/', array_map(fn ($category): string => $this->encodeCategoryName($category), $categories));
 
-        return sprintf('filter=%s', urlencode($this->fieldName . ':' . $categoryPath));
-    }
-
-    private function encodeCategoryName(string $path): string
-    {
-        // important! do not modify this method
-        return preg_replace('/\+/', '%2B', preg_replace('/\//', '%2F',
-            preg_replace('/%/', '%25', $path)));
+        return implode(',', $categories);
     }
 }