English Version

Zurück zur Übersicht

CDN Product Images: Installation

Diese Dokumentation bezieht sich immer auf die aktuellste veroeffentlichte Version.

Live Demo: Teste dieses und weitere Plugins live — ohne Installation, ohne Risiko: demo.markus-michalski.net

Composer

Private Repositories werden über Packeton verwaltet (https://packeton.markus-michalski.net). Zugangsdaten nach Lizenzkauf/Freigabe.

{ "repositories": [{ "type": "composer", "url": "https://packeton.markus-michalski.net" }] }

composer require mmd/sylius-cdn-product-images-plugin

Nach dem composer require:

1. Bundle registrieren in config/bundles.php:

   Mmd\SyliusCdnProductImagesPlugin\MmdSyliusCdnProductImagesPlugin::class => ['all' => true],
   

2. Admin-Routen importieren - erst dadurch existiert die Route, auf die der Admin-Sidebar-Eintrag "CDN Integration" zeigt:

   # config/routes/mmd_sylius_cdn_product_images.yaml
   mmd_sylius_cdn_product_images:
       resource: '@MmdSyliusCdnProductImagesPlugin/config/routes/admin.yaml'
   

3. Setup-Command ausführen:

   bin/console mmd:cdn-product-images:setup
   

   Der Command führt ausschließlich die noch offenen Migrationen dieses Plugins aus - nicht die der App oder anderer Plugins - und ist idempotent, also auch nach jedem composer update gefahrlos erneut ausführbar. Er prüft außerdem, ob die Routen aus Schritt 2 importiert sind, und gibt sonst den passenden Snippet aus, schreibt dabei aber nie selbst in config/. Baut er auf noch offenen Sylius-Core-Migrationen auf, bricht er ab und verlangt vorher doctrine:migrations:migrate. Interaktiv fragt er um Bestätigung; in Skripten --no-interaction ergänzen. doctrine:migrations:migrate bleibt als Alternative weiterhin nutzbar.

4. Assets installieren, falls noch nicht geschehen:

   bin/console assets:install
   

Kein config/packages/*.yaml-Eintrag nötig - siehe Konfiguration.

Produktbilder: Feld sichtbar machen

Taxon-Bilder funktionieren direkt nach der Installation (das Plugin liefert dafür einen eigenen Twig Hook). Bei Produktbildern ist ein zusätzlicher Schritt nötig, weil Sylius' Produktbild-Formular-Template keinen Hook-Punkt und keinen form_rest()-Fallback hat - das cdnUrl-Feld existiert auf dem Formular-Objekt zwar in jedem Fall, wird aber ohne diesen Override von keinem Template gerendert:

{# templates/bundles/SyliusAdminBundle/product/form/sections/media/images.html.twig #}
{# Vollstaendige Kopie von @SyliusAdmin/product/form/sections/media/images.html.twig,
   mit einem zusaetzlichen Block fuer image_form.cdnUrl. Bei jedem Sylius-Minor-Update
   gegen das Vendor-Original abgleichen - Symfonys Template-Override ersetzt die
   gesamte Datei, es wird nicht gemerged. #}
{% set images = hookable_metadata.context.form.images %}
{% set product = hookable_metadata.context.product %}

<div class="row" {{ sylius_test_html_attribute('images') }} {{ sylius_test_html_attribute('image-subforms') }}>
    {% for image_form in images %}
        <div class="col-12 col-md-6 row mb-4"
            {{ sylius_test_html_attribute('image-subform')}}
            {{ sylius_test_html_attribute('type', image_form.type.vars.value) }}
            {{ sylius_test_html_attribute('image-url', image_form.vars.value.path ? image_form.vars.value.path|imagine_filter('sylius_small') : null) }}
        >
            <div class="col-auto">
                <div>
                    {% if image_form.vars.value.path is not null %}
                        <span class="avatar avatar-xl" style="background-image: url('{{ image_form.vars.value.path|imagine_filter('sylius_small') }}')"></span>
                    {% else %}
                        <span class="avatar avatar-xl"></span>
                    {% endif %}
                </div>
                <div class="mt-3 d-flex items-center">
                    {{ form_widget(image_form.vars.button_delete, { label: 'sylius.ui.delete'|trans, attr: { class: 'btn btn-outline-danger w-100','data-test-image-delete': '' }}) }}
                </div>
            </div>
            <div class="col">
                <div class="mb-3">
                    {{ form_row(image_form.type, sylius_test_form_attribute('type')) }}
                </div>
                <div class="mb-3">
                    {% if product.id is not null and 0 != product.variants|length and not product.simple %}
                        {{ form_row(image_form.productVariants, sylius_test_form_attribute('product-variant', image_form.productVariants.vars.value|join(','))) }}
                    {% endif %}
                </div>
                <div class="mb-3">
                    {{ form_row(image_form.file, sylius_test_form_attribute('file')) }}
                </div>
                {% if image_form.cdnUrl is defined %}
                    <div class="mb-3">
                        {{ form_row(image_form.cdnUrl) }}
                    </div>
                {% endif %}
                {% if image_form.position is defined %}
                    <div class="mb-3">
                        {{ form_row(image_form.position, sylius_test_form_attribute('position')) }}
                    </div>
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>

Datei in der konsumierenden Anwendung unter templates/bundles/SyliusAdminBundle/product/form/sections/media/images.html.twig ablegen (Symfonys klassischer Bundle-Template-Override-Pfad) - ein Plugin kann diesen Override nicht aus seinem eigenen Paket heraus mitbringen, nur die App selbst kann das Vendor-Template überschreiben.

Eine Lösung direkt im Plugin (ein eigener Twig Hook, wie bei Taxon-Bildern bereits vorhanden) ist in Arbeit - sobald Sylius dieses Template hookbar macht, entfällt der manuelle Override.

Update

composer update mmd/sylius-cdn-product-images-plugin
bin/console mmd:cdn-product-images:setup
bin/console cache:clear

Ältere Installationen konfigurierten cdn_domain/signing_api_url/signing_api_token/cdn_scheme noch über Umgebungsvariablen und config/packages/mmd_sylius_cdn_product_images.yaml. Diese Datei muss nach einem Update gelöscht werden - übrig gebliebene Schlüssel lassen den Container-Build sonst mit einem Fehler abbrechen statt leise zu wirken. Die vier Werte danach einmalig über Sylius Admin eintragen, siehe Konfiguration.

Deinstallation

1. Template-Override und Twig Hooks aus der eigenen App entfernen (siehe oben)
2. Migration bei noch registriertem Bundle zurückrollen:

   bin/console doctrine:migrations:execute --down "Mmd\SyliusCdnProductImagesPlugin\Migrations\Version20260911140000"
   

3. Routen-Import (config/routes/mmd_sylius_cdn_product_images.yaml) und Bundle-Eintrag in config/bundles.php entfernen
4. Paket entfernen:

   composer remove mmd/sylius-cdn-product-images-plugin