Dodajte komentare na Wix stranice

Za ovaj primjer dodati ćemo FastComments Live Commenting na stranice objava na blogu.

Da bismo to učinili, otvorit ćemo našu stranicu u Wix editoru.

Zatim moramo provjeriti uređujemo li pravu stranicu.

Želimo osigurati da za svaku objavu na blogu prikažemo jedinstvenu nit komentara, zato uredimo Blog Pages -> Post.

Korak jedan: Uredite dinamičnu stranicu objave

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

Drugi korak: Dodavanje Embed HTML bloka

Time ćemo dobiti tužno izgledajući okvir za početak:

Početni blok

Ovaj primjer koristi prilagođeni kod radi kompatibilnosti s Wixom. Nećete moći koristiti FastComments isječke koda iz drugih vodiča.

Otvorite obrazac za dodavanje našeg prilagođenog HTML dijaloga klikom na Enter Code i odabirom HTML:

Korak 3: Otvorite HTML dijalog

Kopirajte sljedeći HTML isječak i zalijepite ga u dijalog, a zatim kliknite Update:

Wix isječak 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: Zalijepite i spremite

Sada biste trebali vidjeti vrlo malu verziju widgeta za komentare:

Korak 3: Rezultat

Zatim ćemo ovo pozicionirati i dimenzionirati tako da odgovara našoj stranici.

Sada kad smo dodali widget za komentare, posložimo ga na našoj stranici.

Korak 4: Promjena veličine

S ovim vodičem moći ćemo promijeniti trenutnu nit ovisno o aktivnoj stranici. Međutim, nećemo moći dinamički mijenjati veličinu widgeta za komentare dok Wix ne omogući tu funkcionalnost. Do tada ćete morati odlučiti koliko veliko želite područje za komentare na svojoj stranici i odgovarajuće ga dimenzionirati.

Zatim ćemo postaviti stvari tako da se nit komentara mijenja ovisno o trenutnoj stranici, čime korisnicima omogućujemo raspravu o trenutno prikazanom sadržaju.

Bez sljedećih koraka, imat ćete samo jednu globalnu nit komentara za cijelu vašu web-lokaciju - što nije baš korisno.

Dev Mode

Da bismo dodali ovu funkcionalnost, morat ćemo ući u ono što Wix naziva Dev Mode.

Kliknite opciju Dev Mode na vrhu zaslona.

Omogući Dev Mode

Postavljanje ID-ja elementa

Dodat ćemo prilagođeni kod kako bismo to postigli, ali prvo moramo dati novom ugrađenom elementu ID na koji se možemo pozivati.

Nazovimo ga fastcomments.

Kliknite novi ugrađeni element koji smo dodali, i u dev modu u donjem desnom kutu trebali biste vidjeti polje ID s vrijednošću poput html1:

Polje ID

Promijenite ovo u fastcomments i pritisnite enter:

Postavi ID

Sada možemo dodati naš prilagođeni kod koji govori području komentara koju stranicu gledamo.

Na dnu zaslona trebali biste vidjeti uređivač koda poput ovoga:

Otvori uređivač

Kopirajte sljedeći kod i zalijepite ga tamo:

Wix isječak 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

Dodaj kod za navigaciju

Sada možemo odahnuti i pregledati našu stranicu. Trebali biste vidjeti područje za komentare koje se mijenja ovisno o stranici. Čestitamo!

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

FastComments je osmišljen da se može prilagoditi vašoj stranici.

Ako želite dodati prilagođene stilove ili podesiti konfiguraciju, Pogledajte našu dokumentaciju za prilagodbu da biste saznali kako.