src/components/multi-slot-container/msc-items/msc-product-item/msc-product-item.component.ts
This component renders product data inside a MultiSlotContainerComponent.
| selector | fs-msc-product-item |
| styleUrls | ./msc-product-item.component.scss |
| templateUrl | ./msc-product-item.component.html |
Properties |
|
constructor(componentData: CmsComponentData<MSCProductItemComponentData>)
|
||||||
|
Parameters :
|
| Public componentData |
Type : CmsComponentData<MSCProductItemComponentData>
|
import { Component } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { MSCProductItemComponentData } from './msc-product-item.model';
/**
* This component renders product data inside a {@link MultiSlotContainerComponent}.
*
* @export
* @class MSCProductItemComponent
*/
@Component({
selector: 'fs-msc-product-item',
templateUrl: './msc-product-item.component.html',
styleUrls: ['./msc-product-item.component.scss'],
standalone: false
})
export class MSCProductItemComponent {
constructor(public componentData: CmsComponentData<MSCProductItemComponentData>) {}
}
<ng-container *ngIf="componentData.data$ != null">
<ng-container *ngIf="componentData.data$ | async as convertedData">
<article
*ngIf="convertedData.product | async as productData"
[attr.data-preview-id]="convertedData.childPreviewId ? convertedData.childPreviewId : convertedData.previewId"
class="msc-item"
>
<div *ngIf="convertedData.image || productData.images" class="msc-image">
<figure>
<a [routerLink]="convertedData.product | async | cxProductUrl" [attr.title]="productData.name">
<img
[src]="convertedData.image?.url ? convertedData.image.url : productData.images['PRIMARY']['product']?.url"
[alt]="convertedData.image?.url ? convertedData.image.altTag : productData.images['PRIMARY']['product']?.altText"
/>
</a>
</figure>
</div>
<div class="msc-content">
<h3 data-preview-id="#st_headline">{{ convertedData.headline || productData.name }}</h3>
<h4>{{ convertedData.subline || productData.price?.formattedValue }}</h4>
<p>{{ convertedData.text || productData.summary }}</p>
<a
*ngIf="convertedData.product && convertedData.buttonText"
[routerLink]="convertedData.product | async | cxProductUrl"
class="btn btn-primary"
[attr.title]="productData.name"
>
{{ convertedData.buttonText }}
</a>
</div>
</article>
</ng-container>
</ng-container>
./msc-product-item.component.scss
.msc-item {
display: flex;
flex-direction: column;
.msc-content {
width: 100%;
text-align: center;
h3,
p {
padding-top: 1rem;
}
h3 {
font-weight: 600;
font-size: 1.5rem;
}
h4 {
color: #484e52;
}
.btn.btn-primary {
display: none;
}
}
.msc-image {
width: 100%;
figure {
overflow: hidden;
padding-top: 75%;
position: relative;
width: 100%;
margin: 0;
a {
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
}
img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
a:hover img {
filter: saturate(50%);
transition: all 1.5s ease;
}
}
}