Wishlist

A wishlist lets visitors save products, or single variants, to buy later. Smootify gives you four parts: a toggle that saves or removes an item, a list of the saved items for a wishlist page, a counter for the navbar, and a button that shares the list with a link. Each part works on its own, so you use only the ones your design needs.

How it fits together

• wishlist-toggle goes inside a smootify-product: on the product page or in a product card. A click saves the product, a second click removes it.
• smootify-product with data-id="wishlist", or smootify-variant with data-product-id="wishlist", is the card template of the wishlist page. Smootify repeats it once per saved item.
• wishlist="count" shows how many items are saved, anywhere on the page.
• wishlist-share shares a link to the wishlist page with the saved items, anywhere on the page.

Where the list is kept. It depends on whether the visitor is logged in with customer accounts:

1. Add the toggle

Add the element wishlist-toggle inside smootify-product. Put what the visitor clicks inside it, such as a heart icon or a button. The whole toggle is the click area.

<wishlist-toggle><button type="button">Save</button></wishlist-toggle>

Outside a smootify-product, the toggle is removed. The cards of the wishlist page are the exception: see below.

Show the state. Style the toggle’s class in the component’s CSS, for example to fill the heart. The two states:

Save the variant. With data-use-variants on the toggle, the click saves the selected variant instead of the product, such as the hoodie in Blue / M. Saved variants count in wishlist="count" and show on the wishlist page, like saved products.

2. Build the wishlist page

On a page of its own, add a div for the grid, and inside it a smootify-product with the attribute data-id="wishlist". Design it as one product card: Smootify copies it once per saved product, and the copies go next to it, in the same div. Only the first smootify-product with data-id="wishlist" on the page is used.

<div condition="has-items-in-wishlist">
  <div>
    <smootify-product data-id="wishlist">
      <div product="title">Product</div>
      <smootify-price><div data-prop="price">$0.00</div></smootify-price>
      <wishlist-toggle><button type="button">Remove</button></wishlist-toggle>
    </smootify-product>
  </div>
</div>
<div condition="no-items-in-wishlist">Your wishlist is empty</div>

Inside the card, everything a product card can show works: see Product cards. The cards follow the order in which the items were saved. A wishlist-toggle in a card removes the item that card shows, product or variant, and the card goes away.

Cards for the saved variants. To show saved variants as variant cards, add a smootify-variant with the attribute data-product-id="wishlist" and design it like a variant card. Smootify copies it once per saved variant, and only the first one on the page is used. You can use one template or both, and nothing saved is left out:

<div>
  <smootify-variant data-product-id="wishlist">
    <div product="title">Product</div>
    <div variant="title">Blue / M</div>
    <smootify-price><div data-prop="price">$0.00</div></smootify-price>
    <wishlist-toggle><button type="button">Remove</button></wishlist-toggle>
  </smootify-variant>
</div>

Here the toggle works inside the variant card too, without a smootify-product around it.

Empty or not. Two conditions work anywhere on the page, for these two states:

3. Show the count

Add wishlist="count" to a text element, anywhere on the page, such as next to a wishlist link in the navbar. It shows the number of saved items and updates on each click.

<a href="/wishlist"><div>Wishlist</div><div wishlist="count">0</div></a>

What you type is a placeholder until the list is read. The full list of parts is in wishlist-toggle, wishlist-share, the wishlist cards and wishlist attributes.

4. Share the list

wishlist-share sends a friend, a partner or a colleague a link to the wishlist page with the visitor’s saved items, for gift ideas or a choice to approve. Whoever opens the link needs no account.

1. Add the element wishlist-share, with a button inside, anywhere: on the wishlist page, in the navbar or in the account.
2. Give it the attribute data-page with the path of your wishlist page, such as /wishlist. Without it, the link opens the page it is on.

<wishlist-share data-page="/wishlist" data-title="My wishlist">
  <button>Share my list</button>
</wishlist-share>

A click opens the device’s share sheet, on phones, or copies the link. With data-copy it always copies the link. data-title is the title of the share, by default the page’s title. Style the moments with classes: is-copied or is-shared for two seconds after the click, and is-empty, with its button disabled, while the list is empty.

The shared page. The link opens your wishlist page with the shared items in place of the visitor’s own, with the same card templates and wishlist="count". The visitor’s own list is not touched: on a shared list, the toggles in the cards save to the visitor’s own wishlist, “add it to mine too”. Two conditions tell the two lists apart in the design:

• condition="shared-wishlist" shows an element only on a shared list, for a heading such as “A list for you”;
• condition="own-wishlist" shows it only on the visitor’s own list, for the share button itself.

The link is a snapshot: it holds the items saved when it was shared, up to 100. Items saved later need a new link, and products that are no longer sold in the visitor’s market do not show.

Before you publish