salla-wishlist-actions

Actions header (panel) rendered on top of the wishlist salla-products-list. Place it in the wishlist page, as a sibling of the salla-products-list (it looks for that list in its parent element). It takes no props. The share button is disabled while the list has no products.

It exposes a "Share" dropdown with two options:

• Share all items: shares the whole wishlist right away via salla-social-share.
• Share specific items: enables multi-selection on the sibling salla-products-list and shows a panel to share the selected products.

Selection is enabled on the products list at runtime, so no theme markup changes are required and it works for every theme exposing the customer:wishlist.items.start hook.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-wishlist-actions> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaWishlistActions } from '@salla.sa/twilight-components-react/wishlist-actions';

ExampleCopy Anchor Link

import { SallaWishlistActions } from '@salla.sa/twilight-components-react/wishlist-actions';
import { SallaProductsList } from '@salla.sa/twilight-components-react';

export function Example() {
  return (
    <>
      <h1>Wishlist</h1>
      <SallaWishlistActions />
      <SallaProductsList source="wishlist" />
    </>
  );
}

MethodsCopy Anchor Link

Call these on the element or a React ref.

cancelSpecific() => Promise<void>Copy Anchor Link

Leaves "share specific items" mode: clears the selection and turns off selectable on the sibling products list.

shareAll() => Promise<void>Copy Anchor Link

Creates a share link for the whole wishlist and opens the social share modal with it.

shareSelected() => Promise<void>Copy Anchor Link

Creates a share link for the currently selected products and opens the social share modal with it. Does nothing when nothing is selected.

shareSpecific() => Promise<void>Copy Anchor Link

Enters "share specific items" mode: closes the menu, shows the selection panel and turns on selectable on the sibling products list.

RelatedCopy Anchor Link

Renders: <salla-button>, <salla-social-share>.