Free Squarespace 7.1 Favorites Plugin: Wishlist Code Snippet

Free Squarespace 7.1 Favorites Plugin: Add a Wishlist Without Plugins or Code Backend

Looking for a lightweight Squarespace wishlist solution? This free, open-source JavaScript snippet adds a custom product favorites system with local storage, dynamic side-panel UI, and pre-filled email inquiries to any Squarespace 7.1 store without third-party subscriptions.
If you'd like to customize or modify this snippet, feel free to pass the code to ChatGPT or Claude. I am not a professional developer (unfortunatly), and these tools consistently offer great solutions! God bless you.
Code Divi — Favoris
.et_pb_preload:before{--wpr-bg-b3653dd0-5010-4624-aa38-9eb55daa720d: url('https://www.albertnet.fr/wp-content/themes/Divi/includes/builder/styles/images/preloader.gif');}
<style>

/* ==== CONFIG RAPIDE ====
   Modifiable ci-dessous : couleur d'accent et contact.
*/
:root {
    --wcfav-accent: #c41e3a;
    --wcfav-accent-dark: #8f0127;
}

/* Bouton flottant Favoris */
.wcfav-float-btn {
    position: fixed;
    bottom: 25px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 999;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: auto;
    border: none;
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.wcfav-float-btn:hover { transform: scale(1.1); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); }
.wcfav-float-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.wcfav-float-btn__tooltip {
    position: absolute;
    bottom: 54px;
    right: 0;
    background: rgba(25, 25, 25, 0.85);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.wcfav-float-btn:hover .wcfav-float-btn__tooltip { opacity: 1; }
.wcfav-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--wcfav-accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1;
}
@media (max-width: 480px) {
    .wcfav-float-btn { width: 32px; height: 32px; bottom: 18px; }
    .wcfav-float-btn svg { width: 15px; height: 15px; }
    .wcfav-float-btn__tooltip { display: none; }
}

