Jump to content

Adding JavaScript to Button

Recommended Posts

I'm trying to add a JavaScript to a button to bring up a BackerKit pre-order store. An example of what I'm trying to do (though I don't think it's a Squarespace site): top right corner of https://lynqme.com/

With the code provided below from BackerKit in a code block I was able to get things to work with clickable "Pre-order Now" text...

<script>
    (function() {
      var script = document.createElement('script');
      script.src = 'https://backerkit.com/assets/preorders.js';
      script.async = true;
      var entry = document.getElementsByTagName('script')[0];
      entry.parentNode.insertBefore(script, entry);
    })();
</script>

<a href="#" data-bk-preorders="https://virtueathletic.backerkit.com/overlay_preorders">Pre-order Now</a>

...and with my own fumbling through additional code I was able to get the text to kind of be a button.
<script>
    (function() {
      var script = document.createElement('script');
      script.src = 'https://backerkit.com/assets/preorders.js';
      script.async = true;
      var entry = document.getElementsByTagName('script')[0];
      entry.parentNode.insertBefore(script, entry);
    })();
</script>
<div align="right" class="sqs-block button-block sqs-block-button">
<a href="#" data-bk-preorders="https://virtueathletic.backerkit.com/overlay_preorders" class="sqs-block-button-element—small sqs-block-button-element">Pre-order now</a>
</div>

 

Unfortunately I can't get the button to look, function, and align like my regular button blocks (blue/white & white/black on hover) as seen in the attached image (blue button block on top - black JavaScript "button" on bottom.)
 

Screen Shot 2019-11-22 at 11.26.59 AM.png

Link to comment
  • Replies 2
  • Views 2.9k
  • Created
  • Last Reply

OP Update:

I was able to get a button functioning with the following code, but unfortunately it cause all other media on the page to not load. If this is in there as a code block, any page it's on only displays as the grey background color with no banner images or videos.

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-bkstore”>
    <div class="sqs-block-content" id=“bkstore”><div class="sqs-block-button-container--right" data-animation-tier="2" data-alignment="right" data-button-size="small" id=“bkstore”>
        <a href="#" data-bk-preorders="https://virtueathletic.backerkit.com/overlay_preorders" class="sqs-block-button-element--small sqs-block-button-element" target="_blank" data-initialized="true">Pre-Order Now</a>
        </div>
    </div>
</div>

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.