Fix/various issues: SSR, Styling and UX improvements (#152)

* wrap teleports in clientonly because nuxt doesnt support ssr rendering of teleports if using different selector than #teleports

* improve responsive styling of promotion button and modals

* improve a11y by removing duplicate sr entry

* improve quantity select styling

* fix being stuck on certain devices after opening modals using the useModal composable

* only load wishlist products on client to not block ssr rendering

* improve responsive cookie banner styling

* add instant skeleton loaders to certain navigation actions to impove percieved performance

* increase version

* remove duplicated calls when switching pages or on search page

* fix edit and add address in checkout being only rendered once

* linting

* removed unneeded associations, await cart and wishlist if on their respective pages to prevent wrongfully displaying empty notification

Author: m-borgmann

components/Account/AccountAddressContent.vue

@@ -3,7 +3,7 @@ import type { Schemas } from '@shopware/api-client/api-types';
 import { type ApiClientError } from '@shopware/api-client';
 import type { BillingAddressForm } from '~/types/form/AddressForm';
 
-const modalController = useModal();
+const modalController = useModal(false);
 const { handleError } = useFormErrorStore();
 
 const { customerAddresses, loadCustomerAddresses, saveAddress, deleteAddress } = useCustomerAddress();

components/Checkout/CheckoutPromotion.vue

@@ -38,9 +38,13 @@ const addPromotion = async (promotionCodeForm: PromotionCodeForm) => {
             {{ cartErrors['promotion-not-found'].message }}
         </li>
     </ul>
+
     <FormKit
         type="form"
         :submit-label="$t('checkout.promotion.submitLabel')"
+        :submit-attrs="{
+            wrapperClass: 'min-w-max',
+        }"
         :classes="{
             form: 'w-full flex flex-row gap-4',
         }"

components/Checkout/Confirm/CheckoutConfirmAddress.vue

@@ -8,7 +8,7 @@ const { refreshContext, signedIn } = useCustomerStore();
 const { handleError } = useFormErrorStore();
 const { pushError } = useNotifications();
 const { t } = useI18n();
-const modalController = useModal();
+const modalController = useModal(false);
 const { refreshCart } = useCart();
 const isLoading = ref(false);
 

components/Checkout/Confirm/CheckoutConfirmChangeAddress.vue

