[ADVANCED] Wishlist count bubble

A wishlist count bubble can be integrated into the wishlist icon placed on your header. This bubble can contain the number of items customers have in their wishlist.

The <ooo-wl-wishlist-count> web component allows you to display a badge with the number of items in the wishlist. This badge can be added on top of the wishlist icon in your header or anywhere else you want to display the count.

It is fully customizable and designed to fit seamlessly into your theme.

How it works

The badge is positioned relative to its parent element.
To ensure it appears correctly, the parent element must have position: relative applied.
The badge displays the number of wishlist items by default, but you can configure it to show only the bubble (without a number), or even show a “0” when the wishlist is empty.

Available Options

The <ooo-wl-wishlist-count> component supports several attributes:

Attribute	Description	Default value
block-start	Distance from the top of the parent element (CSS top)	null
inline-end	Distance from the right of the parent element (CSS right)	null
hide-count	Hides the number when `true`, shows only the bubble indicator	false
show-zero	When `true`, it shows the badge with 0 when the wishlist is empty	false

Example Usage

Here’s a typical setup for displaying a wishlist icon with a count badge in the header:

<ooo-wl-access-button>
  <a href="{% if routes.root_url != '/' %}{{ routes.root_url }}{% endif %}/pages/wishlist" class="relative tap-area">
    <span class="sr-only">{{ 'header.general.open_wishlist' | t }}</span>
    {%- render 'icon', icon: 'heart' -%}
    <div class="header__cart-count">
      <ooo-wl-wishlist-count hidden block-start="0" inline-end="0" class="count-bubble">
      </ooo-wl-wishlist-count>
    </div>
  </a>
</ooo-wl-access-button>

Note: This is the code needed to integrate the wishlist icon in Impact's header.

Explanation:

class="relative" → ensures the badge is positioned relative to the parent link.
<ooo-wl-wishlist-count block-start="0" inline-end="0"> → places the badge in the top-right corner of the icon.
By default, the badge shows the number of wishlist items and hides itself when the wishlist is empty.
The ooo-wl-wishlist-count needs the hidden attribute to show only when the component loads the correct value.

Customization Examples

1. Show badge even when empty (displays 0)

<ooo-wl-wishlist-count hidden block-start="0" inline-end="0" show-zero></ooo-wl-wishlist-count>

2. Hide the number, show only the bubble

<ooo-wl-wishlist-count hidden block-start="0" inline-end="0" hide-count></ooo-wl-wishlist-count>

3. Move badge further down and inward

<ooo-wl-wishlist-count hidden block-start="10px" inline-end="15px"></ooo-wl-wishlist-count>

Accessibility

The <ooo-wl-access-button> wrapper ensures proper accessibility and handles the click event.
If the customer is not logged in and you enabled the “Login to use” option in the app settings, this component will handle redirecting them.

Final Notes

Always ensure the parent element has relative positioning.
Use block-start and inline-end to adjust positioning according to your design.
You can fully customize the style of the badge using CSS to match your store’s look and feel.