Shopify Wishlist with LocalStorage

Shopify Wishlist with LocalStorage

Create a complete wishlist feature that allows customers to save their favorite products for later, stored in localStorage for persistence across sessions.

// Wishlist Class
class Wishlist {
    constructor(options = {}) {
        this.storageKey = options.storageKey || 'shopify_wishlist';
        this.wishlistPage = document.querySelector(options.wishlistPage || '[data-wishlist-container]');

        this.init();
    }

    init() {
        // Bind add to wishlist buttons
        document.addEventListener('click', (e) => {
            if (e.target.matches('[data-wishlist-add]') || e.target.closest('[data-wishlist-add]')) {
                e.preventDefault();
                const btn = e.target.closest('[data-wishlist-add]') || e.target;
                this.toggleWishlist(btn);
            }
        });

        // Update all wishlist buttons
        this.updateAllButtons();

        // Update wishlist count
        this.updateWishlistCount();

        // Render wishlist page if on wishlist page
        if (this.wishlistPage) {
            this.renderWishlistPage();
        }
    }

    toggleWishlist(button) {
        const productId = button.dataset.wishlistAdd;
        const productHandle = button.dataset.productHandle;
        const productTitle = button.dataset.productTitle;
        const productImage = button.dataset.productImage;
        const productPrice = button.dataset.productPrice;

        if (!productId) return;

        const wishlist = this.getWishlist();
        const index = wishlist.findIndex(item => item.id === productId);

        if (index > -1) {
            // Remove from wishlist
            wishlist.splice(index, 1);
            this.showNotification(`${productTitle} removed from wishlist`);
        } else {
            // Add to wishlist
            wishlist.push({
                id: productId,
                handle: productHandle,
                title: productTitle,
                image: productImage,
                price: productPrice,
                addedAt: Date.now()
            });
            this.showNotification(`${productTitle} added to wishlist`);
        }

        this.saveWishlist(wishlist);
        this.updateAllButtons();
        this.updateWishlistCount();

        // Refresh wishlist page if open
        if (this.wishlistPage) {
            this.renderWishlistPage();
        }
    }

    getWishlist() {
        try {
            const data = localStorage.getItem(this.storageKey);
            return data ? JSON.parse(data) : [];
        } catch (error) {
            console.error('Error reading wishlist:', error);
            return [];
        }
    }

    saveWishlist(wishlist) {
        try {
            localStorage.setItem(this.storageKey, JSON.stringify(wishlist));

            // Trigger custom event
            document.dispatchEvent(new CustomEvent('wishlist:updated', {
                detail: { wishlist }
            }));
        } catch (error) {
            console.error('Error saving wishlist:', error);
        }
    }

    isInWishlist(productId) {
        const wishlist = this.getWishlist();
        return wishlist.some(item => item.id === productId);
    }

    updateAllButtons() {
        const buttons = document.querySelectorAll('[data-wishlist-add]');

        buttons.forEach(button => {
            const productId = button.dataset.wishlistAdd;
            const isInWishlist = this.isInWishlist(productId);

            if (isInWishlist) {
                button.classList.add('in-wishlist');
                button.setAttribute('aria-label', 'Remove from wishlist');
            } else {
                button.classList.remove('in-wishlist');
                button.setAttribute('aria-label', 'Add to wishlist');
            }
        });
    }

    updateWishlistCount() {
        const wishlist = this.getWishlist();
        const countElements = document.querySelectorAll('[data-wishlist-count]');

        countElements.forEach(el => {
            el.textContent = wishlist.length;
            el.style.display = wishlist.length > 0 ? 'inline' : 'none';
        });
    }

    async renderWishlistPage() {
        const wishlist = this.getWishlist();

        if (wishlist.length === 0) {
            this.wishlistPage.innerHTML = this.getEmptyTemplate();
            return;
        }

        // Fetch fresh product data
        const products = await this.fetchProducts(wishlist.map(item => item.handle));

        this.wishlistPage.innerHTML = this.getWishlistTemplate(products);

        // Bind remove buttons
        this.wishlistPage.querySelectorAll('[data-remove-wishlist]').forEach(btn => {
            btn.addEventListener('click', () => {
                const productId = btn.dataset.removeWishlist;
                this.removeFromWishlist(productId);
            });
        });
    }

    async fetchProducts(handles) {
        const products = [];

        for (const handle of handles) {
            try {
                const response = await fetch(`/products/${handle}.js`);
                const product = await response.json();
                products.push(product);
            } catch (error) {
                console.error(`Error fetching product ${handle}:`, error);
            }
        }

        return products;
    }

