Додати коментарі до сайтів Wix

У цьому прикладі ми додамо FastComments Live Commenting на сторінки дописів блогу.

Для цього відкриємо наш сайт у редакторі Wix.

Потім потрібно переконатися, що ми редагуємо правильну сторінку.

Ми хочемо переконатися, що для кожного допису блогу відображається унікальна тема коментарів, тому відредагуємо Blog Pages -> Post.

Крок перший: Редагування динамічної сторінки допису

Потім перейдемо до 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: Зміна розміру

За допомогою цього підручника ми зможемо змінювати поточну нитку залежно від активної сторінки. Однак ми не зможемо динамічно змінювати розмір віджета коментарів, поки Wix не відкриє цю функціональність. До того часу вам доведеться вирішити, яким має бути блок для коментарів на вашій сторінці, і встановити для нього відповідний розмір.

Далі налаштуємо так, щоб потік коментарів змінювався залежно від поточної сторінки, дозволяючи користувачам обговорювати відображений вміст.

Без наступних кроків у вас буде лише один глобальний потік коментарів для всього сайту — що не дуже корисно.

Режим розробника

Щоб додати цю функціональність, нам потрібно увійти в те, що Wix називає Dev Mode.

Натисніть опцію Dev Mode у верхній частині екрана.

Увімкнути Dev Mode

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

Ми додаватимемо власний код для цього, але спочатку потрібно присвоїти новому вбудованому елементу ідентифікатор, за яким будемо звертатися.

Назвімо його fastcomments.

Клацніть по новому вбудованому елементу, який ми додали, і в режимі розробника (у нижньому правому куті) ви побачите поле ID зі значенням на кшталт html1:

Поле ID

Змініть його на fastcomments і натисніть Enter:

Встановити 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 розроблено, щоб його можна було налаштувати під ваш сайт.

Якщо ви хочете додати власні стилі або змінити конфігурацію, Перегляньте нашу документацію з налаштувань та конфігурації, щоб дізнатися, як.