@@ -173,8 +173,16 @@ const onSubmitAddress= (fields: ShippingAddressForm|BillingAddressForm) => {
             </ul>
 
             <AddressFormFields
+                v-if="mode === 'edit-address'"
                 :address-type="addressType"
-                :initial-address="mode === 'edit-address' ? selectedAddress : null"
+                :initial-address="selectedAddress"
+                :error-name-nested="false"
+            />
+
+            <AddressFormFields
+                v-else-if="mode === 'add-address'"
+                :address-type="addressType"
+                :initial-address="null"
                 :error-name-nested="false"
             />
 

components/Cms/Element/CmsElementCategoryNavigation.vue

@@ -10,6 +10,9 @@ const navigationStore = useNavigationStore();
 const { mainNavigation } = storeToRefs(navigationStore);
 
 const { isActive } = useActivePath();
+
+const route = useRoute();
+const listingStore = useListingStore(route.path === '/search' ? 'search' : 'category');
 </script>
 
 <template>
@@ -23,6 +26,7 @@ const { isActive } = useActivePath();
                 :to="getCategoryRoute(item)"
                 class="text-lg"
                 :class="{ 'font-bold': isActive(item.seoUrls) }"
+                @click="listingStore.isLoading = true;"
             >
                 {{ getTranslatedProperty(item, 'name') }}
             </LocaleLink>
@@ -36,6 +40,7 @@ const { isActive } = useActivePath();
                     <LocaleLink
                         :to="getCategoryRoute(child)"
                         :class="{ 'font-bold': isActive(child.seoUrls) }"
+                        @click="listingStore.isLoading = true;"
                     >
                         {{ getTranslatedProperty(child, 'name') }}
                     </LocaleLink>

components/Cms/Element/CmsElementImageGallery.vue

@@ -22,7 +22,7 @@ const isZoomEnabled = elementConfig.getConfigValue('zoom');
 const thumbnailSlidesPerView = 3;
 const spaceBetween = 16;
 
-const lightboxModalController = useModal();
+const lightboxModalController = useModal(false);
 const lightboxSliderIndex = ref(0);
 const staticThumbnails = computed(() => slides.slice(0, thumbnailSlidesPerView));
 

components/Cms/Element/CmsElementProductListing.vue

@@ -13,7 +13,7 @@ const props = withDefaults(
 
 const route = useRoute();
 const { trackSelectItem } = useAnalytics();
-const { getElements, search, getCurrentListing } = useCategoryListing();
+const { getElements, getCurrentListing } = useCategoryListing();
 
 const listingStore = useListingStore(props.productListingStoreKey);
 const { listingState } = storeToRefs(listingStore);
@@ -37,11 +37,7 @@ const { y: windowYPosition } = useScroll(window, { behavior: 'smooth' });
 const changePage = async (page: number) => {
     windowYPosition.value = 0;
     listingStore.setPage(page);
-
-    listingStore.displayCardSkeleton = true;
-    await search(listingState.value.criteria);
-    listingStore.setSearchResult(getCurrentListing.value, true);
-    listingStore.displayCardSkeleton = false;
+    // Removed search call and setting result in listingStore here, since the watcher from CmsElementSidebarFilter already triggers on pagination
 };
 
 const cardSkeletons = computed(() => {
@@ -60,6 +56,7 @@ const config = useCmsElementConfig(props.element);
 const boxLayout = config.getConfigValue('boxLayout');
 
 listingStore.setSearchResult(props.element.data.listing, true);
+listingStore.isLoading = false;
 
 const products = computed(() => 
     // If the store is loading, return an empty array

components/Cookie/CookieBannerActions.vue

@@ -4,11 +4,12 @@ const { isAcceptAllEnabled } = storeToRefs(cookieBannerStore);
 </script>
 
 <template>
-    <div class="flex flex-wrap justify-center gap-2">
+    <div class="flex flex-wrap justify-center gap-2 [&>button]:w-full [&>button]:sm:w-fit">
         <FormKit
             type="button"
             :classes="{
-                input: 'max-w-fit',
+                outer: 'w-full sm:w-fit',
+                input: 'max-w-full sm:max-w-fit',
             }"
             @click="cookieBannerStore.denyAll()"
         >
@@ -20,7 +21,7 @@ const { isAcceptAllEnabled } = storeToRefs(cookieBannerStore);
                 <FormKit
                     type="button"
                     :classes="{
-                        input: 'max-w-fit',
+                        input: 'max-w-full sm:max-w-fit',
                     }"
                 >
                     {{ $t('cookie.banner.configureButton') }}
@@ -32,7 +33,8 @@ const { isAcceptAllEnabled } = storeToRefs(cookieBannerStore);
             v-if="isAcceptAllEnabled"
             type="submit"
             :classes="{
-                input: 'max-w-fit',
+                outer: 'w-full sm:w-fit',
+                input: 'max-w-full sm:max-w-fit',
             }"
             @click="cookieBannerStore.acceptAll()"
         >

components/Cookie/CookieBannerMessage.vue

@@ -6,10 +6,10 @@
 
         <LazySharedModal
             :with-close-button="true"
-            size="sm"
+            size="md"
         >
             <template #trigger>
-                <button class="text-status-info">
+                <button class="text-brand-primary-dark hover:underline">
                     {{ $t('cookie.banner.additionalInformationTriggerButton') }}
                 </button>
             </template>

components/Cookie/CookieBannerModal.vue

@@ -3,7 +3,7 @@ const cookieBannerStore = useCookieBannerStore();
 const { activatedCookies, cookieGroups } = storeToRefs(cookieBannerStore);
 const configStore = useConfigStore();
 const isAcceptAllEnabled = configStore.get('core.basicInformation.acceptAllCookies') as boolean | null;
-const modalController = useModal();
+const modalController = useModal(false);
 
 const onUpdateCookie = (active: CookieEntry['cookie'][], inactive: CookieEntry['cookie'][]) => {
     cookieBannerStore.updateCookies(active, inactive);

components/Layout/Header/LayoutHeaderAccount.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const customerStore = useCustomerStore();
 const { signedIn } = storeToRefs(customerStore);
-const modalController = useModal();
+const modalController = useModal(false);
 const { t } = useI18n();
 
 const closeModal = () => {

components/Layout/Header/Search/LayoutHeaderSearch.vue

@@ -29,6 +29,7 @@ if (route.path === '/search') {
         />
     </button>
 
+    <!-- Nuxt currently has SSR support only for teleports to #teleports, so other targets need to use a <ClientOnly> wrapper. See: https://nuxt.com/docs/api/components/teleports -->
     <ClientOnly>
         <teleport to="#flyouts">
             <LayoutHeaderSearchBar

components/Layout/Header/Search/LayoutHeaderSearchBar.vue

@@ -46,9 +46,11 @@ const performDebouncedSearch = useDebounceFn(async (value: string) => {
                     search: value,
                 },
             });
+        } else {
+            // Only trigger search call and suggestion tracking if not on search page, since there we already fetch the products and hide the suggestion
+            await search();
+            trackSearchSuggestions();
         }
-        await search();
-        trackSearchSuggestions();
     }
 }, 500);
 

