Reacties toevoegen aan Wix-sites

Voor dit voorbeeld gaan we FastComments Live Commenting toevoegen aan blogpostpagina's.

Om dit te doen, openen we onze site in de Wix-editor.

Vervolgens moeten we ervoor zorgen dat we de juiste pagina bewerken.

We willen ervoor zorgen dat we voor elk blogbericht een unieke reactietraad tonen, dus laten we Blog Pages -> Post bewerken.

Stap één: Bewerk de dynamische berichtpagina

Vervolgens gaan we naar Add -> Embed Code -> Embed HTML.

Stap twee: Voeg een Embed HTML-blok toe

Dit geeft ons een wat treurig uitziend vak om mee te beginnen:

Het startblok

Dit voorbeeld gebruikt aangepaste code om compatibel te zijn met Wix. Je kunt de FastComments-codefragmenten uit andere handleidingen niet gebruiken.

Open het formulier om onze aangepaste HTML-dialoog toe te voegen door op Enter Code te klikken en HTML te selecteren:

Stap 3: HTML-dialoog openen

Kopieer het volgende HTML-fragment en plak het in de dialoog, en klik op Update:

Wix Reacties 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 const config = {

7 tenantId: "demo"

8 };

9 const instance = FastCommentsUI(document.getElementById('fastcomments-widget'), config);

10 window.onmessage = (event) => {

11 if (event.data) {

12 if (event.data.action === 'reload') {

13 console.log('Updating FastComments:', event.data.url);

14 config.urlId = event.data.url;

15 config.url = event.data.url;

16 instance.update(config);

17 }

18 }

19 }

20 })();

21</script>

22

Stap 3: Plakken en opslaan

Je zou nu een zeer kleine versie van de reacties-widget moeten zien:

Stap 3: Het resultaat

Vervolgens positioneren en schalen we dit zodat het op onze pagina past.

Nu we de reactie-widget hebben toegevoegd, laten we deze op onze pagina positioneren.

Stap 4: Formaat aanpassen

Met deze handleiding kunnen we de huidige discussiedraad wijzigen op basis van de actieve pagina. We kunnen de reactie-widget echter niet dynamisch van formaat veranderen totdat Wix deze functionaliteit beschikbaar stelt. Tot die tijd moet je beslissen hoe groot je het reactiegebied op je pagina wilt hebben en de grootte ervan dienovereenkomstig instellen.

Laten we nu alles instellen zodat de commentaardraad verandert op basis van de huidige pagina, zodat gebruikers de momenteel weergegeven inhoud kunnen bespreken.

Zonder de volgende stappen heb je slechts één globale commentaardraad voor je hele site - wat niet erg nuttig is.

Dev Mode

Om deze functionaliteit toe te voegen, moeten we naar wat Wix Dev Mode noemt.

Klik op de optie Dev Mode bovenaan het scherm.

Dev Mode inschakelen

Stel het Element ID in

We gaan aangepaste code toevoegen om dit te bereiken, maar eerst moeten we het nieuwe embed-element een ID geven om ernaar te verwijzen.

Laten we het fastcomments noemen.

Klik op het nieuwe embed-element dat we hebben toegevoegd, en in dev mode zie je rechtsonder een ID-veld met een waarde zoals html1:

Het ID-veld

Wijzig dit in fastcomments en druk op enter:

Stel de ID in

Nu kunnen we onze aangepaste code toevoegen die de commentaarzone vertelt welke pagina we bekijken.

Onderaan het scherm zou je een code-editor als deze moeten zien:

Open de editor

Kopieer de volgende code en plak deze daar:

Wix Comments Navigation Snippet

Copy

1

2import wixLocation from 'wix-location';

3

4$w.onReady(function () {

5 function updateFastCommentsLocation() {

6 try {

7 const url = (wixLocation.baseUrl + '/' + wixLocation.path).replace(/,/g, '/');

8 $w('#fastcomments').postMessage({'action': 'reload', 'url': url});

9 } catch (err) {

10 console.error('Wix -> FastComments Error', err);

11 }

12 }

13

14 updateFastCommentsLocation();

15 wixLocation.onChange( () => {

16 updateFastCommentsLocation();

17 });

18});

19

Voeg de navigatiecode toe

Nu kunnen we even ademhalen en onze site bekijken. Je zou een commentaargedeelte moeten zien dat verandert op basis van de opgegeven pagina. Gefeliciteerd!

Als je problemen hebt, laat het ons weten in het onderstaande reactieveld.

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

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