How do I Rotate text/link in header.liq upon a page refresh using code

Store Design
, ,
1

I have the following text and link in my header.liq code that I use and to change it I have to enter new information in the link and text. I want to change or rotate this to a different text and link on each page refresh choosing either in order or randomly a set of text/links.

Sample of existing code:

RF Connector Marine Grade Heat Shrink Tubing - Back In Stock!

Is this possible to do using code in Liq?

Thank you

2

Hi @davefant ,

First of all, your HTML code seems to be wrong because the element has a closed tag , so you should change code like

<a id='my-link' href="https://www.URLHERE.com/collections/heat-shrink" alt="Heat Shrink Link"><b><font size="+1"><font color="#FF0000"><i id='link-name'>RF Connector Marine Grade Heat Shrink Tubing - Back In Stock!</i></font></font></b></a>

or like (after format)

<a
  id="my-link"
  href="https://www.URLHERE.com/collections/heat-shrink"
  alt="Heat Shrink Link"
  ><b
    ><font size="+1"
      ><font color="#FF0000"
        ><i id="link-name"
          >RF Connector Marine Grade Heat Shrink Tubing - Back In Stock!</i
        ></font
      ></font
    ></b
  ></a
>

Then, to change to random link every time you refresh the page, Add the code below

NOTE:

1. This code must be added in the end of tag, after document rendered your link, I suggest adding this before “” (because if the elements haven’t been rendered, the script can’t find them)

2. You must add id for and for the script finding the right element to change

<script>
    var arr = [
      {
        href: "https://www.URLHERE.com/collections/heat-shrink",
        name: "RF Connector Marine Grade Heat Shrink Tubing - Back In Stock!"
      },
      {
        href: "https://youtube.com",
        name: "https://youtube.com"
      },
      {
        href: "https://facebook.com",
        name: "https://facebook.com"
      },
      {
        href: "https://google.com",
        name: "https://google.com"
      },
      {
        href: "https://alooo.com",
        name: "https://alooo.com"
      }
    ];
 
    function random_link(arr) {
        return arr[(Math.floor(Math.random() * arr.length))];
    }
       
    const random = random_link(arr);
    document.querySelector('#my-link').href = random.href;
    document.querySelector('#link-name').innerHTML = random.name;
</script>

  • arr: is your link array

  • function ‘random_link’ will choose random element in your array

We will find the by id of it “my-link” and the by id of it “link-name”, then we change the attribute href and innerHTML to your random value

Hope it helps [email removed]
3

I typed my example syntax wrong it seems, but I am glad you understood what I was after. I will give this a try later today. Thanks got the assist!

4

Excellent advice and success, thank you!