Skip to content

shopware/frontends - composables-next

Set of Vue.js composition functions that can be used in any Vue.js project. They provide state management, UI logic and data fetching and are the base for all guides in our building section.

Features

  • createShopwareContext method to create a Vue 3 plugin to install
  • State management
  • Logic for UI
  • Communication with Store-API via api-client package

Setup

Install npm packages (composables & api-client):

bash
# Using pnpm
pnpm add @shopware-pwa/composables-next @shopware/api-client @shopware/api-gen

# Using yarn
yarn add @shopware-pwa/composables-next @shopware/api-client @shopware/api-gen

# Using npm
npm i @shopware-pwa/composables-next @shopware/api-client @shopware/api-gen

Now generate your types ysing the CLI:

bash
pnpm shopware-api-gen generate --apiType=store

Initialize the api-client instance:

js
import { createAPIClient } from "@shopware/api-client";
import type { operations } from "#shopware";

export const apiClient = createAPIClient<operations>({
  baseURL: "https://your-api-instance.com",
  accessToken: "your-sales-channel-access-token",
});

// and then provide it in the Vue app
app.provide("apiClient", apiClient);

Now, we can create a Vue 3 plugin to install a Shopware context in an app:

js
// app variable in type of App

const shopwareContext = createShopwareContext(app, {
  devStorefrontUrl: "https://your-sales-channel-configured-domain.com",
});
// register a plugin in a Vue instance
app.use(shopwareContext);

The example does not provide the session handling and that means you need to do few additional steps if you need to keep your session after the page reload (see the chapter below with 🍪)

Basic usage

Now you can use any composable function in your setup function:

html
<script setup>
    import { useUser, useSessionContext } from "@shopware-pwa/composables-next/dist";

    const { login } = useUser();
    const { refreshSessionContext, sessionContext } = useSessionContext();
    refreshSessionContext();
</script>
<template>
    <pre>{{ sessionContext }}</pre>
    <button @click="login({
        username: "some-user",
        password: "secret-passwd"
    })">
        Try to login!
    </button>
</template>

Session persistence with 🍪

By default, the API-Client is stateless, but accepts an optional context token as a parameter while initializing an instance. In order to keep a session, install some cookie parser to work with cookies easier:

bash
# Using pnpm
pnpm add js-cookie

# Using yarn
yarn add js-cookie

# Using npm
npm i js-cookie

Let's get back to the step where the api-client was initialized:

ts
import { createAPIClient } from "@shopware/api-client";
import type { operations } from "#shopware";
import Cookies from "js-cookie";

const shopwareEndpoint = "https://demo-frontends.shopware.store/store-api";

export const apiClient = createAPIClient<operations>({
  baseURL: shopwareEndpoint,
  accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
  contextToken: Cookies.get("sw-context-token"),
});

apiClient.hook("onContextChanged", (newContextToken) => {
  Cookies.set("sw-context-token", newContextToken, {
    expires: 365, // days
    path: "/",
    sameSite: "lax",
    secure: shopwareEndpoint.startsWith("https://"),
  });
});

Thanks to this, the session will be kept to the corresponding sw-context-token saved in the cookie, so it can be reachable also in the SSR. Check the example to see it in action:

TypeScript support

All composable functions are fully typed with TypeScript and they are registed globally in Nuxt.js application, so the type hinting will help you to work with all of them.

Changelog

Full changelog for stable version is available here

Latest changes: 1.1.1

Patch Changes

  • #1074 b688163 Thanks @mkucmus! - useOrderDetails - Load shipping address for the order details. Ivoking a loadOrderDetails method now will fetch also a shippingOrderAddress association.

  • #1089 db7c93f Thanks @mkucmus! - Migrate eslint config to flat format

  • #1099 3bde5fe Thanks @mdanilowicz! - useCart - Fixed adding promotion code

  • Updated dependencies [b688163, db7c93f, b688163]:

    • @shopware-pwa/helpers-next@1.0.1
    • @shopware/api-client@1.0.2

API

resolveCmsComponent

ts
export function resolveCmsComponent(
  content: Schemas["CmsSection"] | Schemas["CmsBlock"] | Schemas["CmsSlot"],
) 

source code

getDefaultApiParams

TODO: handle defaults in app

ts
export function getDefaultApiParams(): {
  [composableName: string]: unknown;
} 

source code

createShopwareContext

import { registerShopwareDevtools } from "./devtools/plugin";

ts
export function createShopwareContext(
  app: App,
  options: {
    devStorefrontUrl?: string | null;
    enableDevtools?: boolean;
  },
) 

source code

useAddToCart

Composable to manage adding product to cart

ts
export function useAddToCart(
  product: Ref<Schemas["Product"] | undefined>,
): UseAddToCartReturn 

source code

expand UseAddToCartReturn
ts
export type UseAddToCartReturn = {
  /**
   * Add to cart method
   * @type {function}
   */
  addToCart(): Promise<Schemas["Cart"]>;
  /**
   * If you want to add more that 1 product set quantity before invoking `addToCart`
   */
  quantity: Ref<number>;
  /**
   * Returns product count in stock
   */
  getStock: ComputedRef<number | undefined>;
  /**
   * Returns product count in available stock
   */
  getAvailableStock: ComputedRef<number | undefined>;
  /**
   * Flag if product is already in cart
   */
  isInCart: ComputedRef<boolean>;
  /**
   * count of the product quantity already in the cart
   */
  count: ComputedRef<number>;
};

useAddress

Composable to manage customer addresses

ts
export function useAddress(): UseAddressReturn 

source code

expand UseAddressReturn
ts
export type UseAddressReturn = {
  /**
   * List of customer addresses
   */
  customerAddresses: ComputedRef<Schemas["CustomerAddress"][]>;
  /**
   * Loads the addresses that are available under `customerAddresses` property
   */
  loadCustomerAddresses(): Promise<Schemas["CustomerAddress"][]>;
  /**
   * Allows to create new address for a current customer
   */
  createCustomerAddress(
    customerAddress: Schemas["CustomerAddress"],
  ): Promise<Schemas["CustomerAddress"]>;
  /**
   * Allows to update existing address for a current customer
   */
  updateCustomerAddress(
    customerAddress: Schemas["CustomerAddress"],
  ): Promise<Schemas["CustomerAddress"]>;
  /**
   * Allows to delete existing address for a current customer
   */
  deleteCustomerAddress(addressId: string): Promise<void>;
  /**
   * Sets the address for given ID as default billing address
   */
  setDefaultCustomerBillingAddress(addressId: string): Promise<string>;
  /**
   * Sets the address for given ID as default shipping address
   */
  setDefaultCustomerShippingAddress(addressId: string): Promise<string>;
  /**
   * Returns formatted error message
   *
   * @param {ShopwareError} error
   */
  errorMessageBuilder(error: ApiError): string | null;
};

useBreadcrumbs

Composable for breadcrumbs management. Read the guide.

It's recommended to use getCategoryBreadcrumbs for category breadcrumbs.

