Product Catalog Hub
Relevant source files
The following files were used as context for generating this wiki page:
- sunrise-angular/src/app/pages/products/product-catalog/product-catalog.component.html
- sunrise-angular/src/app/pages/products/product-detail/product-detail.component.html
- sunrise-angular/src/app/pages/products/product-detail/product-detail.component.scss
- sunrise-angular/src/app/pages/products/products.routes.ts
- implementation_plan.md
- sunrise-angular/src/app/core/services/seo.service.ts
- sunrise-backend/products/templates/admin/products/product/upload_json.html
The Product Catalog Hub is a specialized B2B and B2C lead-generation system within the Sunrise Communication platform. It displays security and telecommunication hardware, including CCTV, EPABX, and Biometrics, without standard e-commerce pricing. Instead, the hub drives inquiries through a dynamic WhatsApp Call-to-Action (CTA) mechanism.
The system utilizes Angular v22 with Standalone Components and Signals for reactive state management. It provides a two-stage browsing experience: a high-level category landing view and a detailed filtered grid view. The hub is optimized for Search Engine Optimization (SEO) and Server-Side Rendering (SSR), using structured JSON-LD data to enhance visibility in search results.
Sources: implementation_plan.md:5-15, sunrise-angular/src/app/pages/products/product-catalog/product-catalog.component.html:6-90
Architecture and Data Flow
The Product Catalog Hub follows a reactive architecture powered by Angular Signals. The ProductService acts as the central data provider, fetching product information via HttpClient and exposing it through readonly signals.
Catalog Navigation Flow
The following diagram illustrates the user journey from the landing page to a specific product inquiry.
The application maintains two primary view modes: categories-landing for high-level discovery and a grid view for specific product selection.
Sources: sunrise-angular/src/app/pages/products/product-catalog/product-catalog.component.html:6-100, implementation_plan.md:73-85
Core Data Structures
The system uses a standardized TypeScript interface to represent product data. This interface ensures consistency between the frontend catalog and the backend administrative upload tools.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the product. |
slug | string | URL-safe name for the product detail route. |
name | string | Full display name of the product. |
brand | string | Manufacturer name (e.g., CP Plus, Matrix). |
category | string | Primary grouping (CCTV, EPABX, etc.). |
specs | ProductSpec[] | Array of key-value technical specifications. |
services_offered | ServiceType[] | List including Sales, Installation, AMC, or Repair. |
Sources: implementation_plan.md:112-140, sunrise-backend/products/templates/admin/products/product/upload_json.html:43-58
Navigation and Routing
Routing is implemented using lazy-loaded Standalone Components to ensure optimal bundle sizes. The system supports dynamic SEO titles and breadcrumbs.
Catalog Route (/products):* Loads ProductCatalogComponent.
- Detail Route (
/products/:category/:slug): LoadsProductDetailComponent.
Sources: sunrise-angular/src/app/pages/products/products.routes.ts:1-17, implementation_plan.md:197-215
Product Detail and Inquiry System
The Detail Page focuses on technical specifications and lead generation. If a product lacks a physical image, the system generates a CSS gradient placeholder based on the category slug (e.g., cat-cctv, cat-epabx, cat-biometrics).
Lead Generation Logic
The whatsappUrl is a computed signal that generates a pre-filled message. It includes the product name and the current page URL to provide context to the sales team.
// Example WhatsApp URL Generation logic
whatsappUrl = computed(() => {
const product = this.product();
if (!product) return '';
const message = `Hi Sunrise Communication, I'm interested in the ${product.name}. Link: ${currentUrl}`;
return `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
});
Sources: sunrise-angular/src/app/pages/products/product-detail/product-detail.component.html:47-98, implementation_plan.md:323-335
SEO and Discovery Optimization
The SeoService injects specific metadata and structured data for each product. This includes:
- Open Graph Tags: Sets
og:typetoproductand assigns the product image. - JSON-LD Graph: Injects a
@type: Productschema node containing brand, category, and availability status. - BreadcrumbList: Provides search engines with the hierarchical path:
Home > Products > Category > Product.
Sources: sunrise-angular/src/app/core/services/seo.service.ts:149-200, implementation_plan.md:240-270
Conclusion
The Product Catalog Hub serves as a technical showcase designed to convert traffic into WhatsApp inquiries. By using Angular Signals for filtering and standardizing data through JSON-LD, the hub provides a high-performance, SEO-friendly experience for users seeking security and telecommunication hardware solutions.