Add to Cart
A great feature for a Commerce site is to allow your customers to create wishlist's of product they want to purchase, saved to their account for later purchase. To provide an even more seamless user experience would be to allow customers to add these wishlist items to their cart to purchase.
That's exactly what you can do with the following code.
First, you'll want to add some purchasables to your list - commonly Commerce variants, but custom purchasables are supported.
{% for product in craft.products().type('clothing').all() %}
{% for variant in product.variants %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/items/add">
{{ csrfInput() }}
<input type="hidden" name="elementId" value="{{ variant.id }}">
<input type="hidden" name="elementSiteId" value="{{ variant.siteId }}">
<input type="submit" value="Add {{ variant.title }} to List">
</form>
{% endfor %}
{% endfor %}Once variants are in your list, you can add all of them to your cart in a single request:
{% set list = craft.wishlist.getUserList() %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
<input type="submit" value="Add to Cart">
</form>This will look through any Purchasable objects in the list, and add it to your cart.
Adding a Shared List to the Cart
A visitor can also add products from a publicly shared list to their own cart. Include both the list ID and its sharing reference so Wishlist can verify that the visitor received the shared-list URL.
{% set reference = craft.app.request.getParam('id') %}
{% set list = null %}
{% if reference is not empty and reference is not iterable %}
{% set list = craft.wishlist.lists(false).reference(reference ~ '').one() %}
{% endif %}
{% if list %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
<input type="hidden" name="reference" value="{{ list.reference }}">
<input type="submit" value="Add to Cart">
</form>
{% endif %}Only look up a shared list when the reference is present and is not an array. If you copied an earlier version of this example, update your site's template to include this check; upgrading Wishlist does not update your templates.
Shared-list visitors can supply quantities, notes and line-item options for their own cart. Only the list owner or a user with permission to manage the list can remove or clear source items, or copy the list’s and items’ custom fields into cart options.
You can even tell Wishlist to use the values in your List or Item custom fields as Line Item Options for the added line item in the cart.
{% set list = craft.wishlist.getUserList() %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
<input type="hidden" name="populateListFieldOptions" value="true">
<input type="hidden" name="populateItemFieldOptions" value="true">
<input type="submit" value="Add to Cart">
</form>For even greater flexibility, you can include a few other useful bits of information, such as quantity or line item options. You might even have these saved as custom fields on the Item object.
{% set list = craft.wishlist.getUserList() %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
{% for item in list.getItems() %}
<input type="hidden" name="purchasables[{{ item.id }}][qty]" value="10">
<input type="hidden" name="purchasables[{{ item.id }}][options][test]" value="Some Value">
{% endfor %}
<input type="submit" value="Add to Cart">
</form>The above will add only the purchasables you supply to the cart. For example, you might want to allow adding individual items to your cart.
{% set list = craft.wishlist.getUserList() %}
{% for item in list.getItems() %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
<input type="hidden" name="purchasables[{{ item.id }}][qty]" value="1">
<input type="hidden" name="purchasables[{{ item.id }}][options][test]" value="Some Value">
<input type="submit" value="Add to Cart">
</form>
{% endfor %}If you had 5 items in your list, you'll have 5 <form> elements outputted. Each would have their own "Add to Cart" button.
Removing from List
You can also set items to be removed from the list, once added to the cart. By default, items will remain in the users wishlist.
When adding the entire list to the cart, you can clear all items from the list.
{% set list = craft.wishlist.getUserList() %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
<input type="checkbox" name="clearList" value="true" checked>
<input type="submit" value="Add to Cart">
</form>We're using a checkbox field to allow the user to opt-in or out of this behaviour, but you could also make this a hidden input.
Similarly, if you were adding items individually to the cart:
{% set list = craft.wishlist.getUserList() %}
{% for item in list.getItems() %}
<form method="POST">
<input type="hidden" name="action" value="wishlist/lists/add-to-cart">
{{ csrfInput() }}
{{ redirectInput('/shop/cart') }}
<input type="hidden" name="listId" value="{{ list.id }}">
<input type="hidden" name="purchasables[{{ item.id }}][qty]" value="1">
<input type="hidden" name="purchasables[{{ item.id }}][options][test]" value="Some Value {{ item.id }}">
<input type="checkbox" name="purchasables[{{ item.id }}][removeFromList]" value="true" checked>
<input type="submit" value="Add to Cart">
</form>
{% endfor %}The above would only add the chosen item to the cart, and also remove only the chosen it from the list.