src/components/multi-slot-container/msc-items/msc-content-item/msc-content-item.component.ts
This component renders content data inside a MultiSlotContainerComponent.
| selector | fs-msc-content-item |
| styleUrls | ./msc-content-item.component.scss |
| templateUrl | ./msc-content-item.component.html |
Properties |
|
constructor(componentData: CmsComponentData<MSCContentItemComponentData>)
|
||||||
|
Parameters :
|
| Public componentData |
Type : CmsComponentData<MSCContentItemComponentData>
|
import { Component } from '@angular/core';
import { CmsComponentData } from '@spartacus/storefront';
import { MSCContentItemComponentData } from './msc-content-item.model';
/**
* This component renders content data inside a {@link MultiSlotContainerComponent}.
*
* @export
* @class MSCContentItemComponent
*/
@Component({
selector: 'fs-msc-content-item',
templateUrl: './msc-content-item.component.html',
styleUrls: ['./msc-content-item.component.scss'],
standalone: false
})
export class MSCContentItemComponent {
constructor(public componentData: CmsComponentData<MSCContentItemComponentData>) {}
}
<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
*ngIf="convertedData.link != null && (convertedData.link.href || convertedData.link.product)"
[routerLink]="convertedData.link.product ? (convertedData.link.product | async | cxProductUrl) : convertedData.link.href"
[attr.title]="convertedData.link.tooltip"
>
<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 != null && (convertedData.link.href || convertedData.link.product)"
[routerLink]="convertedData.link.product ? (convertedData.link.product | async | cxProductUrl) : convertedData.link.href"
class="btn btn-primary"
[attr.title]="convertedData.link.tooltip"
>
{{ convertedData.buttonText }}
</a>
</div>
</article>
</ng-container>
</ng-container>
./msc-content-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;
}
}
}