Guided Product Finder

Мастер подбора товара: вопросы с ветвлением и объяснение, почему подошло. Pro · Магазин и платежи › Каталог

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add guided-product-finder

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { GuidedProductFinder } from 'valyro-ui-pro';

Prop	Type	Default
`questions` *	`FinderQuestion[]`		Questions in order; `next` on a question branches by answer.
`products` *	`FinderProduct[]`		Products the answers score.
`answers`	`FinderAnswers`		Answers by question id.
`defaultAnswers`	`FinderAnswers`	`EMPTY`	Initial answers when uncontrolled. Answers that already complete the quiz open it on the results.
`onAnswersChange`	`(answers: FinderAnswers) => void`		Called with all answers after each change.
`onComplete`	`(matches: FinderMatch<FinderProduct>[]) => void`		Called when the reader opens the results, with the ranking.
`onSelect`	`(product: FinderProduct) => void`		Called when the reader picks a product from the results (in place of following `href`).
`limit`	`number`	`3`	Products shown as matches. Default 3.
`loading`	`boolean`	`false`	Questions are loading: skeleton.
`error`	`ReactNode`		Loading failed: shown instead of the finder.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3).
`locale`	`string`		BCP 47 locale for numbers.
`labels`	`Partial<GuidedProductFinderLabels>`		Overrides for the built-in English text; keys left out keep their defaults.