I'd like to create a Wishlist and save it into a cookie, instead of having to login

Question

I'm a bit lost.
I'd like to create a wishlist for products and save them into a cookie.

I don't want anybody to have a login and I don't mind if the list is not sharable and only available on the same device.

In my mind, the cookie would be an array that contains the product ids. The array can be updated by either removing an id or adding one.

Showing the products would just be iterating over the product ids.

Preferably I would do this in sprig.

I have a hard time to get started.

Could anybody affirm if this is possible and might walk me through on how to achieve this?

Any help appreciated!

Cheers
Stefan

Answer 1

YAY! I got it all working!

The docs from the wishlist plugin for craft cms were wrong. Wishlist is able to store a list in a cookie, which was a demand in our project. They've corrected the docs:
https://verbb.io/craft-plugins/wishlist/docs/feature-tour/lists#persisting-lists

The sprig cookbook was a great starting point.
https://putyourlightson.com/sprig/cookbook#wishlist

I've created a component to add the entry into the wishlist:

{{ sprig('_sprig/_entry', { entryId: entry.id }, {'id': 'entry'}) }}

Then I've created a second component that shows the wishlist and the number of items it contains (much like a shopping cart). It listens to the #entry component and updates itself:

{{ sprig('_sprig/_wishlist', {}, {'s-listen': '#entry'} ) }}

The rest was easy. Showing the list and iterate over it.

{% if list and list.items|length > 0 %}
    <div class="grid">
        {% for item in list.items.all() %}
            {% set entry = item.element %}{# just for convienience #}
            <div class="col-1-4" id="{{ entry.slug }}">
                <a href="{{ entry.url }}?type=wishlist">
                    [...]
                    <h2>{{ entry.title }}</h2>
                    [...]
                </a>
            </div>
        {% endfor %}
    </div>
{% else %}
    <p>Your wishlist is empty</p>
{% endif %}

I hope this will help somebody.