Jump to content

[Share] Click List item title - Open an email

Recommended Posts

Posted

You can follow these to achieve effect "Click List item title >> Open an email Or click list item title >> Open a new page"

#1. First, you need to enable Button

image.png.845a92975d87c1456ae60b3071d859b5.png

#2. Add Email link to Button by clicking Attach Link > Choose Email

image.png.827583bee201304289630ac22e515854.png

and enter your email/subject/message

image.png.e2d73db3424df7d7c1b27bc7c886b759.png

#3. Find ID of List Simple Section


In my example, it is:

section[data-section-id="673db68dc3687009034aeeb9"]

image.png.97856448e447bb440214d909191dfba4.png

#4. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    function wrapImageWithLink() {
        const listItems = $('section[data-section-id="673db68dc3687009034aeeb9"] .list-item');
        listItems.each(function() {
            const img = $(this).find('h2.list-item-content__title');
            const link = $(this).find('.list-item-content__button-wrapper a');
            if (img.length && link.length) {
                const newLink = $('<a>').attr('href', link.attr('href'));
                img.before(newLink);
                newLink.append(img);
            }
        });
    }
    wrapImageWithLink();
});
</script>

image.png.416d32eb4de2f024985c9a094cc6438d.png

#5. To hide buttons, you can add this code under

<style>
section[data-section-id="673db68dc3687009034aeeb9"] .list-item-content__button-wrapper {
    display: none;
}
</style>

image.png.1c6c7592f17d09bf93c67ca93feee177.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • Replies 0
  • Views 48
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.