ts
export function useBreadcrumbs(
  newBreadcrumbs?: Breadcrumb[],
): UseBreadcrumbsReturn 

source code

expand UseBreadcrumbsReturn
ts
export type UseBreadcrumbsReturn = {
  /**
   * Clear breadcrumbs store
   */
  clearBreadcrumbs(): void;
  /**
   * List of breadcrumbs
   */
  breadcrumbs: ComputedRef<Breadcrumb[]>;
};

useCartFunction

Cart management logic.

Used as Shared Composable useCart

ts
export function useCartFunction(): UseCartReturn 

source code

expand UseCartReturn
ts
export type UseCartReturn = {
  /**
   * Add product by id and quantity
   */
  addProduct(params: {
    id: string;
    quantity?: number;
  }): Promise<Schemas["Cart"]>;
  /**
   * Add products by array of items
   */
  addProducts(
    items: operations["addLineItem post /checkout/cart/line-item"]["body"]["items"],
  ): Promise<Schemas["Cart"]>;
  /**
   * Adds a promotion code to the cart
   */
  addPromotionCode(promotionCode: string): Promise<Schemas["Cart"]>;
  /**
   * Lists all applied and active promotion codes
   */
  appliedPromotionCodes: ComputedRef<Schemas["LineItem"][]>;
  /**
   * Current Cart object
   */
  cart: ComputedRef<Schemas["Cart"] | undefined>;
  /**
   * All items in the cart
   */
  cartItems: ComputedRef<Schemas["LineItem"][]>;
  /**
   * Changes the quantity of a product in the cart
   */
  changeProductQuantity(params: {
    id: string;
    quantity: number;
  }): Promise<Schemas["Cart"]>;
  /**
   * The number of items in the cart
   */
  count: ComputedRef<number>;
  /**
   * Refreshes the cart object and related data
   * If @param newCart is provided, it will be used as a new cart object
   */
  refreshCart(newCart?: Schemas["Cart"]): Promise<Schemas["Cart"]>;
  /**
   * Removes the provided LineItem from the cart
   */
  removeItem(lineItem: Schemas["LineItem"]): Promise<Schemas["Cart"]>;
  /**
   * The total price of the cart (including calculated costs like shipping)
   */
  totalPrice: ComputedRef<number>;
  /**
   * Shipping price
   */
  shippingTotal: ComputedRef<number>;
  /**
   * The total price of all cart items
   */
  subtotal: ComputedRef<number>;
  /**
   * `true` if the cart contains no items
   */
  isEmpty: ComputedRef<boolean>;
  /**
   * `true` if cart contains only digital items
   */
  isVirtualCart: ComputedRef<boolean>;
  /**
   * Get cart errors
   */
  consumeCartErrors(): Schemas["Cart"]["errors"];
};

useCartItem

Composable to manage specific cart item

ts
export function useCartItem(
  cartItem: Ref<Schemas["LineItem"]>,
): UseCartItemReturn 

source code

expand UseCartItemReturn
ts
export type UseCartItemReturn = {
  /**
   * Calculated price {number} for the current item
   */
  itemRegularPrice: ComputedRef<number | undefined>;
  /**
   * Calculated price {number} for the current item if list price is set
   */
  itemSpecialPrice: ComputedRef<number | undefined>;
  /**
   * Total price for the current item of given quantity in the cart
   */
  itemTotalPrice: ComputedRef<number | undefined>;
  /**
   * Thumbnail url for the current item's entity
   */
  itemImageThumbnailUrl: ComputedRef<string>;
  /**
   * Options (of variation) for the current item
   */
  itemOptions: ComputedRef<Schemas["LineItem"]["payload"]["options"]>;
  /**
   * Type of the current item: "product" or "promotion"
   */
  itemType: ComputedRef<Schemas["LineItem"]["type"] | undefined>;
  /**
   * Determines if the current item is a product
   */
  isProduct: ComputedRef<boolean>;
  /**
   * Determines if the current item is a promotion
   */
  isPromotion: ComputedRef<boolean>;
  /**
   * Determines if the current item can be removed from cart
   */
  isRemovable: ComputedRef<boolean>;
  /**
   * Determines if the current item's quantity can be changed
   */
  isStackable: ComputedRef<boolean>;
  /**
   * Determines if the current item is a digital product (to download)
   */
  isDigital: ComputedRef<boolean>;
  /**
   * Stock information for the current item
   */
  itemStock: ComputedRef<number | undefined>;
  /**
   * Quantity of the current item in the cart
   */
  itemQuantity: ComputedRef<number | undefined>;
  /**
   * Changes the current item quantity in the cart
   */
  changeItemQuantity(quantity: number): Promise<Schemas["Cart"]>;
  /**
   * Removes the current item from the cart
   */
  removeItem(): Promise<Schemas["Cart"]>;
};

useCategory

Composable to get the category from current CMS context

ts
export function useCategory(
  category?: Ref<Schemas["Category"]>,
): UseCategoryReturn 

source code

expand UseCategoryReturn
ts
export type UseCategoryReturn = {
  /**
   * Current category entity
   */
  category: ComputedRef<Schemas["Category"]>;
};

useCategorySearch

Composable for category search.

ts
export function useCategorySearch(): UseCategorySearchReturn 

source code

expand UseCategorySearchReturn
ts
export type UseCategorySearchReturn = {
  /**
   * Search for category by ID
   * Accepts optional query params and associations
   */
  search(
    categoryId: string,
    options?: {
      withCmsAssociations?: boolean;
      query?: Schemas["Criteria"];
    },
  ): Promise<Schemas["Category"]>;

  /**
   * Search based on the query
   */
  advancedSearch(options: {
    withCmsAssociations?: boolean;
    query: Schemas["Criteria"];
  }): Promise<Schemas["Category"][]>;
};

useCheckout

Composable to manage checkout process

ts
export function useCheckout(): UseCheckoutReturn 

source code

expand UseCheckoutReturn
ts
export type UseCheckoutReturn = {
  /**
   * Fetches all available shipping methods
   */
  getShippingMethods(options?: {
    forceReload: boolean;
  }): Promise<ComputedRef<Schemas["ShippingMethod"][]>>;
  /**
   * List of available shipping methods
   */
  shippingMethods: ComputedRef<Schemas["ShippingMethod"][]>;
  /**
   * Fetches all available payment methods
   */
  getPaymentMethods(options?: {
    forceReload: boolean;
  }): Promise<ComputedRef<Schemas["PaymentMethod"][]>>;
  /**
   * List of available payment methods
   */
  paymentMethods: ComputedRef<Schemas["PaymentMethod"][]>;
  /**
   * Creates order based on the current cart
   */
  createOrder(
    params?: operations["createOrder post /checkout/order"]["body"],
  ): Promise<Schemas["Order"]>;
  /**
   * Shipping address for the current session
   */
  shippingAddress: ComputedRef<Schemas["CustomerAddress"] | undefined>;
  /**
   * Billing address for the current session
   */
  billingAddress: ComputedRef<Schemas["CustomerAddress"] | undefined>;
  /**
   * Selected shipping method for the current session
   * Sugar for {@link useSessionContext.selectedShippingMethod}
   */
  selectedShippingMethod: ComputedRef<Schemas["ShippingMethod"] | null>;
  /**
   * Sets shipping method for the current session
   * Sugar for {@link useSessionContext.setShippingMethod}
   */
  setShippingMethod(shippingMethod: { id: string }): Promise<void>;
  /**
   * Selected payment method for the current session
   * Sugar for {@link useSessionContext.selectedPaymentMethod}
   */
  selectedPaymentMethod: ComputedRef<Schemas["PaymentMethod"] | null>;
  /**
   * Sets payment method for the current session
   * Sugar for {@link useSessionContext.setPaymentMethod}
   */
  setPaymentMethod(paymentMethod: { id: string }): Promise<void>;
};

