Improvement Request

[vjcim]

Hi,

I have been working on a way to create a wishlist that stores each product with the variant ID in the user's local storage. A project that I'm working on requires that specific variants are saved to the wishlist, or in my case, a product list that is populated inside a form to be submitted for wholesale quotes.

This code has given me a jumpstart on the project and I'm hoping to have a version that stores the handle along with the variant ID so that the product card can be filtered to display the variant saved by the customer.

If you know of an easy way to implement this that would be great!

Thank you

[dlerm]

@rorstuff In order to include more data on the wishlist we'll need to switch the localStorage array to hold objects instead of strings. An example of the object could be like this:

{
handle: <product-handle>,
variantId: <variant-id>,
}

Using objects slightly complicates the helper functions for getting, setting and updating the wishlist.

I'll see if I can get a more full code example for you in the coming weeks.

[vjcim]

Thank you @dlerm. I have since built what I needed by storing data as serialized JSON in localStorage. If you would like to see the code, let me know and I will send it to you.

[audreysurfin]

Hi @dlerm, I'm joining this conversation about "Improvement".
-- Variant ID would be great
Also it looks like several features for wishlists are missing, for example :
-- Delete button in page wishlist
-- Keep wishlist in the customer account
-- Notifications / Messages when adding the product, delete, or already added. Also it looks like the browser doesn't memorize if the product (on product page) is added or not to the wishlist.

Thank you.

Kind regards,
Audrey

[dlerm]

Hi @dlerm, I'm joining this conversation about "Improvement".

-- Variant ID would be great

Also it looks like several features for wishlists are missing, for example :

-- Delete button in page wishlist

-- Keep wishlist in the customer account

-- Notifications / Messages when adding the product, delete, or already added. Also it looks like the browser doesn't memorize if the product (on product page) is added or not to the wishlist.

Thank you.

Kind regards,

Audrey

@audreysurfin ,

For the record, this is not meant to be a fully robust solution for a wishlist in the Shopify ecosystem. This repo is meant to serve as a base set of functionality for handling client-side wishlists. Admittedly, client-side is much more limited than server-side(Shopify apps), but this project helps fill the gap for those looking to implement a simple wishlist without an app. With that:

1. Variant ID storage is a good idea and I will likely implement that

2. Delete button - you simply need to click the wishlist button again to disabled it. It works as a toggle. The wishlist page template is also left purposely blank to allow you to add whatever customizations you want. If you wanted to add a button to clear the whole wishlist, you could!

3. Attach wishlist to customer account - This cannot reliable be done client-side. You would need to leverage a database for storing the wishlist/customer-Id pair. You could even use Shopify's API to add the wishlist to the Customer object via metafields. All of that is outside the scope of this project. I have done this and may post the code in a separate repo, but as it stands will not be a part of this project.

4. Notifications can be added fairly easily but I think this is something you as developer implementing the wishlist would add as your own personal customization. I'll think about adding it, but Im not sure it fits into this project since different sites use different forms of notifications and my implementation may not fit everyone's needs.

5. Product page - if you use the wishlist button snippet provided and enable the scripts on the product template, the button should receive the "active" state automatically if the product is indeed already in the wishlist data. It sounds like you may have an implementation error that is blocking the functionality.

[audreysurfin]

@dlerm
Thank you very much for your answer. I'm looking forward to know how to add the variant option :)
(@rorstuff It seems you found a solution for that?)

I'm okay with the other comments, I'll experiment new features and if I find interesting solutions I could share them with you in this git project. I'm currently working on wishlist item count to include on Wishlist link in the header menu.

[dlerm]

Thank you @dlerm. I have since built what I needed by storing data as serialized JSON in localStorage. If you would like to see the code, let me know and I will send it to you.

@rorstuff I would love to see the solution you came up with! I could easily pass variant-id as another data attribute. Folks implementing the wishlist would have to update that data attribute value on their own depending on how their product form works.