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.

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:

Ingredientes (Ingredients)

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

Beneficios (Benefits)

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”

Presentación (Presentation)

Describes the product format:

• “60 cápsulas vegetales”
• “500g de polvo”
• “30 sobres individuales”
• “120 tabletas”

Dosis Recomendada (Recommended Dosage)

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”

Advertencias (Warnings)

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”

Almacenamiento (Storage)

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”

Descripción (Description)

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:

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:

{
  "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