Wishlist

Purpose

The Wishlist component renders the wishlist page.

It:

renders only when the feature flag GlobalData.Settings.EnableWishlist is enabled

renders the wishlist product grid (using Reusables\\ProductGridItem\\Default)

supports clearing the wishlist via a confirmation modal

hides removed items immediately when it receives wishlistUpdated events

warns the user when wishlist changes in another tab (localStorage sync)

supports sorting and pagination via query-string navigation

Inputs (model contract)

Model shape (storefront example)

{
  "products": [
    {
      "id": "Product Id",
      "title": "Sample product title",
      "link": "product/sample-product",
      "mediaItems": [
        {
          "id": "Media Item Id",
          "link": "https://example.com/media/sample.jpg",
          "position": 0,
          "alt": "sample.jpg",
          "mediaType": "Image"
        },
        "..."
      ],
      "productVariants": [
        {
          "id": "Variant Id",
          "finalPriceText": "Sample price text",
          "finalPrice": 10
        },
        "..."
      ],
      "dimension1": {
        "attributeId": "Attribute Id",
        "type": "Color"
      },
      "dimension2": {
        "attributeId": "Attribute Id",
        "type": "Size"
      },
      "startPriceText": "Sample price text",
      "hasPriceRange": true,
      "inWishlist": true
    },
    "..."
  ],
  "name": "Wishlist",
  "view": "Default",
  "section": "SectionA",
  "settings": {
    "id": "Component Id",
    "section": "SectionA",
    "type": "NoirWishlist",
    "name": "Wishlist",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": ""
  },
  "translations": {
    "wishlist": "Sample text",
    "modalTitleText": "Sample text",
    "modalMessageText": "Sample text",
    "...": "..."
  }
}

Required fields

settings.id

Optional fields

settings.cssClass

products[]

When empty/missing, the component renders an empty state.

pagination (used only by the template):

pagination.totalCount

pagination.pageNumber

pagination.numberOfPages

translations.*

JavaScript

Global object

Components/Wishlist/Default.js exposes:

Liquid binds it via Alpine:

<section x-data='wishlistdefault.initComponent({{ productsCount }}, {{ products | serialize | escape }})'>

`initComponent(productsCount, products)`

What it does

Creates and returns the Alpine state object.

`init()`

What it does

Initializes list and clears removedIds.

Registers listeners:

wishlistUpdated (same-tab updates)

storage for wishlistSync (cross-tab changes)

Key behaviors / edge cases

Any storage event for wishlistSync triggers showReloadWarning = true.

`handleWishlistUpdated(event)`

What it does

When a product is removed from the global wishlist store, adds it to removedIds.

Sets hideList = true when all products are removed.

`redirectToState(newPage = null)`

What it does

Builds a query string with:

page

sort

Navigates by setting window.location.href.

`clearList(clearListErrorMessage)`

What it does

Calls servicesreusabledefault.clearWishlist().

On success, hides the list.

On failure, shows a toast.

`handleClearModal(modalTranslations)`

What it does

Opens the modal store and wires buttons:

Clear → calls clearList(...)

Cancel → closes modal

Global Alpine stores (used by Wishlist)

`$store.wishlist` (live wishlist ids)

Used in handleWishlistUpdated(...) to check whether an item is still in the wishlist:

Alpine.store("wishlist").items.includes(detail.id)

`$store.modal` (confirmation dialog)

Used to show the “clear wishlist” confirmation dialog.

`$store.toast` (user feedback)

Used to show errors from API operations.

Services / API calls

servicesreusabledefault.clearWishlist()

Clears the wishlist server-side.

Dependencies

Alpine.js

Reusables\\ProductGridItem\\Default

Theme utilities:

servicesreusabledefault.clearWishlist()

Alpine stores:

wishlist

modal

toast

Notes

The template supports a sliding-window pagination UI (Liquid-only).

Cross-tab sync is implemented via localStorage key wishlistSync.

Extras

Template behavior (Liquid + Alpine)

Builds a modalTranslations JSON string in Liquid and passes it into handleClearModal(...).

Filters out removed products at render time via removedIds.includes(product.id).

If hideList becomes true, it shows the empty-state UI even if the original server products[] was non-empty.

Wishlist

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent(productsCount, products)#

init()#

handleWishlistUpdated(event)#

redirectToState(newPage = null)#

clearList(clearListErrorMessage)#

handleClearModal(modalTranslations)#

Global Alpine stores (used by Wishlist)#

$store.wishlist (live wishlist ids)#

$store.modal (confirmation dialog)#

$store.toast (user feedback)#

Services / API calls#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Purpose

Inputs (model contract)

Model shape (storefront example)

Required fields

Optional fields

JavaScript

Global object

`initComponent(productsCount, products)`

`init()`

`handleWishlistUpdated(event)`

`redirectToState(newPage = null)`

`clearList(clearListErrorMessage)`

`handleClearModal(modalTranslations)`

Global Alpine stores (used by Wishlist)

`$store.wishlist` (live wishlist ids)

`$store.modal` (confirmation dialog)

`$store.toast` (user feedback)

Services / API calls

Dependencies

Notes

Extras

Template behavior (Liquid + Alpine)