fix: minor layout fixes

shopware · Nov 21, 2022 · 68b95b0 · 68b95b0
1 parent cae882b
commit 68b95b0
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 72 deletions.
diff --git a/.changeset/eighty-forks-attend.md b/.changeset/eighty-forks-attend.md
@@ -0,0 +1,6 @@
+---
+"@shopware-pwa/cms-base": minor
+"vue-demo-store": minor
+---
+
+listing filters hydration and top navigation submenu access
diff --git a/packages/cms-base/components/SwProductListingFilter.vue b/packages/cms-base/components/SwProductListingFilter.vue
@@ -32,13 +32,11 @@ const cmsMap = () => {
 </script>
 <template>
   <div>
-    <ClientOnly>
-      <component
-        :is="cmsMap()"
-        :filter="filter"
-        :selectedFilters="selectedFilters"
-        @select-value="emit('selectFilterValue', $event)"
-      />
-    </ClientOnly>
+    <component
+      :is="cmsMap()"
+      :filter="filter"
+      :selectedFilters="selectedFilters"
+      @select-value="emit('selectFilterValue', $event)"
+    />
   </div>
 </template>
diff --git a/packages/cms-base/components/SwProductListingFilters.vue b/packages/cms-base/components/SwProductListingFilters.vue
@@ -223,7 +223,7 @@ onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
             </div>
             <div class="i-carbon-chevron-down h-5 w-5 ml-1"></div>
           </div>
-          <div class="flex flex-wrap" v-if="!getInitialFilters.length">
+          <div class="flex flex-wrap" v-show="!getInitialFilters.length">
             <div class="flex pl-2 flex-wrap">
               <div class="py-3 mb-2 mr-4 max-w-sm animate-pulse">
                 <div
@@ -259,68 +259,6 @@ onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
           </div>
         </main>
       </div>
-      <!-- SSR static placeholder -->
-      <!-- <div class="bg-white" role="status">
-        <main class="mx-auto">
-          <div
-            class="relative flex items-baseline justify-between pt-6 pb-6 border-b border-gray-200"
-          >
-            <div>
-              <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
-                {{ getTranslatedProperty(category, "name") }}
-                ...
-              </h1>
-            </div>
-
-            <div class="flex items-center" ref="dropdownElement">
-              <div class="relative inline-block text-left">
-                <div>
-                  <button
-                    type="button"
-                    disabled
-                    class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900"
-                  >
-                    Sort
-                    <div class="i-carbon-chevron-down h-5 w-5 ml-1"></div>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex pl-2 flex-wrap">
-            <div class="py-3 mb-2 max-w-sm animate-pulse">
-              <div
-                class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-              ></div>
-            </div>
-            <div class="py-3 max-w-sm animate-pulse">
-              <div
-                class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-25 h-12 text-gray-400 hover:text-gray-500 rounded"
-              ></div>
-            </div>
-            <div class="py-3 ml-4 mb-2 max-w-sm animate-pulse">
-              <div
-                class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-25 h-12 text-gray-400 hover:text-gray-500 rounded"
-              ></div>
-            </div>
-            <div class="py-3 mb-2 max-w-sm animate-pulse">
-              <div
-                class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-              ></div>
-            </div>
-            <div class="py-3 mb-2 max-w-sm animate-pulse">
-              <div
-                class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-              ></div>
-            </div>
-            <div class="py-3 mb-2 max-w-sm animate-pulse">
-              <div
-                class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-              ></div>
-            </div>
-          </div>
-        </main>
-      </div> -->
     </template>
   </ClientOnly>
 </template>
diff --git a/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue b/templates/vue-demo-store/components/layout/LayoutTopNavigation.vue
@@ -54,7 +54,7 @@ onClickOutside(menuHtmlElement, () => (currentMenuPosition.value = null));
               class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-6 sm:pb-0"
             >
               <router-link
-                :to="'/' + childElement.seoUrls[0]?.seoPathInfo"
+                :to="'/' + childElement?.seoUrls?.[0]?.seoPathInfo"
                 class="flex justify-between rounded-lg hover:bg-gray-50"
               >
                 <div