Trustpilot TrustBoxes в Next.js - PullRequest
Новая
       23

Trustpilot TrustBoxes в Next.js

0 голосов
/ 24 сентября 2018

Я пытаюсь добавить Trustpilot TrustBox в приложение Next.js.

У меня есть это в моем componentDidMount: 

 var trustbox = document.getElementById('trustbox');
 window.Trustpilot.loadFromElement(trustbox);

Это в моей голове: 

<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>

И это в моем html: 

<div id="trustbox" className="trustpilot-widget" data-locale="en-GB" data-template-id="XX" data-businessunit-id="XX" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="5" data-schema-type="Organization">
    <a href="https://uk.trustpilot.com/review/XX" target="_blank">Trustpilot</a>
</div>

Это прекрасно работает при горячей перезагрузке.Например, если я добавлю код во время работы сервера.Но при новой перезагрузке происходит сбой, и я получаю следующую ошибку:

Не удается прочитать свойство 'loadFromElement' из неопределенного

Есть идеи?

1 Ответ

0 голосов
/ 24 сентября 2018

Разобрался.Вам нужен следующий код в componentDidMount, чтобы убедиться, что внешние js загружаются первыми. 

componentDidMount() {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = "//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js";
    aScript.async = "true"
    document.head.appendChild(aScript);
    aScript.onload = function () {
        var trustbox = document.getElementById('trustbox');
        window.Trustpilot.loadFromElement(trustbox);
    };
}

Надеюсь, это поможет любому, кто застрял с тем же.

...