仅在单击按钮后显示Google客户评论

Question

我正在使用Google的客户评论。它工作正常。但我的目标是，只有在我点击id="google-review"的按钮后才会加载自动覆盖

层

原始代码是：

    <script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>
<script>
        window.renderOptIn = function() {
            window.gapi.load('surveyoptin', function() {
                window.gapi.surveyoptin.render(
                    {
                        "merchant_id": number,
                        "order_id": order_id,
                        "email": customer_email,
                        "delivery_country": delivery_country,
                        "estimated_delivery_date": estimated_delivery_date,
                        "opt_in_style": "BOTTOM_TRAY"
                    });
            });
        }
</script>

我试过了：

    $("#google-review").click(function() {
    window.renderOptIn = function () {
        window.gapi.load('surveyoptin', function () {
            window.gapi.surveyoptin.render(
                {
                    "merchant_id": number,
                    "order_id": order_id,
                    "email": customer_email,
                    "delivery_country": delivery_country,
                    "estimated_delivery_date": estimated_delivery_date,
                    "opt_in_style": "BOTTOM_TRAY"
                });
        });
    }
});

但这行不通。叠加层根本没有加载。我怎样才能实现我的目标？

Answer 1

尝试相反的方法。脚本源加载调用renderOptin 。然后，这将设置一个单击处理程序。实际点击执行函数中的代码：

window.renderOptIn = function() {
  $("#google-review").click(function() {
    window.gapi.load('surveyoptin', function() {
      window.gapi.surveyoptin.render({
        "merchant_id": number,
        "order_id": order_id,
        "email": customer_email,
        "delivery_country": delivery_country,
        "estimated_delivery_date": estimated_delivery_date,
        "opt_in_style": "BOTTOM_TRAY"
      });
    });
  });
}

Answer 2

另一种解决方案只是在加载 js 时避免参数 'onload'，如下所示：

<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
$("#google-review").click(function() {
    window.gapi.load('surveyoptin', function () {
        window.gapi.surveyoptin.render({
                "merchant_id": number,
                "order_id": order_id,
                "email": customer_email,
                "delivery_country": delivery_country,
                "estimated_delivery_date": estimated_delivery_date,
                "opt_in_style": "BOTTOM_TRAY"
            });
    });
});
</script>

Answer 3

对我来说这是有效的，尤其是与PHP结合使用

$('.send-trigger').on('click',function(){
            var orderId = $(this).attr('order-id');
            var custEmail = $(this).attr('customer-email');
            window.gapi.load('surveyoptin', function() {
                window.gapi.surveyoptin.render(
                {
                "merchant_id": 1234534535345354,
                "order_id": orderId,
                "email": custEmail,
                "delivery_country": "XX",
                "estimated_delivery_date": "<?= date('Y-m-d') ?>"
                });
            });
});