How to Add a Customer's Name to the Wishlist Page?

To personalize the Wishlist Page, you can modify the header to include the logged-in customer's name. This enhancement helps customers quickly identify their own wishlist when viewing it.

This customisation can be achieved directly in the Custom Product Card code within Swish’s > Settings > Code Editor.

How It Works

The renderHeader function determines whether a customer is logged in:

• If a customer is logged in: Their name will appear at the start of the wishlist title (e.g., “John's Wishlist”).

• If no customer is logged in: The header will default to the generic wishlist title (e.g., “Wishlist”).

renderHeader() {
  const title = this.app.customer 
    ? `${this.app.customer.name}'s ${this.getTranslation("wishlist_page.title")}` 
    : this.getTranslation("wishlist_page.title");

  return html`
    <div class="wk-header">  
      <h1 class="wk-title">${title}</h1>
      ${this.renderWishlistEmptyCallout()} 
      ${this.renderLoginCallout()}
      ${this.renderControls()}
    </div>
  `;
}