Product Layout erweitern

Hallo, gibt es in SW 5 irgendwo auch die Möglichkeit das Product Layout in den Kategorien wie in SW 4 mit weiteren eigenen Templates (Grundeinstellung - Kategorie/Listen) zu erweitern? Finde hier aktuell nichts dazu. In den Template-Files sehe ich da nichts dazu, oder übersehe ich da was? Gruß

up :wink:

Hi, hast du schon das in der Developer Dokumentation gefunden? https://developers.shopware.com/designe … templates/ Sebastian

Ja schon, aber Kategorie Template wird doch nur noch für das Emotion Template verwendet, oder bin ich da falsch dran?

Eben noch einmal alles getestet… Die Templateauswahl in der Kategorie bezieht sich auf das alte Emotion-Template. Das Product Layout bezieht sich auf das neue responsive Template. Und darum ging es mir hier. Gibt es hier irgendwo einen Ansatz für das Product Layout eigene Templates zu integrieren wie für das Emotion Template? Oder muss hier der Umweg über ein Plugin bzw. über direkte Anpassungen an den .tpl’s gegangen werden?

Ich habe das selbe vor, hat jemand eine Lösung inzwischen?

Jemand schon eine Lösung gefunden?

Hallo Zusammen, Da ich die Kategorie-Listings anpassen möchte, würde ich gern auf die bestehenden zurück greifen, kann aber die Templates/Dateien… [list] [*] article_listing_1col.tpl:Liste;[/*] [*] article_listing_2col.tpl:Zweispaltig;[/*] [*] article_listing_3col.tpl:Dreispaltig;[/*] [*] article_listing_4col.tpl:Vierspaltig[/*][/list] … allesamt nicht finden (auch nicht in einer ganz frischen Installation). Zur Anpassung des Listings weiß ich nun nicht einmal, was das parent Listing ist, vermutlich ‘themes\Frontend\Bare\frontend\listing\listing.tpl’ oder? Es wäre schön, wenn hier jemand helfen könnte und mir das ‘parent’ nennt und mir ggf. hilft und sagt, wo ich die o.g. templates finde. Viele Grüße!

article_listing_1col.tpl:Liste; article_listing_2col.tpl:Zweispaltig; article_listing_3col.tpl:Dreispaltig; article_listing_4col.tpl:Vierspaltig Sind ja quasi nicht mehr aktuell, und sind nur für die alten Emotion Templates gedacht. Der link von Sebastian ist schon richtig. Leider lässt die Dokumentation das wichtigste weg. Und die ist im Prinzip unvollständig. Sowas in der neuen Doku stiftet natürlich etwas Verwirrung, weil man logischer weise erstmal nach diesen Dateien sucht. Sinnvoller wäre wohl. Wollt ihr das Produkt Layout Template für die Kategorien Bearbeiten verwendet zb. Die Datei „box-big-image.tpl“ welches sich in themes\Frontend\Bare\frontend\listing\product-box befindet. Dieses Template steht für Zitat "Großes Bild ( Das Layout der Produkt-Box zeigt ein besonders großes Produkt-Bild ) " ist ja im Prinzip nicht so schwer oder :wink: Für ein Deutsches Shopsystem, ist es zudem echt traurig, dass die Doku nur in Englisch vorliegt bei 4.0 würde da weitaus ausführlicher Dokumentiert. Da hier aber selbst die Mitarbeiter nicht wissen wo die richtigen Datein stecken :wink: gebe ich mal die Antwort. die Nötigen Dateien findet ihr unter themes\Frontend\Bare\frontend\listing\product-box Legt euch aber unbedingt ein eigenes Theme an wenn ihr da was ändern wollt. So seid ihr Updatesicher. Die Boxen, sind natürlich schön zerfleddert, für noch mehr Spaß beim Designen :frowning: früher war das glaube nur 1 Datei wo alles übersichtlich drin stand. Aber heute wird selbst der Preis in eine eigene Datei ausgelagert :thumbdown: den sinn verstehen wohl nur Programierer :stuck_out_tongue: Also Anpassungen sind noch etwas unübersichtlicher wie früher. So damit hier nicht nur geredet wird, mal eine von mir modifizierte Datei. Ich wollte im Kategorielisting gern die großen Bilder und zusätzlich noch die Kurzbeschreibung. Ich habe hierzu die box-big-image.tpl modifiziert, so dass unter dem Bild die Kurzbeschreibung anzeigt wird. Die geänderte Datei schaut dann so aus. [code] {extends file=“frontend/listing/product-box/box-basic.tpl”} {namespace name=“frontend/listing/box_article”} {block name=‘frontend_listing_box_article_description’}

{$sArticle.description_long|strip_tags|truncate:150}
{/block} {block name=‘frontend_listing_box_article_picture’} {block name=‘frontend_listing_box_article_image_element’} {block name=‘frontend_listing_box_article_image_media’} {if isset($sArticle.image.thumbnails)} {block name=‘frontend_listing_box_article_image_picture_element’} {$sArticle.articleName|escape} {/block} {else} ![{$sArticle.articleName|escape}]({link file=‘frontend/_public/src/img/no-picture.jpg’} “{$sArticle.articleName|escape|truncate:25:”) {/if} {/block} {/block} {/block} [/code] Hoffe ich konnte euch helfen. Bin selber gerade am 5.0 Basteln lach. In 2 Wochen geht’s dann hoffentlich Reibungslos On Air.

Stand auch gerade vor diesem Problem … aktuell gibt es aber keine einfache Möglichkeit … zumindest zeigt mir themes\Backend\ExtJs\backend\base\store\product_box_layout.js das es (mehr oder minder) hardcoded ist. :frowning: Da ist es einfacher ein vorhandenes Layout über ein eigenes Theme zu überschreiben. vg tonzen

Ich push das Thema mal. Für uns ist es auch interessant die Produktlayout-Auswahl zu erweitern, wie das in Shopware 4 bzw. den Emotion-Templates der Fall ist.

Das man nur die drei bestehenden Layouts verändern kann, ist leider ein großer Rückschritt in SW 5.

Ich würde das Thema gerne auch nochmals hervorziehen. Habe auch Bedarf sauber im System ein weiteres Produktlayout in die Auswahl zu bringen. Gibt es zwischenzeitlich einen offiziellen beschriebenen Weg, wie man das tun sollte, ohne eines der vorhandenen Layouts zu überschreiben?

Danke für eure Info.

Liebe Grüße

Kevin

Hallo,

die Erweiterung der Auswahl im Backend kann momentan nur über eine kleine Backend-Erweiterung vorgenommen werden. Folgende Datei wäre hier zu erweitern: shopware/product_box_layout.js at 5.2 · shopware/shopware · GitHub

Das Feature der Custom-Templates für Kategorie-Seiten ist außerdem nach wie vor in Shopware 5 verfügbar. Der Unterschied ist hier nur, dass die alten Vorlagen aus Shopware 4 nicht mehr verwendet werden. Man kann allerdings weiterhin eigene Template Files hinterlegen, so wie es auch in der Doku richtig beschrieben wird.

In Eurer Template-Erweiterung könnt Ihr außerdem ganz einfach über die Variable  $productBoxLayout das entsprechende Layout für die Produkt-Box setzen. Durch eine Erweiterung der listing/box_article.tpl könnte man hier einfach seine eigene Box laden lassen. Diese könnte ja auch von einer Bestehenden ableiten. Die Variablen für das Listing werden hier gesetzt: shopware/index.tpl at 5.2 · shopware/shopware · GitHub

Sonnige Grüße,
Phil
 

1 Like

Hi Phil,

vielen Dank für deine ausführliche Antwort. Dann habe ich mich von euch etwas in die Irre führen lassen. Baue gerade nämlich einen neuen Shop auf Basis 5.2 auf und hatte mich gewundert, dass das individuelle Layout gar nicht erst angezeigt wird und war deshalb davon ausgegangen, dass es nicht mehr unterstützt wird. Das wird ja dann wohl nur nicht angezeigt, wenn es gar kein individuelles Layout gibt in der Konfiguration :slight_smile:

Hätte ich mal lieber gleich das Beispielplugin bei mir im Template integriert und die Doku zu Ende gestetet… Sorry dafür!

Wünsche dir ein schönes Wochenende.

lg

Kevin

Nachdem ich nun mein eigenens Custom Design laut Dokumentation angelegt habe, habe ich es nun auch als individuelles Layout zur Verfügung.

Vielen Dank nochmal für den Hinweis. 

lg

Kevin

 

 

 

 

Hallo zusammen,

ich versuche auch die Auswahl der „Produkt Layouts“ zu erweitern. Habe dazu die Datei „/themes/Backend/ExtJs/backend/base/store/product_box_layout.js“ wie folgt angepasst (etwas gekürzt):

    defaultLayouts: {
        displayExtendLayout: false,
        displayBasicLayout: true,
        displayMinimalLayout: true,
        displayImageLayout: true,
        displayListLayout: false,
        displayAwardLayout: true,
        displayPropertyLayout: true
    },

    snippets: {
        displayBasicLayout: {
            label: '{s name=settings_box_layout_basic_title}Detailed information{/s}',
            description: '{s name=settings_box_layout_basic_description}The layout of the product box will show very detailed information.{/s}'
        },
        displayAwardLayout: {
            label: '{s name=settings_box_layout_award_title}Awards{/s}',
            description: '{s name=settings_box_layout_award_description}The layout of the product box is based on a award of the product.{/s}'
        },
        displayPropertyLayout: {
            label: '{s name=settings_box_layout_property_title}Properties{/s}',
            description: '{s name=settings_box_layout_property_description}The layout of the product box is based on the properties of the product.{/s}'
        }
    },

    constructor: function(config) {
        var me = this,
            data = [];

        if (this.getConfigValue(config, 'displayBasicLayout')) {
            data.push({
                key: 'basic',
                label: me.snippets.displayBasicLayout.label,
                description: me.snippets.displayBasicLayout.description,
                image: '{link file="backend/_resources/images/category/layout_box_basic.png"}'
            });
        }
        if (this.getConfigValue(config, 'displayAwardLayout')) {
            data.push({
                key: 'award',
                label: me.snippets.displayBasicLayout.label,
                description: me.snippets.displayBasicLayout.description,
                image: '{link file="backend/_resources/images/category/layout_box_award.png"}'
            });
        }
        if (this.getConfigValue(config, 'displayPropertyLayout')) {
            data.push({
                key: 'property',
                label: me.snippets.displayBasicLayout.label,
                description: me.snippets.displayBasicLayout.description,
                image: '{link file="backend/_resources/images/category/layout_box_award.png"}'
            });
        }

Mein Problem sind die Zeilen „label“ und „description“ im constructor. Wenn ich dort „label: me.snippets.displayAwardLayout.label,“ anstatt dem hier gezeigtem eintrage, bekomme ich beim Öffnen der Kategorien im Backend in der Browser-Console einen Fehler (hier ein für description). Die Kategorien werden nicht geöffnet und es erscheint ein „ewiges“ Ladesymbol.

Uncaught TypeError: Cannot read property 'description' of undefined
    at new constructor (base?file=bootstrap&loggedIn=1489845089:9451)
    at i [as self] (ext-all.js?201702271540:21)
    at eval (eval at getInstantiator (ext-all.js?201702271540:21), :3:8)
    at Object.instantiate (ext-all.js?201702271540:21)
    at Object.create (ext-all.js?201702271540:21)
    at i.createStore (base?file=bootstrap&loggedIn=1489845089:14811)
    at initComponent (base?file=bootstrap&loggedIn=1489845089:14807)
    at i.constructor (ext-all.js?201702271540:21)
    at i.callParent (ext-all.js?201702271540:21)
    at new constructor (ext-all.js?201702271540:21)

Die zwei zusätzlichen Produkt Layouts werden angezeigt, wenn auch mit der Beschreibung des Basic-Layouts. In den Textbausteinen sind die Texte zu den neuen Layouts hinterlegt, bzw. werden automatisch angelegt.

Woran kann das liegen?

Nutze Shopware Version 5.2.20

Danke und Gruß Peter

 

Die zwei zusätzlichen Produkt Layouts werden angezeigt, wenn auch mit der Beschreibung des Basic-Layouts. In den Textbausteinen sind die Texte zu den neuen Layouts hinterlegt, bzw. werden automatisch angelegt.

 

Es ist mir gelungen ein eigenes Produkt Layout wie oben beschrieben zu erstellen. Ich habe aber auch das Problem mit “description” und “label”. Die Textbausteine werden auch automatisch angelegt und sind mit den Werten aus der product_box_layout.js gefüllt. Wenn ich die aber in der product_box_layout.js im constructor eingebe schieße ich die Kategorien im Backend ab?

Wie / Wo muss man das angeben?

Danke

Andreas