Merge pull request #4 from plentymarkets/fix/ssr

ADD client only tags to make blog ssr compatible
plentymarkets · May 14, 2021 · 77476c7 · 77476c7
2 parents 9dcf452 + fbb288a
commit 77476c7
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 33 deletions.
diff --git a/meta/documents/changelog_de.md b/meta/documents/changelog_de.md
@@ -1,5 +1,11 @@
 # Release notes für das Blog plugin
 
+## v.2.0.0 (2021-05-14)
+
+### Feature 
+
+- Das Blog-Plugin ist nun kompatibel mit Vue Server-Side Rendering (SSR).
+
 ## v1.1.9 (2020-02-27)
 
 - Funktionalität des Debug-Assistenten erweitert.

diff --git a/meta/documents/changelog_en.md b/meta/documents/changelog_en.md
@@ -1,5 +1,11 @@
 # Release notes for Blog plugin
 
+## v.2.0.0 (2021-05-14)
+
+### Feature 
+
+- The blog plugin is now compatible with Vue Server-Side Rendering (SSR).
+
 ## v1.1.9 (2020-02-27)
 
 - Extend debug assistant's functionality

diff --git a/plugin.json b/plugin.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.9",
+  "version": "2.0.0",
   "name": "Blog",
   "marketplaceName" : {"de": "Blog","en": "Blog"},
   "description": "This is the official blog developed by plentymarkets.",
@@ -27,7 +27,7 @@
     "blog", "blog post", "blogpost", "post", "article", "artikel", "blog artikel"
   ],
   "require": {
-    "Ceres":">=2.0"
+    "Ceres":">=5.0.30"
   },
   "containers": [],
   "dataProviders": [

diff --git a/resources/views/Article/Layouts/Centered.twig b/resources/views/Article/Layouts/Centered.twig
@@ -75,14 +75,17 @@
                     </article>
 
                     <div class="blog-related-posts mb-4">
-                        <blog-list heading-text="{{ trans('Blog::Template.relatedPosts') }}"
-                                   horizontal
-                                   horizontal-classes="col-md-4 col-sm-6 mb-3"
-                                   layout="horizontal-MD"
-                                   ignore-post="{{ blogPost.data.post.urlName }}"
-                                   :category-id="{{ blogPost.data.category.id }}"
-                                   :filters="{'itemsPerPage':6}"
-                                   show-loader :show-no-results-text="false"></blog-list>
+                        <client-only>
+                            <blog-list heading-text="{{ trans('Blog::Template.relatedPosts') }}"
+                                       horizontal
+                                       horizontal-classes="col-md-4 col-sm-6 mb-3"
+                                       layout="horizontal-MD"
+                                       ignore-post="{{ blogPost.data.post.urlName }}"
+                                       :category-id="{{ blogPost.data.category.id }}"
+                                       :filters="{'itemsPerPage':6}"
+                                       show-loader :show-no-results-text="false">
+                            </blog-list>
+                        </client-only>
                     </div>
 
                 </div>

diff --git a/resources/views/Article/Layouts/Default.twig b/resources/views/Article/Layouts/Default.twig
@@ -77,14 +77,17 @@
                     </article>
 
                     <div class="blog-related-posts mb-4">
-                        <blog-list heading-text="{{ trans('Blog::Template.relatedPosts') }}"
-                                   horizontal
-                                   horizontal-classes="col-md-4 col-sm-6 mb-3"
-                                   layout="horizontal-MD"
-                                   ignore-post="{{ blogPost.data.post.urlName }}"
-                                   :category-id="{{ blogPost.data.category.id }}"
-                                   :filters="{'itemsPerPage':6}"
-                                   show-loader :show-no-results-text="false"></blog-list>
+                        <client-only>
+                            <blog-list heading-text="{{ trans('Blog::Template.relatedPosts') }}"
+                                       horizontal
+                                       horizontal-classes="col-md-4 col-sm-6 mb-3"
+                                       layout="horizontal-MD"
+                                       ignore-post="{{ blogPost.data.post.urlName }}"
+                                       :category-id="{{ blogPost.data.category.id }}"
+                                       :filters="{'itemsPerPage':6}"
+                                       show-loader :show-no-results-text="false">
+                            </blog-list>
+                        </client-only>
                     </div>
                 </div>
             </div>

diff --git a/resources/views/Category/CategoryBlog.twig b/resources/views/Category/CategoryBlog.twig
@@ -20,7 +20,11 @@
 
 {% block PageBody %}
 
-    {% if blogData.updateBlogUrl %}<blog-update-category-url category-url="{{ categoryUrl }}"></blog-update-category-url>{% endif %}
+    {% if blogData.updateBlogUrl %}
+        <client-only>
+            <blog-update-category-url category-url="{{ categoryUrl }}"></blog-update-category-url>
+        </client-only>
+    {% endif %}
 
     {% if blogLayout == 'default' %}
         {% include "Blog::Category.Layouts.Default" %}

diff --git a/resources/views/Category/Layouts/Default.twig b/resources/views/Category/Layouts/Default.twig
@@ -22,7 +22,9 @@
 
         <div class="row {{ reverse ? 'flex-row-reverse' : '' }}">
             <div class="col-lg-9">
-                <blog-list :category-id="{{ category.id }}" :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}"show-loader show-load-more show-dummy></blog-list>
+                <client-only>
+                    <blog-list :category-id="{{ category.id }}" :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}"show-loader show-load-more show-dummy></blog-list>
+                </client-only>
             </div>
 
             <div class="col-lg-3 blog-sidebar">

diff --git a/resources/views/Category/Layouts/Modern.twig b/resources/views/Category/Layouts/Modern.twig
@@ -1,14 +1,18 @@
 <div class="blog-wrapper {{ reverse ? 'blog-layout-default-reverse' : 'blog-layout-default' }}">
 
     <div class="container-fluid mx-0 px-0">
-        <blog-list layout="featured-1" :category-id="{{ category.id }}" :filters="{{ blogData.filters | merge({'itemsPerPage':1}) | json_encode }}" show-loader></blog-list>
+        <client-only>
+            <blog-list layout="featured-1" :category-id="{{ category.id }}" :filters="{{ blogData.filters | merge({'itemsPerPage':1}) | json_encode }}" show-loader></blog-list>
+        </client-only>
     </div>
 
     <div class="container-max blog-container">
 
         <div class="row {{ reverse ? 'flex-row-reverse' : '' }}">
             <div class="col-lg-9">
-                <blog-list :category-id="{{ category.id }}" :skip="1" :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}" show-loader show-load-more show-dummy></blog-list>
+                <client-only>
+                    <blog-list :category-id="{{ category.id }}" :skip="1" :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}" show-loader show-load-more show-dummy></blog-list>
+                </client-only>
             </div>
 
             <div class="col-lg-3 blog-sidebar">

diff --git a/resources/views/Category/Search.twig b/resources/views/Category/Search.twig
@@ -28,7 +28,9 @@
                         {% endif %}
 
                         {% if page.type == 'search' %}
-                            <blog-search is-search-page initial-search-string="{{ filters.search }}"></blog-search>
+                            <client-only>
+                                <blog-search is-search-page initial-search-string="{{ filters.search }}"></blog-search>
+                            </client-only>
                         {% endif %}
                     </div>
                 </div>
@@ -41,9 +43,9 @@
 
             <div class="row">
                 <div class="col-lg-9">
-
-                    <blog-list {{ page.type == 'search' ? 'is-search-page' : '' }} :filters="{{ filters | json_encode }}" show-loader show-load-more show-dummy></blog-list>
-
+                    <client-only>
+                        <blog-list {{ page.type == 'search' ? 'is-search-page' : '' }} :filters="{{ filters | json_encode }}" show-loader show-load-more show-dummy></blog-list>
+                    </client-only>
                 </div>
 
                 <div class="col-lg-3 blog-sidebar">