useCmsBlock

Composable to get cms block content

ts
export function useCmsBlock<BLOCK_TYPE extends Schemas["CmsBlock"]>(
  content: BLOCK_TYPE,
): UseCmsBlockReturn 

source code

expand UseCmsBlockReturn
ts
export type UseCmsBlockReturn = {
  /**
   * Cms block content
   */
  block: Schemas["CmsBlock"];
  /**
   * Get slot content by slot name (identifier)
   * @example getSlotContent("main")
   */
  getSlotContent(slotName: string): ArrayElement<Schemas["CmsBlock"]["slots"]>;
};

useCmsMeta

TODO: remove parameter and use reactive state of cmsResponse provided by useCms composable

ts
export function useCmsMeta(
  entity: Schemas["Category"] | Schemas["Product"] | Schemas["LandingPage"],
): UseCmsMetaReturn 

source code

expand UseCmsMetaReturn
ts
export type UseCmsMetaReturn = {
  /**
   * Meta title for current page/entity
   */
  title: ComputedRef<string>;
  /**
   * Meta tags for current page/entity
   */
  meta: ComputedRef<{ name: string; content: string }[]>;
};

useCmsSection

Composable to get cms section content

ts
export function useCmsSection<SECTION_TYPE extends Schemas["CmsSection"]>(
  content: SECTION_TYPE,
): UseCmsSectionType 

source code

useCmsTranslations

ts
export function useCmsTranslations() 

source code

useContext

Context helper composable to provide and inject data. It takes injectionName to inject the context. If no context is provided, it will create a new one and provide it. If context is provided in params, it will create new context, use param as value and provide it. If replace is provided, it will replace the existing context with the new value.

ts
export function useContext<T>(
  injectionName: string,
  params?: {
    context?: Ref<T> | T;
    replace?: T;
  },
) 

source code

useCountries

Composable to manage countries

ts
export function useCountries(): UseCountriesReturn 

source code

expand UseCountriesReturn
ts
export type UseCountriesReturn = {
  mountedCallback(): Promise<void>;
  getCountries: ComputedRef<Schemas["Country"][]>;
  fetchCountries(): Promise<
    operations["readCountry post /country"]["response"]
  >;
  getStatesForCountry(countryId: string): Schemas["CountryState"][] | null;
};

useCustomerOrders

Composable for fetching the orders list.

ts
export function useCustomerOrders(): UseCustomerOrdersReturn 

source code

expand UseCustomerOrdersReturn
ts
export type UseCustomerOrdersReturn = {
  /**
   * All placed orders belonging to the logged-in customer
   */
  orders: Ref<Schemas["Order"][]>;
  /**
   * Changes the current page of the orders list
   *
   * In order to change a page with additional parameters please use `loadOrders` method.
   */
  changeCurrentPage(pageNumber: number | string): Promise<void>;
  /**
   * Fetches the orders list and assigns the result to the `orders` property
   */
  loadOrders(parameters?: Schemas["Criteria"]): Promise<void>;
  /**
   * Current page number
   */
  currentPage: ComputedRef<number>;
  /**
   * total pages
   */
  totalPages: ComputedRef<number>;
  /**
   * Limit of orders per page
   */
  limit: Ref<number>;
};

useCustomerPassword

Composable for customer password management.

ts
export function useCustomerPassword(): UseCustomerPasswordReturn 

source code

expand UseCustomerPasswordReturn
ts
export type UseCustomerPasswordReturn = {
  /**
   * Change customer's current password
   */
  updatePassword(
    updatePasswordData: operations["changePassword post /account/change-password"]["body"],
  ): Promise<
    operations["changePassword post /account/change-password"]["response"]
  >;
  /**
   * Reset customer's password
   */
  resetPassword(
    resetPasswordData: operations["sendRecoveryMail post /account/recovery-password"]["body"],
  ): Promise<
    operations["sendRecoveryMail post /account/recovery-password"]["response"]
  >;
};

useDefaultOrderAssociations

Returns default order associations. You can override this composable in your project.

ts
export function useDefaultOrderAssociations(): UseDefaultOrderAssociationsReturn 

source code

expand UseDefaultOrderAssociationsReturn
ts
export type UseDefaultOrderAssociationsReturn = Schemas["Criteria"] & {
  checkPromotion?: boolean;
};

useInternationalization

Composable for internationalization management.

ts
export function useInternationalization(
  pathResolver?: (path: string) => string,
): UseInternationalizationReturn 

source code

expand UseInternationalizationReturn
ts
export type UseInternationalizationReturn = {
  /**
   * StorefrontUrl is needed to specify language of emails
   *
   *  @returns {string} storefront URL
   */
  getStorefrontUrl(): string;
  /**
   * Get available languages from backend
   *
   * @returns {Promise<operations['readLanguages post /language']['body']>} list of languages
   */
  getAvailableLanguages(): Promise<
    operations["readLanguages post /language"]["response"]
  >;
  /**
   * Change current language
   *
   * @param {string} languageId
   * @returns {Promise<Schemas['ContextTokenResponse']>} context object
   */
  changeLanguage(
    languageId: string,
  ): Promise<operations["updateContext patch /context"]["response"]>;
  /**
   * Get language code from backend language id
   *
   * @param {string} languageId
   * @returns {string} language code
   */
  getLanguageCodeFromId(languageId: string): string;
  /**
   * Get backend language id from language code
   *
   * @param {string} languageCode
   * @returns {string} language
   */
  getLanguageIdFromCode(languageCode: string): string;
  /**
   * Replace to dev url if it is set
   *
   * @param {string} url
   * @returns {string} prefixed url
   */
  replaceToDevStorefront(url: string): string;
  /**
   * List of available languages
   */
  languages: Ref<Schemas["Language"][]>;
  /**
   * Currently used language
   */
  currentLanguage: Ref<string>;
  /**
   * Current prefix from the context
   */
  currentPrefix: Ref<string>;
  /**
   * Add prefix to the Url
   * @param {string | RouteObject} link
   */
  formatLink(link: string | RouteObject): string | RouteObject;
};

