fix: homepage (#800)

* fix: homepage

- Alt text for hero images
- Product carousel
- Demo data

* fix: use i18n locale

* docs: update changelog

* chore: remove redundant import

apps/web/components/ui/VsfLogo.vue

@@ -1,13 +1,21 @@
 <template>
   <picture>
     <template v-if="imageExtension === 'svg'">
-      <NuxtImg :src="imagePath" alt="Logo" class="w-100 h-10 py-2" width="150" height="40" preload />
+      <NuxtImg
+        :src="imagePath"
+        :alt="`${{ storeName }} logo`"
+        class="w-100 h-10 py-2"
+        width="150"
+        height="40"
+        ref="logo"
+        preload
+      />
     </template>
     <template v-else>
       <img
         id="logo"
         :src="imagePath"
-        alt="Header Logo"
+        :alt="`${{ storeName }} logo`"
         :width="imgWidth"
         :height="imgHeight"
         class="max-h-[100px] max-w-[200px]"
@@ -19,7 +27,9 @@
 </template>
 
 <script setup lang="ts">
-const imageExtension = useRuntimeConfig().public.headerLogo.split('.').pop();
+const runtimeConfig = useRuntimeConfig();
+const storeName = runtimeConfig.public.storeName;
+const imageExtension = runtimeConfig.public.headerLogo.split('.').pop();
 const imagePath = '/images/logo.' + imageExtension;
 const logo = ref<HTMLImageElement | null>(null);
 const imgWidth = ref<string>('');

apps/web/composables/useHomepageData/homepageTemplateDataDe.json

@@ -0,0 +1,53 @@
+{
+  "id": 100,
+  "hero": [
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-lg.avif",
+        "md": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-md.avif",
+        "sm": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-sm.avif",
+        "xs": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-xs.avif",
+        "alt": "Capybara-Kopfhörer"
+      },
+      "tagline": "Kristalklare Klänge Genießen",
+      "taglineColor": "#000000",
+      "heading": "Sound auf höchstem Niveau",
+      "headingColor": "#000000",
+      "description": "Unsere hochmodernen Kopfhörer: Entwickelt für das ultimative Hörerlebnis genügen sie auch den höchsten Ansprüchen. Entdecken Sie die perfekte Mischung aus Stil, Komfort und Klangqualität, die Ihren Musikgenuss auf ein völlig neues Niveau hebt.",
+      "descriptionColor": "#000000",
+      "callToAction": "Capybara entdecken",
+      "link": "/gear/headphones-capybara_157"
+    },
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drohne-1920-800.avif",
+        "md": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drone_1024x600.avif",
+        "sm": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drone_768x600.avif",
+        "xs": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drone_768x600.avif",
+        "alt": "Omega-Drone"
+      },
+      "tagline": "Die Zukunft der Luftbildfotografie",
+      "taglineColor": "#000000",
+      "heading": "Drone Omega",
+      "headingColor": "#000000",
+      "description": "Omega ist eine leichte Drohne, die für atemberaubende Luftaufnahmen entwickelt wurde. Mit einer hochauflösenden Kamera auf einem 3-Achsen-Gimbal und einer Flugzeit von bis zu 45 Minuten sorgt sie für stabile, flüssige Videos. GPS-unterstützter Schwebeflug, Hindernisvermeidung und einfache Transportfähigkeit machen die Drone zum perfekten Begleiter für Ihre Aufnahmen.",
+      "descriptionColor": "#000000",
+      "callToAction": "Omega entdecken",
+      "link": "/gear/drone-omega_154"
+    }
+  ],
+  "valueProposition": [
+    {
+      "text": "<div class='flex flex-col mt-5 sm:mt-20 mt-0 sm:p-0 p-5 text-center sm:text-left'><span class='text-xl font-bold mb-2'>Die Zukunft des Klangs</span><h2 class='text-2xl font-semibold mb-4'>Das neue Hörerlebnis</h2><p class='typography-text-sm md:typography-text-lg mb-6 padding-right-desktop'>Unsere Kopfhörer-Kollektion setzt neue Maßstäbe in Sachen Audio-Präzision. Mit tiefem Bass, klaren Höhen und einem eindrucksvollen Klangbild bieten diese Kopfhörer ein einzigartiges Hörerlebnis für jedes Musikgenre. Mit Ihrer Kombination aus modernem Design, höchstem Komfort und neuester Technologie sind sie die perfekte Wahl für alle, die keine Kompromisse bei der Klangqualität eingehen möchten.</p><ul class='list-disc list-inside typography-text-sm md:typography-text-lg '><li>Premium-Sound in Studioqualität</li><li>Elegant und formschön</li><li>Lange Akkulaufzeit</li><li>Kabellose Verbindung via Bluetooth</li></ul></div>",
+      "image": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+      "alt": "Headphones",
+      "alignment": "left"
+    }
+  ],
+  "featured": [
+    {
+      "headline": "Entdecken Sie unsere Modekollektion",
+      "categoryId": "49"
+    }
+  ]
+}

