salla-scopes

Modal that lets the customer choose the store scope (a branch or market) they are shopping from, or see a product's availability across scopes. Use it once in the theme layout and open it from a button or link. Open it with the open() method or by firing the scopes::open event, for example salla.event.dispatch('scopes::open', { mode: 'availability', product_id: 123 }). With selection="mandatory" the modal opens automatically on load until the customer has chosen a scope once, and it cannot be closed before that. Inside the native app webview the component renders nothing and hands scope selection to the app.

Use itCopy Anchor Link

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

import { SallaScopes } from '@salla.sa/twilight-components-react/scopes';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaScopes } from '@salla.sa/twilight-components-react/scopes';

export function Example() {
  return (
    <SallaScopes selection="mandatory" searchDisplayLimit={8} />
  );
}

PropertiesCopy Anchor Link

MethodsCopy Anchor Link

Call these on the element or a React ref.

close() => Promise<HTMLElement>Copy Anchor Link

Closes the scope modal.

Returns Promise<HTMLElement>: A Promise that resolves when the modal has closed.

handleSubmit() => Promise<any>Copy Anchor Link

Changes the store scope to the one currently selected in the list, then reloads the page with a scope URL parameter and resets the cart. Used by the default confirm button.

Returns Promise<any>: A Promise that resolves when the change request has finished.

open(mode?: any, product_id?: number) => Promise<any>Copy Anchor Link

Opens the scope modal and loads the scopes (cached after the first load for each mode). Inside the native app it opens the app's own scope sheet instead.

Returns Promise<any>: A Promise that resolves once the scopes have loaded.

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-placeholder>, <salla-button>, <salla-modal>, <salla-list-tile>, <salla-skeleton>.