Ok, ich habe mir alles mal angesehen und Schritt für Schritt meine Änderungen ausgeschalten.
Mein Problem hat sowohl der Produktname, der nicht gekürzt wird, wie auch die Meta-Description als Kurzbeschreibung verursacht.
Für den Produktnamen hatte ich es ursprünglich so via css gelöst:
.product-name{
-webkit-box-orient: initial;
overflow: initial;
text-overflow: initial;
height: auto;
}
height:auto verursacht das Problem, da es, je nach länge des Produktnamens, die nachfolgenden Elemente unterschiedlich hoch anordnet. Ich habe es jetzt so umgesetzt, mit fester Höhe:
.product-name {
display: flex;
font-size: 1.3em;
line-height: 1.2em;
height: 3.9em;
}
Damit können bei mir 3 Zeilen Produktname ungekürzt angezeigt werden ohne Höhenunterschied bei den nachfolgenden Elementen.
Bei der Meta-Description hatte ich diese ja über Twig anstatt der gekürzten Langbeschreibung im Listing ausgeben lassen:
{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
{% block component_product_box_description %}
<div class="product-metaDescription">
{{ product.translated.metaDescription|striptags|raw }}
</div>
{% endblock %}
Der Bug hier war, das es zwar eine css für .product-Description (SW-Standard) gibt, aber nicht für .product-metaDescription, wie ich es umgesetzt hatte.
Also habe ich folgende css für die .product-metaDescription angelegt:
.product-metaDescription {
display: flex;
height: 10.5em;
margin-top: 0.7em;
font-size: 1em;
line-height: 1.3em;
overflow: auto;
}
Auch das funktioniert für mich, bei mir wird der komplette Text der Meta-Description als Kurzbeschreibung angezeigt und die darauffolgenden Elemente richtig angeordnet.
Verbesserungsvorschläge natürlich immer gerne willkommen!
