FastComments.com

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

С FastComments можем лесно да добавим коментари в реално време към всеки сайт на BigCommerce.

Инструкциите по-долу са за блог, изграден на BigCommerce, но биха работили добре за всяка част от BigCommerce.

Обърнете внимание, че този урок изисква акаунт в FastComments. Препоръчително е първо да се регистрирате, а след това да се върнете тук. Можете да създадете акаунт тук.

Стъпка 1: Подгответе вашата тема Internal Link

Първо, нека създадем персонализирана тема, която ще редактираме. Ако вече имате настроена персонализирана тема, можете да пропуснете тази стъпка.

За целта ще отидем на Storefront и след това на Themes.

Избор на Storefront
Избор на Storefront
Избор на Themes
Избор на Themes

За целите на това ръководство ще използваме темата по подразбиране, но инструкциите са еднакви за всички теми.

След това няма да кликнем върху Customize. Вместо това кликнете върху Advanced и Make a Copy.

Направете копие
Направете копие

Потвърдете копирането на темата:

Запазете копието
Запазете копието

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

Персонализираната тема е създадена
Персонализираната тема е създадена

Сега можем да редактираме новата си тема, за да добавим FastComments.

Редактиране на файловете на темата
Редактиране на файловете на темата

Стъпка 2: Редактирайте правилния шаблон Internal Link

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

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

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

В навигацията отляво отидете на templates->pages->blog-post.html.

Отворете шаблона
Отворете шаблона

Стъпка 3: Добавете кода на уиджета Internal Link

След това копирайте кода, който ще използваме за инсталиране на FastComments:

BigCommerce Comments Code
Copy 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}}.

Поставете на ред 6
Поставете на ред 6

Трябва да получите нещо подобно на това:

След добавяне на кода
След добавяне на кода

Сега можем да запазим файла:

Запазване
Запазване

...и да излезем от редактора:

Редактиране на редактора
Редактиране на редактора

Стъпка 4: Активирайте новата тема Internal Link

Нашата последна стъпка е да използваме новия шаблон на темата.

В горния десен ъгъл сега ще видите или Publish, или Make Active Theme. Кликнете върху него, за да продължите и да публикувате промените:

Публикувайте промените
Публикувайте промените

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

Промените са публикувани
Промените са публикувани

Успех Internal Link

Отлична работа! Добавихте живи коментари към вашия сайт в BigCommerce.

Ако сте получили грешка 'permission denied', или искате да персонализирате FastComments, продължете да четете.

Персонализиране Internal Link

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

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

Допълнително: Кодов откъс за Page Builder Internal Link

Не се препоръчва да добавяте FastComments чрез Page Builder на BigCommerce, тъй като тогава кодът трябва да бъде ръчно добавен на всяка желана страница.

Въпреки това, ако това е желателно, следният кодов фрагмент трябва да се използва. Кодови фрагменти от други уроци няма да работят поради спецификата на BigCommerce:

Фрагмент за Page Builder на BigCommerce
Copy 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>
5 window.fcConfigs = [{
6 target: '#fastcomments-widget',
7 tenantId: "demo"
8 }];
9</script>
10