CMS Block + CMS Element > Plugin erstellen > Frontend - Hilfe please

[WebDev]

Moin Zusammen,

Hat irgendjemand hier mal ein paar Minuten Zeit mir zu erläutern wie das ganze exakt funktioniert?

In meinem Fall würde ich als erstes gern einen simplen „Four Column Text Image“ Plugin erstellen.

Folgender Tree Existiert:

Backend sieht soweit in Ordnung aus >

Für das Erlebniswelten Innere wurde folgender Code benutzt:

{% block sw_cms_block_four_column_text_image %}

    <div class="four-column-text-image__left">
        <slot name="left-four-column-text-image-image"></slot>
        <slot name="left-four-column-text-image-text"></slot>
    </div>

    <div class="four-column-text-image__right">
        <slot name="right-four-column-text-image-image"></slot>
        <slot name="right-four-column-text-image-text"></slot>
    </div>

    <div class="four-column-text-image__end">
        <slot name="end-four-column-text-image-image"></slot>
        <slot name="end-four-column-text-image-text"></slot>
    </div>
</div>

{% endblock %}

Für die Preview in der Erlebniswelt folgender:

{% block sw_cms_block_image_text_row_preview %}

Lorem ipsum dolor sit amet elitr.

    <div class="sw-cms-preview-four-column-text-image__left">
        <div class="sw-cms-preview-four-column-text-image__image">
            <img :src="'/administration/static/img/cms/preview_plant_small.jpg' | asset">
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet elitr.</p>
        </div>
    </div>

    <div class="sw-cms-preview-four-column-text-image__right">
        <div class="sw-cms-preview-four-column-text-image__image">
            <img :src="'/administration/static/img/cms/preview_glasses_small.jpg' | asset">
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet elitr.</p>
        </div>
    </div>

    <div class="sw-cms-preview-four-column-text-image__end">
        <div class="sw-cms-preview-four-column-text-image__image">
            <img :src="'/administration/static/img/cms/preview_glasses_small.jpg' | asset">
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet elitr.</p>
        </div>
    </div>
</div>

{% endblock %}

Index.json entsprechend angepasst.

Frontend habe ich folgendes aus den Original Shopware Dateien entnommen:

{% block block_four-column-text-image %}
{% set columns = 4 %}
{% set id = element.id %}

{% block block_image_three_column_start %}
    {% set element = block.slots.getSlot('start') %}

    <div class="col-md-4" data-cms-element-id="{{ element.id }}">
        {% block block_image_three_column_left_inner %}
            {% sw_include "@Storefront/storefront/element/cms-element-" ~ element.type ~ ".html.twig" ignore missing %}
        {% endblock %}
    </div>
{% endblock %}

{% block block_image_three_column_left %}
    {% set element = block.slots.getSlot('left') %}

    <div class="col-md-4" data-cms-element-id="{{ element.id }}">
        {% block block_image_three_column_center_inner %}
            {% sw_include "@Storefront/storefront/element/cms-element-" ~ element.type ~ ".html.twig" ignore missing %}
        {% endblock %}
    </div>
{% endblock %}

{% block block_image_three_column_right %}
    {% set element = block.slots.getSlot('right') %}

    <div class="col-md-4" data-cms-element-id="{{ element.id }}">
        {% block block_image_three_column_right_inner %}
            {% sw_include "@Storefront/storefront/element/cms-element-" ~ element.type ~ ".html.twig" ignore missing %}
        {% endblock %}
    </div>
{% endblock %}

{% block block_image_three_column_end %}
    {% set element = block.slots.getSlot('end') %}

    <div class="col-md-4" data-cms-element-id="{{ element.id }}">
        {% block block_image_three_column_right_inner %}
            {% sw_include "@Storefront/storefront/element/cms-element-" ~ element.type ~ ".html.twig" ignore missing %}
        {% endblock %}
    </div>
{% endblock %}

{% endblock %}

./psh.phar storefront:build
./psh.phar administration:build
./psh.phar cache
bin/console cache:clear
bin/console plugin:refresh
(einfach alles ausprobiert…)

Frontend wird nichts angezeigt.

Why?..

Ich habe mehrere Plugins so erstellt ; leider wird keines davon im Frontend angezeigt… sogar alte, bereits gelöschte, via STRG+F nicht auffindbare Plugins werden noch immer im Frontend angezeigt (trotz sämtlichen Cache clearen etc. pp.)

