feat: implement variant selection in cart and product components for enhanced user experience

src/app/shared/components/cart-item/cart-item.component.html

@@ -1,11 +1,10 @@
-<article
-  class="w-100 p-3 rounded-0 cart-item"
-  [class.cart-item-with-media]="imageUrl()"
->
+<article class="w-100 p-3 rounded-0 cart-item" [class.cart-item-with-media]="imageUrl()">
   @if (imageUrl()) {
     <div class="position-relative overflow-hidden cart-item-media">
       @if (discountPercentage() && discountPercentage()! > 0) {
-        <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge">-{{ discountPercentage() }}%</span>
+        <span class="position-absolute top-0 start-0 z-1 rounded-0 cart-item-discount-badge"
+          >-{{ discountPercentage() }}%</span
+        >
       }
 
       <img class="w-100 h-100 object-fit-cover d-block" [src]="imageUrl()" [alt]="product()" />
@@ -18,21 +17,33 @@
 
       <div class="text-nowrap cart-item-prices">
         @if (formattedOriginalPrice(); as originalPrice) {
-          <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">{{ originalPrice }}</span>
+          <span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">{{
+            originalPrice
+          }}</span>
         }
 
         <span class="fw-bold cart-item-discounted-price">{{ formattedDiscountedPrice() }}</span>
       </div>
     </div>
 
-    <div class="d-grid cart-item-attributes">
-      @for (attribute of attributes(); track attribute.label + attribute.value) {
-        <div class="cart-item-attribute">
-          <span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
-          <span class="fw-bold">{{ attribute.value }}</span>
-        </div>
-      }
-    </div>
+    @if (hasVariantSelectors() && !quantityDisabled()) {
+      <app-variant-selector
+        class="cart-item-variant-selector"
+        [variants]="variants()"
+        [selectedVariant]="selectedVariant()"
+        [compact]="true"
+        (selectedVariantChange)="onVariantChange($event)"
+      />
+    } @else {
+      <div class="d-grid cart-item-attributes">
+        @for (attribute of attributes(); track attribute.label + attribute.value) {
+          <div class="cart-item-attribute">
+            <span class="fw-normal cart-item-attribute-label">{{ attribute.label }}: </span>
+            <span class="fw-bold">{{ attribute.value }}</span>
+          </div>
+        }
+      </div>
+    }
 
     @if (!readonly()) {
       <div class="d-flex justify-content-end align-items-center mt-auto cart-item-actions">
@@ -45,15 +56,9 @@
           (decrease)="onDecrease()"
         />
         @if (!quantityDisabled() && showRemove()) {
-          <app-icon-button
-            variant="trash"
-            class="cart-item-remove-btn"
-            (click)="onRemove()"
-          />
+          <app-icon-button variant="trash" class="cart-item-remove-btn" (click)="onRemove()" />
         }
       </div>
     }
   </div>
 </article>
-
-

src/app/shared/components/cart-item/cart-item.component.scss

@@ -11,7 +11,7 @@
 
 :host(:first-child) .cart-item::before,
 :host .cart-item::after {
-  content: "";
+  content: '';
   position: absolute;
   right: var(--item-divider-inset);
   left: var(--item-divider-inset);
@@ -119,6 +119,11 @@
   gap: 0.125rem;
 }
 
+.cart-item-variant-selector {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .cart-item-remove-btn {
   margin-left: 0.35rem;
 }

src/app/shared/components/cart-item/cart-item.component.ts

@@ -1,6 +1,10 @@
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
 import { IconButtonComponent } from '../icon-button/icon-button.component';
+import {
+  VariantSelectorComponent,
+  VariantSelectorVariant,
+} from '../variant-selector/variant-selector.component';
 
 export interface CartItemAttribute {
   label: string;
@@ -10,10 +14,10 @@ export interface CartItemAttribute {
 @Component({
   selector: 'app-cart-item',
   standalone: true,
-  imports: [QuantitySelectorComponent, IconButtonComponent],
+  imports: [QuantitySelectorComponent, IconButtonComponent, VariantSelectorComponent],
   templateUrl: './cart-item.component.html',
   styleUrl: './cart-item.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CartItemComponent {
   readonly imageUrl = input<string | null>(null);
@@ -22,6 +26,8 @@ export class CartItemComponent {
   readonly discountedPrice = input<number>(0);
   readonly discountPercentage = input<number | null>(null);
   readonly attributes = input<CartItemAttribute[]>([]);
+  readonly variants = input<VariantSelectorVariant[]>([]);
+  readonly selectedVariant = input<unknown>(null);
   readonly quantity = input<number>(1);
   readonly readonly = input<boolean>(false);
   readonly quantityDisabled = input<boolean>(false);
@@ -31,6 +37,11 @@ export class CartItemComponent {
   readonly remove = output<void>();
   readonly increase = output<void>();
   readonly decrease = output<void>();
+  readonly variantChange = output<number>();
+
+  protected readonly hasVariantSelectors = computed(() =>
+    this.variants().some((variant) => Object.keys(variant.values).length > 0),
+  );
 
   protected onQuantityChange(newQuantity: number): void {
     if (this.quantityDisabled()) return;
@@ -49,12 +60,20 @@ export class CartItemComponent {
     this.decrease.emit();
   }
 
+  protected onVariantChange(variant: unknown): void {
+    if (!this.quantityDisabled() && typeof variant === 'number') {
+      this.variantChange.emit(variant);
+    }
+  }
+
   protected readonly formattedOriginalPrice = computed(() => {
     const price = this.originalPrice();
     return price === null ? null : this.formatCurrency(price);
   });
 
-  protected readonly formattedDiscountedPrice = computed(() => this.formatCurrency(this.discountedPrice()));
+  protected readonly formattedDiscountedPrice = computed(() =>
+    this.formatCurrency(this.discountedPrice()),
+  );
 
   private formatCurrency(value: number): string {
     const rounded = Math.round(value);