{"id":438,"date":"2025-10-22T12:26:04","date_gmt":"2025-10-22T12:26:04","guid":{"rendered":"https:\/\/shaheenfaroukdesign.com\/?page_id=438"},"modified":"2025-11-25T14:34:37","modified_gmt":"2025-11-25T14:34:37","slug":"wishlist","status":"publish","type":"page","link":"https:\/\/shaheenfaroukdesigns.com\/ar\/wishlist\/","title":{"rendered":"\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0623\u0645\u0646\u064a\u0627\u062a"},"content":{"rendered":"        <style>\n        .wc-wishlist-page {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 40px 20px;\n        }\n\n        \/* Header *\/\n        .wishlist-header {\n            text-align: center;\n            margin-bottom: 40px;\n        }\n        .wishlist-title {\n            font-size: 42px;\n            font-weight: 700;\n            margin: 0 0 12px 0;\n            color: #1a1a1a;\n        }\n        .wishlist-subtitle {\n            font-size: 16px;\n            color: #666;\n            margin: 0;\n        }\n\n        \/* Actions Bar *\/\n        .wishlist-actions-bar {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 20px 0;\n            margin-bottom: 32px;\n            border-bottom: 2px solid #e0e0e0;\n        }\n        .wishlist-count {\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n        .wishlist-count span {\n            color: #d4af37;\n            font-size: 20px;\n        }\n        .clear-wishlist-btn {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 10px 20px;\n            background: #dc3545;\n            color: white;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s;\n        }\n        .clear-wishlist-btn:hover {\n            background: #c82333;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);\n        }\n        .clear-wishlist-btn svg {\n            flex-shrink: 0;\n        }\n\n        \/* Empty State *\/\n        .wishlist-empty {\n            text-align: center;\n            padding: 80px 20px;\n        }\n        .wishlist-empty svg {\n            margin-bottom: 24px;\n        }\n        .wishlist-empty h2 {\n            font-size: 28px;\n            font-weight: 600;\n            color: #333;\n            margin: 0 0 12px 0;\n        }\n        .wishlist-empty p {\n            font-size: 16px;\n            color: #666;\n            margin: 0 0 32px 0;\n        }\n        .btn-shop-now {\n            display: inline-block;\n            padding: 14px 32px;\n            background: #d4af37;\n            color: white;\n            text-decoration: none;\n            border-radius: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            transition: all 0.3s;\n        }\n        .btn-shop-now:hover {\n            background: #c19d2f;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);\n        }\n\n        \/* Products Grid *\/\n        .wishlist-products-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 32px;\n        }\n        .wishlist-products-grid[data-columns=\"4\"] {\n            grid-template-columns: repeat(4, 1fr);\n        }\n        .wishlist-products-grid[data-columns=\"2\"] {\n            grid-template-columns: repeat(2, 1fr);\n        }\n\n        \/* Product Card *\/\n        .wishlist-product-card {\n            background: white;\n            border-radius: 12px;\n            overflow: hidden;\n            border: 1px solid #f0f0f0;\n            transition: all 0.3s;\n            position: relative;\n        }\n        .wishlist-product-card:hover {\n            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n            transform: translateY(-4px);\n        }\n\n        \/* Remove Button *\/\n        .remove-from-wishlist {\n            position: absolute;\n            top: 12px;\n            right: 12px;\n            width: 36px;\n            height: 36px;\n            background: white;\n            border: none;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            z-index: 10;\n            transition: all 0.2s;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n            padding:10px !important;\n        }\n        .remove-from-wishlist:hover {\n            background: #dc3545;\n            color: white;\n            transform: scale(1.1);\n        }\n        .remove-from-wishlist svg {\n            stroke: currentColor;\n        }\n\n        \/* Product Image *\/\n        .wishlist-product-image-wrapper {\n            position: relative;\n            aspect-ratio: 1;\n            overflow: hidden;\n            background: #f8f9fa;\n        }\n        .wishlist-product-image {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.3s;\n        }\n        .wishlist-product-card:hover .wishlist-product-image {\n            transform: scale(1.05);\n        }\n        .wishlist-product-image-placeholder {\n            width: 100%;\n            height: 100%;\n            background: #e0e0e0;\n        }\n\n        \/* Stock Badge *\/\n        .stock-badge {\n            position: absolute;\n            top: 12px;\n            left: 12px;\n            padding: 6px 12px;\n            border-radius: 6px;\n            font-size: 12px;\n            font-weight: 600;\n            color: white;\n        }\n        .stock-badge.out-of-stock {\n            background: #dc3545;\n        }\n\n        \/* Product Info *\/\n        .wishlist-product-info {\n            padding: 20px;\n        }\n        .wishlist-product-title-rating {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 12px;\n        }\n        .wishlist-product-name {\n            font-size: 16px;\n            font-weight: 600;\n            margin: 0;\n            flex: 1;\n            min-width: 0;\n        }\n        .wishlist-product-name a {\n            color: #1a1a1a;\n            text-decoration: none;\n            display: block;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n        .wishlist-product-name a:hover {\n            color: #d4af37;\n        }\n        .wishlist-product-rating {\n            display: flex;\n            align-items: center;\n            gap: 4px;\n            flex-shrink: 0;\n        }\n        .rating-value {\n            font-size: 14px;\n            font-weight: 600;\n            color: #1a1a1a;\n        }\n\n        \/* Price *\/\n        .wishlist-product-price {\n            font-size: 18px;\n            font-weight: 700;\n            color: #1a1a1a;\n            margin-bottom: 12px;\n        }\n        .wishlist-product-price del {\n            color: #999;\n            font-size: 15px;\n            margin-left: 8px;\n            font-weight: 400;\n        }\n        .wishlist-product-price ins {\n            text-decoration: none;\n        }\n\n        \/* Colors *\/\n        .wishlist-product-colors {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            margin-bottom: 16px;\n        }\n        .color-swatch {\n            width: 24px;\n            height: 24px;\n            border-radius: 50%;\n            border: 2px solid #e0e0e0;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);\n        }\n        .color-swatch:hover {\n            transform: scale(1.15);\n            border-color: #d4af37;\n        }\n        .color-more {\n            font-size: 12px;\n            color: #666;\n            margin-left: 4px;\n            font-weight: 500;\n        }\n\n        \/* Actions *\/\n        .wishlist-product-actions {\n            display: flex;\n            gap: 12px;\n        }\n        .btn-add-to-cart,\n        .btn-view-product {\n            flex: 1;\n            padding: 12px 16px;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            text-decoration: none;\n        }\n        .btn-add-to-cart {\n            background: #d4af37;\n            color: white;\n        }\n        .btn-add-to-cart:hover:not(:disabled) {\n            background: #c19d2f;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);\n        }\n        .btn-add-to-cart:disabled {\n            background: #ccc;\n            cursor: not-allowed;\n        }\n        .btn-view-product {\n            background: white;\n            color: #1a1a1a;\n            border: 2px solid #e0e0e0;\n        }\n        .btn-view-product:hover {\n            border-color: #d4af37;\n            color: #d4af37;\n            transform: translateY(-2px);\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 1024px) {\n            .wishlist-products-grid {\n                grid-template-columns: repeat(2, 1fr) !important;\n                gap: 24px;\n            }\n        }\n        @media (max-width: 640px) {\n            .wishlist-products-grid {\n                grid-template-columns: 1fr !important;\n            }\n            .wishlist-title {\n                font-size: 32px;\n            }\n            .wishlist-actions-bar {\n                flex-direction: column;\n                gap: 16px;\n                align-items: stretch;\n            }\n            .clear-wishlist-btn {\n                justify-content: center;\n            }\n            .wishlist-product-actions {\n                flex-direction: column;\n            }\n        }\n\n        \/* Loading State *\/\n        .wishlist-products-grid.loading {\n            opacity: 0.5;\n            pointer-events: none;\n        }\n        <\/style>\n                <div class=\"wc-wishlist-page\">\n            <div class=\"wishlist-header\">\n                <h1 class=\"wishlist-title\">My Wishlist<\/h1>\n                <p class=\"wishlist-subtitle\">Your saved products for later<\/p>\n            <\/div>\n\n            <div class=\"wishlist-actions-bar\">\n                <div class=\"wishlist-count\">\n                    <span id=\"wishlist-item-count\">0<\/span> items in your wishlist\n                <\/div>\n                <button class=\"clear-wishlist-btn\" id=\"clear-wishlist\">\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <polyline points=\"3 6 5 6 21 6\"><\/polyline>\n                        <path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"><\/path>\n                    <\/svg>\n                    Clear All\n                <\/button>\n            <\/div>\n\n            <!-- Empty state -->\n            <div class=\"wishlist-empty\" id=\"wishlist-empty\" style=\"display: none;\">\n                <svg width=\"120\" height=\"120\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#ddd\" stroke-width=\"1\">\n                    <path d=\"M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z\"\/>\n                <\/svg>\n                <h2>Your wishlist is empty<\/h2>\n                <p>Start adding products you love to your wishlist!<\/p>\n                <a href=\"https:\/\/shaheenfaroukdesigns.com\/ar\/shop\/\" class=\"btn-shop-now\">\n                    Continue Shopping\n                <\/a>\n            <\/div>\n\n            <!-- Products grid -->\n            <div class=\"wishlist-products-grid\" id=\"wishlist-products\" data-columns=\"3\">\n                <!-- Products will be loaded here via JavaScript -->\n            <\/div>\n        <\/div>\n                <script>\n        jQuery(document).ready(function($) {\n            console.log('\ud83d\udc9d Wishlist initialized');\n\n            \/\/ Load wishlist products on page load\n            function loadWishlistProducts() {\n                const wishlist = JSON.parse(localStorage.getItem('wc_wishlist') || '[]');\n                console.log('\ud83d\udc9d Wishlist items:', wishlist);\n\n                \/\/ Update count\n                $('#wishlist-item-count').text(wishlist.length);\n\n                if (wishlist.length === 0) {\n                    $('#wishlist-empty').show();\n                    $('#wishlist-products').hide();\n                    $('.wishlist-actions-bar').hide();\n                    return;\n                }\n\n                $('#wishlist-empty').hide();\n                $('#wishlist-products').show();\n                $('.wishlist-actions-bar').show();\n\n                \/\/ Fetch products via AJAX\n                $.ajax({\n                    url: ajaxscript.ajax_url,\n                    type: 'POST',\n                    data: {\n                        action: 'wc_get_wishlist_products',\n                        nonce: ajaxscript.nonce,\n                        product_ids: wishlist\n                    },\n                    beforeSend: function() {\n                        $('#wishlist-products').addClass('loading').html('<p style=\"text-align: center; padding: 40px; color: #999;\">Loading your wishlist...<\/p>');\n                    },\n                    success: function(response) {\n                        console.log('\u2705 Wishlist products loaded:', response);\n\n                        if (response.success && response.data.html) {\n                            $('#wishlist-products').html(response.data.html);\n                        } else {\n                            $('#wishlist-products').html('<p style=\"text-align: center; padding: 40px; color: #999;\">Failed to load wishlist products.<\/p>');\n                        }\n                        $('#wishlist-products').removeClass('loading');\n                    },\n                    error: function(xhr, status, error) {\n                        console.error('\u274c AJAX Error:', status, error);\n                        $('#wishlist-products').html('<p style=\"text-align: center; padding: 40px; color: #999;\">Error loading wishlist products.<\/p>').removeClass('loading');\n                    }\n                });\n            }\n\n            \/\/ Remove from wishlist\n            $(document).on('click', '.remove-from-wishlist', function(e) {\n                e.preventDefault();\n                const btn = $(this);\n                const productId = btn.data('product-id');\n                const card = btn.closest('.wishlist-product-card');\n\n                console.log('\ud83d\uddd1\ufe0f Removing from wishlist:', productId);\n\n                let wishlist = JSON.parse(localStorage.getItem('wc_wishlist') || '[]');\n                wishlist = wishlist.filter(id => id !== productId);\n                localStorage.setItem('wc_wishlist', JSON.stringify(wishlist));\n\n                \/\/ Animate removal\n                card.fadeOut(300, function() {\n                    $(this).remove();\n\n                    \/\/ Update count\n                    $('#wishlist-item-count').text(wishlist.length);\n\n                    \/\/ Check if empty\n                    if (wishlist.length === 0) {\n                        $('#wishlist-empty').fadeIn();\n                        $('#wishlist-products').hide();\n                        $('.wishlist-actions-bar').hide();\n                    }\n                });\n\n                showNotification('Removed from wishlist', 'info');\n            });\n\n            \/\/ Clear all wishlist\n            $('#clear-wishlist').on('click', function() {\n                if (!confirm('Are you sure you want to clear your entire wishlist?')) {\n                    return;\n                }\n\n                localStorage.removeItem('wc_wishlist');\n                $('#wishlist-item-count').text('0');\n                $('#wishlist-products').fadeOut(300);\n                $('.wishlist-actions-bar').fadeOut(300, function() {\n                    $('#wishlist-empty').fadeIn();\n                });\n\n                showNotification('Wishlist cleared', 'info');\n            });\n\n            \/\/ Add to cart from wishlist\n            $(document).on('click', '.btn-add-to-cart', function(e) {\n                e.preventDefault();\n                const btn = $(this);\n                const productId = btn.data('product-id');\n\n                if (btn.prop('disabled')) return;\n\n                console.log('\ud83d\uded2 Adding to cart from wishlist:', productId);\n\n                btn.prop('disabled', true).html('<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"2\" opacity=\"0.3\"\/><path d=\"M12 2a10 10 0 0 1 10 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 12 12\" to=\"360 12 12\" dur=\"1s\" repeatCount=\"indefinite\"\/><\/path><\/svg>');\n\n                $.ajax({\n                    url: ajaxscript.ajax_url,\n                    type: 'POST',\n                    data: {\n                        action: 'wc_catalog_add_to_cart',\n                        nonce: ajaxscript.nonce,\n                        product_id: productId,\n                        quantity: 1\n                    },\n                    success: function(response) {\n                        console.log('\ud83d\uded2 Add to cart response:', response);\n\n                        if (response.success) {\n                            showNotification(response.data.message || 'Added to cart!', 'success');\n                            $(document.body).trigger('wc_fragment_refresh');\n\n                            if (response.data.cart_count) {\n                                $('.cart-count').text(response.data.cart_count);\n                            }\n                        } else {\n                            const errorMsg = response.data && response.data.message ? response.data.message : 'Failed to add to cart';\n                            showNotification(errorMsg, 'error');\n                        }\n\n                        setTimeout(function() {\n                            btn.prop('disabled', false).html('<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z\"\/><\/svg> Add to Cart');\n                        }, 1000);\n                    },\n                    error: function(xhr, status, error) {\n                        console.error('\u274c AJAX Error:', status, error);\n                        showNotification('Network error. Please try again.', 'error');\n\n                        setTimeout(function() {\n                            btn.prop('disabled', false).html('<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z\"\/><\/svg> Add to Cart');\n                        }, 1000);\n                    }\n                });\n            });\n\n            \/\/ Notification helper\n            function showNotification(message, type) {\n                $('.wc-shop-notification').remove();\n                const notification = $(`<div class=\"wc-shop-notification ${type}\">${message}<\/div>`);\n                $('body').append(notification);\n                setTimeout(() => notification.addClass('show'), 100);\n                setTimeout(() => {\n                    notification.removeClass('show');\n                    setTimeout(() => notification.remove(), 300);\n                }, 3000);\n            }\n\n            \/\/ Load products on page load\n            loadWishlistProducts();\n\n            console.log('\u2705 Wishlist ready');\n        });\n        <\/script>\n\n        <style>\n        \/* Notification styles (reuse from main plugin) *\/\n        .wc-shop-notification {\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            padding: 16px 24px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n            z-index: 9999;\n            opacity: 0;\n            transform: translateX(100px);\n            transition: all 0.3s ease;\n        }\n        .wc-shop-notification.show {\n            opacity: 1;\n            transform: translateX(0);\n        }\n        .wc-shop-notification.success {\n            border-left: 4px solid #27ae60;\n            color: #27ae60;\n        }\n        .wc-shop-notification.error {\n            border-left: 4px solid #e74c3c;\n            color: #e74c3c;\n        }\n        .wc-shop-notification.info {\n            border-left: 4px solid #3498db;\n            color: #3498db;\n        }\n        <\/style>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-438","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/pages\/438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/comments?post=438"}],"version-history":[{"count":0,"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/pages\/438\/revisions"}],"wp:attachment":[{"href":"https:\/\/shaheenfaroukdesigns.com\/ar\/wp-json\/wp\/v2\/media?parent=438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}