Checkout breaks when adding Google reviews badge

[damianb123]

Hi,

      We're running magento 2.2.5.  On our old Magento 1.7.0.2 platform we used the Google reviews corner badge.  If I add the corner badge to the backend footer html in this format:

<!-- BEGIN: Google Certified Shops -->
<script type="text/javascript">
var gts = gts || [];

gts.push(["id", "XXXXXX"]);
gts.push(["badge_position", "BOTTOM_RIGHT"]);
gts.push(["locale", "en_GB"]);
gts.push(["google_base_offer_id", "ITEM_GOOGLE_SHOPPING_ID"]);
gts.push(["google_base_subaccount_id", "XXXXXXXX"]);

(function() {
var gts = document.createElement("script");
gts.type = "text/javascript";
gts.async = true;
gts.src="https://www.googlecommerce.com/trustedstores/api/js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gts, s);
})();
</script>
<!-- END: Google Certified Shops -->

The trouble is when we go through checkout it causes the Ajax spinner to just keep spinning and we get an error regarding cross site:

Uncaught DOMException: Blocked a frame with origin

Is there an easy way to apply custom javascript via the footer in the backend?

Thanks

Damian

[Manish Mittal]

Hello @damianb123

Hit this url https://www.googlecommerce.com/trustedstores/api/js and save it on your local JS folder.

Replace JS path into your script. Now run below commands:

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin:magento cache:flush

Set permission if required

It will work perfectly now, cheers

[damianb123]

Hi Manish,
Many thanks for your comment. I have tried to get this to work, but it still fails. I have copied the JS and created a file called: gooreviews.js, added this file to my:
App/design/frontend/author/theme/module/web/js
I have run the 3 commands, and I can see the js file has been created in the static folder.
If I now test access to the JS file, I can access it, so I added the following to my
Content -> Configuration -> Theme -> Footer (custom html) as:




Thanks
Damian

[Manish Mittal]

After adding it to Content -> Configuration -> Theme -> Footer (custom html) , working fine?

[damianb123]

Hi Manish,

     No, it missed some of my message to you.... this is it:

Hi Manish,

        Many thanks for your comment.  I have tried to get this to work, but it still fails.  I have copied the JS and created a file called: gooreviews.js, added this file to my:

App/design/frontend/author/theme/module/web/js

I have run the 3 commands, and I can see the js file has been created in the static folder.

If I now test access to the JS file, I can access it, so I added the following to my

Content -> Configuration -> Theme -> Footer (custom html) as:

<!-- BEGIN GCR Badge Code -->

<script src="https://mywebsite.com/pub/static/frontend/author/theme/en_GB/module/js/gooreviews.js"  async defer>

</script>

<script>

  window.renderBadge = function() {

    var ratingBadgeContainer = document.createElement("div");

      document.body.appendChild(ratingBadgeContainer);

      window.gapi.load('ratingbadge', function() {

        window.gapi.ratingbadge.render(

          ratingBadgeContainer, {

            // REQUIRED

            "merchant_id": XXXXXX,

            // OPTIONAL

            "position": "BOTTOM_LEFT"

          });          

     });

  }

</script>

<!-- END GCR Badge Code -->

Thanks

Damian

[Manish Mittal]

<!-- BEGIN: Google Certified Shops -->
<script type="text/javascript">
var gts = gts || [];

gts.push(["id", "XXXXXX"]);
gts.push(["badge_position", "BOTTOM_RIGHT"]);
gts.push(["locale", "en_GB"]);
gts.push(["google_base_offer_id", "ITEM_GOOGLE_SHOPPING_ID"]);
gts.push(["google_base_subaccount_id", "XXXXXXXX"]);

(function() {
var gts = document.createElement("script");
gts.type = "text/javascript";
gts.async = true;
gts.src="https://mywebsite.com/pub/static/frontend/author/theme/en_GB/module/js/gooreviews.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gts, s);
})();
</script>

<!-- END: Google Certified Shops -->

Can you please try with this and let me know what issue you are facing now as earlier it was cross domain and now?

[damianb123]

Hi Manish,

     That now displays the badge but still breaks checkout - it looks like there are lots of other calls to Google once this runs, so the error still exists.

Can I try anything else?

Damian

[Manish Mittal]

Hello @damianb123

Great! at least fixed one problem. Can you please share now what you are facing the issue. 

[damianb123]

Hi Manish,
It Is just exactly the same - cross site script issue. When I check developer tools I can see that the badge is making more external calls to Google, which is crashing the checkout page.
Damian

[damianb123]

Manish,

       I know what the issue is now.  I have some more javascript calling an external JS file in my header.  What is the right way to call these external source files?  Surely copyign their external JS scripts locally is bad if they update change them?

Damian