---
title: "Academy App"
canonical_url: "https://academy.laioutr.com/apps/sylius-anbinden"
locale: de
meta:
  "og:title": "Academy App"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Apps](https://academy.laioutr.com/bereiche/apps)

- [Commerce-Systeme](https://academy.laioutr.com/leitfaeden/commerce-systeme)

- [Sylius anbinden](https://academy.laioutr.com/apps/sylius-anbinden)

# Sylius anbinden

Die Sylius-App verbindet einen Sylius-Shop über die Shop API v2 mit Laioutr. Die App liest Produkte, Varianten, Kategorien und Menüs und verwaltet Artikel im Warenkorb.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Jeder Laioutr-Plan, dazu eine Sylius-Instanz ab 1.13</dd>

<dt>Rolle</dt>
<dd>Developer-Rolle in der Umgebung</dd>

<dt>Dauer</dt>
<dd>8 Min.</dd></dl>

### Voraussetzungen

- Erreichbare Sylius Shop API v2
- Kanal mit Sprache, Währung und Hostname
- Taxon als Wurzel des Menüs

Zuletzt geprüft am 15. Oktober 2026

Bindet Sylius über die Shop API v2 an: Produkte, Varianten, Kategorien aus Taxons, Menü und Breadcrumbs lesen, Artikel im Warenkorb hinzufügen, ändern und entfernen. Checkout und Kundenlogin gehören nicht zum Umfang.

[Entwicklerdokumentation](https://docs.laioutr.com/apps/app-docs/sylius)

## So funktioniert es

1. Kanal, Katalog und Slugs prüfenWo: Sylius Admin · Rolle: Shop-Admin · Dauer: 15 min
2. Taxon als Menü-Wurzel anlegenWo: Sylius Admin · Rolle: Shop-Admin · Dauer: 5 min
3. Bildfilter in der Sylius-Konfiguration definierenWo: Sylius-Konfiguration · Rolle: Sylius-Entwickler · Dauer: 10 min
4. App im Katalog installierenWo: Laioutr Cockpit, Apps · Rolle: Developer · Dauer: 2 min
5. Werte unter Configuration eintragen, testen und speichernWo: Laioutr Cockpit, Configuration · Rolle: Developer · Dauer: 5 min
6. Umgebung deployen und Daten in Studio prüfenWo: Laioutr Cockpit und Studio · Rolle: Developer, Content Manager · Dauer: 10 min

## Konfiguration

| Feld | Zweck | Woher | Pflicht | Pro Environment |
| --- | --- | --- | --- | --- |
| `apiURL` | Basis-URL der Sylius Shop API v2. | Adresse der Sylius-Instanz mit Pfad /api/v2/shop. | Ja | Ja |
| `defaultLocale` | Ersatzsprache, wenn keine Sprache aus dem Markt kommt. Standard en\_US. | Sprachcode aus dem Sylius-Kanal. | Nein | Ja |
| `imageFilter` | Bildfilter, den Sylius vor der Auslieferung anwendet. Standard sylius\_large. | Name eines in Sylius definierten LiipImagine-Filters. | Nein | Ja |
| `itemsPerPage` | Standardanzahl der Produkte je Seite in Listen. Standard 20. | Projektentscheidung. | Nein | Ja |

## Häufige Fehler

<dl>

<dt>Das Menü bleibt leer.</dt>
<dd>**Ursache:** Der Menü-Alias entspricht nicht dem Code des Wurzel-Taxons.</dd>
<dd>**Lösung:** Den Taxon-Code, zum Beispiel MENU_CATEGORY, als Alias setzen.</dd>

<dt>Produktbilder fehlen oder haben die falsche Größe.</dt>
<dd>**Ursache:** Der Bildfilter aus imageFilter ist in Sylius nicht definiert.</dd>
<dd>**Lösung:** Filter in Sylius definieren oder den Standard sylius_large nutzen.</dd>

<dt>Produkt- oder Kategorieseiten werden nicht gefunden.</dt>
<dd>**Ursache:** Slugs sind für die Sprache nicht übersetzt oder Produkte sind dem Kanal nicht zugeordnet.</dd>
<dd>**Lösung:** Slugs übersetzen und Produkte dem Kanal zuordnen.</dd>

<dt>Neue Zugangsdaten zeigen keine Wirkung auf der Storefront.</dt>
<dd>**Ursache:** Gespeicherte Einstellungen gelten erst ab dem nächsten Deployment der Umgebung.</dd>
<dd>**Lösung:** Die Umgebung mit Deploy neu bauen.</dd></dl>

Sylius ist eine Open-Source-Commerce-Plattform auf Basis von Symfony. Die Sylius-App spricht mit der **Shop API v2** und übersetzt deren Daten über Orchestr in das einheitliche Datenmodell von Laioutr. Gelesen werden Produkte und Varianten für Produktliste und Produktdetailseite, Kategorien aus den Taxons, das Menü und Breadcrumbs. Schreibend verwaltet die App die Artikel im Warenkorb: hinzufügen, Menge ändern, entfernen.

Der Umfang ist bewusst schlank. Checkout, Kundenlogin, Adressen, Zahlung und Versand gehören nicht zur App, der Checkout wird im Projekt separat gelöst. Die App ruft nur die Shop API auf, nie die Admin API.

Auf Sylius-Seite braucht es einen Kanal mit Sprache, Währung und Hostname, Produkte mit Taxons, Preisen, Bildern und übersetzten Slugs, ein Taxon als Wurzel des Menüs und einen Bildfilter, der fertige Bild-URLs liefert.

## Schritt für Schritt

1. 1 ### Schritt 1: Kanal und Katalog prüfen

   Im Sylius Admin prüfen, dass der Kanal Sprache, Währung und Hostname hat und die Produkte mit Taxons, Preisen, Bildern und übersetzten Slugs dem Kanal zugeordnet sind.
2. 2 ### Schritt 2: Menü-Wurzel anlegen

   Ein Taxon als Wurzel des Menüs anlegen, zum Beispiel mit dem Code `MENU_CATEGORY`. Dieser Code dient später als Alias des Menüs.
3. 3 ### Schritt 3: App installieren

   Im Cockpit unter **Apps** im Reiter **Ecommerce** die App Sylius mit **Install** zum Projekt hinzufügen.
4. 4 ### Schritt 4: Werte eintragen und testen

   Im Umgebungsmenü **Configuration** öffnen, die Werte eintragen, mit **Test connection** prüfen und mit **Save settings** speichern.
5. 5 ### Schritt 5: Deployen und prüfen

   Die Umgebung mit **Deploy** neu bauen und danach in Studio prüfen, ob Produkte und Kategorien in der Vorschau erscheinen.

## Ergebnis prüfen

Der Verbindungstest meldet Erfolg, das Menü zeigt die Kategorien unter dem Wurzel-Taxon, die Produktdetailseite in Studio zeigt Varianten und Bilder, und ein Testartikel lässt sich in den Warenkorb legen.

## Häufige Fragen

Gibt es einen Checkout mit Sylius?

Nicht in dieser App. Die App verwaltet nur die Artikel im Warenkorb, der Checkout wird im Projekt separat gelöst.

Woher kommt das Menü?

Aus dem Taxon-Baum unter dem Wurzel-Taxon. Dessen Code, zum Beispiel `MENU_CATEGORY`, wird als Alias des Menüs verwendet.

Wie groß sind die Produktbilder?

Sylius liefert die Bilder über einen Bildfilter, standardmäßig `sylius_large`. Über das Feld `imageFilter` lässt sich ein anderer Filter wählen, der in Sylius definiert sein muss.

## Passend dazu

- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.

  Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Zugangsdaten eintragen und Verbindung testen](https://academy.laioutr.com/artikel/zugangsdaten-eintragen-und-verbindung-testen)5 Min.

  Zugangsdaten einer App werden je Umgebung unter Configuration eingetragen, mit Test connection geprüft und mit Save settings gespeichert. Wirksam werden sie mit dem nächsten Deployment.
- [Echte Daten in Studio prüfen](https://academy.laioutr.com/artikel/echte-daten-in-studio-pruefen)5 Min.

  Studio zeigt in der Vorschau echte Daten aus den angebundenen Apps. Auf dynamischen Seiten wie der Produktdetailseite wählt das Feld Preview Data, welches Produkt die Vorschau zeigt.
- [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.

  Header Shop, Mega Menu oder Menu Side by Side, Top Bar und Footer bilden die Navigation einer Storefront und werden meist als globale Sections gepflegt. In Studio werden Menüpunkte, Suche, Service-Links, Kontaktangaben und Footer-Spalten einmal eingerichtet und je Sprache angepasst.
- [Warenkorb in der Storefront einrichten und prüfen](https://academy.laioutr.com/artikel/warenkorb-im-storefront-pruefen-und-einrichten)5 Min.

  Der Warenkorb öffnet sich als seitliches Panel (Cart Sheet) mit Positionen, Gutscheinfeld, Fortschritt bis zum Gratisversand und Summen; zusätzlich gibt es eine eigene Warenkorbseite. Preise, Rabatte, Versandkosten und der Weg zur Kasse kommen vom Commerce-Backend.

## [Commerce-Systeme](https://academy.laioutr.com/leitfaeden/commerce-systeme)

In diesem Leitfaden suchen

1. [Shopify anbinden](https://academy.laioutr.com/apps/shopify-anbinden)10 Min.
2. [Shopware mit Checkout-Plugin anbinden](https://academy.laioutr.com/apps/shopware-mit-checkout-plugin-anbinden)12 Min.
3. [VTEX anbinden](https://academy.laioutr.com/apps/vtex-anbinden)8 Min.
4. [Sylius anbinden](https://academy.laioutr.com/apps/sylius-anbinden)8 Min.
5. [JTL-Wawi anbinden](https://academy.laioutr.com/apps/jtl-wawi-anbinden)8 Min.
6. [B2B Sellers für Shopware anbinden](https://academy.laioutr.com/apps/b2b-sellers-fuer-shopware-anbinden)8 Min.
7. [Magento 2 anbinden](https://academy.laioutr.com/apps/magento-2-anbinden)10 Min. In Vorbereitung

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/apps/sylius-anbinden#webpage",
      "name": "Academy App",
      "url": "https://academy.laioutr.com/apps/sylius-anbinden",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/apps/sylius-anbinden#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/apps/sylius-anbinden#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/apps/sylius-anbinden#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/apps/sylius-anbinden#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/apps/sylius-anbinden"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/apps/sylius-anbinden#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Apps",
          "item": "https://academy.laioutr.com/bereiche/apps",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Commerce-Systeme",
          "item": "https://academy.laioutr.com/leitfaeden/commerce-systeme",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Sylius anbinden",
          "item": "https://academy.laioutr.com/apps/sylius-anbinden",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/apps/sylius-anbinden#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Gibt es einen Checkout mit Sylius?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Nicht in dieser App. Die App verwaltet nur die Artikel im Warenkorb, der Checkout wird im Projekt separat gelöst.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/apps/sylius-anbinden#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Woher kommt das Menü?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Aus dem Taxon-Baum unter dem Wurzel-Taxon. Dessen Code, zum Beispiel <code>MENU_CATEGORY</code>, wird als Alias des Menüs verwendet.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/apps/sylius-anbinden#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie groß sind die Produktbilder?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Sylius liefert die Bilder über einen Bildfilter, standardmäßig <code>sylius_large</code>. Über das Feld <code>imageFilter</code> lässt sich ein anderer Filter wählen, der in Sylius definiert sein muss.</p>"
      }
    }
  ]
}
```