Summary: Developing a front-end wish list feature
Tech Stack: Utilizing HTML5 (localStorage), CSS, and jQuery
Key Features: Ability to add and delete items dynamically with real-time count display
Challenge: Issue encountered when trying to remove added product after reloading the page.
Code Block with Problematic Section:
$("#wish_list_item").on("click", ".w-premove", function() {
$product_id = $(this).attr("wpid");
$("#list_id_" + $product_id).remove();
wish_list = $.grep(wish_list, function(n, i) {
return n != $product_id;
});
localStorage.setItem(wishlistkey, JSON.stringify(wish_list));
show_message("Product removed");
count_items_in_wishlist_update();
});
});Visit my Fiddle for demonstration: https://jsfiddle.net/3ybwf3c3/4/
Solution Method: Follow this link for the updated solution: https://jsfiddle.net/3ybwf3c3/6/
Included Code Snippet:
$("tr.wishlist-item").each(function(index, el) {
wish_list.push(el.outerHTML);
});