Changing a Squarespace button URL based on device

Question

Trying to change the URL based on device for a Squarespace button. It's worth mentioning that the element is created dynamically.

I've gotten searching by class to work as I couldn't get search by id or the query selector to work. The problem now is that search by class generates a list of nodes and I can't seem to get a for loop to correctly select the href.

Might be some other issue I'm not aware of.

This is the code I've tried so far

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1634189249286_8011"><div class="sqs-block-content" id="yui_3_17_2_1_1634205387553_330">

<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small" id="yui_3_17_2_1_1634205387553_329">
    <a href=“http:/google.com” class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">Learn more</a>
</div>
</div></div>

The class of the first div is the one found by the search

 

 <script>

 let n = document.getElementsByClassName("sqs-block button-block sqs-block-button");

   for(var i=0; i < n.length; i++) 
   {
      n[i].addEventListener("click", function(e)
      {
        if(e.target && e.target.nodeName == "a") 
        {
          console.log("item clicked");
        }
      });
  }

</script>

score 0 · Answer 1 · answered Oct 14 '21 at 02:20

0

Check your navigator.userAgent to see if you are getting any value. Also, if your download button in loading dynamically, it will not be selected like this. Try console logging the download button before your if logic to see the value you get.

To target values created dynamically check Event Delegation: What is DOM Event delegation?

answered Oct 14 '21 at 02:20

Muhammed Sabeeh

185
11

Thanks, looks like a great starting point. Didn't realise targeting values would require understanding of all that. – RaySchroeder Oct 14 '21 at 05:40

RaySchroeder · Answer 2 · 2021-10-15T13:38:07.130

Found a freelancer on Upwork to finish the task

< script src = "https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity = "sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin = "anonymous" > < /script> < script >
  var operatingsystem = [{
      name: 'iPhone',
      value: 'iPhone',
      version: 'OS'
    },
    {
      name: 'iPad',
      value: 'iPad',
      version: 'OS'
    },
    {
      name: 'Macintosh',
      value: 'Mac',
      version: 'OS X'
    },
  ];

var requestHeader = [
  navigator.platform,
  navigator.userAgent,
  navigator.appVersion,
  navigator.vendor,
  window.opera
];

function findDeviceOS(string, data) {
  var i = 0,
    j = 0,
    html = '',
    regex,
    regexv,
    match,
    matches,
    version;

  for (i = 0; i < data.length; i += 1) {
    regex = new RegExp(data[i].value, 'i');
    match = regex.test(string);
    if (match) {
      regexv = new RegExp(data[i].version + '[- /:;]([\d._]+)', 'i');
      matches = string.match(regexv);
      version = '';
      if (matches) {
        if (matches[1]) {
          matches = matches[1];
        }
      }
      if (matches) {
        matches = matches.split(/[._]+/);
        for (j = 0; j < matches.length; j += 1) {
          if (j === 0) {
            version += matches[j] + '.';
          } else {
            version += matches[j];
          }
        }
      } else {
        version = '0';
      }
      return {
        name: data[i].name,
        version: parseFloat(version)
      };
    }
  }
  return {
    name: 'unknown',
    version: 0
  };
}

var requestagent = requestHeader.join(' ');
var operatingsystem = this.findDeviceOS(requestagent, operatingsystem);

//unknown means user outside of apple device
btn_link = 'https://apps.apple.com/us/app/rna-translation/id1508192093?ls=1'
if (operatingsystem.name == 'unknown') {
  btn_link = 'https://android.com'
}
$(function() {
  $('#block-yui_3_17_2_1_1588401406921_37594 a').attr('href', btn_link);
}); </script>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 15 '21 at 03:38

Changing a Squarespace button URL based on device

2 Answers2