diff --git a/src/app/shared/components/product-row-card/product-row-card.component.html b/src/app/shared/components/product-row-card/product-row-card.component.html index b1672c4..4604ae6 100644 --- a/src/app/shared/components/product-row-card/product-row-card.component.html +++ b/src/app/shared/components/product-row-card/product-row-card.component.html @@ -30,7 +30,7 @@ @if (variants().length > 0) { } diff --git a/src/app/shared/components/product-row-card/product-row-card.component.ts b/src/app/shared/components/product-row-card/product-row-card.component.ts index 5a8448d..b3a6114 100644 --- a/src/app/shared/components/product-row-card/product-row-card.component.ts +++ b/src/app/shared/components/product-row-card/product-row-card.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, computed, input, output, model } from '@angular/core'; +import { ChangeDetectionStrategy, Component, computed, effect, input, output, model } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent } from '../button/button.component'; import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component'; @@ -27,6 +27,18 @@ export class ProductRowCardComponent { readonly quantity = model(1); readonly selectedVariant = model(null); + private readonly selectFirstVariant = effect(() => { + const variants = this.variants(); + const selectedVariant = this.selectedVariant(); + + if ( + variants.length > 0 && + !variants.some((variant) => Object.is(variant.value, selectedVariant)) + ) { + this.selectedVariant.set(variants[0].value); + } + }); + // Interactive events readonly buy = output(); readonly addToCart = output<{ quantity: number; variant: any }>();