useLandingSearch

Composable for landing page search.

ts
export function useLandingSearch(): {
  search: (
    navigationId: string,
    options?: {
      withCmsAssociations?: boolean;
    },
  ) => Promise<Schemas["LandingPage"]>;
} 

source code

useLocalWishlist

Composable for wishlist management.

ts
export function useLocalWishlist(): UseLocalWishlistReturn 

source code

expand UseLocalWishlistReturn
ts
export type UseLocalWishlistReturn = {
  /**
   * Get wishlist products from localstorage
   */
  getWishlistProducts(): void;
  /**
   * Add product to wishlist by its id
   */
  addToWishlist(id: string): Promise<void>;
  /**
   * Remove product from wishlist by its id
   */
  removeFromWishlist(id: string): Promise<void>;
  /**
   * Remove all products from wishlist
   */
  clearWishlist(): Promise<void>;
  /**
   * List of wishlist items
   */
  items: ComputedRef<string[]>;
  /**
   * Count of wishlist items
   */
  count: ComputedRef<number>;
};

useNavigation

Composable for navigation. Provides state for navigation trees depending on navigation type.

ts
export function useNavigation(params?: {
  type?: Schemas["NavigationType"] | string;
}): UseNavigationReturn 

source code

expand UseNavigationReturn
ts
export type UseNavigationReturn = {
  /**
   * List of navigation elements
   */
  navigationElements: ComputedRef<Schemas["NavigationRouteResponse"] | null>;
  /**
   * Load navigation elements
   */
  loadNavigationElements(params: {
    depth: number;
  }): Promise<Schemas["NavigationRouteResponse"]>;
};

useNavigationContext

Composable to get navigation context from the URL.

ts
export function useNavigationContext(
  context?: Ref<Schemas["SeoUrl"] | null>,
): UseNavigationContextReturn 

source code

expand UseNavigationContextReturn
ts
export type UseNavigationContextReturn = {
  /**
   * SEO URL from the navigation context
   */
  navigationContext: ComputedRef<Schemas["SeoUrl"] | null>;
  /**
   * Route name from the navigation context
   */
  routeName: ComputedRef<Schemas["SeoUrl"]["routeName"] | undefined>;
  /**
   * Foreign key (ID) for current navigation context
   */
  foreignKey: ComputedRef<string>;
};

useNavigationSearch

Composable to get search for SeoUrl entity for given path.

ts
export function useNavigationSearch(): UseNavigationSearchReturn 

source code

expand UseNavigationSearchReturn
ts
export type UseNavigationSearchReturn = {
  /**
   * Get {@link SeoUrl} entity for given path
   * @example resolvePath("/my-category/my-product") or resolvePath("/") for home page
   */
  resolvePath(path: string): Promise<Schemas["SeoUrl"] | null>;
};

useNewsletter

Composable for newsletter subscription.

ts
export function useNewsletter(): UseNewsletterReturn 

source code

expand UseNewsletterReturn
ts
export type UseNewsletterReturn = {
  /**
   * Subscribes the user to the newsletter
   * @param params {@link operations['subscribeToNewsletter post /newsletter/subscribe']['body']}
   */
  newsletterSubscribe(
    params: Omit<
      operations["subscribeToNewsletter post /newsletter/subscribe"]["body"],
      "storefrontUrl"
    >,
  ): Promise<void>;
  /**
   * Removes the email from the newsletter
   * @param email
   */
  newsletterUnsubscribe(email: string): Promise<void>;
  /**
   * Get newsletter status from the API call
   */
  getNewsletterStatus(): Promise<Schemas["AccountNewsletterRecipientResult"]>;
  /**
   * Indicates if the user is subscribed to the newsletter
   *
   * Returns `true` if the user is subscribed to the newsletter, `false` otherwise
   */
  isNewsletterSubscriber: ComputedRef<boolean>;
  /**
   * Newsletter status
   */
  newsletterStatus: Ref<Schemas["AccountNewsletterRecipientResult"]["status"]>;
  /**
   * Inform about newsletter confirmation
   */
  confirmationNeeded: ComputedRef<boolean>;
};

useNotifications

Composable for managing notifications (flash messages) on frontend.

ts
export function useNotifications(): UseNotificationsReturn 

source code

expand UseNotificationsReturn
ts
export type UseNotificationsReturn = {
  /**
   * List of active notifications
   */
  notifications: ComputedRef<Notification[]>;
  /**
   * Removes a specific notification by its ID
   */
  removeOne(id: number): void;
  /**
   * Resets the notification list - clear all notifications
   */
  removeAll(): void;
  /**
   * Push an info notification to the current list
   */
  pushInfo(message: string, options?: NotificationOptions): void;
  /**
   * Pushes a warning notification to the current list
   */
  pushWarning(message: string, options?: NotificationOptions): void;
  /**
   * Pushes an error notification to the current list
   */
  pushError(message: string, options?: NotificationOptions): void;
  /**
   * Pushes a success notification to the current list
   */
  pushSuccess(message: string, options?: NotificationOptions): void;
};

useOrderDetails

Composable for managing an existing order.

ts
export function useOrderDetails(
  orderId: string,
  associations?: Schemas["Criteria"]["associations"],
): UseOrderDetailsReturn 

source code

expand UseOrderDetailsReturn
ts
export type UseOrderDetailsReturn = {
  /**
   * {@link Schemas['Order']} object
   */
  order: ComputedRef<Schemas["Order"] | undefined | null>;
  /**
   * Order status (e.g. 'Open', 'Cancelled')
   */
  status: ComputedRef<string | undefined>;
  /**
   * Order status technical name (e.g. 'open', 'cancelled')
   */
  statusTechnicalName: ComputedRef<string | undefined>;
  /**
   * Order total price
   */
  total: ComputedRef<number | undefined>;
  /**
   * Order subtotal price for all items
   */
  subtotal: ComputedRef<number | undefined>;
  /**
   * Order shipping costs
   */
  shippingCosts: ComputedRef<number | undefined>;
  /**
   * Shipping address
   */
  shippingAddress: ComputedRef<Schemas["OrderAddress"] | undefined>;
  /**
   * Billing address
   */
  billingAddress: ComputedRef<Schemas["OrderAddress"] | undefined>;
  /**
   * Basic personal details
   */
  personalDetails: ComputedRef<{
    email: string | undefined;
    firstName: string | undefined;
    lastName: string | undefined;
  }>;
  /**
   * Payment URL for external payment methods (e.g. async payment in external payment gateway)
   */
  paymentUrl: Ref<null | string>;
  /**
   * Selected shipping method
   */
  shippingMethod: ComputedRef<Schemas["ShippingMethod"] | undefined | null>;
  /**
   * Selected payment method
   */
  paymentMethod: ComputedRef<Schemas["PaymentMethod"] | undefined | null>;
  /**
   * Get order object including additional associations.
   * useDefaults describes what order object should look like.
   */
  loadOrderDetails(): Promise<Schemas["OrderRouteResponse"]>;
  /**
   * Handle payment for existing error.
   *
   * Pass custom success and error URLs (optionally).
   */
  handlePayment(
    successUrl?: string,
    errorUrl?: string,
    paymentDetails?: unknown,
  ): void;
  /**
   * Cancel an order.
   *
   * Action cannot be reverted.
   */
  cancel(): Promise<Schemas["StateMachineState"]>;
  /**
   * Changes the payment method for current cart.
   * @param paymentMethodId - ID of the payment method to be set
   * @returns
   */
  changePaymentMethod(
    paymentMethodId: string,
  ): Promise<Schemas["SuccessResponse"]>;
  /**
   * Get media content
   *
   * @param {string} downloadId
   * @returns {Blob}
   */
  getMediaFile: (downloadId: string) => Promise<Blob>;
  /**
   * Get order documents
   * @param {string} documentId
   * @param {string} deepLinkCode
   * @returns
   */
  getDocumentFile: (
    documentId: string,
    deepLinkCode: string,
  ) => Promise<Schemas["Document"]>;
  /**
   * Check if order has documents
   */
  hasDocuments: ComputedRef<boolean>;
  /**
   * Get order documents
   */
  documents: ComputedRef<Schemas["Document"][]>;
  /**
   * Fetches all available payment methods
   */
  getPaymentMethods(): Promise<Schemas["PaymentMethod"][]>;

  paymentChangeable: ComputedRef<boolean>;
};

