CODEWITHSUNDEEP
javascriptshopifyliquid
abelvf
abelvf

Reputation: 13

How to change Shopify Title if the Browser tab is active or not

I'm trying to accomplish this in Shopify.

If the user has the browser tab active (change the page title to message A) and if the tab is not active (change page title to show message B).

For some reason, something is missing or wrong in my code.

I'm inserting this code in the header of the file: theme.liquid

<script>
      $(function () {
          leftTitle = 'Message A'; 
          backTitle = 'Message B';

          $(window).blur(function () {
              page.title = leftTitle;
          });

          $(window).focus(function () {
              page.title = backTitle;
          });
      });

    </script>

Any advice?

Upvotes: 0

Views: 1404

Answers (2)

abelvf
abelvf

Reputation: 13

I found the solution myself:

<script>
  var message = "Insert your message here";
  var original = document.title;

  window.onblur = function () { document.title = message; }
  window.onfocus = function () { document.title = original; }
</script>

Upvotes: 0

M -
M -

Reputation: 28492

I think you're trying to use document.title = leftTitle; and document.title = backTitle;

page doesn't exist natively on browsers, unless you've declared it before, so page.title doesn't change anything; it should give you a console error.

var leftTitle = 'Blurred'; 
var backTitle = 'Focused';

window.onblur = function () {
    console.log("Blur");
    document.title = leftTitle;
};

window.onfocus = function () {
    console.log("Focus");
    document.title = backTitle;
};

console.log("Event listeners initialized.");

Upvotes: 4

Related Questions