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/Account/Order/AccountOrderItem.vue

@@ -127,20 +127,21 @@ onMounted(async () => {
                     </div>
                 </div>
 
-                <div class="mt-5 font-bold">{{ $t('account.orders.lineItemsHeading') }}</div>
-                <div
-                    v-for="(product, index) in order.lineItems"
-                    :key="product.id"
-                >
-                    <div class="mt-4 flex w-full">
-                        <OrderLineItem :line-item="product" />
-                    </div>
-                    <hr
-                        v-if="index !== order.lineItems.length - 1"
-                        class="w-full"
-                    />
+                <div class="mt-5 font-bold">
+                    {{ $t('account.orders.lineItemsHeading') }}
                 </div>
+
+                <ul class="divide-y divide-gray-medium">
+                    <li
+                        v-for="lineItem in order.lineItems"
+                        :key="lineItem.id"
+                        class="flex py-6"
+                    >
+                        <OrderLineItem :line-item="lineItem" />
+                    </li>
+                </ul>
             </div>
+
             <OrderSummary
                 :is-account-order-item="true"
                 :order="order"

components/Checkout/CheckoutLineItem.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Schemas } from '@shopware/api-client/api-types';
+import { getTranslatedProperty, getProductRoute } from '@shopware-pwa/helpers-next';
 
-const { getProductRoute } = useProductRoute();
+const { getLineItemRoute } = useLineItemRoute();
 const { getProductCover } = useMedia();
 const { pushError, pushSuccess } = useNotifications();
 const { handleError } = useHandleError();
@@ -17,6 +18,8 @@ const isLoading = ref(false);
 
 const lineItemCover = getProductCover(lineItem.value.cover, 'xs');
 
+const lineItemSeoUrl = product.value ? getProductRoute(product.value) : await getLineItemRoute(lineItem.value);
+
 const { getFormattedPrice } = usePrice();
 const { refreshCart } = useCart();
 const { trackAddToCart, trackRemoveFromCart } = useAnalytics();
@@ -67,9 +70,13 @@ const removeCartItem = async () => {
     isLoading.value = true;
 
     try {
-        trackRemoveFromCart(product.value, lineItem.value.quantity);
         await removeItem();
 
+        // TODO: fix tracking giving an error when removing a promotion
+        if (!isPromotion) {
+            trackRemoveFromCart(product.value, lineItem.value.quantity);
+        }
+
         pushSuccess(t('checkout.lineItem.remove.successMessage', { lineItemName: lineItem.value.label }));
     } catch (error) {
         pushError(t('checkout.lineItem.remove.errorMessage', { lineItemName: lineItem.value.label }));
@@ -94,7 +101,7 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
     <div class="mr-4 h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-medium bg-gray-light">
         <LocaleLink
             v-if="!isPromotion"
-            :to="getProductRoute(lineItem)"
+            :to="lineItemSeoUrl"
         >
             <template v-if="lineItemCover.placeholder">
                 <SharedImagePlaceholder :size="'sm'" />
@@ -103,11 +110,19 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
             <template v-else>
                 <img
                     :src="lineItemCover.url"
-                    :alt="lineItemCover.alt"
+                    :alt="
+                        lineItemCover.alt ??
+                        (getTranslatedProperty(lineItem, 'name') || getTranslatedProperty(product, 'name'))
+                    "
+                    :title="
+                        lineItemCover.title ??
+                        (getTranslatedProperty(lineItem, 'name') || getTranslatedProperty(product, '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"
@@ -122,18 +137,27 @@ const debounceUpdate = useDebounceFn(updateQuantity, 600);
     <div class="flex flex-1 flex-col">
         <div>
             <div class="flex flex-col justify-between gap-4 lg:flex-row">
-                <LocaleLink :to="getProductRoute(lineItem)">
+                <LocaleLink
+                    v-if="!isPromotion"
+                    :to="lineItemSeoUrl"
+                >
                     <p>
                         {{ lineItem.label }}
                     </p>
                 </LocaleLink>
 
+                <p v-else-if="isPromotion">
+                    {{ lineItem.label }}
+                </p>
+
                 <span v-if="itemTotalPrice">
                     {{ getFormattedPrice(itemTotalPrice) }}
                 </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>
@@ -50,7 +51,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 ?? label"
+        :title="media.translated?.title ?? label"
         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();
@@ -52,7 +52,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 ?? label"
+            :title="media.translated?.title ?? label"
         />
     </div>
 </template>

components/Cms/Element/CmsElementImage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CmsElementImage } from '@shopware-pwa/composables-next';
-import { buildUrlPrefix } from '@shopware-pwa/helpers-next';
+import { buildUrlPrefix, getTranslatedProperty } from '@shopware-pwa/helpers-next';
 import { useElementSize } from '@vueuse/core';
 import type { CSSProperties } from 'vue';
 
@@ -29,6 +29,8 @@ const getMinHeightAsHeight = (properties: CSSProperties) => {
     const height = properties.minHeight ?? '100%';
     return `height: ${height}`;
 };
+
+const mediaObject = props.element.data?.media;
 </script>
 
 <template>
@@ -53,6 +55,7 @@ const getMinHeightAsHeight = (properties: CSSProperties) => {
             />
             {{ $t('cms.element.videoTagNotSupported') }}
         </video>
+
         <img
             v-else
             ref="imageElement"
@@ -62,7 +65,8 @@ const getMinHeightAsHeight = (properties: CSSProperties) => {
                 'object-cover': displayMode === 'cover',
             }"
             :style="displayMode === 'cover' ? getMinHeightAsHeight(containerStyle) : ''"
-            :alt="imageAttrs.alt"
+            :alt="getTranslatedProperty(mediaObject, 'alt')"
+            :title="getTranslatedProperty(mediaObject, 'title')"
             :src="srcPath"
             :srcset="imageAttrs.srcset"
         />

components/Cms/Element/CmsElementImageGallery.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsElementImageGallerySlider } from '../../../types/cms/element/cmsElementImageGallery';
+import { getTranslatedProperty } from '@shopware-pwa/helpers-next';
 
 const props = defineProps<{
     element: CmsElementImageGallery;
@@ -62,7 +63,8 @@ const openLightbox = (slideMediaId: string) => {
                         <img
                             v-if="slide.media.url"
                             :src="slide.media.url"
-                            :alt="slide.translated?.alt ?? $t('cms.element.imageAlt')"
+                            :alt="getTranslatedProperty(slide.media, 'alt') || $t('cms.element.imageAlt')"
+                            :title="getTranslatedProperty(slide.media, 'title') || $t('cms.element.imageAlt')"
                             class="h-full w-full object-center"
                             :class="'object-' + displayMode"
                         />
@@ -97,7 +99,8 @@ const openLightbox = (slideMediaId: string) => {
                         <img
                             v-if="slide.media.url"
                             :src="slide.media.url"
-                            :alt="slide.translated?.alt ?? $t('cms.element.imageAlt')"
+                            :alt="getTranslatedProperty(slide.media, 'alt') || $t('cms.element.imageAlt')"
+                            :title="getTranslatedProperty(slide.media, '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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getTranslatedProperty } from '@shopware-pwa/helpers-next';
 import type { Schemas } from '@shopware/api-client/api-types';
 import type { PromotionInfo } from '../../../types/analytics/promotion';
 
@@ -18,7 +19,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 +93,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="getTranslatedProperty(slide.media, 'alt') || $t('cms.element.imageAlt')"
+                        :title="getTranslatedProperty(slide.media, 'title') || $t('cms.element.imageAlt')"
                         class="h-full w-full object-center"
                         :class="'object-' + displayMode"
                     />

components/FrontendDetailPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { getProductRoute } = useProductRoute();
+import { getProductRoute } from '@shopware-pwa/helpers-next';
 const { t } = useI18n();
 
 const props = defineProps<{

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="getTranslatedProperty(method.media, 'alt') || getTranslatedProperty(method, 'name')"
+                    :title="getTranslatedProperty(method.media, 'title') || getTranslatedProperty(method, 'name')"
                     class="h-8 w-auto object-contain"
-                    loading="eager"
+                    loading="lazy"
                 />
             </div>
         </div>

components/Layout/Header/Search/LayoutHeaderSearchSuggestions.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getTranslatedProperty } from '@shopware-pwa/helpers-next';
 import type { Schemas } from '@shopware/api-client/api-types';
 
 const props = defineProps<{ product: Schemas['Product'] }>();
@@ -24,7 +25,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 ?? getTranslatedProperty(product, 'name')"
+                    :title="productCover.title ?? getTranslatedProperty(product, 'name')"
                 />
             </template>
         </div>