Добавяне на коментари към Wix сайтове

За този пример ще добавим FastComments Live Commenting към страниците с публикации в блога.

За да направим това, ще отворим нашия сайт в редактора на Wix.

След това трябва да се уверим, че редактираме правилната страница.

Искаме да се уверим, че показваме уникална нишка с коментари за всяка публикация в блога, затова нека редактираме Blog Pages -> Post.

Стъпка 1: Редактирайте динамичната страница на публикацията

След това ще отидем на Add -> Embed Code -> Embed HTML.

Стъпка втора: Добавяне на Embed HTML блок

Това ще ни даде тъжно изглеждащ блок, с който да започнем:

Начален блок

Този пример използва персонализиран код, за да е съвместим с Wix. Няма да можете да използвате фрагментите с код на FastComments от другите уроци.

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

Стъпка 3: Отворете HTML диалога

Копирайте следния HTML фрагмент и го поставете в диалога, след което кликнете върху Update:

Кодов фрагмент за коментари в 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: Преоразмеряване

С този урок ще можем да променяме текущата нишка (thread) в зависимост от активната страница. Въпреки това няма да можем да преоразмеряваме коментарната джаджа динамично, докато Wix не предостави тази функционалност. До тогава ще трябва да решите колко голяма искате да бъде областта за коментари на вашата страница и да я оразмерите съответно.

След това нека настроим нещата така, че нишката с коментари да се променя според текущата страница, позволявайки на потребителите да обсъждат показваното в момента съдържание.

Без следните стъпки ще имате само една глобална нишка с коментари за целия ви сайт - което не е много полезно.

Dev Mode

За да добавим тази функционалност, ще трябва да влезем в това, което Wix нарича Dev Mode.

Кликнете върху опцията Dev Mode в горната част на екрана.

Активиране на Dev Mode

Задаване на Element ID

Ще добавим персонализиран код, за да постигнем това, но първо трябва да дадем на новия вграден елемент ID, чрез който да го препращаме.

Нека го наречем fastcomments.

Кликнете върху новия вграден елемент, който добавихме, и в dev mode в долния десен ъгъл трябва да видите поле ID със стойност като html1:

Полето ID

Променете това на fastcomments и натиснете enter:

Задаване на ID

Сега можем да добавим нашия персонализиран код, който казва на зоната с коментари коя страница разглеждаме.

В долната част на екрана трябва да видите редактор на код като този:

Отваряне на редактора

Копирайте следния код и го поставете там:

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

Добавяне на кода за навигация

Сега можем да поемем въздух и да прегледаме сайта си. Трябва да видите секция за коментари, която се променя в зависимост от текущата страница. Поздравления!

Ако имате някакви проблеми, уведомете ни в полето за коментари по-долу.

FastComments е проектиран да бъде персонализиран, за да съответства на вашия сайт.

Ако искате да добавите персонализирани стилове или да настроите конфигурацията, Прегледайте нашата документация за персонализация, за да научите как.