fix: homepage recommended products

apps/web/components/ProductRecommendedProducts/ProductRecommendedProducts.vue

@@ -1,5 +1,13 @@
 <template>
-  <RecommendedProducts :products="recommendedProducts"></RecommendedProducts>
+  <p
+    v-if="headline"
+    data-testid="recommended-products-headline"
+    class="mb-4 typography-text-lg text-center md:text-left"
+  >
+    {{ headline }}
+  </p>
+
+  <ProductSlider v-if="recommendedProducts?.length" :items="recommendedProducts" />
 </template>
 
 <script setup lang="ts">

apps/web/components/ProductRecommendedProducts/types.ts

@@ -1,4 +1,5 @@
 export type ProductRecommendedProductsProps = {
   categoryId: string;
   cacheKey?: string;
+  headline?: string;
 };

apps/web/composables/useHomepage/types.ts

@@ -29,7 +29,7 @@ interface UiMediaCardOptions {
   alignment?: string;
 }
 
-interface ProductRecommendedProductsOptions {
+export interface ProductRecommendedProductsOptions {
   categoryId: string;
   headline?: string;
 }

apps/web/composables/useHomepage/useHomepage.ts

@@ -14,16 +14,28 @@ export const useHomepage: UseHomepageDataReturn = () => {
   }));
 
   const { $i18n } = useNuxtApp();
+  const currentLocale = ref($i18n.locale.value);
+
   const runtimeConfig = useRuntimeConfig();
+  const homepageCategoryId = runtimeConfig.public.homepageCategoryId;
+
   const { fetchCategoryTemplate } = useCategoryTemplate();
   const { fetchHomepageTemplate } = useFetchHome();
 
-  const currentLocale = ref($i18n.locale.value);
-  const fetchPageTemplate = async (): Promise<void> => {
-    state.value.loading = true;
-    const homepageCategoryId = runtimeConfig.public.homepageCategoryId;
+  const fetchRecommendedProducts = async () => {
+    state.value.data.blocks.forEach((block) => {
+      if (block.name === 'ProductRecommendedProducts') {
+        const options = block.options as ProductRecommendedProductsOptions;
+        const id = options.categoryId;
+        const { fetchProductRecommended } = useProductRecommended(id);
+        fetchProductRecommended(id);
+      }
+    });
+  };
+
+  const initializeHomepageTemplate = async () => {
     if (typeof homepageCategoryId === 'number') {
-      await fetchCategoryTemplate(runtimeConfig.public.homepageCategoryId);
+      await fetchCategoryTemplate(homepageCategoryId);
       state.value.data = fetchHomepageTemplate();
       if (
         (!state.value.data.blocks || state.value.data.blocks.length === 0) &&
@@ -34,7 +46,16 @@ export const useHomepage: UseHomepageDataReturn = () => {
     } else {
       state.value.data = useLocaleSpecificHomepageTemplate(currentLocale.value);
     }
+
+    await fetchRecommendedProducts();
+  };
+
+  const fetchPageTemplate = async (): Promise<void> => {
+    state.value.loading = true;
+
+    await initializeHomepageTemplate();
     state.value.dataIsEmpty = !state.value.data.blocks || state.value.data.blocks.length === 0;
+
     state.value.loading = false;
   };
 

apps/web/composables/useProductRecommended/useProductRecommended.ts

@@ -35,7 +35,9 @@ export const useProductRecommended: UseProductRecommendedReturn = (categoryId: s
       sort: 'sorting.price.avg_asc',
     };
 
-    const { data, error } = await useAsyncData(() => useSdk().plentysystems.getFacet(payload));
+    const { data, error } = await useAsyncData(`useProductRecommended-${categoryId}`, () =>
+      useSdk().plentysystems.getFacet(payload),
+    );
     useHandleError(error.value);
     state.value.data = data?.value?.data?.products ?? state.value.data;
     state.value.loading = false;

docs/changelog/changelog_en.md

@@ -17,6 +17,7 @@
 - Fix for max visible pages on mobile pagination.
 - Fix for editor language picker when it showed inverted data template.
 - When the media card only displays text, the text block is now left aligned instead of centered.
+- The homepage now displays recommended products on initial load.
 
 ## v1.8.0 (2024-12-13) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.7.0...v1.8.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>