mSchmit Posted April 21, 2020 Share Posted April 21, 2020 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
mSchmit Posted April 22, 2020 Author Share Posted April 22, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.