Fejlesztőknek
Kezdj bele
Témák/Theme SDK/Modules/customer/Parts: SocialSignIn to OrdersScope

Parts: SocialSignIn to OrdersScope

Ez az oldal még csak angolul érhető el.

The parts of @poltura/theme-sdk/customer, SocialSignIn to OrdersScope.

Ezen az oldalon
import { … } from '@poltura/theme-sdk/customer';

SocialSignIn

The external sign-in buttons, with the terms and privacy note; nothing when no provider is on.

SocialSignIn(props: SocialSignInProps): ReactElement | null

The host runs the redirect to the provider and back, remembers the page and the language the shopper came from, and finishes the session.

Props: SocialSignInProps

Example

import { SocialSignIn, useAuthForm } from '@poltura/theme-sdk/customer';

export function OtherWays() {
  return <SocialSignIn form={useAuthForm('signIn')} />;
}

EmailCodeStep

The verify page's whole step: the field for the code from the email, then the password a sign-up chooses, with the button that finishes it.

EmailCodeStep(props: EmailCodeStepProps): ReactElement

Works inside the verify page's main section only. A shopper who opened the email's link arrives with the code held and sees the second part; one who read the email elsewhere types the code.

Props: EmailCodeStepProps

Example

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

export const verifyMain = overrideSection('verify-main', () => (
  <div className='mx-auto max-w-md py-12'>
    <EmailCodeStep />
  </div>
));

AuthFields

The sign-in or sign-up form the merchant placed on the page, drawn through the theme's override of it when there is one; nothing when the merchant hid it.

AuthFields(props: AuthFieldsProps): ReactElement | null

Works inside the sign-in and sign-up pages' main section only.

Props: AuthFieldsProps

Example

import { AuthFields, authRegions } from '@poltura/theme-sdk/customer';
import { Slot, overrideSection } from '@poltura/theme-sdk/elements';

export const authMain = overrideSection('auth-form', ({ attrs }) => (
  <div {...attrs}>
    <Slot name={authRegions.head} />
    <AuthFields className='mx-auto max-w-md' />
  </div>
));

BusinessSignUpFields

The company fields of a registration form: buyer type, company, tax number with its live check and tier applications; nothing without BusinessSignUp.

BusinessSignUpFields(props: BusinessSignUpFieldsProps): ReactElement | null

Props: BusinessSignUpFieldsProps

Example

import { AuthInput, AuthSubmit, BusinessSignUpFields, useAuthForm } from '@poltura/theme-sdk/customer';

export function SignUp() {
  const form = useAuthForm('register');
  return (
    <form onSubmit={(event) => { event.preventDefault(); void form.submit(); }}>
      <AuthInput form={form} field='email' />
      <AuthInput form={form} field='password' />
      <BusinessSignUpFields form={form} />
      <AuthSubmit form={form} />
    </form>
  );
}

OrdersScope

Hands a page of orders to the order history block placed inside it, so the section that pages and the block that lists read one page.

OrdersScope(props: OrdersScopeProps): ReactElement

Props: OrdersScopeProps

Example

import { useState } from 'react';
import { OrdersScope, accountRegions, useOrders } from '@poltura/theme-sdk/customer';
import { Slot } from '@poltura/theme-sdk/elements';

export function OrderHistory() {
  const [page] = useState(1);
  const orders = useOrders({ page });
  return (
    <OrdersScope orders={orders}>
      <Slot name={accountRegions.orders} />
    </OrdersScope>
  );
}
Utoljára frissítve