useOrderPayment

Composable for managing an existing order.

ts
export function useOrderPayment(
  order: ComputedRef<Schemas["Order"] | null | undefined>,
): UseOrderPaymentReturn 

source code

expand UseOrderPaymentReturn
ts
export type UseOrderPaymentReturn = {
  /**
   * If the payment can be done after the order is placed
   */
  isAsynchronous: ComputedRef<boolean | undefined>;
  /**
   * Active payment transaction
   */
  activeTransaction: ComputedRef<Schemas["OrderTransaction"] | undefined>;
  /**
   * Payment status
   */
  state: ComputedRef<Schemas["StateMachineState"] | null | undefined>;
  paymentUrl: Ref<null | string>;
  /**
   * Payment method set for the order
   */
  paymentMethod: ComputedRef<Schemas["PaymentMethod"] | undefined | null>;

  /**
   * Invokes the payment process for the order in the backend
   */
  handlePayment(
    /**
     * URL to redirect after successful payment
     */
    successUrl?: string,
    /**
     * URL to redirect after failed payment
     */
    errorUrl?: string,
    /**
     * additional payment details to provide
     */
    paymentDetails?: unknown,
  ): Promise<undefined | unknown>;
  /**
   * Change a payment method for the order
   */
  changePaymentMethod(
    paymentMethodId: string,
  ): Promise<Schemas["SuccessResponse"] | undefined>;
};

useProduct

Composable for product management.

ts
export function useProduct(
  product?: Ref<Schemas["Product"]> | Schemas["Product"],
  configurator?: Ref<Schemas["PropertyGroup"][]> | Schemas["PropertyGroup"][],
): UseProductReturn 

source code

expand UseProductReturn
ts
export type UseProductReturn = {
  /**
   * Returns product object
   * {@link Product} object
   */
  product: ComputedRef<Schemas["Product"]>;
  /**
   * {@link PropertyGroup} array that defines the product possible configurations
   */
  configurator: ComputedRef<Schemas["PropertyGroup"][]>;
  /**
   * Merges the current product with the new variant data
   * @param variant - {@link Product} object with the new variant data
   */
  changeVariant(variant?: Partial<Schemas["Product"]>): void;
};

useProductAssociations

Get product association entity.

ts
export function useProductAssociations(
  product: ComputedRef<Schemas["Product"]>,
  options: {
    associationContext: "cross-selling" | "reviews";
  },
): UseProductAssociationsReturn 

source code

expand UseProductAssociationsReturn
ts
export type UseProductAssociationsReturn = {
  /**
   * Start loading resources. Search Parameters and HTTP method can be passed.
   *
   */
  loadAssociations(params: {
    method?: "post" | "get";
    searchParams: Schemas["Criteria"];
  }): Promise<void>;
  /**
   * If it's loading - indicator
   */
  isLoading: ComputedRef<boolean>;
  /**
   * Product associations, like CrossSelling[]
   */
  productAssociations: ComputedRef<Schemas["CrossSellingElementCollection"]>;
};

useProductConfigurator

Composable to change product variant.

ts
export function useProductConfigurator(): UseProductConfiguratorReturn 

source code

expand UseProductConfiguratorReturn
ts
export type UseProductConfiguratorReturn = {
  /**
   * Handler for action when the selected option is changed
   */
  handleChange(
    attribute: string,
    option: string,
    onChangeHandled: () => void,
  ): Promise<void>;

  findVariantForSelectedOptions(options?: {
    [key: string]: string;
  }): Promise<Schemas["Product"] | undefined>;

  /**
   * Indicates if the options are being (re)loaded
   */
  isLoadingOptions: Ref<boolean>;
  /**
   * Object of currently selected options
   */
  getSelectedOptions: ComputedRef<{
    [key: string]: string;
  }>;
  /**
   * All assigned properties which the variant can be made of
   */
  getOptionGroups: ComputedRef<Schemas["PropertyGroup"][]>;
};

useProductPrice

The purpose of the useProductPrice function is to abstract the logic to expose most useful helpers for price displaying.

ts
export function useProductPrice(
  product: Ref<Schemas["Product"] | undefined>,
): UseProductPriceReturn 

source code

expand UseProductPriceReturn
ts
export type UseProductPriceReturn = {
  /**
   * Whole calculated price object
   */
  price: ComputedRef<Schemas["CalculatedPrice"] | undefined>;
  /**
   * Calculated price value for one selling unit
   */
  totalPrice: ComputedRef<number | undefined>;
  /**
   * Current unit price value
   */
  unitPrice: ComputedRef<number | undefined>;
  /**
   * Can be used if isListPrice is set to true
   */
  referencePrice: ComputedRef<
    Schemas["CalculatedPrice"]["referencePrice"] | undefined
  >;
  /**
   * determines if `price` contains the minimum tier price
   */
  displayFrom: ComputedRef<boolean>;
  /**
   * cheapest price value for a variant if exists
   */
  displayFromVariants: ComputedRef<number | false | undefined>;
  /**
   * array of TierPrice object
   */
  tierPrices: ComputedRef<TierPrice[]>;
  /**
   * determines whether a discount price is set
   */
  isListPrice: ComputedRef<boolean>;
  /**
   * price for products with regulation price
   */
  regulationPrice: ComputedRef<number | undefined>;
};

useProductReviews

Composable for listing customer orders.

ts
export function useProductReviews(
  product: Ref<Schemas["Product"]>,
): UseProductReviewsReturn 

source code

