I successfully integrated FB Messenger into my OpenCart 3.0.3.7 website using the instructions from here https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/ Under the default theme, it works perfectly and as expected, but when I use the zeexo theme for some reason (I suspect js or css conflict??) it shows a white circle that does not respond to anything. How to overcome this problem? What part

OpenCart theme problem with facebook messenger

I successfully integrated FB Messenger into my OpenCart 3.0.3.7 website using the instructions from here https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/

  <div id="fb-root"></div>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v10.0'
          });
        };

        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = 'https://connect.facebook.net/el_GR/sdk/xfbml.customerchat.js';
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
      </script>

      <!-- Your Chat Plugin code -->
      <div class="fb-customerchat"
        attribution="setup_tool"
        page_id="00000000000000">
      </div>

Under the default theme, it works perfectly and as expected, but when I use the zeexo theme for some reason (I suspect js or css conflict??) it shows a white circle that does not respond to anything. How to overcome this problem? What part of the code is responsible for this behavior?

Answer

There was a JS conflict with the theme’s Facebook widget.

All I had to do, was to replace the “bad” or old (??) JS code under the catalogviewthemezeexotemplatecommonheader.twig

        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

with the newer, I got from the Facebook SDK

  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v10.0'
      });
    };

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/el_GR/sdk/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

Now it works on both Facebook widget and FB messenger chat.

Advertisement

Answer