Dodajte komentare na Wix sajtove

Za ovaj primer, dodaćemo FastComments Live Commenting na stranice blog postova.

Da bismo to uradili, otvorićemo naš sajt u Wix editoru.

Zatim, moramo da se uverimo da uređujemo pravu stranicu.

Želimo da se uverimo da prikazujemo jedinstvenu nit komentara za svaki post na blogu, zato hajde da uredimo Blog Pages -> Post.

Korak jedan: Uredi dinamičku stranicu posta

Zatim ćemo otići na Add -> Embed Code -> Embed HTML.

Drugi korak: Dodavanje Embed HTML bloka

Ovo će nam dati tužno izgledajući okvir za početak:

Početni blok

Ovaj primer koristi prilagođeni kod da bi bio kompatibilan sa Wix-om. Nećete moći da koristite FastComments primere koda iz drugih tutorijala.

Otvorite formu da dodate naš prilagođeni HTML dijalog klikom na Enter Code i izborom HTML:

Korak 3: Otvorite HTML dijalog

Kopirajte sledeći HTML isječak i nalepite ga u dijalog, pa kliknite Ažuriraj:

Wix primer koda za komentare

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

Korak 3: Nalepite i sačuvajte

Sada biste trebali videti vrlo malu verziju widgeta za komentare:

Korak 3: Rezultat

Zatim ćemo postaviti i promeniti veličinu ovog tako da odgovara našoj stranici.

Sada kada smo dodali widget za komentare, hajde da ga rasporedimo na našoj stranici.

Korak 4: Promena veličine

Uz ovaj tutorijal moći ćemo da promenimo trenutnu nit na osnovu aktivne stranice. Međutim, nećemo moći dinamički da menjamo veličinu widgeta za komentare dok Wix ne omogući ovu funkcionalnost. Do tada ćete morati da odredite koliko veliku želite oblast za komentare na svojoj stranici i da je odgovarajuće podesite.

Zatim ćemo podesiti stvari tako da se nit komentara menja u zavisnosti od trenutne stranice, čime korisnicima omogućavamo da diskutuju o trenutno prikazanom sadržaju.

Bez sledećih koraka, imaćete samo jedan globalni nit komentara za ceo sajt - što nije baš korisno.

Dev Mode

Da bismo dodali ovu funkcionalnost, moraćemo da uđemo u ono što Wix naziva Dev Mode.

Kliknite na opciju Dev Mode na vrhu ekrana.

Omogućite Dev Mode

Postavite ID elementa

Dodaćemo prilagođeni kod da bismo ovo postigli, ali prvo moramo da damo novom ugnježdenom elementu ID na koji ćemo se pozivati.

Nazvaćemo ga fastcomments.

Kliknite na novi ugnježdeni element koji smo dodali, i u dev režimu u donjem desnom uglu trebalo bi da vidite polje ID sa vrednošću poput html1:

Polje ID

Promenite ovo u fastcomments i pritisnite enter:

Postavite ID

Sada možemo da dodamo naš prilagođeni kod koji govori oblasti komentara koju stranicu gledamo.

Na dnu ekrana trebalo bi da vidite editor koda poput ovog:

Otvorite Editor

Kopirajte sledeći kod i nalepite ga tamo:

Wix Snippet za Navigaciju Komentara

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

Dodajte Kod za Navigaciju

Sad možemo da odahnemo i pregledamo naš sajt. Trebalo bi da vidite oblast za komentare koja se menja u zavisnosti od prikazane stranice. Čestitamo!

Ako imate bilo kakvih problema, javite nam u polju za komentare ispod.

FastComments je dizajniran tako da se može prilagoditi vašem sajtu.

Ako želite da dodate prilagođene stilove ili podesite konfiguraciju, Pogledajte našu dokumentaciju o prilagođavanjima i konfiguraciji da biste saznali kako.