### Install Project Dependencies
Source: https://pwa-docs.plentyone.com/guide/introduction/quickstart
Installs all required packages for the project. Run this command in the project's root directory.
```bash
npm install
```
--------------------------------
### Install Shop Core Module with npm
Source: https://pwa-docs.plentyone.com/guide/modules/shop-core/index
Install the Shop Core module using npm. This is typically done in the base app or a custom module.
```bash
npm install @plentymarkets/shop-core
```
--------------------------------
### Install FNM and Node.js
Source: https://pwa-docs.plentyone.com/guide/introduction/quickstart
Installs the FNM version manager and the latest Node.js version. Ensure curl is installed before running.
```bash
curl -o- https://fnm.vercel.app/install | bash
```
```bash
fnm install
```
--------------------------------
### Verify Node.js and npm Installation
Source: https://pwa-docs.plentyone.com/guide/introduction/quickstart
Checks if Node.js and npm have been installed correctly by displaying their versions.
```bash
node -v
```
```bash
npm -v
```
--------------------------------
### Get Addresses Data Example (Recommended)
Source: https://pwa-docs.plentyone.com/reference/api/functions/getAddresses
This snippet shows the recommended way to fetch addresses using getAddressesData, specifying the desired address types.
```typescript
// Use this instead
const { data } = await useSdk().plentysystems.getAddressesData({types: [AddressType.Billing]});
```
--------------------------------
### Install Mollie Shop Module
Source: https://pwa-docs.plentyone.com/guide/modules/plentyone/mollie
Use this command to install the Mollie shop module if it's not pre-installed or missing from your package.json. Ensure you are using a compatible version.
```bash
npm install @plentymarkets/shop-module-mollie
```
--------------------------------
### Example of Integrating an SVG Icon
Source: https://pwa-docs.plentyone.com/guide/themes/custom-icon
This example shows a practical implementation of the SfIconBase component for integrating an SVG icon. Customize the `viewBox`, `size`, and `class` to match your design requirements.
```html
```
--------------------------------
### Get Category Template Example
Source: https://pwa-docs.plentyone.com/reference/api/functions/getCategoryTemplate
Demonstrates how to use the getCategoryTemplate function to retrieve a category template. Ensure you have the SDK initialized and the necessary context.
```typescript
const { data } = await getCategoryTemplate(() => useSdk().plentysystems.getCategoryTemplate(1));
```
--------------------------------
### Install Node.js Dependencies (Linux/macOS)
Source: https://pwa-docs.plentyone.com/guide/introduction/quickstart
Use npm or yarn to install project dependencies on Linux or macOS systems. Ensure you have Node.js LTS installed.
```bash
npm install
# or
yarn install
```
--------------------------------
### Get System Settings - TypeScript
Source: https://pwa-docs.plentyone.com/reference/api/functions/getSettings
Use this snippet to fetch all system settings. Ensure the SDK is initialized with the correct context.
```typescript
const { data } = await useSdk().plentysystems.getSettings();
```
--------------------------------
### Using useAddress for Billing Addresses
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useAddress
This example demonstrates how to use the `useAddress` composable with the `AddressType.Billing`. The functions `getAddresses`, `saveAddress`, `deleteAddress`, and `setDefault` are shown in action. All examples are equivalent for addresses of type `Shipping`.
```typescript
const {
data,
loading,
defaultAddressId,
savedAddress,
getAddresses,
saveAddress,
deleteAddress,
setDefault
} = useAddress(AddressType.Billing);
let address: Address;
let id: Number;
getAddresses();
saveAddress(address);
deleteAddress(id);
setDefault(id);
```
--------------------------------
### Install Google Analytics Module
Source: https://pwa-docs.plentyone.com/guide/modules/plentyone/google-analytics
Install the shop-gtag-module using npm if it's not already included in your project. This command adds the necessary package to your project's dependencies.
```bash
npm install @plentymarkets/shop-gtag-module
```
--------------------------------
### Guest Login Example
Source: https://pwa-docs.plentyone.com/reference/api/functions/doLoginAsGuest
Logs in a user as a guest by providing their email address. This function should be used when a customer wishes to log in as a guest.
```typescript
await useSdk().plentysystems.doLoginAsGuest({email: 'guest.plenty@example.com'});
```
--------------------------------
### Get and Set Initial Data with useInitialSetup
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useInitialSetup
Use this composable to retrieve initial customer and cart data. The `setInitialData` function is extracted for use.
```typescript
const { setInitialData } = useInitialSetup();
```
--------------------------------
### Get Offer Data
Source: https://pwa-docs.plentyone.com/reference/api/functions/getOffer
Use this snippet to fetch offer details by providing offer ID, access key, and postcode. Ensure you have the SDK initialized.
```typescript
const { data } = await useSdk().plentysystems.getOffer({
offerId: '138',
accessKey: '4L95RS31F',
postcode: '34131'
});
```
--------------------------------
### Get Product Reviews
Source: https://pwa-docs.plentyone.com/reference/api/functions/getReview
Use this method to fetch reviews for a given product ID. Ensure the SDK is initialized with the correct context.
```typescript
const { data } = await useSdk().plentysystems.getReview({ itemId: 1100 });
```
--------------------------------
### getInit()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getInit
Fetches the current session, category tree, robots, settings, and custom assets. This function makes a call to the /rest/storefront/init endpoint.
```APIDOC
## Function: getInit()
### Description
Retrieves the current user session, category tree, robot directives, system settings, and custom assets.
### Method Signature
`getInit(context: PlentysystemsIntegrationContext, params?: InitExcludeData): Promise>`
### Parameters
#### context
- **context** (`PlentysystemsIntegrationContext`) - The integration context required for the API call.
#### params (Optional)
- **params** (`InitExcludeData`) - An optional object to specify data to exclude from the response.
### Returns
- `Promise>` - A promise that resolves to an object containing the initialization data.
### Remarks
This function internally calls the `/rest/storefront/init` endpoint to gather the necessary initialization data.
### Example
```ts
const { data, error } = await useAsyncData(() => sdk.plentysystems.getInit());
```
```
--------------------------------
### getSettings()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getSettings
Fetches the system settings. This method is part of the plentysystems SDK and requires a context object.
```APIDOC
## Function: getSettings()
> **getSettings**(`context`): `Promise`<`Data`<`Setting`[]>>
Defined in: api/getSettings/index.ts:18
Method getSettings - Used to get the system settings.
### Parameters
#### context
`PlentysystemsIntegrationContext`
### Returns
`Promise`<`Data`<`Setting`[]>>
Setting[]
### Remarks
* Method to get the system settings.
## Example
ts
```ts
const { data } = await useSdk().plentysystems.getSettings();
```
```
--------------------------------
### Get Addresses Example (Deprecated)
Source: https://pwa-docs.plentyone.com/reference/api/functions/getAddresses
This snippet demonstrates how to use the deprecated getAddresses function to fetch billing addresses. It is recommended to use getAddressesData instead.
```typescript
// Deprecated - don't use
const { data } = await useSdk().plentysystems.getAddresses({typeId: AddressType.Billing});
```
--------------------------------
### Get Initial Storefront Data with getInit()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getInit
Use this snippet to fetch the initial data required for the storefront. It retrieves session, category tree, robots, settings, and custom assets. Ensure you have the SDK initialized.
```typescript
const { data, error } = await useAsyncData(() => sdk.plentysystems.getInit());
```
--------------------------------
### Get Preferred Delivery Location Shipping Profiles
Source: https://pwa-docs.plentyone.com/reference/api/functions/getPreferredDeliveryLocationShippingProfiles
Fetches DHL location data and available shipping profiles. This example uses `useAsyncData` for asynchronous data fetching and `useSdk` to access the PlentyONE Shop API.
```typescript
const { data } = await useAsyncData(() => useSdk().plentysystems.getPreferredDeliveryLocationShippingProfiles());
```
--------------------------------
### Configure Local Environment Variables
Source: https://pwa-docs.plentyone.com/guide/introduction/quickstart
Create a .env file in the `apps/web` directory and add your shop's API endpoint, security token, configuration ID, fetch remote config setting, and default language.
```dotenv
# apps/web/.env
API_ENDPOINT='https://my-shop.com'
API_SECURITY_TOKEN='ABC123'
CONFIG_ID='1'
FETCH_REMOTE_CONFIG='0'
DEFAULTLANGUAGE='de'
```
--------------------------------
### Initialize useProductReviews
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useProductReviews
Instantiate the composable to manage product reviews. Pass the product ID and optionally a page number to fetch reviews.
```typescript
const { data, loading, fetchProductReviews } = useProductReviews(1, 1);
```
--------------------------------
### setCategorySettings Example
Source: https://pwa-docs.plentyone.com/reference/api/functions/setCategorySettings
Demonstrates how to use the setCategorySettings function to edit category settings. Ensure you have the necessary SDK context and parameters defined.
```typescript
const { data } = await setCategorySettings(() => useSdk().plentysystems.setCategorySettings(params));
```
--------------------------------
### UseInitialSetup Interface
Source: https://pwa-docs.plentyone.com/reference/composables/interfaces/UseInitialSetup
This snippet details the properties available within the UseInitialSetup interface, including methods for data fetching and initialization.
```APIDOC
## Interface: UseInitialSetup
### Description
Provides methods for fetching and setting initial application data and settings.
### Properties
#### fetchCacheableInitData
- **Type**: `SetInitialData`
- **Description**: Fetches cacheable initial data.
#### fetchSettings
- **Type**: `() => Promise`
- **Description**: Fetches application settings.
- **Returns**: A promise that resolves when settings are fetched.
#### setInitialData
- **Type**: `SetInitialData`
- **Description**: Sets the initial data for the application.
#### setInitialDataSSR
- **Type**: `SetInitialData`
- **Description**: Sets the initial data for Server-Side Rendering (SSR).
```
--------------------------------
### Get Available Locales
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useLocalization
Function for getting all available locales based on the activeLanguages config.
```typescript
getAvailableLocales()
```
--------------------------------
### Create a Product Review with doReview()
Source: https://pwa-docs.plentyone.com/reference/api/functions/doReview
Use this snippet to create a new product review. Ensure you have the SDK initialized and provide all required parameters like ratingValue, authorName, title, message, type, and targetId.
```typescript
const { data } = await useSdk().plentysystems.doReview({
ratingValue: 3,
authorName: 'John Doe',
title: 'Great product',
message: 'That\'s an awesome product',
type: 'review',
targetId: 1890,
honeypot: '',
titleMissing: false,
ratingMissing: false,
});
```
--------------------------------
### doApplyConfiguration
Source: https://pwa-docs.plentyone.com/reference/api/functions/doApplyConfiguration
Applies the current configuration. If requireBuild is true, the storefront will be rebuilt.
```APIDOC
## Function: doApplyConfiguration()
> **doApplyConfiguration**(`context`, `requireBuild?`): `Promise`<`Data`<`string`>>
Method doApplyConfiguration - Apply current configuration.
### Parameters
#### context
`PlentysystemsIntegrationContext`
#### requireBuild?
`boolean` = `true`
If true, the configuration is applied and the storefront is rebuilt.
### Returns
`Promise`<`Data`<`string`>>
### Remarks
* Calls /rest/storefront/deploy
* This method is used to apply the current configuration.
## Example
ts
```ts
const { data } = await useSdk().plentysystems.doApplyConfiguration(true);
```
```
--------------------------------
### Get All Translations - TypeScript
Source: https://pwa-docs.plentyone.com/reference/api/functions/getAllTranslations
Use this method to get a list of all available translations. It requires a configId in the context.
```typescript
const { data } = await useSdk().plentysystems.getAllTranslations({configId: 1});
```
--------------------------------
### Initialize useFetchSession
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useFetchSession
Destructure the loading state and the fetchSession function from the composable. This is typically done at the beginning of a component's setup.
```typescript
const { loading, fetchSession } = useFetchSession();
```
--------------------------------
### usePackstationFinder()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/usePackstationFinder
Initializes the packstation finder functionality. It returns an object with reactive data, computed properties, and methods to interact with the packstation search.
```APIDOC
## Function: usePackstationFinder()
> **usePackstationFinder**(): `object`
### Returns
`object`
- **data** (`Ref`<{ `packstations`: `PackstationList`; `preferredProfilesData`: `PreferredDeliveryLocationShippingProfilesData`; `searchParams`: `PackstationsSearchParams`; }>): `Ref` with packstation data, preferred profiles, and search parameters.
- **deliveryLocationAvailable** (`ComputedRef`<`boolean`>): Computed property indicating if a delivery location is available.
- **getShippingProfilesData** ()=> `Promise`<`void`>: Asynchronously fetches shipping profile data.
- **hasPreferredDeliveryLocation** (`ComputedRef`<`boolean`>): Computed property indicating if a preferred delivery location is set.
- **loading** (`Ref`<`boolean`>): Reactive boolean indicating the loading state.
- **resetComponent** ()=gt; `void`: Resets the component's state.
- **submitForm** ()=gt; `Promise`<`void`>: Submits the current form data.
- **validationSchema** (`TypedSchema`<{ `searchParams?`: { `city?`: `string`; `street?`: `string`; `zipcode?`: `string`; }; }, { `searchParams`: { `city?`: `string`; `street?`: `string`; `zipcode?`: `string`; }; }>): The validation schema for the search parameters.
```
--------------------------------
### getPayPalSettings()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getPayPalSettings
Used to get the PayPal settings including the fraud id. This method should be used to get the PayPal settings for the current store. It calls the /rest/paypal/settings endpoint.
```APIDOC
## Function: getPayPalSettings()
### Description
Retrieves the PayPal settings, including the fraud ID, for the current store.
### Method
GET
### Endpoint
/rest/paypal/settings
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Response
#### Success Response (200)
- **data** (PayPalSettings) - An object containing PayPal settings.
### Remarks
This method is intended for use within the PlentyONE ecosystem to fetch PayPal configuration details.
### Example
```ts
const { data } = await useSdk().plentysystems.getPayPalSettings();
```
```
--------------------------------
### getOrderDocument
Source: https://pwa-docs.plentyone.com/reference/api/functions/getOrderDocument
Used to get the document file. Calls /rest/storefront/order/document/preview/${docReferenceId}/?orderId=${orderId}&accessKey=${accessKey}. Method should be used to get the document file in array buffer format.
```APIDOC
## Function: getOrderDocument()
> **getOrderDocument**(`context`, `params`): `Promise`<`Data`<`number`[]>>
Defined in: api/getOrderDocument/index.ts:26
Method getOrderDocument - Used to get the document file.
### Parameters
#### context
`PlentysystemsIntegrationContext`
#### params
`OrderDocumentParams`
- document: the order document.
- accessKey: order access key.
### Returns
`Promise`<`Data`<`number`[]>>
The document file in an array buffer format.
### Remarks
* Calls /rest/storefront/order/document/preview/${docReferenceId}/?orderId=${orderId}&accessKey=${accessKey}
* Method should be used to get the document file in array buffer format.
### Example
```ts
const { data } = await useSdk().plentysystems.getOrderDocument({
document: {},
accessKey: '',
});
```
```
--------------------------------
### initialize
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useApplePay
Initializes the Apple Pay service.
```APIDOC
## Function: initialize()
> **initialize**(): `Promise`
Initializes the Apple Pay integration. This should be called before attempting to process payments.
#### Returns
`Promise` - A promise that resolves to true if initialization was successful, false otherwise.
```
--------------------------------
### Get Editor State Properties
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useEditorState
Use this composable to access editor state properties such as edit mode and fake data flags. Access the `.value` property to get the boolean state.
```typescript
const { isEditMode, shouldUseFakeData } = useEditorState();
if (shouldUseFakeData.value) {
// Use fake data for editor
}
```
--------------------------------
### Login as Guest with useCustomer
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useCustomer
Initiate a guest checkout by providing an email address to the loginAsGuest function.
```typescript
loginAsGuest('user@example.com');
```
--------------------------------
### Import and Use useCustomerClass
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useCustomerClass
Demonstrates how to import and use the useCustomerClass composable to access customer class data, loading state, and fetch functionality.
```typescript
const { data, loading, fetchCustomerClasses } = useCustomerClass();
```
--------------------------------
### useActiveShippingCountries
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useActiveShippingCountries
Composable for getting an array of `ActiveShippingCountry`.
```APIDOC
## Variable: useActiveShippingCountries
> `const` **useActiveShippingCountries** : `UseActiveShippingCountriesReturn`
### Description
Composable for getting an array of `ActiveShippingCountry`.
### Example
ts
```ts
const {
data,
loading,
getActiveShippingCountries
} = useActiveShippingCountries();
getActiveShippingCountries();
```
```
--------------------------------
### Initialize useProductRecommended Composable
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useProductRecommended
Use this composable to fetch recommended products for a given product slug. It provides reactive data and a fetch function.
```typescript
const { data, loading, fetchProductRecommended } = useProductRecommended('1');
```
--------------------------------
### getItemCount
Source: https://pwa-docs.plentyone.com/reference/api/variables/breadcrumbGetters
Gets the number of items in a breadcrumb.
```APIDOC
## getItemCount
### Description
Gets the number of items in a breadcrumb.
### Signature
`getItemCount(breadcrumb: CategoryBreadcrumb): number`
### Parameters
#### breadcrumb
- `breadcrumb` (CategoryBreadcrumb) - The breadcrumb object.
```
--------------------------------
### getBillingAddress
Source: https://pwa-docs.plentyone.com/reference/api/variables/orderGetters
Gets the billing address associated with an order.
```APIDOC
## getBillingAddress
### Description
Returns the billing address of an order.
### Parameters
#### order
- `order` (Order) - The order object.
### Returns
- `AddressData | null` - The AddressData billing address, or `null` if not set.
```
--------------------------------
### useCustomer()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useCustomer
Composable managing Customer data. It returns an object with various properties and methods for interacting with customer information.
```APIDOC
## Function: useCustomer()
> **useCustomer**(): `object`
Defined in: composables/useCustomer/useCustomer.ts:24
## Returns
### backToContactInformation
> **backToContactInformation** : () => `boolean`
Function to scroll back to contact information section in checkout and highlight it
#### Returns
`boolean`
always false to prevent default form submission
### changePassword
> **changePassword** : (`params`) => `Promise`<`boolean`>
Function for changing the user password
#### Parameters
##### params
`UserChangePasswordParams`
#### Returns
`Promise`<`boolean`>
#### Example
ts```
changePassword({
oldPassword: 'oldPassword',
password: 'newPassword',
password2: 'newPassword',
});
```
### emailValidationSchema
> **emailValidationSchema** : `TypedSchema`<{ `customerEmail?`: `string`; }, { `customerEmail`: `string`; }>
### ~~getSession~~
> **getSession** : () => `Promise`<`void`>
Gets the current user/cart session data.
#### Returns
`Promise`<`void`>
#### Deprecated
This method will be removed in future versions. Use `useFetchSession().fetchSession()` instead.
#### Example
ts```
getSession();
```
### isAuthorized
> **isAuthorized** : `Ref`<`boolean`, `boolean`> = `false`
### isGuest
> **isGuest** : `Ref`<`boolean`, `boolean`> = `false`
### loading
> **loading** : `Ref`<`boolean`, `boolean`> = `false`
### login
> **login** : (`email`, `password`) => `Promise`<`boolean`>
Function for user login.
#### Parameters
##### email
`string`
##### password
`string`
#### Returns
`Promise`<`boolean`>
#### Example
ts```
login('user@example.com', 'password');
```
### loginAsGuest
> **loginAsGuest** : (`email`) => `Promise`<`void`>
Function for login a user as guest
#### Parameters
##### email
`string`
#### Returns
`Promise`<`void`>
#### Example
ts```
loginAsGuest('user@example.com');
```
### logout
> **logout** : () => `Promise`<`void`>
Function for user logout.
#### Returns
`Promise`<`void`>
#### Example
ts```
logout();
```
### missingGuestCheckoutEmail
> **missingGuestCheckoutEmail** : `ComputedRef`<`boolean`>
### register
> **register** : (`params`) => `Promise`<`UserChangeResponse` | `null`>
Function for registering a user.
#### Parameters
##### params
`RegisterParams`
#### Returns
`Promise`<`UserChangeResponse` | `null`>
#### Example
ts```
register({ email: 'example', password: 'example', 'cf-turnstile-response': '' });
```
### setUser
> **setUser** : (`user`) => `void`
Function for setting user data
#### Parameters
##### user
`User` | `null`
#### Returns
`void`
#### Example
ts```
setUser(user);
```
### user
> **user** : `Ref`<`User` | `null`, `User` | `null`>
### validGuestEmail
> **validGuestEmail** : `Ref`<`boolean`, `boolean`> = `false`
```
--------------------------------
### getCurrency
Source: https://pwa-docs.plentyone.com/reference/api/variables/cartGetters
Gets the currency code used in the cart.
```APIDOC
## getCurrency
### Description
Returns the currency code used in the cart.
### Parameters
#### cart
- **cart** (Cart) - The cart object.
### Returns
- **string** - The ISO 4217 currency code string (e.g. "EUR").
```
--------------------------------
### Clone Private Repository
Source: https://pwa-docs.plentyone.com/guide/themes/project-update-strategies
Clone your new private repository to your local machine to begin setting up the Git mirror.
```bash
git clone
cd
```
--------------------------------
### getCouponCode
Source: https://pwa-docs.plentyone.com/reference/api/variables/cartGetters
Gets the coupon code applied to the cart.
```APIDOC
## getCouponCode
### Description
Returns the coupon code applied to the cart.
### Parameters
#### cart
- **cart** (Cart) - The cart object.
### Returns
- **string** - The coupon code string, or an empty string if not set.
```
--------------------------------
### useCheckout()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useCheckout
Initializes and provides access to checkout-related state and functions. It can optionally accept a cacheKey for state management.
```APIDOC
## Function: useCheckout()
> **useCheckout**(`cacheKey?`): `object`
Defined in: composables/useCheckout/useCheckout.ts:15
### Parameters
#### cacheKey?
`string` = `''`
### Returns
#### anyAddressFormIsOpen
> **anyAddressFormIsOpen** : `ComputedRef`<`boolean`>
#### backToFormEditing
> **backToFormEditing** : () => `boolean`
#### billingSkeleton
> **billingSkeleton** : `Ref`<`boolean`, `boolean`> = `true`
#### cart
> **cart** : `Ref`<`Cart`, `Cart`>
#### cartIsEmpty
> **cartIsEmpty** : `ComputedRef`<`boolean`>
#### cartLoading
> **cartLoading** : `Ref`<`boolean`, `boolean`>
#### clearCartItems
> **clearCartItems** : () => `void`
##### Description
Function for clearing cart items from state.
##### Example
ts
```
clearCartItems()
```
#### combineShippingAndBilling
> **combineShippingAndBilling** : `Ref`<`boolean`, `boolean`> = `true`
#### getCart
> **getCart** : () => `Promise`<`void`>
##### Deprecated
Use useFetchSession.fetchSession() instead
#### hasBillingAddress
> **hasBillingAddress** : `ComputedRef`<`boolean`>
#### hasShippingAddress
> **hasShippingAddress** : `ComputedRef`<`boolean`>
#### init
> **init** : `Ref`<`boolean`, `boolean`> = `false`
#### persistBillingAddress
> **persistBillingAddress** : () => `Promise`<`void`>
#### persistShippingAddress
> **persistShippingAddress** : () => `Promise`<`void`>
#### scrollToBillingAddress
> **scrollToBillingAddress** : () => `void`
#### scrollToShippingAddress
> **scrollToShippingAddress** : () => `void`
#### setBillingSkeleton
> **setBillingSkeleton** : (`loading`) => `void`
##### Parameters
###### loading
`boolean`
#### setShippingSkeleton
> **setShippingSkeleton** : (`loading`) => `void`
##### Parameters
###### loading
`boolean`
#### shippingSkeleton
> **shippingSkeleton** : `Ref`<`boolean`, `boolean`> = `true`
#### showBillingAddressSection
> **showBillingAddressSection** : `Ref`<`boolean`, `boolean`> = `false`
#### validateTerms
> **validateTerms** : () => `boolean`
```
--------------------------------
### getCartItemPrice
Source: https://pwa-docs.plentyone.com/reference/api/variables/cartGetters
Gets the unit price of a cart item.
```APIDOC
## getCartItemPrice
### Description
Returns the unit price of a cart item.
### Parameters
#### item
- **item** (CartItem) - The cart item.
### Returns
- **number** - The item price as a number.
```
--------------------------------
### getName
Source: https://pwa-docs.plentyone.com/reference/api/variables/facetGetters
Gets the display name of a filter group.
```APIDOC
## getName
### Description
Returns the display name of a filter group.
### Method
`getName(filterGroup)`
### Parameters
#### filterGroup
- `filterGroup` (FilterGroup) - Required - The filter group object.
### Returns
- `string` - The filter group name string, or an empty string if not set.
```
--------------------------------
### getItemName
Source: https://pwa-docs.plentyone.com/reference/api/variables/orderGetters
Gets the display name for a given order item.
```APIDOC
## getItemName
### Description
Returns the display name of an order item.
### Parameters
#### item
- `item` (OrderItem) - The order item.
### Returns
- `string` - The order item name string, or an empty string if not set.
```
--------------------------------
### getUrlPath
Source: https://pwa-docs.plentyone.com/reference/api/variables/productGetters
Returns the full URL path of the product.
```APIDOC
## getUrlPath
### Description
Returns the full URL path of the product.
### Method
`getUrlPath(product: Product): string`
### Parameters
#### product
- **product** (Product) - The product object.
### Returns
- **string** - The URL path string, or an empty string if not set.
```
--------------------------------
### getCurrency
Source: https://pwa-docs.plentyone.com/reference/api/variables/orderGetters
Gets the currency code used for the order totals.
```APIDOC
## getCurrency
### Description
Returns the currency code used in the order totals.
### Parameters
#### order
- `order` (Order) - The order object.
### Returns
- `string` - The ISO 4217 currency code string (e.g. "EUR").
```
--------------------------------
### get(addressId)
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useAddressStore
Retrieves a specific address from the store by its ID.
```APIDOC
### get
> **get** : (`addressId`) => `Address` | `undefined`
#### Parameters
##### addressId
`number`
#### Returns
`Address` | `undefined`
```
--------------------------------
### getGroupId
Source: https://pwa-docs.plentyone.com/reference/api/variables/productPropertyGetters
Gets the ID of the parent group for a variation property.
```APIDOC
## getGroupId
### Description
Returns the group ID of a variation property (the ID of its parent group).
### Parameters
#### Path Parameters
- **propertyGroup** (VariationProperty) - Required - The variation property (despite its name, accesses `groupId`).
### Returns
`number` - The group ID.
```
--------------------------------
### getDescription
Source: https://pwa-docs.plentyone.com/reference/api/variables/productGetters
Returns the full HTML description of the product.
```APIDOC
## getDescription
### Description
Returns the full HTML description of the product.
### Parameters
#### Parameters
- **product** (Product) - The product object.
### Returns
`string` - The product description, or an empty string if not set.
```
--------------------------------
### Perform User Login
Source: https://pwa-docs.plentyone.com/reference/api/functions/doLogin
Use this snippet to log in a customer with their email and password. Ensure you have the SDK initialized and the email and password variables defined.
```typescript
await useSdk().plentysystems.doLogin({ email: email, password: password});
```
--------------------------------
### getShippingAmount
Source: https://pwa-docs.plentyone.com/reference/api/variables/shippingProviderGetters
Gets the shipping cost for a specific shipping method.
```APIDOC
## getShippingAmount
### Description
Returns the shipping amount for a shipping method as a string.
### Method
const
### Signature
getShippingAmount(shippingMethod: ShippingMethod) => string
### Parameters
#### shippingMethod
- **shippingMethod** (ShippingMethod) - The shipping method object.
### Returns
- **string** - The shipping amount string, or "0" if not set.
```
--------------------------------
### getShortDescription
Source: https://pwa-docs.plentyone.com/reference/api/variables/productGetters
Returns the short description of the product.
```APIDOC
## getShortDescription
### Description
Returns the short description of the product.
### Parameters
#### product
`Product`
The product object.
### Returns
`string`
The short description, or an empty string if not set.
```
--------------------------------
### getCustomerShippingAddressId
Source: https://pwa-docs.plentyone.com/reference/api/variables/cartGetters
Gets the ID of the shipping address associated with the cart.
```APIDOC
## getCustomerShippingAddressId
### Description
Returns the shipping address ID associated with the cart.
### Parameters
#### cart
- **cart** (Cart) - The cart object.
### Returns
- **number | null** - The customer shipping address ID, or null if not set.
```
--------------------------------
### getBasketItemOrderParamPrice
Source: https://pwa-docs.plentyone.com/reference/api/variables/cartGetters
Gets the price of a basket item order parameter.
```APIDOC
## getBasketItemOrderParamPrice
### Description
Returns the price of a basket item order parameter.
### Parameters
#### item
- **item** (BasketItemOrderParam) - The basket item order parameter.
### Returns
- **number** - The price as a number.
```
--------------------------------
### UseCustomAssetsReturn()
Source: https://pwa-docs.plentyone.com/reference/composables/interfaces/UseCustomAssetsReturn
Initializes and returns an object with methods and state for managing custom assets. It can optionally accept an assetKey to pre-select or filter assets.
```APIDOC
## Function: UseCustomAssetsReturn()
### Description
Initializes and returns an object with methods and state for managing custom assets. It can optionally accept an assetKey to pre-select or filter assets.
### Parameters
#### assetKey? (string) - Optional - The key of the asset to be initially selected or filtered.
### Returns
An object containing various properties and methods for asset management:
- **addOrUpdate**: A function to add or update an asset.
- **assetsIsDirty**: A computed boolean indicating if assets have been modified.
- **currentAsset**: A readonly ref to the currently selected asset.
- **data**: A readonly ref to the asset data.
- **deleteAsset**: A function to delete an asset.
- **getAssetsOfType**: A function to retrieve assets of a specific type.
- **initialData**: A readonly ref to the initial asset data.
- **loading**: A readonly ref indicating the loading state.
- **saveCustomAssets**: A function to save the custom assets.
- **selectAsset**: A function to select a specific asset.
- **setInitialData**: A function to set the initial data for assets.
```
--------------------------------
### getFilterCount
Source: https://pwa-docs.plentyone.com/reference/api/variables/facetGetters
Gets the count of items associated with a specific filter.
```APIDOC
## getFilterCount
### Description
Returns the item count associated with a filter value.
### Method
`getFilterCount(filter)`
### Parameters
#### filter
- `filter` (Filter) - Required - The filter object.
### Returns
- `number` - The item count, or `0` if not set.
```
--------------------------------
### useCheckoutAddress()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useCheckoutAddress
Initializes the checkout address management. It takes an `AddressType` as a parameter and returns an object with reactive state and methods.
```APIDOC
## Function: useCheckoutAddress()
> **useCheckoutAddress**(`type`): `object`
### Parameters
#### type
- `AddressType`
### Returns
- `object`
- **checkoutAddress** (`Ref`): A reactive reference to the current checkout address.
- **clear** (): Clears the current checkout address.
- **countryHasDelivery** (`ComputedRef`): A computed reference indicating if the country has delivery options.
- **hasCheckoutAddress** (`ComputedRef`): A computed reference indicating if a checkout address is set.
- **loading** (`Ref`): A reactive reference indicating the loading state.
- **set** (`address: Address`, `clientOnly?: boolean`): Asynchronously sets the checkout address. Optionally accepts a `clientOnly` boolean flag.
```
--------------------------------
### getReturns()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getReturns
Used to get return orders. Calls /rest/io/customer/order/return.
```APIDOC
## Function: getReturns()
> **getReturns**(`context`, `params`): `Promise`<`Data`<`PaginatedResult`<`Order`>>>
### Description
Method getReturns - Used to get return orders.
### Parameters
#### context
`PlentysystemsIntegrationContext`
#### params
`ReturnsParams`
- page: page number
- items: number of items
### Returns
`Promise`<`Data`<`PaginatedResult`<`Order`>>>
A list of return orders.
### Remarks
* Calls /rest/io/customer/order/return
* Method should be used to get the return orders.
### Example
```ts
const { data } = await useSdk().plentysystems.getReturns({
page: 1,
items: 5
});
```
```
--------------------------------
### create(address)
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useAddressStore
Creates a new address and adds it to the store.
```APIDOC
### create
> **create** : (`address`) => `void`
#### Parameters
##### address
`Address`
#### Returns
`void`
```
--------------------------------
### getAvailableLocales
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useLocalization
Function for getting all available locales based on activeLanguages config.
```APIDOC
## getAvailableLocales
### Description
Function for getting all available locales based on activeLanguages config.
### Returns
- **("de" | "en" | "bg" | "fr" | "it" | "es" | "tr" | "nl" | "pl" | "pt" | "nn" | "ro" | "da" | "se" | "cz" | "ru" | "sk" | "cn" | "vn")[]** - array of available locales
### Example
ts
```
getAvailableLocales()
```
```
--------------------------------
### Prepare Payment
Source: https://pwa-docs.plentyone.com/reference/api/functions/doPreparePayment
Call the doPreparePayment function to prepare the payment. Ensure the SDK is properly initialized.
```typescript
const { data } = await useSdk().plentysystems.doPreparePayment();
```
--------------------------------
### usePriceFormatter()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/usePriceFormatter
Initializes the price formatter composable. It returns an object with methods for formatting prices.
```APIDOC
## Function: usePriceFormatter()
> **usePriceFormatter**(): `object`
Defined in: composables/usePriceFormatter/usePriceFormatter.ts:3
### Returns
`object`
```
--------------------------------
### getReplyAuthor
Source: https://pwa-docs.plentyone.com/reference/api/variables/reviewGetters
Gets the author's name for a specific review reply.
```APIDOC
## getReplyAuthor
### Description
Returns the author name of a review reply.
### Method
`getReplyAuthor(replyItem)`
### Parameters
#### replyItem
- `ReviewItem` - The reply review item.
### Returns
- `string` - The reply author name string.
```
--------------------------------
### Register User with useCustomer
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useCustomer
Register a new user by providing their registration details, including email, password, and a Turnstile response if applicable.
```typescript
register({ email: 'example', password: 'example', 'cf-turnstile-response': '' });
```
--------------------------------
### getBundleItemName
Source: https://pwa-docs.plentyone.com/reference/api/variables/productBundleGetters
Gets the name (`name1`) of the product within a bundle component.
```APIDOC
## getBundleItemName
### Description
Returns the name (`name1`) of the product in a bundle component.
### Parameters
#### productBundleComponent
- **productBundleComponent** (ProductBundleComponent) - The bundle component object.
### Returns
- **string** - The name string, or an empty string if not set.
```
--------------------------------
### getPreferredDeliveryShippingProfiles()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getPreferredDeliveryShippingProfiles
Used to get the available shipping profiles for preferred delivery.
```APIDOC
## Function: getPreferredDeliveryShippingProfiles()
> **getPreferredDeliveryShippingProfiles**(`context`): `Promise`<`Data`<`PreferredDeliveryShippingProfilesData`>>
Defined in: api/getPreferredDeliveryShippingProfiles/index.ts:18
Method getPreferredDeliveryShippingProfiles - Used to get the available shipping profiles for preferred delivery.
### Parameters
#### context
`PlentysystemsIntegrationContext`
### Returns
`Promise`<`Data`<`PreferredDeliveryShippingProfilesData`>>
### Remarks
calls /rest/dhl-shipping/preferred-delivery/parcel-manager/available-shipping-profiles
### Example
ts
```ts
const { data, error } = await useAsyncData(() => useSdk().plentysystems.getPreferredDeliveryShippingProfiles());
```
```
--------------------------------
### getShippingPrice
Source: https://pwa-docs.plentyone.com/reference/api/variables/cartGetters
Gets the total shipping price for the cart. Defaults to 0 if not set.
```APIDOC
## getShippingPrice
### Description
Returns the shipping price of the cart.
### Parameters
#### cart
- `Cart` - The cart object.
### Returns
- `number` - The shipping amount, or `0` if not set.
```
--------------------------------
### Add Upstream Remote
Source: https://pwa-docs.plentyone.com/guide/themes/project-update-strategies
Add the main PlentyONE shop project as a remote repository, conventionally named 'upstream'.
```bash
git remote add upstream https://github.com/plentymarkets/plentyshop-pwa.git
```
--------------------------------
### getPayPalFraudId()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getPayPalFraudId
Used to get the PayPal fraud id. Calls the /rest/paypal/fraud_id endpoint.
```APIDOC
## Function: getPayPalFraudId()
> **getPayPalFraudId**(`context`): `Promise`<`Data`<`PayPalFraudId`>>
### Description
Used to get the PayPal fraud id.
### Parameters
#### context
- `context` (`PlentysystemsIntegrationContext`) - Required - The integration context.
### Returns
- `Promise`<`Data`<`PayPalFraudId`>> - A promise that resolves with the PayPal fraud ID data.
### Remarks
- Calls `/rest/paypal/fraud_id`.
### Example
ts
```ts
const { data } = await useSdk().plentysystems.getPayPalFraudId({ /* context */ });
```
```
--------------------------------
### UseQuickCheckout Interface
Source: https://pwa-docs.plentyone.com/reference/composables/interfaces/UseQuickCheckout
This interface exposes properties to control and observe the state of the quick checkout feature. It includes methods to open and close the checkout, manage a timer, and access reactive state variables like `isOpen`, `loading`, `product`, `quantity`, and `timer`.
```APIDOC
## Interface: UseQuickCheckout
### Description
Provides methods and reactive state for managing the quick checkout functionality.
### Properties
- **closeQuickCheckout** : `CloseQuickCheckout`
- Description: Function to close the quick checkout.
- **endTimer** : `EndTimer`
- Description: Function to end the quick checkout timer.
- **hasTimer** : `Ref`
- Description: Reactive reference indicating if a timer is active.
- **isOpen** : `Readonly>`
- Description: Readonly reactive reference to the open state of the quick checkout.
- **loading** : `Readonly>`
- Description: Readonly reactive reference indicating if the quick checkout is in a loading state.
- **openQuickCheckout** : `OpenQuickCheckout`
- Description: Function to open the quick checkout.
- **product** : `Readonly>`
- Description: Readonly reactive reference to the product information in the quick checkout.
- **quantity** : `Readonly>`
- Description: Readonly reactive reference to the quantity of the product in the quick checkout.
- **startTimer** : `StartTimer`
- Description: Function to start the quick checkout timer.
- **timer** : `Readonly>`
- Description: Readonly reactive reference to the timer's current state.
```
--------------------------------
### getOrder()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getOrder
Method getOrder - Used to get the order data. Calls /rest/storefront/orders/.
```APIDOC
## Function: getOrder()
> **getOrder**(`context`, `params`): `Promise`<`Data`<`Order` | `GetOrderError`>>
### Description
Method getOrder - Used to get the order data.
### Parameters
#### context
`PlentysystemsIntegrationContext`
#### params
`OrderSearchParams`
- orderId: string;
- accessKey: string;
- name: string;
- postcode: string;
### Returns
`Promise`<`Data`<`Order` | `GetOrderError`>>
### Remarks
* Calls /rest/storefront/orders/
* Method should be used to get the order data.
### Example
```ts
const { data } = await useSdk().plentysystems.getOrder({
orderId: '1383',
name: 'Backpack Gaia',
accessKey: '1231234',
postcode: '012799'
});
```
```
--------------------------------
### useQuickCheckout
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useQuickCheckout
Composable for managing the quick checkout. It returns several reactive properties and functions to control the quick checkout flow.
```APIDOC
## Variable: useQuickCheckout
> `const` **useQuickCheckout** : `UseQuickCheckoutReturn`
Defined in: composables/useQuickCheckout/useQuickCheckout.ts:21
### Description
Composable for managing the quick checkout.
### Returns
UseCouponReturn
### Example
ts
```
const {
isOpen,
timer,
loading,
endTimer,
openQuickCheckout,
closeQuickCheckout,
startTimer,
product
} = useQuickCheckout();
```
```
--------------------------------
### getMollieSettings()
Source: https://pwa-docs.plentyone.com/reference/api/functions/getMollieSettings
Used to get the Mollie settings. This method calls the /rest/mollie/get_settings/ endpoint.
```APIDOC
## Function: getMollieSettings()
### Description
Used to get the Mollie settings. This method calls the /rest/mollie/get_settings/ endpoint.
### Method
GET
### Endpoint
/rest/mollie/get_settings/
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Response
#### Success Response (200)
- **data** (MollieSettings) - The Mollie settings object.
### Request Example
ts
```ts
const { data } = await useSdk().plentysystems.getMollieSettings();
```
```
--------------------------------
### useCart()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/useCart
Initializes the useCart composable. It returns an object containing cart state and methods.
```APIDOC
## Function: useCart()
> **useCart**(): `object`
Defined in: composables/useCart/useCart.ts:48
## Returns
UseCartReturn
## Example
ts
```
const {
data, loading, getCart, setCart, clearCartItems, addToCart, setCartItemQuantity, deleteCartItem
} = useCart();
```
```
--------------------------------
### Install and Update Dependencies
Source: https://pwa-docs.plentyone.com/guide/introduction/troubleshooting
Use these commands to ensure your project dependencies are up-to-date with the current Node.js LTS version. This is crucial after Node.js LTS updates to resolve potential compatibility issues.
```bash
# Downloads and switches to latest LTS version, may differ depending on how you manage your Node versions
fnm install
# Updates package-lock.json in line with new Node version
npm install
```
--------------------------------
### Initialize useNewsletter
Source: https://pwa-docs.plentyone.com/reference/composables/variables/useNewsletter
Initialize the useNewsletter composable to get loading state and subscribe function.
```typescript
const { loading, subscribe } = useNewsletter();
```
--------------------------------
### usePackstationMap()
Source: https://pwa-docs.plentyone.com/reference/composables/functions/usePackstationMap
Initializes and returns reactive state and methods for packstation map functionality.
```APIDOC
## Function: usePackstationMap()
### Signature
`usePackstationMap(): object`
### Returns
An object containing reactive references and methods:
- **currentPackstationIndex**: `Ref` - The index of the currently selected packstation.
- **map**: `Ref