apps/web/composables/useHomepageData/homepageTemplateDataEn.json

@@ -0,0 +1,53 @@
+{
+  "id": 100,
+  "hero": [
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-lg.avif",
+        "md": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-md.avif",
+        "sm": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-sm.avif",
+        "xs": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/headphones-xs.avif",
+        "alt": "Capybara headphones"
+      },
+      "tagline": "Feel the music",
+      "taglineColor": "#000000",
+      "heading": "Your Sound, Elevated",
+      "headingColor": "#000000",
+      "description": "Immerse yourself in rich, crystal-clear audio with our cutting-edge headphones. Designed for the ultimate listening experience, whether you're a casual listener or an audiophile. Discover the perfect blend of style, comfort, and sound quality that elevates your music to new heights.",
+      "descriptionColor": "#000000",
+      "callToAction": "Discover Capybara",
+      "link": "/gear/headphones-capybara_157"
+    },
+    {
+      "image": {
+        "lg": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drohne-1920-800.avif",
+        "md": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drone_1024x600.avif",
+        "sm": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drone_768x600.avif",
+        "xs": "https://cdn02.plentymarkets.com/v5vzmmmcb10k/frontend/PWA/Homepage/drone_768x600.avif",
+        "alt": "Omage drone"
+      },
+      "tagline": "The Future of Aerial Photography",
+      "taglineColor": "#000000",
+      "heading": "Drone Omega",
+      "headingColor": "#000000",
+      "description": "A lightweight drone designed for stunning aerial footage. With a high-resolution camera on a 3-axis gimbal and up to 45 minutes of flight time, it's perfect for capturing smooth, stable video. Featuring GPS-assisted hover, obstacle avoidance, and easy portability, the Drone brings innovation and simplicity to your aerial shots.",
+      "descriptionColor": "#000000",
+      "callToAction": "Discover Omega",
+      "link": "/gear/drone-omega_154"
+    }
+  ],
+  "valueProposition": [
+    {
+      "text": "<div class='flex flex-col mt-5 sm:mt-20 mt-0 sm:p-0 p-5 text-center sm:text-left'><span class='text-xl font-bold mb-2'>Experience the Future of Sound</span><h2 class='text-2xl font-semibold mb-4'>Redefine Your Listening Experience</h2><p class='typography-text-sm md:typography-text-lg mb-6 padding-right-desktop'>Our latest collection of headphones is designed to deliver unparalleled audio precision, with deep bass, clear highs, and an immersive experience for every genre of music. Combining sleek design, comfort, and cutting-edge technology, these headphones are made for those who refuse to compromise on sound quality.</p><ul class='list-disc list-inside typography-text-sm md:typography-text-lg '><li>Premium, studio-quality sound</li><li>Comfortable fit for extended listening</li><li>Long-lasting battery life</li><li>Seamless wireless connectivity</li></ul></div>",
+      "image": "https://cdn02.plentymarkets.com/mevofvd5omld/frontend/headphones-mediacard.avif",
+      "alt": "Headphones",
+      "alignment": "left"
+    }
+  ],
+  "featured": [
+    {
+      "headline": "Explore our fashion collection",
+      "categoryId": "49"
+    }
+  ]
+}

apps/web/composables/useHomepageData/useHomepageData.ts

@@ -1,17 +1,20 @@
-import { ref, watch, computed } from 'vue';
 import { HeroContentProps, SizeKey } from '~/components/ui/HeroCarousel/types';
 import { MediaItemProps } from '~/components/ui/MediaCard/types';
