te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Trustpilot TrustBoxes in Next.js - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Trustpilot TrustBoxes in Next.js - Stack Overflow

    javascript - Trustpilot TrustBoxes in Next.js - Stack Overflow

    programmeradmin3浏览0评论

    I am trying to add a Trustpilot TrustBox to a Next.js app.

    I have this in my ponentDidMount: 

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

    This in my Head:

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

    And this in my 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="" target="_blank">Trustpilot</a>
</div>

    This works fine on hot reload. E.g. if I add the code while the server is running. But o fresh re-load it breaks and I get the following error:

    Cannot read property 'loadFromElement' of undefined

    Any ideas?

    I am trying to add a Trustpilot TrustBox to a Next.js app.

    I have this in my ponentDidMount: 

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

    This in my Head:

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

    And this in my 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./review/XX" target="_blank">Trustpilot</a>
</div>

    This works fine on hot reload. E.g. if I add the code while the server is running. But o fresh re-load it breaks and I get the following error:

    Cannot read property 'loadFromElement' of undefined

    Any ideas?

    • javascript
    • reactjs
    • next.js
    • trustpilot
    Share Improve this question asked Sep 24, 2018 at 9:56 JonnyJonny 1411 silver badge5 bronze badges
    Add a ment  | 

    2 Answers 2

    Reset to default 11

    Figured it out. You need the following code in ponentDidMount to ensure the external js is loaded first.

    ponentDidMount() {
    var aScript = document.createElement('script');
    aScript.type = 'text/javascript';
    aScript.src = "//widget.trustpilot./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);
    };
}

    Hope this helps anyone stuck with the same thing.

    For future readers, Trustpilot has now a documentation for single page apps that you can find here

    I was wondering why nothing was rendered even with their official documentation but after 2 hours of pain I found out that (at the time i am writing this) you can't load their widget on the Brave navigator...

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论