ShopwareEA

Appearance

Return to top
On this page

useAddress ​

Definition ​

Composable to manage customer addresses

Basic usage ​

ts
const { 
 customerAddresses,
 loadCustomerAddresses,
 createCustomerAddress,
 updateCustomerAddress,
 deleteCustomerAddress,
 setDefaultCustomerBillingAddress,
 setDefaultCustomerShippingAddress,
 errorMessageBuilder 
} = useAddress();

Signature ​

ts
export function useAddress(): UseAddressReturn

Return type ​

See UseAddressReturn
ts
export type UseAddressReturn = {
  /**
   * List of customer addresses
   */
  customerAddresses: ComputedRef<CustomerAddress[]>;
  /**
   * Loads the addresses that are available under `customerAddresses` property
   */
  loadCustomerAddresses(): Promise<void>;
  /**
   * Allows to create new address for a current customer
   */
  createCustomerAddress(
    customerAddress: CustomerAddress
  ): Promise<CustomerAddress>;
  /**
   * Allows to update existing address for a current customer
   */
  updateCustomerAddress(
    customerAddress: CustomerAddress
  ): Promise<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: ShopwareError): string | null;
};

Properties ​

NameTypeDescription
customerAddresses
ComputedRef<Array<CustomerAddress>>
List of customer addresses

Methods ​

NameTypeDescription
loadCustomerAddresses
Promise<void>
Loads the addresses that are available under `customerAddresses` property
createCustomerAddress
Promise<CustomerAddress>
Allows to create new address for a current customer
updateCustomerAddress
Promise<CustomerAddress>
Allows to update existing address for a current customer
deleteCustomerAddress
Promise<void>
Allows to delete existing address for a current customer
setDefaultCustomerBillingAddress
Promise<string>
Sets the address for given ID as default billing address
setDefaultCustomerShippingAddress
Promise<string>
Sets the address for given ID as default shipping address
errorMessageBuilder
string |
Returns formatted error message

Usage ​

Load and iterate over the customer addresses: ​

vue
<script setup lang="ts">
const { customerAddresses, loadCustomerAddresses } = useAddress();

loadCustomerAddresses();
</script>
<template>
    <div v-for="address in customerAddresses" :id="address.id">
        {{ address.firstName }} {{ address.lastName }}
        <!-- use other properties available in CustomerAddress type -->
    </div>
</template>

Create a customer address: ​

vue
<script setup lang="ts">
const { createCustomerAddress, updateCustomerAddress } = useAddress();

const newAddress: CustomerAddress = await createCustomerAddress({
  city: "Berlin",
  countryId: "2fbb5fe2e29a4d70aa5854ce7ce3e20b",
  salutationId: "a7c40f6321c547759c4d0c6031e6c609",
  firstName: "John",
  lastName: "Doe",
  street: "Karl-Marx-Allee 1",
  zipcode: "10178",
});

// refresh store with customer addresses (optionally if you want to see updated list of addresses)
updateCustomerAddress();
</script>

Update a customer address ​

ts
const { updateCustomerAddress } = useAddress();
const updatedAddress = await updateCustomerAddress(
    Object.assign(
        {},
        address, // old address object we want to change
        { firstName: "Johnny" } // change the firstName value
    )
);

// refresh store with customer addresses (optionally if you want to see updated list of addresses)
updateCustomerAddress();

Delete an address ​

vue
<script setup lang="ts">
const { customerAddresses, deleteCustomerAddress } = useAddress();

const address: CustomerAddress = {
    id: "2fbb5fe2e29a4d70aa5854ce7ce3e20b"
    // other properties omitted
}

await deleteCustomerAddress(address.id);

// then
customerAddresses.value?.find((customerAddress) => customerAddress.id === address.id)
// will return undefined
</script>

In case of no error thrown on successfully deleted address, then the list of available addresses will be refreshed automatically and the array of addresses will not contain the previously deleted one.

Set an address as default billing address ​

Pass as an argument an ID of address you want to set as default one

ts
await setDefaultCustomerBillingAddress("2fbb5fe2e29a4d70aa5854ce7ce3e20b");

Set an address as default shipping address ​

Pass as an argument an ID of address you want to set as default one

ts
await setDefaultCustomerShippingAddress("2fbb5fe2e29a4d70aa5854ce7ce3e20b");

The action succeeds if no exception is thrown.