Dodaj komentarze do stron Wix

W tym przykładzie dodamy FastComments Live Commenting do stron wpisów na blogu.

Aby to zrobić, otworzymy naszą stronę w edytorze Wix.

Następnie musimy upewnić się, że edytujemy właściwą stronę.

Chcemy upewnić się, że wyświetlamy unikalny wątek komentarzy dla każdego wpisu na blogu, więc edytujmy Blog Pages -> Post.

Krok pierwszy: Edytuj dynamiczną stronę wpisu

Następnie przejdziemy do Add -> Embed Code -> Embed HTML.

Krok drugi: Dodaj blok Embed HTML

To da nam na początek smutnie wyglądające pole:

Blok początkowy

Ten przykład używa niestandardowego kodu, aby był zgodny z Wix. Nie będziesz mógł użyć fragmentów kodu FastComments z innych samouczków.

Otwórz formularz, aby dodać nasze niestandardowe okno HTML, klikając Enter Code i wybierając HTML:

Krok 3: Otwórz okno HTML

Skopiuj następujący fragment HTML i wklej go do okna, a następnie kliknij Update:

Fragment kodu komentarzy Wix

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

Krok 3: Wklej i Zapisz

Powinieneś teraz zobaczyć bardzo małą wersję widżetu komentarzy:

Krok 3: Wynik

Następnie ustawimy pozycję i rozmiar tak, aby pasowały do naszej strony.

Teraz, gdy dodaliśmy widżet komentarzy, ustawmy go na naszej stronie.

Krok 4: Zmiana rozmiaru

Dzięki temu samouczkowi będziemy mogli zmieniać bieżący wątek w zależności od aktywnej strony. Jednak nie będziemy mogli dynamicznie zmieniać rozmiaru widżetu komentarzy, dopóki Wix nie udostępni tej funkcjonalności. Do tego czasu będziesz musiał zdecydować, jak duży ma być obszar komentarzy na Twojej stronie i odpowiednio go rozmiarować.

Następnie skonfigurujmy to tak, aby wątek komentarzy zmieniał się w zależności od aktualnej strony, pozwalając użytkownikom na dyskusję nad aktualnie wyświetlaną treścią.

Bez poniższych kroków będziesz mieć tylko jeden globalny wątek komentarzy dla całej witryny — co nie jest zbyt przydatne.

Tryb deweloperski

Aby dodać tę funkcjonalność, musimy przejść do tego, co Wix nazywa Dev Mode.

Kliknij opcję Dev Mode u góry ekranu.

Włącz Tryb deweloperski

Ustaw ID elementu

Dodamy niestandardowy kod, aby to osiągnąć, ale najpierw musimy nadać nowemu elementowi osadzenia ID, aby można było się do niego odwoływać.

Nazwijmy go fastcomments.

Kliknij nowy element osadzenia, który dodaliśmy, a w trybie deweloperskim w prawym dolnym rogu powinieneś zobaczyć pole ID z wartością taką jak html1:

Pole ID

Zmień to na fastcomments i naciśnij Enter:

Ustaw ID

Teraz możemy dodać nasz niestandardowy kod, który poinformuje obszar komentarzy, jaką stronę wyświetlamy.

Na dole ekranu powinieneś zobaczyć edytor kodu podobny do tego:

Otwórz edytor

Skopiuj poniższy kod i wklej go tam:

Fragment nawigacji komentarzy Wix

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 nawigacji

Teraz możemy odetchnąć i podejrzeć naszą stronę. Powinieneś zobaczyć obszar komentarzy, który zmienia się w zależności od danej strony. Gratulacje!

Jeśli masz jakiekolwiek problemy, daj nam znać w polu komentarza poniżej.

FastComments został zaprojektowany tak, aby można go było dostosować do twojej witryny.

Jeśli chcesz dodać niestandardowe style lub zmodyfikować konfigurację, Zobacz naszą dokumentację dotyczącą dostosowań, aby dowiedzieć się, jak.