Product Display Components
Relevant source files
The following files were used as context for generating this wiki page:
- marketplace-frontend/src/app/components/product-card/product-card.component.html
- marketplace-frontend/src/app/components/product-card/product-card.module.ts
- marketplace-frontend/src/app/modules/market-home/market-home.module.ts
- marketplace-frontend/src/app/styles/shared-styles.less
- marketplace-frontend/src/app/models/product/product.model.ts
- marketplace-frontend/src/app/app.module.ts
The Product Display Components manage the visual representation of merchandise within the eCommerce storefront. This system primarily centers on the ProductCardComponent, which renders individual item details, media, and consumer actions.
These components integrate with the MarketHomeModule to populate the primary shopping interface. They utilize Angular Material icons for interactive elements and Less-based styling for layout consistency.
Product Card Architecture
The ProductCardComponent serves as the fundamental unit for item presentation. It encapsulates product imagery, descriptions, and purchasing controls within a structured container.
Visual Structure and Layout
The component uses a flexbox-based layout to organize content. It divides information into two primary sections:
- Media Container: A centered 200x200 pixel area that displays the product image using data-bound attributes.
- Content Details: A vertical column containing metadata, pricing, and action buttons.
Sources: marketplace-frontend/src/app/components/product-card/product-card.component.html:1-33
Dependency Management
The ProductCardModule declares and exports the component, allowing it to be consumed by feature modules like MarketHomeModule.
| Module | Purpose |
|---|---|
CommonModule | Provides standard Angular directives (e.g., ngIf, ngFor). |
MatIconModule | Enables the use of Material Design icons for actions. |
ProductCardModule | Packages the component for application-wide use. |
Sources: marketplace-frontend/src/app/components/product-card/product-card.module.ts:1-21, marketplace-frontend/src/app/modules/market-home/market-home.module.ts:1-15
Data Flow and Integration
The display components rely on a structured data model to populate template fields.
The diagram shows how product data flows from the model into the component template to enable user interactions.
Data Binding Attributes
The template binds to a product object to render dynamic content.
| Attribute | Data Source | Description |
|---|---|---|
[src] | product.imageSrc | Path to the product image asset. |
[alt] | product.imageAlt | Alternative text for accessibility. |
{{product.name}} | product.name | The display name of the item. |
{{product.brand}} | product.brand | The manufacturing brand. |
{{product.description}} | product.description | Detailed text describing the product. |
Sources: marketplace-frontend/src/app/components/product-card/product-card.component.html:2-15, marketplace-frontend/src/app/models/index.ts:4
Styling and Themes
Product components utilize a centralized styling architecture based on Less. Global styles are defined in src/styles.less and imported through a shared hierarchy.
Component Styling
The shared-styles.less file manages the inclusion of component-specific stylesheets, including the product card. This ensures that visual updates to the card propagate across all modules that import the shared style manifest.
/* SHARED-COMPONENTS */
@import "shared-components/market-header";
@import "shared-components/market-footer";
@import "shared-components/product-card";
Sources: marketplace-frontend/src/app/styles/shared-styles.less:10-13, marketplace-frontend/src/styles.less:5
Interactive Elements
The product display includes buttons for user engagement, styled with specific background colors and iconography.
- Favorite Button: A circular button (50x50px) featuring a
favorite_bordericon. - Cart Button: An elongated pill-shaped button (128x50px) with "Add to cart" text and an
add_shopping_carticon.
Sources: marketplace-frontend/src/app/components/product-card/product-card.component.html:21-31
Implementation Example
The following snippet demonstrates the structural implementation of the product card template.
<div class="" style="display: flex; width: 200px; height: 200px; justify-content: center; align-items: center;">
<img [src]="product.imageSrc"
[alt]="product.imageAlt">
</div>
<b style="font-size: 24px; line-height: 32px;">{{product.name + ' ' + product.brand}}</b>
Sources: marketplace-frontend/src/app/components/product-card/product-card.component.html:1-12
Summary
The Product Display Components provide a modular and reusable way to present items in the marketplace. By encapsulating the logic in the ProductCardComponent and its associated module, the application ensures consistent rendering of product data and user actions across the frontend.