> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Antony-Figueroa/my-evershop-app/llms.txt
> Use this file to discover all available pages before exploring further.
# Product Catalog Extension
> Enhanced product information display for supplement products
## Overview
The Product Catalog extension enhances the standard product display with specialized information for supplement products. It provides a structured way to display ingredients, benefits, dosage, warnings, and storage information.
* Supplement-specific data fields
* Structured information display
* GraphQL schema extensions
* Brand-styled components
* Health supplements
* Vitamins and minerals
* Sports nutrition
* Dietary supplements
## Supplement Information Component
The main component displays comprehensive product information in a structured format at `extensions/productCatalog/src/pages/frontStore/productView/SupplementInfo.tsx`:
```tsx SupplementInfo.tsx theme={null}
import React from 'react';
type SupplementInfoProps = {
product: {
productId: string;
name: string;
description?: string;
[key: string]: any;
};
};
export default function SupplementInfo({ product }: SupplementInfoProps) {
const supplementData = product?.extension?.supplement;
if (!supplementData && !product?.description) {
return null;
}
return (
);
}
export const layout = {
areaId: 'productPageMiddleRight',
sortOrder: 10
};
export const query = `
query Query {
product(id: getContextValue("productId")) {
productId
name
description
extension {
supplement {
ingredients
benefits
presentation
dosage
warnings
storage
}
}
}
}
`;
```
## Data Structure
The supplement information is stored in the product's extension data:
```typescript theme={null}
interface SupplementData {
ingredients: string; // List of active ingredients
benefits: string[]; // Array of health benefits
presentation: string; // Product format (capsules, powder, etc.)
dosage: string; // Recommended dosage instructions
warnings: string; // Safety warnings and contraindications
storage: string; // Storage instructions
}
```
## GraphQL Schema Extension
The extension adds a `ProductExtension` type to the GraphQL schema at `extensions/productCatalog/src/graphql/types/ProductExtension/ProductExtension.graphql`:
```graphql ProductExtension.graphql theme={null}
type Supplement {
ingredients: String
benefits: [String]
presentation: String
dosage: String
warnings: String
storage: String
}
type ProductExtension {
supplement: Supplement
}
extend type Product {
extension: ProductExtension
}
```
The resolver is implemented in `ProductExtension.resolvers.js`:
```javascript ProductExtension.resolvers.js theme={null}
module.exports = {
Product: {
extension: (product) => {
return product.extension || {};
}
},
ProductExtension: {
supplement: (extension) => {
return extension.supplement || null;
}
}
};
```
## Information Sections
The component displays up to 7 sections of supplement information:
Lists the active and inactive ingredients in the supplement. This helps customers:
* Identify allergens
* Verify ingredient quality
* Check for specific compounds
* Compare with other products
Displays health benefits as a bulleted list. Common benefits include:
* "Mejora la energía y resistencia"
* "Apoya la salud muscular"
* "Fortalece el sistema inmunológico"
* "Promueve la recuperación post-entrenamiento"
Describes the product format:
* "60 cápsulas vegetales"
* "500g de polvo"
* "30 sobres individuales"
* "120 tabletas"
Provides clear dosage instructions:
* "Tomar 2 cápsulas al día con alimentos"
* "Mezclar 1 cucharada con 250ml de agua"
* "Consumir 1 sobre antes del ejercicio"
Important safety information:
* "No exceder la dosis recomendada"
* "Consultar con un médico si está embarazada"
* "Mantener fuera del alcance de los niños"
* "No sustituye una dieta equilibrada"
Storage instructions to maintain product quality:
* "Conservar en lugar fresco y seco"
* "Mantener alejado de la luz solar directa"
* "Cerrar bien después de cada uso"
Additional product description with HTML support for rich formatting.
## Component Features
### Conditional Rendering
The component intelligently handles missing data:
* Returns `null` if no supplement data or description exists
* Shows only sections with available data
* Gracefully degrades when optional fields are missing
### GraphQL Data Fetching
Uses the `query` export to fetch product data:
```graphql theme={null}
query Query {
product(id: getContextValue("productId")) {
productId
name
description
extension {
supplement {
ingredients
benefits
presentation
dosage
warnings
storage
}
}
}
}
```
### Layout Configuration
Registered in the product page with:
```typescript theme={null}
export const layout = {
areaId: 'productPageMiddleRight',
sortOrder: 10
};
```
This places the component in the middle-right area of product pages, with priority 10.
## Styling
The component uses Ana's Suplements brand colors:
| Element | Color | Usage |
| -------------------- | --------- | ------------------------ |
| Container Background | `#F8FAF9` | Main card background |
| Border | `#E8F5E9` | Card and divider borders |
| Headings | `#2D5A3D` | Section titles |
| Body Text | `#4A5568` | Content text |
| White Background | `#FFFFFF` | Description area |
## Extension Structure
```
extensions/productCatalog/
├── src/
│ ├── graphql/
│ │ └── types/
│ │ └── ProductExtension/
│ │ ├── ProductExtension.graphql
│ │ └── ProductExtension.resolvers.js
│ └── pages/
│ └── frontStore/
│ └── productView/
│ └── SupplementInfo.tsx
├── package.json
└── tsconfig.json
```
## Configuration
Enabled in `config/default.json`:
```json theme={null}
{
"system": {
"extensions": [
{
"name": "productCatalog",
"resolve": "extensions/productCatalog",
"enabled": true
}
]
}
}
```
## Best Practices
**Complete Information**: Always provide complete supplement information to help customers make informed decisions and comply with regulations.
**Regulatory Compliance**: Ensure all claims and warnings comply with local health supplement regulations.
**Localization**: All labels are in Spanish. Update the component for other languages if needed.
## Next Steps
Add customer reviews to products
Learn about extending GraphQL schemas