Question

0

45

Views

Changing a Squarespace button URL based on device

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>

3 months ago ·

Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-11T11:06:16.383Z

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?

Answer 2 · 2022-07-11T11:06:16.392Z

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>