Uploads & Deep Links

Mit dem Datentyp Dateiupload laden deine Kunden im Konfigurator eigene Dateien hoch – etwa eine Druckvorlage, ein Logo oder eine Skizze. Mit Deep Links speicherst du eine Konfiguration und öffnest sie später wieder, zum Beispiel aus einer E-Mail heraus. Dieser Artikel zeigt, wie du beides einrichtest, wohin hochgeladene Dateien gehen und wo sich die beiden Frontend-Engines unterscheiden.

Dateiupload anlegen

1. Lege im Strukturbaum ein neues Merkmal an oder wähle ein bestehendes.
2. Stelle unter Grundeinstellungen die Datenkategorie auf Frontend und den Datentyp auf Dateiupload.
3. Trage im Abschnitt Upload-Einstellungen die Grenzen ein (siehe unten).
4. Speichere und veröffentliche die Komponente.

Den Datentyp Dateiupload gibt es nur im Tarif Ultimate. Mehr zu Datenkategorien und Datentypen: Merkmale & Werte anlegen.

Upload-Einstellungen

Unter Verhalten stellst du wie bei jedem Merkmal Pflichtfeld und Sichtbarkeit ein. Über Informationen gibst du dem Kunden einen Hinweis mit, etwa „Bitte als PDF mit 3 mm Beschnitt“.

Was der Kunde sieht

Der Kunde zieht Dateien in das Feld oder wählt sie per Klick aus. Hochgeladene Dateien erscheinen im Feld, und der Kunde kann jede einzeln wieder entfernen.

Ist eine Datei zu groß, hat sie eine nicht erlaubte Endung oder sind es zu viele Dateien, erscheint eine Meldung, und die Datei wird nicht hochgeladen.

Wohin die Dateien gehen

• Beim Hochladen: Die Datei wird sofort hochgeladen und bei configento.app gespeichert – nicht erst beim Klick auf In den Warenkorb.
• Magento 2: Mit der Einstellung Activate Asset Sync? lädt die Erweiterung die hochgeladenen Dateien regelmäßig in deine Magento-Installation. Siehe Magento-Plugin installieren.
• Download-Link: In V3 bekommt jede Datei eine eigene Download-Adresse bei configento.app. Sie öffnet die Datei immer als Download.
• Aktions-Button: Eine E-Mail oder ein PDF enthält keine Dateien als Anhang. Die Konfigurationstabelle ({{configuration_table}}) verlinkt in V3 jede hochgeladene Datei zum Download. Mit dem Platzhalter {{characteristic:NAME.value}} übernimmst du die Dateinamen in den Text. Siehe Der Aktions-Button.

Mit Legacy muss in Shopware 6 und Magento 2 die Einstellung Dropzone-Plugin laden eingeschaltet sein, sonst funktioniert der Upload im Shop nicht.

Unterschiede zwischen Legacy und V3

Mehr zu den Engines: Frontend-Engine: Legacy oder V3.

Konfiguration wieder öffnen

Bearbeiten aus dem Warenkorb

• Magento 2: Über Bearbeiten im Warenkorb oder Wunschzettel öffnet sich der Konfigurator wieder mit der gespeicherten Auswahl.
• Shopify: Mit der Warenkorb-Erweiterung Configento Cart steht an jeder konfigurierten Position der Link Bearbeiten. Er führt zur Produktseite mit der bisherigen Auswahl; nach dem erneuten Hinzufügen ersetzt die neue Konfiguration die alte Position. Siehe Shopify-Plugin installieren.

Deep Link

Ein Deep Link ist die Adresse der Produktseite mit dem Zusatz ?dl= und der Kennung einer gespeicherten Konfiguration, zum Beispiel:

https://dein-shop.de/carport.html?dl=KENNUNG

Öffnet jemand diese Adresse, lädt der Konfigurator mit der gespeicherten Auswahl. Ist die Kennung unbekannt, startet der Konfigurator ganz normal ohne Auswahl.

Deep Link anlegen: Hänge an die Adresse der Produktseite ?tb=1 an. Oben auf der Seite erscheint eine Leiste mit dem Button Deep Link anlegen (Legacy) bzw. Deep Link erzeugen (V3). Stelle die Konfiguration zusammen und klicke auf den Button:

• Legacy zeigt die fertige Adresse in einem Hinweisfenster.
• V3 speichert die Konfiguration, zeigt die Adresse in einem Feld in der Leiste und kopiert sie in die Zwischenablage. Das funktioniert im Shop – mit Magento 2, Shopify und dem HTML-Snippet –, nicht in der Vorschau im Admin.

Die Leiste ist ein Werkzeug für dich; ohne ?tb=1 sehen deine Kunden sie nicht.

Deep Link per JavaScript (V3): Wer die Adresse selbst erzeugen will, etwa für einen eigenen „Teilen“-Button, nutzt die JavaScript-Schnittstelle: storeAsset() speichert die aktuelle Konfiguration und liefert ihre Kennung als id; die hängst du als ?dl= an die Adresse. Mehr zur Schnittstelle: JavaScript-Schnittstelle (V3).

<script>
  Configento.ready.then(async function () {
      var gespeichert = await Configento.first().storeAsset();
      var link = location.origin + location.pathname + '?dl=' + gespeichert.id;
      console.log('Deep Link:', link);
  });
</script>

Nach dem Umstellen auf V3: Deep Links, die du mit Legacy angelegt hast (kurze Kennung aus Ziffern und Buchstaben), öffnet V3 weiterhin – die gespeicherte Konfiguration kommt dann aus der klassischen Cloud. Links aus V3 haben eine lange Kennung mit Bindestrichen; Legacy kann sie nicht öffnen. Stellst du eine Komponente von V3 zurück auf Legacy, lege die Links also neu an.

Fehlersuche

1. Der Upload bricht mit „Server hat den Upload abgelehnt (HTTP 413)“ ab – die Datei ist größer als 25 MB. Bitte den Kunden um eine kleinere Datei.
2. Im Shop erscheint kein Upload-Feld – die Komponente läuft mit Legacy, und in Shopware 6 oder Magento 2 ist Dropzone-Plugin laden ausgeschaltet. Schalte die Einstellung ein und leere den Cache.
3. Eine Datei wird abgelehnt – prüfe Erlaubte Dateitypen/-endungen und Max. Dateigröße (MB). Die Endung muss genau passen: .jpeg ist nicht .jpg.
4. Die Dateien fehlen in der E-Mail des Aktions-Buttons – Dateien werden nicht angehängt. Füge {{configuration_table}} ein, dann stehen die Dateien als Download-Links in der E-Mail, oder übernimm die Namen mit {{characteristic:NAME.value}}.
5. Ein Deep Link öffnet einen leeren Konfigurator – die Kennung ist falsch abgeschrieben, die Konfiguration gehört zu einer anderen Komponente, oder ein V3-Link wird mit Legacy geöffnet. Lege den Link auf der richtigen Produktseite neu an.
6. Mit ?tb=1 erscheint keine Leiste – in der Vorschau im Admin gibt es sie nicht; öffne die Produktseite im Shop. Erscheint sie auch dort nicht, lädt die Seite keinen Konfigurator.

Nächste Schritte

• Frontend-Merkmale: Statisches Feld & Diagramm
• Der Aktions-Button
• Frontend-Engine: Legacy oder V3
• Merkmale & Werte anlegen