Skip to main content

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.

​
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.

Features

  • Supplement-specific data fields
  • Structured information display
  • GraphQL schema extensions
  • Brand-styled components

Use Cases

  • 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:
SupplementInfo.tsx
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 (
    <div className="bg-[#F8FAF9] border border-[#E8F5E9] rounded-lg p-6 mt-6">
      <h3 className="text-xl font-bold text-[#2D5A3D] mb-4">
        Información del Suplemento
      </h3>
      
      {supplementData && (
        <div className="space-y-4">
          {supplementData.ingredients && (
            <div>
              <h4 className="font-semibold text-[#2D5A3D] mb-2">Ingredientes</h4>
              <p className="text-[#4A5568] text-sm">{supplementData.ingredients}</p>
            </div>
          )}
          
          {supplementData.benefits && (
            <div>
              <h4 className="font-semibold text-[#2D5A3D] mb-2">Beneficios</h4>
              <ul className="list-disc list-inside text-[#4A5568] text-sm space-y-1">
                {supplementData.benefits.map((benefit: string, index: number) => (
                  <li key={index}>{benefit}</li>
                ))}
              </ul>
            </div>
          )}
          
          {supplementData.presentation && (
            <div>
              <h4 className="font-semibold text-[#2D5A3D] mb-2">Presentación</h4>
              <p className="text-[#4A5568] text-sm">{supplementData.presentation}</p>
            </div>
          )}
          
          {supplementData.dosage && (
            <div>
              <h4 className="font-semibold text-[#2D5A3D] mb-2">Dosis Recomendada</h4>
              <p className="text-[#4A5568] text-sm">{supplementData.dosage}</p>
            </div>
          )}
          
          {supplementData.warnings && (
            <div>
              <h4 className="font-semibold text-[#2D5A3D] mb-2">Advertencias</h4>
              <p className="text-[#4A5568] text-sm">{supplementData.warnings}</p>
            </div>
          )}
          
          {supplementData.storage && (
            <div>
              <h4 className="font-semibold text-[#2D5A3D] mb-2">Almacenamiento</h4>
              <p className="text-[#4A5568] text-sm">{supplementData.storage}</p>
            </div>
          )}
        </div>
      )}
      
      {product?.description && (
        <div className="mt-4 pt-4 border-t border-[#E8F5E9]">
          <h4 className="font-semibold text-[#2D5A3D] mb-2">Descripción</h4>
          <div 
            className="text-[#4A5568] text-sm prose prose-sm max-w-none"
            dangerouslySetInnerHTML={{ __html: product.description }}
          />
        </div>
      )}
    </div>
  );
}

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: 
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:
ProductExtension.graphql
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:
ProductExtension.resolvers.js
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”
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: 
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: 
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:
ElementColorUsage
Container Background#F8FAF9Main card background
Border#E8F5E9Card and divider borders
Headings#2D5A3DSection titles
Body Text#4A5568Content text
White Background#FFFFFFDescription 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: 
{
  "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

Product Reviews

Add customer reviews to products

GraphQL API

Learn about extending GraphQL schemas

Build docs developers (and LLMs) love

Get started for freeTalk to us