FFWEB-3441: Support for WebComponents SSR

Support for WebComponents SSR

Author: Rayn93

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Add
 - Add cart button for product list
 - Implement proxy - more information in README file
+- Support for WebComponents SSR
 
 ### Change
 - Support tab navigation for search, suggest and paging components

metadata.php

@@ -90,6 +90,13 @@
             'value'    => false,
             'position' => $settingPosition++,
         ],
+        [
+            'group'    => 'ffAdvanced',
+            'name'     => 'ffUseSsr',
+            'type'     => 'bool',
+            'value'    => false,
+            'position' => $settingPosition++,
+        ],
         [
             'group'    => 'ffAdvanced',
             'name'     => 'ffSidAsUserId',

services.yaml

@@ -21,3 +21,11 @@ services:
     # Twig Extensions
     Omikron\FactFinder\Oxid\Twig\Extensions\Filters\RecordDataJson:
         tags: [ 'twig.extension' ]
+
+    Omikron\FactFinder\Oxid\Utilities\Ssr\SearchAdapter:
+        class: Omikron\FactFinder\Oxid\Utilities\Ssr\SearchAdapter
+        public: true
+
+    Omikron\FactFinder\Communication\Client\ClientBuilder:
+        class: Omikron\FactFinder\Communication\Client\ClientBuilder
+        public: true

src/Controller/SearchResultController.php

@@ -8,8 +8,10 @@
 use Omikron\FactFinder\Communication\Version;
 use Omikron\FactFinder\Oxid\Event\EnrichProxyDataEvent;
 use Omikron\FactFinder\Oxid\Subscriber\EnrichProxyDataEventSubscriber;
+use Omikron\FactFinder\Oxid\Utilities\Ssr\SearchAdapter;
 use OxidEsales\Eshop\Application\Controller\FrontendController;
 use OxidEsales\Eshop\Core\Registry;
+use OxidEsales\EshopCommunity\Core\Di\ContainerFacade;
 use OxidEsales\EshopCommunity\Internal\Container\ContainerFactory;
 use OxidEsales\EshopCommunity\Internal\Framework\Module\Facade\ModuleSettingServiceInterface;
 use Symfony\Component\EventDispatcher\EventDispatcher;
@@ -23,6 +25,14 @@ public function __construct()
         $this->_sThisTemplate = '@ffwebcomponents/webcomponents/blocks/page/result.html.twig';
     }
 
+    public function ssr(): void
+    {
+        $request                             = Registry::getRequest();
+        $searchAdapter                       = ContainerFacade::get(SearchAdapter::class);
+        $query                               = $this->removeOxidParams(parse_url($request->getRequestUrl(), PHP_URL_QUERY));
+        $this->_aViewData['ssr_ff_response'] = $searchAdapter->search($query, false);
+    }
+
     public function proxy(): void
     {
         $currentUrl = Registry::getUtilsUrl()->getCurrentUrl();

src/Model/Config/Communication.php

@@ -42,6 +42,7 @@ public function getParameters(): array
             'currency-country-code' => $this->getLocale($this->view->getActiveLangAbbr()),
             'search-immediate'      => $this->isSearch() || $this->useForCategories() || $this->useProxy() ? 'true' : 'false',
             'category-page'         => $this->useForCategories() ? $this->getCategoryPath($category) : null,
+            'useSsr'                => $this->useSsr(),
         ];
 
         return $params;
@@ -117,4 +118,9 @@ private function useProxy(): bool
     {
         return (bool) $this->moduleSettingService->getBoolean('ffUseProxy', 'ffwebcomponents');
     }
+
+    private function useSsr(): bool
+    {
+        return (bool) $this->moduleSettingService->getBoolean('ffUseSsr', 'ffwebcomponents');
+    }
 }

src/Utilities/Ssr/SearchAdapter.php

@@ -0,0 +1,40 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Omikron\FactFinder\Oxid\Utilities\Ssr;
+
+use Omikron\FactFinder\Communication\Client\ClientBuilder;
+use Omikron\FactFinder\Communication\Version;
+use OxidEsales\EshopCommunity\Internal\Framework\Module\Facade\ModuleSettingServiceInterface;
+
+class SearchAdapter
+{
+    public function __construct(
+        private ClientBuilder $clientBuilder,
+        private ModuleSettingServiceInterface $moduleSettingService,
+    ) {
+    }
+
+    public function search(string $paramString, bool $navigationRequest): string
+    {
+        $client = $this->clientBuilder
+            ->withServerUrl((string) $this->moduleSettingService->getString('ffServerUrl', 'ffwebcomponents'))
+            ->withApiKey((string) $this->moduleSettingService->getString('ffApiKey', 'ffwebcomponents'))
+            ->withVersion(Version::NG)
+            ->build();
+
+        $endpoint = $this->createEndpoint($paramString, $navigationRequest);
+        $response = $client->request('GET', $endpoint);
+
+        return $response->getBody()->getContents();
+    }
+
+    private function createEndpoint(string $paramString, bool $navigationRequest): string
+    {
+        $channel    = (string) $this->moduleSettingService->getCollection('ffChannel', 'ffwebcomponents')['en'];
+        $endpoint   = $navigationRequest ? 'navigation' : 'search';
+
+        return "rest/v5/{$endpoint}/{$channel}?{$paramString}";
+    }
+}

