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