Functions

import { … } from '@poltura/theme-sdk/elements';

overrideSectionHivatkozás másolása

Swaps the renderer of a platform section type; the platform keeps its schema, inspector and data.

overrideSection<T extends PlatformSectionType>(type: T, component: ElementComponent<PlatformSectionSettings<T>>): SectionOverride<T>

Settings arrive as stored, typed from the published platform schema. The platform draws the section's frame (merchant style, anchor, editor outline) around the renderer, so attrs is empty.

Parameters

• type: T: The platform section type.
• component: ElementComponent<PlatformSectionSettings<T>>: The theme's renderer.

Returns: The override; export it from a file under src/sections.

Example

import { overrideSection } from '@poltura/theme-sdk/elements';

export const hero = overrideSection('hero', ({ settings }) => (
  <section style={{ color: settings.text_color }}>
    <h1>Welcome</h1>
  </section>
));

overrideBlockHivatkozás másolása

Swaps the renderer of a platform block type everywhere it appears; the platform keeps its schema.

overrideBlock<T extends PlatformBlockType>(type: T, component: ElementComponent<PlatformBlockSettings<T>>): BlockOverride<T>

A merchant may drop the block anywhere, so read page data from the nearest product or listing. The platform draws the block's frame around the renderer, so attrs is empty.

Parameters

• type: T: The platform block type.
• component: ElementComponent<PlatformBlockSettings<T>>: The theme's renderer.

Returns: The override; export it from a file under src/blocks.

Example

import { overrideBlock } from '@poltura/theme-sdk/elements';

export const heading = overrideBlock('heading', ({ settings }) => (
  <h2>{settings.text}</h2>
));

fieldSetHivatkozás másolása

A group of settings several elements share, such as a button's label and link; each call spreads its fields into a schema as <prefix>_<key>.

fieldSet<const S extends SettingsSchema>(fields: S): FieldSet<S>

The platform reads settings without running theme code, so a field set is a const of this file or one another theme file exports, built only from field.* calls.

Parameters

• fields: S: The set's settings, built with field.*.

Returns: The set; call it with a prefix and an optional heading.

Example

import { defineSection, field, fieldSet } from '@poltura/theme-sdk/elements';

const button = fieldSet({
  label: field.text({ label: 'Label', default: 'Shop now' }),
  link: field.link({ label: 'Link', default: '/products' }),
});

export const promo = defineSection({
  type: 'promo',
  label: 'Promo',
  settings: { ...button('primary', { group: 'Primary button' }) },
  component: ({ settings }) => <a href={settings.primary_link?.href}>{settings.primary_label}</a>,
});

lazyBlockHivatkozás másolása

A component whose code loads in its own chunk, server-rendered unless ssr is false.

lazyBlock<P extends object>(load: () => Promise<{
    default: ComponentType<P>;
}>, options?: LazyBlockOptions): ComponentType<P>

Parameters

• load: () => Promise<{ default: ComponentType<P>; }>: Imports the module whose default export is the component.
• options?: LazyBlockOptions: The loading fallback and whether it renders on the server.

Returns: A component that draws the loaded one.