components/Layout/LayoutLogo.vue

@@ -22,10 +22,6 @@ const shopName = configStore.get('core.basicInformation.shopName') as string|nul
         :title="shopName"
         :to="withLink ? '/' : ''"
     >
-        <span class="sr-only">
-            {{ shopName }}
-        </span>
-
         <img
             v-if="!smallLogo"
             src="/logo.svg"

components/Layout/LayoutSidebar.vue

@@ -20,41 +20,47 @@ onClickOutside(sidebarContentElement, () => (props.isClosable ? close() : ''));
 </script>
 
 <template>
-    <Teleport to="body">
-        <div
-            ref="sidebarContentElement"
-            class="fixed z-50 overflow-y-auto bg-white transition-transform duration-500"
-            tabindex="-1"
-            aria-labelledby="sidebar"
-            :class="{
-                '!translate-x-0': isOpen && (side === 'left' || side === 'right'),
-                'top-0 h-dvh w-10/12 sm:w-96': side === 'left' || side === 'right',
-                '!translate-y-0': isOpen && side === 'bottom',
-                'bottom-0 h-[90dvh] w-full': side === 'bottom',
-                'left-0 -translate-x-full': side === 'left',
-                'right-0 translate-x-full': side === 'right',
-                'bottom-0 translate-y-full': side === 'bottom',
-            }"
-        >
-            <div class="flex items-center justify-between bg-gray-light p-3.5">
-                <slot name="header" />
-                <FormKitIcon
-                    icon="xmark"
-                    :title="t('icon.close')"
-                    class="mb-4 ml-auto block size-4 cursor-pointer"
-                    @click="controller.close()"
-                />
-            </div>
-            <div class="overflow-y-scroll p-4">
-                <slot name="content" />
+    <!-- Nuxt currently has SSR support only for teleports to #teleports, so other targets need to use a <ClientOnly> wrapper. See: https://nuxt.com/docs/api/components/teleports -->
+    <ClientOnly>
+        <Teleport to="body">
+            <div
+                ref="sidebarContentElement"
+                class="fixed z-50 overflow-y-auto bg-white transition-transform duration-500"
+                tabindex="-1"
+                aria-labelledby="sidebar"
+                :class="{
+                    '!translate-x-0': isOpen && (side === 'left' || side === 'right'),
+                    'top-0 h-dvh w-10/12 sm:w-96': side === 'left' || side === 'right',
+                    '!translate-y-0': isOpen && side === 'bottom',
+                    'bottom-0 h-[90dvh] w-full': side === 'bottom',
+                    'left-0 -translate-x-full': side === 'left',
+                    'right-0 translate-x-full': side === 'right',
+                    'bottom-0 translate-y-full': side === 'bottom',
+                }"
+            >
+                <div class="flex items-center justify-between bg-gray-light p-3.5">
+                    <slot name="header" />
+
+                    <FormKitIcon
+                        icon="xmark"
+                        :title="t('icon.close')"
+                        class="mb-4 ml-auto block size-4 cursor-pointer"
+                        @click="controller.close()"
+                    />
+                </div>
+
+                <div class="overflow-y-scroll p-4">
+                    <slot name="content" />
+                </div>
+
+                <slot name="footer" />
             </div>
