Feature/tqlg 307 seo img alt title

components/Account/Order/AccountOrderConfirmPayment.vue

@@ -28,7 +28,7 @@ onMounted(async () => {
         label: method.translated.name,
         value: method.id,
         description: method.translated.description,
-        mediaUrl: method.media?.url,
+        media: method.media,
     }));
 });
 </script>
@@ -48,7 +48,7 @@ onMounted(async () => {
                 <CheckoutConfirmPaymentMethod
                     :label="option.label"
                     :description="option.description"
-                    :media-url="option.mediaUrl"
+                    :media="option.media"
                 />
             </template>
         </FormKit>

components/Account/Order/AccountOrderConfirmShipping.vue

@@ -17,7 +17,7 @@ defineProps<{
                 :label="getTranslatedProperty(method, 'name')"
                 :delivery-time="getShippingMethodDeliveryTime(method)"
                 :description="getTranslatedProperty(method, 'description')"
-                :media-url="method.media?.url"
+                :media="method.media"
             />
         </template>
     </CheckoutConfirmCard>

components/Checkout/CheckoutLineItem.vue

@@ -109,11 +109,13 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
             <template v-else>
                 <img
                     :src="lineItemCover.url"
-                    :alt="lineItemCover.alt"
+                    :alt="lineItemCover.alt ?? lineItem?.translated?.name ?? product?.translated?.name"
+                    :title="lineItemCover.title ?? lineItem?.translated?.name ?? product?.translated?.name"
                     class="h-full w-full object-cover object-center"
                 />
             </template>
         </LocaleLink>
+
         <div
             v-else-if="isPromotion"
             class="flex h-full w-full items-center justify-center"
@@ -139,7 +141,9 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
                 </span>
             </div>
 
-            <span v-if="isDigital">{{ $t('checkout.lineItem.digitalProduct') }}</span>
+            <span v-if="isDigital">
+                {{ $t('checkout.lineItem.digitalProduct') }}
+            </span>
 
             <p
                 v-if="itemOptions"

components/Checkout/Confirm/CheckoutConfirmPayment.vue

@@ -25,8 +25,9 @@ onMounted(async () => {
         label: method.translated.name,
         value: method.id,
         description: method.translated.description,
-        mediaUrl: method.media?.url,
+        media: method.media,
     }));
+
     trackAddPaymentInfo();
 });
 </script>