Wäre Prima wenn mir einer einmal helfen könnte.

EDIT: Wenn ich die Plugins speichere in der Erlebniswelt, werden die Produkte/Bilder immer zurückgesetzt, Plugins bleiben zwar bestehen, allerdings als leere Anzeige. Warum?

[WebDev]

[nextflex]

Konntest du das Problem lösen? Schade, dass man hier keine Hilfe bekommt.

Ich habe ebenfalls wie in der Dokumentation beschrieben die Dateien angelegt und bekomme meinen Block nur im Admin angezeigt. Kann ihn dort problemlos im Template platzieren und mit Daten füllen.
Im Frontend wird mir nur der Name des Blocks ausgegeben. Habe das view-template unter views/storefront/block/cms-block-NAME.html.twig angelegt und admin-build ausgeführt.

[moschadr]

Antworten bekommt man schon. Es ist nur so, dass es täglich ettliche Anfragen gibt und die älteren dann schnell aus dem Blickfeld verschwinden. Ich denke, es ist also keine böse Absicht von den Usern sondern eher ein „nicht wahrnehmen“. Ich schau mir mal den code an und teile Dir/ teile Euch meine Ansicht dazu zeitnah mit. Einen Hinweis hätte ich aber schon: Wenn Du etwas für den storfront änderst, ist das build-command nicht admin-build sondern storefront-build. Beste Grüße

[nextflex]

Hallo @moschadr, danke für deine schnelle Antwort. Dein Hinweis mit dem „storefront-build“ ist ein guter Punkt, das habe ich nun ebenfalls nochmal versucht, führt aber leider zu keiner Veränderung.

Hier mal ein Blick auf meine Datei-Struktur und der Ausgabe:

Kannst du daran schon einen Fehler erkennen?

[ninja]

Wenn du ein eigenes CMS-Element erstellen willst dann brauchst du auf jeden Fall einen DataResolver und evtl. auch ein Struct Element. Es gibt sogar ein wenig Doku zum Dataresolver hier:

Add data to CMS element

Ohne DataResolver wird dein Frontend vermutlich immer „leer“ bleiben. Am besten ist es sich mal ein einfaches Element auszusuchen und sich dann anzuschauen wie Shopware das gelöst hat und das einfach nachzubauen

[moschadr]

ohne es grprüft zu haben … Dein twig in views->storfront->block extended kein bestehendes twig oder wid von keinem anderen twig eingebunden (es kein weiteres twig vorhanden) welches dieses twig verwendet. Woher soll der storefront wissen, dass er Dein product-festures-twig verwenden soll?

[moschadr]

https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block#storefront-representation

dort als Beispiel: {% sw_extends '@Storefront/storefront/block/cms-block-image-text.html.twig' %}

[nextflex]

Ein CMS Element brauch ich doch eigentlich gar nicht? Es geht mir ja um einen Block. Ich will ja nur Images und Text in einer bestimmten Struktur darstellen. Daher war mein Ansatz das „add-cms-block“ Beispiel aus der Doku mit dem image-text-reversed um weitere slots zu erweitern. Im Backend funktioniert das ja auch soweit. Oder geht das nicht?

Woher soll der storefront wissen, dass er Dein product-festures-twig verwenden soll?

Im Frontent zeigt er den String „product-features“ an, den Namen des Blocks. Er müsste doch also versuchen die Datei cms-block-product-features.html.twig zu laden? Soweit ich das im Sourcecode sehe wird der String ausgegeben, wenn er das Template nicht findet. Kann es vielleicht am build liegen?

Ich hab das auch mit {% sw_extends ‚@Storefront/storefront/block/cms-block-image-text.html.twig‘ %} schon versucht, das macht leider keinen Unterschied.

[nextflex]

Ich hab es jetzt in einer frisch aufgesetzten developer Instanz zum laufen gebracht. Scheinbar macht das ./bin/build-storefront.sh in der produktiv Instanz nicht das selbe wie das ./psh.phar storefront:build in der developer Instanz von Shopware. Die Dokumentation erweckt aber den Eindruck also würde es keine Rolle spielen, ob man das Plugin im Produktiv oder Developer Template entwickelt, da beide Wege beschrieben sind.