So installieren Sie den 3D-Viewer von Complete in VTEX

Bevor Sie beginnen

Öffnen Sie in Complete Dashboard „Meine Produkte“, wählen Sie das Stück und kopieren Sie den Einbettungscode:

<iframe src="https://www.completemagazine.com.br/ar/PRODUKTCODE" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

Der Teil nach /ar/ ist der Code dieses Stücks. Über ihn erkennt der Viewer das Produkt.

Weg 1: in der Produktbeschreibung

1. 01

   Produkt im Katalog öffnen

   Wechseln Sie in der VTEX-Verwaltung in den Katalog und öffnen Sie das Produkt, das 3D erhalten soll.

2. 02

   Code in die Beschreibung einfügen

   Das Beschreibungsfeld des Produkts akzeptiert HTML. Fügen Sie den Einbettungscode an der Stelle ein, an der der Viewer erscheinen soll.

3. 03

   Speichern und im Shop prüfen

   Speichern Sie, warten Sie, bis der Katalog aktualisiert ist, und öffnen Sie die Produktseite am Computer und auf dem Smartphone.

Nicht jedes VTEX-Theme gibt das HTML der Beschreibung so aus, wie es eingegeben wurde. Manche Themes leiten die Beschreibung durch einen Filter, der iframes entfernt, und der Viewer erscheint dann einfach nicht, ohne Fehlermeldung. Die Prüfung im Shop nach dem Speichern ist deshalb kein optionaler Schritt.

Weg 2: ein Block im Theme

Für das ganze Sortiment ist es der verlässlichere Weg, dass das Theme den Code des Stücks aus einem Feld am Produkt liest und den Viewer nahe der Galerie aufbaut. In VTEX geschieht das in der Regel so:

1. 01

   Produktspezifikation anlegen

   Legen Sie im Katalog ein Spezifikationsfeld vom Typ Text an, zum Beispiel „Complete 3D“, in der Spezifikationsgruppe der Kategorie, die die Stücke erhalten soll.

2. 02

   In jedem Produkt ausfüllen

   Tragen Sie in das Feld nur den Code des Stücks ein, also den Teil nach /ar/ im Einbettungscode.

3. 03

   Block bei der Theme-Betreuung anfragen

   Wer den Shop entwickelt, legt auf der Produktseite einen Block an, der diese Spezifikation ausliest und den iframe mit derselben Adresse, derselben Breite und denselben Berechtigungen aufbaut wie der Code aus dem Dashboard. Ist das Feld leer, erscheint der Block nicht.

4. 04

   Vor der Veröffentlichung testen

   Getestet wird in einer Entwicklungsumgebung des Themes, mit einem Produkt mit ausgefülltem Feld und einem ohne, bevor die Änderung in den Live-Shop geht.

Was dabei häufig vergessen wird, ist das Attribut allow des iframes. Ohne „xr-spatial-tracking; fullscreen; camera“ lässt sich das Stück auf der Seite drehen, aber das Smartphone öffnet keine Augmented Reality. Geben Sie der Person, die den Block entwickelt, deshalb den vollständigen Code aus dem Dashboard und nicht nur die Adresse.

Wenn etwas nicht erscheint

Erscheint der Viewer über die Beschreibung nicht, liegt es sehr wahrscheinlich am HTML-Filter des Themes, und der Block wird zum Weg der Wahl. Bleibt er leer, prüfen Sie, ob der Code des Stücks vollständig ist. Lässt sich das Stück drehen, aber Augmented Reality öffnet sich nicht, prüfen Sie die Berechtigungen des iframes und testen Sie direkt auf dem Smartphone, außerhalb des Editors.