From 2c0b7aa84d0771294920e8d7c96bf59435ee31a2 Mon Sep 17 00:00:00 2001 From: sebseb7 Date: Mon, 13 Apr 2026 19:47:04 +0200 Subject: [PATCH] clickable Herstellerkarousel part 1 --- src/App.js | 5 ++++ src/components/Content.js | 35 ++++++++++++++++---------- src/components/ManufacturerCarousel.js | 16 +++++++++--- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index 214816d..5175f66 100644 --- a/src/App.js +++ b/src/App.js @@ -267,6 +267,11 @@ const AppContent = ({ currentTheme, dynamicTheme, onThemeChange }) => { path="/Kategorie/:categoryId" element={} /> + {/* Manufacturer page - Render Content in parallel */} + } + /> {/* Single product page */} { return (props) => { const params = useParams(); const [searchParams] = useSearchParams(); - return ; + const location = useLocation(); + const isHersteller = location.pathname.startsWith('/Hersteller/'); + return ; }; }; -function getCachedCategoryData(categoryId, language = 'de') { +function getCachedCategoryData(categoryId, language = 'de', isHersteller = false) { if (!window.productCache) { window.productCache = {}; } try { - const cacheKey = `categoryProducts_${categoryId}_${language}`; + const cacheKey = `${isHersteller ? 'manufacturer' : 'category'}Products_${categoryId}_${language}`; const cachedData = window.productCache[cacheKey]; if (cachedData) { @@ -166,7 +168,7 @@ function getFilteredProducts(unfilteredProducts, attributes, t) { return { filteredProducts, activeAttributeFilters: activeAttributeFiltersWithNames, activeManufacturerFilters: activeManufacturerFiltersWithNames, activeAvailabilityFilters }; } -function setCachedCategoryData(categoryId, data, language = 'de') { +function setCachedCategoryData(categoryId, data, language = 'de', isHersteller = false) { if (!window.productCache) { window.productCache = {}; } @@ -175,7 +177,7 @@ function setCachedCategoryData(categoryId, data, language = 'de') { } try { - const cacheKey = `categoryProducts_${categoryId}_${language}`; + const cacheKey = `${isHersteller ? 'manufacturer' : 'category'}Products_${categoryId}_${language}`; if (data.products) for (const product of data.products) { const productCacheKey = `product_${product.id}_${language}`; window.productDetailCache[productCacheKey] = product; @@ -221,9 +223,10 @@ class Content extends Component { componentDidUpdate(prevProps) { const currentLanguage = this.props.i18n?.language || 'de'; const categoryChanged = this.props.params.categoryId && (prevProps.params.categoryId !== this.props.params.categoryId); + const routeTypeChanged = !!prevProps.isHersteller !== !!this.props.isHersteller; const searchChanged = this.props.searchParams?.get('q') && (prevProps.searchParams?.get('q') !== this.props.searchParams?.get('q')); - if (categoryChanged) { + if (categoryChanged || routeTypeChanged) { // Clear context for new category loading if (this.props.categoryContext && this.props.categoryContext.setCurrentCategory) { this.props.categoryContext.setCurrentCategory(null); @@ -233,7 +236,7 @@ class Content extends Component { this.setState({ loaded: false, unfilteredProducts: [], filteredProducts: [], attributes: [], categoryName: null, childCategories: [], lastFetchedLanguage: currentLanguage }, () => { this.fetchCategoryData(this.props.params.categoryId); }); - return; // Don't check language change if category changed + return; // Don't check language change if category or route type changed } else if (searchChanged) { this.setState({ loaded: false, unfilteredProducts: [], filteredProducts: [], attributes: [], categoryName: null, childCategories: [], lastFetchedLanguage: currentLanguage }, () => { @@ -345,7 +348,8 @@ class Content extends Component { sessionStorage.setItem('filter_availability', '1'); } const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de'; - const cachedData = getCachedCategoryData(categoryId, currentLanguage); + const isHersteller = !!this.props.isHersteller; + const cachedData = getCachedCategoryData(categoryId, currentLanguage, isHersteller); if (cachedData) { this.processDataWithCategoryTree(cachedData, categoryId); return; @@ -360,7 +364,7 @@ class Content extends Component { window.socketManager.on(`productList:${categoryId}`, (response) => { console.log("getCategoryProducts full response", response); receivedFullResponse = true; - setCachedCategoryData(categoryId, response, currentLanguage); + setCachedCategoryData(categoryId, response, currentLanguage, isHersteller); if (response && response.products !== undefined) { this.processDataWithCategoryTree(response, categoryId); } else { @@ -370,12 +374,17 @@ class Content extends Component { window.socketManager.emit( "getCategoryProducts", - { categoryId: categoryId, language: currentLanguage, requestTranslation: currentLanguage === 'de' ? false : true }, + { + categoryId: categoryId, + language: currentLanguage, + requestTranslation: currentLanguage === 'de' ? false : true, + isHersteller, + }, (response) => { console.log("getCategoryProducts stub response", response); // Only process stub response if we haven't received the full response yet if (!receivedFullResponse) { - setCachedCategoryData(categoryId, response, currentLanguage); + setCachedCategoryData(categoryId, response, currentLanguage, isHersteller); if (response && response.products !== undefined) { this.processDataWithCategoryTree(response, categoryId); } else { @@ -454,7 +463,7 @@ class Content extends Component { const n = typeof v === 'number' ? v : parseInt(String(v), 10); return Number.isFinite(n) && n > 0; }; - if (categoryId !== 'neu' && categoryId !== 'bald' && !isValidJtlCategoryId(enhancedResponse.dataParam)) { + if (!this.props.isHersteller && categoryId !== 'neu' && categoryId !== 'bald' && !isValidJtlCategoryId(enhancedResponse.dataParam)) { try { const currentLanguage = this.props.languageContext?.currentLanguage || this.props.i18n?.language || 'de'; const categoryTreeCache = window.categoryService.getSync(209, currentLanguage); diff --git a/src/components/ManufacturerCarousel.js b/src/components/ManufacturerCarousel.js index 46e83ae..b6693dc 100644 --- a/src/components/ManufacturerCarousel.js +++ b/src/components/ManufacturerCarousel.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import { withTranslation } from 'react-i18next'; @@ -46,7 +47,12 @@ class ManufacturerCarousel extends React.Component { .filter(m => m.imageBuffer) .map(m => { const blob = new Blob([m.imageBuffer], { type: 'image/avif' }); - return { id: m.id, name: m.name || '', src: URL.createObjectURL(blob) }; + return { + id: m.id, + name: m.name || '', + slug: m.slug || '', + src: URL.createObjectURL(blob), + }; }) .sort(() => Math.random() - 0.5); @@ -151,8 +157,9 @@ class ManufacturerCarousel extends React.Component { }} > {items.map((item, index) => ( -
-
+ ))}