Add Comments to BigCommerce Sites

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

Для цього перейдіть до Storefront, а потім до Themes.

Виберіть Storefront

Виберіть Themes

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

Далі ми не будемо натискати Customize. Натомість натисніть Advanced та Make a Copy.

Створити копію

Підтвердіть копіювання теми:

Збережіть копію

Після завершення ви повинні побачити вашу тему в розділі Themes внизу сторінки, як показано нижче.

Користувацька тема створена

Тепер ми можемо редагувати нашу нову тему, щоб додати FastComments.

Редагувати файли теми

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

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

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

У лівій навігації перейдіть до templates->pages->blog-post.html.

Відкрийте шаблон

Далі скопіюйте код, який ми будемо використовувати для встановлення FastComments:

BigCommerce Comments Code

Copy

1

2<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>

3<div id="fastcomments-widget"></div>

4<script>

5window.fcConfigs = [{

6 "tenantId": "demo"

7}];

8</script>

9

Тепер ми вставимо код віджета на Line 6. Важливо, щоб код був доданий перед рядком з {{/partial}}.

Вставте на Line 6

У вас має вийти щось подібне до цього:

Після додавання коду

Тепер ми можемо зберегти файл:

Зберегти

...і вийти з редактора:

Редагувати редактор

Наш останній крок — використати новий шаблон теми.

У верхньому правому куті тепер ви побачите або Publish або Make Active Theme. Натисніть на нього, щоб продовжити і опублікувати зміни:

Опублікувати зміни

Тепер можемо переглянути наш сайт! Якщо перейти до повідомлення блогу, внизу має з'явитися поле для коментарів.

Зміни застосовано

Чудова робота! Ви додали функцію коментування в режимі реального часу на ваш сайт BigCommerce.

Якщо ви зіткнулися з помилкою 'permission denied' або хочете налаштувати FastComments, читайте далі.

FastComments спроектовано так, щоб його можна було налаштувати під ваш сайт.

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

Не рекомендується додавати FastComments через Page Builder BigCommerce, оскільки в такому разі код доведеться вручну додавати на кожну потрібну сторінку.

Однак, якщо це бажано, слід використовувати наведену нижче частину коду. Фрагменти коду з інших підручників не працюватимуть через особливості BigCommerce:

Фрагмент для конструктора сторінок BigCommerce

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 let loaded = false;

7 function attemptLoad() {

8 if (loaded) {

9 return;

10 }

11 if (!window.FastCommentsUI) {

12 return;

13 }

14 FastCommentsUI(document.getElementById('fastcomments-widget'), {

15 tenantId: "demo"

16 });

17 loaded = true;

18 }

19 attemptLoad();

20 const interval = setInterval(function () {

21 attemptLoad();

22 if (loaded) {

23 clearInterval(interval);

24 }

25 }, 300);

26 })();

27</script>

28