Woodmart主题实现心愿单图标二次点击移除商品功能

需求说明 #

Woodmart主题默认心愿单交互逻辑：首次点击图标将商品添加至心愿单，再次点击会跳转至心愿单页面，用户只能在该页面操作移除商品。我们需要修改为无需跳转页面，二次点击图标直接移除对应商品的交互。

实现代码 #

jQuery(document).ready(function($) {
    var clickCount = 0;
    var clickTimeout;

    $('.wd-wishlist-btn a').on('click', function(e) {
        // 阻止默认跳转行为
        e.preventDefault();

        var $this = $(this);
        var productId = $this.data('product-id');

        clickCount++;

        if (clickCount === 1) {
            // 单次点击：300ms内无二次点击则执行添加操作
            clickTimeout = setTimeout(function() {
                clickCount = 0;
                addToWishlist(productId);
            }, 300);
        } else if (clickCount === 2) {
            // 二次点击：清除超时，执行移除操作
            clearTimeout(clickTimeout);
            clickCount = 0;
            removeProductFromWishlist(productId);
        }
    });

    // 添加商品至心愿单
    function addToWishlist(productId) {
        $.ajax({
            url: woodmart_settings.ajaxurl,
            data: {
                action: 'woodmart_add_to_wishlist',
                product_id: productId
            },
            dataType: 'json',
            method: 'GET',
            success: function(response) {
                if (response) {
                    // 更新头部心愿单计数
                    $('.wd-header-wishlist .wd-tools-count').text(response.count);
                    // 标记按钮为已添加状态
                    $('.wd-wishlist-btn a[data-product-id="' + productId + '"]').addClass('added');
                } else {
                    console.log('添加商品至心愿单失败');
                }
            },
            error: function() {
                console.log('添加商品至心愿单请求出错');
            }
        });
    }

    // 从心愿单移除商品
    function removeProductFromWishlist(productId) {
        $.ajax({
            url: woodmart_settings.ajaxurl,
            data: {
                action: 'woodmart_remove_from_wishlist',
                product_id: productId
            },
            dataType: 'json',
            method: 'GET',
            success: function(response) {
                if (response) {
                    // 更新头部心愿单计数
                    $('.wd-header-wishlist .wd-tools-count').text(response.count);
                    // 移除按钮的已添加状态
                    $('.wd-wishlist-btn a[data-product-id="' + productId + '"]').removeClass('added');
                } else {
                    console.log('从心愿单移除商品失败');
                }
            },
            error: function() {
                console.log('从心愿单移除商品请求出错');
            }
        });
    }
});

关键逻辑说明 #

• 双击检测机制：通过300ms超时窗口区分单次点击和双击操作，避免误触发
• 阻止默认行为：e.preventDefault()彻底禁用原有的跳转逻辑
• 复用主题AJAX接口：直接调用Woodmart内置的心愿单添加/移除动作，保证逻辑一致性
• UI状态同步：操作完成后同步更新头部心愿单数量和按钮的视觉状态，提升用户体验

内容的提问来源于stack exchange，提问作者MohsenJames Amra