<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 Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe">
<a class="attributes__attribute-link" href="#" title="Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe">Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe 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">Artikelnr.</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>
<li class="attributes__list-item">
<div class="attributes__name">Grösse</div>
<div class="attributes__value " title="60ml">
60ml
</div>
</li>
<li class="attributes__list-item">
<div class="attributes__name">Inhalt</div>
<div class="attributes__value " title="2 Stk">
2 Stk
</div>
</li>
</ul>
<button type="button" class="button-content-toggle is-hidden" data-show-more-label="mehr anzeigen" data-show-less-label="weniger anzeigen" data-attributes-toggle-button="true">mehr anzeigen</button>
</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 Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe Schuhe",
"href": "#"
},
{
"type": "stock",
"name": "Lager",
"status": "available",
"tooltip": "Verfügbar ab Juli 2020"
},
{
"type": "text",
"name": "Artikelnr.",
"value": "8547625"
},
{
"type": "text",
"name": "Farbe",
"value": "8/97 Hell-Lichtblond Cendré-Mahagoni"
},
{
"type": "text",
"name": "Grösse",
"value": "60ml"
},
{
"type": "text",
"name": "Inhalt",
"value": "2 Stk"
}
]
}
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.