Add Comments to BigCommerce Sites

Laten we eerst een aangepast thema maken dat we gaan bewerken. Als je al een aangepast thema hebt ingesteld, kun je deze stap overslaan.

Om dit te doen, gaan we naar Storefront en vervolgens naar Themes.

Selecteer Storefront

Selecteer Themes

Voor dit voorbeeld gebruiken we het standaardthema, maar de instructies zijn hetzelfde voor alle thema's.

Vervolgens gaan we niet op Aanpassen klikken. Klik in plaats daarvan op Advanced en Make a Copy.

Maak een kopie

Bevestig het kopiëren van het thema:

Sla de kopie op

Als het proces is voltooid, zou je je thema onderaan de pagina moeten zien staan onder Themes, zoals hieronder.

Aangepast thema aangemaakt

Nu kunnen we ons nieuwe thema bewerken om FastComments toe te voegen.

Thema-bestanden bewerken

De volgende stap is het toevoegen van de widgetcode die de integratie laat werken.

Zodra je in de thema-editor bent, zoals aangegeven in de vorige stap, zie je aan de linkerkant een bestandsbrowser en aan de rechterkant een editor.

Wat we gaan doen is een sjabloon bewerken dat onze blogpostpagina's vertegenwoordigt.

Ga in de navigatie aan de linkerkant naar templates->pages->blog-post.html.

Open het sjabloon

Vervolgens, kopieer de code die we gaan gebruiken om FastComments te installeren:

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

Nu gaan we de widget-code op Line 6 plakken. Het is belangrijk dat de code wordt toegevoegd voor de regel met {{/partial}}.

Plak op regel 6

U zou ongeveer dit moeten zien:

Na het toevoegen van de code

Nu kunnen we het bestand opslaan:

Opslaan

...en de editor afsluiten:

Bewerk de editor

Onze laatste stap is het gebruiken van het nieuwe thema-sjabloon.

Rechtsboven zie je nu Publish of Make Active Theme. Klik daarop om door te gaan en de wijzigingen live te zetten:

Wijzigingen publiceren

Nu kunnen we onze site bekijken! Als je naar een blogpost gaat, zou je onderaan een reactiesvak moeten zien.

Wijzigingen live

Goed gedaan! Je hebt live reacties toegevoegd aan je BigCommerce-site.

Als je een 'permission denied' fout bent tegengekomen, of FastComments wilt aanpassen, lees dan verder.

FastComments is ontworpen om aangepast te worden zodat het bij uw site past.

Als u aangepaste styling wilt toevoegen, of de configuratie wilt aanpassen, Bekijk onze documentatie over aanpassingen en configuratie om te leren hoe.

Het wordt niet aanbevolen om FastComments via de Page Builder van BigCommerce toe te voegen, omdat de code dan handmatig aan elke gewenste pagina moet worden toegevoegd.

Als dit echter gewenst is, moet het volgende codefragment worden gebruikt. Codefragmenten uit andere tutorials werken niet vanwege de aard van BigCommerce:

BigCommerce Page Builder-codefragment

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