Developers
Start building
Themes/Theme SDK/Modules/consent/Parts

Parts

The parts of @poltura/theme-sdk/consent.

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

ConsentBanner

The cookie banner.

ConsentBanner(props: ConsentBannerProps): ReactElement | null

The merchant composes it in the Cookie banner template, with the accept, reject and settings choices. Shows in the editor while selected or its template is open. A theme's src/layout/consent.tsx replaces it and the template.

Props: ConsentBannerProps

Example

import { ConsentBanner } from '@poltura/theme-sdk/consent';

export function QuietBanner() {
  return <ConsentBanner classes={{ title: 'uppercase tracking-wide' }} />;
}

See also: useConsent, ConsentPreferences

ConsentPreferences

The preferences panel.

ConsentPreferences(props: ConsentPreferencesProps): ReactElement | null

The Cookie preferences template composes its intro; every category shows its table and toggle. The toggles edit a working choice that is stored only by the save button; Escape closes the panel without a change.

Props: ConsentPreferencesProps

Example

import { ConsentPreferences } from '@poltura/theme-sdk/consent';

export function Preferences() {
  return <ConsentPreferences classes={{ save: 'font-bold' }} />;
}

See also: useConsent, ConsentToggle

ConsentToggle

One category's switch.

ConsentToggle(props: ConsentToggleProps): ReactElement

It allows or refuses the category; necessary shows as on and cannot change. Inside ConsentPreferences it edits the panel's working choice; anywhere else it stores the change at once.

Props: ConsentToggleProps

Example

import { ConsentToggle, useConsent } from '@poltura/theme-sdk/consent';

export function AnalyticsSwitch() {
  const consent = useConsent();
  return (
    <label className='flex items-center gap-3'>
      {consent.categories.find((category) => category.id === 'analytics')?.label}
      <ConsentToggle category='analytics' />
    </label>
  );
}

Opens the preferences panel.

ConsentSettingsLink(props: ConsentSettingsLinkProps): ReactElement

The footer's cookie settings link is one.

Props: ConsentSettingsLinkProps

Example

import { ConsentSettingsLink } from '@poltura/theme-sdk/consent';

export function FooterCookieLink() {
  return <ConsentSettingsLink className='text-sm underline' />;
}

ConsentCookieTable

The store's cookies.

ConsentCookieTable(props: ConsentCookieTableProps): ReactElement | null

The same rows the preferences panel lists: the store's own cookies and those of its active apps, with their provider, purpose and lifetime in the page language. Each table carries the category's name as its caption; a category without cookies is left out. The merchant places it on a legal page with the Cookie table element.

Props: ConsentCookieTableProps

Example

import { ConsentCookieTable } from '@poltura/theme-sdk/consent';

export function CookiePolicyTables() {
  return <ConsentCookieTable classes={{ caption: 'text-lg font-semibold' }} />;
}

See also: useConsent, ConsentPreferences

Last updated