seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

feat(navigation): enhance article category handling and product navigation

Browse Source 
- Introduce state management for article categories in App component to track active categories.
- Implement logic to clear article category state when navigating away from article pages.
- Update Product component to navigate to article pages with associated category information in the state.
- Modify Header and CategoryList components to accommodate new category handling logic.
- Ensure ProductCarousel and ProductDetailPage components receive and utilize category IDs for improved product organization.
This commit is contained in:
sebseb7
2025-11-16 07:34:39 +01:00
parent 8ea2e50432
commit 0c92591d32
7 changed files with 206 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/header/CategoryList.js
View File

@@ -23,6 +23,7 @@ class CategoryList extends Component {
mobileMenuOpen: false,
activeCategoryId: null // Will be set properly after categories are loaded
};
this.productCategoryCheckInterval = null;
}
componentDidMount() {
@@ -42,7 +43,7 @@ class CategoryList extends Component {
if (response.children && response.children.length > 0) {
console.log("Setting categories with", response.children.length, "items");
console.log("First category name:", response.children[0]?.name);
this.setState({
this.setState({
categories: response.children,
activeCategoryId: this.setLevel1CategoryId(this.props.activeCategoryId)
});
@@ -68,61 +69,71 @@ class CategoryList extends Component {
});
});
}
if (prevProps.activeCategoryId !== this.props.activeCategoryId) {
//detect path here
console.log("activeCategoryId updated", this.props.activeCategoryId);
this.setLevel1CategoryId(this.props.activeCategoryId);
}
if (prevProps.activeCategoryId !== this.props.activeCategoryId) {
this.setLevel1CategoryId(this.props.activeCategoryId);
}
}
setLevel1CategoryId = (seoName) => {
console.log("setLevel1CategoryId called with seoName:", seoName);
if(seoName) {
setLevel1CategoryId = (input) => {
if(input) {
const language = this.props.languageContext?.currentLanguage || this.props.i18n.language;
console.log("setLevel1CategoryId - using language:", language);
console.log("setLevel1CategoryId - languageContext:", this.props.languageContext);
console.log("setLevel1CategoryId - i18n.language:", this.props.i18n?.language);
const categoryTreeCache = window.categoryService.getSync(209, language);
console.log("setLevel1CategoryId - categoryTreeCache (language: " + language + "):", categoryTreeCache, seoName);
// Helper function to recursively search for seoName in category tree
const findLevel1CategoryId = (categories, targetSeoName, level1Id = null) => {
for (const category of categories) {
// If we're at level 1 (direct children of root), set this as potential level1Id
const currentLevel1Id = level1Id || category.id;
// Check if current category matches the seoName
if (category.seoName === targetSeoName) {
return currentLevel1Id;
}
// If category has children, search recursively
if (category.children && category.children.length > 0) {
const result = findLevel1CategoryId(category.children, targetSeoName, currentLevel1Id);
if (result) {
return result;
}
}
}
};
// Search in the children of the root category (209)
if (categoryTreeCache && categoryTreeCache.children) {
const level1CategoryId = findLevel1CategoryId(categoryTreeCache.children, seoName);
console.log("Found level1CategoryId:", level1CategoryId, "for seoName:", seoName);
let level1CategoryId = null;
// Check if input is already a numeric level 1 category ID
const inputAsNumber = parseInt(input);
if (!isNaN(inputAsNumber)) {
// Check if this is already a level 1 category ID
const level1Category = categoryTreeCache.children.find(cat => cat.id === inputAsNumber);
if (level1Category) {
console.log("Input is already a level 1 category ID:", inputAsNumber);
level1CategoryId = inputAsNumber;
} else {
// It's a category ID, find its level 1 parent
const findLevel1FromId = (categories, targetId) => {
for (const category of categories) {
if (category.id === targetId) {
return category.parentId === 209 ? category.id : findLevel1FromId(categoryTreeCache.children, category.parentId);
}
if (category.children && category.children.length > 0) {
const result = findLevel1FromId(category.children, targetId);
if (result) return result;
}
}
return null;
};
level1CategoryId = findLevel1FromId(categoryTreeCache.children, inputAsNumber);
}
} else {
// It's an SEO name, find the level 1 category
const findLevel1FromSeoName = (categories, targetSeoName, level1Id = null) => {
for (const category of categories) {
const currentLevel1Id = level1Id || category.id;
if (category.seoName === targetSeoName) {
return currentLevel1Id;
}
if (category.children && category.children.length > 0) {
const result = findLevel1FromSeoName(category.children, targetSeoName, currentLevel1Id);
if (result) return result;
}
}
return null;
};
level1CategoryId = findLevel1FromSeoName(categoryTreeCache.children, input);
}
this.setState({
activeCategoryId: level1CategoryId
});
return;
}
this.setState({ activeCategoryId: null });
}else{
this.setState({ activeCategoryId: null });
}
this.setState({ activeCategoryId: null });
}
@@ -140,18 +151,16 @@ class CategoryList extends Component {
});
};
componentWillUnmount() {
if (this.productCategoryCheckInterval) {
clearInterval(this.productCategoryCheckInterval);
this.productCategoryCheckInterval = null;
}
}
render() {
const { categories, mobileMenuOpen, activeCategoryId } = this.state;
console.log("RENDER DEBUG - About to render categories:");
console.log(" categories.length:", categories.length);
if (categories.length > 0) {
console.log(" First category name:", categories[0].name);
console.log(" First category id:", categories[0].id);
}
console.log(" Current language context:", this.props.languageContext?.currentLanguage);
console.log(" Current i18n language:", this.props.i18n?.language);
const renderCategoryRow = (categories, isMobile = false) => (
<Box
sx={{