Theme Development (Preview Image, Logos, Farben vordefinieren)

Shopware 6 (German) Themes & Design
1

Hi Shopware Community,

ich bin gerade dabei ein neues Theme für Shopware 6 zu erstellen welches ich zwischen verschiedenen DEV / TEST / PROD Umgebungen verteilen möchte ohne händisch viele Anpassungen vornehmen zu müssen. Ich würde gerne das Preview Image direkt im Code einbauen und Dinge wie Firmenlogo gleich mit übernehmen wie man Sie sonst jedes mal unter den Theme Einstellungen erneut hochladen muss.

Zwecks Preview Image hatte ich folgendes gefunden was ich in die theme.json eintragen kann:

"previewMedia": ""app/storefront/src/assets/my-theme-name-preview.jpg"
dazu hab ich eben ein Bild unter app/storefront/src/assets/my-theme-name-preview.jpg abgespeichert aber es wird in der Vorschau nicht angezeigt.

Des Weiteren würde ich gerne die Theme Voreinstellungen mit den Logos vorausfüllen, sprich diese direkt ins Theme integrieren (welche derzeit noch das Shopware + DemoShop Logo beinhaltet)

medien
medien1016×898 25.9 KB

Die Theme Farben kann man soweit ich weiß unter config vordefinieren:

