Add Comments to BigCommerce Sites

Erstellen wir zunächst ein benutzerdefiniertes Theme, das wir bearbeiten werden. Wenn Sie bereits ein benutzerdefiniertes Theme eingerichtet haben, können Sie diesen Schritt überspringen.

To do this, we will go to Storefront and then Themes.

Storefront auswählen

Themes auswählen

Für dieses Tutorial verwenden wir das Standard-Theme; die Anweisungen sind jedoch für alle Themes gleich.

Als Nächstes werden wir nicht auf Anpassen klicken. Klicken Sie stattdessen auf Advanced und Make a Copy.

Kopie erstellen

Bestätigen Sie das Kopieren des Themes:

Kopie speichern

Sobald dies abgeschlossen ist, sollten Sie Ihr Theme unten auf der Seite unter Themes aufgeführt sehen, wie hier.

Benutzerdefiniertes Theme erstellt

Jetzt können wir unser neues Theme bearbeiten, um FastComments hinzuzufügen.

Theme-Dateien bearbeiten

Der nächste Schritt besteht darin, den Widget-Code hinzuzufügen, der die Integration zum Laufen bringt.

Sobald Sie sich im Theme-Editor befinden, wie im vorherigen Schritt beschrieben, sehen Sie links einen Dateibrowser und rechts einen Editor.

Wir werden eine Vorlage bearbeiten, die unsere Blog-Beitragsseiten repräsentiert.

In der linken Navigation gehen Sie zu templates->pages->blog-post.html.

Vorlage öffnen

Kopieren Sie nun den Code, den wir zur Installation von FastComments verwenden werden:

BigCommerce Comments Code

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

Jetzt fügen wir den Widget-Code in Line 6 ein. Es ist wichtig, dass der Code vor der Zeile mit {{/partial}} eingefügt wird.

In Zeile 6 einfügen

Am Ende sollten Sie etwas wie das Folgende haben:

Nach dem Hinzufügen des Codes

Nun können wir die Datei speichern:

Speichern

...und den Editor verlassen:

Editor bearbeiten

Unser letzter Schritt ist, die neue Theme-Vorlage zu verwenden.

Oben rechts sehen Sie nun entweder Publish oder Make Active Theme. Klicken Sie darauf, um fortzufahren und die Änderungen live zu schalten:

Änderungen veröffentlichen

Jetzt können wir unsere Seite überprüfen! Wenn Sie zu einem Blog-Beitrag gehen, sollten Sie unten ein Kommentarfeld sehen.

Änderungen live

Gute Arbeit! Sie haben Live-Kommentare auf Ihrer BigCommerce-Website hinzugefügt.

Wenn Sie auf einen "permission denied"-Fehler gestoßen sind oder FastComments anpassen möchten, lesen Sie weiter.

FastComments ist so konzipiert, dass es an Ihre Website angepasst werden kann.

Wenn Sie benutzerdefinierte Styles hinzufügen oder die Konfiguration anpassen möchten, Sehen Sie sich unsere Anpassungsdokumentation an, um zu erfahren, wie.

Es wird nicht empfohlen, FastComments über den Page Builder von BigCommerce hinzuzufügen, da der Code dann manuell zu jeder gewünschten Seite hinzugefügt werden muss.

Wenn dies jedoch gewünscht ist, muss der folgende Codeausschnitt verwendet werden. Codebeispiele aus anderen Tutorials funktionieren aufgrund der Funktionsweise von BigCommerce nicht:

BigCommerce Page Builder-Snippet

Copy

1

2<script src="https://cdn.fastcomments.com/js/embed-v2.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5 (function () {

6 let loaded = false;

7 function attemptLoad() {

8 if (loaded) {

9 return;

10 }

11 if (!window.FastCommentsUI) {

12 return;

13 }

14 FastCommentsUI(document.getElementById('fastcomments-widget'), {

15 tenantId: "demo"

16 });

17 loaded = true;

18 }

19 attemptLoad();

20 const interval = setInterval(function () {

21 attemptLoad();

22 if (loaded) {

23 clearInterval(interval);

24 }

25 }, 300);

26 })();

27</script>

28