{"id":13539,"date":"2023-06-05T05:55:41","date_gmt":"2023-06-05T05:55:41","guid":{"rendered":"https:\/\/www.bay20.com\/?p=13539"},"modified":"2025-05-14T16:14:04","modified_gmt":"2025-05-14T10:29:04","slug":"anleitung-zur-erstellung-und-aktualisierung-von-benutzerdefinierten-widgets-in-bigcommerce","status":"publish","type":"post","link":"https:\/\/www.bay20.com\/de\/anleitung-zur-erstellung-und-aktualisierung-von-benutzerdefinierten-widgets-in-bigcommerce\/","title":{"rendered":"Wie erstellt und aktualisiert man benutzerdefinierte Widgets in Bigcommerce?"},"content":{"rendered":"\n<p>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\u00f6glichkeiten, dies sehr einfach zu tun, wie zum Beispiel die <a href=\"https:\/\/epicdesignlabs.com\/apps\/epic-page-builder-widgets-for-bigcommerce\/\">Epic Page Builder Widget app<\/a>, <strong>Postman<\/strong> und das <strong>Widget Builder Tool<\/strong>.<\/p>\n\n\n\n<p>Um benutzerdefinierte Widgets zu erstellen und zu aktualisieren, bevorzugen wir die kostenlosen Tools <strong>Postman<\/strong> und <strong>Widget Builder<\/strong> anstelle der Epic Page Builder Widget App, die 50 $ kostet, um die Funktionen zum Erstellen und Aktualisieren benutzerdefinierter Widgets zu erhalten.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Um benutzerdefinierte Widgets in bigcommerce zu erstellen und zu aktualisieren, lesen Sie diese Informationen<\/h2>\n\n\n\n<p>Wie Sie vielleicht wissen, k\u00f6nnen Sie benutzerdefinierte Widgets \u00fcber <strong>APIs <\/strong>mit Anwendungen wie <strong>Postman<\/strong> 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\u00dferdem m\u00fcssen Sie verschiedene Anfragen f\u00fcr die Aktualisierung und Erstellung von Widgets erstellen.<\/p>\n\n\n\n<p>Der Widget-Builder bietet eine lokale Vorschaufunktion f\u00fcr Ihre Widgets. Um Ihre Arbeit zu vereinfachen, k\u00f6nnen Sie einen Widget-Builder verwenden, der es Ihnen erm\u00f6glicht, das <strong>Schema<\/strong> und den <strong>HTML<\/strong>-Code eines Widgets in einer separaten Datei zu speichern, was die Verwaltung erleichtert. Au\u00dferdem bietet der Widget-Builder eine bequeme M\u00f6glichkeit, Ihre Anpassungen in der Vorschau anzuzeigen. Es ist jedoch wichtig zu beachten, dass diese Methode nur die Erstellung neuer Widgets erm\u00f6glicht und keine M\u00f6glichkeit bietet, bestehende Widgets zu bearbeiten, wenn wir die UUID des Widgets nicht kennen.<\/p>\n\n\n\n<p>Um diese Einschr\u00e4nkung zu umgehen, besteht ein alternativer Ansatz darin, <strong>Postman <\/strong>zu verwenden, um die Daten der vorhandenen Widgets aus dem Speicher abzurufen und sie dem<strong> Widget Builder <\/strong>hinzuzuf\u00fcgen. In diesem Fall ben\u00f6tigen Sie die UUID des Widgets, das Sie aktualisieren m\u00f6chten. Mit dieser Methode k\u00f6nnen Sie die Anforderungen an die Aktualisierung vorhandener Widgets erf\u00fcllen und gleichzeitig den Komfort des Widget Builders nutzen.<\/p>\n\n\n\n<p>Schauen wir uns an, wie das geht:<\/p>\n\n\n\n<p><strong>Schauen wir uns zun\u00e4chst die Voraussetzungen an, die Sie ben\u00f6tigen, bevor Sie beginnen k\u00f6nnen:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Postman<\/li><li>widget builder installed<\/li><li>API Credential<\/li><\/ul>\n\n\n\n<p>Wenn Sie keine <strong>API-Zugangsdaten<\/strong> oder keinen <strong>Widget-Builder installiert<\/strong> haben, folgen Sie den angegebenen Schritten, um diese M\u00e4ngel zu beheben:<\/p>\n\n\n\n<p><strong>F\u00fchren Sie die folgenden Schritte aus, um die API-Anmeldeinformationen zu erhalten<\/strong><\/p>\n\n\n\n<p><strong>1.<\/strong> 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 <strong>API accounts.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"474\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-980x474.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13547\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-980x474.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-300x145.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-800x387.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-768x371.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1000x483.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image.png 1339w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><strong>2.<\/strong> Klicken Sie auf die Schaltfl\u00e4che <strong>+ API-Konto erstellen<\/strong> und vergewissern Sie sich, dass der Token-Typ als V2\/V3-API-Token ausgew\u00e4hlt ist, geben Sie einen Namen an und legen Sie den zu \u00e4ndernden Inhalt fest. Klicken Sie dann auf die Schaltfl\u00e4che Speichern, woraufhin automatisch eine Textdatei heruntergeladen wird.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"466\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-1-980x466.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13549\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-980x466.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-300x143.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-800x381.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-768x366.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-1000x476.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1.png 1353w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><strong>So installieren Sie den Widget Builder<\/strong><\/p>\n\n\n\n<p>Bevor Sie den Widget Builder installieren, sollten Sie die folgenden Voraussetzungen erf\u00fcllen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Node.js v14.0.0<\/li><li>NPM v6.14<\/li><li>A BigCommerce store account<\/li><li>API Credential.<\/li><\/ul>\n\n\n\n<p>Folgen Sie diesen Schritten, um den <strong>Widget Builder<\/strong> zu installieren<\/p>\n\n\n\n<p><strong>1.<\/strong> F\u00fchren Sie zun\u00e4chst im Terminal die Befehle <strong>\u201enode -v\u201c<\/strong> und <strong>\u201enpm -v\u201c<\/strong> aus, um die Version zu \u00fcberpr\u00fcfen.<\/p>\n\n\n\n<p><strong>2.<\/strong> Klonen Sie au\u00dferdem das <a href=\"https:\/\/github.com\/bigcommerce\/widget-builder\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"widget-builder repository\">widget-builder repository<\/a>.<\/p>\n\n\n\n<p><strong>3.<\/strong> Navigieren Sie zum geklonten Widget-Builder-Verzeichnis und \u00f6ffnen Sie dort das Terminal, um die angegebenen Befehle auszuf\u00fchren.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install\nnpm run build\nnpm install -g<\/code><\/pre>\n\n\n\n<p><strong>4.<\/strong> F\u00fchren Sie nach der Installation den folgenden Befehl aus, um die <strong>Widget-Builder<\/strong>-Informationen zu \u00fcberpr\u00fcfen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>widget-builder -h<\/code><\/pre>\n\n\n\n<p><strong>5.<\/strong> Und dann konfigurieren Sie Ihre <strong>API-Zugangsdaten<\/strong> f\u00fcr den Shop mit Widget Builder. F\u00fchren Sie dazu \u201ewidget-builder init\u201c aus. Sie werden aufgefordert, die Client-ID, das Zugriffstoken und den API-Pfad einzugeben, die Sie korrekt hinzuf\u00fcgen m\u00fcssen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"228\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-2-980x228.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13558\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-2-980x228.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-2-300x70.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-2-800x186.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-2-768x179.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-2-1000x233.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-2.png 1361w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p class=\"has-small-font-size\"><strong>Hinweis:<\/strong> Um die Speicherkonfiguration zur\u00fcckzusetzen, f\u00fchren Sie den Befehl widget-builder init in demselben Verzeichnis aus.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gehen wir nun die Schritte durch, um neue benutzerdefinierte Widgets zu erstellen:<\/h3>\n\n\n\n<p><strong>1. <\/strong>Um zu beginnen, f\u00fchren Sie den folgenden Befehl in Ihrem geklonten <strong>Widget-Builder<\/strong>-Verzeichnis aus.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>widget-builder create Image-widget<\/code><\/pre>\n\n\n\n<p>Nach dem Ausf\u00fchren des obigen Befehls erhalten Sie die unten stehende Ausgabe und Ihr Widget-Text wird automatisch von Ihrem Browser auf Port 8080 ge\u00f6ffnet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"216\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-3-980x216.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13560\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-980x216.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-300x66.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-800x176.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-768x169.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-1000x220.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3.png 1366w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><strong>2.<\/strong> Nun k\u00f6nnen Sie die Dateien \u201eschema.json\u201c und <strong>\u201ewidget.html\u201c <\/strong>nach Belieben bearbeiten. Die Datei \u201e<strong>Config.json\u201c<\/strong> wird automatisch eingerichtet, wenn Sie den Befehl \u201e<strong>widget-builder<\/strong> start \u201a\u2018 ausf\u00fchren oder wenn Sie Ihre Widget-Dateien und die Vorschau lokal speichern.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"410\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-5-980x410-2.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13568\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-5-980x410-2.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-5-980x410-2-300x126.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-5-980x410-2-800x335.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-5-980x410-2-768x321.png 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"345\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-6-980x345-2.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13569\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-6-980x345-2.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-6-980x345-2-300x106.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-6-980x345-2-800x282.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-6-980x345-2-768x270.png 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><figcaption><strong>3.<\/strong> Um Ihr Widget zu ver\u00f6ffentlichen, navigieren Sie es in den Umgebungsordner und f\u00fchren Sie dann den unten stehenden Befehl aus. Um Ihr Widget zu bearbeiten, nehmen Sie \u00c4nderungen in Ihren Dateien vor und f\u00fchren Sie den Befehl \u201ewidget-builder publish\u201c aus, um Ihre \u00c4nderungen zu aktivieren. Auch hier gilt: Wenn Sie \u00c4nderungen vornehmen und diesen Befehl ausf\u00fchren, werden Ihre \u00c4nderungen aktualisiert.<\/figcaption><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>widget-builder publish Image-widget<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"193\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235-980x193.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13570\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235-980x193.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235-300x59.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235-800x158.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235-768x151.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235-1000x197.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/Screenshot-2023-06-02-174235.png 1366w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Um die Widgets in Bigcommerce zu aktualisieren, gehen wir folgenderma\u00dfen vor:<\/h3>\n\n\n\n<p><strong>1.  <\/strong>\u00d6ffnen Sie zun\u00e4chst Postman und stellen Sie eine Anfrage, um die Daten aller vorhandenen Widgets zu erhalten. Wir ben\u00f6tigen die ID, um das Widget zu aktualisieren, wenn wir die UUID dieses Widgets nicht kennen <em>(wenn Sie die UUID des Widgets kennen, das Sie aktualisieren m\u00f6chten, k\u00f6nnen Sie diesen ersten und zweiten Schritt \u00fcberspringen).<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"405\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-8.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13573\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-8.png 842w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-8-300x144.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-8-800x385.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-8-768x369.png 768w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<p><strong>2.<\/strong> Als Ergebnis erhalten Sie eine Antwort. Im Antwortabschnitt von Postman finden Sie unter den Daten der Widgets das Widget, das Sie bearbeiten m\u00f6chten, mit dem Hilfsnamen, den Sie leicht \u00fcberpr\u00fcfen k\u00f6nnen, und kopieren Sie die UUID.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"851\" height=\"659\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-1-1.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13575\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-1.png 851w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-1-300x232.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-1-800x620.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-1-1-768x595.png 768w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><\/figure>\n\n\n\n<p><strong>3.<\/strong> F\u00fcgen Sie nach dem Kopieren die <strong>UUID <\/strong>am Ende der URL ein und klicken Sie auf die Schaltfl\u00e4che <strong>Senden,<\/strong> um nur die Daten eines Widgets zu erhalten, das wir bearbeiten m\u00f6chten.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"224\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-3-1.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13593\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-1.png 847w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-1-300x79.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-1-800x212.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-3-1-768x203.png 768w\" sizes=\"auto, (max-width: 847px) 100vw, 847px\" \/><\/figure>\n\n\n\n<p><strong>4.<\/strong> Nachdem Sie auf die Schaltfl\u00e4che <strong>Senden<\/strong> geklickt haben, erhalten Sie als Ergebnis eine Antwort. Im Antwortabschnitt k\u00f6nnen Sie die Schema- und <strong>Vorlagedaten<\/strong> sehen, kopieren Sie sie einfach und gehen Sie zum Verzeichnis <strong>Widget Builder<\/strong>, \u00f6ffnen Sie dort das Terminal und erstellen Sie ein Widget mit demselben Namen wie das Widget, das Sie bearbeiten m\u00f6chten, oder \u00e4ndern Sie den Namen des Widgets.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"193\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-11-980x193.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13579\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-11-980x193.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-11-300x59.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-11-800x158.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-11-768x151.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-11-1000x197.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-11.png 1365w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p>Nachdem Sie den obigen Befehl ausgef\u00fchrt haben, erhalten Sie die Ausgabe, und Ihr Widget wird erstellt und automatisch in Ihrem Browser auf Port 8080 ge\u00f6ffnet.<\/p>\n\n\n\n<p><strong>5<\/strong>. Navigieren Sie zu dem erstellten Widget-Ordner und erstellen Sie eine Datei mit dem Namen <strong>widget.yml<\/strong> und f\u00fcgen Sie die UUID des Widgets ein, das Sie bearbeiten m\u00f6chten.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"521\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-12-980x521.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13580\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-12-980x521.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-12-300x159.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-12-800x425.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-12-768x408.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-12-1000x531.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-12.png 1365w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><strong>6.<\/strong> Ersetzen Sie die Schemadaten des<strong> Widgets<\/strong> (aus der Postman-Antwort kopiert) in der Datei <strong>\u201eschema.json\u201c<\/strong> und ersetzen Sie die Vorlagendaten in der Datei <strong>\u201ewidget.html\u201c<\/strong>. Stellen Sie vor dem Ersetzen sicher, dass Sie das Format der Vorlagendaten von <strong>JSON <\/strong>in HTML konvertieren. Sie k\u00f6nnen dies mit Hilfe eines beliebigen AI-Tools oder dynamisch \u00e4ndern.<\/p>\n\n\n\n<p><strong>7. <\/strong>Nehmen Sie die gew\u00fcnschten \u00c4nderungen an den Dateien \u201eschema.json\u201c und \u201ewidget.html\u201c entsprechend Ihren Anforderungen vor. Au\u00dferdem k\u00f6nnen Sie die \u00c4nderungen mit dem Befehl \u201ewidget-builder start\u201c lokal in der Vorschau anzeigen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"192\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-13-980x192.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13582\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-13-980x192.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-13-300x59.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-13-800x157.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-13-768x151.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-13-1000x196.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-13.png 1365w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><strong>8.<\/strong> Zum Schluss, wenn Sie mit den Aktualisierungen zufrieden sind, verwenden Sie den Befehl \u201ewidget-builder publish \u201c, um Ihre \u00c4nderungen zu aktivieren.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"300\" src=\"https:\/\/www.bay20.com\/wp-content\/uploads\/2023\/06\/image-14-980x300.png\" alt=\"Widgets in Bigcommerce\" class=\"wp-image-13585\" srcset=\"https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-14-980x300.png 980w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-14-300x92.png 300w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-14-800x245.png 800w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-14-768x235.png 768w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-14-1000x306.png 1000w, https:\/\/www.bay20.com\/de\/wp-content\/uploads\/2023\/06\/image-14.png 1365w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p><strong>Bitte kontaktieren Sie uns unter <strong><a href=\"mailto:manish@bay20.com\">manish@bay20.com<\/a><\/strong> oder rufen Sie uns unter <strong><a href=\"https:\/\/api.whatsapp.com\/send?phone=+918800519180&amp;text=Hi, I contacted you through your website.\" title=\"+91-8800519180\">+91-8800519180<\/a> <\/strong> an, wenn Sie Unterst\u00fctzung in Bezug auf Bigcommerce ben\u00f6tigen. Sie k\u00f6nnen auch die <a href=\"https:\/\/www.bay20.com\/de\/bigcommerce-entwicklungsunternehmen\/\" title=\"Bigcommerce development\">Bigcommerce<strong>-Entwicklungsseite<\/strong><\/a> besuchen, um die von uns angebotenen Dienstleistungen zu \u00fcberpr\u00fcfen.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>lots of people think that it is pretty challenging to create and update custom widgets in bigcommerce, this is right but there are tons of ways to do that very easily.<\/p>\n","protected":false},"author":90,"featured_media":13604,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,85,84],"tags":[],"class_list":["post-13539","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bigcommerce","category-bigcommerce-stencil","category-bigcommerce-lehrgang"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/13539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/users\/90"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/comments?post=13539"}],"version-history":[{"count":25,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/13539\/revisions"}],"predecessor-version":[{"id":17049,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/posts\/13539\/revisions\/17049"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media\/13604"}],"wp:attachment":[{"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/media?parent=13539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/categories?post=13539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bay20.com\/de\/wp-json\/wp\/v2\/tags?post=13539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}