Attributes 'Copy to Clipboard' not woking on Collection list.
Hey, any idea how I can get the copy to clipboard Attribute by finsweet working for each collection item?
I'm targeting a text block that's rendering a link from a few locations depending on the resource. I have the copy to clipboard attributes set in the right places but it's just getting the link from the first collection item on all items. I think I need to loop through all the .resource-card elements and apply the script to each one but Ii'm not sure how to do that with out starting from scratch on the JS and inputting manually. Preview: https://preview.webflow.com/preview/climate-connect?utm_medium=preview_link&utm_source=designer&utm_content=climate-connect&preview=ff26b2ec03f3b291c962d891d80674bf&pageId=6411e5b190e69fafff5e0fa1&workflow=preview Live: https://climate-connect.webflow.io/dev/resources -The text link value is hidden, the class is .social-share_link-url -The click trigger is in the social share card Attribute: https://finsweet.com/attributes/copy-to-clipboard#documentation Appreciate any guidance. Thank you.
I'm targeting a text block that's rendering a link from a few locations depending on the resource. I have the copy to clipboard attributes set in the right places but it's just getting the link from the first collection item on all items. I think I need to loop through all the .resource-card elements and apply the script to each one but Ii'm not sure how to do that with out starting from scratch on the JS and inputting manually. Preview: https://preview.webflow.com/preview/climate-connect?utm_medium=preview_link&utm_source=designer&utm_content=climate-connect&preview=ff26b2ec03f3b291c962d891d80674bf&pageId=6411e5b190e69fafff5e0fa1&workflow=preview Live: https://climate-connect.webflow.io/dev/resources -The text link value is hidden, the class is .social-share_link-url -The click trigger is in the social share card Attribute: https://finsweet.com/attributes/copy-to-clipboard#documentation Appreciate any guidance. Thank you.
Copy to Clipboard for Webflow - No-code using Attributes
Set any element on the page as a click trigger for copy to clipboard functionality
9 Replies
Hey @Scott Humphrey I don't see the script on your page
I also don't see the attribute anywhere - you said it's on the social share card? Which classname is that in navigator?
Also your live page has a password
@Scott Humphrey did this help?
Hey @Web Bae password is : OM2023
The scripts are there and the class with the attribute is highlighted in purple. It works fine, when click the 'copy link' in the first item, if you click it in any other items it copies the first item link still. I just need a way to loop the function so it's unique to each item and gets correct link.
I see
the "copy-this" attribute isn't being applied to the correct item in this case because you've but it inside an embed
try adding the attributes to the div inside your embed
like this:
unfortunately that didn't seem to work. Having trouble with this one, I've added a gated card too that pops up a form which is placed inside the CMS item but when clicking it opens all forms for for each item. Taking a break from it and will tackle it fresh again later or tomorrow.
Thanks for any advice in the meantime.
// Select all modal trigger buttons
const modalTriggerButtons = document.querySelectorAll('.resource-ci .resource-card_form-trigger');
// Add click event listener to each button
modalTriggerButtons.forEach((button) => {
button.addEventListener('click', () => {
// Retrieve the ID of the modal to open
const modalId = button.getAttribute('data-modal');
// Select the modal with the matching ID that is a child of the same parent element as the button
const parentItem = button.closest('.resource-ci');
const modal = parentItem.querySelector(#${modalId});
// Open the selected modal
modal.classList.add('is-open');
});
})
This fixed the modal pop issues
I fixed it dude, used the copy sibling attribute instead and all worked.