import { Component , Input } from '@angular/core' ; import { Product , BaseOption , RoutingService , VariantOptionQualifier , VariantQualifier , ProductScope , ProductService , OccConfig , } from '@spartacus/core' ; import { filter , take } from 'rxjs/operators' ; @ Component ( { selector : 'app-dvnt-product-style-variant' , templateUrl : './dvnt-product-style-variant.component.html' , styleUrls : [ './dvnt-product-style-variant.component.scss' ] , } ) export class DvntProductStyleVariantComponent { @ Input ( ) public variants : BaseOption ; constructor ( private productService , private routingService , private config ) { } public changeStyle ( code ) { if ( code ) { this . productService . get ( code , ProductScope . LIST ) . pipe ( filter ( Boolean ) , take ( 1 ) ) . subscribe ( ( product ) => { this . routingService . go ( { cxRoute : 'product' , params : product , } ) ; } ) ; } return null ; } public getVariantOptionValue ( qualifiers ) { const obj = qualifiers . find ( ( q ) => q . qualifier === VariantQualifier . COLOR ) ; return obj ? obj . value : '' ; } public getVariantThumbnailUrl ( variantOptionQualifiers ) { const qualifier = variantOptionQualifiers . find ( ( item ) => item . image ) ; return qualifier ? `${ this . config . backend . occ . baseUrl }${ qualifier . image . url }` : '' ; } }