Developers
Start building
Themes/Theme SDK/Modules/store/Hooks

Hooks

The hooks of @poltura/theme-sdk/store.

On this page
import { … } from '@poltura/theme-sdk/store';

useStore

The store the page belongs to: its name, web address, contact and the company behind it.

useStore(): Store

Returns: The store's identity.

Example

import { useStore } from '@poltura/theme-sdk/store';

export function ContactLine() {
  const { name, contact } = useStore();
  return <p>{contact.email === null ? name : `${name} / ${contact.email}`}</p>;
}

useMarket

Where the visitor buys: their country, the store's countries, the currency and tax display.

useMarket(): Market

Returns: The visitor's market.

Example

import { useMarket } from '@poltura/theme-sdk/store';

export function TaxNote() {
  return <small>{useMarket().taxIncluded ? 'incl. VAT' : 'excl. VAT'}</small>;
}

useBrand

The store's brand: logos, colours and slogan in the page language.

useBrand(): StoreBrand

The theme's own logo setting wins where it is set; this is the brand the merchant gave the store.

Returns: The brand.

Example

import { useBrand } from '@poltura/theme-sdk/store';

export function Slogan() {
  const { slogan } = useBrand();
  return slogan === null ? null : <p>{slogan}</p>;
}

Every social profile to link to, in the brand's own order.

useSocialLinks(): readonly SocialLink[]

Returns: The profiles with a URL.

Example

import { useSocialLinks } from '@poltura/theme-sdk/store';

export function Social() {
  return (
    <ul>
      {useSocialLinks().map((link) => (
        <li key={link.network}>
          <a href={link.url}>{link.label}</a>
        </li>
      ))}
    </ul>
  );
}

useFeatures

Which optional storefront features the store has switched on.

useFeatures(): StoreFeatures

Returns: The feature switches.

Example

import { useFeatures } from '@poltura/theme-sdk/store';

export function AccountLink() {
  return useFeatures().customerAccounts ? <a href='/account'>Account</a> : null;
}
Last updated