Wie erstellt und aktualisiert man benutzerdefinierte Widgets in Bigcommerce?

Viele Leute denken, dass es eine ziemliche Herausforderung ist, benutzerdefinierte Widgets in Bigcommerce zu erstellen und zu aktualisieren. Das ist richtig, aber es gibt tonnenweise Möglichkeiten, dies sehr einfach zu tun, wie zum Beispiel die Epic Page Builder Widget app, Postman und das Widget Builder Tool.

Um benutzerdefinierte Widgets zu erstellen und zu aktualisieren, bevorzugen wir die kostenlosen Tools Postman und Widget Builder anstelle der Epic Page Builder Widget App, die 50 $ kostet, um die Funktionen zum Erstellen und Aktualisieren benutzerdefinierter Widgets zu erhalten.

Um benutzerdefinierte Widgets in bigcommerce zu erstellen und zu aktualisieren, lesen Sie diese Informationen

Wie Sie vielleicht wissen, können Sie benutzerdefinierte Widgets über APIs mit Anwendungen wie Postman oder Insomnia erstellen oder aktualisieren. Dieser Ansatz kann jedoch komplex sein, da er die Kombination von Schema und HTML in einer einzigen Datei erfordert. Außerdem müssen Sie verschiedene Anfragen für die Aktualisierung und Erstellung von Widgets erstellen.

Der Widget-Builder bietet eine lokale Vorschaufunktion für Ihre Widgets. Um Ihre Arbeit zu vereinfachen, können Sie einen Widget-Builder verwenden, der es Ihnen ermöglicht, das Schema und den HTML-Code eines Widgets in einer separaten Datei zu speichern, was die Verwaltung erleichtert. Außerdem bietet der Widget-Builder eine bequeme Möglichkeit, Ihre Anpassungen in der Vorschau anzuzeigen. Es ist jedoch wichtig zu beachten, dass diese Methode nur die Erstellung neuer Widgets ermöglicht und keine Möglichkeit bietet, bestehende Widgets zu bearbeiten, wenn wir die UUID des Widgets nicht kennen.

Um diese Einschränkung zu umgehen, besteht ein alternativer Ansatz darin, Postman zu verwenden, um die Daten der vorhandenen Widgets aus dem Speicher abzurufen und sie dem Widget Builder hinzuzufügen. In diesem Fall benötigen Sie die UUID des Widgets, das Sie aktualisieren möchten. Mit dieser Methode können Sie die Anforderungen an die Aktualisierung vorhandener Widgets erfüllen und gleichzeitig den Komfort des Widget Builders nutzen.

Schauen wir uns an, wie das geht:

Schauen wir uns zunächst die Voraussetzungen an, die Sie benötigen, bevor Sie beginnen können:

• Postman
• widget builder installed
• API Credential

Wenn Sie keine API-Zugangsdaten oder keinen Widget-Builder installiert haben, folgen Sie den angegebenen Schritten, um diese Mängel zu beheben:

Führen Sie die folgenden Schritte aus, um die API-Anmeldeinformationen zu erhalten

1. Loggen Sie sich in Ihren Shop mit dem Besitzer-Konto ein und gehen Sie dann zu Einstellungen und scrollen Sie nach unten, um den Abschnitt API zu sehen, und klicken Sie dann auf Store-level API accounts.

2. Klicken Sie auf die Schaltfläche + API-Konto erstellen und vergewissern Sie sich, dass der Token-Typ als V2/V3-API-Token ausgewählt ist, geben Sie einen Namen an und legen Sie den zu ändernden Inhalt fest. Klicken Sie dann auf die Schaltfläche Speichern, woraufhin automatisch eine Textdatei heruntergeladen wird.

So installieren Sie den Widget Builder

Bevor Sie den Widget Builder installieren, sollten Sie die folgenden Voraussetzungen erfüllen:

• Node.js v14.0.0
• NPM v6.14
• A BigCommerce store account
• API Credential.

Folgen Sie diesen Schritten, um den Widget Builder zu installieren

1. Führen Sie zunächst im Terminal die Befehle „node -v“ und „npm -v“ aus, um die Version zu überprüfen.

2. Klonen Sie außerdem das widget-builder repository.

3. Navigieren Sie zum geklonten Widget-Builder-Verzeichnis und öffnen Sie dort das Terminal, um die angegebenen Befehle auszuführen.

npm install
npm run build
npm install -g