expand UseProductReviewsReturn
ts
export type UseProductReviewsReturn = {
  /**
   * All reviews added to the product
   */
  productReviews: ComputedRef<Schemas["ProductReview"][]>;
  /**
   * Adds a review to the product
   * @param data `title` - review title, `content` - review content, `points` - review points (range of 1-5)
   * @returns
   */
  addReview(data: {
    title: string;
    content: string;
    points: number;
  }): Promise<void>;
  /**
   * Fetches the reviews list and assigns the result to the `productReviews` property
   * @param parameters {@link Schemas["Criteria"]}
   * @returns
   */
  loadProductReviews(
    parameters?: Schemas["Criteria"],
  ): Promise<
    operations["readProductReviews post /product/{productId}/reviews"]["response"]
  >;
};

useProductSearch

Composable for product search.

ts
export function useProductSearch(): UseProductSearchReturn 

source code

expand UseProductSearchReturn
ts
export type UseProductSearchReturn = {
  /**
   * Searches for a product by its id
   * @param productId
   * @param options - optional parameters accepts `withCmsAssociations` flag to fetch cms-related associations and criteria
   * @returns {Promise<Schemas['ProductDetailResponse']>}
   */
  search: (
    productId: string,
    options?: UseProductSearchReturnOptions,
  ) => Promise<Schemas["ProductDetailResponse"]>;
};

useProductSearchSuggest

Composable for product suggest search.

ts
export function useProductSearchSuggest(): UseProductSearchSuggestReturn 

source code

