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

Hooks

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

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

useArticle

The blog post of the post page the component sits on.

useArticle(): Article | null

Returns: The post with its body, headings and related posts, or null outside a post page.

Example

import { Markdown, useArticle } from '@poltura/theme-sdk/content';

export function PostBody() {
  const article = useArticle();
  if (article === null) return null;
  return (
    <article>
      <h1>{article.title}</h1>
      <Markdown source={article.markdown} />
    </article>
  );
}

useLegalPage

The legal document of the legal page the component sits on.

useLegalPage(): LegalPage | null

Returns: The document with its versions and feed sections, or null outside a legal document page.

Example

import { Markdown, useLegalPage } from '@poltura/theme-sdk/content';

export function LegalBody() {
  const legal = useLegalPage();
  if (legal === null) return null;
  return (
    <section>
      <h1>{legal.title}</h1>
      {legal.effectiveLabel ? <p>{legal.effectiveLabel}</p> : null}
      <Markdown source={legal.markdown} />
    </section>
  );
}

useFaq

The FAQ groups of the FAQ page the component sits on.

useFaq(): readonly FaqGroup[]

Returns: The groups in the merchant's order, or an empty list outside the FAQ page.

Example

import { FaqAccordion, useFaq } from '@poltura/theme-sdk/content';

export function FaqList() {
  return (
    <>
      {useFaq().map((group) => (
        <section key={group.id}>
          <h2>{group.title}</h2>
          <FaqAccordion items={group.items} />
        </section>
      ))}
    </>
  );
}

useContactPage

The contact page's heading, wording and the store's contact details, company, bank account and social profiles.

useContactPage(): ContactPageView | null

Returns: The contact page view, or null outside the contact page.

Example

import { CompanyInfo, useContactPage } from '@poltura/theme-sdk/content';

export function ContactFacts() {
  const contact = useContactPage();
  if (contact === null) return null;
  return (
    <section>
      <h1>{contact.title}</h1>
      {contact.contact.email ? <a href={`mailto:${contact.contact.email}`}>{contact.contact.email}</a> : null}
      <CompanyInfo company={contact.company} bankAccount={contact.bankAccount} />
    </section>
  );
}

useBlog

The blog posts of the blog page the component sits on: the landing page or a category's.

useBlog(): ArticlePage | null

Returns: The page of posts with its categories and paging, or null outside the blog pages.

Example

import { ArticleCard, useBlog } from '@poltura/theme-sdk/content';

export function PostGrid() {
  const blog = useBlog();
  if (blog === null) return null;
  return (
    <div className="grid gap-6 md:grid-cols-3">
      {blog.articles.map((article) => (
        <ArticleCard key={article.id} article={article} readLabel="Read article" />
      ))}
      {blog.page < blog.pageCount ? <a href={blog.pageHref(blog.page + 1)}>Older posts</a> : null}
    </div>
  );
}

useGuides

The guides of the help centre page the component sits on: every category, or one category's guides.

useGuides(): GuidesView | null

Returns: The categories and guides, or null outside the help centre pages.

Example

import { useGuides } from '@poltura/theme-sdk/content';

export function GuideList() {
  const guides = useGuides();
  if (guides === null) return null;
  return (
    <ul>
      {guides.guides.map((guide) => (
        <li key={guide.id}>{guide.href ? <a href={guide.href}>{guide.title}</a> : guide.title}</li>
      ))}
    </ul>
  );
}

useGuide

The guide of the guide page the component sits on.

useGuide(): GuidePage | null

Returns: The guide with its category, headings and related guides, or null outside a guide page.

Example

import { FileDownloads, Markdown, useGuide } from '@poltura/theme-sdk/content';

export function GuideBody() {
  const guide = useGuide();
  if (guide === null) return null;
  return (
    <article>
      <h1>{guide.title}</h1>
      <Markdown source={guide.body} />
      <FileDownloads attachments={guide.attachments} title="Downloads" />
    </article>
  );
}

useBanners

The merchant's enabled banners in priority order, in the page language.

useBanners(): readonly Banner[]

The host still shows popups and bars by their rules; use this to echo a banner in the theme's own markup.

Returns: The banners, or an empty list.

Example

import { useBanners } from '@poltura/theme-sdk/content';

export function OfferLine() {
  const offer = useBanners().find((banner) => banner.template === 'discount');
  return offer ? <p>{offer.heading}</p> : null;
}

useCountdown

Counts down to a moment, re-rendering every second until it passes.

useCountdown(until: string): CountdownTime

Parameters

  • until: string: The moment, as an ISO 8601 string or a date and time setting in the store's time zone.

Returns: The time left.

Example

import { Countdown, useCountdown } from '@poltura/theme-sdk/content';

export function SaleEnds({ until }: { until: string }) {
  const left = useCountdown(until);
  if (!left.valid || left.expired) return null;
  return <Countdown hours={left.days * 24 + left.hours} minutes={left.minutes} seconds={left.seconds} />;
}
Last updated