Mehrere Freitextfelder auf Artikeldetailseite darstellen

Shopware 5 Themes & Design
1

Hallo, ich muss in unserem Shop mehrere Freitextfelder auf der Artikeldetailseite oben rechts unterbringen. Das hatte in dem alten template auch bestens funktioniert. Jetzt geht das zwar auch, sieht aber unschön aus (siehe Screenshot), weil nur das erste Freitextfeld richtig formatiert wird. Also fettgedruckt, Doppelpunkt und dann der jeweilige Wert nach rechts gerückt. Das wird ja wahrscheinlich über die Stylesheet-Datei geregelt, oder? Leider funktioniert unsere alte Stylesheet-Datei dafür nicht mehr. Hier die data.tpl [code]{* Detailseite des Mastertemplates erben *} {extends file=“parent:frontend/detail/data.tpl”} {* Attribute anzeigen *} {block name=‘frontend_detail_data_attributes’} {if $sArticle.attr1}

Typ:{$sArticle.attr1} {if $sArticle.attr19 == “ex”}für externen Motor{/if}

{/if} {if $sArticle.attr2}

Breite:{$sArticle.attr2}

{/if} {if $sArticle.attr3}

Leistung:{$sArticle.attr3}

{/if} {if $sArticle.attr4}

Lautstärke:{$sArticle.attr4}*

{/if} {if $sArticle.attr11}

Energieeffizienzklasse*:{$sArticle.attr11}

{/if} {if $sArticle.attr12==“true”}

Ergieverbrauch:{$sArticle.attr12}

{/if} {if $sArticle.attr8==“true”}

Original Bez.:{$sArticle.attr9}

{/if} {/block}[/code] Hier der Teil aus der alten .CSS-Datei, der vermutlich dafür zuständig war, aber so nicht mehr funktioniert. /\* ARTICLE DETAILS ------------------------ \*/ #detail h1 {color:#333;} #detail .border {border-color: #dfdfdf;} #detail, #detail a, #content #detail .article\_details strong.supplier {color:#999 !important;} #detail, #detail a:hover {color:#009ee0 !important;} .article\_overview {color:#9c9c9c} .article\_overview a {color:#7a7a7a;} #detail .article\_details\_price2 strong {color: #990000} #content #detail #detailbox\_middle .article\_details\_price strong {color: #333;} .cloud-zoom-big, #cloud-zoom-big, #thumbs a, .thumb\_box a:hover, ul#menu\_right {border-color:#dedede} #thumbs a:hover, #thumbs a.active {border-color:#555} .thumb\_box a {border-color:#dfdfdf;background-color:#fff; opacity: 0.5 } .thumb\_box a:hover, .thumb\_box a.active {border-color: #999; opacity: 1} .ctl\_detail .thumb\_box a.active {border-color: #009ee0; opacity: 1} .deliverable1 {color: #009900;} .deliverable2 {color: #514721;} .deliverable3 {color: #990000;} .deliverable4 {color: #990000;} .box\_bundleset {border-color:#dfdfdf;} #detail #detailinfo #comments form {background-color: #f5f5f5;border-color: #dfdfdf;} .box\_bundleset .bundlePrice {color: #333;} .bundle\_container .bundleset .discount {color: #990000} .bundle\_box .box\_bundleArticleNames {background-color: #fff} .ui-tabs .ui-tabs-nav li.ui-state-active {background-color: #fff;} .ui-tabs .ui-tabs-nav li, #detail #detailinfo .inner\_tabs {border-color: #dfdfdf} #detail #detail\_menu li, #detail #detail\_menu li.lastrow {border-color: #dfdfdf; color:#555;border-bottom-color:#dfdfdf;} #detail #detailinfo .similar {border-left-color:#dfdfdf;} #detail #detailinfo .similar .artbox .artbox\_thumb {border-color: #dbdbdb;background-color: #fff;} #detail #detailinfo .similar .artbox strong.title {color: #999;} #detail #detailinfo .similar .artbox .price, #tabs .ui-tabs-panel, #tabs .ui-tabs-panel a {color: #333} #detail #detailinfo #description {color: #555;} #detail #detailinfo .ui-tabs-panel h3 {color: #333;} #detail #detailinfo .ui-tabs-panel .date {color: #999;} #detail #detailinfo .ui-tabs-panel .author {color: #666;} #detail #detailinfo #comments .comment\_block {border-color:#dfdfdf;} #sendArticleNotification {border-color: #dfdfdf; background-color: #f5f5f5;} #sendArticleNotification label {color: #555;} #buybox .upprice\_config strong, #buybox .config\_select strong {color: #009ee0;} #content #buybox .basketform .accessory\_overlay {background-color:#fff;} #buybox .accessory\_container .accessory\_group {border-color: #dfdfdf;} #content #buybox .basketform .accessory\_overlay .title, #content #buybox .basketform .accessory\_overlay .price {color: #333;} #buybox .accessory\_container label {color: #555;} #detail #detailinfo {background-color: transparent;} #buybox p span {width: 150px; display: block; float: left;} /\*Verschieben der Attribute auf der Artikeldetailseite\*/ Viele Grüße

2

würde mich auch interessieren. thx

3

Hallo, im Bare Theme unter detail/index.tpl wir das erste Atribut so aufgebaut: [code]{* Product attributes fields *} {block name=‘frontend_detail_data_attributes’} {* Product attribute 1 *} {block name=‘frontend_detail_data_attributes_attr1’} {if $sArticle.attr1}

  • {s name=“DetailAttributeField1Label”}{/s}: {$sArticle.attr1}
    {/if} {/block}[/code] und aussehen würde das dann so: Ich hoffe, ich konnte helfen. Bei fragen einfach melden.
1 „Gefällt mir“
4

Geht das auch mit der Responsive Theme? Das Beispiel ist la mit der Bar Theme

5

Das Responsive-Theme ist ja vom Bare-Theme abgeleitet. Das Bare-Theme ist quasi das nackte Grundgerüst. Dort findest du alle tpl.-Dateien und im Responsiv-Theme die less-Dateien. Und wenn man sein eigenes Theme dann vom Responsive-Theme ableitet, basiert es dann auch immer auf dem Bare-Theme. :slight_smile: