Hallo,
in welcher Datei ist die Box der Description in der Produktübersicht (Kategorie Template) . Beim minimalen Inhalt ist ja immer noch der Platzhalter der Box. Ich suche die dazugehörige twig. Datei.
Lieben Dank
Anett Löwe
Hallo @anett1 ,
den Block, den Du glaube ich suchst ist dieser:
Das Template ist „box-standard.html.twig“:
Der genannte Block wird im box-minimal und box-image ausgeblendet.
Viele Grüße
Marco Schäfer
Danke schonmal. Der Platzhalter und somit das große Leerfeld ist aber immer noch da. Ich habe in meinem Template in der box-standard den Block so ausgeblendet:
{% sw_extends ‚@Storefront/storefront/component/product/card/box-standard.html.twig‘ %}
{% block component_product_box_description %}
{% endblock %}
Lieben Dank
Anett
@anett1 - Meinst du evtl. den Bereich:
Gerne mal noch weitere Infos oder einen Screenshot was du meinst senden.
Bitte erwähne mit durch Angabe von @ vor meinen Namen, da ich sonst leider nicht benachrichtigt werde wenn du antwortest 
Viele Grüße
Marco
Es ist die Produktübersicht in der Kategorie. Dieser freie Platz, der für die Beschreibung reserviert ist soll weg. Lieben Dank Anett
@anett1 - Meinst du das in etwa so?
In diesem Fall müsstest du verschiedene Höhen und Abstände über CSS (SCSS), im Theme definieren. Der freie Bereich kommt nicht alleine über die Beschreibung da die Box automatisch auf die Höhe gezogen wird.
man muss aber darauf achten, dass es evtl nicht mehr passt wenn man andere Produktinformationen / Varianten oder Inhalte oder whatever dann im Produkt hat. Der Platz prinzipiell ist ja dafür da alles abzubilden was man so machen kann mit Variantenmerkmalen oder sonstiges.
In vielen Shops wird das ganze nicht benötigt, da passe ich es auch meist im theme scss an. Oftmals ist es so dass ich es aber auch anpasse und dann nicht mehr passt weil dann doch irgendwas neues mit angezeigt wird was vorher nicht bedacht war
1 „Gefällt mir“
Css ist meines erachtens hier nicht die schönste Lösung, was spricht dagegen die Blöcke gleich ganz rauszunehmen wenn man das nicht haben möchte? Ist vermutlich die wesentlich bessere Lösung, da der ganze „Kram“ erst gar nicht geladen werden muss.
So mach ich es zumindestens immer.
@MrAle - Grundsätzlich gebe ich dir recht.
Am besten warten wir bis @anett1 sich zurückmeldet!
Komplett ohne CSS bekommst du die Boxen nicht kleiner - Ja du könntest eigene Boxen erstellen, aber dann bräuchtest du da auch CSS.
Klar aber Inhalte die man garnicht braucht sollten über das Template natürlich entfernt werden - Das ist korrekt, habe ich aber in der Erstantwort mal bewusst weggelassen!
@WebentwicklSchaefer @MrAle @b.david
Dankeschön für Eure Antworten. Ich würde schon gern den Block ausblenden und brauche grundsätzlich nur Image / Name / Preis und den Button in meinen Onlineshops. In der css wird sicherlich auch der Rand defininiert. Es wäre schön, wenn Ihr mir die Datei nennt und wo die Box definiert ist. Den Rahmen mag ich auch ausblenden.
Liebe Grüße
Anett
P.S. Sorry, dass ich mich erst jetzt melde. Das neue Shopsystem erstelle ich nach der Arbeit.
Danke Mr.Ale auch nochmal für die Lösung mit dem Gutscheinfeld
Hallo @anett1 ,
zuerst würde ich in der Administration umstellen und eines von diesen beiden nehmen:
Das kannst du an den Erlebniswelten bei den Kategorieblock machen.
Ist aber kein muss!
Anschließend eines der beiden Templates extenden.
Beide Templates erben von box-standard.html.twig. Somit kannst du alle Blöcke auch aus dieser Datei leeren die du nicht mehr benötigst:
Welche das jetzt sind da gehe ich mal nicht 100% drauf ein - da ich das ganze sonst schon mehr oder weniger gleich selbst programmieren könnte
z.B. könntest du diesen leer machen da du den Inhalt nicht mehr anzeigen möchtest.
{% block component_product_box_variant_characteristics %}
{% endblock %}
Das Template ist leider nicht alles da bereinigst du erstmal nur das ganze. Dann müsstest du noch einige CSS-Anweisungen schreiben, am besten in deiner base.scss sowie untergeordneten Dateien. Hier würde ich empfehlen dich immer am Shopware Standard zu orientieren, d.h. die .scss Struktur von Showpare nachbauen an den Stellen die du verändern möchtest → Das macht es später mal leichter.
Für dich sollten diese Stellen relevant sein, denke ich:
Bitte nagelt mich nicht darauf fest das evtl. noch andere Stellen in Frage kommen, das sollte das wichtigste sein für dieses Problem. Wobei auch hier natürlich alles davon abhängt was schon da ist.
Beispiel für deinen border:
Dafür müsstest du die Klasse .product-box in deinen Anweisungen überschreiben und den border entfernen.
Ich hoffe ich konnte das ganze soweit einigermaßen verständlich erklären?
Viele Grüße
Marco
Ich mach das jetzt alles in css. Wärst Du so lieb mir noch die einleitenden Infos für die base.html.twig zu schreiben (wie bei meinem farbigen Header Balken z.B.
{% block base_header %}
<header class="header-main">
Danke
P.S. Ich hatte probeweise das css in der Original product-box.css rausgenommen. Das hat funktioniert. Aber nun muss ich vererben.
Hallo @anett1,
am besten lies dich hier erstmal kurz ein:
Im Grunde reicht der erste Teil auf dieser Seite für dich aus.
Ich würde abraten viele .css Dateien zu erstellen und alle im Header einzubinden:
- Es müssen mehr Dateien geladen werden (Performance usw.)
- CSS ist „schlechter“ wartbar als SCSS
- Im echten CSS kannst du keine Variablen (z.B. die Farben aus dem Theme etc.) nutzen
Wenn du dein CSS einbinden möchtest kann ich dir das nicht ausreden - Dann schau mal dort wie soetwas gemacht wird:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Einbinden_eines_externen_Stylesheets
Das könntest du z.B. in der „storefront/layout/meta.html.twig“ hinzufügen:
{% block layout_head_stylesheet %}
.....
{% endblock %}
P.S. Ich hatte probeweise das css in der Original product-box.css rausgenommen. Das hat funktioniert. Aber nun muss ich vererben.
Ich bin mir ehrlich gesagt nicht sicher was du gemacht hast oder meinst, da Shopware keine product.css im Standard besitzt. Versuch am besten nur in deinen eigenen Theme oder deinen eigenen Plugins Änderungen zu machen. Alles andere am besten nur extenden.
Viele Grüße
Marco Schäfer
Ich denke Du hast mich hier total missverstanden. Ich möchte die Boxen in der base.scss deaktivieren mit u.a.
.product-box .product-description {
display: none;
}
Allerdings findet es den Befehl nicht, ohne dass ich in der base.html.twig auf den Block verweise.
Hallo @anett1 ,
„total“, glaube ich habe ich dich nicht falsch verstanden, hab dir nur versucht näher zu bringen wie du das ganze lösen könntest (klar gibt immer mehrere Wege).
Hast du soetwas in deiner theme.json?
"style": [
"app/storefront/src/scss/overrides.scss",
"@Storefront",
"app/storefront/src/scss/base.scss"
],
Falls nicht überprüf nochmal dein Theme. Falls du sowetwas hast muss jetzt nur die base.scss in der korrekten Struktur liegen:
$DeinThemeName/src/Resources/app/storefront/src/scss/base.scss
anschließend über die Konsole einloggen (SSH) und mit
php bin/console theme:compile
dein Theme erzeugen - Bitte beachte hier das du in das Shop-Root Verzeichnis musst. Bei manchen Hostern musst du „php“ anders aufrufen.
Allerdings findet es den Befehl nicht, ohne dass ich in der base.html.twig auf den Block verweise.
Ich würde vermuten das dies durch das „Nicht-Kompilieren“ nicht gefunden wurde.
Viele Grüße
Marco
Danke, ich nutze ja mein eigenes Template und arbeite auch schon mit der base.scss . Sie funktioniert in andern Sachen auch prima.
Zur Produktbox habe ich 2 Befehle drin:
.product-box {
border: none;
}
.product-description {
display: none;
}
Der Rahmen ist weg, display: none funitioniert nicht. Hab ich vielleicht den falschen Befehl. theme:compile und cache:clean muss ich übrigens nach jeder Änderung machen.
Das steh
Mach mal
display:none !important;
Hallo @anett1 ,
versuch es mal so:
.product-box {
border: none;
.product-description {
display: none;
}
}
Das sollte zumindest im Standard-Theme funktionieren wenn sonst nichts anderes eingestellt ist.
Mach mal
display:none !important;
@Kavkus Das würde auch funktionieren, aber important ist nicht unbedingt die schöne/saubere Lösung.
Viele Grüße
Marco Schäfer
1 „Gefällt mir“
@WebentwicklSchaefer @Kavkus @MrAle @b.david
Funktioniert leider auch nicht. Ich hab direkt nun direkt im vendor die geänderte Datei hochgeladen. Anbei ein Foto, wie es jetzt aussieht.
Ich schaffe es aber nicht, den Preis und den Namen zentriert zu bekommen. Die Schrift (also die gesamte Box ist auch zu breit. Meine Fotos sind Hochformat 550x800 . Auf einen Smartphone Screen sollen 2 Produktbilder nebeneinander passen. . Die Schrift ist viel breiter, als das Galeriebild.
Habt Ihr da ne Lösung?
Hier ist der übriggebliebene Code und ein Screenshot der derzeitigen Ansicht:
/*
Product box
Styling for productbox component.
*/
$box-standard-height-img: 200px;
$box-image-height-img: 332px;
.product-box {
height: 100%;
border: none;
margin: auto;
// Do not expand the Bootstrap `stretched-link` pseudo element over the entire product card.
// By giving it the image height, only the image itself is linked and the remaining content is still selectable.
&.box-standard .stretched-link::after,
&.box-minimal .stretched-link::after {
height: calc(#{$box-standard-height-img} + var(--#{$prefix}card-spacer-y));
}
&.box-image .stretched-link::after {
height: calc(#{$box-image-height-img} + var(--#{$prefix}card-spacer-y));
}
}
.product-image-wrapper {
height: $box-standard-height-img;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 180px;
margin-bottom: 15px;
position: relative;
}
.product-image-link {
width: 100%;
height: 100%;
display: flex;
&.is-cover {
align-items: flex-start;
}
}
.product-image {
display: block;
max-width: 100%;
// ‚max-height: 100%‘ not working in firefox
max-height: $box-standard-height-img;
&.is-standard,
&.is-cover,
&.is-contain {
width: 100%;
height: 100%;
}
&.is-cover {
object-fit: cover;
}
&.is-contain {
object-fit: contain;
}
&.is-standard {
object-fit: scale-down;
}
}
.product-name {
color: $headings-color;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-line-clamp: 2;
-webkit-margin: 0;
line-clamp: 2;
height: 2.75rem;
margin-bottom: 5px;
font-size: 1.125rem;
line-height: 1.375rem;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
&:hover {
color: var(--text-color-brand-primary);
text-decoration: none;
}
}
.product-price {
color: $headings-color;
min-height: 20px;
margin-top: 5px;
margin-bottom: 5;
font-size: 1.125rem;
font-weight: $font-weight-bold;
line-height: 1.25rem;
overflow: hidden;
&.with-list-price {
color: $danger;
}
.list-price {
color: $headings-color;
font-weight: $font-weight-normal;
padding-left: 5px;
font-size: 0.75rem;
.list-price-price {
text-decoration: line-through;
}
}
.regulation-price {
color: $headings-color;
font-weight: $font-weight-normal;
padding-left: 5px;
font-size: 0.75rem;
padding-left: 0;
}
.list-price-no-line-through .list-price-price {
text-decoration: none;
}
.strikeprice-text {
color: $headings-color;
font-weight: $font-weight-normal;
padding-left: 5px;
font-size: 0.75rem;
}
}
.product-box {
&.box-image {
.product-image-wrapper {
height: $box-image-height-img;
}
.product-image {
max-height: $box-image-height-img;
}
// box-image uses cover mode for standard display mode
.product-image.is-standard {
height: 100%;
object-fit: cover;
}
}
}
Hi,
also im vendor ändern nützt dir genau so lange etwas, bis es durch ein Update überspielt wird 
Am besten - du gibst uns vielleicht einmal die URL - dann können wir dir vielleicht helfen.