"config": {
      "fields": {
        "sw-color-brand-primary": {
          "value": "#3395d1"
        },
        "sw-color-brand-secondary": {
          "value": "#ff9e00"
        },
        "sw-color-buy-button": {
          "value": "#dfe4e9"
        }
      }

Gruß sh0p

2

Hallo sh0p,

in der theme.json unter /vendor/shopware/storefront/Resources gibt es folgenden Abschnitt:

"sw-logo-desktop": {
        "label": {
          "en-GB": "Desktop",
          "de-DE": "Desktop"
        },
        "helpText": {
          "en-GB": "Displayed on viewport sizes above 991px and as a fallback on smaller viewports, if no other logo is set.",
          "de-DE": "Wird bei Ansichten über 991px angezeigt und als Alternative bei kleineren Auflösungen, für die kein anderes Logo eingestellt ist."
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 100,
        "fullWidth": true
      },
      "sw-logo-tablet": {
        "label": {
          "en-GB": "Tablet",
          "de-DE": "Tablet"
        },
        "helpText": {
          "en-GB": "Displayed between a viewport of 767px to 991px",
          "de-DE": "Wird zwischen einem viewport von 767px bis 991px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 200,
        "fullWidth": true
      },
      "sw-logo-mobile": {
        "label": {
          "en-GB": "Mobile",
          "de-DE": "Mobil"
        },
        "helpText": {
          "en-GB": "Displayed up to a viewport of 767px",
          "de-DE": "Wird bis zu einem Viewport von 767px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 300,
        "fullWidth": true
      },
      "sw-logo-share": {
        "label": {
          "en-GB": "App & share icon",
          "de-DE": "App- & Share-Icon"
        },
        "type": "media",
        "value": "",
        "editable": true,
        "block": "media",
        "order": 400
      },
      "sw-logo-favicon": {
        "label": {
          "en-GB": "Favicon",
          "de-DE": "Favicon"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/favicon.png",
        "editable": true,
        "block": "media",
        "order": 500
      }

Wenn du das in deine Theme.json einfügst und die Links zu den Logos anpasst, sollten sie immer direkt übernommen werden wenn.

Viele Grüße
Tom

2 „Gefällt mir“
4

Hi Tom,

vielen Dank für deine Hilfe.
Ich hab meine theme.json soweit angepasst:
"value": "app/storefront/dist/assets/logo/test-logo.png"

und die Dateien unter mein Plugin mit dem Namen „Test“ hochgeladen:
custom/plugins/Test/src/Resources/app/storefront/dist/assets

aber er scheint die Bilder nicht zu laden, da es so aussieht:

images
images959×884 18.6 KB

Auch wenn ich z.B. den Text bei Desktop von
"de-DE": "Wird bei Ansichten über 991px angezeigt und als Alternative bei kleineren Auflösungen, für die kein anderes Logo eingestellt ist."

zu
"de-DE": "Test"

ändere zeigt er mir die Änderung nicht an.

Hab auch folgende Befehle ausgeführt und den lokalen Browser Cache geleert aber hilft leider alles nicht weiter.

bin/console theme:compile
bin/console cache:clear

Update v.1:
Also wie ich es zum laufen bekomme ist folgender Weg:
Datei manuell hochladen unter „public/media/test/logo“ und dann die theme.json anpassen: "value": "/media/test/logo/test-logo.png".

Allerdings find ich das nicht schön da ich gerne die Logos im plugin Ordner gehabt hätte und erwartet hätte das ich die assets beim kompilieren entsprechend kopiert werden.

Hier müsste es doch einen eleganteren Weg geben, oder?

Und ich sehe gerade auch das es im Backend weiterhin nicht angezeigt wird sondern auf „/bundles/administration/static/img/media-preview/icons-multicolor-file-thumbnail-broken.svg“ verweist (also dieses rote x wie oben im Bild zu sehen ist).

Gruß sh0p

5

Hallo sh0p,

in deinem ersten Kommentar hast du den Abschnitt „sw-logo-desktop“ direkt nach den Assets eingefügt:

"asset": [
    "@Storefront",
    "app/storefront/src/assets"
  ],
  "sw-logo-desktop": {...

Du kannst mal ausprobieren wie in der theme.json im Parent Theme zuerst noch config und fields mit anzugeben also so:

"asset": [
    "@Storefront",
    "app/storefront/src/assets"
  ],
"config": {
    "fields": {
      "sw-logo-desktop": {
        "label": {
          "en-GB": "Desktop",
          "de-DE": "Desktop"
        },
        "helpText": {
          "en-GB": "Displayed on viewport sizes above 991px and as a fallback on smaller viewports, if no other logo is set.",
          "de-DE": "Wird bei Ansichten über 991px angezeigt und als Alternative bei kleineren Auflösungen, für die kein anderes Logo eingestellt ist."
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 100,
        "fullWidth": true
      },
      "sw-logo-tablet": {
        "label": {
          "en-GB": "Tablet",
          "de-DE": "Tablet"
        },
        "helpText": {
          "en-GB": "Displayed between a viewport of 767px to 991px",
          "de-DE": "Wird zwischen einem viewport von 767px bis 991px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 200,
        "fullWidth": true
      },
      "sw-logo-mobile": {
        "label": {
          "en-GB": "Mobile",
          "de-DE": "Mobil"
        },
        "helpText": {
          "en-GB": "Displayed up to a viewport of 767px",
          "de-DE": "Wird bis zu einem Viewport von 767px angezeigt"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/demostore-logo.png",
        "editable": true,
        "block": "media",
        "order": 300,
        "fullWidth": true
      },
      "sw-logo-share": {
        "label": {
          "en-GB": "App & share icon",
          "de-DE": "App- & Share-Icon"
        },
        "type": "media",
        "value": "",
        "editable": true,
        "block": "media",
        "order": 400
      },
      "sw-logo-favicon": {
        "label": {
          "en-GB": "Favicon",
          "de-DE": "Favicon"
        },
        "type": "media",
        "value": "app/storefront/dist/assets/logo/favicon.png",
        "editable": true,
        "block": "media",
        "order": 500
      }
    }
  }

Ich kann das gerade leider nicht selber testen, aber so sollte es eigentlich funktionieren. Oder du kopierst dir mal die komplette theme.json aus dem Parent Theme unter: /vendor/shopware/storefront/Resources und die Anpassungen so wie in der Theme.json in deinem Theme und löscht alles raus was du nicht benötigst.

Viele Grüße
Tom