feat: combine headlines for products slider

apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue

@@ -1,12 +1,18 @@
 <template>
-  <p
-    v-if="headline"
+  <div v-if="text?.pretitle" class="text-2xl">{{ text.pretitle }}</div>
+  <h2
+    v-if="text?.title"
+    class="typography-display-3 md:typography-display-2 lg:typography-display-2 font-bold lg:leading-[4rem]"
     data-testid="recommended-products-headline"
-    class="mb-4 typography-text-lg text-center md:text-left"
   >
-    {{ headline }}
-  </p>
-
+    {{ text.title }}
+  </h2>
+  <div v-if="text?.subtitle" class="text-2xl pb-1">{{ text.subtitle }}</div>
+  <div
+    class="typography-text-sm md:typography-text-lg font-normal"
+    v-if="text?.htmlDescription"
+    v-html="text.htmlDescription"
+  ></div>
   <ProductSlider v-if="recommendedProducts?.length" :items="recommendedProducts" />
 </template>
 

apps/web/components/ProductRecommendedProducts/types.ts

@@ -1,5 +1,10 @@
 export type ProductRecommendedProductsProps = {
   categoryId: string;
   cacheKey?: string;
-  headline?: string;
+  text?: {
+    pretitle?: string;
+    title?: string;
+    subtitle?: string;
+    htmlDescription?: string;
+  };
 };

apps/web/composables/useHomepage/homepageTemplateDataDe.json

@@ -86,7 +86,15 @@
     },
     {
       "name": "ProductRecommendedProducts",
-      "options": { "headline": "Entdecken Sie unsere Modekollektion", "categoryId": "49" }
+      "options": {
+        "text": {
+          "pretitle": "Mehr als nur Technik",
+          "title": "Entdecken Sie unsere Modekollektion",
+          "subtitle": "Sportive Mode und Accessories für alle.",
+          "htmlDescription": "<a class='underline' href='https://plentyshop.plentymarkets.com/wear' target='_self'>Zu unserer kompletten Kollektion.</a>"
+        },
+        "categoryId": "49"
+      }
     },
     {
       "name": "NewsletterSubscribe",

apps/web/composables/useHomepage/homepageTemplateDataEn.json

@@ -75,18 +75,26 @@
           "subtitle": "Innovative technology meets modern fashion",
           "pretitle": "Welcome to your new favorite shop",
           "textAlignment": "right"
-
         },
         "button": {
-          "label":"Get shopping",
-          "link":"",
+          "label": "Get shopping",
+          "link": "",
           "variant": "primary"
         }
       }
     },
     {
       "name": "ProductRecommendedProducts",
-      "options": { "headline": "Explore our fashion collection", "categoryId": "49" }
+      "options": {
+        "text": {
+          "pretitle": "More than just technology",
+          "title": "Explore our fashion collection",
+          "subtitle": "Sportive fashion and accessoires for everybody.",
+          "htmlDescription": "<a class='underline' href='https://plentyshop.plentymarkets.com/wear' target='_self'>To our full collection.</a>"
+        },
+
+        "categoryId": "49"
+      }
     },
     {
       "name": "NewsletterSubscribe",

docs/changelog/changelog_en.md

@@ -8,6 +8,7 @@
 - Added the logic to render components within a module in certain areas of the PWA
 - Added delivery days to checkout shipping providers.
 - Added robots for category page.
+- Subtitle, pretitle and title options where added to the Recommened Products component
 
 ### 🩹 Fixed