@@ -49,7 +50,7 @@ onMounted(async () => {
                 <CheckoutConfirmPaymentMethod
                     :label="option.label"
                     :description="option.description"
-                    :media-url="option.mediaUrl"
+                    :media="option.media"
                 />
             </template>
         </FormKit>

components/Checkout/Confirm/CheckoutConfirmPaymentMethod.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { Schemas } from "@shopware/api-client/api-types";
+
 defineProps<{
     label: string;
     description?: string;
-    mediaUrl?: string;
+    media?: Schemas['Media'];
 }>();
 </script>
 
@@ -19,11 +21,13 @@ defineProps<{
             {{ description }}
         </span>
     </div>
+
     <img
-        v-if="mediaUrl"
+        v-if="media"
         loading="lazy"
-        :src="mediaUrl"
-        :alt="`Logo of ${label}`"
+        :src="media.url"
+        :alt="media.translated?.alt"
+        :title="media.translated?.title"
         class="ml-auto max-h-6 max-w-full object-contain"
     />
 </template>

components/Checkout/Confirm/CheckoutConfirmShipping.vue

@@ -28,7 +28,7 @@ onMounted(async () => {
         value: method.id,
         deliveryTime: getShippingMethodDeliveryTime(method),
         description: method.translated.description,
-        mediaUrl: method.media?.url,
+        media: method.media,
     }));
 
     trackAddShippingInfo();
@@ -51,7 +51,7 @@ onMounted(async () => {
                     :label="option.label"
                     :delivery-time="option.deliveryTime"
                     :description="option.description"
-                    :media-url="option.mediaUrl"
+                    :media="option.media"
                 />
             </template>
         </FormKit>

components/Checkout/Confirm/CheckoutConfirmShippingMethod.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import type { Schemas } from "@shopware/api-client/api-types";
+
 defineProps<{
     label: string;
     deliveryTime?: string;
     description?: string;
-    mediaUrl?: string;
+    media?: Schemas['Media'];
 }>();
 </script>
 
@@ -23,10 +25,11 @@ defineProps<{
         </span>
 
         <img
-            v-if="mediaUrl"
+            v-if="media"
             loading="lazy"
-            :src="mediaUrl"
-            :alt="`Logo of ${label}`"
+            :src="media.url"
+            :alt="media.translated?.alt"
+            :title="media.translated?.title"
         />
     </div>
 </template>

components/Cms/Element/CmsElementImage.vue

@@ -53,6 +53,7 @@ const getMinHeightAsHeight = (properties: CSSProperties) => {
             />
             {{ $t('cms.element.videoTagNotSupported') }}
         </video>
+
         <img
             v-else
             ref="imageElement"
@@ -62,7 +63,8 @@ const getMinHeightAsHeight = (properties: CSSProperties) => {
                 'object-cover': displayMode === 'cover',
             }"
             :style="displayMode === 'cover' ? getMinHeightAsHeight(containerStyle) : ''"
-            :alt="imageAttrs.alt"
+            :alt="props.element?.data?.media?.translated?.alt"
+            :title="props.element?.data?.media?.translated?.title"
             :src="srcPath"
             :srcset="imageAttrs.srcset"
         />

components/Cms/Element/CmsElementImageGallery.vue

@@ -43,7 +43,8 @@ const slides = elementData.getData('sliderItems') ?? [];
                         <img
                             v-if="slide.media.url"
                             :src="slide.media.url"
-                            :alt="slide.translated?.alt ?? $t('cms.element.imageAlt')"
+                            :alt="slide.media.translated?.alt ?? $t('cms.element.imageAlt')"
+                            :title="slide.media.translated?.title ?? $t('cms.element.imageAlt')"
                             class="h-full w-full object-center"
                             :class="'object-' + displayMode"
                         />
@@ -78,7 +79,8 @@ const slides = elementData.getData('sliderItems') ?? [];
                         <img
                             v-if="slide.media.url"
                             :src="slide.media.url"
-                            :alt="slide.translated?.alt ?? $t('cms.element.imageAlt')"
+                            :alt="slide.media.translated?.alt ?? $t('cms.element.imageAlt')"
+                            :title="slide.media.translated?.title ?? $t('cms.element.imageAlt')"
                             class="object-cover object-center opacity-40 group-[.swiper-slide-thumb-active]:border-2 group-[.swiper-slide-thumb-active]:border-brand-primary group-[.swiper-slide-thumb-active]:opacity-100"
                         />
 

components/Cms/Element/CmsElementImageSlider.vue

@@ -18,7 +18,7 @@ const autoplayTimeout = config.getConfigValue('autoplayTimeout');
 const minHeight = config.getConfigValue('minHeight');
 const speed = config.getConfigValue('speed');
 
-const slides = computed(() => config.getConfigValue('sliderItems') ?? []);
+const slides = computed(() => data.getData('sliderItems') ?? []);
 const sliderRef = ref(null);
 
 if (slides.value.length > 0) {
@@ -92,13 +92,14 @@ if (isHomePage.value) {
             >
                 <LayoutSliderSlide
                     v-for="slide in slides"
-                    :key="slide.mediaId"
+                    :key="slide.media.id"
                     :class="`min-h-[${minHeight}]`"
                 >
                     <img
                         ref="slidesRef"
-                        :src="slide.mediaUrl"
-                        :alt="$t('cms.element.imageAlt')"
+                        :src="slide.media.url"
+                        :alt="slide.media?.translated?.alt ?? $t('cms.element.imageAlt')"
+                        :title="slide.media?.translated?.title ?? $t('cms.element.imageAlt')"
                         class="h-full w-full object-center"
                         :class="'object-' + displayMode"
                     />

components/Layout/Footer/LayoutFooterPaymentMethods.vue

@@ -20,10 +20,10 @@ onMounted(async () => {
                 <img
                     v-if="method.media?.url"
                     :src="method.media.url"
-                    :alt="getTranslatedProperty(method, 'name')"
-                    :title="getTranslatedProperty(method, 'name')"
+                    :alt="method.media.translated.alt ?? getTranslatedProperty(method, 'name')"
+                    :title="method.media.translated.title ?? getTranslatedProperty(method, 'name')"
                     class="h-8 w-auto object-contain"
-                    loading="eager"
+                    loading="lazy"
                 />
             </div>
         </div>

components/Layout/Header/Search/LayoutHeaderSearchSuggestions.vue

@@ -24,7 +24,8 @@ const productCover = getProductCover(props.product.cover, 'xs');
                     loading="lazy"
                     :src="productCover.url"
                     class="h-10 min-h-10 w-10 min-w-10 object-cover"
-                    :alt="productCover.alt"
+                    :alt="productCover.alt ?? product?.translated?.name"
+                    :title="productCover.title ?? product?.translated?.name"
                 />
             </template>
         </div>

components/Layout/LayoutLogo.vue

@@ -22,18 +22,23 @@ const shopName = configStore.get('core.basicInformation.shopName') ?? 'pond';
         :title="shopName"
         :to="withLink ? '/' : ''"
     >
-        <span class="sr-only">{{ shopName }}</span>
+        <span class="sr-only">
+            {{ shopName }}
+        </span>
+
         <img
             v-if="!smallLogo"
             src="/logo.svg"
             :alt="shopName"
+            :title="shopName"
             :class="logoClasses"
         />
 
         <img
             v-else
             src="/logo-small.svg"
             :alt="shopName"
+            :title="shopName"
             :class="logoClasses"
         />
     </LocaleLink>

components/Order/OrderLineItem.vue

@@ -27,7 +27,8 @@ const lineItemCover = getProductCover(lineItem.value.cover, 'xs');
             <template v-else>
                 <img
                     :src="lineItemCover.url"
-                    :alt="lineItemCover.alt"
+                    :alt="lineItemCover.alt ?? lineItem?.translated?.name"
+                    :title="lineItemCover.title ?? lineItem?.translated?.name"
                     class="h-full w-full object-cover object-center"
                 />
             </template>

components/Product/ProductCard.vue

@@ -58,7 +58,8 @@ const { stop } = useIntersectionObserver(productCard, ([{ isIntersecting }]) =>
                     <template v-else>
                         <img
                             :src="cover.url"
-                            :alt="cover.alt"
+                            :alt="cover.alt ?? props.product.translated.name"
+                            :title="cover.title ?? props.product.translated.name"
                             class="aspect-square h-full w-full object-center group-hover:opacity-75"
                             :class="displayMode === 'standard' ? 'object-scale-down' : 'object-' + displayMode"
                         />

components/Product/ProductVariantSelection.vue

@@ -150,11 +150,8 @@ const { entityArrayToOptions } = useFormkitHelper();
                     >
                         <img
                             :src="option.media.url"
-                            :alt="
-                                getTranslatedProperty(option.media, 'alt') ??
-                                getTranslatedProperty(option.media, 'title') ??
-                                option.media.fileName
-                            "
+                            :alt="option.media.translated.alt ?? option.media.fileName"
+                            :title="option.media.translated.title ?? option.media.fileName"
                             class="rounded-full"
                         />
                     </FormKit>

composables/useMedia.ts

@@ -34,6 +34,7 @@ export function useMedia() {
             return {
                 url: '/fallback-product-cover.svg',
                 alt: t('composable.media.noImageMessage'),
+                title: t('composable.media.noImageMessage'),
                 placeholder: true,
             };
         }
@@ -43,13 +44,15 @@ export function useMedia() {
                 url: cover.media.thumbnails?.length
                     ? cover.media.thumbnails[thumbnailSizes[size]]?.url
                     : cover.media.url,
-                alt: cover.media.alt,
+                alt: cover.media.translated.alt,
+                title: cover.media.translated.title,
                 placeholder: false,
             };
         } else {
             return {
                 url: cover.thumbnails?.length ? cover.thumbnails[thumbnailSizes[size]]?.url : cover.url,
-                alt: cover.alt,
+                alt: cover.translated.alt,
+                title: cover.translated.title,
                 placeholder: false,
             };
         }

package.json

@@ -2,7 +2,7 @@
   "name": "@basecom-gmbh/pond",
   "type": "module",
   "main": "./nuxt.config.ts",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",