cancel
Showing results for 
Search instead for 
Did you mean: 

Checkout breaks when adding Google reviews badge

Checkout breaks when adding Google reviews badge

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

10 REPLIES 10

Re: Checkout breaks when adding Google reviews badge

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 Smiley Happy

 

Manish Mittal
https://www.manishmittal.com/

Re: Checkout breaks when adding Google reviews badge

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

Re: Checkout breaks when adding Google reviews badge

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

Manish Mittal
https://www.manishmittal.com/

Re: Checkout breaks when adding Google reviews badge

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

 

 

Re: Checkout breaks when adding Google reviews badge

<!-- 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?

Manish Mittal
https://www.manishmittal.com/

Re: Checkout breaks when adding Google reviews badge

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

Re: Checkout breaks when adding Google reviews badge

Hello @damianb123

 

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

Manish Mittal
https://www.manishmittal.com/

Re: Checkout breaks when adding Google reviews badge

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

Re: Checkout breaks when adding Google reviews badge

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