views/admin_twig/de/ffwebcomponents_de_lang.php

@@ -16,6 +16,7 @@
     'SHOP_MODULE_ffTrackingAddToCartCount_count_as_one'          => 'track single click as one',
     'SHOP_MODULE_ffTrackingAddToCartCount_count_selected_amount' => 'track single click with selected amount',
     'SHOP_MODULE_ffUseProxy'                                     => 'Proxy benutzen?',
+    'SHOP_MODULE_ffUseSsr'                                       => 'Verwenden Sie serverseitiges Rendering?',
     'SHOP_MODULE_ffSidAsUserId'                                  => 'Die SID als userId senden, wenn der Benutzer nicht angemeldet ist?',
     'SHOP_MODULE_ffCartBtn'                                      => 'Schaltfläche Warenkorb hinzufügen für die Produktliste',
     'SHOP_MODULE_GROUP_ffFeatures'                               => 'Features Settings',

views/admin_twig/en/ffwebcomponents_en_lang.php

@@ -16,6 +16,7 @@
     'SHOP_MODULE_ffTrackingAddToCartCount_count_as_one'          => 'track single click as one',
     'SHOP_MODULE_ffTrackingAddToCartCount_count_selected_amount' => 'track single click with selected amount',
     'SHOP_MODULE_ffUseProxy'                                     => 'Use Proxy?',
+    'SHOP_MODULE_ffUseSsr'                                       => 'Use Server Side Rendering?',
     'SHOP_MODULE_ffSidAsUserId'                                  => 'Send the SID as userId when user not logged in?',
     'SHOP_MODULE_ffCartBtn'                                      => 'Add cart button for product list',
     'SHOP_MODULE_GROUP_ffFeatures'                               => 'Features Settings',

views/twig/extensions/themes/default/layout/base.html.twig

@@ -47,7 +47,11 @@
 
             factfinder.request.before.search(({ searchParams, searchOptions }) => {
                 if (searchOptions?.requestOptions?.origin?.tagName === `FF-SEARCHBOX`) {
-                    window.location.href =  `?query=${searchParams.query}&cl=search_result`;
+                    {% if communicationParams['useSsr'] %}
+                       window.location.href = `?query=${searchParams.query}&cl=search_result&fnc=ssr`;
+                    {% else %}
+                       window.location.href = `?query=${searchParams.query}&cl=search_result`;
+                    {% endif %}
 
                     // Cancel the pipeline to avoid sending a search request to FactFinder before the redirect is complete.
                     return false;
@@ -71,7 +75,7 @@
 
             {% endif %}
 
-            {% if oViewConf.getSearchImmediate()|escape("js") and oView.getClassKey() == "search_result" %}
+            {% if oViewConf.getSearchImmediate()|escape("js") and oView.getClassKey() == "search_result" and not communicationParams['useSsr'] %}
                 let searchParams = factfinder.utils.env.searchParamsFromUrl({ categoryFieldName: `{{oViewConf.getFFStringConfigParam('ffCategoryPathFieldName')}}` });
                 initialSearch(searchParams, { requestOptions: { origin: `initialSearch` } });
             {% endif %}

views/twig/webcomponents/widget/record_list.html.twig

@@ -1,4 +1,4 @@
-<ff-record-list unresolved class="row gridView list-container" subscribe="{{ subscribe|default("true") }}">
+<ff-record-list {% if oViewConf.getFFBoolConfigParam("ffUseSsr") %} ssr {% endif%} unresolved class="row gridView list-container" subscribe="{{ subscribe|default("true") }}">
     <template data-role="record">
         <ff-record class="productData col-xs-12 col-sm-6 col-md-4 productBox">
             <div class="card product-card">
@@ -42,6 +42,13 @@
     </template>
 </ff-record-list>
 
+{% if oViewConf.getFFBoolConfigParam("ffUseSsr") and ssr_ff_response is defined and ssr_ff_response is not empty  %}
+    <script type="text/javascript">
+        document.addEventListener(`ffCoreReady`, ({ factfinder }) => {
+            factfinder.response.dispatch.ssrSearch({{ ssr_ff_response|raw }});
+        });
+    </script>
+{% endif %}
 
 
 {#Scrolling ?? #}