Jump to content

Adding buttons to summary block

Recommended Posts

Hi, I'm currently trying to add a button to the summary block, with events content. with javascript :

<script>
  window.addEventListener('load', function () {
    addGoToButtons('.sqs-gallery-meta-container');
  });

  function addGoToButtons(id) {
    document.querySelectorAll(id).forEach(function append(element) {
      var url = element.querySelector('.summary-title-link').href;
      var link = createButton(url);
      element.appendChild(link);
    })
  }

  function createButton(url) {
    var node = document.createElement('div');
    var linkNode = document.createElement('a');
    var linkText = document.createTextNode('En savoir plus');
    node.classList.add('sqs-block-button');
    linkNode.appendChild(linkText);
    linkNode.title = 'En savoir plus';
    linkNode.href = url;
    linkNode.classList.add('sqs-block-button-element--small', 'sqs-block-button-element');
    node.appendChild(linkNode);
    return node;
  }
</script>

The script work well, but 1 time on 3, depending of the loading order of others scripts the DOM is reset after my function was executed, and my buttons disappear. I tried to inject my code in the page, then in code injection in parameters in the header then in the footer without success...

Do you know how i can fix this? Thanks!

Link to comment
  • Replies 1
  • Views 747
  • Created
  • Last Reply

Nevermind, we did it with css  :

 

<style>
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item, .sqs-block-summary-v2 .summary-item.positioned {
    padding-bottom: 50px !important;
  }
  .summary-content {
    position:relative;
  }
  .summary-title .summary-title-link::after {
    content: 'En savoir plus';
    background-color: #1171bb;
    border-radius: 30px;
    display: block;
    padding: 13px 26px;
    font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: #1171bb;
    border-color: #1171bb;
    position: absolute;
    bottom: -45px;
  }
  
  .summary-title .summary-title-link:hover::after {
    opacity: .8;
  }
  
  .summary-title .summary-title-link:hover {
    color: #212231 !important;
  }
</style>

 

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.