-import { useCategoryTree, useCategoryTemplate } from '~/composables';
-import homepageTemplateData from './homepageTemplateData.json';
+import homepageTemplateDataEn from './homepageTemplateDataEn.json';
+import homepageTemplateDataDe from './homepageTemplateDataDe.json';
 
 const resolveImage = (imageSizes: Record<SizeKey, string>, sizeKey: SizeKey): string => {
   return imageSizes[sizeKey] || '';
 };
 
 export default async function useHomepageData() {
+  const { $i18n } = useNuxtApp();
+  let homepageTemplateData = homepageTemplateDataEn;
+  if ($i18n.locale === 'de') {
+    homepageTemplateData = homepageTemplateDataDe;
+  }
   const viewport = useViewport();
-  const { data: categoryTree } = useCategoryTree();
-  const recommendedProductsCategoryId = ref('');
+  const recommendedProductsCategories = ref(homepageTemplateData.featured);
 
   const runtimeConfig = useRuntimeConfig();
   const homepageTemplate = ref(homepageTemplateData);
@@ -48,6 +51,7 @@ export default async function useHomepageData() {
     return homepageTemplate.value.hero.map((item) => {
       return {
         image: resolveImage(item.image, currentSizeKey),
+        alt: item.image.alt || '',
         tagline: item.tagline || '',
         heading: item.heading || '',
         description: item.description || '',
@@ -64,18 +68,9 @@ export default async function useHomepageData() {
     });
   });
 
-  watch(
-    () => categoryTree.value,
-    () => {
-      const firstCategoryId = categoryTree.value?.[0]?.id;
-      if (firstCategoryId) recommendedProductsCategoryId.value = firstCategoryId.toString();
-    },
-    { immediate: true },
-  );
-
   return {
     formattedHeroItems,
     mediaData,
-    recommendedProductsCategoryId,
+    recommendedProductsCategories,
   };
 }

apps/web/pages/index.vue

@@ -18,12 +18,14 @@
 
     <div class="max-w-screen-3xl mx-auto md:px-6 lg:px-10 mb-10">
       <NuxtLazyHydrate when-visible>
-        <section class="mb-10 overflow-hidden">
-          <p data-testid="recommended-products" class="mb-4 typography-text-lg text-center md:text-left">
-            {{ t('moreItemsOfThisCategory') }}
-          </p>
-          <ProductRecommendedProducts cache-key="homepage" :category-id="recommendedProductsCategoryId" />
-        </section>
+        <template v-for="(item, index) in recommendedProductsCategories" :key="index">
+          <section class="mb-10 overflow-hidden">
+            <p data-testid="recommended-products" class="mb-4 typography-text-lg text-center md:text-left">
+              {{ item.headline }}
+            </p>
+            <ProductRecommendedProducts cache-key="homepage" :category-id="item.categoryId" />
+          </section>
+        </template>
       </NuxtLazyHydrate>
       <NuxtLazyHydrate when-visible>
         <NewsletterSubscribe v-if="showNewsletter" />
@@ -34,9 +36,8 @@
 
 <script lang="ts" setup async>
 const isEditing = useEditor();
-const { formattedHeroItems, mediaData, recommendedProductsCategoryId } = await useHomepageData();
+const { formattedHeroItems, mediaData, recommendedProductsCategories } = await useHomepageData();
 definePageMeta({ pageType: 'static', middleware: ['newsletter-confirmation'] });
 
 const { showNewsletter } = useNewsletter();
-const { t } = useI18n();
 </script>

docs/changelog/changelog_en.md

@@ -10,6 +10,7 @@
 ### 👷 Changed
 
 - Newsletter email confirmation
+- The default data for the homepage is now available for both English and German.
 
 ### 🩹 Fixed
 
@@ -19,6 +20,10 @@
 - The hero button now links to the provided destination.
 - Fixed, Buy button could be clicked after the order was finished and the redirect to the confirmation was in progress.
 - Fixed GPSR drawer responsiveness.
+- To satisfy accessibility guidelines, the alt text for the logo now includes the store name.
+- The hero image now uses the alt text specified in the homepage template.
+- The recommended products section on the homepage now uses the category ID from the homepage template.
+- The recommended products section on the homepage is now displayed multiple times if specified.
 
 ## v1.7.0 (2024-11-06) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.6.0...v1.7.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>