diff --git a/resources/views/Landing/Layouts/Default.twig b/resources/views/Landing/Layouts/Default.twig
@@ -20,7 +20,9 @@
 
         <div class="row {{ reverse ? 'flex-row-reverse' : '' }}">
             <div class="col-lg-9">
-                <blog-list :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}" show-loader show-load-more show-dummy></blog-list>
+                <client-only>
+                    <blog-list :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}" show-loader show-load-more show-dummy></blog-list>
+                </client-only>
             </div>
 
             <div class="col-lg-3 blog-sidebar">

diff --git a/resources/views/Landing/Layouts/FourFeatured.twig b/resources/views/Landing/Layouts/FourFeatured.twig
@@ -1,14 +1,18 @@
 <div class="blog-wrapper blog-four-featured">
 
     <div class="container-fluid mx-0 px-0 blog-four-featured-banner clearfix">
-        <blog-list layout="featured-1" :filters="{{ blogData.filters | merge({'itemsPerPage':4}) | json_encode }}" show-loader></blog-list>
+        <client-only>
+            <blog-list layout="featured-1" :filters="{{ blogData.filters | merge({'itemsPerPage':4}) | json_encode }}" show-loader></blog-list>
+        </client-only>
     </div>
 
     <div class="container-max blog-container">
 
         <div class="row {{ reverse ? 'flex-row-reverse' : '' }}">
             <div class="col-lg-9">
-                <blog-list horizontal horizontal-classes="col-lg-4 col-md-6" layout="horizontal-LG" :skip="4" :filters="{{ blogData.filters  | merge({'itemsPerPage':8}) | json_encode }}" show-loader show-load-more show-dummy></blog-list>
+                <client-only>
+                    <blog-list horizontal horizontal-classes="col-lg-4 col-md-6" layout="horizontal-LG" :skip="4" :filters="{{ blogData.filters  | merge({'itemsPerPage':8}) | json_encode }}" show-loader show-load-more show-dummy></blog-list>
+                </client-only>
             </div>
 
             <div class="col-lg-3 blog-sidebar">

diff --git a/resources/views/Landing/Layouts/Modern.twig b/resources/views/Landing/Layouts/Modern.twig
@@ -1,14 +1,18 @@
 <div class="blog-wrapper {{ reverse ? 'blog-layout-default-reverse' : 'blog-layout-default' }}">
 
     <div class="container-fluid mx-0 px-0">
-        <blog-list layout="featured-1" :filters="{{ blogData.filters | merge({'itemsPerPage':1}) | json_encode }}" show-loader></blog-list>
+        <client-only>
+            <blog-list layout="featured-1" :filters="{{ blogData.filters | merge({'itemsPerPage':1}) | json_encode }}" show-loader></blog-list>
+        </client-only>
     </div>
 
     <div class="container-max blog-container">
 
         <div class="row {{ reverse ? 'flex-row-reverse' : '' }}">
             <div class="col-lg-9">
-                <blog-list :skip="1" :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}" show-loader show-load-more show-dummy></blog-list>
+                <client-only>
+                    <blog-list :skip="1" :filters="{{ blogData.filters ? blogData.filters | json_encode : '{}' }}" show-loader show-load-more show-dummy></blog-list>
+                </client-only>
             </div>
 
             <div class="col-lg-3 blog-sidebar">

diff --git a/resources/views/Sidebar/Sidebar.twig b/resources/views/Sidebar/Sidebar.twig
@@ -4,7 +4,9 @@
 
 {% if not isSearchPage %}
     <div class="blog-sidebar-section">
-        <blog-search></blog-search>
+        <client-only>
+            <blog-search></blog-search>
+        </client-only>
     </div>
 {% endif %}
 
@@ -16,6 +18,8 @@
 
 {% if showSidebarLatestPosts == "true" %}
     <div class="blog-sidebar-section">
-        <blog-latest-posts></blog-latest-posts>
+        <client-only>
+            <blog-latest-posts></blog-latest-posts>
+        </client-only>
     </div>
 {% endif %}