tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(product-row-card): update variant selection logic to default to first variant if none selected

Browse Source
This commit is contained in:
ncoronel
2026-07-17 13:45:36 -03:00
parent 9a4e2a03e9
commit 944c12a7f3
2 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/components/product-row-card/product-row-card.component.html
View File

@@ -30,7 +30,7 @@
@if (variants().length > 0) { @if (variants().length > 0) {
<select class="form-select product-row-card__select" [(ngModel)]="selectedVariant"> <select class="form-select product-row-card__select" [(ngModel)]="selectedVariant">
@for (variant of variants(); track variant.value) { @for (variant of variants(); track variant.value) {
<option [value]="variant.value">{{ variant.label }}</option> <option [ngValue]="variant.value">{{ variant.label }}</option>
} }
</select> </select>
} }

14
src/app/shared/components/product-row-card/product-row-card.component.ts
View File

@@ -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 { FormsModule } from '@angular/forms';
import { ButtonComponent } from '../button/button.component'; import { ButtonComponent } from '../button/button.component';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component'; import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
@@ -27,6 +27,18 @@ export class ProductRowCardComponent {
readonly quantity = model<number>(1); readonly quantity = model<number>(1);
readonly selectedVariant = model<any>(null); readonly selectedVariant = model<any>(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 // Interactive events
readonly buy = output<void>(); readonly buy = output<void>();
readonly addToCart = output<{ quantity: number; variant: any }>(); readonly addToCart = output<{ quantity: number; variant: any }>();