4. Führen Sie nach der Installation den folgenden Befehl aus, um die Widget-Builder-Informationen zu überprüfen.

widget-builder -h

5. Und dann konfigurieren Sie Ihre API-Zugangsdaten für den Shop mit Widget Builder. Führen Sie dazu „widget-builder init“ aus. Sie werden aufgefordert, die Client-ID, das Zugriffstoken und den API-Pfad einzugeben, die Sie korrekt hinzufügen müssen.

Hinweis: Um die Speicherkonfiguration zurückzusetzen, führen Sie den Befehl widget-builder init in demselben Verzeichnis aus.

Gehen wir nun die Schritte durch, um neue benutzerdefinierte Widgets zu erstellen:

1. Um zu beginnen, führen Sie den folgenden Befehl in Ihrem geklonten Widget-Builder-Verzeichnis aus.

widget-builder create Image-widget

Nach dem Ausführen des obigen Befehls erhalten Sie die unten stehende Ausgabe und Ihr Widget-Text wird automatisch von Ihrem Browser auf Port 8080 geöffnet.

2. Nun können Sie die Dateien „schema.json“ und „widget.html“ nach Belieben bearbeiten. Die Datei „Config.json“ wird automatisch eingerichtet, wenn Sie den Befehl „widget-builder start ‚‘ ausführen oder wenn Sie Ihre Widget-Dateien und die Vorschau lokal speichern.

widget-builder publish Image-widget

Um die Widgets in Bigcommerce zu aktualisieren, gehen wir folgendermaßen vor:

1. Öffnen Sie zunächst Postman und stellen Sie eine Anfrage, um die Daten aller vorhandenen Widgets zu erhalten. Wir benötigen die ID, um das Widget zu aktualisieren, wenn wir die UUID dieses Widgets nicht kennen (wenn Sie die UUID des Widgets kennen, das Sie aktualisieren möchten, können Sie diesen ersten und zweiten Schritt überspringen).

2. Als Ergebnis erhalten Sie eine Antwort. Im Antwortabschnitt von Postman finden Sie unter den Daten der Widgets das Widget, das Sie bearbeiten möchten, mit dem Hilfsnamen, den Sie leicht überprüfen können, und kopieren Sie die UUID.

3. Fügen Sie nach dem Kopieren die UUID am Ende der URL ein und klicken Sie auf die Schaltfläche Senden, um nur die Daten eines Widgets zu erhalten, das wir bearbeiten möchten.

4. Nachdem Sie auf die Schaltfläche Senden geklickt haben, erhalten Sie als Ergebnis eine Antwort. Im Antwortabschnitt können Sie die Schema- und Vorlagedaten sehen, kopieren Sie sie einfach und gehen Sie zum Verzeichnis Widget Builder, öffnen Sie dort das Terminal und erstellen Sie ein Widget mit demselben Namen wie das Widget, das Sie bearbeiten möchten, oder ändern Sie den Namen des Widgets.

Nachdem Sie den obigen Befehl ausgeführt haben, erhalten Sie die Ausgabe, und Ihr Widget wird erstellt und automatisch in Ihrem Browser auf Port 8080 geöffnet.

5. Navigieren Sie zu dem erstellten Widget-Ordner und erstellen Sie eine Datei mit dem Namen widget.yml und fügen Sie die UUID des Widgets ein, das Sie bearbeiten möchten.

6. Ersetzen Sie die Schemadaten des Widgets (aus der Postman-Antwort kopiert) in der Datei „schema.json“ und ersetzen Sie die Vorlagendaten in der Datei „widget.html“. Stellen Sie vor dem Ersetzen sicher, dass Sie das Format der Vorlagendaten von JSON in HTML konvertieren. Sie können dies mit Hilfe eines beliebigen AI-Tools oder dynamisch ändern.

7. Nehmen Sie die gewünschten Änderungen an den Dateien „schema.json“ und „widget.html“ entsprechend Ihren Anforderungen vor. Außerdem können Sie die Änderungen mit dem Befehl „widget-builder start“ lokal in der Vorschau anzeigen.

8. Zum Schluss, wenn Sie mit den Aktualisierungen zufrieden sind, verwenden Sie den Befehl „widget-builder publish “, um Ihre Änderungen zu aktivieren.

Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung in Bezug auf Bigcommerce benötigen. Sie können auch die Bigcommerce-Entwicklungsseite besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.