-            <slot name="footer" />
-        </div>
 
-        <!-- body overlay -->
-        <div
-            v-if="isOpen"
-            class="fixed inset-0 z-40 h-screen w-screen bg-black/50"
-        />
-    </Teleport>
+            <!-- body overlay -->
+            <div
+                v-if="isOpen"
+                class="fixed inset-0 z-40 h-screen w-screen bg-black/50"
+            />
+        </Teleport>
+    </ClientOnly>
 </template>

components/Navigation/NavigationFlyout.vue

@@ -12,41 +12,44 @@ const selfNotHovered = refDebounced(isOutsideFlyout, 200);
 </script>
 
 <template>
-    <Teleport to="#flyouts">
-        <div
-            v-show="parentHovered || !selfNotHovered"
-            ref="flyout"
-            class="absolute left-0 top-full w-full bg-white py-4 shadow-md"
-            :data-flyout-category="navigationElement.id"
-        >
-            <div class="container flex">
-                <div
-                    v-for="child in navigationElement.children"
-                    :key="`nav-item-${child.id}`"
-                    class="flex w-1/4 flex-col gap-2"
-                >
-                    <NavigationLink
-                        :navigation-element="child"
-                        classes="text-lg font-bold py-2"
-                        active-classes="text-brand-primary"
-                        :as-link="child.type !== 'folder'"
-                    />
-
+    <!-- Nuxt currently has SSR support only for teleports to #teleports, so other targets need to use a <ClientOnly> wrapper. See: https://nuxt.com/docs/api/components/teleports -->
+    <ClientOnly>
+        <Teleport to="#flyouts">
+            <div
+                v-show="parentHovered || !selfNotHovered"
+                ref="flyout"
+                class="absolute left-0 top-full w-full bg-white py-4 shadow-md"
+                :data-flyout-category="navigationElement.id"
+            >
+                <div class="container flex">
                     <div
-                        v-if="child.childCount > 0"
-                        class="flex flex-col gap-2"
+                        v-for="child in navigationElement.children"
+                        :key="`nav-item-${child.id}`"
+                        class="flex w-1/4 flex-col gap-2"
                     >
                         <NavigationLink
-                            v-for="subChild in child.children"
-                            :key="`nav-item-${subChild.id}`"
-                            :navigation-element="subChild"
-                            classes="py-2"
+                            :navigation-element="child"
+                            classes="text-lg font-bold py-2"
                             active-classes="text-brand-primary"
-                            :as-link="subChild.type !== 'folder'"
+                            :as-link="child.type !== 'folder'"
                         />
+
+                        <div
+                            v-if="child.childCount > 0"
+                            class="flex flex-col gap-2"
+                        >
+                            <NavigationLink
+                                v-for="subChild in child.children"
+                                :key="`nav-item-${subChild.id}`"
+                                :navigation-element="subChild"
+                                classes="py-2"
+                                active-classes="text-brand-primary"
+                                :as-link="subChild.type !== 'folder'"
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </Teleport>
+        </Teleport>
+    </ClientOnly>
 </template>

components/Navigation/NavigationLink.vue

@@ -44,6 +44,9 @@ const categoryLink = computed(() => {
 const { isActive } = useActivePath();
 const { trackNavigation } = useAnalytics();
 const { t } = useI18n();
+
+const route = useRoute();
+const listingStore = useListingStore(route.path === '/search' ? 'search' : 'category');
 </script>
 
 <template>
@@ -56,7 +59,7 @@ const { t } = useI18n();
         :format="!isExternalLink"
         class="block transition-all hover:text-brand-primary"
         :class="[classes, isActive(navigationElement.seoUrls, activeWithExactMatch) ? activeClasses : '']"
-        @click="trackNavigation(navigationElement.level ? navigationElement.level - 1 : 0, getTranslatedProperty(navigationElement, 'name'))"
+        @click="trackNavigation(navigationElement.level ? navigationElement.level - 1 : 0, getTranslatedProperty(navigationElement, 'name')); listingStore.isLoading = true;"
     >
         <template v-if="asAllItemsLink">
             {{ $t('navigation.sidebar.allItems') }}