/* Bouton favoris sous le titre/prix produit (WooCommerce) */
.wcfav-wrapper {
    text-align: center !important;
    width: 100% !important;
    margin: 20px 0 12px 0 !important;
}
.wcfav-btn-row {
    all: revert !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 13px 28px !important;
    border: 2px solid var(--wcfav-accent) !important;
    border-radius: 30px !important;
    background: white !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: var(--wcfav-accent) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
    transform: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    background-image: none !important;
    isolation: isolate !important;
    position: relative !important;
    z-index: 2 !important;
}
.wcfav-btn-row:hover,
.wcfav-btn-row:focus,
.wcfav-btn-row:active {
    background: #fdf0f2 !important;
    color: var(--wcfav-accent) !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
}
.wcfav-btn-row.is-active,
.wcfav-btn-row.is-active:hover {
    background: var(--wcfav-accent) !important;
    color: white !important;
}
.wcfav-btn-row svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Panneau favoris */
#wcfav-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}
#wcfav-panel {
    display: none;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 380px;
    max-height: 78vh;
    background: white;
    z-index: 1002;
    border-radius: 16px 0 0 0;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.2);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.wcfav-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 16px;
    color: #222;
}
.wcfav-panel-header button {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #888;
    line-height: 1;
}
.wcfav-panel-body { overflow-y: auto; padding: 12px 16px; flex: 1; }
.wcfav-empty { color: #888; font-size: 14px; text-align: center; padding: 30px 10px; line-height: 1.5; }
.wcfav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    position: relative;
}
.wcfav-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.wcfav-item-info { flex: 1; min-width: 0; }
.wcfav-item-title {
    font-size: 13px; color: #222; font-weight: 600; margin: 0 0 3px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcfav-item-price { font-size: 12px; color: #666; margin: 0; }
.wcfav-item-remove {
    background: none; border: none; color: #bbb; font-size: 15px;
    cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
.wcfav-item-remove:hover { color: var(--wcfav-accent); }
.wcfav-panel-footer { padding: 14px 16px; border-top: 1px solid #eee; }
.wcfav-contact-btn {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, var(--wcfav-accent-dark) 0%, var(--wcfav-accent) 100%);
    color: white !important;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

</style>

<button
   class="wcfav-float-btn"
   id="wcfav-toggle-btn"
   title="Mes favoris"
   aria-label="Mes favoris">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path fill="#c41e3a" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </svg>
    <span class="wcfav-count" id="wcfav-count">0</span>
    <span class="wcfav-float-btn__tooltip">Mes favoris</span>
</button>

<div id="wcfav-panel-overlay"></div>
<div id="wcfav-panel">
    <div class="wcfav-panel-header">
        <span>Mes favoris</span>
        <button id="wcfav-panel-close" aria-label="Fermer">✕</button>
    </div>
    <div class="wcfav-panel-body" id="wcfav-panel-body"></div>
    <div class="wcfav-panel-footer">
        <a id="wcfav-contact-link" href="#" class="wcfav-contact-btn">Nous contacter à propos de mes favoris</a>
    </div>
</div>

<script>
(function () {
    // ==== A PERSONNALISER ====
    var CONTACT_EMAIL = 'contact@votredomaine.fr'; // email utilisé si CONTACT_PAGE_URL est vide
    var CONTACT_PAGE_URL = '';                      // ex: '/contact/' — prioritaire sur l'email si renseigné

    var STORAGE_KEY = 'wc_favorites';

    function getFavorites() {
        try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; }
        catch (e) { return []; }
    }
    function saveFavorites(list) {
        try { localStorage.setItem(STORAGE_KEY, JSON.stringify(list)); } catch (e) {}
    }
    function isFav(url) {
        return getFavorites().some(function (i) { return i.url === url; });
    }
    function toggleFav(item) {
        var list = getFavorites();
        var idx = list.findIndex(function (i) { return i.url === item.url; });
        var added;
        if (idx > -1) { list.splice(idx, 1); added = false; }
        else { list.push(item); added = true; }
        saveFavorites(list);
        updateCount();
        renderPanel();
        return added;
    }
    function removeFav(url) {
        var list = getFavorites();
        list = list.filter(function (i) { return i.url !== url; });
        saveFavorites(list);
        updateCount();
        renderPanel();
        var heart = document.querySelector('.wcfav-heart');
        if (heart) heart.innerHTML = heartSvg(isFav(currentPageUrl()));
    }
    function updateCount() {
        var badge = document.getElementById('wcfav-count');
        if (badge) badge.textContent = getFavorites().length;
    }
    function heartSvg(filled) {
        return '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
            '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" ' +
            'fill="' + (filled ? 'currentColor' : 'none') + '" stroke="currentColor" stroke-width="2"/></svg>';
    }
    function currentPageUrl() {
        var canonical = document.querySelector('link[rel="canonical"]');
        return canonical ? canonical.href : (window.location.origin + window.location.pathname);
    }

    // Détecte une page produit WooCommerce / Dokan et récupère ses infos
    function currentProductData() {
        var isProductPage = document.body.classList.contains('single-product') ||
            document.querySelector('form.cart, .single_add_to_cart_button');
        if (!isProductPage) return null;

        var titleEl = document.querySelector('h1.product_title, .product_title.entry-title, h1.entry-title');
        var ogTitle = document.querySelector('meta[property="og:title"]');
        var title = titleEl ? titleEl.textContent.trim() : (ogTitle ? ogTitle.content : document.title);

        var priceEl = document.querySelector('.summary .price, .product .price, p.price');
        var price = priceEl ? priceEl.textContent.replace(/\s+/g, ' ').trim() : '';

        var imgMeta = document.querySelector('meta[property="og:image"]');
        var galleryImg = document.querySelector('.woocommerce-product-gallery__image img, img.wp-post-image');
        var image = imgMeta ? imgMeta.content : (galleryImg ? (galleryImg.currentSrc || galleryImg.src) : '');

        return { url: currentPageUrl(), title: title, price: price, image: image };
    }

    function findAddToCartAnchor() {
        return document.querySelector(
            '.single_add_to_cart_button, form.cart button[type="submit"], .dokan-single-product .single_add_to_cart_button'
        );
    }
    function findPriceElement() {
        return document.querySelector('.summary .price, .product .price, p.price');
    }
    function findInsertTarget() {
        var cartBtn = findAddToCartAnchor();
        if (cartBtn) {
            // On remonte de 2 niveaux pour sortir du conteneur du bouton panier
            var node = cartBtn;
            for (var i = 0; i < 2 && node.parentElement && node.parentElement !== document.body; i++) {
                node = node.parentElement;
            }
            return node;
        }
        var priceEl = findPriceElement();
        if (priceEl) return priceEl;

        var selectors = ['h1.product_title', '.product_title.entry-title', 'h1.entry-title'];
        for (var i = 0; i < selectors.length; i++) {
            var el = document.querySelector(selectors[i]);
            if (el) return el;
        }
        return null;
    }
    function buildFavButton(data) {
        var wrapper = document.createElement('div');
        wrapper.className = 'wcfav-wrapper';

        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'wcfav-btn-row wcfav-heart';
        var active = isFav(data.url);
        if (active) btn.classList.add('is-active');
        btn.innerHTML = heartSvg(active) + '<span>' + (active ? 'Ajouté aux favoris' : 'Ajouter aux favoris') + '</span>';
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var added = toggleFav(data);
            btn.classList.toggle('is-active', added);
            btn.innerHTML = heartSvg(added) + '<span>' + (added ? 'Ajouté aux favoris' : 'Ajouter aux favoris') + '</span>';
        });

        wrapper.appendChild(btn);
        return wrapper;
    }
    function injectHeart() {
        var data = currentProductData();
        if (!data) return;

        var target = findInsertTarget();
        if (!target) return;

        var existing = document.querySelector('.wcfav-wrapper');

        if (existing && existing.dataset.wcfavUrl === data.url) {
            if (target.nextElementSibling !== existing) {
                target.insertAdjacentElement('afterend', existing);
            }
            return;
        }
        if (existing) existing.remove();

        var wrapper = buildFavButton(data);
        wrapper.dataset.wcfavUrl = data.url;
        target.insertAdjacentElement('afterend', wrapper);
    }
    function renderPanel() {
        var body = document.getElementById('wcfav-panel-body');
        var contactLink = document.getElementById('wcfav-contact-link');
        if (!body) return;
        var list = getFavorites();

        if (list.length === 0) {
            body.innerHTML = '<div class="wcfav-empty">Vous n\'avez pas encore de favoris.<br>Cliquez sur le ♥ sur un produit pour l\'ajouter ici.</div>';
        } else {
            body.innerHTML = list.map(function (item) {
                return '<div class="wcfav-item">' +
                    '<a href="' + item.url + '" style="display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;">' +
                    (item.image ? '<img src="' + item.image + '" alt="">' : '') +
                    '<div class="wcfav-item-info">' +
                    '<p class="wcfav-item-title">' + item.title + '</p>' +
                    '<p class="wcfav-item-price">' + item.price + '</p>' +
                    '</div></a>' +
                    '<button class="wcfav-item-remove" data-url="' + encodeURIComponent(item.url) + '" aria-label="Retirer">✕</button>' +
                    '</div>';
            }).join('');

            body.querySelectorAll('.wcfav-item-remove').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    removeFav(decodeURIComponent(btn.getAttribute('data-url')));
                });
            });
        }

        if (contactLink) {
            if (CONTACT_PAGE_URL) {
                contactLink.href = CONTACT_PAGE_URL;
            } else {
                var subject = 'Renseignements sur mes favoris';
                var lines = list.map(function (item) { return '- ' + item.title + ' (' + item.price + ') : ' + item.url; });
                var bodyText = 'Bonjour,\n\nJe suis intéressé(e) par les articles suivants :\n\n' + lines.join('\n') + '\n\nMerci de me recontacter.';
                contactLink.href = 'mailto:' + CONTACT_EMAIL + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(bodyText);
            }
        }
    }
    function openPanel() {
        renderPanel();
        document.getElementById('wcfav-panel-overlay').style.display = 'block';
        document.getElementById('wcfav-panel').style.display = 'flex';
    }
    function closePanel() {
        document.getElementById('wcfav-panel-overlay').style.display = 'none';
        document.getElementById('wcfav-panel').style.display = 'none';
    }

    function init() {
        updateCount();
        injectHeart();

        var toggleBtn = document.getElementById('wcfav-toggle-btn');
        if (toggleBtn) toggleBtn.addEventListener('click', openPanel);

        var closeBtn = document.getElementById('wcfav-panel-close');
        if (closeBtn) closeBtn.addEventListener('click', closePanel);

        var overlay = document.getElementById('wcfav-panel-overlay');
        if (overlay) overlay.addEventListener('click', closePanel);

        // Re-vérifie après chargements AJAX (quick-view Dokan, filtres de boutique, etc.)
        var lastPath = window.location.pathname;
        setInterval(function () {
            if (window.location.pathname !== lastPath) {
                lastPath = window.location.pathname;
                injectHeart();
            }
        }, 600);

        var observer = new MutationObserver(function () { injectHeart(); });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>