expand UseProductSearchSuggestReturn
ts
export type UseProductSearchSuggestReturn = {
  /**
   * Current search term
   */
  searchTerm: Ref<string>;
  /**
   * Indicates if the search is in progress
   */
  loading: ComputedRef<boolean>;
  /**
   * Performs the search
   * @param additionalCriteria - additional search criteria of type {@link ShopwareSearchParams}
   * @returns
   */
  search(
    additionalCriteria?: Partial<operations["searchPage post /search"]["body"]>,
  ): Promise<void>;
  /**
   * Loads more products for current search criteria
   */
  loadMore(
    criteria: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Returns the product list found by the search
   */
  getProducts: ComputedRef<Schemas["ProductListingResult"]["elements"]>;
  /**
   * Returns the total number of products found by the search
   */
  getTotal: ComputedRef<number>;
};

useProductWishlist

Manage wishlist for a single product.

ts
export function useProductWishlist(
  productId: string,
): UseProductWishlistReturn 

source code

expand UseProductWishlistReturn
ts
export type UseProductWishlistReturn = {
  /**
   * Removes product from wishlist
   */
  removeFromWishlist(): Promise<void>;
  /**
   * Adds product to wishlist
   */
  addToWishlist(): Promise<void>;
  /**
   * Indicates whether a product is in wishlist
   */
  isInWishlist: Ref<boolean>;
};

useSalutations

Composable for fetching the salutations list.

ts
export function useSalutations(): UseSalutationsReturn 

source code

expand UseSalutationsReturn
ts
export type UseSalutationsReturn = {
  /**
   * All available salutations
   */
  getSalutations: ComputedRef<Schemas["Salutation"][]>;
  /**
   * Fetches the salutations list and assigns the result to the `salutations` property
   */
  fetchSalutations(): Promise<
    operations["readSalutation post /salutation"]["response"]
  >;
};

useShopwareContext

ts
export function useShopwareContext(): ShopwareContext 

source code

expand ShopwareContext
ts
export type ShopwareContext = {
  devStorefrontUrl: string | null;
  /**
   * Shopware API client
   */
  apiClient: ApiClient;
};

useSyncWishlist

Composable to manage wishlist via API

ts
export function useSyncWishlist(): UseSyncWishlistReturn 

source code

expand UseSyncWishlistReturn
ts
export type UseSyncWishlistReturn = {
  /**
   * Get products from wishlist
   */
  getWishlistProducts(
    defaultSearchCriteria?: Schemas["Criteria"],
  ): Promise<void>;
  /**
   * Merge products with wishlist already existing in API wishlist
   */
  mergeWishlistProducts(itemsToMerge: string[]): void;
  /**
   * Add product to wishlist
   */
  addToWishlistSync(id: string): void;
  /**
   * Remove product from wishlist
   */
  removeFromWishlistSync(id: string): void;
  /**
   * Wishlist items (Product IDs)
   */
  items: ComputedRef<string[]>;
  /**
   * Wishlist items count
   */
  count: ComputedRef<number>;
  /**
   * Current page number
   */
  currentPage: ComputedRef<number>;
};

useUrlResolver

ts
export function useUrlResolver() 

source code

useUser

Composable for user management.

ts
export function useUser(): UseUserReturn 

source code

expand UseUserReturn
ts
export type UseUserReturn = {
  /**
   * Logs-in user with given credentials
   * @param params - username and password
   *
   * @see https://github.com/shopware/frontends/issues/112 if login fails due to missing context token
   */
  login(params: { username: string; password: string }): Promise<void>;
  /**
   * Registers the user for given credentials
   * @param params {@link CustomerRegistrationParams}
   * @returns {@link Customer} object on success
   */
  register(
    params: Omit<
      operations["register post /account/register"]["body"],
      "storefrontUrl"
    >,
  ): Promise<Schemas["Customer"]>;
  /**
   * Whole {@link Customer} object
   */
  user: ComputedRef<Schemas["Customer"] | undefined>;
  /**
   * Indicates if the user is logged in
   */
  isLoggedIn: ComputedRef<boolean>;
  /**
   * Indicates if the user is logged in as a customer (not a guest)
   */
  isCustomerSession: ComputedRef<boolean>;
  /**
   * Indicates if the user is logged in as a guest
   */
  isGuestSession: ComputedRef<boolean>;
  /**
   * {@link Country} of the user
   */
  country: Ref<Schemas["Country"] | null>;
  /**
   * {@link Salutation} of the user
   */
  salutation: Ref<Schemas["Salutation"] | null>;
  /**
   * Default billing address id
   */
  defaultBillingAddressId: ComputedRef<string | null>;
  /**
   * Default shipping address id
   */
  defaultShippingAddressId: ComputedRef<string | null>;
  /**
   * Fetches the user data from the API
   */
  refreshUser(params?: Schemas["Criteria"]): Promise<Schemas["Customer"]>;
  /**
   * Logs out the user
   */
  logout(): Promise<
    operations["logoutCustomer post /account/logout"]["response"]
  >;
  /**
   * Loads the {@link Country} of the user
   */
  loadCountry(
    countryId: string,
  ): Promise<operations["readCountry post /country"]["response"]>;
  /**
   * Loads the {@link Salutation} for given id
   */
  loadSalutation(
    salutationId: string,
  ): Promise<operations["readSalutation post /salutation"]["response"]>;
  /**
   * Updates the user profile data
   * @param personals {@link RequestParameters<'changeProfile'>}
   * @returns
   */
  updatePersonalInfo(
    personals: operations["changeProfile post /account/change-profile"]["body"],
  ): Promise<void>;
  /**
   * Updates the user email
   * @param updateEmailData - {@link RequestParameters<'changeEmail'>}
   * @returns
   */
  updateEmail(
    updateEmailData: operations["changeEmail post /account/change-email"]["body"],
  ): Promise<void>;
  /**
   * Sets the default payment method for given id
   * @param paymentMethodId
   * @returns
   */
  setDefaultPaymentMethod(paymentMethodId: string): Promise<void>;
  /**
   * Default payment method for the user
   */
  userDefaultPaymentMethod: ComputedRef<
    Schemas["PaymentMethod"]["translated"] | null
  >;
  /**
   * Default billing address for the user
   */
  userDefaultBillingAddress: ComputedRef<Schemas["CustomerAddress"] | null>;
  /**
   * Default shipping address for the user
   */
  userDefaultShippingAddress: ComputedRef<Schemas["CustomerAddress"] | null>;
};

useWishlist

Composable to manage wishlist

ts
export function useWishlist(): UseWishlistReturn 

source code

expand UseWishlistReturn
ts
export type UseWishlistReturn = {
  /**
   * Merge products with wishlist between async (API) and sync (localstorage) wishlists
   */
  mergeWishlistProducts(): void;
  /**
   * Get products list added to wishlist
   */
  getWishlistProducts(query?: Schemas["Criteria"]): Promise<void>;
  /**
   * Clear wishlist
   */
  clearWishlist(): void;
  /**
   * Wishlist items (Product IDs)
   */
  items: ComputedRef<string[]>;
  /**
   * Current page number
   */
  currentPage: ComputedRef<number>;
  /**
   * total pages count
   */
  totalPagesCount: ComputedRef<number>;
  /**
   * total wishlist items count
   */
  count: ComputedRef<number>;
  /**
   * Indicates if the wishlist can be synced
   */
  canSyncWishlist: ComputedRef<boolean>;
};

useB2bQuoteManagement

Composable to manage quotes in the B2BQuote module.

ts
export function useB2bQuoteManagement(): UseB2bQuoteManagement 

source code

useSessionContext

Composable for session management. SessionContext contain all related data like user, currency, country, shippingMethod, paymentMethod etc.

ts
export function useSessionContext(
  newContext?: Schemas["SalesChannelContext"],
): UseSessionContextReturn 

source code

expand UseSessionContextReturn
ts
export type UseSessionContextReturn = {
  /**
   * Patches the context in order to use new language
   */
  setLanguage(language: Partial<Schemas["Language"]>): Promise<void>;
  /**
   * Patches the context in order to use new countryId
   *
   * @param {string} countryId
   */
  setCountry(countryId: string): Promise<void>;
  /**
   * current context's language
   */
  sessionContext: ComputedRef<Schemas["SalesChannelContext"] | undefined>;
  /**
   * Fetches the session context and assigns the result to the `sessionContext` property
   */
  refreshSessionContext(): Promise<void>;
  /**
   * current context's language
   */
  selectedShippingMethod: ComputedRef<Schemas["ShippingMethod"] | null>;
  /**
   * Patches the context in order to use new shipping method
   */
  setShippingMethod(
    shippingMethod: Partial<Schemas["ShippingMethod"]>,
  ): Promise<void>;
  /**
   * current context's payment method
   */
  selectedPaymentMethod: ComputedRef<Schemas["PaymentMethod"] | null>;
  /**
   * Patches the context in order to use new payment method
   */
  setPaymentMethod(paymentMethod: { id: string }): Promise<void>;
  /**
   * current context's currency
   */
  currency: ComputedRef<Schemas["Currency"] | null>;
  /**
   * Patches the context in order to use new currency
   */
  setCurrency(currency: Partial<Schemas["Currency"]>): Promise<void>;
  /**
   * current context's shipping address
   */
  activeShippingAddress: ComputedRef<Schemas["CustomerAddress"] | null>;
  /**
   * Patches the context in order to use new shipping address
   */
  setActiveShippingAddress(
    address: Partial<Schemas["CustomerAddress"]>,
  ): Promise<void>;
  /**
   * current context's billing address
   */
  activeBillingAddress: ComputedRef<Schemas["CustomerAddress"] | null>;
  /**
   * current context's tax state
   */
  taxState: ComputedRef<string | undefined>;
  /**
   * Patches the context in order to use new billing address
   */
  setActiveBillingAddress(
    address: Partial<Schemas["CustomerAddress"]>,
  ): Promise<void>;
  /**
   * Patches the context with new context
   */
  setContext(context: Schemas["SalesChannelContext"]): void;
  /**
   * current context's country id
   */
  countryId: ComputedRef<string | undefined>;
  /**
   * current sales channel country id
   */
  salesChannelCountryId: ComputedRef<string | undefined>;
  /**
   * current language id
   */
  languageId: ComputedRef<string | undefined>;
  /**
   * current language id chain
   */
  languageIdChain: ComputedRef<string>;
  /**
   * current context's customer object
   */
  userFromContext: ComputedRef<Schemas["Customer"] | undefined>;
};

useListing

ts
export function useListing(params?: {
  listingType: ListingType;
  categoryId?: string;
  defaultSearchCriteria?: operations["searchPage post /search"]["body"];
}): UseListingReturn 

source code

expand UseListingReturn
ts
export type UseListingReturn = {
  /**
   * Listing that is currently set
   * {@link ListingResult} object
   */
  getInitialListing: ComputedRef<Schemas["ProductListingResult"] | null>;
  /**
   * Sets the initial listing - available synchronously
   * @param {@link initialListing} - initial listing to set
   * @returns
   */
  setInitialListing(
    initialListing: Schemas["ProductListingResult"],
  ): Promise<void>;
  /**
   * @deprecated - use `search` instead
   * Searches for the listing based on the criteria
   * @param criteria {@link Schemas['Criteria']}
   * @returns
   */
  initSearch(
    criteria: operations["searchPage post /search"]["body"],
  ): Promise<Schemas["ProductListingResult"]>;
  /**
   * Searches for the listing based on the criteria
   * @param criteria
   * @returns
   */
  search(
    criteria:
      | operations["readProductListing post /product-listing/{categoryId}"]["body"]
      | operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Loads more (next page) elements to the listing
   */
  loadMore(
    criteria?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Listing that is currently set
   */
  getCurrentListing: ComputedRef<Schemas["ProductListingResult"] | null>;
  /**
   * Listing elements ({@link Product}) that are currently set
   */
  getElements: ComputedRef<Schemas["ProductListingResult"]["elements"]>;
  /**
   * Available sorting orders
   */
  getSortingOrders: ComputedRef<
    Schemas["ProductSorting"][] | { key: string; label: string }[] | undefined
  >;
  /**
   * Current sorting order
   */
  getCurrentSortingOrder: ComputedRef<string | undefined>;
  /**
   * Changes the current sorting order
   * @param order - i.e. "name-asc"
   * @returns
   */
  changeCurrentSortingOrder(
    order: string,
    query?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Current page number
   */
  getCurrentPage: ComputedRef<number>;
  /**
   * Changes the current page number
   * @param pageNumber - page number to change to
   * @returns
   */
  changeCurrentPage(
    page: number,
    query?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Total number of elements found for the current search criteria
   */
  getTotal: ComputedRef<number>;
  /**
   * Total number of pages found for the current search criteria
   */
  getTotalPagesCount: ComputedRef<number>;
  /**
   * Number of elements per page
   */
  getLimit: ComputedRef<number>;
  /**
   * Initial filters
   */
  getInitialFilters: ComputedRef<ReturnType<typeof getListingFilters>>;
  /**
   * All available filters
   */
  getAvailableFilters: ComputedRef<ReturnType<typeof getListingFilters>>;
  /**
   * Filters that are currently set
   */
  getCurrentFilters: ComputedRef<
    Schemas["ProductListingResult"]["currentFilters"]
  >;
  /**
   * Sets the filters to be applied for the listing
   * @param filters
   * @returns
   */
  setCurrentFilters(filters: { code: string; value: unknown }): Promise<void>;
  /**
   * Indicates if the listing is being fetched
   */
  loading: ComputedRef<boolean>;
  /**
   * Indicates if the listing is being fetched via `loadMore` method
   */
  loadingMore: ComputedRef<boolean>;
  /**
   * Resets the filters - clears the current filters
   */
  resetFilters(): Promise<void>;
  /**
   * Change selected filters to the query object
   */
  filtersToQuery(
    filters: Schemas["ProductListingCriteria"],
  ): Record<string, unknown>;
};

createListingComposable

Factory to create your own listing.

By default you can use useListing composable, which provides you predefined listings for category(cms) listing and product search listing. Using factory you can provide our own compatible search method and use it for example for creating listing of orders in my account.

ts
export function createListingComposable({
  searchMethod,
  searchDefaults,
  listingKey,
}: {
  searchMethod(
    searchParams:
      | operations["readProductListing post /product-listing/{categoryId}"]["body"]
      | operations["searchPage post /search"]["body"],
  ): Promise<Schemas["ProductListingResult"]>;
  searchDefaults: operations["searchPage post /search"]["body"];
  listingKey: string;
}): UseListingReturn 

source code

expand UseListingReturn
ts
export type UseListingReturn = {
  /**
   * Listing that is currently set
   * {@link ListingResult} object
   */
  getInitialListing: ComputedRef<Schemas["ProductListingResult"] | null>;
  /**
   * Sets the initial listing - available synchronously
   * @param {@link initialListing} - initial listing to set
   * @returns
   */
  setInitialListing(
    initialListing: Schemas["ProductListingResult"],
  ): Promise<void>;
  /**
   * @deprecated - use `search` instead
   * Searches for the listing based on the criteria
   * @param criteria {@link Schemas['Criteria']}
   * @returns
   */
  initSearch(
    criteria: operations["searchPage post /search"]["body"],
  ): Promise<Schemas["ProductListingResult"]>;
  /**
   * Searches for the listing based on the criteria
   * @param criteria
   * @returns
   */
  search(
    criteria:
      | operations["readProductListing post /product-listing/{categoryId}"]["body"]
      | operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Loads more (next page) elements to the listing
   */
  loadMore(
    criteria?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Listing that is currently set
   */
  getCurrentListing: ComputedRef<Schemas["ProductListingResult"] | null>;
  /**
   * Listing elements ({@link Product}) that are currently set
   */
  getElements: ComputedRef<Schemas["ProductListingResult"]["elements"]>;
  /**
   * Available sorting orders
   */
  getSortingOrders: ComputedRef<
    Schemas["ProductSorting"][] | { key: string; label: string }[] | undefined
  >;
  /**
   * Current sorting order
   */
  getCurrentSortingOrder: ComputedRef<string | undefined>;
  /**
   * Changes the current sorting order
   * @param order - i.e. "name-asc"
   * @returns
   */
  changeCurrentSortingOrder(
    order: string,
    query?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Current page number
   */
  getCurrentPage: ComputedRef<number>;
  /**
   * Changes the current page number
   * @param pageNumber - page number to change to
   * @returns
   */
  changeCurrentPage(
    page: number,
    query?: operations["searchPage post /search"]["body"],
  ): Promise<void>;
  /**
   * Total number of elements found for the current search criteria
   */
  getTotal: ComputedRef<number>;
  /**
   * Total number of pages found for the current search criteria
   */
  getTotalPagesCount: ComputedRef<number>;
  /**
   * Number of elements per page
   */
  getLimit: ComputedRef<number>;
  /**
   * Initial filters
   */
  getInitialFilters: ComputedRef<ReturnType<typeof getListingFilters>>;
  /**
   * All available filters
   */
  getAvailableFilters: ComputedRef<ReturnType<typeof getListingFilters>>;
  /**
   * Filters that are currently set
   */
  getCurrentFilters: ComputedRef<
    Schemas["ProductListingResult"]["currentFilters"]
  >;
  /**
   * Sets the filters to be applied for the listing
   * @param filters
   * @returns
   */
  setCurrentFilters(filters: { code: string; value: unknown }): Promise<void>;
  /**
   * Indicates if the listing is being fetched
   */
  loading: ComputedRef<boolean>;
  /**
   * Indicates if the listing is being fetched via `loadMore` method
   */
  loadingMore: ComputedRef<boolean>;
  /**
   * Resets the filters - clears the current filters
   */
  resetFilters(): Promise<void>;
  /**
   * Change selected filters to the query object
   */
  filtersToQuery(
    filters: Schemas["ProductListingCriteria"],
  ): Record<string, unknown>;
};

useCmsElementConfig

Composable to get cms element config

ts
export function useCmsElementConfig<
  T extends Schemas["CmsSlot"] & {
    config: T["config"] extends {
      [key in infer X extends keyof T["config"]]: ElementConfig<unknown>;
    }
      ? { [key in X]: ElementConfig<T["config"][key]["value"]> }
      : never;
  },
>(element: T) 

source code

useCmsElementImage

Composable to get cms element image

ts
export function useCmsElementImage(
  element: CmsElementImage | CmsElementManufacturerLogo,
): UseCmsElementImage 

source code

expand UseCmsElementImage
ts
export type UseCmsElementImage = {
  containerStyle: ComputedRef<CSSProperties>;
  anchorAttrs: ComputedRef<AnchorHTMLAttributes>;
  imageAttrs: ComputedRef<ImgHTMLAttributes>;
  imageContainerAttrs: ComputedRef<ImageContainerAttrs>;
  imageLink: ComputedRef<{ newTab: boolean; url: string }>;
  displayMode: ComputedRef<DisplayMode>;
  isVideoElement: ComputedRef<boolean>;
  mimeType: ComputedRef<string | undefined>;
};
shopware/frontends - composables-next has loaded