    getWishlistTemplate(products) {
        return `
            <div class="wishlist-header">
                <h1>My Wishlist</h1>
                <p>${products.length} item${products.length !== 1 ? 's' : ''}</p>
            </div>

            <div class="wishlist-grid">
                ${products.map(product => `
                    <div class="wishlist-item">
                        <button
                            class="wishlist-remove"
                            data-remove-wishlist="${product.id}"
                            aria-label="Remove from wishlist">
                            ×
                        </button>

                        <a href="/products/${product.handle}" class="wishlist-item-link">
                            <div class="wishlist-item-image">
                                <img src="${product.featured_image}" alt="${product.title}">
                            </div>

                            <div class="wishlist-item-info">
                                <h3 class="wishlist-item-title">${product.title}</h3>

                                <div class="wishlist-item-price">
                                    ${this.formatPrice(product.price)}
                                </div>

                                ${product.available ?
                                    `<button class="btn btn--add-to-cart" onclick="addToCart(${product.variants[0].id}); return false;">
                                        Add to Cart
                                    </button>` :
                                    `<p class="sold-out">Sold Out</p>`
                                }
                            </div>
                        </a>
                    </div>
                `).join('')}
            </div>
        `;
    }

    getEmptyTemplate() {
        return `
            <div class="wishlist-empty">
                <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>

                <h2>Your Wishlist is Empty</h2>
                <p>Save your favorite products to your wishlist</p>

                <a href="/collections/all" class="btn">Continue Shopping</a>
            </div>
        `;
    }

    removeFromWishlist(productId) {
        const wishlist = this.getWishlist();
        const filtered = wishlist.filter(item => item.id !== productId);

        this.saveWishlist(filtered);
        this.updateAllButtons();
        this.updateWishlistCount();
        this.renderWishlistPage();
    }

    clearWishlist() {
        this.saveWishlist([]);
        this.updateAllButtons();
        this.updateWishlistCount();

        if (this.wishlistPage) {
            this.renderWishlistPage();
        }
    }

    showNotification(message) {
        const notification = document.createElement('div');
        notification.className = 'wishlist-notification';
        notification.textContent = message;

        document.body.appendChild(notification);

        setTimeout(() => {
            notification.classList.add('show');
        }, 10);

        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    formatPrice(cents) {
        return '$' + (cents / 100).toFixed(2);
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    window.wishlist = new Wishlist();
});

Liquid Template - Wishlist Button

<!-- Add to product cards -->
<button
    type="button"
    class="wishlist-button"
    data-wishlist-add="{{ product.id }}"
    data-product-handle="{{ product.handle }}"
    data-product-title="{{ product.title }}"
    data-product-image="{{ product.featured_image | img_url: 'medium' }}"
    data-product-price="{{ product.price }}"
    aria-label="Add to wishlist">
    <svg class="heart-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
</button>

Liquid Template - Wishlist Page

<!-- Create page template: templates/page.wishlist.liquid -->
<div class="wishlist-page">
    <div class="container">
        <div data-wishlist-container>
            <!-- Content will be rendered by JavaScript -->
        </div>
    </div>
</div>

Liquid Template - Header Link

<!-- Add to header -->
<a href="/pages/wishlist" class="wishlist-link">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
    </svg>
    <span class="wishlist-count" data-wishlist-count>0</span>
</a>

CSS Styling

/* Wishlist Button */
.wishlist-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.2s;
}

.wishlist-button:hover {
    transform: scale(1.1);
}

.wishlist-button .heart-icon {
    stroke: #000;
    fill: none;
    transition: fill 0.3s;
}

.wishlist-button.in-wishlist .heart-icon {
    fill: #e74c3c;
    stroke: #e74c3c;
}

/* Wishlist Page */
.wishlist-header {
    text-align: center;
    margin-bottom: 40px;
}

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.wishlist-item {
    position: relative;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.wishlist-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.wishlist-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.wishlist-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.wishlist-item-image {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}

.wishlist-item-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-item-info {
    padding: 15px;
}

.wishlist-item-title {
    font-size: 16px;
    margin: 0 0 10px;
}

.wishlist-item-price {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.btn--add-to-cart {
    width: 100%;
    padding: 10px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* Empty State */
.wishlist-empty {
    text-align: center;
    padding: 100px 20px;
}

.wishlist-empty svg {
    color: #ccc;
    margin-bottom: 20px;
}

/* Notification */
.wishlist-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #000;
    color: #fff;
    padding: 15px 20px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 10000;
}

.wishlist-notification.show {
    opacity: 1;
    transform: translateY(0);
}

Features

• No App Required: Pure JavaScript solution
• Persistent Storage: Uses localStorage for persistence
• Full CRUD: Add, view, remove products
• Product Count: Shows number of wishlist items
• Fresh Data: Fetches current product info on display
• Visual Feedback: Notifications and button states
• Empty State: Friendly message when wishlist is empty
• Mobile Friendly: Responsive grid layout
• Event System: Custom events for integration