src/components/multi-slot-container/msc-items/msc-category-item/msc-category-item.component.ts
This component renders category data inside a MultiSlotContainerComponent.
| selector | fs-msc-category-item |
| styleUrls | ./msc-category-item.component.scss |
| templateUrl | ./msc-category-item.component.html |
Properties |
|
constructor(componentData: CmsComponentData<MSCCategoryItemComponentData>)
|
||||||
|
Parameters :
|
| Public componentData |
Type : CmsComponentData<MSCCategoryItemComponentData>
|
import { Component } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { MSCCategoryItemComponentData } from './msc-category-item.model';
/**
* This component renders category data inside a {@link MultiSlotContainerComponent}.
*
* @export
* @class MSCCategoryItemComponent
*/
@Component({
selector: 'fs-msc-category-item',
templateUrl: './msc-category-item.component.html',
styleUrls: ['./msc-category-item.component.scss'],
standalone: false
})
export class MSCCategoryItemComponent {
constructor(public componentData: CmsComponentData<MSCCategoryItemComponentData>) {}
}
<ng-container *ngIf="componentData.data$ != null">
<ng-container *ngIf="componentData.data$ | async as convertedData">
<article
[attr.data-preview-id]="convertedData.childPreviewId ? convertedData.childPreviewId : convertedData.previewId"
class="msc-item"
>
<div *ngIf="convertedData.image.url !== null" class="msc-image">
<figure>
<a [routerLink]="convertedData.link" [attr.title]="convertedData.headline">
<img [src]="convertedData.image.url" [alt]="convertedData.image.altTag" />
</a>
<span *ngIf="convertedData.link == null && convertedData.image.url != null">
<img [src]="convertedData.image.url" [alt]="convertedData.image.altTag" />
</span>
</figure>
</div>
<div class="msc-content">
<h3 data-preview-id="#st_headline" *ngIf="convertedData.headline">{{ convertedData.headline }}</h3>
<h4 *ngIf="convertedData.subline">{{ convertedData.subline }}</h4>
<p *ngIf="convertedData.text">{{ convertedData.text }}</p>
<a *ngIf="convertedData.link" [routerLink]="convertedData.link" class="btn btn-primary" [attr.title]="convertedData.headline">
{{ convertedData.buttonText }}
</a>
</div>
</article>
</ng-container>
</ng-container>
./msc-category-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,
span {
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
}
img {
display: block;
height: inherit;
object-fit: cover;
width: inherit;
}
a:hover img {
filter: saturate(50%);
transition: all 1.5s ease;
}
}
}