Dodajte komentare na Wix sajtove

У овом примеру додаваћемо FastComments Live Commenting на странице објава на блогу.

Да бисмо то урадили, отворићемо наш сајт у Wix уређивачу.

Затим, морамо бити сигурни да уређујемо праву страницу.

Желимо да будемо сигурни да приказујемо јединствену нит коментара за сваку објаву на блогу, па хајде да уредимо Blog Pages -> Post.

Корак један: Уредите динамичку страницу објаве

Затим ћемо отићи на Add -> Embed Code -> Embed HTML.

Корак два: Додајте уграђени HTML блок

Ово ће нам дати тужно изгледајући блок за почетак:

Почетни блок

Овај пример користи прилагођени код како би био компатибилан са Wix-ом. Нећете моћи да користите FastComments исечке кода из других туторијала.

Отворите формулар да бисте додали наш прилагођени HTML дијалог кликом на Enter Code и избором HTML:

Корак 3: Отворите HTML дијалог

Копирајте следећи HTML исечак и налепите га у дијалог, па кликните на Ажурирај:

Пример кода за коментаре на 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

Корак 3: Налепите и сачувајте

Сада бисте требали видети веома малу верзију виджета за коментаре:

Корак 3: Резултат

Даље ћемо позиционирати и подесити величину овог елемента да одговара нашој страници.

Сада када смо додали видгет за коментаре, хајде да га поставимо на нашој страници.

Корак 4: Промена величине

Помоћу овог упутства бићемо у стању да променимо текућу нит у зависности од активне странице. Међутим, нећемо моћи да динамички мењамо величину видгета за коментаре док Wix не омогући ову функционалност. До тада ћете морати да одлучите колико велик желите да буде простор за коментаре на вашој страници и да га одговарајуће величине подесите.

Затим, хаје да подесимо ствари тако да се нит коментара мења у зависности од тренутне странице, омогућавајући корисницима да дискутују о тренутно приказаном садржају.

Без следећих корака, имаћете само једну глобалну нит коментара за цео сајт - што није баш корисно.

Дев Мод

Да бисмо додали ову функционалност, мораћемо да уђемо у оно што Wix назива Dev Mode.

Кликните на опцију Dev Mode на врху екрана.

Омогући Дев Мод

Поставите ID елемента

Додаћемо прилагођени код да бисмо то постигли, али прво морамо дати новом embed елементу ID на који ћемо се позивати.

Хајде да га назовемо fastcomments.

Кликните на нови embed елемент који смо додали, и у дев мод у доњем десном углу требало би да видите ID поље са вредношћу попут html1:

ID Поље

Промените ово у fastcomments и притисните ентер:

Постави ID

Сада можемо додати наш прилагођени код који говори области коментара коју страницу гледамо.

На дну екрана требало би да видите уређивач кода попут овог:

Отвори Уређивач

Копирајте следећи код и налепите га тамо:

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

Додај Код за Навигацију

Сада можемо да удахнемо и прегледамо наш сајт. Требало би да видите одељак за коментаре који се мења у зависности од странице. Честитамо!

Ако имате било каквих проблема, јавите нам у пољу за коментар испод.

FastComments је дизајниран да се прилагоди вашем сајту.

Ако желите да додате прилагођени стил, или подесите конфигурацију, Погледајте нашу документацију за прилагођавање да бисте сазнали како.