<div class="attributes--large-bold">
<ul class="attributes__list">
<li class="attributes__list-item">
<div class="attributes__name">Marke</div>
<div class="attributes__value has-single-line-ellipsis" title="UYN">
<a class="attributes__attribute-link" href="#" title="UYN">UYN</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Einsatzbereich</div>
<div class="attributes__value has-single-line-ellipsis" title="Outdoor">
<a class="attributes__attribute-link" href="#" title="Outdoor">Outdoor</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Kategorie</div>
<div class="attributes__value has-single-line-ellipsis" title="Schuhe">
<a class="attributes__attribute-link" href="#" title="Schuhe">Schuhe</a>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Lager</div>
<div class="attributes__value ">
<div class="stock">
<button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar ab Juli 2020">
<span class="visually-hidden">Verfügbar ab Juli 2020</span>
</button>
</div>
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Artikelgrösseösseösseösse</div>
<div class="attributes__value " title="8547625">
8547625
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Farbe</div>
<div class="attributes__value " title="8/97 Hell-Lichtblond Cendré-Mahagoni">
8/97 Hell-Lichtblond Cendré-Mahagoni
</div>
</li>
</ul>
</div>
{% include '@SharedComponents/modules/shared-product/components/attributes/attributes.twig' %}
{
"labels": {
"more": "mehr anzeigen",
"less": "weniger anzeigen"
},
"variant": "large-bold",
"attributes": [
{
"type": "link",
"name": "Marke",
"value": "UYN",
"href": "#"
},
{
"type": "link",
"name": "Einsatzbereich",
"value": "Outdoor",
"href": "#"
},
{
"type": "link",
"name": "Kategorie",
"value": "Schuhe",
"href": "#"
},
{
"type": "stock",
"name": "Lager",
"status": "available",
"tooltip": "Verfügbar ab Juli 2020"
},
{
"type": "text",
"name": "Artikelgrösseösseösseösse",
"value": "8547625"
},
{
"type": "text",
"name": "Farbe",
"value": "8/97 Hell-Lichtblond Cendré-Mahagoni"
}
]
}
import './attributes.scss';
import Attributes, {selector as sel} from 'cando-cx-components-library/components/modules/shared-product/components/attributes/attributes';
export default Attributes;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/attributes/attributes";
Links will be truncated after the first line, other values after the second line.
Why is this variant necessary at all, since it only generated one link? Because technically multiple categories are supported in Pimcore. Also, category referencing logic only needs to be implemented at one place. Thus, it makes it easier to integrate.